michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

docs: clarify Markdoc attributes

Browse source
This commit is contained in:
bholmesdev 2023-03-03 08:35:52 -05:00
parent 11c5a781ed
commit 6af17079ca
1 changed files with 11 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
packages/integrations/markdoc/README.md
View file

@ -149,7 +149,9 @@ export default defineConfig({
render: 'Heading', render: 'Heading',
// Markdoc requires type defs for each attribute. // Markdoc requires type defs for each attribute.
// These should mirror the `Props` type of the component // These should mirror the `Props` type of the component
// you are rendering. // you are rendering.
// See Markdoc's documentation on defining attributes
// https://markdoc.dev/docs/attributes#defining-attributes
attributes: { attributes: {
level: { type: String }, level: { type: String },
} }
@ -182,7 +184,7 @@ const { Content } = await entry.render();
#### Render Markdoc tags as Astro components #### Render Markdoc tags as Astro components
You may also configure [Markdoc tags](https://markdoc.dev/docs/tags) that map to components. You can configure a new tag from your `astro.config` like so, passiing the uppercase component name as the `render` prop: You may also configure [Markdoc tags](https://markdoc.dev/docs/tags) that map to components. You can configure a new tag from your `astro.config` using the `tags` attribute.
```js ```js
@ -197,6 +199,12 @@ export default defineConfig({
tags: { tags: {
aside: { aside: {
render: 'Aside', render: 'Aside',
attributes: {
// Component props as attribute definitions
// See Markdoc's documentation on defining attributes
// https://markdoc.dev/docs/attributes#defining-attributes
type: { type: String },
}
}, },
}, },
}), }),
@ -204,7 +212,7 @@ export default defineConfig({
}); });
``` ```
Then, you can wire this render name (`'Aside'`) to a component from the `components` prop: Then, you can wire this render name (`'Aside'`) to a component from the `components` prop via the `<Content />` component:
```astro ```astro