@astrojs/markdoc 0.2.3 → 0.3.1

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

package/components/TreeNode.ts

@@ -2,16 +2,30 @@ import type { AstroInstance } from 'astro';
 import { Fragment } from 'astro/jsx-runtime';
 import type { RenderableTreeNode } from '@markdoc/markdoc';
 import Markdoc from '@markdoc/markdoc';
-import { createComponent, renderComponent, render } from 'astro/runtime/server/index.js';
+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[];
 	  }
@@ -25,6 +39,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) =>
@@ -32,37 +47,86 @@ export const ComponentNode = createComponent({
 				)}`,
 		};
 		if (treeNode.type === 'component') {
-			return renderComponent(
-				result,
-				treeNode.component.name,
-				treeNode.component,
-				treeNode.props,
-				slots
+			let styles = '',
+				links = '',
+				scripts = '';
+			if (Array.isArray(treeNode.collectedStyles)) {
+				styles = treeNode.collectedStyles
+					.map((style: any) =>
+						renderUniqueStylesheet(result, {
+							type: 'inline',
+							content: style,
+						})
+					)
+					.join('');
+			}
+			if (Array.isArray(treeNode.collectedLinks)) {
+				links = treeNode.collectedLinks
+					.map((link: any) => {
+						return renderUniqueStylesheet(result, {
+							type: 'external',
+							src: 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 headAndContent;
 		}
 		return renderComponent(result, treeNode.tag, treeNode.tag, treeNode.attributes, slots);
 	},
-	propagation: 'none',
+	propagation: 'self',
 });
 
-export function createTreeNode(node: RenderableTreeNode | RenderableTreeNode[]): TreeNode {
-	if (typeof node === 'string' || typeof node === 'number') {
+export async 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: node.map((child) => createTreeNode(child)),
+			children: await Promise.all(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',
@@ -70,12 +134,38 @@ export function createTreeNode(node: RenderableTreeNode | RenderableTreeNode[]):
 			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: node.children.map((child) => createTreeNode(child)),
+			children,
 		};
 	}
 }
+
+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 === "function" ? { ...attributes, id: slug, __collectHeading: true, level } : { ...attributes, id: slug }
+      typeof render === "string" ? { ...attributes, id: slug } : { ...attributes, id: slug, __collectHeading: true, level }
     );
     return new Markdoc.Tag(render, tagProps, children);
   }

package/dist/index.js

@@ -1,11 +1,26 @@
 import Markdoc from "@markdoc/markdoc";
 import fs from "node:fs";
 import { fileURLToPath, pathToFileURL } from "node:url";
-import { isValidUrl, MarkdocError, parseFrontmatter, prependForwardSlash } from "./utils.js";
+import {
+  createNameHash,
+  hasContentFlag,
+  isValidUrl,
+  MarkdocError,
+  parseFrontmatter,
+  prependForwardSlash,
+  PROPAGATED_ASSET_FLAG
+} from "./utils.js";
 import { emitESMImage } from "astro/assets";
 import { bold, red, yellow } from "kleur/colors";
+import path from "node:path";
+import { normalizePath } from "vite";
 import { loadMarkdocConfig } from "./load-config.js";
 import { setupConfig } from "./runtime.js";
+const markdocTokenizer = new Markdoc.Tokenizer({
+  // Strip <!-- comments --> from rendered output
+  // Without this, they're rendered as strings!
+  allowComments: true
+});
 function markdocIntegration(legacyConfig) {
   if (legacyConfig) {
     console.log(
@@ -16,12 +31,20 @@ function markdocIntegration(legacyConfig) {
     process.exit(0);
   }
   let markdocConfigResult;
+  let markdocConfigResultId = "";
   return {
     name: "@astrojs/markdoc",
     hooks: {
       "astro:config:setup": async (params) => {
-        const { config: astroConfig, addContentEntryType } = params;
+        const {
+          config: astroConfig,
+          updateConfig,
+          addContentEntryType
+        } = params;
         markdocConfigResult = await loadMarkdocConfig(astroConfig);
+        if (markdocConfigResult) {
+          markdocConfigResultId = normalizePath(fileURLToPath(markdocConfigResult.fileUrl));
+        }
         const userMarkdocConfig = (markdocConfigResult == null ? void 0 : markdocConfigResult.config) ?? {};
         function getEntryInfo({ fileUrl, contents }) {
           const parsed = parseFrontmatter(contents, fileURLToPath(fileUrl));
@@ -35,10 +58,16 @@ function markdocIntegration(legacyConfig) {
         addContentEntryType({
           extensions: [".mdoc"],
           getEntryInfo,
-          async getRenderModule({ entry, viteId }) {
-            const ast = Markdoc.parse(entry.body);
+          // Markdoc handles script / style propagation
+          // for Astro components internally
+          handlePropagation: false,
+          async getRenderModule({ contents, fileUrl, viteId }) {
+            const entry = getEntryInfo({ contents, fileUrl });
+            const tokens = markdocTokenizer.tokenize(entry.body);
+            const ast = Markdoc.parse(tokens);
             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.
@@ -48,10 +77,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: {
@@ -66,15 +96,17 @@ function markdocIntegration(legacyConfig) {
               await emitOptimizedImages(ast.children, {
                 astroConfig,
                 pluginContext,
-                filePath: entry._internal.filePath
+                filePath
               });
             }
-            const res = `import { jsx as h } from 'astro/jsx-runtime';
+            const res = `import {
+							createComponent,
+							renderComponent,
+						} from 'astro/runtime/server/index.js';
 						import { Renderer } from '@astrojs/markdoc/components';
-						import { collectHeadings, setupConfig, Markdoc } from '@astrojs/markdoc/runtime';
-import * as entry from ${JSON.stringify(viteId + "?astroContentCollectionEntry")};
+						import { collectHeadings, setupConfig, setupConfigSync, Markdoc } from '@astrojs/markdoc/runtime';
 ${markdocConfigResult ? `import _userConfig from ${JSON.stringify(
-              markdocConfigResult.fileUrl.pathname
+              markdocConfigResultId
             )};
 const userConfig = _userConfig ?? {};` : "const userConfig = {};"}${astroConfig.experimental.assets ? `
 import { experimentalAssetsConfig } from '@astrojs/markdoc/experimental-assets-config';
