@astrojs/markdoc 0.2.2 → 0.3.0

package/README.md

@@ -97,13 +97,9 @@ const { Content } = await entry.render();
 
 `@astrojs/markdoc` offers configuration options to use all of Markdoc's features and connect UI components to your content.
 
-### Using components
+### Use Astro components as Markdoc tags
 
-You can add Astro components to your Markdoc using both [Markdoc tags][markdoc-tags] and HTML element [nodes][markdoc-nodes].
-
-#### Render Markdoc tags as Astro components
-
-You may configure [Markdoc tags][markdoc-tags] that map to components. You can configure a new tag by creating a `markdoc.config.mjs|ts` file at the root of your project and configuring the `tag` attribute.
+You can configure [Markdoc tags][markdoc-tags] that map to `.astro` components. You can add a new tag by creating a `markdoc.config.mjs|ts` file at the root of your project and configuring the `tag` attribute.
 
 This example renders an `Aside` component, and allows a `type` prop to be passed as a string:
 
@@ -141,9 +137,11 @@ Use tags like this fancy "aside" to add some *flair* to your docs.
 {% /aside %}
 ```
 
-#### Render Markdoc nodes / HTML elements as Astro 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].
 
-You may also want to map standard HTML elements like headings and paragraphs to components. For this, you can configure a custom [Markdoc node][markdoc-nodes]. This example overrides Markdoc's `heading` node to render a `Heading` component, and passes through Astro's default heading properties to define attributes and generate heading ids / slugs:
+This example renders a `Heading.astro` component using the `render` property:
 
 ```js
 // markdoc.config.mjs
@@ -154,26 +152,115 @@ export default defineMarkdocConfig({
   nodes: {
     heading: {
       render: Heading,
+      // Preserve default anchor link generation
       ...nodes.heading,
     },
   },
 })
 ```
 
-All Markdown headings will render the `Heading.astro` component and pass `attributes` as component props. For headings, Astro provides the following attributes by default:
+All Markdown headings will render the `Heading.astro` component and pass the following `attributes` as component props:
 
 - `level: number` The heading level 1 - 6
 - `id: string` An `id` generated from the heading's text contents. This corresponds to the `slug` generated by the [content `render()` function](https://docs.astro.build/en/guides/content-collections/#rendering-content-to-html).
 
 For example, the heading `### Level 3 heading!` will pass `level: 3` and `id: 'level-3-heading'` as component props.
 
