@janga/norna 0.7.8 → 0.7.10

package/scripts/lib/theme-config.mjs

@@ -1,18 +1,24 @@
-import { readFile } from 'node:fs/promises';
+import { readFile, readdir } from 'node:fs/promises';
+import path from 'node:path';
 import { parseYamlMapping } from './frontmatter-yaml.mjs';
 import {
 	splitSiteFile,
 	validateFrontmatterIndentation,
+	validateRouteThemeFrontmatterStructure,
 	validateThemeFrontmatterStructure,
 } from './site-content.mjs';
-import { siteThemeLabel, siteThemePath } from './site-paths.mjs';
-
-const emptyThemeFile = '---\n---\n';
+import {
+	siteRoutesDir,
+	siteRoutesLabel,
+	siteThemeLabel,
+	siteThemePath,
+	sitewideContentLabel,
+} from './site-paths.mjs';
 
 export const readThemeConfig = async () => {
 	const themeFile = await readFile(siteThemePath, 'utf8').catch((error) => {
 		if (error?.code === 'ENOENT') {
-			return emptyThemeFile;
+			throw new Error(`${siteThemeLabel} is required. Create it before running Norna.`);
 		}
 
 		throw error;
@@ -30,5 +36,65 @@ export const readThemeConfig = async () => {
 		].join('\n'));
 	}
 
-	return parseYamlMapping(frontmatterBody);
+	const config = parseYamlMapping(frontmatterBody);
+	if (Object.hasOwn(config, 'navigation')) {
+		throw new Error(`${siteThemeLabel} may not define navigation. Brand and logo belong in ${sitewideContentLabel}.`);
+	}
+
+	return config;
+};
+
+const getRouteThemeFiles = async (directory, relativeDirectory = '') => {
+	const entries = await readdir(directory, { withFileTypes: true }).catch((error) => {
+		if (error?.code === 'ENOENT') return [];
+		throw error;
+	});
+	const files = [];
+
+	for (const entry of entries) {
+		const relativePath = path.join(relativeDirectory, entry.name);
+		const absolutePath = path.join(directory, entry.name);
+		if (entry.isDirectory()) {
+			files.push(...await getRouteThemeFiles(absolutePath, relativePath));
+			continue;
+		}
+
+		if (entry.name === 'theme.md') {
+			files.push({
+				path: absolutePath,
+				label: `${siteRoutesLabel}/${relativePath.split(path.sep).join('/')}`,
+			});
+		}
+	}
+
+	return files;
+};
+
+export const validateRouteThemeFiles = async () => {
+	const files = await getRouteThemeFiles(siteRoutesDir);
+	const configs = [];
+
+	for (const file of files) {
+		const source = await readFile(file.path, 'utf8');
+		const { frontmatter, frontmatterBody } = splitSiteFile(source, file.label);
+		const issues = [];
+		validateFrontmatterIndentation(frontmatter, (issue) => issues.push(issue));
+		validateRouteThemeFrontmatterStructure(frontmatter, (issue) => issues.push(issue));
+
+		if (issues.length > 0) {
+			throw new Error([
+				`${file.label} has invalid frontmatter.`,
+				...issues.map((issue) => `- ${issue.message}`),
+			].join('\n'));
+		}
+
+		const config = parseYamlMapping(frontmatterBody);
+		if (Object.hasOwn(config, 'navigation')) {
+			throw new Error(`${file.label} may not define navigation. Brand and logo belong in ${sitewideContentLabel}.`);
+		}
+
+		configs.push({ ...file, config });
+	}
+
+	return configs;
 };

package/scripts/lib/typography.mjs

