@terra-symposium/docs 0.1.17 → 0.1.72

package/package.json

@@ -1,53 +1,90 @@
 {
   "name": "@terra-symposium/docs",
-  "version": "0.1.17",
-  "description": "Reusable React document editor and viewer.",
-  "repository": "https://github.com/Terra-Symposium/docs",
+  "version": "0.1.72",
+  "description": "Terra Docs workspace and Markdown site generator.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Terra-Symposium/docs.git"
+  },
   "type": "module",
+  "packageManager": "pnpm@10.30.3",
   "engines": {
     "node": ">=24.12.0"
   },
   "files": [
     "lib-dist",
-    "src/style.css",
-    "src/navigation.tsx",
-    "src/SiteLayout.astro"
+    "bin",
+    "site",
+    "src/components/navigation.tsx",
+    "src/components/SiteLayout.astro",
+    "src/components/NotFound.astro",
+    "src/components/NotFound.tsx"
   ],
   "exports": {
     ".": {
-      "types": "./lib-dist/index.d.ts",
-      "import": "./lib-dist/index.js"
+      "types": "./lib-dist/lib/index.d.ts",
+      "import": "./lib-dist/lib/index.js"
     },
     "./style.css": "./lib-dist/style.css",
-    "./site-layout.astro": "./src/SiteLayout.astro"
+    "./astro": {
+      "types": "./lib-dist/lib/astro.d.ts",
+      "import": "./lib-dist/lib/astro.js"
+    },
+    "./local-workspace": {
+      "types": "./lib-dist/components/LocalDocsWorkspace.d.ts",
+      "import": "./lib-dist/components/LocalDocsWorkspace.js"
+    },
+    "./site-layout.astro": "./src/components/SiteLayout.astro",
+    "./not-found.astro": "./src/components/NotFound.astro"
   },