@@ -89,19 +121,29 @@ 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 } } : {});
 	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 = setupConfig({
-		...userConfig,
-		variables: { ...userConfig.variables, ...props },
-	}, entry);
 
-	return h(Renderer, { config, stringifiedAst });
-}`;
+export const Content = createComponent({
+	async factory(result, props) {
+		const config = await setupConfig({
+			...userConfig,
+			variables: { ...userConfig.variables, ...props },
+		});
+		
+		return renderComponent(
+			result,
+			Renderer.name,
+			Renderer,
+			{ stringifiedAst, config },
+			{}
+		);
+	},
+	propagation: 'self',
+});`;
             return { code: res };
           },
           contentModuleTypes: await fs.promises.readFile(
@@ -109,10 +151,53 @@ export async function Content (props) {
             "utf-8"
           )
         });
+        let rollupOptions = {};
+        if (markdocConfigResult) {
+          rollupOptions = {
+            output: {
+              // Split Astro components from your `markdoc.config`
+              // to only inject component styles and scripts at runtime.
+              manualChunks(id, { getModuleInfo }) {
+                var _a, _b;
+                if (markdocConfigResult && hasContentFlag(id, PROPAGATED_ASSET_FLAG) && ((_b = (_a = getModuleInfo(id)) == null ? void 0 : _a.importers) == null ? void 0 : _b.includes(markdocConfigResultId))) {
+                  return createNameHash(id, [id]);
+                }
+              }
+            }
+          };
+        }
+        updateConfig({
+          vite: {
+            vite: {
+              ssr: {
+                external: ["@astrojs/markdoc/prism", "@astrojs/markdoc/shiki"]
+              }
+            },
+            build: {
+              rollupOptions
+            },
+            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 === markdocConfigResultId && id.endsWith(".astro")) {
+                    return this.resolve(id + "?astroPropagatedAssets", importer, {
+                      skipSelf: true
+                    });
+                  }
+                }
+              }
+            ]
+          }
+        });
       },
       "astro:server:setup": async ({ server }) => {
         server.watcher.on("all", (event, entry) => {
-          if (pathToFileURL(entry).pathname === (markdocConfigResult == null ? void 0 : markdocConfigResult.fileUrl.pathname)) {
+          if (prependForwardSlash(pathToFileURL(entry).pathname) === markdocConfigResultId) {
             console.log(
               yellow(
                 `${bold("[Markdoc]")} Restart the dev server for config changes to take effect.`

package/dist/runtime.d.ts

@@ -1,13 +1,16 @@
 import type { MarkdownHeading } from '@astrojs/markdown-remark';
-import { type ConfigType as MarkdocConfig, type RenderableTreeNode } from '@markdoc/markdoc';
-import type { ContentEntryModule } from 'astro';
+import { type RenderableTreeNode } from '@markdoc/markdoc';
+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): Omit<AstroMarkdocConfig, 'extends'>;
 /**
  * Get text content as a string from a Markdoc transform AST
  */

package/dist/runtime.js

@@ -1,18 +1,30 @@
 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?
-    ...setupHeadingConfig(),
-    variables: { entry }
-  };
+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) {
+  const defaultConfig = setupHeadingConfig();
   return mergeConfig(defaultConfig, userConfig);
 }
 function mergeConfig(configA, configB) {
   return {
     ...configA,
     ...configB,
+    ctx: {
+      ...configA.ctx,
+      ...configB.ctx
+    },
     tags: {
       ...configA.tags,
       ...configB.tags
@@ -73,5 +85,6 @@ export {
   default2 as Markdoc,
   collectHeadings,
   getTextContent,
-  setupConfig
+  setupConfig,
+  setupConfigSync
 };

package/dist/utils.d.ts

@@ -37,4 +37,18 @@ interface ErrorProperties {
  */
 export declare function prependForwardSlash(str: string): string;
 export declare function isValidUrl(str: string): boolean;
+/**
+ * Identifies Astro components with propagated assets
+ * @see 'packages/astro/src/content/consts.ts'
+ */
+export declare const PROPAGATED_ASSET_FLAG = "astroPropagatedAssets";
+/**
+ * @see 'packages/astro/src/content/utils.ts'
+ */
+export declare function hasContentFlag(viteId: string, flag: string): boolean;
+/**
+ * Create build hash for manual Rollup chunks.
+ * @see 'packages/astro/src/core/build/plugins/plugin-css.ts'
+ */
+export declare function createNameHash(baseId: string, hashIds: string[]): string;
 export {};

package/dist/utils.js

@@ -1,4 +1,6 @@
 import matter from "gray-matter";
+import crypto from "node:crypto";
+import path from "node:path";
 function parseFrontmatter(fileContents, filePath) {
   try {
     matter.clearCache();
@@ -52,8 +54,26 @@ function isValidUrl(str) {
     return false;
   }
 }
+const PROPAGATED_ASSET_FLAG = "astroPropagatedAssets";
+function hasContentFlag(viteId, flag) {
+  const flags = new URLSearchParams(viteId.split("?")[1] ?? "");
+  return flags.has(flag);
+}
+function createNameHash(baseId, hashIds) {
+  const baseName = baseId ? path.parse(baseId).name : "index";
+  const hash = crypto.createHash("sha256");
+  for (const id of hashIds) {
+    hash.update(id, "utf-8");
+  }
+  const h = hash.digest("hex").slice(0, 8);
+  const proposedName = baseName + "." + h;
+  return proposedName;
+}
 export {
   MarkdocError,
+  PROPAGATED_ASSET_FLAG,
+  createNameHash,
+  hasContentFlag,
   isValidUrl,
   parseFrontmatter,
   prependForwardSlash

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astrojs/markdoc",
-  "description": "Add support for Markdoc pages in your Astro site",
-  "version": "0.2.3",
+  "description": "Add support for Markdoc in your Astro site",
+  "version": "0.3.1",
   "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.5"
+    "astro": "^2.5.7"
   },
   "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.5",
+    "astro": "2.5.7",
     "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
-};