@janga/norna 0.7.13 → 0.7.15

package/src/content.config.ts

@@ -1,228 +1,36 @@
 import { defineCollection } from 'astro:content';
 import { glob } from 'astro/loaders';
+import { basename } from 'node:path';
 import { pathToFileURL } from 'node:url';
-import { z } from 'astro/zod';
-import { siteDir, siteDirLabel } from '../scripts/lib/site-paths.mjs';
+import {
+	siteDir,
+	siteDirLabel,
+	siteThemePath,
+	sitewideContentPath,
+} from '../scripts/lib/site-paths.mjs';
 import { parseRouteDirectory } from '../scripts/lib/route-model.mjs';
-import { isDateOnly } from './lib/visibility';
+import {
+	siteSchema,
+	sitewideSchema,
+	themeVisualSchema,
+} from '../scripts/lib/schema-definitions.mjs';
 
 const siteEntryId = `${siteDirLabel
 	.replace(/^[./\\]+/, '')
 	.replace(/[^a-zA-Z0-9-]+/g, '-')
 	.replace(/^-+|-+$/g, '') || 'site'}-content`;
-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 themePreset = z.enum(['portfolio', 'documentation', 'project', '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.')
-	.max(3, 'Use a unitless line height of at most 3.');
-const cssLength = z.string().regex(
-	/^(?:0|(?:\d+(?:\.\d+)?|\.\d+)(?:px|rem|em|ch|lh))$/,
-	'Use a CSS length such as "0", "0.8em", "1rem", or "12px".',
-);
-const visualCssLengthUnit = String.raw`(?:px|rem|em|vw|vh|vmin|vmax|ch|%)`;
-const visualCssLengthValue = String.raw`(?:\d+(?:\.\d+)?|\.\d+)${visualCssLengthUnit}`;
-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 dateOnly = z.string()
-	.regex(/^\d{4}-\d{2}-\d{2}$/, 'Use YYYY-MM-DD format.')
-	.refine(isDateOnly, 'Use a real calendar date.');
-const visibilityWindow = z.object({
-	from: dateOnly.optional(),
-	until: dateOnly.optional(),
-}).strict().refine(
-	(value) => value.from !== undefined || value.until !== undefined,
-	'Specify from, until, or both.',
-).refine(
-	(value) => value.from === undefined || value.until === undefined || value.from < value.until,
-	'visible.until must be later than visible.from.',
-);
-const overrideResponsiveTextAlign = z.object({
-	desktop: textAlign.optional(),
-	mobile: textAlign.optional(),
-}).strict().refine(
-	(value) => value.desktop !== undefined || value.mobile !== undefined,
-	'Specify desktop, mobile, or both.',
-);
-const commonTextPresentationOverride = {
-	align: overrideResponsiveTextAlign.optional(),
-	size: textSize.optional(),
-	lineHeight: lineHeight.optional(),
-};
-const headingPresentationOverride = z.object({
-	...commonTextPresentationOverride,
-	weight: headingWeight.optional(),
-	spacingBefore: cssLength.optional(),
-	spacingAfter: cssLength.optional(),
-}).strict();
-const headingLevelsPresentationOverride = z.object({
-	h1: headingPresentationOverride.optional(),
-	h2: headingPresentationOverride.optional(),
-	h3: headingPresentationOverride.optional(),
-	h4: headingPresentationOverride.optional(),
-}).strict();
-const bodyPresentationOverride = z.object({
-	...commonTextPresentationOverride,
-	width: textWidth.optional(),
-	paragraphSpacing: cssLength.optional(),
-}).strict();
-const captionPresentationOverride = z.object({
-	...commonTextPresentationOverride,
-	spacingBefore: cssLength.optional(),
-}).strict();
-const typographyOverrides = z.object({
-	headings: headingLevelsPresentationOverride.optional(),
-	body: bodyPresentationOverride.optional(),
-	caption: captionPresentationOverride.optional(),
-}).strict();
-const themeTypography = z.object({
-	fontFamily: z.string()
-		.min(1)
-		.refine((value) => !/[\n\r;{}]/.test(value), 'Do not use semicolons, braces, or line breaks.').optional(),
-	preset: typographyPreset.optional(),
-	rhythm: spacingDensity.optional(),
-	overrides: typographyOverrides.optional(),
-}).strict().refine(
-	(value) => value.fontFamily !== undefined || value.preset !== undefined || value.rhythm !== undefined || value.overrides !== undefined,
-	'Specify fontFamily, preset, rhythm, overrides, or both.',
-);
-const responsiveCssLength = z.union([
-	visualCssLength,
-	z.object({
-		desktop: visualCssLength,
-		mobile: visualCssLength,
-	}).strict(),
-]);
-const responsivePercent = z.union([
-	z.number().positive().max(100),
-	z.object({
-		desktop: z.number().positive().max(100),
-		mobile: z.number().positive().max(100),
-	}).strict(),
-]);
-const themeLayoutSpacing = z.object({
-	blockGap: responsiveCssLength.optional(),
-	finalSectionBottom: responsiveCssLength.optional(),
-	firstSectionTop: responsiveCssLength.optional(),
-	headingToBlock: responsiveCssLength.optional(),
-	imageGap: responsiveCssLength.optional(),
-	sectionGap: responsiveCssLength.optional(),
-}).strict();
-const themeLayout = z.object({
-	density: spacingDensity.optional(),
-	pageWidth: visualCssLength.optional(),
-	gutter: responsiveCssLength.optional(),
-	spacing: themeLayoutSpacing.optional(),
-}).strict();
-const themeGallery = z.object({
-	width: visualCssLength.optional(),
-	maxAvailableWidthPercent: responsivePercent.optional(),
-	maxAvailableHeightPercent: responsivePercent.optional(),
-}).strict();
-const themePresentation = z.object({
-	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(),
-	label: z.string().optional(),
-}).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(),
-}).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(),
-	sections: z.record(z.string().regex(/^[a-z0-9-]+$/), sectionMetadata).optional().default({}),
-});
-
-export const themeVisualSchema = z.object({
-	preset: themePreset.optional(),
-	layout: themeLayout.optional(),
-	gallery: themeGallery.optional(),
-	typography: themeTypography.optional(),
-	presentation: themePresentation.optional(),
-}).strict();
-
 const siteThemeSchema = themeVisualSchema;
 
