{
  "$type": "site.standard.document",
  "content": {
    "$type": "at.markpub.markdown",
    "flavor": "gfm",
    "renderingRules": "markdown-it",
    "text": {
      "$type": "at.markpub.text",
      "markdown": "## Astro Component\n```html\nimport Highlight from '@components/Highlight.astro';\n\n<Highlight>\n\tTest: Plain Astro Component with `click` event listener\n\t<button onclick=\"alert('button clicked')\">Test</button>\n</Highlight>\n```\n\n---\n\n> ▶ **Interactive feature** — [view on fubits.dev](https://fubits.dev/notes/2023-09-08-astro-feature-test--mdx-from-cms/)\n\n---\n\tTest: Plain Astro Component with `click` event listener{' '}\n\t<button onclick=\"alert('button clicked')\">Test</button>\n</Highlight>\n\n## Svelte Component\n\n> **Caution**: the empty line between the `import` statement and the `<Component />` is mandatory.\n```html\nimport Counter from '@components/Counter.svelte';\n\n<Counter client:visible=\"svelte\" value=\"5\" />\n```\n\n---\n\n> ▶ **Interactive feature** — [view on fubits.dev](https://fubits.dev/notes/2023-09-08-astro-feature-test--mdx-from-cms/)\n\n---\n\n> **Caution**: Currently, [there’s a known bug in Astro](https://github.com/withastro/astro/issues/7761) and component styles aren’t imported properly at **build** time\n\n## Update: using Notion code blocks\n\nUsing a custom transformer for [notion-to-md](https://github.com/souvikinator/notion-to-md):\n```javascript\nn2m.setCustomTransformer('code', async (block) => {\n\t/**\n\t *   type: 'code',\n\t *   code: { caption: [], rich_text: [ [Object] ], language: 'markdown' }\n\t */\n\tconst { code } = block\n\n\tif (code?.language === 'markdown') {\n\t\treturn code?.rich_text?.map((chunk) => chunk?.plain_text)?.join('')\n\t}\n\n\treturn block\n})\n```\nthe input with `language === markdown`:\n```html\n<Counter client:visible=\"svelte\" value=\"10\" />\n```\nwill be treated as a `mdx` component reference:\n\n---\n\n> ▶ **Interactive feature** — [view on fubits.dev](https://fubits.dev/notes/2023-09-08-astro-feature-test--mdx-from-cms/)\n\n---\n\n## Bonus - lazyload Svelte component (hydrate on demand)\n\n> The trick is to\n\n- wrap the component in an Astro HTML wrapper with `display: none`\n- use the `client:visible` directive\n- programatically change the visibility of the wrapper which will trigger the component import and the hydration\n\n---\n\n> ▶ **Interactive feature** — [view on fubits.dev](https://fubits.dev/notes/2023-09-08-astro-feature-test--mdx-from-cms/)\n\n---\n\n## Sources\n\n- [MDX documentation](https://mdxjs.com/docs/what-is-mdx)\n- [Astro + MDX documentation](https://docs.astro.build/en/guides/markdown-content/#markdown-and-mdx-pages)\n- [notion-to-md: custom transformers](https://github.com/souvikinator/notion-to-md#custom-transformers)\n"
    }
  },
  "description": "How to use Notion as a visual rich text MDX editor",
  "path": "/notes/2023-09-08-astro-feature-test--mdx-from-cms/",
  "publishedAt": "2023-09-08T00:00:00.000Z",
  "site": "at://did:plc:6aglx53tojyuwxwueap5og3h/site.standard.publication/self",
  "tags": [
    "MDX",
    "Svelte",
    "Astro"
  ],
  "textContent": "Astro Component\n\nimport Highlight from '@components/Highlight.astro';\n\n<Highlight>\nTest: Plain Astro Component with click event listener\n<button onclick=\"alert('button clicked')\">Test</button>\n</Highlight>\n\n▶ Interactive feature — view on fubits.dev\nTest: Plain Astro Component with click event listener{' '}\n<button onclick=\"alert('button clicked')\">Test</button>\n</Highlight>\n\nSvelte Component\n\nCaution: the empty line between the import statement and the <Component /> is mandatory.\n\nimport Counter from '@components/Counter.svelte';\n\n<Counter client:visible=\"svelte\" value=\"5\" />\n\n▶ Interactive feature — view on fubits.dev\n\nCaution: Currently, there’s a known bug in Astro and component styles aren’t imported properly at build time\n\nUpdate: using Notion code blocks\n\nUsing a custom transformer for notion-to-md:\n\nn2m.setCustomTransformer('code', async (block) => {\n/**\ntype: 'code',\ncode: { caption: [], rich_text: [ [Object] ], language: 'markdown' }\n*/\nconst { code } = block\n\nif (code?.language === 'markdown') {\nreturn code?.rich_text?.map((chunk) => chunk?.plain_text)?.join('')\n}\n\nreturn block\n})\n\nthe input with language === markdown:\n\n<Counter client:visible=\"svelte\" value=\"10\" />\n\nwill be treated as a mdx component reference:\n\n▶ Interactive feature — view on fubits.dev\n\nBonus - lazyload Svelte component (hydrate on demand)\n\nThe trick is to\n\nwrap the component in an Astro HTML wrapper with display: none\nuse the client:visible directive\nprogramatically change the visibility of the wrapper which will trigger the component import and the hydration\n\n▶ Interactive feature — view on fubits.dev\n\nSources\n\nMDX documentation\nAstro + MDX documentation\nnotion-to-md: custom transformers",
  "title": "Astro Feature Test: MDX from CMS",
  "updatedAt": "2023-11-24T00:00:00.000Z"
}