@janga/norna 0.7.6 → 0.7.7

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

@@ -0,0 +1,9 @@
+---
+typography:
+  preset: text-forward
+  rhythm: normal
+presentation:
+  inlineStyles:
+    highlight:
+      color: "#b3261e"
+---

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.6",
+  "version": "0.7.7",
   "license": "GPL-3.0-only",
   "repository": {
     "type": "git",
@@ -62,10 +62,11 @@
     "deploy:watch": "node bin/norna.mjs deploy:watch",
     "doctor": "node bin/norna.mjs doctor",
     "demo:build": "node bin/norna.mjs --site-dir examples/dog-gallery/site build",
-    "test": "npm run test:route-model && npm run test:content-check && npm run test:site-public && npm run test:cli-discovery && npm run test:engine-commands && npm run test:ci-lockfile && npm run test:temporary-visibility && npm run test:fixture:build && npm run package:check",
+    "test": "npm run test:route-model && npm run test:content-check && npm run test:content-model-v2 && npm run test:site-public && npm run test:cli-discovery && npm run test:engine-commands && npm run test:ci-lockfile && npm run test:temporary-visibility && npm run test:fixture:build && npm run package:check",
     "test:fixture:build": "node bin/norna.mjs --site-dir fixtures/basic/site build",
     "test:route-model": "node scripts/test-route-model.mjs",
     "test:content-check": "node scripts/test-content-check.mjs",
+    "test:content-model-v2": "node scripts/test-content-model-v2.mjs",
     "test:site-public": "node scripts/test-site-public.mjs",
     "test:cli-discovery": "node scripts/test-cli-discovery.mjs",
     "test:engine-commands": "node scripts/test-engine-commands.mjs",

package/scripts/deploy-site.mjs

@@ -2,12 +2,16 @@ import { execFile, spawn } from 'node:child_process';
 import path from 'node:path';
 import { promisify } from 'node:util';
 import {
-	getFrontmatterSections,
+	getBodySections,
 	getContentFiles,
 	readSiteFile,
 	supportedImageExtensions,
 	toPosixPath,
 } from './lib/site-content.mjs';
+import {
+	extractNornaMarkdownBlocks,
+	getNornaBlockImageReferences,
+} from './lib/norna-markdown-blocks.mjs';
 import { projectConfig } from './lib/project-config.mjs';
 import {
 	engineRoot,
@@ -144,10 +148,13 @@ const getExpectedImagePaths = async () => {
 	const imagePaths = new Set();
 
 	for (const contentFile of contentFiles) {
-		const { frontmatter } = await readSiteFile(contentFile.contentPath, contentFile.contentLabel);
+		const { body } = await readSiteFile(contentFile.contentPath, contentFile.contentLabel);
+
+		for (const section of getBodySections(body).sections) {
+			if (!section.id) continue;
 
-		for (const section of getFrontmatterSections(frontmatter)) {
-			for (const image of section.images) {
+			const blocks = extractNornaMarkdownBlocks(section.text, { label: contentFile.contentLabel });
+			for (const { image } of getNornaBlockImageReferences(blocks)) {
 				if (image.includes('/') || image.includes('\\')) continue;
 				if (!supportedImageExtensions.has(path.extname(image).toLowerCase())) continue;
 

package/scripts/dev-local.mjs

@@ -37,6 +37,11 @@ const syncSitePublic = async () => execFileAsync(process.execPath, [path.join(en
 	maxBuffer: 1024 * 1024 * 10,
 });
 
+const generateImages = async () => execFileAsync(process.execPath, [path.join(engineRoot, 'scripts', 'generate-images.mjs')], {
+	cwd: siteProjectRoot,
+	maxBuffer: 1024 * 1024 * 10,
+});
+
 const getPortPids = async () => {
 	try {
 		const { stdout } = await execFileAsync('lsof', ['-nP', `-iTCP:${port}`, '-sTCP:LISTEN', '-t']);
@@ -266,6 +271,7 @@ const startServer = async ({ host = localHost, open = true, killBlockingPort = f
 	}
 
 	await syncSitePublic();
+	await generateImages();
 	await runAstroInherit(['dev', '--background', '--host', host, '--port', String(port)]);
 	await waitForServer();
 

package/scripts/generate-images.mjs

@@ -1,20 +1,28 @@
 import { execFile } from 'node:child_process';
 import { createHash } from 'node:crypto';
-import { mkdir, readdir, readFile, rm, stat, writeFile } from 'node:fs/promises';
+import { copyFile, mkdir, readdir, readFile, rm, stat, writeFile } from 'node:fs/promises';
 import path from 'node:path';
 import { promisify } from 'node:util';
 import {
-	getFrontmatterSections,
+	getBodySections,
 	getContentFiles,
-	getImageIndex,
 	readSiteFile,
+	rasterImageExtensions,
+	staticImageExtensions,
 	supportedImageExtensions,
+	toPosixPath,
 } from './lib/site-content.mjs';
+import { readImageDimensions } from './lib/image-dimensions.mjs';
+import {
+	extractNornaMarkdownBlocks,
+	getNornaBlockImageReferences,
+} from './lib/norna-markdown-blocks.mjs';
 import {
 	astroPublicDir,
 	generatedImagesDir,
 	generatedImagesManifestPath,
 	originalImagesDir,
+	siteDir,
 	siteImagesDir,
 } from './lib/site-paths.mjs';
 
@@ -87,23 +95,40 @@ const getGeneratedPath = (sourcePath, sourceHash, width) => {
 	return path.join(generatedImagesDir, parsed.dir, `${parsed.name}-${getSourceHashSlug(sourceHash)}-${width}.webp`);
 };
 
+const getOriginalPath = (sourceKey, sourceHash) => {
+	const parsed = path.parse(sourceKey);
+	return path.join(originalImagesDir, parsed.dir, `${parsed.name}-${getSourceHashSlug(sourceHash)}${parsed.ext}`);
+};
+
 const fail = (message) => {
 	throw new Error(message);
 };
 
+const getImageSourceKey = (contentFile, sectionId, image) => (
+	contentFile.isHome
+		? `images/${sectionId}/${image}`
+		: `routes/${contentFile.routeDirectory}/images/${sectionId}/${image}`
+);
+
 const getReferencedImages = async (contentFile) => {
-	const { frontmatter } = await readSiteFile(contentFile.contentPath, contentFile.contentLabel);
-	const sections = getFrontmatterSections(frontmatter);
+	const { body } = await readSiteFile(contentFile.contentPath, contentFile.contentLabel);
+	const { sections } = getBodySections(body);
 	const references = [];
 
 	for (const section of sections) {
-		const imageReferences = section.imageReferences ?? section.images.map((image) => ({ image }));
-		for (const { image, line } of imageReferences) {
+		if (!section.id) {
+			fail(`${contentFile.contentLabel}: section heading "${section.heading}" is missing an explicit id.`);
+		}
+
+		const blocks = extractNornaMarkdownBlocks(section.text, { label: contentFile.contentLabel });
+		for (const { image, line, blockDisplayType } of getNornaBlockImageReferences(blocks)) {
 			references.push({
 				contentFile,
 				image,
 				line,
+				blockDisplayType,
 				sectionId: section.id,
+				sourceKey: getImageSourceKey(contentFile, section.id, image),
 			});
 		}
 	}
@@ -111,7 +136,7 @@ const getReferencedImages = async (contentFile) => {
 	return references;
 };
 
-const getContentSourcePath = ({ image, line }, imageIndex) => {
+const getContentSourcePath = ({ image, sourceKey }) => {
 	if (image.includes('/') || image.includes('\\') || image.startsWith('/')) {
 		fail(`Image reference must be a filename without a directory: ${image}`);
 	}
@@ -121,32 +146,24 @@ const getContentSourcePath = ({ image, line }, imageIndex) => {
 		fail(`Image reference uses an unsupported file type: ${image}`);
 	}
 
-	const sourcePath = imageIndex.get(image);
-
-	if (!sourcePath) {
-		fail(`Image file "${image}" does not exist anywhere under the page images directory.`);
-	}
-
-	return sourcePath;
+	return path.join(siteDir, sourceKey);
 };
 
 const getReferencedSources = async () => {
 	const contentFiles = await getContentFiles();
-	const seen = new Map();
+	const seen = new Set();
 	const sources = [];
 
 	for (const contentFile of contentFiles) {
 		const references = await getReferencedImages(contentFile);
-		const imageIndex = await getImageIndex(contentFile.imagesDir, fail);
 
 		for (const reference of references) {
-			const sourcePath = getContentSourcePath(reference, imageIndex);
-			const siteImagePath = toPublicPath(path.relative(contentFile.imagesDir, sourcePath));
+			const sourcePath = getContentSourcePath(reference);
+			const siteImagePath = toPosixPath(path.relative(contentFile.imagesDir, sourcePath));
 			const imageName = path.basename(sourcePath);
 
-			if (seen.has(imageName)) {
-				const firstReference = seen.get(imageName);
-				fail(`Image reference "${imageName}" appears more than once, in ${firstReference.contentFile.contentLabel} line ${firstReference.line} and ${reference.contentFile.contentLabel} line ${reference.line}.`);
+			if (seen.has(reference.sourceKey)) {
+				continue;
 			}
 
 			const fileStat = await stat(sourcePath).catch(() => null);
@@ -159,12 +176,12 @@ const getReferencedSources = async () => {
 				fail(`Image "${imageName}" is used in section "${reference.sectionId}" but is located in ${contentFile.imagesLabel}/${currentDirectory}/. Run norna content:sync, or npm run norna:sync in starter-style repositories, to move it.`);
 			}
 
-			seen.set(imageName, reference);
-			sources.push(sourcePath);
+			seen.add(reference.sourceKey);
+			sources.push({ sourcePath, sourceKey: reference.sourceKey, reference });
 		}
 	}
 
-	return sources.sort();
+	return sources.sort((left, right) => left.sourceKey.localeCompare(right.sourceKey, 'sv'));
 };
 
 const getOrientation = ({ width, height }) => {
@@ -172,21 +189,32 @@ const getOrientation = ({ width, height }) => {
 	return width > height ? 'landscape' : 'portrait';
 };
 
-const validateCarouselOrientations = (sections, manifest) => {
-	for (const section of sections) {
-		for (const carousel of section.carousels) {
-			const orientations = new Set(
-				carousel.images
-					.map((image) => manifest[image])
-					.filter(Boolean)
-					.map(getOrientation)
-			);
-
-			orientations.delete('square');
-			if (orientations.size > 1) {
-				throw new Error(
-					`Carousel in section "${section.id}" on line ${carousel.line} mixes landscape and portrait images. Use landscape images with optional square images, or portrait images with optional square images.`,
+const validateCarouselOrientations = async (manifest) => {
+	const contentFiles = await getContentFiles();
+
+	for (const contentFile of contentFiles) {
+		const { body } = await readSiteFile(contentFile.contentPath, contentFile.contentLabel);
+		const { sections } = getBodySections(body);
+
+		for (const section of sections) {
+			if (!section.id) continue;
+
+			const blocks = extractNornaMarkdownBlocks(section.text, { label: contentFile.contentLabel });
+			for (const block of blocks.filter((candidate) => candidate.type === 'image-carousel')) {
+				const orientations = new Set(
+					block.images
+						.map((image) => manifest[getImageSourceKey(contentFile, section.id, image.image)])
+						.filter(Boolean)
+						.filter((entry) => Number.isFinite(entry.width) && Number.isFinite(entry.height))
+						.map(getOrientation)
 				);
+
+				orientations.delete('square');
+				if (orientations.size > 1) {
+					throw new Error(
+						`Carousel in section "${section.id}" on line ${block.line} mixes landscape and portrait images. Use landscape images with optional square images, or portrait images with optional square images.`,
+					);
+				}
 			}
 		}
 	}
@@ -277,6 +305,20 @@ const getReusableEntry = async (sourcePath, previousEntry, sourceHash) => {
 	};
 };
 
+const getReusableStaticEntry = async (previousEntry, sourceHash) => {
+	if (
+		previousEntry?.kind !== 'static'
+		|| previousEntry?.sourceHash !== sourceHash
+		|| previousEntry?.outputVersion !== imageOutputVersion
+		|| typeof previousEntry?.src !== 'string'
+		|| !(await fileExists(getFilePathFromPublicPath(previousEntry.src)))
+	) {
+		return null;
+	}
+
+	return previousEntry;
+};
+
 const listGeneratedFiles = async (directory) => {
 	const entries = await readdir(directory, { withFileTypes: true }).catch((error) => {
 		if (error?.code === 'ENOENT') {
@@ -300,13 +342,22 @@ const listGeneratedFiles = async (directory) => {
 	return files;
 };
 
+const getManifestOutputPaths = (entry) => [
+	...(entry.variants ?? []).map((variant) => getFilePathFromPublicPath(variant.src)),
+	...(entry.kind === 'static' && typeof entry.src === 'string'
+		? [getFilePathFromPublicPath(entry.src)]
+		: []),
+];
+
 const removeUnreferencedGeneratedFiles = async (manifest) => {
 	const expectedFiles = new Set(
 		Object.values(manifest)
-			.flatMap((entry) => entry.variants ?? [])
-			.map((variant) => getFilePathFromPublicPath(variant.src)),
+			.flatMap(getManifestOutputPaths),
 	);
-	const generatedFiles = await listGeneratedFiles(generatedImagesDir);
+	const generatedFiles = [
+		...await listGeneratedFiles(generatedImagesDir),
+		...await listGeneratedFiles(originalImagesDir),
+	];
 
 	for (const generatedFile of generatedFiles) {
 		if (!expectedFiles.has(generatedFile)) {
@@ -315,17 +366,13 @@ const removeUnreferencedGeneratedFiles = async (manifest) => {
 	}
 };
 
-await rm(originalImagesDir, { recursive: true, force: true });
 await mkdir(generatedImagesDir, { recursive: true });
 
-const contentFiles = await getContentFiles();
-const frontmatterSections = (await Promise.all(contentFiles.map(async (contentFile) => {
-	const { frontmatter } = await readSiteFile(contentFile.contentPath, contentFile.contentLabel);
-	return getFrontmatterSections(frontmatter);
-}))).flat();
-const sources = await getReferencedSources();
 const previousManifest = await readManifest();
+const sources = await getReferencedSources();
 const manifest = {};
+const isStaticSource = (sourcePath) => staticImageExtensions.has(path.extname(sourcePath).toLowerCase());
+const isRasterSource = (sourcePath) => rasterImageExtensions.has(path.extname(sourcePath).toLowerCase());
 
 if (sources.length === 0) {
 	await removeUnreferencedGeneratedFiles(manifest);
@@ -334,18 +381,47 @@ if (sources.length === 0) {
 	process.exit(0);
 }
 
-const imageMagick = await getImageMagick();
+const imageMagick = sources.some(({ sourcePath }) => isRasterSource(sourcePath))
+	? await getImageMagick()
+	: null;
 
-for (const sourcePath of sources) {
-	const imageName = path.basename(sourcePath);
+for (const { sourcePath, sourceKey } of sources) {
 	const sourceHash = await getSourceHash(sourcePath);
-	const reusableEntry = await getReusableEntry(sourcePath, previousManifest[imageName], sourceHash);
+
+	if (isStaticSource(sourcePath)) {
+		const reusableEntry = await getReusableStaticEntry(previousManifest[sourceKey], sourceHash);
+
+		if (reusableEntry) {
+			manifest[sourceKey] = reusableEntry;
+			continue;
+		}
+
+		const outputPath = getOriginalPath(sourceKey, sourceHash);
+		await mkdir(path.dirname(outputPath), { recursive: true });
+		await copyFile(sourcePath, outputPath);
+
+		const dimensions = await readImageDimensions(sourcePath).catch(() => null);
+		manifest[sourceKey] = {
+			kind: 'static',
+			outputVersion: imageOutputVersion,
+			sourceHash,
+			src: getPublicPath(outputPath),
+			...(dimensions ? { width: dimensions.width, height: dimensions.height } : {}),
+		};
+		continue;
+	}
+
+	const reusableEntry = await getReusableEntry(sourcePath, previousManifest[sourceKey], sourceHash);
 
 	if (reusableEntry) {
-		manifest[imageName] = reusableEntry;
+		manifest[sourceKey] = reusableEntry;
 		continue;
 	}
 
+	if (!imageMagick) {
+		throw new Error(`ImageMagick is missing for raster image: ${sourcePath}`);
+	}
+
 	const dimensions = await identify(sourcePath);
 	const variantWidths = getVariantWidths(dimensions);
 	const variants = getVariants(sourcePath, sourceHash, variantWidths);
@@ -354,7 +430,7 @@ for (const sourcePath of sources) {
 		await convert(sourcePath, outputPath, width);
 	}
 
-	manifest[imageName] = {
+	manifest[sourceKey] = {
 		outputVersion: imageOutputVersion,
 		sourceHash,
 		width: dimensions.width,
@@ -363,7 +439,7 @@ for (const sourcePath of sources) {
 	};
 }
 
-validateCarouselOrientations(frontmatterSections, manifest);
+await validateCarouselOrientations(manifest);
 await removeUnreferencedGeneratedFiles(manifest);
 await mkdir(path.dirname(generatedImagesManifestPath), { recursive: true });
 await writeFile(generatedImagesManifestPath, `${JSON.stringify(manifest, null, 2)}\n`);

package/scripts/lib/image-dimensions.mjs

@@ -1,4 +1,5 @@
 import { readFile } from 'node:fs/promises';
+import path from 'node:path';
 
 const pngSignature = Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]);
 const jpegStartOfFrameMarkers = new Set([
@@ -67,9 +68,34 @@ const readJpegDimensions = (buffer) => {
 	return null;
 };
 
+const parseSvgLength = (value) => {
+	const match = String(value ?? '').trim().match(/^(\d+(?:\.\d+)?|\.\d+)(?:px)?$/i);
+	return match ? Number(match[1]) : null;
+};
+
+const readSvgDimensions = (source) => {
+	const svgTag = source.match(/<svg\b[^>]*>/i)?.[0];
+	if (!svgTag) return null;
+
+	const viewBox = svgTag.match(/\bviewBox\s*=\s*["']\s*([+-]?(?:\d+(?:\.\d+)?|\.\d+))[\s,]+([+-]?(?:\d+(?:\.\d+)?|\.\d+))[\s,]+([+-]?(?:\d+(?:\.\d+)?|\.\d+))[\s,]+([+-]?(?:\d+(?:\.\d+)?|\.\d+))\s*["']/i);
+	if (viewBox) {
+		const width = Number(viewBox[3]);
+		const height = Number(viewBox[4]);
+		return width > 0 && height > 0 ? { width, height } : null;
+	}
+
+	const width = parseSvgLength(svgTag.match(/\bwidth\s*=\s*["']([^"']+)["']/i)?.[1]);
+	const height = parseSvgLength(svgTag.match(/\bheight\s*=\s*["']([^"']+)["']/i)?.[1]);
+	return width && height ? { width, height } : null;
+};
+
 export const readImageDimensions = async (filePath) => {
 	const buffer = await readFile(filePath);
 
+	if (path.extname(filePath).toLowerCase() === '.svg') {
+		return readSvgDimensions(buffer.toString('utf8'));
+	}
+
 	if (isPng(buffer)) {
 		return readPngDimensions(buffer);
 	}