-const sitewideSchema = z.object({
-	navigation: themeNavigation.optional(),
-	banners,
-	footer: sitewideFooter.optional(),
-}).strict();
-
 const site = defineCollection({
 	loader: glob({
-		pattern: ['content.md', 'routes/*/route-content.md'],
+		pattern: ['content.md', 'routes/*/content.md'],
 		base: pathToFileURL(siteDir),
 		generateId: ({ entry }) => {
 			if (entry === 'content.md') {
 				return siteEntryId;
 			}
 
-			const routeDirectory = entry.match(/^routes\/([^/]+)\/route-content\.md$/)?.[1];
+			const routeDirectory = entry.match(/^routes\/([^/]+)\/content\.md$/)?.[1];
 			return routeDirectory
 				? `${siteEntryId.replace(/-content$/, '')}-route-${parseRouteDirectory(routeDirectory, `route directory routes/${routeDirectory}`).routeDirectory}`
 				: entry.replace(/[^a-zA-Z0-9-]+/g, '-').replace(/^-+|-+$/g, '');
@@ -233,16 +41,16 @@ const site = defineCollection({
 
 const theme = defineCollection({
 	loader: glob({
-		pattern: 'theme.md',
+		pattern: basename(siteThemePath),
 		base: pathToFileURL(siteDir),
-		generateId: ({ entry }) => entry,
+		generateId: () => `${siteEntryId.replace(/-content$/, '')}-theme`,
 	}),
 	schema: siteThemeSchema,
 });
 
 const sitewide = defineCollection({
 	loader: glob({
-		pattern: 'sitewide-content.md',
+		pattern: basename(sitewideContentPath),
 		base: pathToFileURL(siteDir),
 		generateId: () => `${siteEntryId.replace(/-content$/, '')}-sitewide`,
 	}),

package/src/layouts/BaseLayout.astro

@@ -30,7 +30,7 @@ type VisualTheme = {
 			finalSectionBottom: { desktop: string; mobile: string };
 		};
 	};
-	gallery: {
+	images: {
 		width: string;
 		maxAvailableWidthPercent: { desktop: number; mobile: number };
 		maxAvailableHeightPercent: { desktop: number; mobile: number };
@@ -73,7 +73,7 @@ const {
 const documentTitle = title;
 const canonicalUrl = new URL(withBasePath(projectConfig.site.basePath, pathname), projectConfig.site.url).href;
 const iconLinks = getIconLinks();
-const scrollBehavior = projectConfig.navigation.scrollBehavior === 'browser-smooth' ? 'smooth' : 'auto';
+const scrollBehavior = projectConfig.navigation.scrollBehavior === 'smooth' ? 'smooth' : 'auto';
 const formatPercent = (value: number) => `${value}%`;
 const formatViewportHeightPercent = (value: number) => `${value}svh`;
 const layoutSpacing = visualTheme.layout.spacing;
@@ -90,17 +90,17 @@ const documentStyle = [
 	`--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-image-item-desktop: ${layoutSpacing.imageGap.desktop}`,
+	`--space-image-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: ${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)}`,
+	`--image-width: ${visualTheme.images.width}`,
+	`--image-max-available-width-desktop: ${formatPercent(visualTheme.images.maxAvailableWidthPercent.desktop)}`,
+	`--image-max-available-width-mobile: ${formatPercent(visualTheme.images.maxAvailableWidthPercent.mobile)}`,
+	`--image-max-height-desktop: ${formatViewportHeightPercent(visualTheme.images.maxAvailableHeightPercent.desktop)}`,
+	`--image-max-height-mobile: ${formatViewportHeightPercent(visualTheme.images.maxAvailableHeightPercent.mobile)}`,
 ].join('; ');
 const { buildInfo, copyrightMessage } = footer ?? {};
 const showBuildInfo = Boolean(buildInfo?.enabled);

package/src/lib/{galleryImages.ts → imagePresentation.ts}

@@ -1,6 +1,6 @@
 import { getGeneratedImage } from './generatedImages';
 
-export type GalleryImage = {
+export type ManagedImage = {
 	image: string;
 	src?: string;
 	alt?: string;
@@ -16,24 +16,24 @@ const hasDimensions = (image: ReturnType<typeof getGeneratedImage>): image is Ge
 	Boolean(image) && Number.isFinite(image.width) && Number.isFinite(image.height)
 );
 
-export const getCaptionId = (image: GalleryImage, itemIndex: number, imageIndex = 0) => {
+export const getCaptionId = (image: ManagedImage, itemIndex: number, imageIndex = 0) => {
 	const source = (image.src ?? image.image)
 		.toLowerCase()
 		.replace(/[^a-z0-9]+/g, '-')
 		.replace(/^-|-$/g, '');
 
-	return `gallery-caption-${source}-${itemIndex}-${imageIndex}`;
+	return `image-caption-${source}-${itemIndex}-${imageIndex}`;
 };
 
-export const getGalleryImageSizes = (maxAvailableWidthPercent: { desktop: number; mobile: number }) => [
+export const getManagedImageSizes = (maxAvailableWidthPercent: { desktop: number; mobile: number }) => [
 	`(max-width: 700px) ${maxAvailableWidthPercent.mobile}vw`,
 	`${maxAvailableWidthPercent.desktop}vw`,
 ].join(', ');
 
-export const getImageClass = (image: GalleryImage) => {
+export const getImageClass = (image: ManagedImage) => {
 	const generatedImage = getGeneratedImage(image.src ?? image.image);
 	return hasDimensions(generatedImage) && generatedImage.width > generatedImage.height
-		? 'gallery-image-landscape'
+		? 'managed-image-landscape'
 		: undefined;
 };
 
@@ -43,7 +43,7 @@ export const getImageLoadingProps = (isPriority: boolean) => ({
 	loading: isPriority ? 'eager' as const : 'lazy' as const,
 });
 
-export const getCarouselAspectRatio = (images: GalleryImage[]) => {
+export const getCarouselAspectRatio = (images: ManagedImage[]) => {
 	const ratios = images
 		.map((image) => getGeneratedImage(image.src ?? image.image))
 		.filter(hasDimensions)

package/src/lib/routeThemes.ts

@@ -1,13 +1,10 @@
 import { readFile } from 'node:fs/promises';
 import path from 'node:path';
-import { parseYamlMapping } from '../../scripts/lib/frontmatter-yaml.mjs';
 import {
-	splitSiteFile,
-	validateFrontmatterIndentation,
-	validateRouteThemeFrontmatterStructure,
+	validateRouteThemeYamlStructure,
 } from '../../scripts/lib/site-content.mjs';
 import { siteRoutesDir, siteRoutesLabel, sitewideContentLabel } from '../../scripts/lib/site-paths.mjs';
-import { themeVisualSchema } from '../content.config';
+import { parseYamlConfig } from '../../scripts/lib/yaml-config.mjs';
 
 type RouteTheme = {
 	id: string;
@@ -20,40 +17,23 @@ export const getRouteTheme = async (routeDirectory: string | null): Promise<Rout
 	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 themePath = path.join(siteRoutesDir, ...themeSegments, 'theme.yaml');
 		const source = await readFile(themePath, 'utf8').catch((error) => {
 			if (error?.code === 'ENOENT') return null;
 			throw error;
 		});
 		if (!source) continue;
+		const themeLabel = `${siteRoutesLabel}/${themeSegments.join('/')}/theme.yaml`;
 
-		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);
+		const data = parseYamlConfig(source, themeLabel, {
+			validateStructure: validateRouteThemeYamlStructure,
+		});
 		if (Object.hasOwn(data, 'navigation')) {
-			throw new Error(`${themeLabel} may not define navigation. Brand and logo belong in ${sitewideContentLabel}.`);
+			throw new Error(`${themeLabel} may not define navigation. The site label and logo settings 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,
+			data,
 		};
 	}
 

package/src/lib/sectionContent.ts

@@ -12,7 +12,7 @@ import type { SitePage } from './sitePages';
 
 type SiteSectionMetadataMap = CollectionEntry<'site'>['data']['sections'];
 type SiteSectionMetadata = SiteSectionMetadataMap[string];
-type GalleryImage = {
+type ManagedImage = {
 	image: string;
 	src: string;
 	alt?: string;
@@ -38,8 +38,8 @@ type InlineNote = {
 };
 type SectionContentBlock =
 	| { type: 'html'; html: string }
-	| { type: 'image-stack'; images: GalleryImage[] }
-	| { type: 'image-carousel'; images: GalleryImage[] }
+	| { type: 'image-stack'; images: ManagedImage[] }
+	| { type: 'image-carousel'; images: ManagedImage[] }
 	| { type: 'card-list'; layout: CardListLayout; flow: CardListFlow; size: CardListSize; width: CardListWidth; cards: CardListItem[] }
 	| { type: 'note'; html: string; number?: number; id?: string; referenceId?: string };
 export type ResolvedSection = SiteSectionMetadata & {

package/src/lib/sitePublicAssets.ts

@@ -1,6 +1,7 @@
 import { existsSync } from 'node:fs';
 import path from 'node:path';
 import { sitePublicDir } from '../../scripts/lib/site-paths.mjs';
+import { browserIconAssetDefinitions } from '../../scripts/lib/public-asset-conventions.mjs';
 import projectConfig from '../../scripts/lib/project-config.mjs';
 export { getLogoAsset } from '../../scripts/lib/logo-assets.mjs';
 import { withBasePath } from './basePath';
@@ -12,27 +13,10 @@ type IconLink = {
 	sizes?: string;
 };
 
-const faviconCandidates: IconLink[] = [
-	{
-		rel: 'icon',
-		href: '/favicon.svg',
-		type: 'image/svg+xml',
-	},
-	{
-		rel: 'icon',
-		href: '/favicon.ico',
-		sizes: 'any',
-	},
-	{
-		rel: 'icon',
-		href: '/favicon.png',
-		type: 'image/png',
-	},
-	{
-		rel: 'apple-touch-icon',
-		href: '/apple-touch-icon.png',
-	},
-];
+const faviconCandidates: IconLink[] = browserIconAssetDefinitions.map(({ filename, ...definition }) => ({
+	...definition,
+	href: `/${filename}`,
+}));
 
 const publicAssetExists = (href: string) => {
 	const relativePath = href.replace(/^\//, '');