{"id":31539753,"url":"https://github.com/escwxyz/payload-callouts","last_synced_at":"2025-10-04T09:13:58.769Z","repository":{"id":315201706,"uuid":"1058387210","full_name":"escwxyz/payload-callouts","owner":"escwxyz","description":"A server rendered callout block component supporting Obsidian / GitHub styles for Payload CMS","archived":false,"fork":false,"pushed_at":"2025-10-01T00:01:14.000Z","size":472,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-01T02:21:34.546Z","etag":null,"topics":["callouts","obsidian","payload","payload-cms","payload-plugin","payloadcms"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/payload-callouts","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/escwxyz.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-17T02:58:03.000Z","updated_at":"2025-10-01T00:01:14.000Z","dependencies_parsed_at":"2025-09-17T09:35:24.906Z","dependency_job_id":"a1f657eb-1820-4955-b7b0-22f62ed18c1d","html_url":"https://github.com/escwxyz/payload-callouts","commit_stats":null,"previous_names":["escwxyz/payload-callouts"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/escwxyz/payload-callouts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/escwxyz%2Fpayload-callouts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/escwxyz%2Fpayload-callouts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/escwxyz%2Fpayload-callouts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/escwxyz%2Fpayload-callouts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/escwxyz","download_url":"https://codeload.github.com/escwxyz/payload-callouts/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/escwxyz%2Fpayload-callouts/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278126714,"owners_count":25934346,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-03T02:00:06.070Z","response_time":53,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["callouts","obsidian","payload","payload-cms","payload-plugin","payloadcms"],"created_at":"2025-10-04T09:13:55.071Z","updated_at":"2025-10-04T09:13:58.763Z","avatar_url":"https://github.com/escwxyz.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Payload Callouts Plugin\n\nA Payload CMS plugin for creating beautiful callout blocks with GitHub and Obsidian themes.\n\n![github](./assets/github.png)\n![obsidian](./assets/obsidian.png)\n\n## Features\n\n**Multiple Themes**: GitHub and Obsidian-style callouts  \n**Rich Styling**: Pre-designed callout types with icons  \n**Rich Text Support**: Full RichText editor support with nested content  \n**Configurable**: Collapsible callouts with customizable defaults  \n\n## Supported Callout Types\n\n### GitHub Theme\n- **Note** - General information\n- **Tip** - Helpful suggestions  \n- **Important** - Critical information\n- **Warning** - Cautionary content\n- **Caution** - Danger alerts\n\n### Obsidian Theme\n- **Note** - General notes\n- **Abstract/Summary/Tldr** - Content summaries\n- **Info** - Information blocks\n- **Todo** - Task lists\n- **Tip/Hint** - Helpful suggestions\n- **Important** - Critical content\n- **Success/Check/Done** - Completion status\n- **Question/Help/FAQ** - Q\u0026A content\n- **Warning/Attention/Caution** - Warnings\n- **Failure/Missing/Fail** - Error states\n- **Danger/Error/Bug** - Critical errors\n- **Example** - Code examples\n- **Quote/Cite** - Quotations\n\n## Installation\n\n```bash\nnpm install payload-callouts\n# or\nyarn add payload-callouts\n# or\npnpm add payload-callouts\n```\n\n## Setup\n\n### 1. Configure the Plugin\n\nAdd the plugin to your Payload configuration:\n\n```typescript\n// payload.config.ts\nimport { payloadCallouts } from 'payload-callouts'\n\nexport default buildConfig({\n  plugins: [\n    payloadCallouts({\n      theme: 'github', // or 'obsidian'\n      blockSlug: 'callout', // optional, default: 'callout'\n      blockInterfaceName: 'CalloutBlock', // optional, default: 'CalloutBlock'\n      collapsible: true, // optional, default: true\n      defaultOpen: true, // optional, default: true\n    }),\n  ],\n  // ... rest of your config\n})\n```\n\n### 2. Add the Block to Your Collections\n\n```typescript\n// collections/Posts.ts\nimport { createBlockConfig } from 'payload-callouts'\n\nexport const Posts: CollectionConfig = {\n  slug: 'posts',\n  fields: [\n    {\n      name: 'content',\n      type: 'richText',\n      editor: lexicalEditor({\n        features: ({ rootFeatures }) =\u003e [\n          ...rootFeatures,\n          BlocksFeature({\n            blocks: [\n              createBlockConfig(), // Add callout blocks\n              // ... other blocks\n            ],\n          }),\n        ],\n      }),\n    },\n  ],\n}\n```\n\n### 3. Setup Frontend Rendering\n\nCreate a RichText component with callout converters:\n\n```typescript\n// components/RichText.tsx\nimport { createCalloutBlockJSXConverter } from 'payload-callouts/converters'\nimport {\n  RichText as ConvertRichText,\n  type JSXConvertersFunction,\n} from '@payloadcms/richtext-lexical/react'\n\nconst jsxConverters: JSXConvertersFunction = ({ defaultConverters }) =\u003e {\n  \n  const calloutBlockConverter = createCalloutBlockJSXConverter((content) =\u003e (\n    {/* Passing your customized RichText / ConvertRichText component */}\n    \u003cConvertRichText converters={jsxConverters} data={content} /\u003e\n  ));\n\n  return {\n    ...existingConverters,\n    blocks: {\n      ...existingConverters.blocks,\n      ...calloutBlockConverter.blocks,\n    },\n  };\n}\n\nexport default function RichText(props) {\n  return (\n    \u003cConvertRichText\n      className=\"prose dark:prose-invert max-w-none\"\n      converters={jsxConverters}\n      {...props}\n    /\u003e\n  )\n}\n```\n\n## Configuration Options\n\n```typescript\ninterface PayloadCalloutsConfig {\n  /** Enable or disable the plugin */\n  disabled?: boolean\n  \n  /** The slug for the callout block */\n  blockSlug?: string // default: 'callout'\n  \n  /** Interface name for TypeScript generation */\n  blockInterfaceName?: string // default: 'CalloutBlock'\n  \n  /** Theme to use */\n  theme?: 'github' | 'obsidian' // default: 'github'\n  \n  /** Whether callouts are collapsible by default */\n  collapsible?: boolean // default: true\n  \n  /** Whether callouts are open by default */\n  defaultOpen?: boolean // default: true\n}\n```\n\n## Styling\n\nThe plugin includes CSS modules for styling. You can customize the appearance by:\n\n1. **Using CSS Custom Properties**: Override the built-in CSS variables\n2. **Custom CSS**: Import and modify the provided styles\n3. **Tailwind Classes**: Add additional classes to the rendered components\n\n### CSS Custom Properties\n\n```css\n:root {\n  /* add the following line if you want dark mode support */\n  color-scheme: light dark; \n  --callout-border-radius: 8px;\n  --callout-padding: 1rem;\n  /* ... more variables */\n}\n```\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## License\n\nMIT License - see [LICENSE](./LICENSE) file for details.\n\n## Credits\n\nPart of the CSS styles are from [rehype-callouts](https://github.com/lin-stephanie/rehype-callouts).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fescwxyz%2Fpayload-callouts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fescwxyz%2Fpayload-callouts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fescwxyz%2Fpayload-callouts/lists"}