@janga/norna 0.7.1 → 0.7.3

package/scripts/lib/typography.mjs

@@ -7,11 +7,31 @@ export const typographyPresetNames = [
 
 export const typographyPresets = {
 	'quiet-gallery': {
-		heading: {
-			align: { desktop: 'left', mobile: 'left' },
-			size: 'medium',
-			lineHeight: 1.08,
-			spacing: '0.65em',
+		headings: {
+			h1: {
+				align: { desktop: 'left', mobile: 'left' },
+				size: 'large',
+				lineHeight: 1.04,
+				spacing: '0.55em',
+			},
+			h2: {
+				align: { desktop: 'left', mobile: 'left' },
+				size: 'medium',
+				lineHeight: 1.08,
+				spacing: '0.65em',
+			},
+			h3: {
+				align: { desktop: 'left', mobile: 'left' },
+				size: 'small',
+				lineHeight: 1.35,
+				spacing: '0.9rem',
+			},
+			h4: {
+				align: { desktop: 'left', mobile: 'left' },
+				size: 'medium',
+				lineHeight: 1.5,
+				spacing: '0.85rem',
+			},
 		},
 		body: {
 			align: { desktop: 'left', mobile: 'left' },
@@ -27,15 +47,35 @@ export const typographyPresets = {
 		},
 	},
 	'compact-gallery': {
-		heading: {
-			align: { desktop: 'left', mobile: 'left' },
-			size: 'small',
-			lineHeight: 1.08,
-			spacing: '0.45em',
+		headings: {
+			h1: {
+				align: { desktop: 'left', mobile: 'left' },
+				size: 'large',
+				lineHeight: 1.04,
+				spacing: '0.45em',
+			},
+			h2: {
+				align: { desktop: 'left', mobile: 'left' },
+				size: 'medium',
+				lineHeight: 1.08,
+				spacing: '0.45em',
+			},
+			h3: {
+				align: { desktop: 'left', mobile: 'left' },
+				size: 'small',
+				lineHeight: 1.3,
+				spacing: '0.75rem',
+			},
+			h4: {
+				align: { desktop: 'left', mobile: 'left' },
+				size: 'medium',
+				lineHeight: 1.42,
+				spacing: '0.6rem',
+			},
 		},
 		body: {
 			align: { desktop: 'left', mobile: 'left' },
-			size: 'small',
+			size: 'medium',
 			lineHeight: 1.42,
 			paragraphSpacing: '0.6em',
 		},
@@ -47,15 +87,35 @@ export const typographyPresets = {
 		},
 	},
 	'text-forward': {
-		heading: {
-			align: { desktop: 'left', mobile: 'left' },
-			size: 'medium',
-			lineHeight: 1.12,
-			spacing: '0.8em',
+		headings: {
+			h1: {
+				align: { desktop: 'left', mobile: 'left' },
+				size: 'large',
+				lineHeight: 1.06,
+				spacing: '0.65em',
+			},
+			h2: {
+				align: { desktop: 'left', mobile: 'left' },
+				size: 'medium',
+				lineHeight: 1.12,
+				spacing: '0.8em',
+			},
+			h3: {
+				align: { desktop: 'left', mobile: 'left' },
+				size: 'small',
+				lineHeight: 1.35,
+				spacing: '1rem',
+			},
+			h4: {
+				align: { desktop: 'left', mobile: 'left' },
+				size: 'medium',
+				lineHeight: 1.55,
+				spacing: '0.85rem',
+			},
 		},
 		body: {
 			align: { desktop: 'left', mobile: 'left' },
-			size: 'large',
+			size: 'medium',
 			lineHeight: 1.62,
 			paragraphSpacing: '1em',
 		},
@@ -67,15 +127,35 @@ export const typographyPresets = {
 		},
 	},
 	statement: {
-		heading: {
-			align: { desktop: 'left', mobile: 'left' },
-			size: 'large',
-			lineHeight: 1.04,
-			spacing: '0.5em',
+		headings: {
+			h1: {
+				align: { desktop: 'left', mobile: 'left' },
+				size: 'xlarge',
+				lineHeight: 1.02,
+				spacing: '0.45em',
+			},
+			h2: {
+				align: { desktop: 'left', mobile: 'left' },
+				size: 'large',
+				lineHeight: 1.04,
+				spacing: '0.5em',
+			},
+			h3: {
+				align: { desktop: 'left', mobile: 'left' },
+				size: 'medium',
+				lineHeight: 1.18,
+				spacing: '0.85rem',
+			},
+			h4: {
+				align: { desktop: 'left', mobile: 'left' },
+				size: 'medium',
+				lineHeight: 1.42,
+				spacing: '0.75rem',
+			},
 		},
 		body: {
 			align: { desktop: 'left', mobile: 'left' },
-			size: 'large',
+			size: 'medium',
 			lineHeight: 1.42,
 			paragraphSpacing: '0.75em',
 		},

package/scripts/show-typography.mjs

@@ -1,4 +1,5 @@
 import { readFile } from 'node:fs/promises';
+import { findMap } from './lib/frontmatter-yaml.mjs';
 import {
 	defaultTypography,
 	resolveTypographyOverride,
@@ -7,6 +8,8 @@ import {
 	typographyPresets,
 } from './lib/typography.mjs';
 import {
+	getContentFiles,
+	readSiteFile,
 	splitSiteFile,
 	validateContentFrontmatterStructure,
 	validateFrontmatterIndentation,
@@ -21,68 +24,189 @@ import {
 
 const mode = process.argv[2] ?? 'show';
 
+const typographyValuePaths = [
+	['headings', 'h1', 'align', 'desktop'],
+	['headings', 'h1', 'align', 'mobile'],
+	['headings', 'h1', 'size'],
+	['headings', 'h1', 'lineHeight'],
+	['headings', 'h1', 'spacing'],
+	['headings', 'h2', 'align', 'desktop'],
+	['headings', 'h2', 'align', 'mobile'],
+	['headings', 'h2', 'size'],
+	['headings', 'h2', 'lineHeight'],
+	['headings', 'h2', 'spacing'],
+	['headings', 'h3', 'align', 'desktop'],
+	['headings', 'h3', 'align', 'mobile'],
+	['headings', 'h3', 'size'],
+	['headings', 'h3', 'lineHeight'],
+	['headings', 'h3', 'spacing'],
+	['headings', 'h4', 'align', 'desktop'],
+	['headings', 'h4', 'align', 'mobile'],
+	['headings', 'h4', 'size'],
+	['headings', 'h4', 'lineHeight'],
+	['headings', 'h4', 'spacing'],
+	['body', 'align', 'desktop'],
+	['body', 'align', 'mobile'],
+	['body', 'size'],
+	['body', 'lineHeight'],
+	['body', 'paragraphSpacing'],
+	['caption', 'align', 'desktop'],
+	['caption', 'align', 'mobile'],
+	['caption', 'size'],
+	['caption', 'lineHeight'],
+	['caption', 'spacing'],
+];
 const countIndent = (line) => line.match(/^\s*/)?.[0].length ?? 0;
 
-const parseScalar = (rawValue) => {
-	const value = rawValue.trim();
+const isPlainObject = (value) => (
+	value !== null &&
+	typeof value === 'object' &&
+	!Array.isArray(value)
+);
 
-	if (/^-?\d+(?:\.\d+)?$/.test(value)) return Number(value);
-	if ((value.startsWith('"') && value.endsWith('"')) || (value.startsWith("'") && value.endsWith("'"))) {
-		return value.slice(1, -1);
+const hasPath = (value, path) => {
+	let current = value;
+
+	for (const segment of path) {
+		if (!isPlainObject(current) || !(segment in current)) {
+			return false;
+		}
+
+		current = current[segment];
 	}
 
-	return value;
+	return true;
 };
 
-const parseMapping = (lines, startIndex, baseIndent) => {
-	const value = {};
-	let index = startIndex;
+const getPath = (value, path) => path.reduce((current, segment) => current?.[segment], value);
 
-	while (index < lines.length) {
-		const line = lines[index];
-		if (!line.trim() || line.trim().startsWith('#')) {
-			index += 1;
-			continue;
-		}
+const setPath = (value, path, entry) => {
+	let current = value;
 
-		const indent = countIndent(line);
-		if (indent <= baseIndent) break;
-		if (line.trim().startsWith('- ')) break;
-
-		const match = line.trim().match(/^([a-zA-Z][a-zA-Z0-9-]*):(?:\s+(.*))?$/);
-		if (!match) break;
-
-		const [, key, rawValue] = match;
-		if (rawValue === undefined) {
-			const parsed = parseMapping(lines, index + 1, indent);
-			value[key] = parsed.value;
-			index = parsed.nextIndex;
-		} else {
-			value[key] = parseScalar(rawValue);
-			index += 1;
+	for (const segment of path.slice(0, -1)) {
+		current[segment] ??= {};
+		current = current[segment];
+	}
+
+	current[path.at(-1)] = entry;
+};
+
+const annotateResolvedValues = (resolved, sources) => {
+	const annotated = {};
+
+	for (const path of typographyValuePaths) {
+		const source = getPath(sources, path);
+		setPath(annotated, path, {
+			value: getPath(resolved.values, path),
+			source: source.source,
+			...(source.inherited ? { inherited: true } : {}),
+		});
+	}
+
+	return annotated;
+};
+
+const presetSources = (presetName) => {
+	const sources = {};
+
+	for (const path of typographyValuePaths) {
+		setPath(sources, path, {
+			source: `preset:${presetName}`,
+			inherited: false,
+		});
+	}
+
+	return sources;
+};
+
+const applyOverrideSources = (sources, typographyConfig, sourceLabel) => {
+	const overrides = typographyConfig?.overrides;
+	if (!overrides) return sources;
+
+	for (const path of typographyValuePaths) {
+		if (hasPath(overrides, path)) {
+			setPath(sources, path, {
+				source: `${sourceLabel} override`,
+				inherited: false,
+			});
 		}
 	}
 
-	return { value, nextIndex: index };
+	return sources;
 };
 
-const findMap = (lines, label, parentStart = 0, parentEnd = lines.length, requiredIndent = null) => {
-	for (let index = parentStart; index < parentEnd; index += 1) {
-		const line = lines[index];
-		const match = line.match(/^(\s*)([a-zA-Z][a-zA-Z0-9-]*):\s*$/);
-		if (!match || match[2] !== label) continue;
-		if (requiredIndent !== null && match[1].length !== requiredIndent) continue;
+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(
+		presetSources(resolved.preset),
+		typographyConfig,
+		sourceLabel,
+	);
+
+	return {
+		preset: {
+			value: resolved.preset,
+			source: typographyConfig?.preset ? sourceLabel : 'engine default',
+			...(typographyConfig?.preset ? {} : { inherited: true }),
+		},
+		resolved,
+		sources,
+	};
+};
+
+const resolveAnnotatedTypographyOverride = (baseAnnotated, typographyConfig, sourceLabel) => {
+	if (typographyConfig?.preset) {
+		return resolveAnnotatedTypographyConfig(typographyConfig, sourceLabel);
+	}
+
+	if (typographyConfig?.overrides) {
+		const resolved = resolveTypographyOverride(baseAnnotated.resolved, typographyConfig);
+		const sources = applyOverrideSources(
+			inheritedSources(baseAnnotated.sources),
+			typographyConfig,
+			sourceLabel,
+		);
 
 		return {
-			index,
-			indent: match[1].length,
-			...parseMapping(lines, index + 1, match[1].length),
+			preset: {
+				value: resolved.preset,
+				source: baseAnnotated.preset.source,
+				inherited: true,
+			},
+			resolved,
+			sources,
 		};
 	}
 
-	return null;
+	return {
+		preset: {
+			value: baseAnnotated.resolved.preset,
+			source: baseAnnotated.preset.source,
+			inherited: true,
+		},
+		resolved: baseAnnotated.resolved,
+		sources: inheritedSources(baseAnnotated.sources),
+	};
 };
 
+const formatAnnotatedTypography = (annotated) => ({
+	preset: annotated.preset,
+	resolved: annotateResolvedValues(annotated.resolved, annotated.sources),
+});
+
 const getSectionBlocks = (lines) => {
 	const sectionsMap = findMap(lines, 'sections');
 	if (!sectionsMap) return [];
@@ -118,8 +242,7 @@ const getSectionBlocks = (lines) => {
 	return sections;
 };
 
-const readSiteTypography = async () => {
-	const { frontmatter, frontmatterBody } = splitSiteFile(await readFile(siteContentPath, 'utf8'));
+const readThemeTypography = async () => {
 	const themeFile = await readFile(siteThemePath, 'utf8').catch((error) => {
 		if (error?.code === 'ENOENT') {
 			return '---\n---\n';
@@ -129,29 +252,38 @@ const readSiteTypography = async () => {
 	});
 	const { frontmatter: themeFrontmatter, frontmatterBody: themeFrontmatterBody } = splitSiteFile(themeFile, siteThemeLabel);
 	const indentationIssues = [];
-	validateFrontmatterIndentation(frontmatter, (issue) => indentationIssues.push(issue));
-	validateContentFrontmatterStructure(frontmatter, (issue) => indentationIssues.push(issue));
 	validateFrontmatterIndentation(themeFrontmatter, (issue) => indentationIssues.push(issue));
 	validateThemeFrontmatterStructure(themeFrontmatter, (issue) => indentationIssues.push(issue));
 	if (indentationIssues.length > 0) {
 		throw new Error([
-			`Cannot inspect typography because ${siteContentLabel} or ${siteThemeLabel} has invalid frontmatter.`,
+			`Cannot inspect typography because ${siteThemeLabel} has invalid frontmatter.`,
 			...indentationIssues.map((issue) => `- ${issue.message}`),
 		].join('\n'));
 	}
 
-	const lines = frontmatterBody.split(/\r?\n/);
 	const themeLines = themeFrontmatterBody.split(/\r?\n/);
-	const themePresentation = findMap(themeLines, 'presentation', 0, themeLines.length, 0);
-	const themeTypographyConfig = themePresentation
-		? findMap(themeLines, 'typography', themePresentation.index + 1, themePresentation.nextIndex)?.value
-		: null;
+	const themeTypographyConfig = findMap(themeLines, 'typography', 0, themeLines.length, 0)?.value;
+	return resolveAnnotatedTypographyConfig(themeTypographyConfig ?? defaultTypography, siteThemeLabel);
+};
+
+const readPageTypography = async (contentFile, themeTypography) => {
+	const { frontmatter, frontmatterBody } = await readSiteFile(contentFile.contentPath, contentFile.contentLabel);
+	const indentationIssues = [];
+	validateFrontmatterIndentation(frontmatter, (issue) => indentationIssues.push(issue));
+	validateContentFrontmatterStructure(frontmatter, (issue) => indentationIssues.push(issue));
+	if (indentationIssues.length > 0) {
+		throw new Error([
+			`Cannot inspect typography because ${contentFile.contentLabel} has invalid frontmatter.`,
+			...indentationIssues.map((issue) => `- ${issue.message}`),
+		].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 themeTypography = resolveTypographyConfig(themeTypographyConfig ?? defaultTypography);
-	const pageTypography = resolveTypographyOverride(themeTypography, pageTypographyConfig ?? undefined);
+	const pageTypography = resolveAnnotatedTypographyOverride(themeTypography, pageTypographyConfig ?? undefined, contentFile.contentLabel);
 	const sections = getSectionBlocks(lines).map((section) => {
 		const presentation = findMap(lines, 'presentation', section.start + 1, section.end);
 		const typography = presentation
@@ -160,13 +292,13 @@ const readSiteTypography = async () => {
 
 		return {
 			id: section.id,
-			typography,
-			resolved: resolveTypographyOverride(pageTypography, typography ?? undefined),
+			typography: resolveAnnotatedTypographyOverride(pageTypography, typography ?? undefined, `${contentFile.contentLabel} sections.${section.id}`),
 		};
 	});
 
 	return {
-		themeTypography,
+		source: contentFile.contentLabel,
+		route: contentFile.isHome ? '/' : `/${contentFile.routeFolder}/`,
 		pageTypography,
 		sections,
 	};
@@ -175,36 +307,31 @@ const readSiteTypography = async () => {
 if (mode === 'presets') {
 	console.log(toYamlLines(typographyPresets).join('\n'));
 } else if (mode === 'show') {
-	const siteTypography = await readSiteTypography();
+	const themeTypography = await readThemeTypography();
+	const pages = await Promise.all((await getContentFiles()).map((contentFile) => readPageTypography(contentFile, themeTypography)));
 	const output = {
-		source: siteContentLabel,
 		theme: {
 			source: siteThemeLabel,
 			presentation: {
-				typography: {
-					preset: siteTypography.themeTypography.preset,
-					resolved: siteTypography.themeTypography.values,
-				},
-			},
-		},
-		page: {
-			typography: {
-				preset: siteTypography.pageTypography.preset,
-				resolved: siteTypography.pageTypography.values,
+				typography: formatAnnotatedTypography(themeTypography),
 			},
 		},
-		sections: Object.fromEntries(siteTypography.sections.map((section) => [
-			section.id,
+		pages: Object.fromEntries(pages.map((page) => [
+			page.route,
 			{
-				typography: {
-					preset: section.resolved.preset,
-					resolved: section.resolved.values,
-				},
+				source: page.source,
+				typography: formatAnnotatedTypography(page.pageTypography),
+				sections: Object.fromEntries(page.sections.map((section) => [
+					section.id,
+					{
+						typography: formatAnnotatedTypography(section.typography),
+					},
+				])),
 			},
 		])),
 	};
 
 	console.log(toYamlLines(output).join('\n'));
 } else {
-	throw new Error('Usage: norna typography:presets|typography:show');
+	throw new Error('Usage: norna typography presets|show');
 }

package/scripts/sync-content-sections.mjs

@@ -59,7 +59,7 @@ const promptForWrite = async () => {
 	if (!process.stdin.isTTY) return false;
 
 	const rl = createInterface({ input, output });
-	const answer = await rl.question(`This will rewrite Markdown sections in ${siteContentLabel} and move gallery image files if needed. Continue? [y/N] `);
+	const answer = await rl.question(`This will rewrite Markdown sections in ${siteContentLabel} and move image files if needed. Continue? [y/N] `);
 	rl.close();
 
 	return answer.trim().toLowerCase() === 'y';
@@ -269,7 +269,7 @@ const validateRouteContentFiles = async () => {
 				if (referencedImages.has(imageName)) {
 					const previousSectionId = referencedImages.get(imageName);
 					const message = `Image "${imageName}" is referenced more than once, in "${previousSectionId}" and "${contentFile.contentLabel}:${section.id}".`;
-					const fix = 'Each image filename can be referenced by only one gallery row.';
+					const fix = 'Each image filename can be referenced by only one image row.';
 
 					addIssue({ severity: 'error', sectionId: previousSectionId, message, fix });
 					addIssue({
@@ -291,7 +291,7 @@ const validateRouteContentFiles = async () => {
 						sectionId: `${contentFile.contentLabel}:${section.id}`,
 						sectionLabel: `${contentFile.contentLabel} [${section.id}]`,
 						message: `Image "${imageName}" does not exist anywhere under ${contentFile.imagesLabel}/.`,
-						fix: `Add the source image to ${contentFile.imagesLabel}/${section.id}/ or remove the gallery row.`,
+						fix: `Add the source image to ${contentFile.imagesLabel}/${section.id}/ or remove the image row.`,
 					});
 					continue;
 				}
@@ -380,7 +380,7 @@ const getReportLines = (title) => {
 			leftKey.localeCompare(rightKey, 'sv')
 		));
 
-		lines.push('', 'Section and Gallery Issues');
+		lines.push('', 'Section And Image Issues');
 
 		for (const [, group] of orderedSectionGroups) {
 			lines.push('', `[${group.label}]`);
@@ -506,7 +506,7 @@ for (const section of frontmatterSections) {
 			const message = previousSectionId === section.id
 				? `Image "${imageName}" is referenced more than once in this section.`
 				: `Image "${imageName}" is referenced more than once, in sections "${previousSectionId}" and "${section.id}".`;
-			const fix = 'Each image filename can be referenced by only one gallery row.';
+			const fix = 'Each image filename can be referenced by only one image row.';
 
 			addSectionIssue(previousSectionId, { severity: 'error', message, fix });
 			if (previousSectionId !== section.id) {
@@ -522,7 +522,7 @@ for (const section of frontmatterSections) {
 			addSectionIssue(section.id, {
 				severity: 'error',
 				message: `Image "${imageName}" does not exist anywhere under ${siteImagesLabel}/.`,
-				fix: `Add the source image to ${siteImagesLabel}/${section.id}/ or remove the gallery row.`,
+				fix: `Add the source image to ${siteImagesLabel}/${section.id}/ or remove the image row.`,
 			});
 			continue;
 		}