@janga/norna 0.7.2 → 0.7.4

package/scripts/lib/site-content.mjs

@@ -18,42 +18,60 @@ const explicitHeadingIdRegex = /\s*\{#([a-z0-9-]+)\}\s*$/;
 const inlineStyleReferenceRegex = /\[[^\]\n]+\]\{\.([a-z][a-z0-9-]*)\}/g;
 const frontmatterDelimiterRegex = /^---\s*$/;
 const knownContentTopLevelFrontmatterKeys = new Set(['title', 'description', 'slug', 'navigation', 'presentation', 'frame', 'sections']);
-const knownThemeTopLevelFrontmatterKeys = new Set(['navigation', 'presentation', 'frame']);
+const knownThemeTopLevelFrontmatterKeys = new Set(['navigation', 'layout', 'gallery', 'typography', 'presentation', 'frame']);
 const knownNestedFrontmatterKeys = new Set([
 	'align',
 	'alt',
 	'backgroundColor',
 	'body',
+	'bodyToImages',
 	'brand',
 	'caption',
 	'carousel',
 	'color',
 	'colors',
+	'density',
 	'desktop',
+	'fontFamily',
 	'from',
+	'finalSectionBottom',
 	'gallery',
+	'gutter',
+	'h1',
+	'h2',
+	'h3',
+	'h4',
 	'heading',
+	'headings',
 	'id',
 	'include',
 	'image',
+	'imageGap',
 	'inlineStyles',
 	'label',
 	'lineHeight',
+	'maxAvailableHeightPercent',
+	'maxAvailableWidthPercent',
 	'mobile',
 	'navigation',
 	'overrides',
 	'order',
 	'paragraphSpacing',
+	'pageWidth',
 	'preset',
 	'presentation',
+	'rhythm',
 	'sections',
+	'sectionGap',
 	'size',
-	'spacing',
+	'spacingAfter',
+	'spacingBefore',
 	'textColor',
 	'theme',
 	'typography',
 	'until',
 	'visible',
+	'width',
 ]);
 
 export const toPosixPath = (filePath) => filePath.split(path.sep).join('/');
