+ 
+ 
+ Content
+
+
+
+ Previous output
') + + expect(await buildFragments({ packageRoot, root: input, outDir: output, env: {} })).toBe(0) + expect(await readFile(join(output, 'image.svg'), 'utf8')).toBe('') + expect((await readdir(output)).sort()).toEqual(['image.svg', 'previous.html']) +}) + +test('builds nested MDX documents and static examples through Next and the CLI', async () => { + await run(process.execPath, [join(packageRoot, 'scripts/build-cli.mjs')], { cwd: packageRoot }) + const root = await fixture(true) + const input = join(root, 'input') + const output = join(root, 'output') + await mkdir(join(input, 'guide/example'), { recursive: true }) + await mkdir(join(root, 'examples/demo'), { recursive: true }) + await writeFile( + join(input, 'index.mdx'), + `--- +title: Frontmatter title +--- + +> [!NOTE] +> A callout + +
- {chart}
-
- ),
-}
-
-/**
- * Renders a React element to an HTML string.
- *
- * `renderToReadableStream` is the only server renderer that awaits async components, which
- * ours are (`Contributors` and `Backers` fetch at compile time).
- */
-export async function renderToHtml(element: ReactNode): Promise
+ {code}
+
+
+ {chart}
+
+ ),
+}
+
+/**
+ * Compiles one MDX source for Next to render as a fragment.
+ *
+ * @param source - MDX source, including frontmatter.
+ */
+export async function compileFragment(
+ source: string,
+ {
+ absoluteFilePath,
+ baseUrl,
+ config = {},
+ }: {
+ /** Logical source path used to resolve relative references, including stdin input. */
+ absoluteFilePath: string
+ /** Base URL for resolving MDX images and links. */
+ baseUrl?: string
+ /** Consumer components and named expression values shared with the website. */
+ config?: DocsConfig
+ },
+) {
+ const { content, data: frontmatter } = matter(source)
+ const title: string = frontmatter.title?.trim() ?? ''
+ const tableOfContents: DocToC[] = []
+ const compiled = await compileMdxContent(title ? `# ${title}\n${content}` : content, {
+ relFilePath: '',
+ absoluteFilePath,
+ baseUrl,
+ title,
+ url: '',
+ tableOfContents,
+ entries: [],
+ components: { ...fragmentComponents, ...config.components },
+ scope: config.scope,
+ })
+
+ return compiled.content
+}
diff --git a/src/fragments/config.ts b/src/fragments/config.ts
new file mode 100644
index 00000000..220221c9
--- /dev/null
+++ b/src/fragments/config.ts
@@ -0,0 +1,13 @@
+import { validateDocsConfig } from '@/config'
+import consumerConfig from 'pmndrs-docs-config'
+import { fragmentComponents } from './compile'
+
+const config = validateDocsConfig(consumerConfig)
+
+/**
+ * Uses the website's consumer scope and overrides on top of static fragment defaults.
+ */
+export const fragmentConfig = {
+ ...config,
+ components: { ...fragmentComponents, ...config.components },
+}
diff --git a/src/fragments/layout.tsx b/src/fragments/layout.tsx
new file mode 100644
index 00000000..caf2e36d
--- /dev/null
+++ b/src/fragments/layout.tsx
@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react'
+
+/**
+ * Supplies Next's required document shell around the extractable fragment.
+ */
+export default function FragmentLayout({
+ children,
+}: {
+ /** Fragment route content. */
+ children: ReactNode
+}) {
+ return (
+
+ {children}
+
+ )
+}
diff --git a/src/fragments/page.tsx b/src/fragments/page.tsx
new file mode 100644
index 00000000..cd60904f
--- /dev/null
+++ b/src/fragments/page.tsx
@@ -0,0 +1,19 @@
+import { compileFragment } from '@/fragments/compile'
+import { fragmentConfig } from '@/fragments/config'
+import { readFile } from 'node:fs/promises'
+
+/**
+ * Renders a single file or stdin input through Next's server renderer.
+ */
+export default async function FragmentPage() {
+ const input = process.env.PMNDRS_FRAGMENT_INPUT
+ if (!input) return null
+
+ const source = await readFile(input, 'utf8')
+ const content = await compileFragment(source, {
+ absoluteFilePath: process.env.PMNDRS_FRAGMENT_PATH ?? input,
+ baseUrl: process.env.MDX_BASEURL,
+ config: fragmentConfig,
+ })
+ return