@janga/norna 0.7.9 → 0.7.11

package/scripts/show-typography.mjs

@@ -1,8 +1,8 @@
 import { readFile } from 'node:fs/promises';
-import { findMap } from './lib/frontmatter-yaml.mjs';
+import path from 'node:path';
+import { parseYamlMapping } from './lib/frontmatter-yaml.mjs';
 import {
 	defaultTypography,
-	resolveTypographyOverride,
 	resolveTypographyConfig,
 	toYamlLines,
 	typographyPresets,
@@ -15,14 +15,17 @@ import {
 	splitSiteFile,
 	validateContentFrontmatterStructure,
 	validateFrontmatterIndentation,
+	validateRouteThemeFrontmatterStructure,
 	validateThemeFrontmatterStructure,
 } from './lib/site-content.mjs';
 import {
 	siteContentLabel,
 	siteContentPath,
+	siteRoutesDir,
 	siteThemeLabel,
 	siteThemePath,
 } from './lib/site-paths.mjs';
+import { resolveThemeConfig } from './lib/theme-presets.mjs';
 
 const mode = process.argv[2] ?? 'show';
 
@@ -30,30 +33,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 +82,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 +162,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,144 +186,59 @@ 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;
+const readThemeTypography = async () => {
+	const themeFile = await readFile(siteThemePath, 'utf8');
+	const { frontmatter: themeFrontmatter, frontmatterBody: themeFrontmatterBody } = splitSiteFile(themeFile, siteThemeLabel);
+	const indentationIssues = [];
+	validateFrontmatterIndentation(themeFrontmatter, (issue) => indentationIssues.push(issue));
+	validateThemeFrontmatterStructure(themeFrontmatter, (issue) => indentationIssues.push(issue));
+	if (indentationIssues.length > 0) {
+		throw new Error([
+			`Cannot inspect typography because ${siteThemeLabel} has invalid frontmatter.`,
+			...indentationIssues.map((issue) => `- ${issue.message}`),
+		].join('\n'));
 	}
 
-	return sections;
+	const themeConfig = resolveThemeConfig(parseYamlMapping(themeFrontmatterBody), siteThemeLabel);
+	const themeTypographyConfig = themeConfig.typography;
+	return resolveAnnotatedTypographyConfig(themeTypographyConfig ?? defaultTypography, siteThemeLabel);
 };
 
-const readThemeTypography = async () => {
-	const themeFile = await readFile(siteThemePath, 'utf8').catch((error) => {
-		if (error?.code === 'ENOENT') {
-			return '---\n---\n';
-		}
+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;
 	});
-	const { frontmatter: themeFrontmatter, frontmatterBody: themeFrontmatterBody } = splitSiteFile(themeFile, siteThemeLabel);
+	if (!routeThemeFile) return themeTypography;
+
+	const { frontmatter, frontmatterBody } = splitSiteFile(routeThemeFile, routeThemeLabel);
 	const indentationIssues = [];
-	validateFrontmatterIndentation(themeFrontmatter, (issue) => indentationIssues.push(issue));
-	validateThemeFrontmatterStructure(themeFrontmatter, (issue) => indentationIssues.push(issue));
+	validateFrontmatterIndentation(frontmatter, (issue) => indentationIssues.push(issue));
+	validateRouteThemeFrontmatterStructure(frontmatter, (issue) => indentationIssues.push(issue));
 	if (indentationIssues.length > 0) {
 		throw new Error([
-			`Cannot inspect typography because ${siteThemeLabel} has invalid frontmatter.`,
+			`Cannot inspect typography because ${routeThemeLabel} has invalid frontmatter.`,
 			...indentationIssues.map((issue) => `- ${issue.message}`),
 		].join('\n'));
 	}
 
-	const themeLines = themeFrontmatterBody.split(/\r?\n/);
-	const themeTypographyConfig = findMap(themeLines, 'typography', 0, themeLines.length, 0)?.value;
-	return resolveAnnotatedTypographyConfig(themeTypographyConfig ?? defaultTypography, siteThemeLabel);
+	const routeThemeConfig = resolveThemeConfig(parseYamlMapping(frontmatterBody), routeThemeLabel);
+	const typographyConfig = routeThemeConfig.typography;
+	return resolveAnnotatedTypographyConfig(typographyConfig ?? defaultTypography, routeThemeLabel);
 };
 
-const readPageTypography = async (contentFile, themeTypography) => {
-	const { frontmatter, frontmatterBody, body } = await readSiteFile(contentFile.contentPath, contentFile.contentLabel);
+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 +249,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,15 +13,13 @@ import {
 import {
 	getBodySections,
 	getContentFiles,
-	getFrontmatterInlineStyleNames,
 	getFrontmatterSections,
 	getImageCandidatesByName,
-	getInlineStyleReferences,
+	getDeprecatedInlineStyleReferences,
 	readSiteFile,
 	readThemeFile,
 	toPosixPath,
 	validateContentFrontmatterStructure,
-	validateFrontmatterColorValues,
 	validateFrontmatterIndentation,
 	validateThemeFrontmatterStructure,
 } from './lib/site-content.mjs';
@@ -395,17 +394,12 @@ try {
 	themeFrontmatter = (await readThemeFile(siteThemePath)).frontmatter;
 	validateFrontmatterIndentation(themeFrontmatter, addIssue);
 	validateThemeFrontmatterStructure(themeFrontmatter, addIssue);
-	validateFrontmatterColorValues(themeFrontmatter, addIssue, siteThemeLabel);
 } catch (error) {
 	if (error?.code !== 'ENOENT') {
 		throw error;
 	}
 }
 
-const themeInlineStyleNames = themeFrontmatter
-	? getFrontmatterInlineStyleNames(themeFrontmatter)
-	: new Set();
-
 const contentFiles = await getContentFiles();
 const allImageFiles = [];
 const contentFileContexts = [];
@@ -417,7 +411,6 @@ for (const contentFile of contentFiles) {
 	const bodyLineOffset = frontmatter.split(/\r?\n/).length - 1;
 	validateFrontmatterIndentation(frontmatter, addIssue);
 	validateContentFrontmatterStructure(frontmatter, addIssue);
-	validateFrontmatterColorValues(frontmatter, addIssue, contentFile.contentLabel);
 
 	const frontmatterSections = getFrontmatterSections(frontmatter);
 	const frontmatterIds = new Set(frontmatterSections.map((section) => section.id));
@@ -465,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 });
@@ -501,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) {

package/scripts/test-content-check.mjs

@@ -45,8 +45,8 @@ const makePngHeader = ({ width, height }) => {
 const defaultTheme = `---
 typography:
   preset: quiet-gallery
-frame:
-  colors: presentation
+presentation:
+  palette: dark
 ---
 `;
 
@@ -173,14 +173,6 @@ test('content:check warns when carousel images use different aspect ratios', asy
 	});
 });
 
