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

Fix: Markdoc v0.4.0 docs (#7593)

Browse source 
* docs: add docs link to markdoc error

* docs: add named exports guide to README

* chore: changeset

* edit: no like so

Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>

* edit: exposed as named exports

Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>

---------

Co-authored-by: bholmesdev <bholmesdev@gmail.com>
Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>
This commit is contained in:
Ben Holmes 2023-07-07 09:22:26 -04:00 committed by GitHub
parent 6f1c4ea388
commit c135633bf6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 31 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/sharp-ducks-walk.md Normal file
View file

@ -0,0 +1,5 @@
---
'@astrojs/markdoc': patch
---
Add a documentation link to the configuration error hint for those migration pre-v0.4.0 config to the latest version.

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

@ -136,6 +136,31 @@ Use tags like this fancy "aside" to add some _flair_ to your docs.
{% /aside %}
```
### Use Astro components from npm packages and TypeScript files
You may need to use Astro components exposed as named exports from TypeScript or JavaScript files. This is common when using npm packages and design systems.
You can pass the import name as the second argument to the `component()` function:
```js
// markdoc.config.mjs
import { defineMarkdocConfig, component } from '@astrojs/markdoc/config';
export default defineMarkdocConfig({
tags: {
tabs: {
render: component('@astrojs/starlight/components', 'Tabs'),
},
},
});
```
This generates the following import statement internally:
```ts
import { Tabs } from '@astrojs/starlight/components';
```
### Custom headings
`@astrojs/markdoc` automatically adds anchor links to your headings, and [generates a list of `headings` via the content collections API](https://docs.astro.build/en/guides/content-collections/#rendering-content-to-html). To further customize how headings are rendered, you can apply an Astro component [as a Markdoc node][markdoc-nodes].

2
packages/integrations/markdoc/src/load-config.ts
View file

@ -77,7 +77,7 @@ async function bundleConfigFile({
// This swallows the `hint` and blows up the stacktrace.
markdocError = new MarkdocError({
message: '`.astro` files are no longer supported in the Markdoc config.',
hint: 'Use the `component()` utility to specify a component path instead.',
hint: 'Use the `component()` utility to specify a component path instead. See https://docs.astro.build/en/guides/integrations-guide/markdoc/',
});
return {
// Stub with an unused default export.