@janga/norna 0.7.24 → 0.7.25

package/src/components/TreeNavigationScript.astro

@@ -4,6 +4,7 @@
 		sectionOpenByPath: Record<string, boolean>;
 		scrollTop: number;
 	};
+	type SharedNavigationState = Pick<NavigationState, 'openPaths' | 'sectionOpenByPath'>;
 	type NavigationSnapshot = {
 		branchOpen: boolean[];
 		sectionOpen: boolean[];
@@ -12,7 +13,9 @@
 
 	const setupNavigationState = (container: HTMLElement, scope: 'desktop' | 'mobile') => {
 		const root = container.dataset.navigationRoot ?? '/';
+		const sharedRoot = container.dataset.navigationStateRoot ?? root;
 		const stateKey = `norna:tree-navigation:${scope}:${root}`;
+		const sharedStateKey = `norna:tree-navigation:shared:${sharedRoot}`;
 		const branches = Array.from(container.querySelectorAll<HTMLDetailsElement>(
 			'.navigation-page-disclosure[data-page-path]',
 		));
@@ -34,31 +37,69 @@
 		};
 		const scrollContainer = getScrollContainer();
 		let filterSnapshot: NavigationSnapshot | null = null;
-
-		try {
-			const parsedState = JSON.parse(sessionStorage.getItem(stateKey) ?? '{}');
-			const storedState: NavigationState = {
-				openPaths: Array.isArray(parsedState.openPaths) ? parsedState.openPaths : [],
-				sectionOpenByPath: parsedState.sectionOpenByPath
-					&& typeof parsedState.sectionOpenByPath === 'object'
-					? Object.fromEntries(Object.entries(parsedState.sectionOpenByPath)
-						.filter((entry): entry is [string, boolean] => typeof entry[1] === 'boolean'))
-					: {},
-				scrollTop: Number.isFinite(Number(parsedState.scrollTop)) ? Number(parsedState.scrollTop) : 0,
-			};
-
+		let lastSharedState = '';
+		const parseState = (value: string | null): NavigationState => {
+			try {
+				const parsedState = JSON.parse(value ?? '{}');
+				return {
+					openPaths: Array.isArray(parsedState.openPaths) ? parsedState.openPaths : [],
+					sectionOpenByPath: parsedState.sectionOpenByPath
+						&& typeof parsedState.sectionOpenByPath === 'object'
+						? Object.fromEntries(Object.entries(parsedState.sectionOpenByPath)
+							.filter((entry): entry is [string, boolean] => typeof entry[1] === 'boolean'))
+						: {},
+					scrollTop: Number.isFinite(Number(parsedState.scrollTop)) ? Number(parsedState.scrollTop) : 0,
+				};
+			} catch {
+				return { openPaths: [], sectionOpenByPath: {}, scrollTop: 0 };
+			}
+		};
+		const getDisclosureState = (): SharedNavigationState => ({
+			openPaths: branches.filter((branch) => branch.open)
+				.map((branch) => branch.dataset.pagePath ?? ''),
+			sectionOpenByPath: Object.fromEntries(sectionBranches.map((branch) => [
+				branch.dataset.pagePath ?? '',
+				branch.open,
+			])),
+		});
+		const applyDisclosureState = (state: SharedNavigationState) => {
 			branches.forEach((branch) => {
 				const pagePath = branch.dataset.pagePath ?? '';
 				branch.open = branch.dataset.currentBranch === 'true'
-					|| storedState.openPaths.includes(pagePath);
+					|| state.openPaths.includes(pagePath);
 			});
 			sectionBranches.forEach((branch) => {
 				const pagePath = branch.dataset.pagePath ?? '';
-				const storedOpen = storedState.sectionOpenByPath[pagePath];
+				const storedOpen = state.sectionOpenByPath[pagePath];
 				branch.open = typeof storedOpen === 'boolean'
 					? storedOpen
 					: branch.dataset.currentPage === 'true';
 			});
+		};
+		const mergeSharedState = (state: SharedNavigationState): SharedNavigationState => {
+			const existingState = parseState(sessionStorage.getItem(sharedStateKey));
+			const knownBranchPaths = new Set(branches.map((branch) => branch.dataset.pagePath ?? ''));
+			return {
+				openPaths: [
+					...existingState.openPaths.filter((pagePath) => !knownBranchPaths.has(pagePath)),
+					...state.openPaths,
+				],
+				sectionOpenByPath: {
+					...existingState.sectionOpenByPath,
+					...state.sectionOpenByPath,
+				},
+			};
+		};
+
+		try {
+			const storedState = parseState(sessionStorage.getItem(stateKey));
+			const storedSharedState = sessionStorage.getItem(sharedStateKey);
+			applyDisclosureState(storedSharedState === null
+				? storedState
+				: parseState(storedSharedState));
+			const initialSharedState = mergeSharedState(getDisclosureState());
+			lastSharedState = JSON.stringify(initialSharedState);
+			sessionStorage.setItem(sharedStateKey, lastSharedState);
 
 			if (storedState.scrollTop > 0) {
 				requestAnimationFrame(() => {
@@ -73,21 +114,36 @@
 			if (filterSnapshot) return;
 
 			try {
-				const openBranches = branches.filter((branch) => branch.open);
-				const sectionOpenByPath = Object.fromEntries(sectionBranches.map((branch) => [
-					branch.dataset.pagePath ?? '',
-					branch.open,
-				]));
+				const disclosureState = getDisclosureState();
 				const state: NavigationState = {
-					openPaths: openBranches.map((branch) => branch.dataset.pagePath ?? ''),
-					sectionOpenByPath,
+					...disclosureState,
 					scrollTop: scrollContainer.scrollTop,
 				};
 				sessionStorage.setItem(stateKey, JSON.stringify(state));
+				const sharedState = mergeSharedState(disclosureState);
+				const serializedSharedState = JSON.stringify(sharedState);
+				sessionStorage.setItem(sharedStateKey, serializedSharedState);
+				if (serializedSharedState !== lastSharedState) {
+					lastSharedState = serializedSharedState;
+					window.dispatchEvent(new CustomEvent('norna:tree-navigation-state', {
+						detail: { root: sharedRoot, state: sharedState },
+					}));
+				}
 			} catch {
 				// Navigation state persistence is an optional enhancement.
 			}
 		};
+		window.addEventListener('norna:tree-navigation-state', (event) => {
+			const detail = (event as CustomEvent<{
+				root?: string;
+				state?: SharedNavigationState;
+			}>).detail;
+			if (detail?.root !== sharedRoot || !detail.state) return;
+			const serializedSharedState = JSON.stringify(detail.state);
+			if (serializedSharedState === lastSharedState) return;
+			lastSharedState = serializedSharedState;
+			applyDisclosureState(detail.state);
+		});
 		const controls = container.querySelector<HTMLElement>('[data-tree-controls]');
 		const filterInput = controls?.querySelector<HTMLInputElement>('[data-tree-filter]') ?? null;
 		const expandButton = controls?.querySelector<HTMLButtonElement>('[data-tree-expand-all]') ?? null;

package/src/layouts/BaseLayout.astro

@@ -145,7 +145,7 @@ const marginNoteReadingWidths = [
 	['standard', 'min(72ch, 680px)'],
 	['wide', `min(80ch, ${visualTheme.images.width})`],
 ] as const;
-const vacantContentsTrackWidth = `11rem + ${visualTheme.layout.localNavigationGap}`;
+const marginNoteOuterReserve = '0.5rem';
 const marginNoteDeclarations = [
 	'float: right;',
 	'clear: right;',
@@ -157,15 +157,41 @@ const marginNoteLayoutCss = [
 	...marginNoteReadingWidths.flatMap(([readingWidth, textWidth]) => [
 		[
 			`@container (min-width: calc(${textWidth} + ${visualTheme.layout.noteWidth} + ${visualTheme.layout.noteGap})) {`,
-			`:root[data-reading-width="${readingWidth}"] .section-note {`,
+			`:root[data-reading-width="${readingWidth}"] .site-page-layout:not(.site-page-layout-tree) .section-note {`,
 				marginNoteDeclarations,
 			'}',
 		'}',
 		].join('\n'),
 		[
-			`@container (min-width: calc(${textWidth} + ${visualTheme.layout.noteWidth} + ${visualTheme.layout.noteGap} - ${vacantContentsTrackWidth})) {`,
-			`:root[data-reading-width="${readingWidth}"] .site-page-layout-tree:not(.site-page-layout-contents) .section-note,`,
-			`:root[data-reading-width="${readingWidth}"][data-focus-reading="on"] .site-page-layout-tree .section-note {`,
+			`@container (min-width: calc(${textWidth} + ${visualTheme.layout.noteWidth} + ${visualTheme.layout.noteGap} + ${marginNoteOuterReserve} - 11rem - ${visualTheme.layout.localNavigationGap})) {`,
+			`:root[data-reader-preferences-ready="true"][data-reading-width="${readingWidth}"][data-focus-reading="on"] .site-page-layout-tree .section-note {`,
+				marginNoteDeclarations,
+			'}',
+		'}',
+		].join('\n'),
+	]),
+	'}',
+	'@media (min-width: 1101px) and (max-width: 1280px) {',
+	...marginNoteReadingWidths.map(([readingWidth, textWidth]) => [
+		`@container (min-width: calc(${textWidth} + ${visualTheme.layout.noteWidth} + ${visualTheme.layout.noteGap} + ${marginNoteOuterReserve})) {`,
+		`:root[data-reading-width="${readingWidth}"] .site-page-layout-tree:not(.site-page-layout-contents) .section-note {`,
+			marginNoteDeclarations,
+		'}',
+	'}',
+	].join('\n')),
+	'}',
+	'@media (min-width: 1281px) {',
+	...marginNoteReadingWidths.flatMap(([readingWidth, textWidth]) => [
+		[
+			`@container (min-width: calc(${textWidth} + ${visualTheme.layout.noteWidth} + ${visualTheme.layout.noteGap})) {`,
+			`:root[data-reading-width="${readingWidth}"] .site-page-layout-tree.site-page-layout-contents .section-note {`,
+				marginNoteDeclarations,
+			'}',
+		'}',
+		].join('\n'),
+		[
+			`@container (min-width: calc(${textWidth} + ${visualTheme.layout.noteWidth} + ${visualTheme.layout.noteGap} + ${marginNoteOuterReserve} - 11rem - ${visualTheme.layout.localNavigationGap})) {`,
+			`:root[data-reading-width="${readingWidth}"] .site-page-layout-tree:not(.site-page-layout-contents) .section-note {`,
 				marginNoteDeclarations,
 			'}',
 		'}',

package/src/lib/generatedImages.ts

@@ -45,6 +45,24 @@ export const getGeneratedImage = (src: string) => readGeneratedImages()[src];
 
 const displaySrc = (src: string) => withBasePath(projectConfig.site.basePath, src);
 
+export const getImageInspectionAttributes = (src: string) => {
+	const image = getGeneratedImage(src);
+	const largestVariant = image?.variants
+		? [...image.variants].sort((left, right) => left.width - right.width).at(-1)
+		: undefined;
+	const publishedSource = image?.kind === 'static'
+		? image.src
+		: largestVariant?.src;
+
+	return {
+		href: displaySrc(publishedSource ?? src),
+		scalable: image?.kind === 'static' || /\.svg(?:[?#]|$)/iu.test(publishedSource ?? src),
+		...(Number.isFinite(image?.width) && Number.isFinite(image?.height)
+			? { width: image?.width, height: image?.height }
+			: {}),
+	};
+};
+
 const getDisplayVariants = (variants: NonNullable<GeneratedImage['variants']>) => {
 	const sortedVariants = [...variants].sort((a, b) => a.width - b.width);
 	const displayVariants = sortedVariants.filter((variant) => variant.width <= maxDisplayImageWidth);

package/src/lib/sectionContent.ts

@@ -3,6 +3,7 @@ import projectConfig from '../../scripts/lib/project-config.mjs';
 import {
 	formatHeadingIdentifierIssue,
 } from '../../scripts/lib/heading-ids.mjs';
+import { splitNornaRenderedBlocks } from '../../scripts/lib/norna-markdown-blocks.mjs';
 import { applyBasePathToHtml } from './basePath';
 import type { SitePage } from './sitePages';
 
@@ -202,32 +203,6 @@ const splitRenderedRegions = (html: string, regionCount: number) => {
 	});
 };
 
-const splitNornaBlockMarkers = (html: string, blocks: ParsedNornaBlock[]) => {
-	const result: Array<{ type: 'html'; html: string } | ParsedNornaBlock> = [];
-	const markerRegex = /<norna-block\s+data-index="(\d+)"\s*><\/norna-block>/g;
-	const seen = new Set<number>();
-	let cursor = 0;
-
-	for (const match of html.matchAll(markerRegex)) {
-		const start = match.index ?? 0;
-		if (start > cursor) result.push({ type: 'html', html: html.slice(cursor, start) });
-
-		const index = Number.parseInt(match[1] ?? '', 10);
-		const block = blocks[index];
-		if (!block) throw new Error(`Rendered Norna block ${index + 1} has no matching parsed block.`);
-		seen.add(index);
-		result.push(block);
-		cursor = start + match[0].length;
-	}
-
-	if (cursor < html.length) result.push({ type: 'html', html: html.slice(cursor) });
-	if (seen.size !== blocks.length) {
-		throw new Error(`Rendered Markdown contains ${seen.size} Norna block markers, but ${blocks.length} blocks were parsed.`);
-	}
-
-	return result.filter((block) => block.type !== 'html' || block.html.trim());
-};
-
 const resolveContentBlocks = async (
 	html: string,
 	blocks: ParsedNornaBlock[],
@@ -240,7 +215,9 @@ const resolveContentBlocks = async (
 		html: await renderInlineNoteMarkdown(note.markdown),
 	})));
 	const renderedHtml = applyInlineNoteMarkup(html, renderedNotes);
-	const splitBlocks = splitNornaBlockMarkers(renderedHtml, blocks);
+	const splitBlocks = splitNornaRenderedBlocks(renderedHtml, blocks) as Array<
+		{ type: 'html'; html: string } | ParsedNornaBlock
+	>;
 	const resolvedBlocks: SectionContentBlock[] = [];
 
 	for (const block of splitBlocks) {

package/src/lib/sitePages.ts

@@ -36,6 +36,7 @@ export type SitePage = SiteNodeBase & {
 	markdown: string;
 	markdownDocument: Awaited<ReturnType<typeof parsePageMarkdown>>;
 	contentLabel: string;
+	contentPath: string;
 };
 
 export type SiteCategory = SiteNodeBase & {
@@ -86,20 +87,21 @@ const compareNumberPaths = (left: number[], right: number[]) => {
 const readPageMarkdownDocument = async (entry: SiteEntry) => {
 	const pageDirectory = getPageDirectory(entry);
 	const contentLabel = `${sitePagesLabel}/${pageDirectory}/content.md`;
-	const { body } = await readSiteFile(path.join(sitePagesDir, pageDirectory, 'content.md'), contentLabel);
+	const contentPath = path.join(sitePagesDir, pageDirectory, 'content.md');
+	const { body } = await readSiteFile(contentPath, contentLabel);
 	const markdownDocument = await parsePageMarkdown(body, { label: contentLabel });
 
 	if (markdownDocument.pageHeadings.length !== 1 || markdownDocument.regions[0]?.kind !== 'page-intro') {
 		throw new Error(`Page entry "${entry.id}" must contain exactly one Markdown H1 page title.`);
 	}
 
-	return { body, contentLabel, markdownDocument };
+	return { body, contentLabel, contentPath, markdownDocument };
 };
 
 const createSitePage = async (entry: SiteEntry): Promise<SitePage> => {
 	const isHome = isHomePageEntry(entry);
 	const pageMetadata = getPageMetadata(entry);
-	const { body, contentLabel, markdownDocument } = await readPageMarkdownDocument(entry);
+	const { body, contentLabel, contentPath, markdownDocument } = await readPageMarkdownDocument(entry);
 	const pageDirectory = pageMetadata.pageDirectory;
 	const pageId = pageMetadata.pageId;
 	const pagePath = pageMetadata.pagePath;
@@ -126,6 +128,7 @@ const createSitePage = async (entry: SiteEntry): Promise<SitePage> => {
 		pagePath,
 		parentPagePath: isHome ? null : pageMetadata.parentPagePath,
 		contentLabel,
+		contentPath,
 		markdown: body,
 		markdownDocument,
 		title: markdownDocument.pageTitle.title,