@janga/norna 0.7.9 → 0.7.10

package/examples/typography-presets/site/routes/030-text-forward/theme.md

@@ -0,0 +1,4 @@
+---
+typography:
+  preset: text-forward
+---

package/examples/typography-presets/site/routes/040-statement/route-content.md

@@ -0,0 +1,34 @@
+---
+title: Statement
+description: A stronger typography preset for short declarative content.
+navigation:
+  label: Statement
+---
+
+## Statement {#statement}
+
+This route uses the `statement` preset. Its purpose is to make short,
+declarative sections feel more direct and programmatic. It is intentionally
+stronger than the other presets and should usually be used sparingly.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id elit non mi
+porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus
+posuere velit aliquet.
+
+### Short emphasis
+
+Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean
+lacinia bibendum nulla sed consectetur. Maecenas sed diam eget risus varius
+blandit sit amet non magna.
+
+```norna-image-stack
+- image: sheepdog-grass.jpg
+  alt: A sheepdog puppy sitting in green grass.
+  caption: Sheepdog puppy in grass. Photo by Bicanski, CC0, via Pixnio.
+- image: sheepdog-wide.jpg
+  alt: A sheepdog puppy lying outdoors.
+  caption: Sheepdog puppy outdoors. Photo by Bicanski, CC0, via Pixnio.
+- image: black-pedigree.jpg
+  alt: A black dog standing in grass.
+  caption: Black pedigree dog portrait. Photo by Bicanski, CC0, via Pixnio.
+```

package/examples/typography-presets/site/routes/040-statement/theme.md

@@ -0,0 +1,4 @@
+---
+typography:
+  preset: statement
+---

package/examples/typography-presets/site/sitewide-content.md

@@ -0,0 +1,14 @@
+---
+navigation:
+  brand: Typography Presets
+footer:
+  copyrightMessage: Dog photos by Bicanski, CC0, via Pixnio.
+  buildInfo:
+    enabled: true
+    text: Built
+    dateTimeFormat:
+      locale: en-GB
+      timeZone: UTC
+      dateStyle: short
+      timeStyle: short
+---

package/examples/typography-presets/site/theme.md

@@ -1,6 +1,4 @@
 ---
-navigation:
-  brand: Typography Presets
 layout:
   density: normal
   pageWidth: 1320px
@@ -17,9 +15,12 @@ layout:
     finalSectionBottom:
       desktop: clamp(2rem, 4vw, 3.5rem)
       mobile: 2rem
-    bodyToImages:
-      desktop: 1.25rem
-      mobile: 1rem
+    headingToBlock:
+      desktop: 0.75em
+      mobile: 0.7em
+    blockGap:
+      desktop: 1.5em
+      mobile: 1.25em
     imageGap:
       desktop: clamp(1.25rem, 3vw, 2.25rem)
       mobile: 1.5rem
@@ -36,8 +37,7 @@ typography:
   preset: quiet-gallery
   rhythm: normal
 presentation:
-  backgroundColor: "#f8f5ee"
-  textColor: "#17201d"
-frame:
-  colors: presentation
+  palette: paper  # Alternatives: dark, light
+  sectionSurfaces:
+    mode: cycle
 ---

package/fixtures/basic/site/config.mjs

@@ -19,19 +19,6 @@ export default {
 			gallery: 'Images',
 		},
 	},
