🍿 Minor Changes
-
#6653
7c439868aThanks @bholmesdev! - Simplify Markdoc configuration with a newmarkdoc.config.mjsfile. This lets you import Astro components directly to render as Markdoc tags and nodes, without the need for the previouscomponentsproperty. This new configuration also unlocks passing variables to your Markdoc from theContentcomponent (see the new docs).Move any existing Markdoc config from your
astro.configto a newmarkdoc.config.mjsfile 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
asideMarkdoc tag. Note that components should be imported and applied to therenderattribute 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
componentsprop from yourContentcomponents. 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();---<Contentcomponents={{ Aside }}/>