I would like to create a remark plugin that can replace some tags like code or image with an Astro component. The remark plugins can be configured to be used in astro.config.mjs, but then how do I inject the Astro component in the transformer function ? how do I create a node.type and a node.value to be later interpreted as an Astro component ?
#Astro component in remark plugin
11 messages · Page 1 of 1 (latest)
In Markdown you kinda can't, in MDX you can though
or mdoc
I see, in mdx it's easier to replace components in the call than in a plugin https://docs.astro.build/en/guides/markdown-content/#custom-components-with-imported-mdx
that was just another attempt to rehype html or .md with Astro, which still not possible for a good reason, I think simply put Astro needs vite, and md remark does not use vite, while mdx remark does.
my goal is to rehype existing .md database and augment it with features. While mdx can do that to some extent with multiple dangerous fails that do not happen with .md, with mdoc it's out of scope as it does not even support html in the markdown.
my goal is to stick to the most commonly used markdown to have it visible in vscode and github while enhanced in astro website.
so we can think of the markdown for me as some sort of 'cms provider' that I want to render in Astro with Astro features.
mdoc does not even support html
With Markdoc it's theoretically possible to allow HTML tags, however it would involve changes to the Markdoc tokenizer and I'm not sure how easy it would be to do for the Markdoc included with <@&1055234544183287879>/markdoc
You can see the workaround here https://github.com/markdoc/markdoc/issues/10#issuecomment-1492560830
All in all, the thing you have described is exactly what Markdoc is built for. For example you could write a Markdoc config that would hook up to built in markdown elements and render them in some way using astro components
This is what we do in docs for our “asides” component: https://github.com/withastro/docs/blob/main/integrations/astro-asides.ts
As Erika noted, this only works with MDX because regular .md doesn’t know how to render components.
thank you for this valuable hint, this actually creates a new hope for the modern web (.md with Astro components)
I'll be following up on this, I started an mdoc astro example https://github.com/MicroWebStacks/astro-examples#31_collections-markdoc that I'll try to update.
between hacking mdx and hacking mdoc to achieve what I want, I prefer the mdoc path as it is more consistent with the content vs framework components separation concept. I hope that mdoc community gets wise enough to kepp .md and gfm compatibilit in mind.
the biggest pain I had with .mdx is that it does not support 'silent fail' which is crucial for trusted but unmanaged content deployment. with mdx the whole website build fails, and I have to edit the content with a patch to make it build again. That shows that mdx is a developper file format and not a content creator file format.