@janga/norna 0.7.10 → 0.7.11

package/examples/{typography-presets → feature-demos/theme-presets}/site/routes/040-statement/route-content.md

@@ -7,9 +7,9 @@ navigation:
 
 ## Statement {#statement}
 
-This route uses the `statement` preset. Its purpose is to make short,
-declarative sections feel more direct and programmatic. It is intentionally
-stronger than the other presets and should usually be used sparingly.
+This route uses the complete `statement` preset without overrides. Its airy
+layout, stronger typography and alternating surfaces suit short, declarative
+content with a more editorial voice.
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id elit non mi
 porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus

package/examples/feature-demos/theme-presets/site/routes/040-statement/theme.md

@@ -0,0 +1,3 @@
+---
+preset: statement
+---

package/examples/{typography-presets → feature-demos/theme-presets}/site/sitewide-content.md

@@ -1,6 +1,6 @@
 ---
 navigation:
-  brand: Typography Presets
+  brand: Theme Presets
 footer:
   copyrightMessage: Dog photos by Bicanski, CC0, via Pixnio.
   buildInfo:

package/examples/feature-demos/theme-presets/site/theme.md

@@ -0,0 +1,3 @@
+---
+preset: project
+---

package/package.json

@@ -2,7 +2,7 @@
   "name": "@janga/norna",
   "description": "A command-line publishing workflow for simple static sites.",
   "type": "module",