-  "peerDependencies": {
-    "@terra-symposium/styling": "^0.1.6",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+  "bin": {
+    "terra-docs": "bin/terra-docs.mjs"
+  },
+  "scripts": {
+    "dev": "terra-quality-dev -- vite --host 127.0.0.1 --open",
+    "docs:dev": "pnpm build && node bin/terra-docs.mjs dev --title 'Terra Docs'",
+    "docs:build": "pnpm build && node bin/terra-docs.mjs build --title 'Terra Docs'",
+    "docs:preview": "pnpm docs:build && node bin/terra-docs.mjs preview --title 'Terra Docs'",
+    "dev:library": "tsc --watch",
+    "build": "rm -rf lib-dist && tsc && tailwindcss --postcss tailwind.postcss.config.cjs -c tailwind.docs.config.mjs -i src/styles/style.css -o lib-dist/style.css --minify && tailwindcss --postcss tailwind.postcss.config.cjs -c tailwind.docs.config.mjs -i src/styles/workspace.css -o lib-dist/workspace.css --minify && node scripts/copy-runtime.mjs",
+    "build:demo": "vite build",
+    "typecheck": "tsc --noEmit && tsc -p tsconfig.demo.json",
+    "lint": "eslint .",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "check": "pnpm run format:check && pnpm run lint && pnpm run typecheck",
+    "test": "pnpm build && node --test test/*.test.mjs",
+    "test:browser": "pnpm docs:build && node scripts/acquire-playwright-port.mjs && playwright test",
+    "test:report:slides": "node scripts/generate-screenshot-deck.mjs",
+    "prepare": "husky",
+    "changeset": "changeset",
+    "version-packages": "changeset version"
   },
   "devDependencies": {
-    "@astrojs/react": "^7.1.0",
+    "@changesets/cli": "^3.0.3",
     "@eslint/js": "10.0.1",
     "@playwright/test": "^1.64.1",
+    "@terra-symposium/standards-reporting": "0.6.2",
     "@types/katex": "^0.16.8",
     "@types/node": "^24.19.2",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
-    "@terra-symposium/styling": "file:vendor/terra-symposium-styling-0.1.6.tgz",
     "@types/sanitize-html": "^2.16.2",
-    "tailwindcss": "^3.4.3",
+    "@terra-symposium/standards-quality": "2.1.0",
     "@vitejs/plugin-react": "6.1.2",
-    "astro": "^7.4.2",
     "eslint": "10.13.0",
+    "husky": "^9.1.7",
+    "postcss": "8.5.31",
+    "postcss-import": "15.1.0",
     "prettier": "3.9.10",
-    "react": "19.3.1",
-    "react-dom": "19.3.1",
+    "tailwindcss": "^3.4.3",
     "typescript": "5.9.3",
     "typescript-eslint": "8.71.2",
     "vite": "8.3.4"
   },
   "dependencies": {
+    "@astrojs/mdx": "8.1.2",
+    "@astrojs/react": "^7.1.0",
     "@carbon/icons-react": "11.90.0",
     "@codemirror/commands": "^6.10.0",
     "@codemirror/lang-markdown": "^6.1.3",
@@ -63,31 +100,19 @@
     "@radix-ui/react-select": "2.4.1",
     "@uiw/codemirror-theme-github": "^4.25.9",
     "@xyflow/react": "^12.3.6",
+    "@terra-symposium/styling": "0.1.34",
+    "astro": "^7.4.2",
+    "jszip": "^3.10.1",
     "katex": "^0.19.1",
     "lexical": "^0.35.0",
     "marked": "^18.1.1",
     "nanostores": "^1.3.0",
     "pdf-lib": "^1.17.1",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
     "sanitize-html": "^2.18.1",
     "sonner": "^1.4.41",
-    "jszip": "^3.10.1",
     "yaml": "^2.7.0"
   },
-  "license": "Apache-2.0",
-  "scripts": {
-    "dev": "vite --host 127.0.0.1 --open",
-    "docs:dev": "astro dev --host 127.0.0.1 --open",
-    "docs:build": "pnpm build && astro build",
-    "docs:preview": "astro preview --host 127.0.0.1",
-    "dev:library": "tsc --watch",
-    "build": "tsc && tailwindcss -c tailwind.docs.config.mjs -i src/style.css -o lib-dist/docs-style.css --minify && node scripts/copy-runtime.mjs",
-    "build:demo": "vite build",
-    "typecheck": "tsc --noEmit && tsc -p tsconfig.demo.json",
-    "lint": "eslint .",
-    "format": "prettier --write .",
-    "format:check": "prettier --check .",
-    "check": "pnpm run format:check && pnpm run lint && pnpm run typecheck",
-    "test": "pnpm build && node --test test/*.test.mjs",
-    "test:browser": "pnpm docs:build && playwright test"
-  }
-}
+  "license": "Apache-2.0"
+}

package/site/astro.config.mjs

