Minor Changes
-
#6653
7c439868a
Thanks @bholmesdev! - Simplify Markdoc configuration with a newmarkdoc.config.mjs
file. This lets you import Astro components directly to render as Markdoc tags and nodes, without the need for the previouscomponents
property. This new configuration also unlocks passing variables to your Markdoc from theContent
component (see the new docs).Migration
Move any existing Markdoc config from your
astro.config
to a newmarkdoc.config.mjs
file at the root of your project. This should be applied as a default export, with the optionaldefineMarkdocConfig()
helper for autocomplete in your editor.This example configures an
aside
Markdoc tag. Note that components should be imported and applied to therender
attribute directly, instead of passing the name as a string:// markdoc.config.mjs import { defineMarkdocConfig } from '@astrojs/markdoc/config'; import Aside from './src/components/Aside.astro'; export default defineMarkdocConfig({ tags: { aside: { render: Aside, }, }, });
You should also remove the
components
prop from yourContent
components. Since components are imported into your config directly, this is no longer needed.--- - import Aside from '../components/Aside.astro'; import { getEntryBySlug } from 'astro:content'; const entry = await getEntryBySlug('docs', 'why-markdoc'); const { Content } = await entry.render(); --- <Content - components={{ Aside }} />