Astro Feature Test: MDX from CMS

Astro Component

import Highlight from '@components/Highlight.astro';

Test: Plain Astro Component with click event listener Test

▶ Interactive feature — view on fubits.dev Test: Plain Astro Component with click event listener{' '} Test

Svelte Component

Caution: the empty line between the import statement and the is mandatory.

import Counter from '@components/Counter.svelte';

▶ Interactive feature — view on fubits.dev

Caution: Currently, there’s a known bug in Astro and component styles aren’t imported properly at build time

Update: using Notion code blocks

Using a custom transformer for notion-to-md:

n2m.setCustomTransformer('code', async (block) => { /** type: 'code', code: { caption: [], rich_text: [ [Object] ], language: 'markdown' } */ const { code } = block

if (code?.language === 'markdown') { return code?.rich_text?.map((chunk) => chunk?.plain_text)?.join('') }

return block })

the input with language === markdown:

will be treated as a mdx component reference:

▶ Interactive feature — view on fubits.dev

Bonus - lazyload Svelte component (hydrate on demand)

The trick is to

wrap the component in an Astro HTML wrapper with display: none use the client:visible directive programatically change the visibility of the wrapper which will trigger the component import and the hydration

▶ Interactive feature — view on fubits.dev

Sources

MDX documentation Astro + MDX documentation notion-to-md: custom transformers