@janga/norna 0.7.9 → 0.7.10

package/src/content.config.ts

@@ -10,13 +10,14 @@ const siteEntryId = `${siteDirLabel
 	.replace(/^[./\\]+/, '')
 	.replace(/[^a-zA-Z0-9-]+/g, '-')
 	.replace(/^-+|-+$/g, '') || 'site'}-content`;
-const colorValue = z.string().regex(
-	/^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/,
-	'Use a hex color such as "#000000".',
-);
 const textAlign = z.enum(['left', 'center', 'right']);
 const textSize = z.enum(['small', 'medium', 'large', 'xlarge']);
+const textWidth = z.enum(['narrow', 'normal', 'wide']);
+const headingWeight = z.union([z.literal(400), z.literal(500), z.literal(600), z.literal(700)]);
 const typographyPreset = z.enum(['quiet-gallery', 'compact-gallery', 'text-forward', 'statement']);
+const presentationPalette = z.enum(['dark', 'light', 'paper']);
+const sectionSurfaceMode = z.enum(['none', 'cycle']);
+const sectionSurface = z.enum(['base', 'soft', 'emphasis']);
 const spacingDensity = z.enum(['compact', 'normal', 'airy']);
 const lineHeight = z.number()
 	.min(1, 'Use a unitless line height of at least 1.')
@@ -31,7 +32,6 @@ const visualCssLength = z.string().regex(
 	new RegExp(`^(?:0|${visualCssLengthValue}|clamp\\(\\s*${visualCssLengthValue}\\s*,\\s*${visualCssLengthValue}\\s*,\\s*${visualCssLengthValue}\\s*\\))$`),
 	'Use a CSS length such as "0", "900px", "56rem", "90%", or "clamp(1rem, 4vw, 3rem)".',
 );
-const inlineStyleName = z.string().regex(/^[a-z][a-z0-9-]*$/);
 const dateOnly = z.string()
 	.regex(/^\d{4}-\d{2}-\d{2}$/, 'Use YYYY-MM-DD format.')
 	.refine(isDateOnly, 'Use a real calendar date.');
@@ -59,6 +59,7 @@ const commonTextPresentationOverride = {
 };
 const headingPresentationOverride = z.object({
 	...commonTextPresentationOverride,
+	weight: headingWeight.optional(),
 	spacingBefore: cssLength.optional(),
 	spacingAfter: cssLength.optional(),
 }).strict();