-	footer: {
-		copyrightMessage: '(c) Fixture Artist.',
-		buildInfo: {
-			enabled: true,
-			text: 'Built',
-			dateTimeFormat: {
-				locale: 'en-GB',
-				timeZone: 'UTC',
-				dateStyle: 'short',
-				timeStyle: 'short',
-			},
-		},
-	},
 	github: {
 		repo: 'owner/fixture-site',
 		branch: 'main',

package/fixtures/basic/site/sitewide-content.md

@@ -0,0 +1,12 @@
+---
+footer:
+  copyrightMessage: (c) Fixture Artist.
+  buildInfo:
+    enabled: true
+    text: Built
+    dateTimeFormat:
+      locale: en-GB
+      timeZone: UTC
+      dateStyle: short
+      timeStyle: short
+---

package/fixtures/basic/site/theme.md

@@ -6,6 +6,6 @@ gallery:
 typography:
   fontFamily: "Arial, 'Helvetica Neue', Helvetica, sans-serif"
   preset: quiet-gallery
-frame:
-  colors: presentation
+presentation:
+  palette: dark
 ---

package/fixtures/content-model-v2/site/content.md

@@ -2,10 +2,7 @@
 title: Content Model v2 Fixture
 description: Internal fixture for Markdown-authoritative Norna content.
 sections:
-  intro:
-    presentation:
-      typography:
-        preset: statement
+  intro: {}
   timed:
     visible:
       from: "2026-01-01"
@@ -15,7 +12,7 @@ sections:
 ## Intro {#intro}
 
 This fixture validates that Markdown defines sections and that section metadata
-is optional. It also checks [inline styles]{.highlight}.
+is optional. It also checks **inline emphasis**.
 
 ```norna-image-stack
 - image: hero.jpg

package/fixtures/content-model-v2/site/theme.md

@@ -3,7 +3,5 @@ typography:
   preset: text-forward
   rhythm: normal
 presentation:
-  inlineStyles:
-    highlight:
-      color: "#b3261e"
+  palette: dark
 ---

package/package.json

@@ -2,7 +2,7 @@
   "name": "@janga/norna",
   "description": "A command-line publishing workflow for simple static sites.",
   "type": "module",
-  "version": "0.7.9",
+  "version": "0.7.10",
   "license": "GPL-3.0-only",
   "repository": {
     "type": "git",
@@ -85,7 +85,8 @@
   },
   "dependencies": {
     "astro": "^7.1.3",
-    "embla-carousel": "^8.6.0"
+    "embla-carousel": "^8.6.0",
+    "satteri": "^0.9.1"
   },
   "devDependencies": {
     "@playwright/test": "^1.61.1"

package/scripts/check-config.mjs

@@ -1,4 +1,7 @@
-import { siteConfigLabel } from './lib/site-paths.mjs';
+import { siteConfigLabel, sitePublicLabel } from './lib/site-paths.mjs';
+import { getLogoAssets } from './lib/logo-assets.mjs';
+import { readSitewideConfig } from './lib/sitewide-config.mjs';
+import { readThemeConfig, validateRouteThemeFiles } from './lib/theme-config.mjs';
 
 const formatErrorMessage = (error) => {
 	if (error instanceof SyntaxError) {
@@ -17,6 +20,24 @@ const formatErrorMessage = (error) => {
 
 try {
 	const { projectConfig } = await import('./lib/project-config.mjs');
+	await readThemeConfig();
+	const sitewideConfig = await readSitewideConfig();
+	await validateRouteThemeFiles();
+	const logoAssets = getLogoAssets();
+
+	if (logoAssets.length > 1) {
+		throw new Error([
+			`Found multiple logo files in ${sitePublicLabel}. Keep exactly one of logo.svg, logo.png, logo.jpg, or logo.jpeg.`,
+			...logoAssets.map(({ filename }) => `- ${sitePublicLabel}/${filename}`),
+		].join('\n'));
+	}
+
+	if (logoAssets.length === 0) {
+		console.warn(`Warning: No logo file found in ${sitePublicLabel}. Norna will use sitewide navigation.brand or the homepage title as the navigation label.`);
+		console.warn(`Add exactly one of ${sitePublicLabel}/logo.svg, logo.png, logo.jpg, or logo.jpeg when the site should have a logo.`);
+	} else if (sitewideConfig.navigation?.brand) {
+		console.warn('Warning: Both sitewide navigation.brand and a logo file are configured. The logo is used; navigation.brand is only the text fallback.');
+	}
 
 	console.log('Config check passed.');
 	console.log(`Site URL: ${projectConfig.site.url}`);

package/scripts/lib/frontmatter-yaml.mjs

@@ -20,9 +20,37 @@ const stripInlineComment = (value) => {
 	return value;
 };
 
+const splitInlineList = (value) => {
+	const entries = [];
+	let entryStart = 0;
+	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) {
+			entries.push(value.slice(entryStart, index).trim());
+			entryStart = index + 1;
+		}
+	}
+
+	entries.push(value.slice(entryStart).trim());
+	return entries.filter(Boolean);
+};
+
 const parseScalar = (rawValue) => {
 	const value = stripInlineComment(rawValue.trim());
 
+	if (value.startsWith('[') && value.endsWith(']')) {
+		const listValue = value.slice(1, -1).trim();
+		return listValue ? splitInlineList(listValue).map(parseScalar) : [];
+	}
 	if (value === 'true') return true;
 	if (value === 'false') return false;
 	if (/^-?\d+(?:\.\d+)?$/.test(value)) return Number(value);

package/scripts/lib/logo-assets.mjs

@@ -0,0 +1,35 @@
+import { readdirSync } from 'node:fs';
+import { sitePublicDir, sitePublicLabel } from './site-paths.mjs';
+
+const logoFilePattern = /^logo\.(svg|png|jpe?g)$/i;
+
+export const getLogoAssets = () => {
+	let entries;
+
+	try {
+		entries = readdirSync(sitePublicDir, { withFileTypes: true });
+	} catch (error) {
+		if (error?.code === 'ENOENT') return [];
+		throw error;
+	}
+
+	return entries
+		.filter((entry) => entry.isFile() && logoFilePattern.test(entry.name))
+		.map((entry) => ({
+			filename: entry.name,
+			href: `/${entry.name}`,
+		}));
+};
+
+export const getLogoAsset = () => {
+	const assets = getLogoAssets();
+
+	if (assets.length > 1) {
+		throw new Error([
+			`Found multiple logo files in ${sitePublicLabel}. Keep exactly one of logo.svg, logo.png, logo.jpg, or logo.jpeg.`,
+			...assets.map(({ filename }) => `- ${sitePublicLabel}/${filename}`),
+		].join('\n'));
+	}
+
+	return assets[0] ?? null;
+};

package/scripts/lib/norna-markdown-blocks.mjs

@@ -588,6 +588,172 @@ export const splitNornaMarkdownBlockMarkers = (html, options = {}) => {
 
 const normalizeBlockSource = (source) => source.replace(/\r\n?/g, '\n').trim();
 
+const inlineNoteReferenceRegex = /\{note-ref\}/g;
+const inlineNoteDeclarationRegex = /^\s*\{note:\s*(.*)\}\s*$/;
+const inlineNoteDeclarationStartRegex = /\{note(?:\s*:|\s*\})/;
+
+const maskInlineCodeAndComments = (source) => source.replace(
+	/<!--[\s\S]*?-->|(`+)([\s\S]*?)\1/g,
+	(match) => match.replace(/[^\r\n]/g, ' '),
+);
+
+const countInlineNoteReferences = (line) => Array.from(line.matchAll(inlineNoteReferenceRegex)).length;
+
+const formatInlineNoteError = (message, options, line) => ({
+	blockType: 'inline-note',
+	line,
+	message: failMessage(message, { ...options, line }),
+});
+
+const getInlineNoteErrorMessage = () => 'Write the note on its own line as "{note: Your explanatory text.}".';
+
+/**
+ * Finds the deliberately small inline-note syntax while ignoring fenced and
+ * inline code. Notes are paired by position, so no user-authored IDs are
+ * needed. The caller decides whether diagnostics should be fatal.
+ */
+export const extractInlineNoteDiagnostics = (markdown, options = {}) => {
+	const lines = normalizeLines(markdown);
+	const maskedLines = maskInlineCodeAndComments(maskFencedCodeBlocks(markdown)).split('\n');
+	const notes = [];
+	const errors = [];
+	let paragraph = null;
+	let pendingParagraph = null;
+	let noteJustSeen = false;
+
+	const addError = (message, line) => errors.push(formatInlineNoteError(message, options, line));
+
+	const finishParagraph = () => {
+		if (!paragraph) return;
+		if (paragraph.referenceCount > 0) {
+			pendingParagraph = paragraph;
+		}
+		paragraph = null;
+	};
+
+	const reportMissingNote = () => {
+		if (!pendingParagraph) return;
+		addError(
+			`Paragraph on line ${pendingParagraph.referenceLine} contains "{note-ref}" but has no following "{note: ...}".`,
+			pendingParagraph.referenceLine,
+		);
+		pendingParagraph = null;
+	};
+
+	const attachNote = (noteMatch, lineNumber) => {
+		const text = noteMatch[1].trim();
+		if (!text) {
+			addError(`The note on line ${lineNumber} is empty. ${getInlineNoteErrorMessage()}`, lineNumber);
+			pendingParagraph = null;
+			return;
+		}
+
+		if (/!\[[^\]]*\]\([^)]*\)|<img\b/i.test(text)) {
+			addError('Inline notes cannot contain images. Use a Norna image block with a caption instead.', lineNumber);
+			pendingParagraph = null;
+			return;
+		}
+
+		notes.push({
+			markdown: text,
+			referenceLine: pendingParagraph.referenceLine,
+			noteLine: lineNumber,
+		});
+		pendingParagraph = null;
+		noteJustSeen = true;
+	};
+
+	for (let index = 0; index < lines.length; index += 1) {
+		const line = lines[index] ?? '';
+		const maskedLine = maskedLines[index] ?? line;
+		const lineNumber = (options.lineOffset ?? 0) + index + 1;
+		const fence = getFenceInfo(line);
+
+		if (fence && fence.length >= 3) {
+			finishParagraph();
+			reportMissingNote();
+			let closingIndex = -1;
+			for (let candidateIndex = index + 1; candidateIndex < lines.length; candidateIndex += 1) {
+				if (getFenceCloseInfo(lines[candidateIndex], fence)) {
+					closingIndex = candidateIndex;
+					break;
+				}
+			}
+			index = closingIndex === -1 ? lines.length : closingIndex;
+			noteJustSeen = false;
+			continue;
+		}
+
+		const trimmed = line.trim();
+		const maskedTrimmed = maskedLine.trim();
+		const noteMatch = trimmed.match(inlineNoteDeclarationRegex);
+		const looksLikeNoteDeclaration = inlineNoteDeclarationStartRegex.test(maskedTrimmed);
+		const referenceCount = countInlineNoteReferences(maskedLine);
+		const isHeading = /^#{1,6}(?:\s|$)/.test(trimmed);
+
+		if (!trimmed) {
+			finishParagraph();
+			noteJustSeen = false;
+			continue;
+		}
+
+		if (pendingParagraph) {
+			if (noteMatch) {
+				attachNote(noteMatch, lineNumber);
+				continue;
+			}
+
+			if (looksLikeNoteDeclaration) {
+				addError(`Invalid note syntax on line ${lineNumber}. ${getInlineNoteErrorMessage()}`, lineNumber);
+				pendingParagraph = null;
+			} else {
+				reportMissingNote();
+			}
+		}
+
+		if (noteJustSeen) {
+			addError(`Add a blank line after the note on the previous line before starting more text.`, lineNumber);
+			noteJustSeen = false;
+		}
+
+		if (noteMatch || looksLikeNoteDeclaration) {
+			addError(
+				noteMatch
+					? `A "{note: ...}" requires a preceding paragraph containing "{note-ref}".`
+					: `Invalid note syntax on line ${lineNumber}. ${getInlineNoteErrorMessage()}`,
+				lineNumber,
+			);
+			continue;
+		}
+
+		if (isHeading) {
+			if (referenceCount > 0) {
+				addError('Place "{note-ref}" in a paragraph, not in a heading.', lineNumber);
+			}
+			finishParagraph();
+			reportMissingNote();
+			continue;
+		}
+
+		if (!paragraph) {
+			paragraph = {
+				referenceCount: 0,
+				referenceLine: lineNumber,
+			};
+		}
+
+		paragraph.referenceCount += referenceCount;
+		if (referenceCount > 0 && paragraph.referenceCount > 1) {
+			addError('A paragraph may contain only one "{note-ref}".', lineNumber);
+		}
+	}
+
+	finishParagraph();
+	reportMissingNote();
+
+	return { notes, errors };
+};
+
 export const splitNornaRenderedCodeBlocks = (html, rawBlocks, options = {}) => {
 	const blocks = [];
 	const renderedCodeRegex = /<pre\b[^>]*>\s*<code\b[^>]*>([\s\S]*?)<\/code>\s*<\/pre>/g;

package/scripts/lib/presentation.mjs

@@ -1,71 +1,129 @@
 import {
 	defaultTypography,
 	resolveTypographyConfig,
-	resolveTypographyOverride,
 } from './typography.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 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 {
+		'--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 resolveThemePresentation = (theme) => {
 	const normalizedTheme = theme ?? {};
 	const normalizedThemePresentation = normalizePresentation(normalizedTheme.presentation);
+	const paletteName = normalizedThemePresentation.palette ?? 'dark';
+	const palette = getPresentationPalette(paletteName);
 
 	return {
-		backgroundColor: normalizedThemePresentation.backgroundColor ?? fallbackPresentationColors.backgroundColor,
-		textColor: normalizedThemePresentation.textColor ?? fallbackPresentationColors.textColor,
-		inlineStyles: normalizedThemePresentation.inlineStyles ?? {},
+		paletteName,
+		palette,
+		sectionSurfaces: {
+			mode: normalizedThemePresentation.sectionSurfaces?.mode ?? 'none',
+			sequence: normalizedThemePresentation.sectionSurfaces?.sequence ?? ['base', 'soft', 'emphasis'],
+		},
 		typography: resolveTypographyConfig(normalizedTheme.typography ?? defaultTypography),
 	};
 };
 