-  "version": "0.7.10",
+  "version": "0.7.11",
   "license": "GPL-3.0-only",
   "repository": {
     "type": "git",
@@ -51,22 +51,26 @@
     "config:check": "node bin/norna.mjs config:check",
     "content:check": "node bin/norna.mjs content:check",
     "content:sync": "node bin/norna.mjs content:sync",
+    "theme:export": "node bin/norna.mjs theme:export",
     "typography:presets": "node bin/norna.mjs typography presets",
     "typography:show": "node bin/norna.mjs typography show",
     "site:public": "node bin/norna.mjs site:public",
     "images": "node bin/norna.mjs images",
     "build": "node bin/norna.mjs build",
+    "build:pages": "node scripts/build-pages.mjs",
     "build:local": "node bin/norna.mjs build:local",
     "deploy": "node bin/norna.mjs deploy",
     "deploy:commit": "node bin/norna.mjs deploy:commit",
     "deploy:watch": "node bin/norna.mjs deploy:watch",
     "doctor": "node bin/norna.mjs doctor",
-    "demo:build": "node bin/norna.mjs --site-dir examples/dog-gallery/site build",
-    "test": "npm run test:route-model && npm run test:content-check && npm run test:content-model-v2 && npm run test:site-public && npm run test:cli-discovery && npm run test:engine-commands && npm run test:ci-lockfile && npm run test:temporary-visibility && npm run test:fixture:build && npm run package:check",
+    "demo:build": "node bin/norna.mjs --site-dir examples/feature-demos/media-and-surfaces/site build",
+    "test": "npm run test:route-model && npm run test:content-check && npm run test:content-model-v2 && npm run test:theme-presets && npm run test:site-public && npm run test:cli-discovery && npm run test:engine-commands && npm run test:ci-lockfile && npm run test:temporary-visibility && npm run test:fixture:build && npm run test:examples && npm run package:check",
     "test:fixture:build": "node bin/norna.mjs --site-dir fixtures/basic/site build",
+    "test:examples": "node scripts/test-examples.mjs",
     "test:route-model": "node scripts/test-route-model.mjs",
     "test:content-check": "node scripts/test-content-check.mjs",
     "test:content-model-v2": "node scripts/test-content-model-v2.mjs",
+    "test:theme-presets": "node scripts/test-theme-presets.mjs",
     "test:site-public": "node scripts/test-site-public.mjs",
     "test:cli-discovery": "node scripts/test-cli-discovery.mjs",
     "test:engine-commands": "node scripts/test-engine-commands.mjs",

package/scripts/build-pages.mjs

@@ -0,0 +1,71 @@
+import { cp, mkdir, mkdtemp, readFile, rm } from 'node:fs/promises';
+import { tmpdir } from 'node:os';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import documentationConfig from '../site/config.mjs';
+import { getExampleSites } from './lib/example-sites.mjs';
+import { runInherit } from './lib/run-command.mjs';
+
+const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const cliPath = path.join(root, 'bin', 'norna.mjs');
+const distDirectory = path.join(root, 'dist');
+const temporaryDirectory = await mkdtemp(path.join(tmpdir(), 'norna-pages-'));
+const artifactDirectory = path.join(temporaryDirectory, 'artifact');
+const documentationUrl = new URL(documentationConfig.site.url);
+const documentationBasePath = documentationConfig.site.basePath;
+const examples = await getExampleSites(root);
+let artifactStarted = false;
+
+const buildSite = (siteLabel, env = process.env) => runInherit(
+	process.execPath,
+	[cliPath, ...(siteLabel ? ['--site-dir', siteLabel] : []), 'build'],
+	{ cwd: root, env },
+);
+
+try {
+	console.log('Building documentation site');
+	await buildSite();
+	await cp(distDirectory, artifactDirectory, { recursive: true });
+	artifactStarted = true;
+
+	for (const example of examples) {
+		const relativePublicPath = `examples/${example.category}/${example.name}/`;
+		const basePath = `${documentationBasePath.replace(/\/$/, '')}/${relativePublicPath}`;
+		const siteUrl = new URL(relativePublicPath, documentationUrl).href;
+
+		console.log(`\nBuilding ${example.siteLabel} for ${siteUrl}`);
+		await buildSite(example.siteLabel, {
+			...process.env,
+			NORNA_EXAMPLE_BASE_PATH: basePath,
+			NORNA_EXAMPLE_SITE_URL: siteUrl,
+		});
+
+		const destination = path.join(artifactDirectory, relativePublicPath);
+		await mkdir(path.dirname(destination), { recursive: true });
+		await cp(distDirectory, destination, { recursive: true });
+	}
+} finally {
+	if (artifactStarted) {
+		await rm(distDirectory, { recursive: true, force: true });
+		await cp(artifactDirectory, distDirectory, { recursive: true });
+	}
+	await rm(temporaryDirectory, { recursive: true, force: true });
+}
+
+const documentationExamplesHtml = await readFile(path.join(distDirectory, 'examples', 'index.html'), 'utf8');
+
+for (const example of examples) {
+	const relativePublicPath = `examples/${example.category}/${example.name}/`;
+	const basePath = `${documentationBasePath.replace(/\/$/, '')}/${relativePublicPath}`;
+	const siteUrl = new URL(relativePublicPath, documentationUrl).href;
+	const exampleHtml = await readFile(path.join(distDirectory, relativePublicPath, 'index.html'), 'utf8');
+
+	if (!documentationExamplesHtml.includes(`href="${siteUrl}"`)) {
+		throw new Error(`Documentation is missing the rendered example link ${siteUrl}.`);
+	}
+	if (!exampleHtml.includes(`href="${basePath}`) && !exampleHtml.includes(`src="${basePath}`)) {
+		throw new Error(`Rendered example ${relativePublicPath} does not use its deployment base path ${basePath}.`);
+	}
+}
+
+console.log(`\nok - assembled documentation and ${examples.length} rendered examples in dist/`);

package/scripts/check-config.mjs

@@ -20,7 +20,7 @@ const formatErrorMessage = (error) => {
 
 try {
 	const { projectConfig } = await import('./lib/project-config.mjs');
-	await readThemeConfig();
+	const themeConfig = await readThemeConfig();
 	const sitewideConfig = await readSitewideConfig();
 	await validateRouteThemeFiles();
 	const logoAssets = getLogoAssets();
@@ -42,6 +42,7 @@ try {
 	console.log('Config check passed.');
 	console.log(`Site URL: ${projectConfig.site.url}`);
 	console.log(`Base path: ${projectConfig.site.basePath}`);
+	console.log(`Theme preset: ${themeConfig.preset ?? '(none)'}`);
 	console.log(`Page width: ${projectConfig.layout.pageWidth}`);
 	console.log(`Gutter: desktop ${projectConfig.layout.gutter.desktop}, mobile ${projectConfig.layout.gutter.mobile}`);
 	console.log(`Layout density: ${projectConfig.layout.density}`);

package/scripts/export-theme-preset.mjs

@@ -0,0 +1,31 @@
+import { writeFile } from 'node:fs/promises';
+import path from 'node:path';
+import {
+	renderThemePresetReference,
+	themePresetNames,
+} from './lib/theme-presets.mjs';
+import { siteDir, siteThemeLabel } from './lib/site-paths.mjs';
+
+const [presetName, ...extraArgs] = process.argv.slice(2);
+
+if (!presetName || extraArgs.length > 0) {
+	throw new Error(`Usage: norna theme:export <preset>\nAvailable presets: ${themePresetNames.join(', ')}`);
+}
+
+const filename = `orig-${presetName}-theme.md`;
+const outputPath = path.join(siteDir, filename);
+const outputLabel = path.posix.join(path.posix.dirname(siteThemeLabel), filename);
+const source = renderThemePresetReference(presetName, siteThemeLabel);
+
+try {
+	await writeFile(outputPath, source, { encoding: 'utf8', flag: 'wx' });
+} catch (error) {
+	if (error?.code === 'EEXIST') {
+		throw new Error(`${outputLabel} already exists. Norna will not overwrite it.`);
+	}
+
+	throw error;
+}
+
+console.log(`Exported the ${presetName} theme preset to ${outputLabel}.`);
+console.log(`Norna still reads ${siteThemeLabel}; use the exported file as an override reference.`);

package/scripts/init-site.mjs

@@ -133,6 +133,7 @@ const galleryScripts = {
 	'norna:config:check': cliCommand('config:check'),
 	'norna:content:check': cliCommand('content:check'),
 	'norna:sync': cliCommand('content:sync'),
+	'norna:theme:export': cliCommand('theme:export'),
 	'norna:typography:presets': cliCommand('typography presets'),
 	'norna:typography:show': cliCommand('typography show'),
 	'norna:public': cliCommand('site:public'),

package/scripts/lib/example-sites.mjs

@@ -0,0 +1,34 @@
+import { existsSync } from 'node:fs';
+import { readdir } from 'node:fs/promises';
+import path from 'node:path';
+
+export const exampleCategories = ['complete-sites', 'feature-demos'];
+
+export const getExampleSites = async (root) => {
+	const examples = [];
+
+	for (const category of exampleCategories) {
+		const categoryDirectory = path.join(root, 'examples', category);
+		const entries = await readdir(categoryDirectory, { withFileTypes: true });
+
+		for (const entry of entries.filter((candidate) => candidate.isDirectory()).sort((a, b) => a.name.localeCompare(b.name))) {
+			const siteDirectory = path.join(categoryDirectory, entry.name, 'site');
+			if (!existsSync(path.join(siteDirectory, 'content.md'))) {
+				throw new Error(`Example ${path.relative(root, siteDirectory)} is missing content.md.`);
+			}
+
+			examples.push({
+				category,
+				name: entry.name,
+				siteDirectory,
+				siteLabel: path.relative(root, siteDirectory),
+			});
+		}
+	}
+
+	if (examples.length === 0) {
+		throw new Error('No example sites were found.');
+	}
+
+	return examples;
+};

package/scripts/lib/presentation.mjs

@@ -2,6 +2,7 @@ import {
 	defaultTypography,
 	resolveTypographyConfig,
 } from './typography.mjs';
+import { resolveThemeConfig } from './theme-presets.mjs';
 
 export const presentationPaletteNames = ['dark', 'light', 'paper'];
 
@@ -92,8 +93,8 @@ export const getPresentationCssVariables = (presentation) => {
 	};
 };
 
-export const resolveThemePresentation = (theme) => {
-	const normalizedTheme = theme ?? {};
+export const resolveThemePresentation = (theme, sourceLabel = 'theme.md') => {
+	const normalizedTheme = resolveThemeConfig(theme, sourceLabel);
 	const normalizedThemePresentation = normalizePresentation(normalizedTheme.presentation);
 	const paletteName = normalizedThemePresentation.palette ?? 'dark';
 	const palette = getPresentationPalette(paletteName);
@@ -109,8 +110,8 @@ export const resolveThemePresentation = (theme) => {
 	};
 };
 
-export const resolvePagePresentation = (theme) => {
-	const resolvedThemePresentation = resolveThemePresentation(theme);
+export const resolvePagePresentation = (theme, sourceLabel) => {
+	const resolvedThemePresentation = resolveThemePresentation(theme, sourceLabel);
 
 	return resolvedThemePresentation;
 };
@@ -126,4 +127,4 @@ export const resolveSectionSurface = (pagePresentation, sectionIndex) => {
 	};
 };
 
-export const resolveFrameColors = ({ theme }) => resolveThemePresentation(theme).palette.frame;
+export const resolveFrameColors = ({ theme, sourceLabel }) => resolveThemePresentation(theme, sourceLabel).palette.frame;

package/scripts/lib/project-config.mjs

@@ -1,6 +1,7 @@
 import { pathToFileURL } from 'node:url';
 import { siteConfigLabel, siteConfigPath, siteThemeLabel } from './site-paths.mjs';
 import { readThemeConfig } from './theme-config.mjs';
+import { resolveThemeConfig } from './theme-presets.mjs';
 
 const { default: siteConfig } = await import(/* @vite-ignore */ pathToFileURL(siteConfigPath).href);
 const themeConfig = await readThemeConfig();
@@ -338,7 +339,7 @@ const layoutDensityProfiles = Object.freeze({
 	}),
 });
 export const resolveThemeVisualConfig = (theme, sourceLabel = siteThemeLabel) => {
-	const rawThemeConfig = assertObject(theme ?? {}, 'theme frontmatter', sourceLabel);
+	const rawThemeConfig = assertObject(resolveThemeConfig(theme, sourceLabel), 'theme frontmatter', sourceLabel);
 	const rawLayoutConfig = assertObject(rawThemeConfig.layout ?? {}, 'layout', sourceLabel);
 	const rawLayoutSpacingConfig = assertObject(rawLayoutConfig.spacing ?? {}, 'layout.spacing', sourceLabel);
 	const rawGalleryConfig = assertObject(rawThemeConfig.gallery ?? {}, 'gallery', sourceLabel);

package/scripts/lib/site-content.mjs

@@ -21,8 +21,8 @@ const explicitHeadingIdRegex = /\s*\{#([a-z0-9-]+)\}\s*$/;
 const deprecatedInlineStyleReferenceRegex = /\[[^\]\n]+\]\{\.([a-z][a-z0-9-]*)\}/g;
 const frontmatterDelimiterRegex = /^---\s*$/;
 const knownContentTopLevelFrontmatterKeys = new Set(['title', 'description', 'navigation', 'sections']);
-const knownThemeTopLevelFrontmatterKeys = new Set(['navigation', 'layout', 'gallery', 'typography', 'presentation']);
-const knownRouteThemeTopLevelFrontmatterKeys = new Set(['navigation', 'layout', 'gallery', 'typography', 'presentation']);
+const knownThemeTopLevelFrontmatterKeys = new Set(['navigation', 'preset', 'layout', 'gallery', 'typography', 'presentation']);
+const knownRouteThemeTopLevelFrontmatterKeys = new Set(['navigation', 'preset', 'layout', 'gallery', 'typography', 'presentation']);
 const knownSitewideTopLevelFrontmatterKeys = new Set(['navigation', 'banners', 'footer']);
 const knownNestedFrontmatterKeys = new Set([
 	'align',

package/scripts/lib/theme-config.mjs

@@ -14,6 +14,7 @@ import {
 	siteThemePath,
 	sitewideContentLabel,
 } from './site-paths.mjs';
+import { resolveThemeConfig } from './theme-presets.mjs';
 
 export const readThemeConfig = async () => {
 	const themeFile = await readFile(siteThemePath, 'utf8').catch((error) => {
@@ -40,6 +41,7 @@ export const readThemeConfig = async () => {
 	if (Object.hasOwn(config, 'navigation')) {
 		throw new Error(`${siteThemeLabel} may not define navigation. Brand and logo belong in ${sitewideContentLabel}.`);
 	}
+	resolveThemeConfig(config, siteThemeLabel);
 
 	return config;
 };
@@ -92,6 +94,7 @@ export const validateRouteThemeFiles = async () => {
 		if (Object.hasOwn(config, 'navigation')) {
 			throw new Error(`${file.label} may not define navigation. Brand and logo belong in ${sitewideContentLabel}.`);
 		}
+		resolveThemeConfig(config, file.label);
 
 		configs.push({ ...file, config });
 	}

package/scripts/lib/theme-presets.mjs

@@ -0,0 +1,209 @@
+import { mergeDeep } from './typography.mjs';
+
+export const themePresetNames = [
+	'portfolio',
+	'documentation',
+	'project',
+	'statement',
+];
+
+export const themePresets = Object.freeze({
+	portfolio: Object.freeze({
+		layout: {
+			density: 'normal',
+			pageWidth: '1240px',
+			gutter: {
+				desktop: 'clamp(1.25rem, 4vw, 3rem)',
+				mobile: '1rem',
+			},
+		},
+		gallery: {
+			width: '1000px',
+			maxAvailableWidthPercent: { desktop: 100, mobile: 100 },
+			maxAvailableHeightPercent: { desktop: 78, mobile: 68 },
+		},
+		typography: {
+			fontFamily: "'Helvetica Neue', Arial, sans-serif",
+			preset: 'quiet-gallery',
+			rhythm: 'normal',
+		},
+		presentation: {
+			palette: 'dark',
+			sectionSurfaces: {
+				mode: 'none',
+				sequence: ['base', 'soft', 'emphasis'],
+			},
+		},
+	}),
+	documentation: Object.freeze({
+		layout: {
+			density: 'compact',
+			pageWidth: '1240px',
+			gutter: {
+				desktop: 'clamp(1.25rem, 4vw, 3rem)',
+				mobile: '1rem',
+			},
+		},
+		gallery: {
+			width: '920px',
+			maxAvailableWidthPercent: { desktop: 100, mobile: 100 },
+			maxAvailableHeightPercent: { desktop: 74, mobile: 68 },
+		},
+		typography: {
+			fontFamily: "Georgia, 'Times New Roman', serif",
+			preset: 'text-forward',
+			rhythm: 'compact',
+		},
+		presentation: {
+			palette: 'paper',
+			sectionSurfaces: {
+				mode: 'cycle',
+				sequence: ['base', 'soft'],
+			},
+		},
+	}),
+	project: Object.freeze({
+		layout: {
+			density: 'compact',
+			pageWidth: '1120px',
+			gutter: {
+				desktop: 'clamp(1.25rem, 4vw, 3rem)',
+				mobile: '1rem',
+			},
+		},
+		gallery: {
+			width: '840px',
+			maxAvailableWidthPercent: { desktop: 100, mobile: 100 },
+			maxAvailableHeightPercent: { desktop: 70, mobile: 62 },
+		},
+		typography: {
+			fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+			preset: 'text-forward',
+			rhythm: 'compact',
+		},
+		presentation: {
+			palette: 'light',
+			sectionSurfaces: {
+				mode: 'cycle',
+				sequence: ['base', 'soft'],
+			},
+		},
+	}),
+	statement: Object.freeze({
+		layout: {
+			density: 'airy',
+			pageWidth: '1280px',
+			gutter: {
+				desktop: 'clamp(1.5rem, 5vw, 4rem)',
+				mobile: '1rem',
+			},
+		},
+		gallery: {
+			width: '1080px',
+			maxAvailableWidthPercent: { desktop: 100, mobile: 100 },
+			maxAvailableHeightPercent: { desktop: 80, mobile: 70 },
+		},
+		typography: {
+			fontFamily: "'Trebuchet MS', 'Helvetica Neue', Arial, sans-serif",
+			preset: 'statement',
+			rhythm: 'airy',
+		},
+		presentation: {
+			palette: 'paper',
+			sectionSurfaces: {
+				mode: 'cycle',
+				sequence: ['base', 'emphasis'],
+			},
+		},
+	}),
+});
+
+export const getThemePreset = (presetName, sourceLabel = 'theme.md') => {
+	const preset = themePresets[presetName];
+
+	if (!preset) {
+		throw new Error(`Unknown theme preset "${presetName}" in ${sourceLabel}. Use one of: ${themePresetNames.join(', ')}.`);
+	}
+
+	return structuredClone(preset);
+};
+
+export const resolveThemeConfig = (theme = {}, sourceLabel = 'theme.md') => {
+	const presetName = theme?.preset;
+	if (presetName === undefined) return structuredClone(theme ?? {});
+
+	const overrides = structuredClone(theme ?? {});
+	delete overrides.preset;
+
+	return {
+		preset: presetName,
+		...mergeDeep(getThemePreset(presetName, sourceLabel), overrides),
+	};
+};
+
+const quote = (value) => JSON.stringify(value);
+const responsiveValueLines = (label, value, indent = 2) => {
+	const prefix = ' '.repeat(indent);
+	return [
+		`${prefix}${label}:`,
+		`${prefix}  desktop: ${value.desktop}`,
+		`${prefix}  mobile: ${value.mobile}`,
+	];
+};
+
+export const renderThemePresetReference = (presetName, sourceLabel = 'theme.md') => {
+	const preset = getThemePreset(presetName, sourceLabel);
+	const { layout, gallery, typography, presentation } = preset;
+
+	return [
+		'---',
+		`# Original values for Norna's "${presetName}" theme preset.`,
+		'# This is a reference file. Norna only loads theme.md.',
+		'# Keep the preset in theme.md and copy only the values you want to override.',
+		`# Available theme presets: ${themePresetNames.join(', ')}.`,
+		`preset: ${presetName}`,
+		'',
+		'layout:',
+		'  # Alternatives: compact, normal, airy.',
+		`  density: ${layout.density}`,
+		'  # Any positive CSS length, including px, rem, em, %, or clamp(...).',
+		`  pageWidth: ${layout.pageWidth}`,
+		'  gutter:',
+		`    desktop: ${layout.gutter.desktop}`,
+		`    mobile: ${layout.gutter.mobile}`,
+		'  # Optional spacing overrides use blockGap, finalSectionBottom,',
+		'  # firstSectionTop, headingToBlock, imageGap, and sectionGap.',
+		'',
+		'gallery:',
+		'  # width accepts a positive CSS length.',
+		`  width: ${gallery.width}`,
+		'  # Percent values must be greater than 0 and at most 100.',
+		...responsiveValueLines('maxAvailableWidthPercent', gallery.maxAvailableWidthPercent),
+		...responsiveValueLines('maxAvailableHeightPercent', gallery.maxAvailableHeightPercent),
+		'',
+		'typography:',
+		'  # Any valid CSS font-family stack without semicolons.',
+		`  fontFamily: ${quote(typography.fontFamily)}`,
+		'  # Alternatives: quiet-gallery, compact-gallery, text-forward, statement.',
+		`  preset: ${typography.preset}`,
+		'  # Alternatives: compact, normal, airy.',
+		`  rhythm: ${typography.rhythm}`,
+		'  # Fine-grained overrides can target headings.h1-h4, body, and caption.',
+		'  # Example:',
+		'  # overrides:',
+		'  #   headings:',
+		'  #     h2:',
+		'  #       size: large  # small, medium, large, or xlarge',
+		'',
+		'presentation:',
+		'  # Alternatives: dark, light, paper.',
+		`  palette: ${presentation.palette}`,
+		'  sectionSurfaces:',
+		'    # Alternatives: none, cycle.',
+		`    mode: ${presentation.sectionSurfaces.mode}`,
+		'    # Use one to three unique values from: base, soft, emphasis.',
+		`    sequence: [${presentation.sectionSurfaces.sequence.join(', ')}]`,
+		'---',
+		'',
+	].join('\n');
+};

package/scripts/show-typography.mjs

@@ -1,6 +1,6 @@
 import { readFile } from 'node:fs/promises';
 import path from 'node:path';
-import { findMap } from './lib/frontmatter-yaml.mjs';
+import { parseYamlMapping } from './lib/frontmatter-yaml.mjs';
 import {
 	defaultTypography,
 	resolveTypographyConfig,
@@ -25,6 +25,7 @@ import {
 	siteThemeLabel,
 	siteThemePath,
 } from './lib/site-paths.mjs';
+import { resolveThemeConfig } from './lib/theme-presets.mjs';
 
 const mode = process.argv[2] ?? 'show';
 
@@ -204,8 +205,8 @@ const readThemeTypography = async () => {
 		].join('\n'));
 	}
 
-	const themeLines = themeFrontmatterBody.split(/\r?\n/);
-	const themeTypographyConfig = findMap(themeLines, 'typography', 0, themeLines.length, 0)?.value;
+	const themeConfig = resolveThemeConfig(parseYamlMapping(themeFrontmatterBody), siteThemeLabel);
+	const themeTypographyConfig = themeConfig.typography;
 	return resolveAnnotatedTypographyConfig(themeTypographyConfig ?? defaultTypography, siteThemeLabel);
 };
 
@@ -231,8 +232,8 @@ const readRouteThemeTypography = async (contentFile, themeTypography) => {
 		].join('\n'));
 	}
 
-	const lines = frontmatterBody.split(/\r?\n/);
-	const typographyConfig = findMap(lines, 'typography', 0, lines.length, 0)?.value;
+	const routeThemeConfig = resolveThemeConfig(parseYamlMapping(frontmatterBody), routeThemeLabel);
+	const typographyConfig = routeThemeConfig.typography;
 	return resolveAnnotatedTypographyConfig(typographyConfig ?? defaultTypography, routeThemeLabel);
 };
 

package/scripts/test-engine-commands.mjs

@@ -45,6 +45,7 @@ try {
 	assert.equal(initializedPackageJson.dependencies['@janga/norna'], packageJson.version);
 	assert.equal(initializedPackageJson.scripts['norna:engine:update'], 'norna engine:update');
 	assert.equal(initializedPackageJson.scripts['norna:engine:version'], 'norna engine:version');
+	assert.equal(initializedPackageJson.scripts['norna:theme:export'], 'norna theme:export');
 	assert.equal(initializedPackageJson.scripts['engine:update'], undefined);
 	assert.equal(initializedPackageJson.scripts['engine:version'], undefined);
 

package/scripts/test-examples.mjs

@@ -0,0 +1,15 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { getExampleSites } from './lib/example-sites.mjs';
+import { runInherit } from './lib/run-command.mjs';
+
+const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const cliPath = path.join(root, 'bin', 'norna.mjs');
+const examples = await getExampleSites(root);
+
+for (const example of examples) {
+	console.log(`\nBuilding ${example.siteLabel}`);
+	await runInherit(process.execPath, [cliPath, '--site-dir', example.siteLabel, 'build'], { cwd: root });
+}
+
+console.log(`\nok - built ${examples.length} example sites`);