@janga/norna 0.7.9 → 0.7.11

package/scripts/lib/presentation.mjs

@@ -1,71 +1,130 @@
 import {
 	defaultTypography,
 	resolveTypographyConfig,
-	resolveTypographyOverride,
 } from './typography.mjs';
+import { resolveThemeConfig } from './theme-presets.mjs';
 
-export const fallbackPresentationColors = Object.freeze({
-	backgroundColor: 'transparent',
-	textColor: 'var(--color-text)',
+export const presentationPaletteNames = ['dark', 'light', 'paper'];
+
+const presentationPalettes = Object.freeze({
+	dark: {
+		colorScheme: 'dark',
+		page: { backgroundColor: '#000000', textColor: '#f2eee6' },
+		surfaces: {
+			base: { backgroundColor: '#000000', textColor: '#f2eee6' },
+			soft: { backgroundColor: '#171717', textColor: '#f2eee6' },
+			emphasis: { backgroundColor: '#252525', textColor: '#f2eee6' },
+		},
+		frame: { backgroundColor: '#000000', textColor: '#f2eee6' },
+		css: {
+			surface: '#101010',
+			muted: '#aaa49a',
+			soft: '#302f2c',
+			accent: '#d8d2c8',
+			border: 'rgb(255 255 255 / 14%)',
+			navBackground: 'rgb(0 0 0 / 90%)',
+			navSeparator: 'rgb(255 255 255 / 28%)',
+		},
+	},
+	light: {
+		colorScheme: 'light',
+		page: { backgroundColor: '#ffffff', textColor: '#17201d' },
+		surfaces: {
+			base: { backgroundColor: '#ffffff', textColor: '#17201d' },
+			soft: { backgroundColor: '#f1f4f2', textColor: '#17201d' },
+			emphasis: { backgroundColor: '#dde7e1', textColor: '#17201d' },
+		},
+		frame: { backgroundColor: '#ffffff', textColor: '#17201d' },
+		css: {
+			surface: '#f7f8f7',
+			muted: '#5e655f',
+			soft: '#d9dfda',
+			accent: '#38645a',
+			border: 'rgb(0 0 0 / 14%)',
+			navBackground: 'rgb(255 255 255 / 92%)',
+			navSeparator: 'rgb(0 0 0 / 20%)',
+		},
+	},
+	paper: {
+		colorScheme: 'light',
+		page: { backgroundColor: '#f8f5ee', textColor: '#272522' },
+		surfaces: {
+			base: { backgroundColor: '#f8f5ee', textColor: '#272522' },
+			soft: { backgroundColor: '#ebe5d9', textColor: '#272522' },
+			emphasis: { backgroundColor: '#ded4c5', textColor: '#272522' },
+		},
+		frame: { backgroundColor: '#f8f5ee', textColor: '#272522' },
+		css: {
+			surface: '#f0ebe1',
+			muted: '#746e63',
+			soft: '#d8d0c4',
+			accent: '#685a43',
+			border: 'rgb(39 37 34 / 18%)',
+			navBackground: 'rgb(248 245 238 / 92%)',
+			navSeparator: 'rgb(39 37 34 / 24%)',
+		},
+	},
 });
 
 const normalizePresentation = (presentation) => presentation ?? {};
 
-export const resolveThemePresentation = (theme) => {
-	const normalizedTheme = theme ?? {};
-	const normalizedThemePresentation = normalizePresentation(normalizedTheme.presentation);
+export const getPresentationPalette = (paletteName = 'dark') => {
+	const palette = presentationPalettes[paletteName];
+	if (!palette) {
+		throw new Error(`Unknown presentation palette: ${paletteName}. Use one of: ${presentationPaletteNames.join(', ')}`);
+	}
+
+	return palette;
+};
 
+export const getPresentationCssVariables = (presentation) => {
+	const { palette } = presentation;
 	return {
-		backgroundColor: normalizedThemePresentation.backgroundColor ?? fallbackPresentationColors.backgroundColor,
-		textColor: normalizedThemePresentation.textColor ?? fallbackPresentationColors.textColor,
-		inlineStyles: normalizedThemePresentation.inlineStyles ?? {},
-		typography: resolveTypographyConfig(normalizedTheme.typography ?? defaultTypography),
+		'--color-page': palette.page.backgroundColor,
+		'--color-text': palette.page.textColor,
+		'--color-surface': palette.css.surface,
+		'--color-muted': palette.css.muted,
+		'--color-soft': palette.css.soft,
+		'--color-accent': palette.css.accent,
+		'--color-border': palette.css.border,
+		'--color-nav-background': palette.css.navBackground,
+		'--color-nav-separator': palette.css.navSeparator,
+		'--color-scheme': palette.colorScheme,
 	};
 };
 
-export const resolvePagePresentation = (theme, pagePresentation) => {
-	const resolvedThemePresentation = resolveThemePresentation(theme);
-	const normalizedPagePresentation = normalizePresentation(pagePresentation);
+export const resolveThemePresentation = (theme, sourceLabel = 'theme.md') => {
+	const normalizedTheme = resolveThemeConfig(theme, sourceLabel);
+	const normalizedThemePresentation = normalizePresentation(normalizedTheme.presentation);
+	const paletteName = normalizedThemePresentation.palette ?? 'dark';
+	const palette = getPresentationPalette(paletteName);
 
 	return {
-		backgroundColor: normalizedPagePresentation.backgroundColor ?? resolvedThemePresentation.backgroundColor,
-		textColor: normalizedPagePresentation.textColor ?? resolvedThemePresentation.textColor,
-		inlineStyles: resolvedThemePresentation.inlineStyles,
-		typography: resolveTypographyOverride(
-			resolvedThemePresentation.typography,
-			normalizedPagePresentation.typography,
-		),
+		paletteName,
+		palette,
+		sectionSurfaces: {
+			mode: normalizedThemePresentation.sectionSurfaces?.mode ?? 'none',
+			sequence: normalizedThemePresentation.sectionSurfaces?.sequence ?? ['base', 'soft', 'emphasis'],
+		},
+		typography: resolveTypographyConfig(normalizedTheme.typography ?? defaultTypography),
 	};
 };
 
-const getColorsFromPresentation = (presentation) => ({
-	backgroundColor: presentation.backgroundColor,
-	textColor: presentation.textColor,
-});
-
-const resolveColorSource = ({ colors, themeFrameColors, pagePresentation }) => {
-	if (!colors || colors === 'theme') {
-		return themeFrameColors;
-	}
-
-	if (colors === 'presentation') {
-		return getColorsFromPresentation(pagePresentation);
-	}
+export const resolvePagePresentation = (theme, sourceLabel) => {
+	const resolvedThemePresentation = resolveThemePresentation(theme, sourceLabel);
 
-	return colors;
+	return resolvedThemePresentation;
 };
 
-export const resolveFrameColors = ({ theme, pagePresentation, pageFrame }) => {
-	const resolvedThemePresentation = resolveThemePresentation(theme);
-	const themeFrameColors = resolveColorSource({
-		colors: theme?.frame?.colors ?? 'presentation',
-		themeFrameColors: getColorsFromPresentation(resolvedThemePresentation),
-		pagePresentation: resolvedThemePresentation,
-	});
+export const resolveSectionSurface = (pagePresentation, sectionIndex) => {
+	const surfaceName = pagePresentation.sectionSurfaces.mode === 'cycle'
+			? pagePresentation.sectionSurfaces.sequence[sectionIndex % pagePresentation.sectionSurfaces.sequence.length]
+			: 'base';
 
-	return resolveColorSource({
-		colors: pageFrame?.colors ?? 'theme',
-		themeFrameColors,
-		pagePresentation,
-	});
+	return {
+		name: surfaceName,
+		...pagePresentation.palette.surfaces[surfaceName],
+	};
 };
+
+export const resolveFrameColors = ({ theme, sourceLabel }) => resolveThemePresentation(theme, sourceLabel).palette.frame;

package/scripts/lib/project-config.mjs

@@ -1,6 +1,7 @@
 import { pathToFileURL } from 'node:url';
 import { siteConfigLabel, siteConfigPath, siteThemeLabel } from './site-paths.mjs';
 import { readThemeConfig } from './theme-config.mjs';
+import { resolveThemeConfig } from './theme-presets.mjs';
 
 const { default: siteConfig } = await import(/* @vite-ignore */ pathToFileURL(siteConfigPath).href);
 const themeConfig = await readThemeConfig();
@@ -37,20 +38,6 @@ const readString = (object, key, path, sourceLabel = siteConfigLabel) => {
 	return value.trim();
 };
 
-const readOptionalString = (object, key, path, sourceLabel = siteConfigLabel) => {
-	const value = object[key];
-
-	if (value === undefined || value === null || value === '') {
-		return null;
-	}
-
-	if (typeof value !== 'string' || value.trim() === '') {
-		throw new Error(`${path}.${key} must be a non-empty string when set in ${sourceLabel}.`);
-	}
-
-	return value.trim();
-};
-
 const readFontFamily = (object, key, path, fallback, sourceLabel = siteConfigLabel) => {
 	const value = object[key] ?? fallback;
 
@@ -242,58 +229,19 @@ const readLocale = (rawLocale) => {
 		lang: lang.trim(),
 		labels: Object.freeze({
 			closeMenu: readString({ closeMenu: labels.closeMenu ?? 'Close menu' }, 'closeMenu', 'locale.labels'),
+			dismissBanner: readString({ dismissBanner: labels.dismissBanner ?? 'Dismiss notice' }, 'dismissBanner', 'locale.labels'),
 			skipToContent: readString({ skipToContent: labels.skipToContent ?? 'Skip to content' }, 'skipToContent', 'locale.labels'),
 			sectionNavigation: readString({ sectionNavigation: labels.sectionNavigation ?? 'Sections' }, 'sectionNavigation', 'locale.labels'),
 			gallery: readString({ gallery: labels.gallery ?? 'Images' }, 'gallery', 'locale.labels'),
+			note: readString({ note: labels.note ?? 'Note' }, 'note', 'locale.labels'),
 			menu: readString({ menu: labels.menu ?? 'Menu' }, 'menu', 'locale.labels'),
 			pageNavigation: readString({ pageNavigation: labels.pageNavigation ?? 'On this page' }, 'pageNavigation', 'locale.labels'),
 			siteNavigation: readString({ siteNavigation: labels.siteNavigation ?? 'Pages' }, 'siteNavigation', 'locale.labels'),
+			siteBanners: readString({ siteBanners: labels.siteBanners ?? 'Site notices' }, 'siteBanners', 'locale.labels'),
 		}),
 	});
 };
 
-const readDateTimeFormat = (object, path) => {
-	const dateTimeFormat = assertObject(object, path);
-	const locale = readString(dateTimeFormat, 'locale', path);
-	const timeZone = readString(dateTimeFormat, 'timeZone', path);
-	const dateStyle = readString(dateTimeFormat, 'dateStyle', path);
-	const timeStyle = readString(dateTimeFormat, 'timeStyle', path);
-
-	try {
-		new Intl.DateTimeFormat(locale, {
-			dateStyle,
-			timeStyle,
-			timeZone,
-		});
-	} catch (error) {
-		const message = error instanceof Error ? error.message : String(error);
-		throw new Error(`${path} must be a valid Intl.DateTimeFormat configuration in ${siteConfigLabel}: ${message}`);
-	}
-
-	return Object.freeze({
-		dateStyle,
-		locale,
-		timeStyle,
-		timeZone,
-	});
-};
-
-const readBuildInfo = (footer) => {
-	const value = footer.buildInfo;
-
-	if (value === undefined || value === null || value === false) {
-		return null;
-	}
-
-	const buildInfo = assertObject(value, 'footer.buildInfo');
-
-	return Object.freeze({
-		enabled: readBoolean(buildInfo, 'enabled', 'footer.buildInfo', true),
-		text: readString(buildInfo, 'text', 'footer.buildInfo'),
-		dateTimeFormat: readDateTimeFormat(buildInfo.dateTimeFormat, 'footer.buildInfo.dateTimeFormat'),
-	});
-};
-
 const rawConfig = assertObject(siteConfig, 'default export');
 const misplacedThemeKeys = ['layout', 'gallery', 'typography'].filter((key) => key in rawConfig);
 if (misplacedThemeKeys.length > 0) {
@@ -302,13 +250,8 @@ if (misplacedThemeKeys.length > 0) {
 
 const rawTheme = assertObject(themeConfig, 'theme frontmatter', siteThemeLabel);
 const rawSite = assertObject(rawConfig.site, 'site');
-const rawLayout = assertObject(rawTheme.layout ?? {}, 'layout', siteThemeLabel);
-const rawLayoutSpacing = assertObject(rawLayout.spacing ?? {}, 'layout.spacing', siteThemeLabel);
-const rawGallery = assertObject(rawTheme.gallery ?? {}, 'gallery', siteThemeLabel);
-const rawTypography = assertObject(rawTheme.typography ?? {}, 'typography', siteThemeLabel);
 const rawNavigation = assertObject(rawConfig.navigation ?? {}, 'navigation');
 const rawLocale = rawConfig.locale ?? {};
-const rawFooter = assertObject(rawConfig.footer ?? {}, 'footer');
 const rawGithub = assertObject(rawConfig.github, 'github');
 const rawDeploy = assertObject(rawConfig.deploy ?? {}, 'deploy');
 const rawDeployWatch = assertObject(rawDeploy.watch ?? {}, 'deploy.watch');
@@ -317,9 +260,9 @@ const defaultFontFamily = "Arial, 'Helvetica Neue', Helvetica, sans-serif";
 const layoutDensityNames = ['compact', 'normal', 'airy'];
 const layoutDensityProfiles = Object.freeze({
 	compact: Object.freeze({
-		bodyToImages: Object.freeze({
-			desktop: '1rem',
-			mobile: '0.9rem',
+		blockGap: Object.freeze({
+			desktop: '1.25em',
+			mobile: '1.1em',
 		}),
 		finalSectionBottom: Object.freeze({
 			desktop: 'clamp(1.2rem, 2.4vw, 2.25rem)',
@@ -329,6 +272,10 @@ const layoutDensityProfiles = Object.freeze({
 			desktop: 'clamp(1rem, 2vw, 1.75rem)',
 			mobile: '1rem',
 		}),
+		headingToBlock: Object.freeze({
+			desktop: '0.65em',
+			mobile: '0.6em',
+		}),
 		imageGap: Object.freeze({
 			desktop: 'clamp(1rem, 2vw, 1.5rem)',
 			mobile: '1.25rem',
@@ -339,9 +286,9 @@ const layoutDensityProfiles = Object.freeze({
 		}),
 	}),
 	normal: Object.freeze({
-		bodyToImages: Object.freeze({
-			desktop: '1.25rem',
-			mobile: '1rem',
+		blockGap: Object.freeze({
+			desktop: '1.5em',
+			mobile: '1.25em',
 		}),
 		finalSectionBottom: Object.freeze({
 			desktop: 'clamp(1.4rem, 3vw, 2.75rem)',
@@ -351,6 +298,10 @@ const layoutDensityProfiles = Object.freeze({
 			desktop: 'clamp(1.25rem, 3vw, 2.5rem)',
 			mobile: '1.25rem',
 		}),
+		headingToBlock: Object.freeze({
+			desktop: '0.75em',
+			mobile: '0.7em',
+		}),
 		imageGap: Object.freeze({
 			desktop: 'clamp(1.25rem, 2.8vw, 2rem)',
 			mobile: '1.5rem',
@@ -361,9 +312,9 @@ const layoutDensityProfiles = Object.freeze({
 		}),
 	}),
 	airy: Object.freeze({
-		bodyToImages: Object.freeze({
-			desktop: '1.5rem',
-			mobile: '1.25rem',
+		blockGap: Object.freeze({
+			desktop: '1.75em',
+			mobile: '1.5em',
 		}),
 		finalSectionBottom: Object.freeze({
 			desktop: 'clamp(2.25rem, 5vw, 4.5rem)',
@@ -373,6 +324,10 @@ const layoutDensityProfiles = Object.freeze({
 			desktop: 'clamp(2rem, 5vw, 4rem)',
 			mobile: '1.5rem',
 		}),
+		headingToBlock: Object.freeze({
+			desktop: '0.9em',
+			mobile: '0.8em',
+		}),
 		imageGap: Object.freeze({
 			desktop: 'clamp(1.5rem, 3.5vw, 2.75rem)',
 			mobile: '2rem',
@@ -383,51 +338,59 @@ const layoutDensityProfiles = Object.freeze({
 		}),
 	}),
 });
-const layoutDensity = readEnum(rawLayout, 'density', 'layout', layoutDensityNames, 'normal', siteThemeLabel);
-const layoutSpacingDefaults = layoutDensityProfiles[layoutDensity];
+export const resolveThemeVisualConfig = (theme, sourceLabel = siteThemeLabel) => {
+	const rawThemeConfig = assertObject(resolveThemeConfig(theme, sourceLabel), 'theme frontmatter', sourceLabel);
+	const rawLayoutConfig = assertObject(rawThemeConfig.layout ?? {}, 'layout', sourceLabel);
+	const rawLayoutSpacingConfig = assertObject(rawLayoutConfig.spacing ?? {}, 'layout.spacing', sourceLabel);
+	const rawGalleryConfig = assertObject(rawThemeConfig.gallery ?? {}, 'gallery', sourceLabel);
+	const rawTypographyConfig = assertObject(rawThemeConfig.typography ?? {}, 'typography', sourceLabel);
+	const resolvedLayoutDensity = readEnum(rawLayoutConfig, 'density', 'layout', layoutDensityNames, 'normal', sourceLabel);
+	const resolvedLayoutSpacingDefaults = layoutDensityProfiles[resolvedLayoutDensity];
+
+	return Object.freeze({
+		layout: Object.freeze({
+			density: resolvedLayoutDensity,
+			gutter: readResponsiveCssLength(rawLayoutConfig, 'gutter', 'layout', Object.freeze({
+				desktop: 'clamp(1.25rem, 4vw, 3rem)',
+				mobile: '1rem',
+			}), sourceLabel),
+			pageWidth: readCssLength(rawLayoutConfig, 'pageWidth', 'layout', '1180px', sourceLabel),
+			spacing: Object.freeze({
+				blockGap: readResponsiveCssLength(rawLayoutSpacingConfig, 'blockGap', 'layout.spacing', resolvedLayoutSpacingDefaults.blockGap, sourceLabel),
+				finalSectionBottom: readResponsiveCssLength(rawLayoutSpacingConfig, 'finalSectionBottom', 'layout.spacing', resolvedLayoutSpacingDefaults.finalSectionBottom, sourceLabel),
+				firstSectionTop: readResponsiveCssLength(rawLayoutSpacingConfig, 'firstSectionTop', 'layout.spacing', resolvedLayoutSpacingDefaults.firstSectionTop, sourceLabel),
+				headingToBlock: readResponsiveCssLength(rawLayoutSpacingConfig, 'headingToBlock', 'layout.spacing', resolvedLayoutSpacingDefaults.headingToBlock, sourceLabel),
+				imageGap: readResponsiveCssLength(rawLayoutSpacingConfig, 'imageGap', 'layout.spacing', resolvedLayoutSpacingDefaults.imageGap, sourceLabel),
+				sectionGap: readResponsiveCssLength(rawLayoutSpacingConfig, 'sectionGap', 'layout.spacing', resolvedLayoutSpacingDefaults.sectionGap, sourceLabel),
+			}),
+		}),
+		gallery: Object.freeze({
+			maxAvailableHeightPercent: readResponsivePercent(rawGalleryConfig, 'maxAvailableHeightPercent', 'gallery', Object.freeze({
+				desktop: 74,
+				mobile: 68,
+			}), sourceLabel),
+			maxAvailableWidthPercent: readResponsivePercent(rawGalleryConfig, 'maxAvailableWidthPercent', 'gallery', Object.freeze({
+				desktop: 100,
+				mobile: 100,
+			}), sourceLabel),
+			width: readCssLength(rawGalleryConfig, 'width', 'gallery', '900px', sourceLabel),
+		}),
+		typography: Object.freeze({
+			fontFamily: readFontFamily(rawTypographyConfig, 'fontFamily', 'typography', defaultFontFamily, sourceLabel),
+		}),
+	});
+};
 
 export const projectConfig = Object.freeze({
 	site: Object.freeze({
 		basePath: readBasePath(rawSite, 'basePath', 'site'),
 		url: readUrl(rawSite, 'url', 'site'),
 	}),
-	layout: Object.freeze({
-		density: layoutDensity,
-		gutter: readResponsiveCssLength(rawLayout, 'gutter', 'layout', Object.freeze({
-			desktop: 'clamp(1.25rem, 4vw, 3rem)',
-			mobile: '1rem',
-		}), siteThemeLabel),
-		pageWidth: readCssLength(rawLayout, 'pageWidth', 'layout', '1180px', siteThemeLabel),
-		spacing: Object.freeze({
-			bodyToImages: readResponsiveCssLength(rawLayoutSpacing, 'bodyToImages', 'layout.spacing', layoutSpacingDefaults.bodyToImages, siteThemeLabel),
-			finalSectionBottom: readResponsiveCssLength(rawLayoutSpacing, 'finalSectionBottom', 'layout.spacing', layoutSpacingDefaults.finalSectionBottom, siteThemeLabel),
-			firstSectionTop: readResponsiveCssLength(rawLayoutSpacing, 'firstSectionTop', 'layout.spacing', layoutSpacingDefaults.firstSectionTop, siteThemeLabel),
-			imageGap: readResponsiveCssLength(rawLayoutSpacing, 'imageGap', 'layout.spacing', layoutSpacingDefaults.imageGap, siteThemeLabel),
-			sectionGap: readResponsiveCssLength(rawLayoutSpacing, 'sectionGap', 'layout.spacing', layoutSpacingDefaults.sectionGap, siteThemeLabel),
-		}),
-	}),
-	gallery: Object.freeze({
-		maxAvailableHeightPercent: readResponsivePercent(rawGallery, 'maxAvailableHeightPercent', 'gallery', Object.freeze({
-			desktop: 74,
-			mobile: 68,
-		}), siteThemeLabel),
-		maxAvailableWidthPercent: readResponsivePercent(rawGallery, 'maxAvailableWidthPercent', 'gallery', Object.freeze({
-			desktop: 100,
-			mobile: 100,
-		}), siteThemeLabel),
-		width: readCssLength(rawGallery, 'width', 'gallery', '900px', siteThemeLabel),
-	}),
-	typography: Object.freeze({
-		fontFamily: readFontFamily(rawTypography, 'fontFamily', 'typography', defaultFontFamily, siteThemeLabel),
-	}),
+	...resolveThemeVisualConfig(rawTheme, siteThemeLabel),
 	navigation: Object.freeze({
 		smoothScroll: readSmoothScroll(rawNavigation),
 	}),
 	locale: readLocale(rawLocale),
-	footer: Object.freeze({
-		buildInfo: readBuildInfo(rawFooter),
-		copyrightMessage: readOptionalString(rawFooter, 'copyrightMessage', 'footer'),
-	}),
 	github: Object.freeze({
 		repo: readString(rawGithub, 'repo', 'github'),
 		branch: readString(rawGithub, 'branch', 'github'),

package/scripts/lib/site-content.mjs

@@ -18,24 +18,20 @@ export const supportedImageExtensions = new Set([...rasterImageExtensions, ...st
 
 const h2Regex = /^##\s+.*$/gm;
 const explicitHeadingIdRegex = /\s*\{#([a-z0-9-]+)\}\s*$/;
-const inlineStyleReferenceRegex = /\[[^\]\n]+\]\{\.([a-z][a-z0-9-]*)\}/g;
+const deprecatedInlineStyleReferenceRegex = /\[[^\]\n]+\]\{\.([a-z][a-z0-9-]*)\}/g;
 const frontmatterDelimiterRegex = /^---\s*$/;
-const knownContentTopLevelFrontmatterKeys = new Set(['title', 'description', 'navigation', 'presentation', 'frame', 'sections']);
-const knownThemeTopLevelFrontmatterKeys = new Set(['navigation', 'layout', 'gallery', 'typography', 'presentation', 'frame']);
-const frontmatterColorKeys = new Set(['backgroundColor', 'textColor', 'color']);
-const quotedHexColorRegex = /^["']#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})["']$/;
-const unquotedHexColorRegex = /^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
+const knownContentTopLevelFrontmatterKeys = new Set(['title', 'description', 'navigation', 'sections']);
+const knownThemeTopLevelFrontmatterKeys = new Set(['navigation', 'preset', 'layout', 'gallery', 'typography', 'presentation']);
+const knownRouteThemeTopLevelFrontmatterKeys = new Set(['navigation', 'preset', 'layout', 'gallery', 'typography', 'presentation']);
+const knownSitewideTopLevelFrontmatterKeys = new Set(['navigation', 'banners', 'footer']);
 const knownNestedFrontmatterKeys = new Set([
 	'align',
 	'alt',
-	'backgroundColor',
 	'body',
-	'bodyToImages',
+	'blockGap',
 	'brand',
 	'caption',
 	'carousel',
-	'color',
-	'colors',
 	'density',
 	'desktop',
 	'fontFamily',
@@ -43,6 +39,7 @@ const knownNestedFrontmatterKeys = new Set([
 	'finalSectionBottom',
 	'gallery',
 	'gutter',
+	'headingToBlock',
 	'h1',
 	'h2',
 	'h3',
@@ -53,8 +50,8 @@ const knownNestedFrontmatterKeys = new Set([
 	'include',
 	'image',
 	'imageGap',
-	'inlineStyles',
 	'label',
+	'logo',
 	'lineHeight',
 	'maxAvailableHeightPercent',
 	'maxAvailableWidthPercent',
@@ -63,15 +60,18 @@ const knownNestedFrontmatterKeys = new Set([
 	'overrides',
 	'paragraphSpacing',
 	'pageWidth',
+	'palette',
 	'preset',
 	'presentation',
 	'rhythm',
+	'sequence',
 	'sections',
 	'sectionGap',
+	'sectionSurfaces',
 	'size',
 	'spacingAfter',
 	'spacingBefore',
-	'textColor',
+	'surface',
 	'theme',
 	'typography',
 	'until',
@@ -264,79 +264,6 @@ export const validateFrontmatterStructure = (frontmatter, addIssue, {
 	}
 };
 
-const stripInlineYamlComment = (value) => {
-	let quote = null;
-
-	for (let index = 0; index < value.length; index += 1) {
-		const character = value[index];
-		const previous = value[index - 1];
-
-		if ((character === '"' || character === "'") && previous !== '\\') {
-			quote = quote === character ? null : quote ?? character;
-			continue;
-		}
-
-		if (character === '#' && quote === null && /\s/.test(previous ?? '')) {
-			return value.slice(0, index).trimEnd();
-		}
-	}
-
-	return value.trim();
-};
-
-export const validateFrontmatterColorValues = (frontmatter, addIssue, label = 'Frontmatter') => {
-	const lines = frontmatter.split(/\r?\n/);
-	const pathStack = [];
-
-	for (const [index, line] of lines.entries()) {
-		const lineNumber = index + 1;
-		const trimmed = line.trim();
-
-		if (!trimmed || trimmed.startsWith('#') || frontmatterDelimiterRegex.test(line)) {
-			continue;
-		}
-
-		const match = line.match(/^(\s*)([A-Za-z][A-Za-z0-9-]*):\s*(.*?)\s*$/);
-		if (!match) continue;
-
-		const indent = match[1].length;
-		const key = match[2];
-		const rawValue = match[3].trim();
-
-		while (pathStack.length > 0 && pathStack[pathStack.length - 1].indent >= indent) {
-			pathStack.pop();
-		}
-
-		const pathLabel = [...pathStack.map((entry) => entry.key), key].join('.');
-
-		if (!frontmatterColorKeys.has(key)) {
-			if (!rawValue) {
-				pathStack.push({ indent, key });
-			}
-			continue;
-		}
-
-		const value = stripInlineYamlComment(rawValue);
-
-		if (quotedHexColorRegex.test(value)) continue;
-
-		if (unquotedHexColorRegex.test(rawValue)) {
-			addIssue({
-				severity: 'error',
-				message: `${label} line ${lineNumber} defines ${pathLabel} as an unquoted hex color. YAML treats "#" as the start of a comment unless the value is quoted.`,
-				fix: `Write it as ${key}: "#ffd84d" or another quoted hex color.`,
-			});
-			continue;
-		}
-
-		addIssue({
-			severity: 'error',
-			message: `${label} line ${lineNumber} defines ${pathLabel} with invalid color value ${rawValue || '(empty)'}.`,
-			fix: `Use a quoted hex color in #rgb, #rrggbb, or #rrggbbaa form, for example ${key}: "#ffd84d".`,
-		});
-	}
-};
-
 export const validateContentFrontmatterStructure = (frontmatter, addIssue) =>
 	validateFrontmatterStructure(frontmatter, addIssue, {
 		knownTopLevelFrontmatterKeys: knownContentTopLevelFrontmatterKeys,
@@ -349,6 +276,18 @@ export const validateThemeFrontmatterStructure = (frontmatter, addIssue) =>
 		fileKind: 'theme',
 	});
 
+export const validateRouteThemeFrontmatterStructure = (frontmatter, addIssue) =>
+	validateFrontmatterStructure(frontmatter, addIssue, {
+		knownTopLevelFrontmatterKeys: knownRouteThemeTopLevelFrontmatterKeys,
+		fileKind: 'route theme',
+	});
+
+export const validateSitewideFrontmatterStructure = (frontmatter, addIssue) =>
+	validateFrontmatterStructure(frontmatter, addIssue, {
+		knownTopLevelFrontmatterKeys: knownSitewideTopLevelFrontmatterKeys,
+		fileKind: 'sitewide content',
+	});
+
 export const readThemeFile = async (sitePath) => readSiteFile(sitePath, siteThemeLabel);
 
 export const getFrontmatterSections = (frontmatter) => {
@@ -374,42 +313,11 @@ export const getFrontmatterSections = (frontmatter) => {
 	return sections;
 };
 
-export const getFrontmatterInlineStyleNames = (frontmatter) => {
-	const names = new Set();
-	const lines = frontmatter.split(/\r?\n/);
-	let inlineStylesIndent = null;
-
-	for (const line of lines) {
-		const inlineStylesMatch = line.match(/^(\s*)inlineStyles:\s*$/);
-
-		if (inlineStylesMatch) {
-			inlineStylesIndent = inlineStylesMatch[1].length;
-			continue;
-		}
-
-		if (inlineStylesIndent === null) continue;
-		if (!line.trim() || line.trim().startsWith('#')) continue;
-
-		const indent = line.match(/^\s*/)?.[0].length ?? 0;
-		if (indent <= inlineStylesIndent) {
-			inlineStylesIndent = null;
-			continue;
-		}
-
-		const nameMatch = line.match(new RegExp(`^\\s{${inlineStylesIndent + 2}}([a-z][a-z0-9-]*):\\s*$`));
-		if (nameMatch) {
-			names.add(nameMatch[1]);
-		}
-	}
-
-	return names;
-};
+export const getHeadingId = (heading) => heading.match(explicitHeadingIdRegex)?.[1];
 
-export const getInlineStyleReferences = (body) => Array.from(body.matchAll(inlineStyleReferenceRegex))
+export const getDeprecatedInlineStyleReferences = (body) => Array.from(body.matchAll(deprecatedInlineStyleReferenceRegex))
 	.map((match) => match[1]);
 
-export const getHeadingId = (heading) => heading.match(explicitHeadingIdRegex)?.[1];
-
 export const getBodySections = (body) => {
 	const matches = Array.from(body.matchAll(h2Regex));
 	const prelude = matches.length > 0 ? body.slice(0, matches[0].index) : body;

package/scripts/lib/site-paths.mjs

@@ -117,6 +117,7 @@ export const siteDir = resolvedSitePaths.siteDir;
 export const siteConfigPath = path.join(siteDir, 'config.mjs');
 export const siteThemePath = path.join(siteDir, 'theme.md');
 export const siteContentPath = path.join(siteDir, 'content.md');
+export const sitewideContentPath = path.join(siteDir, 'sitewide-content.md');
 export const siteImagesDir = path.join(siteDir, 'images');
 export const siteRoutesDir = path.join(siteDir, 'routes');
 export const sitePublicDir = path.join(siteDir, 'public');
@@ -135,6 +136,7 @@ export const siteDirLabel = getPathLabel(siteDir);
 export const siteConfigLabel = getPathLabel(siteConfigPath);
 export const siteThemeLabel = getPathLabel(siteThemePath);
 export const siteContentLabel = getPathLabel(siteContentPath);
+export const sitewideContentLabel = getPathLabel(sitewideContentPath);
 export const siteImagesLabel = getPathLabel(siteImagesDir);
 export const siteRoutesLabel = getPathLabel(siteRoutesDir);
 export const sitePublicLabel = getPathLabel(sitePublicDir);