+### Syntax highlighting
+
+`@astrojs/markdoc` provides [Shiki](https://github.com/shikijs/shiki) and [Prism](https://github.com/PrismJS) extensions to highlight your code blocks.
+
+#### Shiki
+
+Apply the `shiki()` extension to your Markdoc config using the `extends` property. You can optionally pass a shiki configuration object:
+
+```js
+// markdoc.config.mjs
+import { defineMarkdocConfig } from '@astrojs/markdoc/config';
+import shiki from '@astrojs/markdoc/shiki';
+
+export default defineMarkdocConfig({
+  extends: [
+    shiki({
+      // Choose from Shiki's built-in themes (or add your own)
+      // Default: 'github-dark'
+      // https://github.com/shikijs/shiki/blob/main/docs/themes.md
+      theme: 'dracula',
+      // Enable word wrap to prevent horizontal scrolling
+      // Default: false
+      wrap: true,
+      // Pass custom languages
+      // Note: Shiki has countless langs built-in, including `.astro`!
+      // https://github.com/shikijs/shiki/blob/main/docs/languages.md
+      langs: [],
+    })
+  ],
+})
+```
+
+#### Prism
+
+Apply the `prism()` extension to your Markdoc config using the `extends` property.
+
+```js
+// markdoc.config.mjs
+import { defineMarkdocConfig } from '@astrojs/markdoc/config';
+import prism from '@astrojs/markdoc/prism';
+
+export default defineMarkdocConfig({
+  extends: [prism()],
+})
+```
+
+📚 To learn about configuring Prism stylesheets, [see our syntax highlighting guide](https://docs.astro.build/en/guides/markdown-content/#prism-configuration).
+
+### Set the root HTML element
+
+Markdoc wraps documents with an `<article>` tag by default. This can be changed from the `document` Markdoc node. This accepts an HTML element name or `null` if you prefer to remove the wrapper element:
+
+```js
+// markdoc.config.mjs
+import { defineMarkdocConfig, nodes } from '@astrojs/markdoc/config';
+
+export default defineMarkdocConfig({
+  nodes: {
+    document: {
+      render: null, // default 'article'
+      ...nodes.document, // Apply defaults for other options
+    },
+  },
+})
+```
+
+### Custom Markdoc nodes / elements
+
+You may want to render standard Markdown elements, such as paragraphs and bolded text, as Astro components. For this, you can configure a [Markdoc node][markdoc-nodes]. If a given node receives attributes, they will be available as component props.
+
+This example renders blockquotes with a custom `Quote.astro` component:
+
+```js
+// markdoc.config.mjs
+import { defineMarkdocConfig, nodes } from '@astrojs/markdoc/config';
+import Quote from './src/components/Quote.astro';
+
+export default defineMarkdocConfig({
+  nodes: {
+    blockquote: {
+      render: Quote,
+      // Apply Markdoc's defaults for other options
+      ...nodes.blockquote,
+    },
+  },
+})
+```
+
 📚 [Find all of Markdoc's built-in nodes and node attributes on their documentation.](https://markdoc.dev/docs/nodes#built-in-nodes)
 
-#### Use client-side UI components
+### Use client-side UI components
 
-Today, the `components` prop does not support the `client:` directive for hydrating components. To embed client-side components, create a wrapper `.astro` file to import your component and apply a `client:` directive manually.
+Tags and nodes are restricted to `.astro` files. To embed client-side UI components in Markdoc, [use a wrapper `.astro` component that renders a framework component](/en/core-concepts/framework-components/#nesting-framework-components) with your desired `client:` directive.
 
-This example wraps a `Aside.tsx` component with a `ClientAside.astro` wrapper:
+This example wraps a React `Aside.tsx` component with a `ClientAside.astro` component:
 
 ```astro
 ---
@@ -184,17 +271,17 @@ import Aside from './Aside';
 <Aside {...Astro.props} client:load />
 ```
 
-This component can be passed to the `render` prop for any [tag][markdoc-tags] or [node][markdoc-nodes] in your config:
+This Astro component can now be passed to the `render` prop for any [tag][markdoc-tags] or [node][markdoc-nodes] in your config:
 
 ```js
 // markdoc.config.mjs
 import { defineMarkdocConfig } from '@astrojs/markdoc/config';
-import Aside from './src/components/Aside.astro';
+import ClientAside from './src/components/ClientAside.astro';
 
 export default defineMarkdocConfig({
   tags: {
     aside: {
-      render: Aside,
+      render: ClientAside,
       attributes: {
         type: { type: String },
       }
@@ -203,20 +290,6 @@ export default defineMarkdocConfig({
 })
 ```
 
-### Access frontmatter and content collection information from your templates
-
-You can access content collection information from your Markdoc templates using the `$entry` variable. This includes the entry `slug`, `collection` name, and frontmatter `data` parsed by your content collection schema (if any). This example renders the `title` frontmatter property as a heading:
-
-```md
----
-title: Welcome to Markdoc 👋
----
-
-# {% $entry.data.title %}
-```
-
-The `$entry` object matches [the `CollectionEntry` type](https://docs.astro.build/en/reference/api-reference/#collection-entry-type), excluding the `.render()` property.
-
 ### Markdoc config
 
 The `markdoc.config.mjs|ts` file accepts [all Markdoc configuration options](https://markdoc.dev/docs/config), including [tags](https://markdoc.dev/docs/tags) and [functions](https://markdoc.dev/docs/functions).
@@ -292,6 +365,23 @@ export default defineMarkdocConfig({
 })
 ```
 
+### Access frontmatter from your Markdoc content
+
+To access frontmatter, you can pass the entry `data` property [as a variable](#pass-markdoc-variables) where you render your content:
+
+```astro
+---
+import { getEntry } from 'astro:content';
+
+const entry = await getEntry('docs', 'why-markdoc');
+const { Content } = await entry.render();
+---
+
+<Content frontmatter={entry.data} />
+```
+
+This can now be accessed as `$frontmatter` in your Markdoc.
+
 ## Examples
 
 *   The [Astro Markdoc starter template](https://github.com/withastro/astro/tree/latest/examples/with-markdoc) shows how to use Markdoc files in your Astro project.

package/components/Renderer.astro

@@ -1,5 +1,4 @@
 ---
-//! astro-head-inject
 import type { Config } from '@markdoc/markdoc';
 import Markdoc from '@markdoc/markdoc';
 import { ComponentNode, createTreeNode } from './TreeNode.js';
@@ -15,4 +14,4 @@ const ast = Markdoc.Ast.fromJSON(stringifiedAst);
 const content = Markdoc.transform(ast, config);
 ---
 
-<ComponentNode treeNode={await createTreeNode(content)} />
+<ComponentNode treeNode={createTreeNode(content)} />

package/components/TreeNode.ts

@@ -6,24 +6,18 @@ import {
 	createComponent,
 	renderComponent,
 	render,
-	renderScriptElement,
-	renderUniqueStylesheet,
-	createHeadAndContent,
-	unescapeHTML,
-	renderTemplate,
+	HTMLString,
+	isHTMLString,
 } from 'astro/runtime/server/index.js';
 
 export type TreeNode =
 	| {
 			type: 'text';
-			content: string;
+			content: string | HTMLString;
 	  }
 	| {
 			type: 'component';
 			component: AstroInstance['default'];
-			collectedLinks?: string[];
-			collectedStyles?: string[];
-			collectedScripts?: string[];
 			props: Record<string, any>;
 			children: TreeNode[];
 	  }
@@ -37,6 +31,7 @@ export type TreeNode =
 export const ComponentNode = createComponent({
 	factory(result: any, { treeNode }: { treeNode: TreeNode }) {
 		if (treeNode.type === 'text') return render`${treeNode.content}`;
+
 		const slots = {
 			default: () =>
 				render`${treeNode.children.map((child) =>
@@ -44,85 +39,39 @@ export const ComponentNode = createComponent({
 				)}`,
 		};
 		if (treeNode.type === 'component') {
-			let styles = '',
-				links = '',
-				scripts = '';
-			if (Array.isArray(treeNode.collectedStyles)) {
-				styles = treeNode.collectedStyles
-					.map((style: any) =>
-						renderUniqueStylesheet({
-							type: 'inline',
-							content: style,
-						})
-					)
-					.join('');
-			}
-			if (Array.isArray(treeNode.collectedLinks)) {
-				links = treeNode.collectedLinks
-					.map((link: any) => {
-						return renderUniqueStylesheet(result, {
-							href: link[0] === '/' ? link : '/' + link,
-						});
-					})
-					.join('');
-			}
-			if (Array.isArray(treeNode.collectedScripts)) {
-				scripts = treeNode.collectedScripts
-					.map((script: any) => renderScriptElement(script))
-					.join('');
-			}
-
-			const head = unescapeHTML(styles + links + scripts);
-
-			let headAndContent = createHeadAndContent(
-				head,
-				renderTemplate`${renderComponent(
-					result,
-					treeNode.component.name,
-					treeNode.component,
-					treeNode.props,
-					slots
-				)}`
-			);
-
-			// Let the runtime know that this component is being used.
-			result.propagators.set(
-				{},
-				{
-					init() {
-						return headAndContent;
-					},
-				}
+			return renderComponent(
+				result,
+				treeNode.component.name,
+				treeNode.component,
+				treeNode.props,
+				slots
 			);
-
-			return headAndContent;
 		}
 		return renderComponent(result, treeNode.tag, treeNode.tag, treeNode.attributes, slots);
 	},
-	propagation: 'self',
+	propagation: 'none',
 });
 
-export async function createTreeNode(
-	node: RenderableTreeNode | RenderableTreeNode[]
-): Promise<TreeNode> {
-	if (typeof node === 'string' || typeof node === 'number') {
+export function createTreeNode(node: RenderableTreeNode | RenderableTreeNode[]): TreeNode {
+	if (isHTMLString(node)) {
+		return { type: 'text', content: node as HTMLString };
+	} else if (typeof node === 'string' || typeof node === 'number') {
 		return { type: 'text', content: String(node) };
 	} else if (Array.isArray(node)) {
 		return {
 			type: 'component',
 			component: Fragment,
 			props: {},
-			children: await Promise.all(node.map((child) => createTreeNode(child))),
+			children: node.map((child) => createTreeNode(child)),
 		};
 	} else if (node === null || typeof node !== 'object' || !Markdoc.Tag.isTag(node)) {
 		return { type: 'text', content: '' };
 	}
 
-	const children = await Promise.all(node.children.map((child) => createTreeNode(child)));
-
 	if (typeof node.name === 'function') {
 		const component = node.name;
 		const props = node.attributes;
+		const children = node.children.map((child) => createTreeNode(child));
 
 		return {
 			type: 'component',
@@ -130,38 +79,12 @@ export async function createTreeNode(
 			props,
 			children,
 		};
-	} else if (isPropagatedAssetsModule(node.name)) {
-		const { collectedStyles, collectedLinks, collectedScripts } = node.name;
-		const component = (await node.name.getMod())?.default ?? Fragment;
-		const props = node.attributes;
-
-		return {
-			type: 'component',
-			component,
-			collectedStyles,
-			collectedLinks,
-			collectedScripts,
-			props,
-			children,
-		};
 	} else {
 		return {
 			type: 'element',
 			tag: node.name,
 			attributes: node.attributes,
-			children,
+			children: node.children.map((child) => createTreeNode(child)),
 		};
 	}
 }
-
-type PropagatedAssetsModule = {
-	__astroPropagation: true;
-	getMod: () => Promise<AstroInstance['default']>;
-	collectedStyles: string[];
-	collectedLinks: string[];
-	collectedScripts: string[];
-};
-
-function isPropagatedAssetsModule(module: any): module is PropagatedAssetsModule {
-	return typeof module === 'object' && module != null && '__astroPropagation' in module;
-}

package/dist/config.d.ts

@@ -1,5 +1,10 @@
 import type { ConfigType as MarkdocConfig } from '@markdoc/markdoc';
 import _Markdoc from '@markdoc/markdoc';
+export type AstroMarkdocConfig<C extends Record<string, any> = Record<string, any>> = MarkdocConfig & {
+    ctx?: C;
+    extends?: ResolvedAstroMarkdocConfig[];
+};
+export type ResolvedAstroMarkdocConfig = Omit<AstroMarkdocConfig, 'extends'>;
 export declare const Markdoc: typeof _Markdoc;
 export declare const nodes: {
     heading: import("@markdoc/markdoc").Schema;
@@ -37,4 +42,4 @@ export declare const nodes: {
     error: {};
     node: {};
 };
-export declare function defineMarkdocConfig(config: MarkdocConfig): MarkdocConfig;
+export declare function defineMarkdocConfig(config: AstroMarkdocConfig): AstroMarkdocConfig;

package/dist/config.js

@@ -1,7 +1,7 @@
 import _Markdoc from "@markdoc/markdoc";
-import { nodes as astroNodes } from "./nodes/index.js";
+import { heading } from "./heading-ids.js";
 const Markdoc = _Markdoc;
-const nodes = { ...Markdoc.nodes, ...astroNodes };
+const nodes = { ...Markdoc.nodes, heading };
 function defineMarkdocConfig(config) {
   return config;
 }

package/dist/extensions/prism.d.ts

@@ -0,0 +1,2 @@
+import { type AstroMarkdocConfig } from '../config.js';
+export default function prism(): AstroMarkdocConfig;

package/dist/extensions/prism.js

@@ -0,0 +1,21 @@
+import { unescapeHTML } from "astro/runtime/server/index.js";
+import { runHighlighterWithAstro } from "@astrojs/prism/dist/highlighter";
+import { Markdoc } from "../config.js";
+function prism() {
+  return {
+    nodes: {
+      fence: {
+        attributes: Markdoc.nodes.fence.attributes,
+        transform({ attributes: { language, content } }) {
+          const { html, classLanguage } = runHighlighterWithAstro(language, content);
+          return unescapeHTML(
+            `<pre class="${classLanguage}"><code class="${classLanguage}">${html}</code></pre>`
+          );
+        }
+      }
+    }
+  };
+}
+export {
+  prism as default
+};

package/dist/extensions/shiki.d.ts

@@ -0,0 +1,3 @@
+import type { ShikiConfig } from 'astro';
+import type { AstroMarkdocConfig } from '../config.js';
+export default function shiki({ langs, theme, wrap, }?: ShikiConfig): Promise<AstroMarkdocConfig>;

package/dist/extensions/shiki.js

@@ -0,0 +1,100 @@
+import { unescapeHTML } from "astro/runtime/server/index.js";
+import Markdoc from "@markdoc/markdoc";
+import { getHighlighter } from "shiki";
+const compatThemes = {
+  "material-darker": "material-theme-darker",
+  "material-default": "material-theme",
+  "material-lighter": "material-theme-lighter",
+  "material-ocean": "material-theme-ocean",
+  "material-palenight": "material-theme-palenight"
+};
+const normalizeTheme = (theme) => {
+  if (typeof theme === "string") {
+    return compatThemes[theme] || theme;
+  } else if (compatThemes[theme.name]) {
+    return { ...theme, name: compatThemes[theme.name] };
+  } else {
+    return theme;
+  }
+};
+const ASTRO_COLOR_REPLACEMENTS = {
+  "#000001": "var(--astro-code-color-text)",
+  "#000002": "var(--astro-code-color-background)",
+  "#000004": "var(--astro-code-token-constant)",
+  "#000005": "var(--astro-code-token-string)",
+  "#000006": "var(--astro-code-token-comment)",
+  "#000007": "var(--astro-code-token-keyword)",
+  "#000008": "var(--astro-code-token-parameter)",
+  "#000009": "var(--astro-code-token-function)",
+  "#000010": "var(--astro-code-token-string-expression)",
+  "#000011": "var(--astro-code-token-punctuation)",
+  "#000012": "var(--astro-code-token-link)"
+};
+const PRE_SELECTOR = /<pre class="(.*?)shiki(.*?)"/;
+const LINE_SELECTOR = /<span class="line"><span style="(.*?)">([\+|\-])/g;
+const INLINE_STYLE_SELECTOR = /style="(.*?)"/;
+const highlighterCache = /* @__PURE__ */ new Map();
+async function shiki({
+  langs = [],
+  theme = "github-dark",
+  wrap = false
+} = {}) {
+  theme = normalizeTheme(theme);
+  const cacheID = typeof theme === "string" ? theme : theme.name;
+  if (!highlighterCache.has(cacheID)) {
+    highlighterCache.set(
+      cacheID,
+      await getHighlighter({ theme }).then((hl) => {
+        hl.setColorReplacements(ASTRO_COLOR_REPLACEMENTS);
+        return hl;
+      })
+    );
+  }
+  const highlighter = highlighterCache.get(cacheID);
+  for (const lang of langs) {
+    await highlighter.loadLanguage(lang);
+  }
+  return {
+    nodes: {
+      fence: {
+        attributes: Markdoc.nodes.fence.attributes,
+        transform({ attributes }) {
+          let lang;
+          if (typeof attributes.language === "string") {
+            const langExists = highlighter.getLoadedLanguages().includes(attributes.language);
+            if (langExists) {
+              lang = attributes.language;
+            } else {
+              console.warn(
+                `[Shiki highlighter] The language "${attributes.language}" doesn't exist, falling back to plaintext.`
+              );
+              lang = "plaintext";
+            }
+          } else {
+            lang = "plaintext";
+          }
+          let html = highlighter.codeToHtml(attributes.content, { lang });
+          html = html.replace(PRE_SELECTOR, `<pre class="$1astro-code$2"`);
+          if (attributes.language === "diff") {
+            html = html.replace(
+              LINE_SELECTOR,
+              '<span class="line"><span style="$1"><span style="user-select: none;">$2</span>'
+            );
+          }
+          if (wrap === false) {
+            html = html.replace(INLINE_STYLE_SELECTOR, 'style="$1; overflow-x: auto;"');
+          } else if (wrap === true) {
+            html = html.replace(
+              INLINE_STYLE_SELECTOR,
+              'style="$1; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;"'
+            );
+          }
+          return unescapeHTML(html);
+        }
+      }
+    }
+  };
+}
+export {
+  shiki as default
+};