@@ -0,0 +1,67 @@
+import { fileURLToPath } from 'node:url';
+import { resolve } from 'node:path';
+import { readFileSync } from 'node:fs';
+import { createRequire } from 'node:module';
+import { defineConfig } from 'astro/config';
+import mdx from '@astrojs/mdx';
+import react from '@astrojs/react';
+import { docsContentPlugin } from './docs-content-plugin.mjs';
+
+const packageRoot = fileURLToPath(new URL('../', import.meta.url));
+const requireFromPackage = createRequire(import.meta.url);
+const projectRoot = process.env.TERRA_DOCS_ROOT ?? process.cwd();
+const publicDir = resolve(projectRoot, '.terra-docs/public');
+const outDir = resolve(projectRoot, process.env.TERRA_DOCS_OUT ?? 'docs-dist');
+const site = process.env.TERRA_DOCS_SITE;
+const projectManifest = (() => {
+	try {
+		return JSON.parse(readFileSync(resolve(projectRoot, 'package.json'), 'utf8'));
+	} catch {
+		return {};
+	}
+})();
+
+function packageExportAliases() {
+	if (!projectManifest.name || !projectManifest.exports) return [];
+	const escapeRegex = (value) => value.replace(/[|\\{}()[\]^$+?.]/g, '\\$&');
+	return Object.entries(projectManifest.exports).flatMap(([key, value]) => {
+		const target = typeof value === 'string' ? value : value?.import ?? value?.default;
+		if (!target?.startsWith('./')) return [];
+		const prefix = projectManifest.name + (key === '.' ? '' : key.slice(1));
+		if (key.includes('*')) {
+			const matcher = new RegExp(`^${escapeRegex(prefix).replace('*', '(.+)')}$`);
+			return [{ find: matcher, replacement: resolve(projectRoot, target.replace('*', '$1')) }];
+		}
+		return [{ find: new RegExp(`^${escapeRegex(prefix)}$`), replacement: resolve(projectRoot, target) }];
+	});
+}
+
+const packageDependencyResolver = {
+	name: 'terra-docs-package-dependencies',
+	enforce: 'pre',
+	resolveId(source) {
+		if (!/^(?:astro|@astrojs\/(?:mdx|react))(?:\/|$)/.test(source)) return null;
+		try {
+			return requireFromPackage.resolve(source);
+		} catch {
+			return null;
+		}
+	},
+};
+
+export default defineConfig({
+	root: projectRoot,
+	srcDir: resolve(packageRoot, 'site/src'),
+	publicDir,
+	outDir,
+	...(site ? { site } : {}),
+	base: process.env.TERRA_DOCS_BASE ?? '/',
+	devToolbar: { enabled: false },
+	build: { format: 'directory' },
+	integrations: [react(), mdx()],
+	vite: {
+		plugins: [packageDependencyResolver, docsContentPlugin({ root: projectRoot, base: process.env.TERRA_DOCS_BASE ?? '/' })],
+		resolve: { alias: packageExportAliases() },
+		server: { fs: { allow: [projectRoot, packageRoot] } },
+	},
+});

package/site/docs-content-plugin.mjs

