@janga/norna 0.7.18 → 0.7.22

package/scripts/sync-content-sections.mjs

@@ -1,18 +1,8 @@
-import { execFile } from 'node:child_process';
 import { mkdir, rename, stat } from 'node:fs/promises';
 import { createInterface } from 'node:readline/promises';
 import { stdin as input, stdout as output } from 'node:process';
 import path from 'node:path';
-import { promisify } from 'node:util';
 import {
-	extractInlineNoteDiagnostics,
-	extractMarkdownImageReferences,
-	extractNornaMarkdownBlockDiagnostics,
-	getNornaBlockImageReferences,
-} from './lib/norna-markdown-blocks.mjs';
-import {
-	getBodySections,
-	getContentFiles,
 	getImageCandidatesByName,
 	getDeprecatedInlineStyleReferences,
 	readSiteFile,
@@ -22,16 +12,14 @@ import {
 	validateFrontmatterIndentation,
 	validateThemeYamlStructure,
 } from './lib/site-content.mjs';
-import { getHeadingIdentifierIssues } from './lib/heading-ids.mjs';
+import { getSiteStructure } from './lib/site-structure.mjs';
 import { readImageDimensions } from './lib/image-dimensions.mjs';
+import { parsePageMarkdown } from './lib/page-markdown.mjs';
 import {
 	siteThemeLabel,
 	siteThemePath,
-	siteProjectRoot,
 } from './lib/site-paths.mjs';
 
-const execFileAsync = promisify(execFile);
-
 const args = new Set(process.argv.slice(2));
 const shouldWrite = args.has('--write');
 const shouldCheck = args.has('--check') || !shouldWrite;
@@ -46,7 +34,7 @@ const addIssue = ({ severity, message, fix, sectionId, sectionLabel }) => {
 
 const hasErrors = () => issues.some((issue) => issue.severity === 'error');
 
-const formatSectionLabel = (contentFile, section) => `${contentFile.contentLabel} [${section.id ?? section.heading}]`;
+const formatSectionLabel = (contentFile, section) => `${contentFile.contentLabel} [${section.id ?? section.title}]`;
 
 const addContentIssue = (contentFile, issue) => addIssue({
 	...issue,
@@ -56,11 +44,18 @@ const addContentIssue = (contentFile, issue) => addIssue({
 
 const addSectionIssue = (contentFile, section, issue) => addIssue({
 	...issue,
-	sectionId: issue.sectionId ?? `${contentFile.contentLabel}:${section.id ?? section.heading}`,
+	sectionId: issue.sectionId ?? `${contentFile.contentLabel}:${section.id ?? section.title}`,
 	sectionLabel: issue.sectionLabel ?? formatSectionLabel(contentFile, section),
 });
 
-const promptForWrite = async () => {
+const getMovePlanLines = (moves) => [
+	'Planned image moves:',
+	...moves.map((move) => `- ${getCandidateLabel({ contentFile: move.sourceContentFile, imagePath: move.from })} -> ${getExpectedImageLabel(move.contentFile, move.imageName)}`),
+];
+
+const promptForWrite = async (moves) => {
+	console.log(getMovePlanLines(moves).join('\n'));
+
 	if (skipPrompt) return true;
 	if (!process.stdin.isTTY) return false;
 
@@ -203,33 +198,6 @@ const addGlobalImageCandidate = (globalImageCandidatesByName, imageName, candida
 	globalImageCandidatesByName.get(imageName).push(candidate);
 };
 
-const assertCleanGitForCrossRootSync = async (moves) => {
-	if (!moves.some((move) => move.crossRoot)) return;
-
-	let stdout = '';
-	try {
-		({ stdout } = await execFileAsync('git', ['status', '--short'], {
-			cwd: siteProjectRoot,
-			maxBuffer: 1024 * 1024,
-		}));
-	} catch (error) {
-		addIssue({
-			severity: 'error',
-			message: 'Cross-page content sync requires a clean git working tree, but git status could not be checked.',
-			fix: 'Run content:sync inside a Git worktree, or move cross-page image files manually.',
-		});
-		return;
-	}
-
-	if (!stdout.trim()) return;
-
-	addIssue({
-		severity: 'error',
-		message: 'Cross-page content sync requires a clean git working tree before moving files between page image roots.',
-		fix: `Commit or stash your current changes, then run content:sync again. Current changes:\n${stdout.trim()}`,
-	});
-};
-
 const addConflictingMoveIssues = () => {
 	const movesBySource = new Map();
 	const movesByDestination = new Map();
@@ -332,7 +300,6 @@ const validateImageReference = async (
 			contentFile,
 			sourceContentFile: sourceCandidate.contentFile,
 			section,
-			crossRoot: sourceCandidate.contentFile !== contentFile,
 		});
 	}
 	referencedImagePaths.add(sourcePath);
@@ -343,7 +310,7 @@ const validateImageReference = async (
 			message: `Image "${imageName}" is used here but is located in ${getCandidateLabel(sourceCandidate)}.`,
 			fix: sourceCandidate.contentFile === contentFile
 				? 'Run norna content:sync to move it directly into the current page image root.'
-				: `Run norna content:sync to move it from ${getRootLabel(sourceCandidate.contentFile)} to ${getRootLabel(contentFile)}. Cross-page sync requires a clean git working tree when files are moved.`,
+				: `Run norna content:sync to move it from ${getRootLabel(sourceCandidate.contentFile)} to ${getRootLabel(contentFile)}.`,
 		});
 	}
 
@@ -400,7 +367,16 @@ try {
 	}
 }
 
-const contentFiles = await getContentFiles();
+const siteStructure = await getSiteStructure();
+const contentFiles = siteStructure.contentFiles;
+for (const warning of siteStructure.warnings) {
+	addIssue({
+		severity: 'warning',
+		message: warning.message,
+		sectionId: warning.label,
+		sectionLabel: warning.label,
+	});
+}
 const allImageFiles = [];
 const contentFileContexts = [];
 const globalImageCandidatesByName = new Map();
@@ -412,8 +388,16 @@ for (const contentFile of contentFiles) {
 	validateFrontmatterIndentation(frontmatter, addIssue);
 	validateContentFrontmatterStructure(frontmatter, addIssue);
 
-	const { headings, pageHeadings, prelude, sections } = await getBodySections(body);
-	const headingIdentifierIssues = getHeadingIdentifierIssues(headings);
+	const page = await parsePageMarkdown(body, {
+		label: contentFile.contentLabel,
+		lineOffset: bodyLineOffset,
+	});
+	const {
+		headingIssues: headingIdentifierIssues,
+		pageHeadings,
+		prelude,
+		regions: sections,
+	} = page;
 	const invalidHeadingLines = new Set();
 	for (const issue of headingIdentifierIssues) {
 		invalidHeadingLines.add(issue.heading.line);
@@ -457,10 +441,10 @@ for (const contentFile of contentFiles) {
 		});
 	}
 
-	if (sections[0] && !sections[0].isPageTitle) {
+	if (sections[0] && sections[0].kind !== 'page-intro') {
 		addContentIssue(contentFile, {
 			severity: 'error',
-			message: `The first content heading is "${sections[0].heading}", but a Norna page must start with its H1 title.`,
+			message: `The first content heading is "${sections[0].title}", but a Norna page must start with its H1 title.`,
 			fix: 'Add the page title first, for example "# About".',
 		});
 	}
@@ -474,18 +458,18 @@ for (const contentFile of contentFiles) {
 	}
 
 	for (const section of sections) {
-		if (section.isPageTitle) {
+		if (section.kind === 'page-intro') {
 			if (
 				pageHeadings.length === 1
 				&& sections[0] === section
-				&& !invalidHeadingLines.has(section.line)
+				&& !invalidHeadingLines.has(section.bodyLine)
 			) {
 				validSections.add(section);
 			}
 			continue;
 		}
 
-		if (invalidHeadingLines.has(section.line) || !section.id) continue;
+		if (invalidHeadingLines.has(section.bodyLine) || !section.id) continue;
 
 		if (sectionsById.has(section.id)) {
 			addSectionIssue(contentFile, section, {
@@ -503,24 +487,17 @@ for (const contentFile of contentFiles) {
 	for (const section of sections) {
 		if (!validSections.has(section)) continue;
 
-		const blockResults = extractNornaMarkdownBlockDiagnostics(section.text, {
-			label: contentFile.contentLabel,
-			lineOffset: bodyLineOffset + section.line - 1,
-		});
+		const blockResults = { blocks: section.blocks, errors: section.blockErrors };
 		blockResultsBySection.set(section, blockResults);
 
-		const inlineNoteResults = extractInlineNoteDiagnostics(section.text, {
-			label: contentFile.contentLabel,
-			lineOffset: bodyLineOffset + section.line - 1,
-		});
-		for (const error of inlineNoteResults.errors) {
+		for (const error of section.noteErrors) {
 			addSectionIssue(contentFile, section, {
 				severity: 'error',
 				message: error.message,
 			});
 		}
 
-		for (const reference of getNornaBlockImageReferences(blockResults.blocks)) {
+		for (const reference of section.managedImages) {
 			const expectedPath = getExpectedImagePath(contentFile, reference.image);
 			addExpectedReference(globalExpectedReferencesByPath, expectedPath, { contentFile, section, reference });
 		}
@@ -555,8 +532,7 @@ for (const context of contentFileContexts) {
 	for (const section of sections) {
 		if (!validSections.has(section)) continue;
 
-		const markdownImages = extractMarkdownImageReferences(section.text);
-		for (const reference of markdownImages) {
+		for (const reference of section.markdownImages) {
 			addSectionIssue(contentFile, section, {
 				severity: 'warning',
 				message: `Markdown image "${reference.target}" references a local image that is not managed by Norna.`,
@@ -583,7 +559,7 @@ for (const context of contentFileContexts) {
 		}
 
 		const sourcePathsByImage = new Map();
-		for (const reference of getNornaBlockImageReferences(blocks)) {
+		for (const reference of section.managedImages) {
 			const sourcePath = await validateImageReference(
 				contentFile,
 				section,
@@ -609,10 +585,6 @@ const unreferencedImages = allImageFiles
 
 addConflictingMoveIssues();
 
-if (shouldWrite) {
-	await assertCleanGitForCrossRootSync(imageMoves);
-}
-
 if (hasErrors()) {
 	printReport(shouldWrite ? 'Content sync failed.' : 'Content check failed.', unreferencedImages);
 	process.exit(1);
@@ -631,14 +603,53 @@ if (imageMoves.length === 0) {
 	process.exit(0);
 }
 
-const canWrite = await promptForWrite();
+const canWrite = await promptForWrite(imageMoves);
 if (!canWrite) {
 	console.log('Aborted. No file was changed.');
 	process.exit(1);
 }
 
-for (const move of imageMoves) {
-	await mkdir(path.dirname(move.to), { recursive: true });
-	await rename(move.from, move.to);
-	console.log(`Moved image "${move.imageName}" to ${move.contentFile.imagesLabel}/.`);
+const completedMoves = [];
+for (const [index, move] of imageMoves.entries()) {
+	try {
+		await mkdir(path.dirname(move.to), { recursive: true });
+		await rename(move.from, move.to);
+		completedMoves.push(move);
+		console.log(`Moved image "${move.imageName}" to ${move.contentFile.imagesLabel}/.`);
+	} catch (error) {
+		const sourceLabel = getCandidateLabel({ contentFile: move.sourceContentFile, imagePath: move.from });
+		const destinationLabel = getExpectedImageLabel(move.contentFile, move.imageName);
+		const remainingMoves = imageMoves.slice(index);
+		const lines = [
+			'',
+			`Content sync stopped after ${completedMoves.length} of ${imageMoves.length} image moves.`,
+		];
+
+		if (error?.code === 'EXDEV') {
+			lines.push(
+				`Cannot move "${move.imageName}" because the source and destination are on different filesystems.`,
+				`Move it manually from ${sourceLabel} to ${destinationLabel}.`,
+			);
+		} else {
+			lines.push(
+				`Could not move "${move.imageName}" from ${sourceLabel} to ${destinationLabel}.`,
+				`Filesystem error${error?.code ? ` (${error.code})` : ''}: ${error?.message ?? String(error)}`,
+			);
+		}
+
+		if (completedMoves.length > 0) {
+			lines.push('', 'Completed moves:', ...getMovePlanLines(completedMoves).slice(1));
+		}
+
+		lines.push(
+			'',
+			'Remaining moves:',
+			...getMovePlanLines(remainingMoves).slice(1),
+			'',
+			'Fix the reported filesystem problem, then run content:sync again. Already completed moves will be kept.',
+		);
+
+		console.error(lines.join('\n'));
+		process.exit(1);
+	}
 }

package/src/components/DisplaySettings.astro

@@ -0,0 +1,107 @@
+---
+import projectConfig from '../../scripts/lib/project-config.mjs';
+
+type Appearance = 'system' | 'light' | 'dark';
+type ReadingWidth = 'narrow' | 'standard' | 'wide';
+
+interface Props {
+	controls: {
+		appearance: boolean;
+		readingWidth: boolean;
+		focusReading: boolean;
+	};
+	defaults: {
+		appearance: Appearance;
+		readingWidth: ReadingWidth;
+		focusReading: 'off' | 'on';
+	};
+}
+
+const { controls, defaults } = Astro.props;
+const labels = projectConfig.locale.labels;
+const appearanceOptions = [
+	{ value: 'system', label: labels.colorModeSystem },
+	{ value: 'light', label: labels.colorModeLight },
+	{ value: 'dark', label: labels.colorModeDark },
+] as const;
+const widthOptions = [
+	{ value: 'narrow', label: labels.readingWidthNarrow },
+	{ value: 'standard', label: labels.readingWidthStandard },
+	{ value: 'wide', label: labels.readingWidthWide },
+] as const;
+---
+
+<details class="display-settings" data-display-settings>
+	<summary aria-label={labels.displaySettings}>
+		<svg class="display-settings-trigger-icon" aria-hidden="true" viewBox="0 0 24 24">
+			<path d="M4 21v-7"></path>
+			<path d="M4 10V3"></path>
+			<path d="M12 21v-9"></path>
+			<path d="M12 8V3"></path>
+			<path d="M20 21v-5"></path>
+			<path d="M20 12V3"></path>
+			<path d="M1 14h6"></path>
+			<path d="M9 8h6"></path>
+			<path d="M17 16h6"></path>
+		</svg>
+		<span class="display-settings-focus-status" aria-hidden="true">{labels.focusReading}</span>
+	</summary>
+	<form class="display-settings-panel">
+		<p class="display-settings-title">{labels.displaySettings}</p>
+
+		{controls.appearance && (
+			<fieldset>
+				<legend>{labels.colorMode}</legend>
+				<div class="display-settings-segmented">
+					{appearanceOptions.map((option) => (
+						<label>
+							<input
+								type="radio"
+								name="appearance"
+								value={option.value}
+								checked={defaults.appearance === option.value}
+								data-reader-appearance
+							/>
+							<span>{option.label}</span>
+						</label>
+					))}
+				</div>
+			</fieldset>
+		)}
+
+		{controls.readingWidth && (
+			<fieldset>
+				<legend>{labels.readingWidth}</legend>
+				<div class="display-settings-segmented">
+					{widthOptions.map((option) => (
+						<label>
+							<input
+								type="radio"
+								name="reading-width"
+								value={option.value}
+								checked={defaults.readingWidth === option.value}
+								data-reader-width
+							/>
+							<span>{option.label}</span>
+						</label>
+					))}
+				</div>
+			</fieldset>
+		)}
+
+		{controls.focusReading && (
+			<label class="display-settings-toggle">
+				<input
+					type="checkbox"
+					checked={defaults.focusReading === 'on'}
+					data-reader-focus
+				/>
+				<span>{labels.focusReading}</span>
+			</label>
+		)}
+
+		<button class="display-settings-reset" type="button" data-reader-reset>
+			{labels.resetDisplaySettings}
+		</button>
+	</form>
+</details>

package/src/components/ImageCarousel.astro

@@ -17,14 +17,28 @@ interface Props {
 		desktop: number;
 		mobile: number;
 	};
+	maxAvailableHeightPercent: {
+		desktop: number;
+		mobile: number;
+	};
 	priorityFirstImage?: boolean;
 }
 
-const { title, images, maxAvailableWidthPercent, priorityFirstImage = false } = Astro.props;
+const {
+	title,
+	images,
+	maxAvailableWidthPercent,
+	maxAvailableHeightPercent,
+	priorityFirstImage = false,
+} = Astro.props;
 const managedImageSizes = getManagedImageSizes(maxAvailableWidthPercent);
 const carouselAspectRatio = getCarouselAspectRatio(images);
 const carouselStyle = carouselAspectRatio
-	? `--image-carousel-aspect-ratio: ${carouselAspectRatio}`
+	? [
+		`--image-carousel-aspect-ratio: ${carouselAspectRatio}`,
+		`--image-carousel-width-from-height-desktop: ${carouselAspectRatio * maxAvailableHeightPercent.desktop}svh`,
+		`--image-carousel-width-from-height-mobile: ${carouselAspectRatio * maxAvailableHeightPercent.mobile}svh`,
+	].join('; ')
 	: undefined;
 ---
 
@@ -35,7 +49,7 @@ const carouselStyle = carouselAspectRatio
 		tabindex="0"
 		role="group"
 		aria-roledescription="carousel"
-		aria-label={`${title}, bildkarusell`}
+		aria-label={`${title}, ${projectConfig.locale.labels.imageCarousel}`}
 		style={carouselStyle}
 	>
 		<div class="image-carousel-stage">
@@ -64,19 +78,23 @@ const carouselStyle = carouselAspectRatio
 				class="image-carousel-button image-carousel-button-previous"
 				type="button"
 				data-carousel-previous
-				aria-label="Föregående bild"
-				title="Föregående bild"
+				aria-label={projectConfig.locale.labels.previousImage}
+				title={projectConfig.locale.labels.previousImage}
 			>
-				<span aria-hidden="true">‹</span>
+				<svg aria-hidden="true" viewBox="0 0 24 24">
+					<path d="m15 18-6-6 6-6"></path>
+				</svg>
 			</button>
 			<button
 				class="image-carousel-button image-carousel-button-next"
 				type="button"
 				data-carousel-next
-				aria-label="Nästa bild"
-				title="Nästa bild"
+				aria-label={projectConfig.locale.labels.nextImage}
+				title={projectConfig.locale.labels.nextImage}
 			>
-				<span aria-hidden="true">›</span>
+				<svg aria-hidden="true" viewBox="0 0 24 24">
+					<path d="m9 18 6-6-6-6"></path>
+				</svg>
 			</button>
 			<output class="image-carousel-position" data-carousel-position aria-live="polite">
 				1 / {images.length}
@@ -132,6 +150,9 @@ const carouselStyle = carouselAspectRatio
 			containScroll: false,
 			loop: true,
 		});
+		const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
+		const scrollPrevious = () => embla.scrollPrev(reducedMotion.matches);
+		const scrollNext = () => embla.scrollNext(reducedMotion.matches);
 
 		const update = () => {
 			const activeIndex = embla.selectedScrollSnap();
@@ -152,11 +173,11 @@ const carouselStyle = carouselAspectRatio
 
 		previous.addEventListener('click', () => {
 			showControls();
-			embla.scrollPrev();
+			scrollPrevious();
 		});
 		next.addEventListener('click', () => {
 			showControls();
-			embla.scrollNext();
+			scrollNext();
 		});
 		carousel.addEventListener('focusin', showControls);
 		carousel.addEventListener('pointerdown', showControls);
@@ -164,12 +185,12 @@ const carouselStyle = carouselAspectRatio
 			if (event.key === 'ArrowLeft') {
 				event.preventDefault();
 				showControls();
-				embla.scrollPrev();
+				scrollPrevious();
 			}
 			if (event.key === 'ArrowRight') {
 				event.preventDefault();
 				showControls();
-				embla.scrollNext();
+				scrollNext();
 			}
 		});
 		embla.on('select', () => {