@janga/norna 0.7.28 → 0.7.30

package/src/lib/sectionContent.ts

@@ -1,5 +1,7 @@
 import { getPageImageSourceKey } from '../../scripts/lib/site-conventions.mjs';
+import { readPageAttachments, resolveAttachment, attachmentHref } from '../../scripts/lib/page-attachments.mjs';
 import { markdownToHtml } from 'satteri';
+import { parseFragment } from 'parse5';
 import { groupRenderedTabs } from '../../scripts/lib/content-tabs.mjs';
 import projectConfig from '../../scripts/lib/project-config.mjs';
 import {
@@ -8,12 +10,20 @@ import {
 import { splitNornaRenderedBlocks } from '../../scripts/lib/norna-markdown-blocks.mjs';
 import { applyBasePathToHtml } from './basePath';
 import type { SitePage } from './sitePages';
+import { splitMarkdownImages, renderNestedMarkdownImages } from './markdownImages';
+import { nornaMarkdownImagePlugin } from '../../scripts/lib/norna-markdown-render-plugin.mjs';
+import { rewriteAttachmentLinks } from '../../scripts/lib/attachment-render.mjs';
+import { siteDir } from '../../scripts/lib/site-paths.mjs';
+import { pathToFileURL } from 'node:url';
 
 type ManagedImage = {
 	image: string;
 	src: string;
 	alt?: string;
 	caption?: string;
+	title?: string;
+	href?: string;
+	linkTitle?: string;
 };
 type CardListItem = {
 	title: string;
@@ -94,40 +104,73 @@ const applyH3HeadingIds = (
 	html: string,
 	headings: Array<{ id: string | null }>,
 ) => {
+	const renderHeading = (attributes: string, headingHtml: string, heading: { id: string | null }) => {
+		if (!heading.id) throw new Error('Rendered Markdown H3 could not be matched to its heading id.');
+		const cleanAttributes = attributes
+			.replace(/\s+data-norna-page-heading="true"/g, '')
+			.replace(/\s+id=(["']).*?\1/gi, '');
+		const cleanHeadingHtml = headingHtml.replace(explicitHeadingIdRegex, '').trim();
+		return `<h3${cleanAttributes} id="${heading.id}">${cleanHeadingHtml}</h3>`;
+	};
+
+	// Content rendered before the heading marker was introduced may still be in
+	// Astro's content cache. Its top-level H3s can be identified from the HTML tree.
+	if (!html.includes('data-norna-page-heading=') && headings.length > 0) {
+		const fragment = parseFragment(html, { sourceCodeLocationInfo: true });
+		const renderedHeadings = fragment.childNodes.filter((node) => (
+			'tagName' in node && node.tagName === 'h3' && node.sourceCodeLocation?.startTag && node.sourceCodeLocation?.endTag
+		));
+		if (renderedHeadings.length !== headings.length) {
+			throw new Error('Markdown H3 headings could not be matched to the rendered page content.');
+		}
+		let result = html;
+		for (let index = renderedHeadings.length - 1; index >= 0; index -= 1) {
+			const location = renderedHeadings[index]?.sourceCodeLocation;
+			const heading = headings[index];
+			if (!location?.startTag || !location.endTag || !heading) {
+				throw new Error('Rendered Markdown H3 could not be matched to its heading id.');
+			}
+			const source = html.slice(location.startOffset, location.endOffset);
+			const replacement = source.replace(/<h3\b([^>]*)>([\s\S]*?)<\/h3>/i, (_match, attributes, headingHtml) =>
+				renderHeading(String(attributes), String(headingHtml), heading));
+			result = result.slice(0, location.startOffset) + replacement + result.slice(location.endOffset);
+		}
+		return result;
+	}
+
 	let headingIndex = 0;
-	const result = html.replace(/<h3\b([^>]*)>([\s\S]*?)<\/h3>/gi, (_match, attributes, headingHtml) => {
+	const result = html.replace(/<h3\b([^>]*)>([\s\S]*?)<\/h3>/gi, (source, attributes, headingHtml) => {
+		if (!/\sdata-norna-page-heading="true"/.test(attributes)) return source;
 		const heading = headings[headingIndex];
 		headingIndex += 1;
-		if (!heading?.id) throw new Error('Rendered Markdown H3 could not be matched to its heading id.');
-
-		const cleanAttributes = String(attributes).replace(/\s+id=(["']).*?\1/gi, '');
-		const cleanHeadingHtml = String(headingHtml).replace(explicitHeadingIdRegex, '').trim();
-		return `<h3${cleanAttributes} id="${heading.id}">${cleanHeadingHtml}</h3>`;
+		if (!heading) throw new Error('Rendered Markdown H3 could not be matched to its heading id.');
+		return renderHeading(String(attributes), String(headingHtml), heading);
 	});
-
 	if (headingIndex !== headings.length) {
 		throw new Error('Markdown H3 headings could not be matched to the rendered page content.');
 	}
-
 	return result;
 };
 
 const getImageSourceKey = (page: SitePage, image: string) => getPageImageSourceKey(page.pageDirectory, image);
 
-const renderHeadingTitleHtml = async (headingSource: string) => {
-	const headingMarkdown = headingSource
-		.replace(/^#{1,6}[ \t]+/, '')
-		.replace(explicitHeadingIdRegex, '')
-		.trim();
-	const result = await markdownToHtml(headingMarkdown, {
+const renderHeadingTitleHtml = async (headingSource: string, page: SitePage) => {
+	const references = [...page.markdownDocument.markdownImages, ...page.markdownDocument.links];
+	const definitions = [...new Set(references.map((reference) => reference.definitionSource).filter(Boolean))].join('\n');
+	// Keep the heading syntax: text such as "1. Plan" becomes a list if parsed alone.
+	const source = await rewriteAttachmentLinks(`${headingSource}\n\n${definitions}`, pathToFileURL(page.contentPath), siteDir);
+	const result = await markdownToHtml(source, {
+		mdastPlugins: [nornaMarkdownImagePlugin],
 		features: {
 			gfm: true,
 			smartPunctuation: true,
 		},
 	});
-	const paragraph = result.html.trim().match(/^<p>([\s\S]*)<\/p>$/i);
-	if (!paragraph) throw new Error('Markdown heading could not be rendered as inline content.');
-	return prepareContentHtml(paragraph[1] ?? '');
+	const heading = result.html.trim().match(/^<h([12])\b[^>]*>([\s\S]*)<\/h\1>$/i);
+	if (!heading) throw new Error('Markdown heading could not be rendered as inline content.');
+	const html = prepareContentHtml((heading[2] ?? '').replace(explicitHeadingIdRegex, '').trim());
+	const marked = splitMarkdownImages(html, page.pageDirectory).map((block) => block.type === 'html' ? block.html : '').join('');
+	return renderNestedMarkdownImages(marked, page.title, { desktop: 100, mobile: 100 });
 };
 
 const splitRenderedRegions = (html: string, regionCount: number) => {
@@ -159,11 +202,12 @@ const resolveContentBlocks = async (
 
 	for (const block of splitBlocks) {
 		if (block.type === 'html') {
-			resolvedBlocks.push({ type: 'html', html: prepareContentHtml(block.html) });
+			resolvedBlocks.push(...splitMarkdownImages(prepareContentHtml(block.html), page.pageDirectory));
 			continue;
 		}
 
 		if (block.type === 'card-list') {
+			const { files } = await readPageAttachments(page);
 			resolvedBlocks.push({
 				type: 'card-list',
 				layout: block.layout,
@@ -172,6 +216,7 @@ const resolveContentBlocks = async (
 				width: block.width,
 				cards: block.cards.map((card: CardListItem) => ({
 					...card,
+					...(card.link && resolveAttachment(card.link, page.pathname, files) ? { link: attachmentHref(resolveAttachment(card.link, page.pathname, files), card.link) } : {}),
 					...(card.image ? { src: getImageSourceKey(page, card.image) } : {}),
 				})),
 			});
@@ -258,7 +303,7 @@ export const getSectionsContent = async (
 		sections.push({
 			id,
 			title,
-			titleHtml: await renderHeadingTitleHtml(bodySection.heading.source),
+			titleHtml: await renderHeadingTitleHtml(bodySection.heading.source, page),
 			headingLevel,
 			contentBlocks: groupRenderedTabs(
 				await resolveContentBlocks(content, bodySection.blocks, page, childPages),

package/src/lib/sitePages.ts

@@ -16,7 +16,7 @@ type SiteNodeBase = {
 	isHome: boolean;
 	navigation: {
 		listed: boolean;
-		order: number;
+		order: number | null;
 	};
 	depth: number;
 	pageDirectories: string[];
@@ -25,7 +25,6 @@ type SiteNodeBase = {
 	pageDirectory: string;
 	pageId: string;
 	pageIds: string[];
-	pageOrders: number[];
 	pagePath: string;
 	parentPagePath: string | null;
 	title: string;
@@ -64,16 +63,6 @@ const getPageMetadata = (entry: SiteEntry) => {
 
 const getPagePathname = (pathSegment: string) => pathSegment ? `/${pathSegment}/` : '/';
 
-const compareNumberPaths = (left: number[], right: number[]) => {
-	const sharedLength = Math.min(left.length, right.length);
-	for (let index = 0; index < sharedLength; index += 1) {
-		const difference = left[index] - right[index];
-		if (difference !== 0) return difference;
-	}
-
-	return left.length - right.length;
-};
-
 const readPageMarkdownDocument = async (entry: SiteEntry) => {
 	const pageDirectory = getPageDirectory(entry);
 	const contentRelativePath = [getPageSourceDirectory(pageDirectory), 'content.md'].filter(Boolean).join('/');
@@ -112,7 +101,7 @@ const createSitePage = async (entry: SiteEntry): Promise<SitePage> => {
 		depth: pageMetadata.depth,
 		navigation: {
 		listed: navigation.listed ?? true,
-			order: isHome ? 0 : pageMetadata.pageOrder,
+			order: isHome ? 0 : navigation.order ?? null,
 		},
 		pathSegment,
 		pathname: getPagePathname(pathSegment),
@@ -120,7 +109,6 @@ const createSitePage = async (entry: SiteEntry): Promise<SitePage> => {
 		pageDirectories: pageMetadata.pageDirectories,
 		pageId,
 		pageIds: pageMetadata.pageIds,
-		pageOrders: pageMetadata.pageOrders,
 		pagePath,
 		parentPagePath: isHome ? null : pageMetadata.parentPagePath,
 		contentLabel,
@@ -148,7 +136,6 @@ const createSiteCategory = (category: Awaited<ReturnType<typeof getSiteStructure
 	pageDirectories: category.pageDirectories,
 	pageId: category.pageId,
 	pageIds: category.pageIds,
-	pageOrders: category.pageOrders,
 	pagePath: category.pagePath,
 	parentPagePath: category.parentPagePath,
 	title: category.label,
@@ -160,7 +147,6 @@ const createSitePages = async (entries: SiteEntry[]) => {
 	const pages = await Promise.all(entries.map(createSitePage));
 	const pathnames = new Map<string, SitePage>();
 	const siblingPageIds = new Map<string, SitePage>();
-	const siblingPageOrders = new Map<string, SitePage>();
 
 	for (const page of pages) {
 		if (page.isHome && page.navigation.listed === false) {
@@ -184,24 +170,12 @@ const createSitePages = async (entries: SiteEntry[]) => {
 
 		siblingPageIds.set(pageIdKey, page);
 
-		const pageOrderKey = `${siblingScope}\0${page.navigation.order}`;
-		const existingPageOrder = siblingPageOrders.get(pageOrderKey);
-		if (existingPageOrder) {
-			throw new Error(`Duplicate sibling page order "${String(page.navigation.order).padStart(3, '0')}" below "${page.parentPagePath ?? '/'}" from "${existingPageOrder.entry.id}" and "${page.entry.id}".`);
-		}
-
-		siblingPageOrders.set(pageOrderKey, page);
 	}
 	if (!pages.some(({ isHome }) => isHome)) {
 		throw new Error(`Homepage content ${siteDirLabel}/root/content.md is missing.`);
 	}
 
-	return pages.sort((left, right) => (
-		left.isHome ? -1 : right.isHome ? 1 :
-		compareNumberPaths(left.pageOrders, right.pageOrders) ||
-		left.title.localeCompare(right.title, 'sv') ||
-		left.pathname.localeCompare(right.pathname, 'sv')
-	));
+	return pages;
 };
 
 export const getSiteModel = async (entries: SiteEntry[]) => {
@@ -228,7 +202,7 @@ export const getSiteModel = async (entries: SiteEntry[]) => {
 		categoryDestinations: assertCategoryDestinationModel(createCategoryDestinationModel(nodes)),
 		categories: nodes.filter((node): node is SiteCategory => node.kind === 'category'),
 		nodes,
-		pages,
+		pages: nodes.filter((node): node is SitePage => node.kind === 'page'),
 		warnings: structure.warnings,
 	};
 };

package/src/lib/sitePublicAssets.ts

@@ -1,3 +1,4 @@
+import { publicFilePublication } from '../../scripts/lib/publication-paths.mjs';
 import { existsSync } from 'node:fs';
 import path from 'node:path';
 import { sitePublicDir } from '../../scripts/lib/site-paths.mjs';
@@ -28,5 +29,5 @@ export const getIconLinks = () => faviconCandidates
 	.filter((candidate) => publicAssetExists(candidate.href))
 	.map((candidate) => ({
 		...candidate,
-		href: withBasePath(projectConfig.site.basePath, candidate.href),
+		href: withBasePath(projectConfig.site.basePath, publicFilePublication(candidate.href.slice(1)).pathname),
 	}));

package/src/pages/[...slug].astro

@@ -3,6 +3,7 @@ import { getCollection } from 'astro:content';
 import { assertPageAliasModel, createPageAliasModel } from '../../scripts/lib/page-aliases.mjs';
 import { getGeneratedSiteRoutes } from '../../scripts/lib/page-aliases.mjs';
 import { getSitePublicFiles } from '../../scripts/lib/site-link-graph.mjs';
+import { sitePublicDir } from '../../scripts/lib/site-paths.mjs';
 import projectConfig from '../../scripts/lib/project-config.mjs';
 import PageAliasRedirect from '../components/PageAliasRedirect.astro';
 import SearchPage from '../components/SearchPage.astro';
@@ -15,7 +16,7 @@ export async function getStaticPaths() {
 	const aliasModel = assertPageAliasModel(createPageAliasModel({
 		categories: siteModel.categories,
 		pages: siteModel.pages,
-		publicFiles: await getSitePublicFiles(),
+		publicFiles: await getSitePublicFiles(sitePublicDir, projectConfig),
 		generatedRoutes: getGeneratedSiteRoutes({ searchEnabled: projectConfig.search.enabled }),
 	}));
 	const pagesByPathname = new Map(siteModel.pages.map((page) => [page.pathname, page]));

package/src/styles/area-navigation.css

@@ -217,10 +217,19 @@
 		--area-reading-rail-width: 16rem;
 		--area-reading-header-height: 4rem;
 		--site-top-anchor-offset: calc(var(--area-reading-header-height) + 1px + var(--nav-top-safety-inset));
-		--area-reading-outer-margin: max(var(--content-gutter), calc((100vw - max(var(--page-width), 86rem)) / 2));
+		--area-reading-outer-margin: var(--content-gutter);
+		--area-reading-frame-width: min(calc(100% - (var(--content-gutter) * 2)), max(var(--page-width), 86rem));
 		--area-reading-content-start: calc(var(--area-reading-outer-margin) + var(--area-reading-rail-width) + var(--local-navigation-gap, clamp(1.5rem, 3vw, 3rem)));
 	}
 
+	/* Keep the reading frame near navigation on wide screens. Focus reading
+	   hides navigation without moving the article to a different reading axis. */
+	:root[data-area-reading-frame] .site-page-layout-tree {
+		width: var(--area-reading-frame-width);
+		margin-inline: var(--area-reading-outer-margin) auto;
+		--tree-layout-outer-margin: max(var(--content-gutter), calc(100vw - var(--content-gutter) - max(var(--page-width), 86rem)));
+	}
+
 	:root[data-area-reading-frame] .site-page-layout-tree > .site-content {
 		grid-column: 2;
 	}
@@ -242,7 +251,8 @@
 		display: grid;
 		grid-template-columns: var(--area-reading-rail-width) minmax(0, 1fr);
 		column-gap: var(--local-navigation-gap, clamp(1.5rem, 3vw, 3rem));
-		width: min(calc(100% - (var(--content-gutter) * 2)), max(var(--page-width), 86rem));
+		width: var(--area-reading-frame-width);
+		margin-inline: var(--area-reading-outer-margin) auto;
 	}
 
 	:root[data-area-reading-frame]:not([data-focus-reading='on']) .site-nav-leading {
@@ -263,7 +273,6 @@
 
 	:root[data-area-reading-frame] .site-brand-logo {
 		max-width: 100%;
-		max-height: 2.25rem;
 		object-fit: contain;
 	}
 
@@ -333,8 +342,8 @@
 	}
 
 	:root[data-area-reading-frame] .site-banners {
-		width: calc(100% - var(--area-reading-content-start) - var(--area-reading-outer-margin));
-		margin-inline: var(--area-reading-content-start) var(--area-reading-outer-margin);
+		width: calc(var(--area-reading-frame-width) - var(--area-reading-rail-width) - var(--local-navigation-gap, clamp(1.5rem, 3vw, 3rem)));
+		margin-inline: var(--area-reading-content-start) auto;
 	}
 
 	:root[data-area-reading-frame]:not([data-focus-reading='on']) .area-navigation-switcher {

package/src/styles/content.css

@@ -1174,6 +1174,12 @@ ul {
 	text-align: left;
 }
 
+.section-markdown li > :is(ul, ol) {
+	display: block;
+	margin-right: 0;
+	margin-left: 0;
+}
+
 .section-markdown li + li {
 	margin-top: 0.35rem;
 }

package/src/styles/media.css

@@ -337,6 +337,30 @@
 	object-fit: contain;
 }
 
+.managed-markdown-inline {
+	display: inline;
+	width: auto;
+	height: auto;
+	max-width: 100%;
+	vertical-align: middle;
+}
+
+.section-markdown .managed-markdown-standalone {
+	margin-block: var(--space-image-item);
+	max-width: 100%;
+}
+
+.section-markdown :is(ul, ol):has(.managed-markdown-standalone) {
+	display: block;
+}
+
+.section-markdown li > .managed-markdown-standalone {
+	display: inline-grid;
+	width: 100%;
+	margin-block: 0;
+	vertical-align: top;
+}
+
 :root[data-image-inspector-open='true'] {
 	overflow: hidden;
 }

package/starters/basic/.github/workflows/deploy.yml

@@ -27,16 +27,13 @@ jobs:
           node-version: 24.18.0
           cache: npm
 
-      - name: Install image tools
-        run: sudo apt-get update && sudo apt-get install -y imagemagick
-
       - name: Restore generated images
         uses: actions/cache@v4
         with:
-          path: site/.norna/public/images/generated
-          key: norna-images-${{ hashFiles('site/.norna/generated-images.json') }}
+          path: site/.norna/public/_norna/images
+          key: norna-images-v4-${{ hashFiles('site/.norna/generated-images.json') }}
           restore-keys: |
-            norna-images-
+            norna-images-v4-
 
       - name: Install dependencies
         run: npm ci

package/starters/basic/README.md

@@ -9,6 +9,8 @@ npm install
 npm run norna:dev
 ```
 
+The npm installation includes image processing for JPEG and PNG files.
+
 Open the address printed by the development server. Stop it later with
 `npm run norna:dev:stop`.
 

package/starters/basic/site/site-config/settings.yaml

@@ -1 +1,4 @@
+# Norna increments this version for breaking changes to the site source format.
+# Change it only as part of a documented format conversion.
+sourceFormat: 2
 url: https://example.com/