package/dist/heading-ids.d.ts

@@ -0,0 +1,9 @@
+import { type Schema } from '@markdoc/markdoc';
+import Slugger from 'github-slugger';
+import type { AstroMarkdocConfig } from './config.js';
+type HeadingIdConfig = AstroMarkdocConfig<{
+    headingSlugger: Slugger;
+}>;
+export declare const heading: Schema;
+export declare function setupHeadingConfig(): HeadingIdConfig;
+export {};

package/dist/{nodes/heading.js → heading-ids.js}

@@ -1,6 +1,7 @@
 import Markdoc from "@markdoc/markdoc";
 import Slugger from "github-slugger";
-import { getTextContent } from "../runtime.js";
+import { getTextContent } from "./runtime.js";
+import { MarkdocError } from "./utils.js";
 function getSlug(attributes, children, headingSlugger) {
   if (attributes.id && typeof attributes.id === "string") {
     return attributes.id;
@@ -18,16 +19,21 @@ const heading = {
     level: { type: Number, required: true, default: 1 }
   },
   transform(node, config) {
-    var _a, _b;
+    var _a, _b, _c;
     const { level, ...attributes } = node.transformAttributes(config);
     const children = node.transformChildren(config);
+    if (!((_a = config.ctx) == null ? void 0 : _a.headingSlugger)) {
+      throw new MarkdocError({
+        message: "Unexpected problem adding heading IDs to Markdoc file. Did you modify the `ctx.headingSlugger` property in your Markdoc config?"
+      });
+    }
     const slug = getSlug(attributes, children, config.ctx.headingSlugger);
-    const render = ((_b = (_a = config.nodes) == null ? void 0 : _a.heading) == null ? void 0 : _b.render) ?? `h${level}`;
+    const render = ((_c = (_b = config.nodes) == null ? void 0 : _b.heading) == null ? void 0 : _c.render) ?? `h${level}`;
     const tagProps = (
       // For components, pass down `level` as a prop,
       // alongside `__collectHeading` for our `headings` collector.
       // Avoid accidentally rendering `level` as an HTML attribute otherwise!
-      typeof render === "string" ? { ...attributes, id: slug } : { ...attributes, id: slug, __collectHeading: true, level }
+      typeof render === "function" ? { ...attributes, id: slug, __collectHeading: true, level } : { ...attributes, id: slug }
     );
     return new Markdoc.Tag(render, tagProps, children);
   }

package/dist/index.js

@@ -4,6 +4,7 @@ import { fileURLToPath, pathToFileURL } from "node:url";
 import { isValidUrl, MarkdocError, parseFrontmatter, prependForwardSlash } from "./utils.js";
 import { emitESMImage } from "astro/assets";
 import { bold, red, yellow } from "kleur/colors";
+import path from "node:path";
 import { loadMarkdocConfig } from "./load-config.js";
 import { setupConfig } from "./runtime.js";
 function markdocIntegration(legacyConfig) {
@@ -25,6 +26,13 @@ function markdocIntegration(legacyConfig) {
           updateConfig,
           addContentEntryType
         } = params;
+        updateConfig({
+          vite: {
+            ssr: {
+              external: ["@astrojs/markdoc/prism", "@astrojs/markdoc/shiki"]
+            }
+          }
+        });
         markdocConfigResult = await loadMarkdocConfig(astroConfig);
         const userMarkdocConfig = (markdocConfigResult == null ? void 0 : markdocConfigResult.config) ?? {};
         function getEntryInfo({ fileUrl, contents }) {
@@ -39,13 +47,12 @@ function markdocIntegration(legacyConfig) {
         addContentEntryType({
           extensions: [".mdoc"],
           getEntryInfo,
-          // Markdoc handles script / style propagation
-          // for Astro components internally
-          handlePropagation: false,
-          async getRenderModule({ entry, viteId }) {
+          async getRenderModule({ contents, fileUrl, viteId }) {
+            const entry = getEntryInfo({ contents, fileUrl });
             const ast = Markdoc.parse(entry.body);
             const pluginContext = this;
-            const markdocConfig = setupConfig(userMarkdocConfig, entry);
+            const markdocConfig = await setupConfig(userMarkdocConfig);
+            const filePath = fileURLToPath(fileUrl);
             const validationErrors = Markdoc.validate(ast, markdocConfig).filter((e) => {
               return (
                 // Ignore `variable-undefined` errors.
@@ -55,10 +62,11 @@ function markdocIntegration(legacyConfig) {
               );
             });
             if (validationErrors.length) {
-              const frontmatterBlockOffset = entry._internal.rawData.split("\n").length + 2;
+              const frontmatterBlockOffset = entry.rawData.split("\n").length + 2;
+              const rootRelativePath = path.relative(fileURLToPath(astroConfig.root), filePath);
               throw new MarkdocError({
                 message: [
-                  `**${String(entry.collection)} \u2192 ${String(entry.id)}** contains invalid content:`,
+                  `**${String(rootRelativePath)}** contains invalid content:`,
                   ...validationErrors.map((e) => `- ${e.error.message}`)
                 ].join("\n"),
                 location: {
@@ -73,15 +81,12 @@ function markdocIntegration(legacyConfig) {
               await emitOptimizedImages(ast.children, {
                 astroConfig,
                 pluginContext,
-                filePath: entry._internal.filePath
+                filePath
               });
             }
-            const res = `import {
-							createComponent,
-							renderComponent,
-						} from 'astro/runtime/server/index.js';
+            const res = `import { jsx as h } from 'astro/jsx-runtime';
 						import { Renderer } from '@astrojs/markdoc/components';
-						import { collectHeadings, setupConfig, Markdoc } from '@astrojs/markdoc/runtime';
+						import { collectHeadings, setupConfig, setupConfigSync, Markdoc } from '@astrojs/markdoc/runtime';
 import * as entry from ${JSON.stringify(viteId + "?astroContentCollectionEntry")};
 ${markdocConfigResult ? `import _userConfig from ${JSON.stringify(
               markdocConfigResult.fileUrl.pathname
@@ -99,29 +104,19 @@ export function getHeadings() {
             instead of the Content component. Would remove double-transform and unlock variable resolution in heading slugs. */
             ""}
 	const headingConfig = userConfig.nodes?.heading;
-	const config = setupConfig(headingConfig ? { nodes: { heading: headingConfig } } : {}, entry);
+	const config = setupConfigSync(headingConfig ? { nodes: { heading: headingConfig } } : {}, entry);
 	const ast = Markdoc.Ast.fromJSON(stringifiedAst);
 	const content = Markdoc.transform(ast, config);
 	return collectHeadings(Array.isArray(content) ? content : content.children);
 }
+export async function Content (props) {
+	const config = await setupConfig({
+		...userConfig,
+		variables: { ...userConfig.variables, ...props },
+	}, entry);
 
-export const Content = createComponent({
-	factory(result, props) {
-		const config = setupConfig({
-			...userConfig,
-			variables: { ...userConfig.variables, ...props },
-		}, entry);
-		
-		return renderComponent(
-			result,
-			Renderer.name,
-			Renderer,
-			{ stringifiedAst, config },
-			{}
-		);
-	},
-	propagation: 'self',
-});`;
+	return h(Renderer, { config, stringifiedAst });
+}`;
             return { code: res };
           },
           contentModuleTypes: await fs.promises.readFile(
@@ -129,26 +124,6 @@ export const Content = createComponent({
             "utf-8"
           )
         });
-        updateConfig({
-          vite: {
-            plugins: [
-              {
-                name: "@astrojs/markdoc:astro-propagated-assets",
-                enforce: "pre",
-                // Astro component styles and scripts should only be injected
-                // When a given Markdoc file actually uses that component.
-                // Add the `astroPropagatedAssets` flag to inject only when rendered.
-                resolveId(id, importer) {
-                  if (importer === (markdocConfigResult == null ? void 0 : markdocConfigResult.fileUrl.pathname) && id.endsWith(".astro")) {
-                    return this.resolve(id + "?astroPropagatedAssets", importer, {
-                      skipSelf: true
-                    });
-                  }
-                }
-              }
-            ]
-          }
-        });
       },
       "astro:server:setup": async ({ server }) => {
         server.watcher.on("all", (event, entry) => {

package/dist/runtime.d.ts

@@ -1,13 +1,17 @@
 import type { MarkdownHeading } from '@astrojs/markdown-remark';
-import { type ConfigType as MarkdocConfig, type RenderableTreeNode } from '@markdoc/markdoc';
+import { type RenderableTreeNode } from '@markdoc/markdoc';
 import type { ContentEntryModule } from 'astro';
+import type { AstroMarkdocConfig } from './config.js';
 /** Used to call `Markdoc.transform()` and `Markdoc.Ast` in runtime modules */
 export { default as Markdoc } from '@markdoc/markdoc';
 /**
  * Merge user config with default config and set up context (ex. heading ID slugger)
- * Called on each file's individual transform
+ * Called on each file's individual transform.
+ * TODO: virtual module to merge configs per-build instead of per-file?
  */
-export declare function setupConfig(userConfig: MarkdocConfig, entry: ContentEntryModule): MarkdocConfig;
+export declare function setupConfig(userConfig: AstroMarkdocConfig): Promise<Omit<AstroMarkdocConfig, 'extends'>>;
+/** Used for synchronous `getHeadings()` function */
+export declare function setupConfigSync(userConfig: AstroMarkdocConfig, entry: ContentEntryModule): Omit<AstroMarkdocConfig, 'extends'>;
 /**
  * Get text content as a string from a Markdoc transform AST
  */

package/dist/runtime.js

@@ -1,9 +1,20 @@
 import Markdoc from "@markdoc/markdoc";
-import { setupHeadingConfig } from "./nodes/index.js";
+import { setupHeadingConfig } from "./heading-ids.js";
 import { default as default2 } from "@markdoc/markdoc";
-function setupConfig(userConfig, entry) {
-  const defaultConfig = {
-    // `setupXConfig()` could become a "plugin" convention as well?
+async function setupConfig(userConfig) {
+  let defaultConfig = setupHeadingConfig();
+  if (userConfig.extends) {
+    for (let extension of userConfig.extends) {
+      if (extension instanceof Promise) {
+        extension = await extension;
+      }
+      defaultConfig = mergeConfig(defaultConfig, extension);
+    }
+  }
+  return mergeConfig(defaultConfig, userConfig);
+}
+function setupConfigSync(userConfig, entry) {
+  let defaultConfig = {
     ...setupHeadingConfig(),
     variables: { entry }
   };
@@ -13,6 +24,10 @@ function mergeConfig(configA, configB) {
   return {
     ...configA,
     ...configB,
+    ctx: {
+      ...configA.ctx,
+      ...configB.ctx
+    },
     tags: {
       ...configA.tags,
       ...configB.tags
@@ -73,5 +88,6 @@ export {
   default2 as Markdoc,
   collectHeadings,
   getTextContent,
-  setupConfig
+  setupConfig,
+  setupConfigSync
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astrojs/markdoc",
-  "description": "Add support for Markdoc pages in your Astro site",
-  "version": "0.2.2",
+  "description": "Add support for Markdoc in your Astro site",
+  "version": "0.3.0",
   "type": "module",
   "types": "./dist/index.d.ts",
   "author": "withastro",
@@ -19,6 +19,8 @@
   "bugs": "https://github.com/withastro/astro/issues",
   "homepage": "https://docs.astro.build/en/guides/integrations-guide/markdoc/",
   "exports": {
+    "./prism": "./dist/extensions/prism.js",
+    "./shiki": "./dist/extensions/shiki.js",
     ".": "./dist/index.js",
     "./components": "./components/index.ts",
     "./runtime": "./dist/runtime.js",
@@ -32,7 +34,9 @@
     "template"
   ],
   "dependencies": {
-    "@markdoc/markdoc": "^0.2.2",
+    "shiki": "^0.14.1",
+    "@astrojs/prism": "^2.1.2",
+    "@markdoc/markdoc": "^0.3.0",
     "esbuild": "^0.17.12",
     "github-slugger": "^2.0.0",
     "gray-matter": "^4.0.3",
@@ -40,7 +44,7 @@
     "zod": "^3.17.3"
   },
   "peerDependencies": {
-    "astro": "^2.5.3"
+    "astro": "^2.5.6"
   },
   "devDependencies": {
     "@astrojs/markdown-remark": "^2.2.1",
@@ -53,7 +57,7 @@
     "mocha": "^9.2.2",
     "rollup": "^3.20.1",
     "vite": "^4.3.1",
-    "astro": "2.5.3",
+    "astro": "2.5.6",
     "astro-scripts": "0.0.14"
   },
   "engines": {

package/dist/nodes/heading.d.ts

@@ -1,10 +0,0 @@
-import { type ConfigType, type Schema } from '@markdoc/markdoc';
-import Slugger from 'github-slugger';
-type ConfigTypeWithCtx = ConfigType & {
-    ctx: {
-        headingSlugger: Slugger;
-    };
-};
-export declare const heading: Schema;
-export declare function setupHeadingConfig(): ConfigTypeWithCtx;
-export {};

package/dist/nodes/index.d.ts

@@ -1,4 +0,0 @@
-export { setupHeadingConfig } from './heading.js';
-export declare const nodes: {
-    heading: import("@markdoc/markdoc").Schema;
-};

package/dist/nodes/index.js

@@ -1,7 +0,0 @@
-import { heading } from "./heading.js";
-import { setupHeadingConfig } from "./heading.js";
-const nodes = { heading };
-export {
-  nodes,
-  setupHeadingConfig
-};