diff options
| author |  Ben Holmes <hey@bholmes.dev>
| 2023-07-07 09:22:26 -0400 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2023-07-07 09:22:26 -0400 |
| commit | c135633bf6a84e751249920cba9009f0e394e29a (patch) | |
| tree | 2a721fe8fcd4fdf813199b0559c6726da6ba93bb | |
| parent | 6f1c4ea388bf03228e3b6e86997122f07233d02b (diff) | |
| download | astro-c135633bf6a84e751249920cba9009f0e394e29a.tar.gz astro-c135633bf6a84e751249920cba9009f0e394e29a.tar.zst astro-c135633bf6a84e751249920cba9009f0e394e29a.zip | |
Fix: Markdoc v0.4.0 docs (#7593)
* 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>
| -rw-r--r-- | .changeset/sharp-ducks-walk.md | 5 | ||||
| -rw-r--r-- | packages/integrations/markdoc/README.md | 25 | ||||
| -rw-r--r-- | packages/integrations/markdoc/src/load-config.ts | 2 |
3 files changed, 31 insertions, 1 deletions
diff --git a/.changeset/sharp-ducks-walk.md b/.changeset/sharp-ducks-walk.md new file mode 100644 index 000000000..b65a34e53 --- /dev/null +++ b/.changeset/sharp-ducks-walk.md @@ -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. diff --git a/packages/integrations/markdoc/README.md b/packages/integrations/markdoc/README.md index 4250813d3..15bf24467 100644 --- a/packages/integrations/markdoc/README.md +++ b/packages/integrations/markdoc/README.md @@ -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]. diff --git a/packages/integrations/markdoc/src/load-config.ts b/packages/integrations/markdoc/src/load-config.ts index 23a397e47..723516ce7 100644 --- a/packages/integrations/markdoc/src/load-config.ts +++ b/packages/integrations/markdoc/src/load-config.ts @@ -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. |