7c439868a3
* deps: esbuild * feat: support direct component imports for render! * deps: add devalue back * refactor: remove unused components prop * refactor: load experimental assets config separately * fix: upate Content type def to support props * refactor: replace astro stub with inline data * feat: pass through viteId to getRenderMod * fix: add back $entry var with defaults convention * chore: remove unneeded validateRenderProps * chore: remove uneeded validateComponents * fix: remove userMarkdocConfig prop * chore: add helpful error for legacy config * deps: kleur * fix: add back `isCapitalized` * fix: log instead of throw to avoid scary stacktrace * chore: delete more old logic (nice) * chore: delete MORE unused utils * chore: comment on separate assets config * chore: remove console.log * chore: general code cleanup * test: new render config * docs: new README * fix: add expect-error on astro:assets * feat: add defineMarkdocConfig helper * docs: update example README * test: add runtime variable * chore: lint * chore: changeset * chore: add component import deletion * docs: add notes on Vite fork * fix: astro check * chore: add `.mts` to markdoc config formats
1.5 KiB
| @astrojs/markdoc | astro |
|---|---|
| minor | patch |
Simplify Markdoc configuration with a new markdoc.config.mjs file. This lets you import Astro components directly to render as Markdoc tags and nodes, without the need for the previous components property. This new configuration also unlocks passing variables to your Markdoc from the Content component (see the new docs).
Migration
Move any existing Markdoc config from your astro.config to a new markdoc.config.mjs file at the root of your project. This should be applied as a default export, with the optional defineMarkdocConfig() helper for autocomplete in your editor.
This example configures an aside Markdoc tag. Note that components should be imported and applied to the render 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 your Content 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 }}
/>