@@ -70,6 +71,7 @@ const headingLevelsPresentationOverride = z.object({
 }).strict();
 const bodyPresentationOverride = z.object({
 	...commonTextPresentationOverride,
+	width: textWidth.optional(),
 	paragraphSpacing: cssLength.optional(),
 }).strict();
 const captionPresentationOverride = z.object({
@@ -81,14 +83,6 @@ const typographyOverrides = z.object({
 	body: bodyPresentationOverride.optional(),
 	caption: captionPresentationOverride.optional(),
 }).strict();
-const typography = z.object({
-	preset: typographyPreset.optional(),
-	rhythm: spacingDensity.optional(),
-	overrides: typographyOverrides.optional(),
-}).strict().refine(
-	(value) => value.preset !== undefined || value.rhythm !== undefined || value.overrides !== undefined,
-	'Specify preset, rhythm, overrides, or both.',
-);
 const themeTypography = z.object({
 	fontFamily: z.string()
 		.min(1)
@@ -115,9 +109,10 @@ const responsivePercent = z.union([
 	}).strict(),
 ]);
 const themeLayoutSpacing = z.object({
-	bodyToImages: responsiveCssLength.optional(),
+	blockGap: responsiveCssLength.optional(),
 	finalSectionBottom: responsiveCssLength.optional(),
 	firstSectionTop: responsiveCssLength.optional(),
+	headingToBlock: responsiveCssLength.optional(),
 	imageGap: responsiveCssLength.optional(),
 	sectionGap: responsiveCssLength.optional(),
 }).strict();
@@ -132,32 +127,15 @@ const themeGallery = z.object({
 	maxAvailableWidthPercent: responsivePercent.optional(),
 	maxAvailableHeightPercent: responsivePercent.optional(),
 }).strict();
-const sectionPresentationOverride = z.object({
-	backgroundColor: colorValue.optional(),
-	textColor: colorValue.optional(),
-	typography: typography.optional(),
-}).strict();
 const themePresentation = z.object({
-	backgroundColor: colorValue.optional(),
-	textColor: colorValue.optional(),
-	inlineStyles: z.record(inlineStyleName, z.object({
-		color: colorValue,
-	}).strict()).optional(),
-}).strict();
-const pagePresentation = z.object({
-	backgroundColor: colorValue.optional(),
-	textColor: colorValue.optional(),
-	typography: typography.optional(),
-}).strict();
-const frameColors = z.union([
-	z.enum(['theme', 'presentation']),
-	z.object({
-		backgroundColor: colorValue,
-		textColor: colorValue,
-	}).strict(),
-]);
-const frame = z.object({
-	colors: frameColors.optional(),
+	palette: presentationPalette.optional(),
+	sectionSurfaces: z.object({
+		mode: sectionSurfaceMode,
+		sequence: z.array(sectionSurface).min(1).max(3).optional(),
+	}).strict().refine(
+		(value) => !value.sequence || new Set(value.sequence).size === value.sequence.length,
+		'Each section surface may appear only once in a sequence.',
+	).optional(),
 }).strict();
 const pageNavigation = z.object({
 	include: z.boolean().optional(),
@@ -165,29 +143,72 @@ const pageNavigation = z.object({
 }).strict();
 const themeNavigation = z.object({
 	brand: z.string().min(1).optional(),
+	logo: z.object({
+		alt: z.string().min(1).optional(),
+		height: visualCssLength.optional(),
+	}).strict().optional(),
 }).strict();
 
 const sectionMetadata = z.object({
 	visible: visibilityWindow.optional(),
-	presentation: sectionPresentationOverride.optional(),
+}).strict();
+const banner = z.object({
+	id: z.string().regex(/^[a-z0-9-]+$/),
+	tone: z.enum(['warning']).default('warning'),
+	visible: visibilityWindow.optional(),
+	title: z.string().min(1),
+	text: z.string().min(1),
+}).strict();
+const banners = z.array(banner).optional().default([]).refine(
+	(values) => new Set(values.map((value) => value.id)).size === values.length,
+	'Banner ids must be unique.',
+);
+const dateTimeFormat = z.object({
+	locale: z.string().min(1),
+	timeZone: z.string().min(1),
+	dateStyle: z.string().min(1),
+	timeStyle: z.string().min(1),
+}).strict().refine((value) => {
+	try {
+		new Intl.DateTimeFormat(value.locale, {
+			dateStyle: value.dateStyle as Intl.DateTimeFormatOptions['dateStyle'],
+			timeStyle: value.timeStyle as Intl.DateTimeFormatOptions['timeStyle'],
+			timeZone: value.timeZone,
+		});
+		return true;
+	} catch {
+		return false;
+	}
+}, 'Use a valid Intl.DateTimeFormat configuration.');
+const sitewideFooter = z.object({
+	copyrightMessage: z.string().min(1).optional(),
+	buildInfo: z.object({
+		enabled: z.boolean().default(true),
+		text: z.string().min(1),
+		dateTimeFormat,
+	}).strict().optional(),
 }).strict();
 
 const siteSchema = z.object({
 	title: z.string(),
 	description: z.string(),
 	navigation: pageNavigation.optional(),
-	presentation: pagePresentation.optional(),
-	frame: frame.optional(),
 	sections: z.record(z.string().regex(/^[a-z0-9-]+$/), sectionMetadata).optional().default({}),
 });
 
-const themeSchema = z.object({
-	navigation: themeNavigation.optional(),
+export const themeVisualSchema = z.object({
 	layout: themeLayout.optional(),
 	gallery: themeGallery.optional(),
 	typography: themeTypography.optional(),
 	presentation: themePresentation.optional(),
-	frame: frame.optional(),
+}).strict();
+
+const siteThemeSchema = themeVisualSchema;
+
+const sitewideSchema = z.object({
+	navigation: themeNavigation.optional(),
+	banners,
+	footer: sitewideFooter.optional(),
 }).strict();
 
 const site = defineCollection({
@@ -212,9 +233,18 @@ const theme = defineCollection({
 	loader: glob({
 		pattern: 'theme.md',
 		base: pathToFileURL(siteDir),
-		generateId: () => `${siteEntryId.replace(/-content$/, '')}-theme`,
+		generateId: ({ entry }) => entry,
+	}),
+	schema: siteThemeSchema,
+});
+
+const sitewide = defineCollection({
+	loader: glob({
+		pattern: 'sitewide-content.md',
+		base: pathToFileURL(siteDir),
+		generateId: () => `${siteEntryId.replace(/-content$/, '')}-sitewide`,
 	}),
-	schema: themeSchema,
+	schema: sitewideSchema,
 });
 
-export const collections = { site, theme };
+export const collections = { site, theme, sitewide };

package/src/layouts/BaseLayout.astro

@@ -1,5 +1,6 @@
 ---
 import projectConfig from '../../scripts/lib/project-config.mjs';
+import { getPresentationCssVariables } from '../../scripts/lib/presentation.mjs';
 import { getIconLinks } from '../lib/sitePublicAssets';
 import { withBasePath } from '../lib/basePath';
 import '../styles/global.css';
@@ -9,18 +10,64 @@ type FrameColors = {
 	textColor: string;
 };
 
+type Presentation = {
+	palette: {
+		page: FrameColors;
+		css: Record<string, string>;
+		colorScheme: string;
+	};
+};
+type VisualTheme = {
+	layout: {
+		gutter: { desktop: string; mobile: string };
+		pageWidth: string;
+		spacing: {
+			firstSectionTop: { desktop: string; mobile: string };
+			blockGap: { desktop: string; mobile: string };
+			headingToBlock: { desktop: string; mobile: string };
+			imageGap: { desktop: string; mobile: string };
+			sectionGap: { desktop: string; mobile: string };
+			finalSectionBottom: { desktop: string; mobile: string };
+		};
+	};
+	gallery: {
+		width: string;
+		maxAvailableWidthPercent: { desktop: number; mobile: number };
+		maxAvailableHeightPercent: { desktop: number; mobile: number };
+	};
+	typography: { fontFamily: string };
+};
+
 interface Props {
 	title?: string;
 	description?: string;
+	presentation: Presentation;
+	visualTheme: VisualTheme;
 	frameColors: FrameColors;
 	pathname?: string;
+	footer?: {
+		copyrightMessage?: string;
+		buildInfo?: {
+			enabled: boolean;
+			text: string;
+			dateTimeFormat: {
+				locale: string;
+				timeZone: string;
+				dateStyle: string;
+				timeStyle: string;
+			};
+		};
+	};
 }
 
 const {
 	title = 'norna',
 	description = 'A norna site.',
+	presentation,
+	visualTheme,
 	frameColors,
 	pathname = '/',
+	footer,
 } = Astro.props;
 
 const documentTitle = title;
@@ -29,30 +76,33 @@ const iconLinks = getIconLinks();
 const scrollBehavior = projectConfig.navigation.smoothScroll.enabled ? 'smooth' : 'auto';
 const formatPercent = (value: number) => `${value}%`;
 const formatViewportHeightPercent = (value: number) => `${value}svh`;
-const layoutSpacing = projectConfig.layout.spacing;
+const layoutSpacing = visualTheme.layout.spacing;
 const documentStyle = [
 	`scroll-behavior: ${scrollBehavior}`,
-	`--font-sans: ${projectConfig.typography.fontFamily}`,
-	`--page-width: ${projectConfig.layout.pageWidth}`,
-	`--content-gutter-desktop: ${projectConfig.layout.gutter.desktop}`,
-	`--content-gutter-mobile: ${projectConfig.layout.gutter.mobile}`,
+	...Object.entries(getPresentationCssVariables(presentation)).map(([name, value]) => `${name}: ${value}`),
+	`--font-sans: ${visualTheme.typography.fontFamily}`,
+	`--page-width: ${visualTheme.layout.pageWidth}`,
+	`--content-gutter-desktop: ${visualTheme.layout.gutter.desktop}`,
+	`--content-gutter-mobile: ${visualTheme.layout.gutter.mobile}`,
 	`--space-nav-to-first-section-desktop: ${layoutSpacing.firstSectionTop.desktop}`,
 	`--space-nav-to-first-section-mobile: ${layoutSpacing.firstSectionTop.mobile}`,
-	`--space-section-body-to-gallery-desktop: ${layoutSpacing.bodyToImages.desktop}`,
-	`--space-section-body-to-gallery-mobile: ${layoutSpacing.bodyToImages.mobile}`,
+	`--space-content-block-gap-desktop: ${layoutSpacing.blockGap.desktop}`,
+	`--space-content-block-gap-mobile: ${layoutSpacing.blockGap.mobile}`,
+	`--space-heading-to-block-desktop: ${layoutSpacing.headingToBlock.desktop}`,
+	`--space-heading-to-block-mobile: ${layoutSpacing.headingToBlock.mobile}`,
 	`--space-gallery-item-desktop: ${layoutSpacing.imageGap.desktop}`,
 	`--space-gallery-item-mobile: ${layoutSpacing.imageGap.mobile}`,
 	`--space-section-to-section-desktop: ${layoutSpacing.sectionGap.desktop}`,
 	`--space-section-to-section-mobile: ${layoutSpacing.sectionGap.mobile}`,
 	`--space-final-section-bottom-desktop: ${layoutSpacing.finalSectionBottom.desktop}`,
 	`--space-final-section-bottom-mobile: ${layoutSpacing.finalSectionBottom.mobile}`,
-	`--gallery-width: ${projectConfig.gallery.width}`,
-	`--gallery-max-available-width-desktop: ${formatPercent(projectConfig.gallery.maxAvailableWidthPercent.desktop)}`,
-	`--gallery-max-available-width-mobile: ${formatPercent(projectConfig.gallery.maxAvailableWidthPercent.mobile)}`,
-	`--gallery-max-image-height-desktop: ${formatViewportHeightPercent(projectConfig.gallery.maxAvailableHeightPercent.desktop)}`,
-	`--gallery-max-image-height-mobile: ${formatViewportHeightPercent(projectConfig.gallery.maxAvailableHeightPercent.mobile)}`,
+	`--gallery-width: ${visualTheme.gallery.width}`,
+	`--gallery-max-available-width-desktop: ${formatPercent(visualTheme.gallery.maxAvailableWidthPercent.desktop)}`,
+	`--gallery-max-available-width-mobile: ${formatPercent(visualTheme.gallery.maxAvailableWidthPercent.mobile)}`,
+	`--gallery-max-image-height-desktop: ${formatViewportHeightPercent(visualTheme.gallery.maxAvailableHeightPercent.desktop)}`,
+	`--gallery-max-image-height-mobile: ${formatViewportHeightPercent(visualTheme.gallery.maxAvailableHeightPercent.mobile)}`,
 ].join('; ');
-const { buildInfo, copyrightMessage } = projectConfig.footer;
+const { buildInfo, copyrightMessage } = footer ?? {};
 const showBuildInfo = Boolean(buildInfo?.enabled);
 const buildTime = showBuildInfo
 	? new Intl.DateTimeFormat(buildInfo.dateTimeFormat.locale, {
@@ -75,7 +125,7 @@ const footerStyle = [
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<meta name="format-detection" content="telephone=no" />
 		<meta name="description" content={description} />
-		<meta name="theme-color" content="#000000" />
+		<meta name="theme-color" content={presentation.palette.page.backgroundColor} />
 		<link rel="canonical" href={canonicalUrl} />
 		<meta name="generator" content={Astro.generator} />
 		{iconLinks.map((iconLink) => (

package/src/lib/routeThemes.ts

@@ -0,0 +1,61 @@
+import { readFile } from 'node:fs/promises';
+import path from 'node:path';
+import { parseYamlMapping } from '../../scripts/lib/frontmatter-yaml.mjs';
+import {
+	splitSiteFile,
+	validateFrontmatterIndentation,
+	validateRouteThemeFrontmatterStructure,
+} from '../../scripts/lib/site-content.mjs';
+import { siteRoutesDir, siteRoutesLabel, sitewideContentLabel } from '../../scripts/lib/site-paths.mjs';
+import { themeVisualSchema } from '../content.config';
+
+type RouteTheme = {
+	id: string;
+	data: Record<string, unknown>;
+};
+
+export const getRouteTheme = async (routeDirectory: string | null): Promise<RouteTheme | null> => {
+	if (!routeDirectory) return null;
+
+	const segments = routeDirectory.split(/[\\/]/).filter(Boolean);
+	for (let length = segments.length; length > 0; length -= 1) {
+		const themeSegments = segments.slice(0, length);
+		const themePath = path.join(siteRoutesDir, ...themeSegments, 'theme.md');
+		const themeLabel = `${siteRoutesLabel}/${themeSegments.join('/')}/theme.md`;
+		const source = await readFile(themePath, 'utf8').catch((error) => {
+			if (error?.code === 'ENOENT') return null;
+			throw error;
+		});
+		if (!source) continue;
+
+		const { frontmatter, frontmatterBody } = splitSiteFile(source, themeLabel);
+		const issues: Array<{ message: string }> = [];
+		validateFrontmatterIndentation(frontmatter, (issue) => issues.push(issue));
+		validateRouteThemeFrontmatterStructure(frontmatter, (issue) => issues.push(issue));
+		if (issues.length > 0) {
+			throw new Error([
+				`${themeLabel} has invalid frontmatter.`,
+				...issues.map((issue) => `- ${issue.message}`),
+			].join('\n'));
+		}
+
+		const data = parseYamlMapping(frontmatterBody);
+		if (Object.hasOwn(data, 'navigation')) {
+			throw new Error(`${themeLabel} may not define navigation. Brand and logo belong in ${sitewideContentLabel}.`);
+		}
+		const parsed = themeVisualSchema.safeParse(data);
+		if (!parsed.success) {
+			throw new Error([
+				`${themeLabel} has invalid values.`,
+				...parsed.error.issues.map((issue) => `- ${issue.path.join('.') || '(root)'}: ${issue.message}`),
+			].join('\n'));
+		}
+
+		return {
+			id: `routes/${themeSegments.join('/')}/theme`,
+			data: parsed.data,
+		};
+	}
+
+	return null;
+};