-const inlineStyleTheme = `---
-presentation:
-  inlineStyles:
-    highlight:
-      color: "#ffd84d"
----
-`;
-
 const inlineStyleSite = `---
 title: Inline Style
 ---
@@ -188,10 +180,9 @@ title: Inline Style
 This has [known text]{.highlight} and [unknown text]{.missing}.
 `;
 
-test('content:check fails when Markdown uses undefined inline styles', async () => {
+test('content:check fails when Markdown uses removed inline color styles', async () => {
 	await withTempProject({
 		site: inlineStyleSite,
-		theme: inlineStyleTheme,
 		files: [],
 	}, async (root) => {
 		const result = runContentScript(root, ['--check']);
@@ -199,20 +190,12 @@ test('content:check fails when Markdown uses undefined inline styles', async ()
 
 		assert.equal(result.status, 1, output);
 		assert.match(output, /^Content check failed\./m);
-		assert.match(output, /Inline style "\.missing" is used in site\/content\.md but is not defined in site\/theme\.md presentation\.inlineStyles\./);
-		assert.doesNotMatch(output, /"\.highlight" is used in Markdown/);
+		assert.match(output, /Inline color style "\.highlight" is no longer supported in site\/content\.md\./);
+		assert.match(output, /Inline color style "\.missing" is no longer supported in site\/content\.md\./);
 	});
 });
 
-const invalidInlineStyleColorTheme = `---
-presentation:
-  inlineStyles:
-    yellow:
-      color: "#ffd844d"
----
-`;
-
-test('content:check explains invalid inline style colors', async () => {
+test('content:check suggests semantic Markdown instead of inline color styles', async () => {
 	await withTempProject({
 		site: `---
 title: Invalid Inline Color
@@ -220,7 +203,6 @@ title: Invalid Inline Color
 ## Intro {#intro}
 This has [yellow text]{.yellow}.
 `,
-		theme: invalidInlineStyleColorTheme,
 		files: [],
 	}, async (root) => {
 		const result = runContentScript(root, ['--check']);
@@ -228,9 +210,59 @@ This has [yellow text]{.yellow}.
 
 		assert.equal(result.status, 1, output);
 		assert.match(output, /^Content check failed\./m);
-		assert.match(output, /site\/theme\.md line 5 defines presentation\.inlineStyles\.yellow\.color with invalid color value "#ffd844d"\./);
-		assert.match(output, /Use a quoted hex color in #rgb, #rrggbb, or #rrggbbaa form, for example color: "#ffd84d"\./);
-		assert.doesNotMatch(output, /Inline style "\.yellow" is used in site\/content\.md but is not defined/);
+		assert.match(output, /Use standard Markdown emphasis, a blockquote, or a semantic Norna block instead of color syntax\./);
+	});
+});
+
+const inlineNoteSite = `---
+title: Inline notes
+description: Fixture
+---
+## Intro {#intro}
+This paragraph has a note reference.{note-ref}
+
+{note: Additional context.}
+
+\`\`\`text
+{note-ref}
+{note: This is code, not a note.
+\`\`\`
+`;
+
+test('content:check accepts valid inline notes and ignores note syntax in code fences', async () => {
+	await withTempProject({ site: inlineNoteSite, files: [] }, async (root) => {
+		const result = runContentScript(root, ['--check']);
+		const output = getOutput(result);
+
+		assert.equal(result.status, 0, output);
+		assert.match(output, /Content check passed\./);
+	});
+});
+
+test('content:check rejects unpaired and repeated inline notes', async () => {
+	await withTempProject({
+		site: `---
+title: Invalid inline notes
+description: Fixture
+---
+## Orphan {#orphan}
+{note: This note has no reference.}
+
+## Missing {#missing}
+This reference has no note.{note-ref}
+
+## Repeated {#repeated}
+This paragraph has {note-ref} two references {note-ref}.
+`,
+		files: [],
+	}, async (root) => {
+		const result = runContentScript(root, ['--check']);
+		const output = getOutput(result);
+
+		assert.equal(result.status, 1, output);
+		assert.match(output, /A "\{note: \.\.\.\}" requires a preceding paragraph containing "\{note-ref\}"\./);
+		assert.match(output, /contains "\{note-ref\}" but has no following "\{note: \.\.\.\}"/);
+		assert.match(output, /A paragraph may contain only one "\{note-ref\}"\./);
 	});
 });