@janga/norna 0.7.2 → 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,11 +47,31 @@ export const typographyPresets = {
 		},
 	},
 	'compact-gallery': {
-		heading: {
-			align: { desktop: 'left', mobile: 'left' },
-			size: 'medium',
-			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' },
@@ -47,11 +87,31 @@ 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' },
@@ -67,11 +127,31 @@ export const typographyPresets = {
 		},
 	},
 	statement: {
-		heading: {
-			align: { desktop: 'left', mobile: 'left' },
-			size: 'medium',
-			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' },

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,
@@ -23,76 +24,40 @@ import {
 
 const mode = process.argv[2] ?? 'show';
 
-const typographyRoles = ['heading', 'body', 'caption'];
-const typographyFields = {
-	heading: ['align', 'size', 'lineHeight', 'spacing'],
-	body: ['align', 'size', 'lineHeight', 'paragraphSpacing'],
-	caption: ['align', 'size', 'lineHeight', 'spacing'],
-};
-const responsiveFields = new Set(['align']);
-
+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();
-
-	if (/^-?\d+(?:\.\d+)?$/.test(value)) return Number(value);
-	if ((value.startsWith('"') && value.endsWith('"')) || (value.startsWith("'") && value.endsWith("'"))) {
-		return value.slice(1, -1);
-	}
-
-	return value;
-};
-
-const parseMapping = (lines, startIndex, baseIndent) => {
-	const value = {};
-	let index = startIndex;
-
-	while (index < lines.length) {
-		const line = lines[index];
-		if (!line.trim() || line.trim().startsWith('#')) {
-			index += 1;
-			continue;
-		}
-
-		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;
-		}
-	}
-
-	return { value, nextIndex: index };
-};
-
-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;
-
-		return {
-			index,
-			indent: match[1].length,
-			...parseMapping(lines, index + 1, match[1].length),
-		};
-	}
-
-	return null;
-};
-
 const isPlainObject = (value) => (
 	value !== null &&
 	typeof value === 'object' &&
@@ -129,29 +94,13 @@ const setPath = (value, path, entry) => {
 const annotateResolvedValues = (resolved, sources) => {
 	const annotated = {};
 
-	for (const role of typographyRoles) {
-		for (const field of typographyFields[role]) {
-			if (responsiveFields.has(field)) {
-				for (const viewport of ['desktop', 'mobile']) {
-					const path = [role, field, viewport];
-					const source = getPath(sources, path);
-					setPath(annotated, path, {
-						value: getPath(resolved.values, path),
-						source: source.source,
-						...(source.inherited ? { inherited: true } : {}),
-					});
-				}
-				continue;
-			}
-
-			const path = [role, field];
-			const source = getPath(sources, path);
-			setPath(annotated, path, {
-				value: getPath(resolved.values, path),
-				source: source.source,
-				...(source.inherited ? { inherited: true } : {}),
-			});
-		}
+	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;
@@ -160,23 +109,11 @@ const annotateResolvedValues = (resolved, sources) => {
 const presetSources = (presetName) => {
 	const sources = {};
 
-	for (const role of typographyRoles) {
-		for (const field of typographyFields[role]) {
-			if (responsiveFields.has(field)) {
-				for (const viewport of ['desktop', 'mobile']) {
-					setPath(sources, [role, field, viewport], {
-						source: `preset:${presetName}`,
-						inherited: false,
-					});
-				}
-				continue;
-			}
-
-			setPath(sources, [role, field], {
-				source: `preset:${presetName}`,
-				inherited: false,
-			});
-		}
+	for (const path of typographyValuePaths) {
+		setPath(sources, path, {
+			source: `preset:${presetName}`,
+			inherited: false,
+		});
 	}
 
 	return sources;
@@ -186,28 +123,12 @@ const applyOverrideSources = (sources, typographyConfig, sourceLabel) => {
 	const overrides = typographyConfig?.overrides;
 	if (!overrides) return sources;
 
-	for (const role of typographyRoles) {
-		for (const field of typographyFields[role]) {
-			if (responsiveFields.has(field)) {
-				for (const viewport of ['desktop', 'mobile']) {
-					const path = [role, field, viewport];
-					if (hasPath(overrides, path)) {
-						setPath(sources, path, {
-							source: `${sourceLabel} override`,
-							inherited: false,
-						});
-					}
-				}
-				continue;
-			}
-
-			const path = [role, field];
-			if (hasPath(overrides, path)) {
-				setPath(sources, path, {
-					source: `${sourceLabel} override`,
-					inherited: false,
-				});
-			}
+	for (const path of typographyValuePaths) {
+		if (hasPath(overrides, path)) {
+			setPath(sources, path, {
+				source: `${sourceLabel} override`,
+				inherited: false,
+			});
 		}
 	}
 
@@ -217,25 +138,11 @@ const applyOverrideSources = (sources, typographyConfig, sourceLabel) => {
 const inheritedSources = (sources) => {
 	const inherited = structuredClone(sources);
 
-	for (const role of typographyRoles) {
-		for (const field of typographyFields[role]) {
-			if (responsiveFields.has(field)) {
-				for (const viewport of ['desktop', 'mobile']) {
-					const path = [role, field, viewport];
-					setPath(inherited, path, {
-						...getPath(sources, path),
-						inherited: true,
-					});
-				}
-				continue;
-			}
-
-			const path = [role, field];
-			setPath(inherited, path, {
-				...getPath(sources, path),
-				inherited: true,
-			});
-		}
+	for (const path of typographyValuePaths) {
+		setPath(inherited, path, {
+			...getPath(sources, path),
+			inherited: true,
+		});
 	}
 
 	return inherited;
@@ -355,10 +262,7 @@ const readThemeTypography = async () => {
 	}
 
 	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);
 };
 
@@ -429,5 +333,5 @@ if (mode === 'presets') {
 
 	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;
 		}

package/scripts/test-content-check.mjs

@@ -43,9 +43,8 @@ const makePngHeader = ({ width, height }) => {
 };
 
 const defaultTheme = `---
-presentation:
-  typography:
-    preset: quiet-gallery
+typography:
+  preset: quiet-gallery
 frame:
   colors: presentation
 ---
@@ -114,7 +113,7 @@ test('content:check groups section issues, global issues, and unreferenced image
 
 		assert.equal(result.status, 1, output);
 		assert.match(output, /^Content check failed\./m);
-		assert.match(output, /Section and Gallery Issues\n\n\[min-konst\]\n  Errors:/);
+		assert.match(output, /Section And Image Issues\n\n\[min-konst\]\n  Errors:/);
 		assert.match(output, /Image "vav\.jpeg" is used here but is located in site\/images\/mitt-hem\/\./);
 		assert.match(output, /Image "missing\.jpeg" does not exist anywhere under site\/images\/\./);
 		assert.match(output, /Image "duplicate\.jpg" is referenced more than once in this section\./);

package/scripts/test-engine-commands.mjs

@@ -47,12 +47,12 @@ try {
 	assert.equal(initializedPackageJson.scripts['engine:update'], undefined);
 	assert.equal(initializedPackageJson.scripts['engine:version'], undefined);
 
-	const presetsResult = runCli(['typography:presets']);
+	const presetsResult = runCli(['typography', 'presets']);
 	assert.equal(presetsResult.status, 0, presetsResult.stderr || presetsResult.stdout);
 	assert.match(presetsResult.stdout, /quiet-gallery:/);
 	assert.match(presetsResult.stdout, /text-forward:/);
 
-	const showResult = runCli(['--site-dir', path.join(initializedSiteRoot, 'site'), 'typography:show']);
+	const showResult = runCli(['--site-dir', path.join(initializedSiteRoot, 'site'), 'typography', 'show']);
 	assert.equal(showResult.status, 0, showResult.stderr || showResult.stdout);
 	assert.match(showResult.stdout, /theme:/);
 	assert.match(showResult.stdout, /pages:/);

package/scripts/test-package-check.mjs

@@ -181,18 +181,18 @@ try {
 	await writeFile(
 		packageCheckConfigPath,
 		packageCheckConfig
-			.replace("url: 'https://example.com/'", "url: 'https://example.com/gallery/'")
-			.replace("basePath: '/'", "basePath: '/gallery/'"),
+			.replace("url: 'https://example.com/'", "url: 'https://example.com/site/'")
+			.replace("basePath: '/'", "basePath: '/site/'"),
 	);
 	const packageCheckThemePath = path.join(siteProjectRoot, 'site', 'theme.md');
 	const packageCheckTheme = await readFile(packageCheckThemePath, 'utf8');
 	await writeFile(
 		packageCheckThemePath,
-		packageCheckTheme.replace('brand: Example Gallery', 'brand: Package Check Brand'),
+		packageCheckTheme.replace('brand: Example Site', 'brand: Package Check Brand'),
 	);
 	await mkdir(path.join(siteProjectRoot, 'site', 'routes', 'about'), { recursive: true });
 	await writeFile(path.join(siteProjectRoot, 'site', 'routes', 'about', 'route-content.md'), `---
-title: About the gallery
+title: About the site
 description: Route used by package checks.
 navigation:
   label: About
@@ -235,7 +235,7 @@ This route verifies that packaged norna sites can build route pages.
 	);
 	await assertFileIncludes(
 		path.join(siteProjectRoot, 'dist', 'index.html'),
-		'--section-heading-font-size-desktop: clamp(1.35rem, 1.1rem + 0.9vw, 2rem)',
+		'--section-heading-font-size-desktop: clamp(1.6rem, 1.22rem + 1.45vw, 2.75rem)',
 	);
 	await assertFileIncludes(
 		path.join(siteProjectRoot, 'dist', 'index.html'),
@@ -247,15 +247,15 @@ This route verifies that packaged norna sites can build route pages.
 	);
 	await assertFileIncludes(
 		path.join(siteProjectRoot, 'dist', 'about', 'index.html'),
-		'<link rel="canonical" href="https://example.com/gallery/about/">',
+		'<link rel="canonical" href="https://example.com/site/about/">',
 	);
 	await assertFileIncludes(
 		path.join(siteProjectRoot, 'dist', 'about', 'index.html'),
-		'href="/gallery/about/" aria-current="page"',
+		'href="/site/about/" aria-current="page"',
 	);
 	await assertFileIncludes(
 		path.join(siteProjectRoot, 'dist', 'index.html'),
-		'<a class="site-brand" href="/gallery/">Package Check Brand</a>',
+		'<a class="site-brand" href="/site/">Package Check Brand</a>',
 	);
 	await assertFileIncludes(
 		path.join(siteProjectRoot, 'dist', 'index.html'),
@@ -306,7 +306,7 @@ This route verifies that packaged norna sites can build route pages.
 	await assertFileExists(path.join(siteProjectRoot, 'dist', 'favicon.ico'));
 	await assertFileIncludes(
 		path.join(siteProjectRoot, 'dist', 'index.html'),
-		'<link rel="icon" sizes="any" href="/gallery/favicon.ico">',
+		'<link rel="icon" sizes="any" href="/site/favicon.ico">',
 	);
 	await assertFileExcludes(
 		path.join(siteProjectRoot, 'dist', 'index.html'),
@@ -316,12 +316,12 @@ This route verifies that packaged norna sites can build route pages.
 	const siteContent = await readFile(siteContentPath, 'utf8');
 	const siteThemePath = path.join(siteProjectRoot, 'site', 'theme.md');
 	const siteTheme = await readFile(siteThemePath, 'utf8');
-	await writeFile(siteThemePath, siteTheme.replace('\n    preset: quiet-gallery', '\n    preset: noisy-gallery'));
+	await writeFile(siteThemePath, siteTheme.replace('\n  preset: quiet-gallery', '\n  preset: noisy-gallery'));
 	await runExpectFailure(
 		npxBin,
 		['norna', 'build'],
 		{ cwd: siteProjectRoot, env: npmEnv },
-		'presentation.typography.preset',
+		'typography.preset',
 	);
 	await writeFile(
 		siteThemePath,
@@ -390,11 +390,9 @@ This route verifies that packaged norna sites can build route pages.
 		{ cwd: siteProjectRoot, env: npmEnv },
 		'sections.0.presentation.typography.preset',
 	);
-	const siteConfigPath = path.join(siteProjectRoot, 'site', 'config.mjs');
-	const siteConfig = await readFile(siteConfigPath, 'utf8');
 	await writeFile(
-		siteConfigPath,
-		siteConfig.replace(
+		siteThemePath,
+		siteTheme.replace(
 			'fontFamily: "Arial, \'Helvetica Neue\', Helvetica, sans-serif"',
 			'fontFamily: "Arial; color: red"',
 		),
@@ -405,9 +403,12 @@ This route verifies that packaged norna sites can build route pages.
 		{ cwd: siteProjectRoot, env: npmEnv },
 		'typography.fontFamily',
 	);
+	await writeFile(siteThemePath, siteTheme);
+	const siteConfigPath = path.join(siteProjectRoot, 'site', 'config.mjs');
+	const siteConfig = await readFile(siteConfigPath, 'utf8');
 	await writeFile(
 		siteConfigPath,
-		siteConfig.replace("basePath: '/gallery/'", "basePath: 'gallery'"),
+		siteConfig.replace("basePath: '/site/'", "basePath: 'site'"),
 	);
 	await runExpectFailure(
 		npxBin,

package/scripts/test-temporary-visibility.mjs

@@ -49,9 +49,8 @@ try {
 };
 `);
 	await writeFile(path.join(siteDir, 'theme.md'), `---
-presentation:
-  typography:
-    preset: quiet-gallery
+typography:
+  preset: quiet-gallery
 frame:
   colors: presentation
 ---

package/src/components/SitePage.astro

@@ -27,10 +27,9 @@ const navigationPages = getNavigationPages(sitePages);
 const homePage = sitePages.find((page) => page.isHome) ?? currentPage;
 const themeData = theme?.data ?? {};
 const brandLabel = themeData.navigation?.brand ?? homePage.title;
-const pagePresentation = resolvePagePresentation(themeData.presentation, entry.data.presentation);
+const pagePresentation = resolvePagePresentation(themeData, entry.data.presentation);
 const frameColors = resolveFrameColors({
-	themePresentation: themeData.presentation,
-	themeFrame: themeData.frame,
+	theme: themeData,
 	pagePresentation,
 	pageFrame: entry.data.frame,
 });