Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Markdoc] New config format with runtime variable support! #6653

Merged
merged 33 commits into from
Mar 27, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
33 commits
Select commit Hold shift + click to select a range
595b069
deps: esbuild
bholmesdev Mar 23, 2023
2d452a2
feat: support direct component imports for render!
bholmesdev Mar 23, 2023
2c7e055
deps: add devalue back
bholmesdev Mar 24, 2023
d08917b
refactor: remove unused components prop
bholmesdev Mar 24, 2023
e1689b7
refactor: load experimental assets config separately
bholmesdev Mar 24, 2023
4cc3797
fix: upate Content type def to support props
bholmesdev Mar 24, 2023
228bfd0
refactor: replace astro stub with inline data
bholmesdev Mar 24, 2023
b321629
feat: pass through viteId to getRenderMod
bholmesdev Mar 24, 2023
74d904f
fix: add back $entry var with defaults convention
bholmesdev Mar 24, 2023
6c88258
chore: remove unneeded validateRenderProps
bholmesdev Mar 24, 2023
3e374a9
chore: remove uneeded validateComponents
bholmesdev Mar 24, 2023
86c42fb
fix: remove userMarkdocConfig prop
bholmesdev Mar 24, 2023
6b93e92
chore: add helpful error for legacy config
bholmesdev Mar 24, 2023
7667ee5
deps: kleur
bholmesdev Mar 24, 2023
639941f
fix: add back `isCapitalized`
bholmesdev Mar 24, 2023
69070b2
fix: log instead of throw to avoid scary stacktrace
bholmesdev Mar 24, 2023
8d046aa
chore: delete more old logic (nice)
bholmesdev Mar 24, 2023
76d1183
chore: delete MORE unused utils
bholmesdev Mar 24, 2023
2415b24
chore: comment on separate assets config
bholmesdev Mar 24, 2023
c680587
chore: remove console.log
bholmesdev Mar 24, 2023
d88a81e
chore: general code cleanup
bholmesdev Mar 24, 2023
1826064
test: new render config
bholmesdev Mar 24, 2023
b0a791a
docs: new README
bholmesdev Mar 24, 2023
e0d797e
fix: add expect-error on astro:assets
bholmesdev Mar 24, 2023
0d814f1
feat: add defineMarkdocConfig helper
bholmesdev Mar 24, 2023
13172f2
docs: update example README
bholmesdev Mar 24, 2023
fdaaee9
test: add runtime variable
bholmesdev Mar 24, 2023
a644472
chore: lint
bholmesdev Mar 24, 2023
da8b04f
chore: changeset
bholmesdev Mar 24, 2023
bce7a03
chore: add component import deletion
bholmesdev Mar 24, 2023
894f807
docs: add notes on Vite fork
bholmesdev Mar 24, 2023
b75570d
fix: astro check
bholmesdev Mar 24, 2023
b51d9a6
chore: add `.mts` to markdoc config formats
bholmesdev Mar 27, 2023
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 42 additions & 0 deletions .changeset/metal-cameras-bow.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
---
'@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 }}
/>
```
15 changes: 6 additions & 9 deletions examples/with-markdoc/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,23 +23,20 @@ Inside of your Astro project, you'll see the following folders and files:
└── docs/
│ └── intro.mdoc
| └── config.ts
│ └── components/
| ├── Aside.astro
│ └── DocsContent.astro
│ └── layouts/
│ └── Layout.astro
│ └── pages/
│ └── index.astro
│ └── components/Aside.astro
│ └── layouts/Layout.astro
│ └── pages/index.astro
| └── env.d.ts
├── astro.config.mjs
├── markdoc.config.mjs
├── README.md
├── package.json
└── tsconfig.json
```

Markdoc (`.mdoc`) files can be used in content collections to author your Markdown content alongside Astro and server-rendered UI framework components (React, Vue, Svelte, and more). See `src/content/docs/` for an example file.
Markdoc (`.mdoc`) files can be used in content collections. See `src/content/docs/` for an example file.

You can also apply Astro components and server-rendered UI components (React, Vue, Svelte, etc) to your Markdoc files. See `src/content/DocsContent.astro` for an example.
You can also render Astro components from your Markdoc files using [tags](https://markdoc.dev/docs/tags). See the `markdoc.config.mjs` file for an example configuration.

## 🧞 Commands

Expand Down
14 changes: 1 addition & 13 deletions examples/with-markdoc/astro.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,5 @@ import markdoc from '@astrojs/markdoc';

// https://astro.build/config
export default defineConfig({
integrations: [
markdoc({
tags: {
aside: {
render: 'Aside',
attributes: {
type: { type: String },
title: { type: String },
},
},
},
}),
],
integrations: [markdoc()],
});
14 changes: 14 additions & 0 deletions examples/with-markdoc/markdoc.config.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { defineMarkdocConfig } from '@astrojs/markdoc/config';
import Aside from './src/components/Aside.astro';

export default defineMarkdocConfig({
tags: {
aside: {
render: Aside,
attributes: {
type: { type: String },
title: { type: String },
},
},
},
});
3 changes: 2 additions & 1 deletion examples/with-markdoc/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
},
"dependencies": {
"@astrojs/markdoc": "^0.0.5",
"astro": "^2.1.7"
"astro": "^2.1.7",
"kleur": "^4.1.5"
}
}
32 changes: 0 additions & 32 deletions examples/with-markdoc/src/components/DocsContent.astro

This file was deleted.

19 changes: 13 additions & 6 deletions examples/with-markdoc/src/pages/index.astro
Original file line number Diff line number Diff line change
@@ -1,18 +1,25 @@
---
import { getEntryBySlug } from 'astro:content';
import DocsContent from '../components/DocsContent.astro';
import Layout from '../layouts/Layout.astro';

const intro = await getEntryBySlug('docs', 'intro');
const { Content } = await intro.render();
---

<Layout title={intro.data.title}>
<main>
<h1>{intro.data.title}</h1>
<!-- `DocsContent` is a thin wrapper around -->
<!-- the `Content` component provided by Content Collections, -->
<!-- with added configuration for components. -->
<!-- This allows you to share global components wherever you render your Markdoc. -->
<DocsContent entry={intro} />
<Content variables={{ revealSecret: true }} />
</main>
</Layout>

<style is:global>
table {
margin-block: 2rem;
margin-inline: auto;
}
table td {
padding-block: 0.3rem;
padding-inline: 0.5rem;
}
</style>
1 change: 1 addition & 0 deletions packages/astro/src/@types/astro.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1056,6 +1056,7 @@ export interface ContentEntryType {
getRenderModule?(
this: rollup.PluginContext,
params: {
viteId: string;
entry: ContentEntryModule;
}
): rollup.LoadResult | Promise<rollup.LoadResult>;
Expand Down
2 changes: 1 addition & 1 deletion packages/astro/src/content/vite-plugin-content-imports.ts
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@ export const _internal = {
});
}

return contentRenderer.bind(this)({ entry });
return contentRenderer.bind(this)({ entry, viteId });
},
});
}
Expand Down
Loading