@@ -17,27 +17,32 @@ export const typographyPresets = {
 			h1: {
 				align: { desktop: 'left', mobile: 'left' },
 				size: 'medium',
+				weight: 400,
 				lineHeight: 1.04,
 			},
 			h2: {
 				align: { desktop: 'left', mobile: 'left' },
 				size: 'medium',
+				weight: 400,
 				lineHeight: 1.08,
 			},
 			h3: {
 				align: { desktop: 'left', mobile: 'left' },
 				size: 'medium',
+				weight: 500,
 				lineHeight: 1.35,
 			},
 			h4: {
 				align: { desktop: 'left', mobile: 'left' },
 				size: 'medium',
+				weight: 400,
 				lineHeight: 1.5,
 			},
 		},
 		body: {
 			align: { desktop: 'left', mobile: 'left' },
 			size: 'medium',
+			width: 'normal',
 			lineHeight: 1.5,
 		},
 		caption: {
@@ -51,27 +56,32 @@ export const typographyPresets = {
 			h1: {
 				align: { desktop: 'left', mobile: 'left' },
 				size: 'medium',
+				weight: 500,
 				lineHeight: 1.04,
 			},
 			h2: {
 				align: { desktop: 'left', mobile: 'left' },
 				size: 'medium',
+				weight: 500,
 				lineHeight: 1.08,
 			},
 			h3: {
 				align: { desktop: 'left', mobile: 'left' },
 				size: 'medium',
+				weight: 600,
 				lineHeight: 1.3,
 			},
 			h4: {
 				align: { desktop: 'left', mobile: 'left' },
 				size: 'medium',
+				weight: 500,
 				lineHeight: 1.42,
 			},
 		},
 		body: {
 			align: { desktop: 'left', mobile: 'left' },
 			size: 'medium',
+			width: 'wide',
 			lineHeight: 1.42,
 		},
 		caption: {
@@ -85,27 +95,32 @@ export const typographyPresets = {
 			h1: {
 				align: { desktop: 'left', mobile: 'left' },
 				size: 'medium',
+				weight: 500,
 				lineHeight: 1.06,
 			},
 			h2: {
 				align: { desktop: 'left', mobile: 'left' },
 				size: 'medium',
+				weight: 500,
 				lineHeight: 1.12,
 			},
 			h3: {
 				align: { desktop: 'left', mobile: 'left' },
 				size: 'medium',
+				weight: 500,
 				lineHeight: 1.35,
 			},
 			h4: {
 				align: { desktop: 'left', mobile: 'left' },
 				size: 'medium',
+				weight: 400,
 				lineHeight: 1.55,
 			},
 		},
 		body: {
 			align: { desktop: 'left', mobile: 'left' },
 			size: 'medium',
+			width: 'narrow',
 			lineHeight: 1.62,
 		},
 		caption: {
@@ -119,27 +134,32 @@ export const typographyPresets = {
 			h1: {
 				align: { desktop: 'left', mobile: 'left' },
 				size: 'medium',
+				weight: 600,
 				lineHeight: 1.02,
 			},
 			h2: {
 				align: { desktop: 'left', mobile: 'left' },
 				size: 'medium',
+				weight: 600,
 				lineHeight: 1.04,
 			},
 			h3: {
 				align: { desktop: 'left', mobile: 'left' },
 				size: 'medium',
+				weight: 600,
 				lineHeight: 1.18,
 			},
 			h4: {
 				align: { desktop: 'left', mobile: 'left' },
 				size: 'medium',
+				weight: 500,
 				lineHeight: 1.42,
 			},
 		},
 		body: {
 			align: { desktop: 'left', mobile: 'left' },
 			size: 'medium',
+			width: 'narrow',
 			lineHeight: 1.42,
 		},
 		caption: {
@@ -243,32 +263,6 @@ export const resolveTypographyConfig = (typography = defaultTypography) => {
 	};
 };
 
-export const resolveTypographyOverride = (baseResolved, typographyConfig) => {
-	if (typographyConfig?.preset || typographyConfig?.rhythm) {
-		return resolveTypographyConfig({
-			preset: typographyConfig.preset ?? baseResolved.preset,
-			rhythm: typographyConfig.rhythm ?? baseResolved.rhythm,
-			overrides: typographyConfig.overrides,
-		});
-	}
-
-	if (typographyConfig?.overrides) {
-		return {
-			preset: baseResolved.preset,
-			rhythm: baseResolved.rhythm,
-			values: mergeDeep(baseResolved.values, typographyConfig.overrides),
-		};
-	}
-
-	return baseResolved;
-};
-
-export const resolveSectionTypography = (defaultTypographyConfig, sectionTypographyConfig) => {
-	const defaultResolved = resolveTypographyConfig(defaultTypographyConfig);
-
-	return resolveTypographyOverride(defaultResolved, sectionTypographyConfig);
-};
-
 const quoteString = (value) => typeof value === 'string' && !/^[a-z0-9.-]+$/i.test(value)
 	? JSON.stringify(value)
 	: value;

package/scripts/show-typography.mjs

@@ -1,8 +1,8 @@
 import { readFile } from 'node:fs/promises';
+import path from 'node:path';
 import { findMap } from './lib/frontmatter-yaml.mjs';
 import {
 	defaultTypography,
-	resolveTypographyOverride,
 	resolveTypographyConfig,
 	toYamlLines,
 	typographyPresets,
@@ -15,11 +15,13 @@ import {
 	splitSiteFile,
 	validateContentFrontmatterStructure,
 	validateFrontmatterIndentation,
+	validateRouteThemeFrontmatterStructure,
 	validateThemeFrontmatterStructure,
 } from './lib/site-content.mjs';
 import {
 	siteContentLabel,
 	siteContentPath,
+	siteRoutesDir,
 	siteThemeLabel,
 	siteThemePath,
 } from './lib/site-paths.mjs';
@@ -30,30 +32,35 @@ const typographyValuePaths = [
 	['headings', 'h1', 'align', 'desktop'],
 	['headings', 'h1', 'align', 'mobile'],
 	['headings', 'h1', 'size'],
+	['headings', 'h1', 'weight'],
 	['headings', 'h1', 'lineHeight'],
 	['headings', 'h1', 'spacingBefore'],
 	['headings', 'h1', 'spacingAfter'],
 	['headings', 'h2', 'align', 'desktop'],
 	['headings', 'h2', 'align', 'mobile'],
 	['headings', 'h2', 'size'],
+	['headings', 'h2', 'weight'],
 	['headings', 'h2', 'lineHeight'],
 	['headings', 'h2', 'spacingBefore'],
 	['headings', 'h2', 'spacingAfter'],
 	['headings', 'h3', 'align', 'desktop'],
 	['headings', 'h3', 'align', 'mobile'],
 	['headings', 'h3', 'size'],
+	['headings', 'h3', 'weight'],
 	['headings', 'h3', 'lineHeight'],
 	['headings', 'h3', 'spacingBefore'],
 	['headings', 'h3', 'spacingAfter'],
 	['headings', 'h4', 'align', 'desktop'],
 	['headings', 'h4', 'align', 'mobile'],
 	['headings', 'h4', 'size'],
+	['headings', 'h4', 'weight'],
 	['headings', 'h4', 'lineHeight'],
 	['headings', 'h4', 'spacingBefore'],
 	['headings', 'h4', 'spacingAfter'],
 	['body', 'align', 'desktop'],
 	['body', 'align', 'mobile'],
 	['body', 'size'],
+	['body', 'width'],
 	['body', 'lineHeight'],
 	['body', 'paragraphSpacing'],
 	['caption', 'align', 'desktop'],
@@ -74,8 +81,6 @@ const rhythmValuePaths = new Set([
 	'body.paragraphSpacing',
 	'caption.spacingBefore',
 ]);
-const countIndent = (line) => line.match(/^\s*/)?.[0].length ?? 0;
-
 const isPlainObject = (value) => (
 	value !== null &&
 	typeof value === 'object' &&
@@ -156,19 +161,6 @@ const applyOverrideSources = (sources, typographyConfig, sourceLabel) => {
 	return sources;
 };
 
-const inheritedSources = (sources) => {
-	const inherited = structuredClone(sources);
-
-	for (const path of typographyValuePaths) {
-		setPath(inherited, path, {
-			...getPath(sources, path),
-			inherited: true,
-		});
-	}
-
-	return inherited;
-};
-
 const resolveAnnotatedTypographyConfig = (typographyConfig, sourceLabel) => {
 	const resolved = resolveTypographyConfig(typographyConfig ?? defaultTypography);
 	const sources = applyOverrideSources(
@@ -193,126 +185,14 @@ const resolveAnnotatedTypographyConfig = (typographyConfig, sourceLabel) => {
 	};
 };
 
-const resolveAnnotatedTypographyOverride = (baseAnnotated, typographyConfig, sourceLabel) => {
-	if (typographyConfig?.preset || typographyConfig?.rhythm) {
-		const resolvedConfig = {
-			preset: typographyConfig.preset ?? baseAnnotated.resolved.preset,
-			rhythm: typographyConfig.rhythm ?? baseAnnotated.resolved.rhythm,
-			overrides: typographyConfig.overrides,
-		};
-		const resolved = resolveTypographyConfig(resolvedConfig);
-		const sources = applyOverrideSources(
-			defaultSources(resolved.preset, resolved.rhythm),
-			typographyConfig,
-			sourceLabel,
-		);
-
-		return {
-			preset: {
-				value: resolved.preset,
-				source: typographyConfig.preset ? sourceLabel : baseAnnotated.preset.source,
-				...(typographyConfig.preset ? {} : { inherited: true }),
-			},
-			rhythm: {
-				value: resolved.rhythm,
-				source: typographyConfig.rhythm ? sourceLabel : baseAnnotated.rhythm.source,
-				...(typographyConfig.rhythm ? {} : { inherited: true }),
-			},
-			resolved,
-			sources,
-		};
-	}
-
-	if (typographyConfig?.overrides) {
-		const resolved = resolveTypographyOverride(baseAnnotated.resolved, typographyConfig);
-		const sources = applyOverrideSources(
-			inheritedSources(baseAnnotated.sources),
-			typographyConfig,
-			sourceLabel,
-		);
-
-		return {
-			preset: {
-				value: resolved.preset,
-				source: baseAnnotated.preset.source,
-				inherited: true,
-			},
-			rhythm: {
-				value: resolved.rhythm,
-				source: baseAnnotated.rhythm.source,
-				inherited: true,
-			},
-			resolved,
-			sources,
-		};
-	}
-
-	return {
-		preset: {
-			value: baseAnnotated.resolved.preset,
-			source: baseAnnotated.preset.source,
-			inherited: true,
-		},
-		rhythm: {
-			value: baseAnnotated.resolved.rhythm,
-			source: baseAnnotated.rhythm.source,
-			inherited: true,
-		},
-		resolved: baseAnnotated.resolved,
-		sources: inheritedSources(baseAnnotated.sources),
-	};
-};
-
 const formatAnnotatedTypography = (annotated) => ({
 	preset: annotated.preset,
 	rhythm: annotated.rhythm,
 	resolved: annotateResolvedValues(annotated.resolved, annotated.sources),
 });
 
-const getSectionMetadataBlocks = (lines) => {
-	const sectionsMap = findMap(lines, 'sections');
-	if (!sectionsMap) return new Map();
-
-	const sections = new Map();
-	let current = null;
-
-	for (let index = sectionsMap.index + 1; index < lines.length; index += 1) {
-		const line = lines[index];
-		if (!line.trim()) continue;
-
-		const indent = countIndent(line);
-		if (indent <= sectionsMap.indent) break;
-
-		const sectionMatch = line.match(/^\s{2}([a-z0-9-]+):(?:\s+.*)?\s*$/);
-		if (sectionMatch) {
-			if (current) current.end = index;
-			current = { id: sectionMatch[1], start: index, end: lines.length };
-			sections.set(current.id, current);
-		}
-	}
-
-	const sectionList = Array.from(sections.values());
-	const finalSection = sectionList.at(-1);
-	if (finalSection) {
-		const afterSections = lines.findIndex((line, index) => (
-			index > finalSection.start &&
-			line.trim() &&
-			countIndent(line) <= sectionsMap.indent
-		));
-		finalSection.end = afterSections === -1 ? lines.length : afterSections;
-	}
-
-	return sections;
-};
-
 const readThemeTypography = async () => {
-	const themeFile = await readFile(siteThemePath, 'utf8').catch((error) => {
-		if (error?.code === 'ENOENT') {
-			return '---\n---\n';
-		}
-
-		throw error;
-	});
+	const themeFile = await readFile(siteThemePath, 'utf8');
 	const { frontmatter: themeFrontmatter, frontmatterBody: themeFrontmatterBody } = splitSiteFile(themeFile, siteThemeLabel);
 	const indentationIssues = [];
 	validateFrontmatterIndentation(themeFrontmatter, (issue) => indentationIssues.push(issue));
@@ -329,8 +209,35 @@ const readThemeTypography = async () => {
 	return resolveAnnotatedTypographyConfig(themeTypographyConfig ?? defaultTypography, siteThemeLabel);
 };
 
-const readPageTypography = async (contentFile, themeTypography) => {
-	const { frontmatter, frontmatterBody, body } = await readSiteFile(contentFile.contentPath, contentFile.contentLabel);
+const readRouteThemeTypography = async (contentFile, themeTypography) => {
+	if (contentFile.isHome) return themeTypography;
+
+	const routeThemePath = path.join(siteRoutesDir, contentFile.routeDirectory, 'theme.md');
+	const routeThemeLabel = `${contentFile.contentLabel.replace(/\/route-content\.md$/, '')}/theme.md`;
+	const routeThemeFile = await readFile(routeThemePath, 'utf8').catch((error) => {
+		if (error?.code === 'ENOENT') return null;
+		throw error;
+	});
+	if (!routeThemeFile) return themeTypography;
+
+	const { frontmatter, frontmatterBody } = splitSiteFile(routeThemeFile, routeThemeLabel);
+	const indentationIssues = [];
+	validateFrontmatterIndentation(frontmatter, (issue) => indentationIssues.push(issue));
+	validateRouteThemeFrontmatterStructure(frontmatter, (issue) => indentationIssues.push(issue));
+	if (indentationIssues.length > 0) {
+		throw new Error([
+			`Cannot inspect typography because ${routeThemeLabel} has invalid frontmatter.`,
+			...indentationIssues.map((issue) => `- ${issue.message}`),
+		].join('\n'));
+	}
+
+	const lines = frontmatterBody.split(/\r?\n/);
+	const typographyConfig = findMap(lines, 'typography', 0, lines.length, 0)?.value;
+	return resolveAnnotatedTypographyConfig(typographyConfig ?? defaultTypography, routeThemeLabel);
+};
+
+const readPageTypography = async (contentFile, siteThemeTypography) => {
+	const { frontmatter, body } = await readSiteFile(contentFile.contentPath, contentFile.contentLabel);
 	const indentationIssues = [];
 	validateFrontmatterIndentation(frontmatter, (issue) => indentationIssues.push(issue));
 	validateContentFrontmatterStructure(frontmatter, (issue) => indentationIssues.push(issue));
@@ -341,27 +248,13 @@ const readPageTypography = async (contentFile, themeTypography) => {
 		].join('\n'));
 	}
 
-	const lines = frontmatterBody.split(/\r?\n/);
-	const pagePresentation = findMap(lines, 'presentation', 0, lines.length, 0);
-	const pageTypographyConfig = pagePresentation
-		? findMap(lines, 'typography', pagePresentation.index + 1, pagePresentation.nextIndex)?.value
-		: null;
-	const pageTypography = resolveAnnotatedTypographyOverride(themeTypography, pageTypographyConfig ?? undefined, contentFile.contentLabel);
-	const sectionMetadataBlocks = getSectionMetadataBlocks(lines);
+	const pageTypography = await readRouteThemeTypography(contentFile, siteThemeTypography);
 	const sections = getBodySections(body).sections
 		.filter((section) => section.id)
 		.map((section) => {
-		const metadata = sectionMetadataBlocks.get(section.id);
-		const presentation = metadata
-			? findMap(lines, 'presentation', metadata.start + 1, metadata.end)
-			: null;
-		const typography = presentation
-			? findMap(lines, 'typography', presentation.index + 1, presentation.nextIndex)?.value
-			: null;
-
 		return {
 			id: section.id,
-			typography: resolveAnnotatedTypographyOverride(pageTypography, typography ?? undefined, `${contentFile.contentLabel} sections.${section.id}`),
+			typography: pageTypography,
 		};
 	});
 

package/scripts/sync-content-sections.mjs

@@ -5,6 +5,7 @@ import { stdin as input, stdout as output } from 'node:process';
 import path from 'node:path';
 import { promisify } from 'node:util';
 import {
+	extractInlineNoteDiagnostics,
 	extractMarkdownImageReferences,
 	extractNornaMarkdownBlockDiagnostics,
 	getNornaBlockImageReferences,
@@ -12,10 +13,9 @@ import {
 import {
 	getBodySections,
 	getContentFiles,
-	getFrontmatterInlineStyleNames,
 	getFrontmatterSections,
 	getImageCandidatesByName,
-	getInlineStyleReferences,
+	getDeprecatedInlineStyleReferences,
 	readSiteFile,
 	readThemeFile,
 	toPosixPath,
@@ -400,10 +400,6 @@ try {
 	}
 }
 
-const themeInlineStyleNames = themeFrontmatter
-	? getFrontmatterInlineStyleNames(themeFrontmatter)
-	: new Set();
-
 const contentFiles = await getContentFiles();
 const allImageFiles = [];
 const contentFileContexts = [];
@@ -462,6 +458,17 @@ for (const contentFile of contentFiles) {
 		});
 		blockResultsBySectionId.set(section.id, blockResults);
 
+		const inlineNoteResults = extractInlineNoteDiagnostics(section.text, {
+			label: contentFile.contentLabel,
+			lineOffset: bodyLineOffset + section.line - 1,
+		});
+		for (const error of inlineNoteResults.errors) {
+			addSectionIssue(contentFile, section, {
+				severity: 'error',
+				message: error.message,
+			});
+		}
+
 		for (const reference of getNornaBlockImageReferences(blockResults.blocks)) {
 			const expectedPath = getExpectedImagePath(contentFile, section.id, reference.image);
 			addExpectedReference(globalExpectedReferencesByPath, expectedPath, { contentFile, section, reference });
@@ -498,14 +505,12 @@ for (const context of contentFileContexts) {
 		}
 	}
 
-	for (const styleName of new Set(getInlineStyleReferences(body))) {
-		if (!themeInlineStyleNames.has(styleName)) {
-			addContentIssue(contentFile, {
-				severity: 'error',
-				message: `Inline style ".${styleName}" is used in ${contentFile.contentLabel} but is not defined in ${siteThemeLabel} presentation.inlineStyles.`,
-				fix: `Add presentation.inlineStyles.${styleName} to ${siteThemeLabel} or remove "{.${styleName}}" from Markdown.`,
-			});
-		}
+	for (const styleName of new Set(getDeprecatedInlineStyleReferences(body))) {
+		addContentIssue(contentFile, {
+			severity: 'error',
+			message: `Inline color style ".${styleName}" is no longer supported in ${contentFile.contentLabel}.`,
+			fix: 'Use standard Markdown emphasis, a blockquote, or a semantic Norna block instead of color syntax.',
+		});
 	}
 
 	for (const section of sections) {