@@ -224,7 +242,7 @@ export const validateFrontmatterStructure = (frontmatter, addIssue, {
 		if (knownTopLevelFrontmatterKeys.has(key)) continue;
 
 		const fix = knownNestedFrontmatterKeys.has(key)
-			? `Indent "${key}:" under the section or object it belongs to. For gallery rows, "gallery:" normally belongs under a "sections" item.`
+			? `Indent "${key}:" under the section or object it belongs to. For image rows, "gallery:" normally belongs under a "sections" item.`
 			: `Move "${key}:" under the correct parent key, or remove it if it is not part of the ${fileKind} schema.`;
 
 		addIssue({

package/scripts/lib/theme-config.mjs

@@ -0,0 +1,34 @@
+import { readFile } from 'node:fs/promises';
+import { parseYamlMapping } from './frontmatter-yaml.mjs';
+import {
+	splitSiteFile,
+	validateFrontmatterIndentation,
+	validateThemeFrontmatterStructure,
+} from './site-content.mjs';
+import { siteThemeLabel, siteThemePath } from './site-paths.mjs';
+
+const emptyThemeFile = '---\n---\n';
+
+export const readThemeConfig = async () => {
+	const themeFile = await readFile(siteThemePath, 'utf8').catch((error) => {
+		if (error?.code === 'ENOENT') {
+			return emptyThemeFile;
+		}
+
+		throw error;
+	});
+	const { frontmatter, frontmatterBody } = splitSiteFile(themeFile, siteThemeLabel);
+	const issues = [];
+
+	validateFrontmatterIndentation(frontmatter, (issue) => issues.push(issue));
+	validateThemeFrontmatterStructure(frontmatter, (issue) => issues.push(issue));
+
+	if (issues.length > 0) {
+		throw new Error([
+			`${siteThemeLabel} has invalid frontmatter.`,
+			...issues.map((issue) => `- ${issue.message}`),
+		].join('\n'));
+	}
+
+	return parseYamlMapping(frontmatterBody);
+};

package/scripts/lib/typography.mjs

@@ -5,91 +5,199 @@ export const typographyPresetNames = [
 	'statement',
 ];
 
+export const typographyRhythmNames = [
+	'compact',
+	'normal',
+	'airy',
+];
+
 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: 'medium',
+				lineHeight: 1.04,
+			},
+			h2: {
+				align: { desktop: 'left', mobile: 'left' },
+				size: 'medium',
+				lineHeight: 1.08,
+			},
+			h3: {
+				align: { desktop: 'left', mobile: 'left' },
+				size: 'medium',
+				lineHeight: 1.35,
+			},
+			h4: {
+				align: { desktop: 'left', mobile: 'left' },
+				size: 'medium',
+				lineHeight: 1.5,
+			},
 		},
 		body: {
 			align: { desktop: 'left', mobile: 'left' },
 			size: 'medium',
 			lineHeight: 1.5,
-			paragraphSpacing: '0.85em',
 		},
 		caption: {
 			align: { desktop: 'center', mobile: 'center' },
-			size: 'small',
+			size: 'medium',
 			lineHeight: 1.35,
-			spacing: '0.5em',
 		},
 	},
 	'compact-gallery': {
-		heading: {
-			align: { desktop: 'left', mobile: 'left' },
-			size: 'medium',
-			lineHeight: 1.08,
-			spacing: '0.45em',
+		headings: {
+			h1: {
+				align: { desktop: 'left', mobile: 'left' },
+				size: 'medium',
+				lineHeight: 1.04,
+			},
+			h2: {
+				align: { desktop: 'left', mobile: 'left' },
+				size: 'medium',
+				lineHeight: 1.08,
+			},
+			h3: {
+				align: { desktop: 'left', mobile: 'left' },
+				size: 'medium',
+				lineHeight: 1.3,
+			},
+			h4: {
+				align: { desktop: 'left', mobile: 'left' },
+				size: 'medium',
+				lineHeight: 1.42,
+			},
 		},
 		body: {
 			align: { desktop: 'left', mobile: 'left' },
 			size: 'medium',
 			lineHeight: 1.42,
-			paragraphSpacing: '0.6em',
 		},
 		caption: {
 			align: { desktop: 'center', mobile: 'center' },
-			size: 'small',
+			size: 'medium',
 			lineHeight: 1.25,
-			spacing: '0.35em',
 		},
 	},
 	'text-forward': {
-		heading: {
-			align: { desktop: 'left', mobile: 'left' },
-			size: 'medium',
-			lineHeight: 1.12,
-			spacing: '0.8em',
+		headings: {
+			h1: {
+				align: { desktop: 'left', mobile: 'left' },
+				size: 'medium',
+				lineHeight: 1.06,
+			},
+			h2: {
+				align: { desktop: 'left', mobile: 'left' },
+				size: 'medium',
+				lineHeight: 1.12,
+			},
+			h3: {
+				align: { desktop: 'left', mobile: 'left' },
+				size: 'medium',
+				lineHeight: 1.35,
+			},
+			h4: {
+				align: { desktop: 'left', mobile: 'left' },
+				size: 'medium',
+				lineHeight: 1.55,
+			},
 		},
 		body: {
 			align: { desktop: 'left', mobile: 'left' },
 			size: 'medium',
 			lineHeight: 1.62,
-			paragraphSpacing: '1em',
 		},
 		caption: {
 			align: { desktop: 'left', mobile: 'left' },
-			size: 'small',
+			size: 'medium',
 			lineHeight: 1.4,
-			spacing: '0.6em',
 		},
 	},
 	statement: {
-		heading: {
-			align: { desktop: 'left', mobile: 'left' },
-			size: 'medium',
-			lineHeight: 1.04,
-			spacing: '0.5em',
+		headings: {
+			h1: {
+				align: { desktop: 'left', mobile: 'left' },
+				size: 'medium',
+				lineHeight: 1.02,
+			},
+			h2: {
+				align: { desktop: 'left', mobile: 'left' },
+				size: 'medium',
+				lineHeight: 1.04,
+			},
+			h3: {
+				align: { desktop: 'left', mobile: 'left' },
+				size: 'medium',
+				lineHeight: 1.18,
+			},
+			h4: {
+				align: { desktop: 'left', mobile: 'left' },
+				size: 'medium',
+				lineHeight: 1.42,
+			},
 		},
 		body: {
 			align: { desktop: 'left', mobile: 'left' },
 			size: 'medium',
 			lineHeight: 1.42,
-			paragraphSpacing: '0.75em',
 		},
 		caption: {
 			align: { desktop: 'center', mobile: 'center' },
-			size: 'small',
+			size: 'medium',
 			lineHeight: 1.3,
-			spacing: '0.45em',
+		},
+	},
+};
+
+export const typographyRhythms = {
+	compact: {
+		headings: {
+			h1: { spacingBefore: '0', spacingAfter: '0.4em' },
+			h2: { spacingBefore: '0', spacingAfter: '0.45em' },
+			h3: { spacingBefore: '1.2em', spacingAfter: '0.4em' },
+			h4: { spacingBefore: '0.9em', spacingAfter: '0.35em' },
+		},
+		body: {
+			paragraphSpacing: '0.65em',
+		},
+		caption: {
+			spacingBefore: '0.35em',
+		},
+	},
+	normal: {
+		headings: {
+			h1: { spacingBefore: '0', spacingAfter: '0.5em' },
+			h2: { spacingBefore: '0', spacingAfter: '0.55em' },
+			h3: { spacingBefore: '1.5em', spacingAfter: '0.5em' },
+			h4: { spacingBefore: '1.1em', spacingAfter: '0.4em' },
+		},
+		body: {
+			paragraphSpacing: '0.85em',
+		},
+		caption: {
+			spacingBefore: '0.5em',
+		},
+	},
+	airy: {
+		headings: {
+			h1: { spacingBefore: '0', spacingAfter: '0.65em' },
+			h2: { spacingBefore: '0', spacingAfter: '0.7em' },
+			h3: { spacingBefore: '1.9em', spacingAfter: '0.6em' },
+			h4: { spacingBefore: '1.35em', spacingAfter: '0.5em' },
+		},
+		body: {
+			paragraphSpacing: '1em',
+		},
+		caption: {
+			spacingBefore: '0.65em',
 		},
 	},
 };
 
 export const defaultTypography = {
 	preset: 'quiet-gallery',
+	rhythm: 'normal',
 };
 
 const isPlainObject = (value) => (
@@ -116,26 +224,38 @@ export const mergeDeep = (base, override) => {
 
 export const resolveTypographyConfig = (typography = defaultTypography) => {
 	const presetName = typography?.preset ?? defaultTypography.preset;
+	const rhythmName = typography?.rhythm ?? defaultTypography.rhythm;
 	const preset = typographyPresets[presetName];
+	const rhythm = typographyRhythms[rhythmName];
 
 	if (!preset) {
 		throw new Error(`Unknown typography preset: ${presetName}`);
 	}
 
+	if (!rhythm) {
+		throw new Error(`Unknown typography rhythm: ${rhythmName}`);
+	}
+
 	return {
 		preset: presetName,
-		values: mergeDeep(preset, typography?.overrides),
+		rhythm: rhythmName,
+		values: mergeDeep(mergeDeep(preset, rhythm), typography?.overrides),
 	};
 };
 
 export const resolveTypographyOverride = (baseResolved, typographyConfig) => {
-	if (typographyConfig?.preset) {
-		return resolveTypographyConfig(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),
 		};
 	}