-export const resolvePagePresentation = (theme, pagePresentation) => {
+export const resolvePagePresentation = (theme) => {
 	const resolvedThemePresentation = resolveThemePresentation(theme);
-	const normalizedPagePresentation = normalizePresentation(pagePresentation);
 
-	return {
-		backgroundColor: normalizedPagePresentation.backgroundColor ?? resolvedThemePresentation.backgroundColor,
-		textColor: normalizedPagePresentation.textColor ?? resolvedThemePresentation.textColor,
-		inlineStyles: resolvedThemePresentation.inlineStyles,
-		typography: resolveTypographyOverride(
-			resolvedThemePresentation.typography,
-			normalizedPagePresentation.typography,
-		),
-	};
+	return resolvedThemePresentation;
 };
 
-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 resolveSectionSurface = (pagePresentation, sectionIndex) => {
+	const surfaceName = pagePresentation.sectionSurfaces.mode === 'cycle'
+			? pagePresentation.sectionSurfaces.sequence[sectionIndex % pagePresentation.sectionSurfaces.sequence.length]
+			: 'base';
 
-	return colors;
+	return {
+		name: surfaceName,
+		...pagePresentation.palette.surfaces[surfaceName],
+	};
 };
 
-export const resolveFrameColors = ({ theme, pagePresentation, pageFrame }) => {
-	const resolvedThemePresentation = resolveThemePresentation(theme);
-	const themeFrameColors = resolveColorSource({
-		colors: theme?.frame?.colors ?? 'presentation',
-		themeFrameColors: getColorsFromPresentation(resolvedThemePresentation),
-		pagePresentation: resolvedThemePresentation,
-	});
-
-	return resolveColorSource({
-		colors: pageFrame?.colors ?? 'theme',
-		themeFrameColors,
-		pagePresentation,
-	});
-};
+export const resolveFrameColors = ({ theme }) => resolveThemePresentation(theme).palette.frame;