@@ -0,0 +1,62 @@
+import { existsSync } from 'node:fs';
+import { extname, relative, resolve, sep } from 'node:path';
+
+const markdownExtensions = new Set(['.md', '.mdx']);
+
+function publicRoute(file, docsRoot, base) {
+	const path = relative(docsRoot, file).split(sep).join('/').replace(/\.(?:md|mdx)$/i, '');
+	const route = path.replace(/(?:^|\/)index$/i, '').replace(/^\/+|\/+$/g, '');
+	return `${base}${route ? `${route}/` : ''}`;
+}
+
+function rewriteTarget(rawTarget, sourceFile, docsRoot, base) {
+	const target = rawTarget.trim();
+	if (!target || /^(?:[a-z][a-z\d+.-]*:|\/\/|\/|#)/i.test(target)) return rawTarget;
+	const match = /^(<[^>]+>|[^\s]+)([\s\S]*)$/.exec(target);
+	if (!match) return rawTarget;
+	const bracketed = match[1].startsWith('<') && match[1].endsWith('>');
+	const pathname = bracketed ? match[1].slice(1, -1) : match[1];
+	const suffix = match[2];
+	const [filePath, ...hashParts] = pathname.split('#');
+	const [cleanPath, ...queryParts] = filePath.split('?');
+	let resolvedPath;
+	try {
+		resolvedPath = resolve(sourceFile, '..', decodeURIComponent(cleanPath));
+	} catch {
+		return rawTarget;
+	}
+	const relativePath = relative(docsRoot, resolvedPath);
+	if (relativePath.startsWith(`..${sep}`) || relativePath === '..' || !existsSync(resolvedPath)) return rawTarget;
+	const extension = extname(resolvedPath).toLowerCase();
+	const fragment = hashParts.length ? `#${hashParts.join('#')}` : '';
+	const query = queryParts.length ? `?${queryParts.join('?')}` : '';
+	const rewritten = markdownExtensions.has(extension)
+		? publicRoute(resolvedPath, docsRoot, base)
+		: `${base}_terra-docs/assets/${relativePath.split(sep).join('/')}`;
+	return `${bracketed ? `<${rewritten}${query}${fragment}>` : `${rewritten}${query}${fragment}`}${suffix}`;
+}
+
+function mapOutsideCode(source, callback) {
+	const sections = source.split(/(```[\s\S]*?```|~~~[\s\S]*?~~~)/g);
+	return sections.map((section, index) => index % 2 ? section : callback(section)).join('');
+}
+
+export function docsContentPlugin({ root, base }) {
+	const docsRoot = resolve(root, 'docs');
+	return {
+		name: 'terra-docs-content-assets',
+		enforce: 'pre',
+		transform(source, id) {
+			if (id.includes('?') || !markdownExtensions.has(extname(id).toLowerCase())) return null;
+			const sourceFile = resolve(id);
+			const relativePath = relative(docsRoot, sourceFile);
+			if (relativePath.startsWith(`..${sep}`) || relativePath === '..') return null;
+			const withMarkdownLinks = source.replace(/(!?\[[^\]]*\]\()([^)]+)(\))/g, (_full, before, target, after) =>
+				`${before}${rewriteTarget(target, sourceFile, docsRoot, base)}${after}`,
+			);
+			return mapOutsideCode(withMarkdownLinks, (section) => section.replace(/\b(src|href)=(['"])(.*?)\2/g, (full, attribute, quote, target) =>
+				`${attribute}=${quote}${rewriteTarget(target, sourceFile, docsRoot, base)}${quote}`,
+			));
+		},
+	};
+}

package/site/src/components/DocsSiteSearch.tsx

@@ -0,0 +1,108 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+type SearchDocument = {
+	title: string;
+	description: string;
+	href: string;
+	text: string;
+};
+
+type Props = { base?: string };
+
+function excerpt(text: string, query: string): string {
+	const normalized = text.replace(/\s+/g, ' ').trim();
+	const offset = normalized.toLowerCase().indexOf(query.toLowerCase());
+	const start = Math.max(0, offset - 72);
+	const end = Math.min(normalized.length, start + 190);
+	return `${start > 0 ? '…' : ''}${normalized.slice(start, end)}${end < normalized.length ? '…' : ''}`;
+}
+
+export function DocsSiteSearch({ base = '/' }: Props) {
+	const dialog = useRef<HTMLDialogElement>(null);
+	const input = useRef<HTMLInputElement>(null);
+	const [query, setQuery] = useState('');
+	const [documents, setDocuments] = useState<SearchDocument[]>([]);
+	const [loaded, setLoaded] = useState(false);
+	const [failed, setFailed] = useState(false);
+	const [opened, setOpened] = useState(false);
+	const normalizedBase = base.endsWith('/') ? base : `${base}/`;
+
+	const open = () => {
+		if (!dialog.current?.open) dialog.current?.showModal();
+		setOpened(true);
+		window.setTimeout(() => input.current?.focus(), 0);
+	};
+
+	useEffect(() => {
+		const onKeyDown = (event: KeyboardEvent) => {
+			if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') {
+				event.preventDefault();
+				open();
+			} else if (event.key === '/' && !/input|textarea|select/i.test((event.target as HTMLElement)?.tagName ?? '')) {
+				event.preventDefault();
+				open();
+			}
+		};
+		document.addEventListener('keydown', onKeyDown);
+		return () => document.removeEventListener('keydown', onKeyDown);
+	}, []);
+
+	useEffect(() => {
+		if (!opened || loaded) return;
+		fetch(`${normalizedBase}_terra-docs/search-index.json`)
+			.then((response) => {
+				if (!response.ok) throw new Error(`Search index returned ${response.status}`);
+				return response.json() as Promise<SearchDocument[]>;
+			})
+			.then((data) => {
+				setDocuments(data);
+				setLoaded(true);
+			})
+			.catch(() => setFailed(true));
+	}, [loaded, normalizedBase, opened]);
+
+	const results = useMemo(() => {
+		const terms = query.toLowerCase().trim().split(/\s+/).filter(Boolean);
+		if (!terms.length) return [];
+		return documents
+			.map((document) => {
+				const title = document.title.toLowerCase();
+				const text = `${document.description} ${document.text}`.toLowerCase();
+				const matches = terms.filter((term) => title.includes(term) || text.includes(term));
+				const score = matches.length * 10 + terms.filter((term) => title.includes(term)).length * 5;
+				return { document, score };
+			})
+			.filter((result) => result.score > 0)
+			.sort((left, right) => right.score - left.score || left.document.title.localeCompare(right.document.title))
+			.slice(0, 10);
+	}, [documents, query]);
+
+	return (
+		<div className="terra-docs-search">
+			<button className="terra-docs-search-trigger" type="button" onClick={open} aria-label="Search documentation">
+				<span aria-hidden="true">⌕</span><span>Search docs</span><kbd>⌘ K</kbd>
+			</button>
+			<dialog className="terra-docs-search-dialog" ref={dialog} onClose={() => setQuery('')}>
+				<div className="terra-docs-search-panel">
+					<label className="terra-docs-search-input-row">
+						<span aria-hidden="true">⌕</span>
+						<input ref={input} value={query} onChange={(event) => setQuery(event.currentTarget.value)} placeholder="Search documentation…" />
+						<button type="button" onClick={() => dialog.current?.close()} aria-label="Close search">Esc</button>
+					</label>
+					<div className="terra-docs-search-results" aria-live="polite">
+						{failed ? <p>Search is unavailable right now.</p> : null}
+						{!loaded && !failed ? <p>Loading search…</p> : null}
+						{loaded && query.trim() && results.length === 0 ? <p>No matching pages.</p> : null}
+						{results.map(({ document }) => (
+							<a key={document.href} href={document.href} onClick={() => dialog.current?.close()}>
+								<strong>{document.title}</strong>
+								{document.description ? <span>{document.description}</span> : null}
+								<small>{excerpt(document.text, query.trim().split(/\s+/)[0] ?? query)}</small>
+							</a>
+						))}
+					</div>
+				</div>
+			</dialog>
+		</div>
+	);
+}

package/site/src/lib/catalog.ts

@@ -0,0 +1,151 @@
+/// <reference types="vite/client" />
+
+import type { DocsNavNode } from '../../../src/components/navigation.js';
+
+type SidebarFrontmatter = {
+	label?: string;
+	order?: number;
+	hidden?: boolean;
+};
+
+type DocsFrontmatter = {
+	title?: string;
+	description?: string;
+	hue?: number | null;
+	label?: string;
+	order?: number;
+	hidden?: boolean;
+	visibility?: 'visible' | 'hidden';
+	sidebar?: SidebarFrontmatter;
+};
+
+type ContentModule = {
+	Content?: unknown;
+	default?: unknown;
+	frontmatter?: DocsFrontmatter;
+};
+
+export type SitePage = {
+	file: string;
+	slug: string;
+	title: string;
+	sidebarLabel?: string;
+	description: string;
+	hue?: number | null;
+	hidden: boolean;
+	order: number;
+	content: unknown;
+	markdown: string;
+};
+
+const modules = import.meta.glob<ContentModule>('/docs/**/*.{md,mdx}', { eager: true });
+const sources = import.meta.glob<string>('/docs/**/*.{md,mdx}', {
+	query: '?raw',
+	import: 'default',
+	eager: true,
+});
+const base = import.meta.env.BASE_URL;
+
+function titleFromSource(source: string, slug: string): string {
+	const body = source.replace(/^---\s*\n[\s\S]*?\n---\s*\n/, '');
+	const heading = /^#\s+(.+?)\s*#*\s*$/m.exec(body)?.[1]?.trim();
+	if (heading) return heading;
+	const name = slug.split('/').at(-1) || 'Overview';
+	return name.replace(/[-_]+/g, ' ').replace(/\b\p{L}/gu, (letter) => letter.toUpperCase());
+}
+
+function routeForFile(file: string): string {
+	const relative = file.replace(/^\/?docs\//, '').replace(/\.(?:md|mdx)$/i, '');
+	return relative.replace(/(?:^|\/)index$/i, '').replace(/^\/+|\/+$/g, '');
+}
+
+const routes = new Map<string, string>();
+export const sitePages: SitePage[] = Object.entries(modules)
+	.map(([file, module]) => {
+		const slug = routeForFile(file);
+		const previous = routes.get(slug);
+		if (previous) {
+			throw new Error(`Duplicate Docs route "${slug || '/'}": ${previous} and ${file}`);
+		}
+		routes.set(slug, file);
+		const markdown = sources[file] ?? '';
+		const frontmatter = module.frontmatter ?? {};
+		return {
+			file,
+			slug,
+			title: frontmatter.title ?? titleFromSource(markdown, slug),
+			...((frontmatter.sidebar?.label ?? frontmatter.label) ? { sidebarLabel: frontmatter.sidebar?.label ?? frontmatter.label } : {}),
+			description: frontmatter.description ?? '',
+			...(frontmatter.hue !== undefined ? { hue: frontmatter.hue } : {}),
+			hidden: frontmatter.sidebar?.hidden ?? frontmatter.hidden ?? frontmatter.visibility === 'hidden',
+			order: frontmatter.sidebar?.order ?? frontmatter.order ?? Number.MAX_SAFE_INTEGER,
+			content: module.Content ?? module.default,
+			markdown: markdown.replace(/^---\s*\n[\s\S]*?\n---\s*\n/, ''),
+		};
+	})
+	.sort((left, right) => left.order - right.order || left.file.localeCompare(right.file));
+
+if (sitePages.length === 0) {
+	throw new Error('No Markdown files found in docs/. Add docs/index.md to start a Terra Docs site.');
+}
+
+type MutableNode = Omit<DocsNavNode, 'children'> & { children: Map<string, MutableNode> };
+const rootNodes = new Map<string, MutableNode>();
+
+function label(value: string): string {
+	return value.replace(/[-_]+/g, ' ').replace(/\b\p{L}/gu, (letter) => letter.toUpperCase());
+}
+
+for (const page of sitePages.filter((item) => !item.hidden && item.slug !== '404')) {
+	const segments = page.slug.split('/').filter(Boolean);
+	let currentNodes = rootNodes;
+	let current: MutableNode | undefined;
+	let prefix = '';
+	if (segments.length === 0) {
+		const overview = currentNodes.get('overview') ?? {
+			id: 'overview', title: 'Overview', children: new Map(),
+		};
+		if (!currentNodes.has('overview')) currentNodes.set('overview', overview);
+		Object.assign(overview, pageMetadata(page, pageHref('', base)));
+		continue;
+	}
+	for (const segment of segments) {
+		prefix = prefix ? `${prefix}/${segment}` : segment;
+		let node = currentNodes.get(segment);
+		if (!node) {
+			node = { id: prefix, title: label(segment), children: new Map() };
+			currentNodes.set(segment, node);
+		}
+		current = node;
+		currentNodes = node.children;
+	}
+	if (current) Object.assign(current, pageMetadata(page, pageHref(page.slug, base)));
+}
+
+function pageMetadata(page: SitePage, href: string): Partial<MutableNode> {
+	return {
+		id: page.slug || 'index',
+		title: page.sidebarLabel ?? page.title,
+		href,
+		...(page.description ? { description: page.description } : {}),
+		...(page.hue !== undefined ? { hue: page.hue } : {}),
+	};
+}
+
+function materialize(nodes: Map<string, MutableNode>): DocsNavNode[] {
+	return [...nodes.values()].map(({ children, ...node }) => ({
+		...node,
+		...(children.size ? { children: materialize(children) } : {}),
+	}));
+}
+
+export const siteNavigation = materialize(rootNodes);
+
+export function pageHref(slug: string, base = '/'): string {
+	const prefix = base === '/' ? '' : `/${base.replace(/^\/+|\/+$/g, '')}`;
+	return slug ? `${prefix}/${slug}/` : `${prefix}/`;
+}
+
+export function pageForSlug(slug: string): SitePage | undefined {
+	return sitePages.find((page) => page.slug === slug);
+}

package/site/src/pages/404.astro

@@ -0,0 +1,38 @@
+---
+import DocsNotFound from '../../../src/components/NotFound.astro';
+import DocsSiteLayout from '../../../src/components/SiteLayout.astro';
+import { pageForSlug, pageHref, siteNavigation } from '../lib/catalog.js';
+
+const title = import.meta.env.PUBLIC_TERRA_DOCS_TITLE ?? 'Documentation';
+const description = import.meta.env.PUBLIC_TERRA_DOCS_DESCRIPTION ?? '';
+const base = import.meta.env.BASE_URL;
+const page = pageForSlug('404');
+const PageContent = page?.content;
+---
+
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta name="robots" content="noindex" />
+		<title>Page not found · {title}</title>
+	</head>
+	<body>
+		{PageContent ? (
+			<DocsSiteLayout
+				title={title}
+				homeHref={pageHref('', base)}
+				description={description}
+				pageTitle={page.title}
+				nodes={siteNavigation}
+				currentPath={`${base}404/`}
+				rootPath={pageHref('', base)}
+				searchBase={base}
+			>
+				<PageContent />
+			</DocsSiteLayout>
+		) : (
+			<DocsNotFound appName={title} homeHref={pageHref('', base)} />
+		)}
+	</body>
+</html>

package/site/src/pages/[...slug].astro

@@ -0,0 +1,49 @@
+---
+import DocsSiteLayout from '../../../src/components/SiteLayout.astro';
+import { pageForSlug, pageHref, siteNavigation, sitePages } from '../lib/catalog.js';
+
+const title = import.meta.env.PUBLIC_TERRA_DOCS_TITLE ?? 'Documentation';
+const description = import.meta.env.PUBLIC_TERRA_DOCS_DESCRIPTION ?? '';
+const base = import.meta.env.BASE_URL;
+
+export function getStaticPaths() {
+	return sitePages.filter((page) => page.slug !== '404').map((page) => ({
+		params: { slug: page.slug || undefined },
+		props: { slug: page.slug },
+	}));
+}
+
+const { slug = '' } = Astro.props;
+const page = pageForSlug(slug);
+const PageContent = page?.content;
+const currentPath = pageHref(slug, base);
+---
+
+{page && PageContent ? (
+	<html lang="en">
+		<head>
+			<meta charset="utf-8" />
+			<meta name="viewport" content="width=device-width, initial-scale=1" />
+			{page.description ? <meta name="description" content={page.description} /> : description ? <meta name="description" content={description} /> : null}
+			<title>{page.title} · {title}</title>
+		</head>
+		<body>
+			<DocsSiteLayout
+				title={title}
+				homeHref={pageHref('', base)}
+				description={description}
+				pageTitle={page.title}
+				nodes={siteNavigation}
+				currentPath={currentPath}
+				rootPath={pageHref('', base)}
+				searchBase={base}
+			>
+				<div class="terra-docs-page-content"><PageContent /></div>
+			</DocsSiteLayout>
+		</body>
+	</html>
+) : null}
+
+<style is:global>
+	.terra-docs-page-content { max-width: 100%; }
+</style>