mirror of
https://github.com/withastro/astro.git
synced 2024-12-30 22:03:56 -05:00
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
42 lines
1.5 KiB
Markdown
42 lines
1.5 KiB
Markdown
---
|
|
'@astrojs/markdoc': minor
|
|
'astro': 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](https://docs.astro.build/en/guides/integrations-guide/markdoc/#pass-markdoc-variables)).
|
|
|
|
## 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:
|
|
|
|
```js
|
|
// 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.
|
|
|
|
```diff
|
|
---
|
|
- 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 }}
|
|
/>
|
|
```
|