@janga/norna 0.7.10 → 0.7.11

package/scripts/test-navigation.mjs

@@ -1,15 +1,12 @@
-import { execFile, spawn } from 'node:child_process';
+import { spawn } from 'node:child_process';
+import net from 'node:net';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
-import { promisify } from 'node:util';
-
-const execFileAsync = promisify(execFile);
 
 const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
 const cliPath = path.join(root, 'bin', 'norna.mjs');
-const dogGallerySiteDir = path.join(root, 'examples', 'dog-gallery', 'site');
-const url = 'http://localhost:4321/';
-const probeUrls = [url, 'http://127.0.0.1:4321/', 'http://[::1]:4321/'];
+const navigationDemoSiteDir = path.join(root, 'examples', 'feature-demos', 'media-and-surfaces', 'site');
+const host = '127.0.0.1';
 const npmBin = process.platform === 'win32' ? 'npm.cmd' : 'npm';
 const testTargets = process.argv.slice(2);
 const playwrightTargets = testTargets.length > 0 ? testTargets : ['tests/navigation.spec.ts'];
@@ -18,33 +15,46 @@ const sleep = (milliseconds) => new Promise((resolve) => {
 	setTimeout(resolve, milliseconds);
 });
 
-const isReachable = async () => {
-	for (const probeUrl of probeUrls) {
-		try {
-			const response = await fetch(probeUrl, { signal: AbortSignal.timeout(1_000) });
-			await response.arrayBuffer();
-			return response.ok;
-		} catch {
-			// Try the next loopback address.
-		}
-	}
+const getAvailablePort = () => new Promise((resolve, reject) => {
+	const server = net.createServer();
+	server.unref();
+	server.once('error', reject);
+	server.listen(0, host, () => {
+		const address = server.address();
+		const port = typeof address === 'object' && address ? address.port : null;
+		server.close((error) => {
+			if (error) {
+				reject(error);
+				return;
+			}
+			resolve(port);
+		});
+	});
+});
+
+const port = await getAvailablePort();
+if (!port) throw new Error('Could not reserve a port for the navigation test server.');
+const url = `http://${host}:${port}/`;
 
+const isReachable = async () => {
 	try {
-		await execFileAsync('curl', ['-fsI', url], {
-			cwd: root,
-			maxBuffer: 1024 * 1024,
-		});
-		return true;
+		const response = await fetch(url, { signal: AbortSignal.timeout(1_000) });
+		await response.arrayBuffer();
+		return response.ok;
 	} catch {
 		return false;
 	}
 };
 
-const waitForServer = async () => {
+const waitForServer = async (serverProcess) => {
 	const startedAt = Date.now();
 	const timeoutMs = 30_000;
 
 	while (Date.now() - startedAt < timeoutMs) {
+		if (serverProcess.exitCode !== null) {
+			throw new Error(`Navigation test server exited before ${url} became reachable.`);
+		}
+
 		if (await isReachable()) {
 			return;
 		}
@@ -55,12 +65,6 @@ const waitForServer = async () => {
 	throw new Error(`Timed out waiting for ${url}`);
 };
 
-const runCapture = async (command, args, options = {}) => execFileAsync(command, args, {
-	cwd: root,
-	maxBuffer: 1024 * 1024 * 10,
-	...options,
-});
-
 const runInherit = (command, args, options = {}) => new Promise((resolve, reject) => {
 	const child = spawn(command, args, {
 		cwd: root,
@@ -82,31 +86,57 @@ const runInherit = (command, args, options = {}) => new Promise((resolve, reject
 	});
 });
 
-const ensureServer = async () => {
-	await stopServer();
+const startServer = async () => {
+	await runInherit(process.execPath, [cliPath, 'site:public'], {
+		cwd: navigationDemoSiteDir,
+	});
+	await runInherit(process.execPath, [cliPath, 'images'], {
+		cwd: navigationDemoSiteDir,
+	});
 
-	await runInherit(process.execPath, [cliPath, 'dev:local'], {
-		cwd: dogGallerySiteDir,
+	const serverProcess = spawn(process.execPath, [
+		cliPath,
+		'astro',
+		'dev',
+		'--ignore-lock',
+		'--host',
+		host,
+		'--port',
+		String(port),
+	], {
+		cwd: navigationDemoSiteDir,
+		stdio: 'inherit',
 		env: {
 			...process.env,
-			WALDE_NO_OPEN: '1',
+			ASTRO_DEV_BACKGROUND: '0',
 		},
 	});
-	await waitForServer();
+	serverProcess.once('error', (error) => {
+		throw error;
+	});
+	await waitForServer(serverProcess);
 
-	return true;
+	return serverProcess;
 };
 
-const stopServer = async () => {
-	await runCapture(process.execPath, [cliPath, 'dev:stop'], {
-		cwd: dogGallerySiteDir,
-	}).catch(() => {});
+const stopServer = async (serverProcess) => {
+	if (!serverProcess || serverProcess.exitCode !== null) return;
+
+	serverProcess.kill('SIGTERM');
+	const stopped = await Promise.race([
+		new Promise((resolve) => serverProcess.once('exit', () => resolve(true))),
+		sleep(5_000).then(() => false),
+	]);
+
+	if (!stopped && serverProcess.exitCode === null) {
+		serverProcess.kill('SIGKILL');
+	}
 };
 
-let startedServer = false;
+let serverProcess;
 
 try {
-	startedServer = await ensureServer();
+	serverProcess = await startServer();
 	await runInherit(npmBin, ['exec', '--', 'playwright', 'test', ...playwrightTargets], {
 		env: {
 			...process.env,
@@ -114,7 +144,5 @@ try {
 		},
 	});
 } finally {
-	if (startedServer) {
-		await stopServer();
-	}
+	await stopServer(serverProcess);
 }

package/scripts/test-theme-presets.mjs

@@ -0,0 +1,151 @@
+import assert from 'node:assert/strict';
+import { spawnSync } from 'node:child_process';
+import { mkdir, mkdtemp, readFile, rm, writeFile } from 'node:fs/promises';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { parseYamlMapping } from './lib/frontmatter-yaml.mjs';
+import { splitSiteFile } from './lib/site-content.mjs';
+import {
+	resolveThemeConfig,
+	themePresetNames,
+	themePresets,
+} from './lib/theme-presets.mjs';
+
+const repoRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const cliPath = path.join(repoRoot, 'bin', 'norna.mjs');
+const tempParent = path.join(repoRoot, 'node_modules', '.cache');
+await mkdir(tempParent, { recursive: true });
+const tempRoot = await mkdtemp(path.join(tempParent, 'norna theme presets-'));
+const siteDir = path.join(tempRoot, 'site');
+
+const runCli = (args) => spawnSync(process.execPath, [cliPath, '--site-dir', siteDir, ...args], {
+	cwd: repoRoot,
+	encoding: 'utf8',
+});
+
+try {
+	assert.deepEqual(Object.keys(themePresets), themePresetNames);
+	for (const presetName of themePresetNames) {
+		const resolved = resolveThemeConfig({ preset: presetName }, 'test theme');
+		assert.equal(resolved.preset, presetName);
+		assert.ok(resolved.layout?.density);
+		assert.ok(resolved.gallery?.width);
+		assert.ok(resolved.typography?.fontFamily);
+		assert.ok(resolved.typography?.preset);
+		assert.ok(resolved.presentation?.palette);
+	}
+
+	const overridden = resolveThemeConfig({
+		preset: 'documentation',
+		layout: { pageWidth: '1300px' },
+		presentation: { palette: 'dark' },
+	}, 'test theme');
+	assert.equal(overridden.layout.density, 'compact');
+	assert.equal(overridden.layout.pageWidth, '1300px');
+	assert.equal(overridden.gallery.width, '920px');
+	assert.equal(overridden.presentation.palette, 'dark');
+	assert.deepEqual(overridden.presentation.sectionSurfaces.sequence, ['base', 'soft']);
+	assert.throws(
+		() => resolveThemeConfig({ preset: 'unknown' }, 'test/theme.md'),
+		/Unknown theme preset "unknown" in test\/theme\.md.*portfolio, documentation, project, statement/,
+	);
+
+	await mkdir(path.join(siteDir, 'routes', '010-guide'), { recursive: true });
+	await writeFile(path.join(siteDir, 'config.mjs'), `export default {
+  site: { url: 'https://example.com/', basePath: '/' },
+  github: {
+    repo: 'owner/repo',
+    branch: 'main',
+    pagesWorkflow: 'Deploy to GitHub Pages',
+  },
+};
+`);
+	await writeFile(path.join(siteDir, 'content.md'), `---
+title: Theme preset test
+description: Root page
+---
+
+## Home {#home}
+
+Root content.
+`);
+	await writeFile(path.join(siteDir, 'theme.md'), `---
+preset: documentation
+layout:
+  pageWidth: 1300px
+presentation:
+  palette: dark
+---
+`);
+	await writeFile(path.join(siteDir, 'routes', '010-guide', 'route-content.md'), `---
+title: Guide
+description: Route page
+navigation:
+  label: Guide
+---
+
+## Guide {#guide}
+
+Route content.
+`);
+	await writeFile(path.join(siteDir, 'routes', '010-guide', 'theme.md'), `---
+preset: portfolio
+layout:
+  pageWidth: 1010px
+presentation:
+  palette: light
+---
+`);
+
+	const buildResult = runCli(['build']);
+	assert.equal(buildResult.status, 0, buildResult.stderr || buildResult.stdout);
+	const rootHtml = await readFile(path.join(tempRoot, 'dist', 'index.html'), 'utf8');
+	const routeHtml = await readFile(path.join(tempRoot, 'dist', 'guide', 'index.html'), 'utf8');
+	assert.match(rootHtml, /--page-width: 1300px/);
+	assert.match(rootHtml, /--font-sans: Georgia, 'Times New Roman', serif/);
+	assert.match(rootHtml, /--color-page: #000000/);
+	assert.match(routeHtml, /--page-width: 1010px/);
+	assert.match(routeHtml, /--font-sans: 'Helvetica Neue', Arial, sans-serif/);
+	assert.match(routeHtml, /--color-page: #ffffff/);
+
+	const typographyResult = runCli(['typography', 'show']);
+	assert.equal(typographyResult.status, 0, typographyResult.stderr || typographyResult.stdout);
+	assert.match(typographyResult.stdout, /value: text-forward/);
+	assert.match(typographyResult.stdout, /value: quiet-gallery/);
+
+	const routeThemePath = path.join(siteDir, 'routes', '010-guide', 'theme.md');
+	const routeThemeSource = await readFile(routeThemePath, 'utf8');
+	await writeFile(routeThemePath, `---\npreset: unknown\n---\n`);
+	const invalidRoutePresetResult = runCli(['config:check']);
+	assert.notEqual(invalidRoutePresetResult.status, 0);
+	assert.match(invalidRoutePresetResult.stderr, /Unknown theme preset "unknown" in .*routes\/010-guide\/theme\.md/);
+	await writeFile(routeThemePath, routeThemeSource);
+
+	const exportResult = runCli(['theme:export', 'documentation']);
+	assert.equal(exportResult.status, 0, exportResult.stderr || exportResult.stdout);
+	assert.match(exportResult.stdout, /orig-documentation-theme\.md/);
+	const exportedPath = path.join(siteDir, 'orig-documentation-theme.md');
+	const exportedSource = await readFile(exportedPath, 'utf8');
+	assert.match(exportedSource, /This is a reference file\. Norna only loads theme\.md\./);
+	assert.match(exportedSource, /Available theme presets: portfolio, documentation, project, statement\./);
+	assert.match(exportedSource, /# Alternatives: dark, light, paper\./);
+	const { frontmatterBody } = splitSiteFile(exportedSource, 'exported theme reference');
+	const exportedConfig = parseYamlMapping(frontmatterBody);
+	assert.equal(exportedConfig.preset, 'documentation');
+	assert.equal(exportedConfig.layout.pageWidth, themePresets.documentation.layout.pageWidth);
+	assert.equal(exportedConfig.typography.fontFamily, themePresets.documentation.typography.fontFamily);
+	assert.deepEqual(exportedConfig.presentation.sectionSurfaces.sequence, ['base', 'soft']);
+
+	const exportAgainResult = runCli(['theme:export', 'documentation']);
+	assert.notEqual(exportAgainResult.status, 0);
+	assert.match(exportAgainResult.stderr, /already exists\. Norna will not overwrite it\./);
+	assert.equal(await readFile(exportedPath, 'utf8'), exportedSource);
+
+	const unknownExportResult = runCli(['theme:export', 'unknown']);
+	assert.notEqual(unknownExportResult.status, 0);
+	assert.match(unknownExportResult.stderr, /Unknown theme preset "unknown"/);
+
+	console.log('ok - complete theme presets resolve for root and route themes and export as protected references');
+} finally {
+	await rm(tempRoot, { force: true, recursive: true });
+}

package/src/components/SitePage.astro

@@ -57,8 +57,8 @@ const logo = logoAsset
 		height: logoSettings?.height,
 	}
 	: undefined;
-const pagePresentation = resolvePagePresentation(themeData);
-const frameColors = resolveFrameColors({ theme: themeData });
+const pagePresentation = resolvePagePresentation(themeData, themeLabel);
+const frameColors = resolveFrameColors({ theme: themeData, sourceLabel: themeLabel });
 const sections = entry.data.sections;
 const siteHtml = entry.rendered?.html ?? '';
 const resolvedSections = await getSectionsContent(siteHtml, rawMarkdown, sections, currentPage);

package/src/content.config.ts

@@ -15,6 +15,7 @@ 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']);
@@ -197,6 +198,7 @@ const siteSchema = z.object({
 });
 
 export const themeVisualSchema = z.object({
+	preset: themePreset.optional(),
 	layout: themeLayout.optional(),
 	gallery: themeGallery.optional(),
 	typography: themeTypography.optional(),

package/src/styles/global.css

@@ -287,6 +287,8 @@ a {
 .site-banner {
 	display: flex;
 	align-items: flex-start;
+	width: 100%;
+	min-width: 0;
 	gap: 1rem;
 	border: 1px solid color-mix(in srgb, #ffd84d 42%, var(--color-border));
 	border-inline-start: 0.35rem solid #ffd84d;

package/starters/basic/package.json

@@ -14,6 +14,7 @@
     "norna:config:check": "norna config:check",
     "norna:content:check": "norna content:check",
     "norna:sync": "norna content:sync",
+    "norna:theme:export": "norna theme:export",
     "norna:typography:presets": "norna typography presets",
     "norna:typography:show": "norna typography show",
     "norna:public": "norna site:public",

package/starters/project/package.json

@@ -14,6 +14,7 @@
     "norna:config:check": "norna config:check",
     "norna:content:check": "norna content:check",
     "norna:sync": "norna content:sync",
+    "norna:theme:export": "norna theme:export",
     "norna:typography:presets": "norna typography presets",
     "norna:typography:show": "norna typography show",
     "norna:public": "norna site:public",