@janga/norna 0.7.24 → 0.7.26

package/src/lib/sectionContent.ts

@@ -1,8 +1,10 @@
 import { markdownToHtml } from 'satteri';
+import { groupRenderedTabs } from '../../scripts/lib/content-tabs.mjs';
 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';
 
@@ -46,15 +48,9 @@ type PageListItem = {
 	pathname: string;
 	description?: string;
 };
-type InlineNote = {
-	markdown: string;
-	number: number;
-	id: string;
-	referenceId: string;
-	html?: string;
-};
-type SectionContentBlock =
+export type SectionContentBlock =
 	| { type: 'html'; html: string }
+	| { type: 'tabs'; index: number; panels: Array<{ label: string; contentBlocks: SectionContentBlock[] }> }
 	| { type: 'image-stack'; images: ManagedImage[] }
 	| { type: 'image-carousel'; images: ManagedImage[] }
 	| { type: 'card-list'; layout: CardListLayout; flow: CardListFlow; size: CardListSize; width?: CardListWidth; cards: CardListItem[] }
@@ -77,6 +73,11 @@ export type HeadingNavigation = SectionNavigation & {
 	parentId: string | null;
 };
 
+export const flattenContentBlocks = (blocks: SectionContentBlock[]): SectionContentBlock[] =>
+	blocks.flatMap((block) => block.type === 'tabs'
+		? [block, ...block.panels.flatMap((panel) => flattenContentBlocks(panel.contentBlocks))]
+		: [block]);
+
 const explicitHeadingIdRegex = /\s*\{#([a-z0-9-]+)\}\s*$/;
 const imageProvenanceCommentRegex = /<!--\s*norna-image-provenance:[\s\S]*?-->/gi;
 
@@ -88,43 +89,6 @@ const prepareContentHtml = (html: string) =>
 		stripImageProvenanceComments(html),
 	);
 
-const noteDeclarationParagraphRegex = /<p>\s*\{note:\s*[\s\S]*?\}\s*<\/p>/gi;
-const htmlCodeRegionRegex = /<pre\b[\s\S]*?<\/pre>|<code\b[\s\S]*?<\/code>/gi;
-
-const replaceHtmlOutsideCode = (html: string, transform: (value: string) => string) => {
-	let result = '';
-	let cursor = 0;
-
-	for (const match of html.matchAll(htmlCodeRegionRegex)) {
-		const start = match.index ?? 0;
-		result += transform(html.slice(cursor, start));
-		result += match[0];
-		cursor = start + match[0].length;
-	}
-
-	return result + transform(html.slice(cursor));
-};
-
-const applyInlineNoteMarkup = (html: string, notes: InlineNote[]) => {
-	let referenceIndex = 0;
-	const withReferences = replaceHtmlOutsideCode(html, (value) => value.replace(/\{note-ref\}/g, () => {
-		const note = notes[referenceIndex];
-		if (!note) return '{note-ref}';
-
-		referenceIndex += 1;
-		return [
-			'\u2060',
-			`<sup class="section-note-ref"><a id="${note.referenceId}" href="#${note.id}" aria-label="Note ${note.number}" aria-describedby="${note.id}">${note.number}</a></sup>`,
-			`<span class="section-note section-note-margin" id="${note.id}" aria-label="Note ${note.number}" role="note">`,
-			`<a class="section-note-number" href="#${note.referenceId}" aria-label="Note ${note.number}">${note.number}</a>`,
-			`<span class="section-note-content">${note.html ?? ''}</span>`,
-			'</span>',
-		].join('');
-	}));
-
-	return withReferences.replace(noteDeclarationParagraphRegex, '');
-};
-
 const applyH3HeadingIds = (
 	html: string,
 	headings: Array<{ id: string | null }>,
@@ -149,27 +113,6 @@ const applyH3HeadingIds = (
 
 const getImageSourceKey = (page: SitePage, image: string) => `pages/${page.pageDirectory}/images/${image}`;
 
-const renderInlineNoteMarkdown = async (markdown: string) => {
-	const result = await markdownToHtml(markdown, {
-		features: {
-			gfm: true,
-			smartPunctuation: true,
-		},
-	});
-
-	if (/<img\b/i.test(result.html)) {
-		throw new Error('Inline notes cannot contain images. Use a Norna image block with a caption instead.');
-	}
-
-	const inlineHtml = result.html.trim();
-	const paragraph = inlineHtml.match(/^<p>([\s\S]*)<\/p>$/i);
-	if (!paragraph) {
-		throw new Error('Inline notes support inline Markdown only. Move headings, lists, and separate paragraphs into the page content.');
-	}
-
-	return paragraph[1] ?? '';
-};
-
 const renderHeadingTitleHtml = async (headingSource: string) => {
 	const headingMarkdown = headingSource
 		.replace(/^#{1,6}[ \t]+/, '')
@@ -202,45 +145,15 @@ 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[],
 	page: SitePage,
 	childPages: SitePage[],
-	inlineNotes: InlineNote[] = [],
 ) => {
-	const renderedNotes = await Promise.all(inlineNotes.map(async (note) => ({
-		...note,
-		html: await renderInlineNoteMarkdown(note.markdown),
-	})));
-	const renderedHtml = applyInlineNoteMarkup(html, renderedNotes);
-	const splitBlocks = splitNornaBlockMarkers(renderedHtml, blocks);
+	const splitBlocks = splitNornaRenderedBlocks(html, blocks) as Array<
+		{ type: 'html'; html: string } | ParsedNornaBlock
+	>;
 	const resolvedBlocks: SectionContentBlock[] = [];
 
 	for (const block of splitBlocks) {
@@ -296,6 +209,10 @@ export const getSectionsContent = async (
 	childPages: SitePage[] = [],
 ) => {
 	const pageDocument = page.markdownDocument;
+	const noteError = pageDocument.noteDiagnostics.find((issue) => issue.severity === 'error');
+	if (noteError) throw new Error(noteError.message);
+	const tabError = pageDocument.diagnostics.find((issue) => issue.code === 'invalid-content-tabs');
+	if (tabError) throw new Error(tabError.message);
 	const sourceLabel = page.contentLabel;
 	const headingIdentifierIssues = pageDocument.headingIssues;
 	if (headingIdentifierIssues.length > 0) {
@@ -303,7 +220,6 @@ export const getSectionsContent = async (
 	}
 	const sections: ResolvedSection[] = [];
 	const sectionIds = new Set<string>();
-	let nextNoteNumber = 1;
 	const pageHeadingCount = pageDocument.pageHeadings.length;
 
 	if (pageHeadingCount !== 1 || pageDocument.regions[0]?.kind !== 'page-intro') {
@@ -333,29 +249,20 @@ export const getSectionsContent = async (
 		if (bodySection.noteErrors.length > 0) {
 			throw new Error(bodySection.noteErrors[0].message);
 		}
-		if (bodySection.calloutErrors.length > 0) {
-			throw new Error(bodySection.calloutErrors[0].message);
+		const calloutErrors = bodySection.calloutErrors.filter((error) => error.severity !== 'warning');
+		if (calloutErrors.length > 0) {
+			throw new Error(calloutErrors[0].message);
 		}
 
-		const inlineNotes = bodySection.notes.map((note) => {
-			const number = nextNoteNumber;
-			nextNoteNumber += 1;
-			const pageKey = page.pageId || 'home';
-			const noteKey = `${pageKey}-${id ?? 'page-title'}-${number}`;
-			return {
-				...note,
-				number,
-				id: `note-${noteKey}`,
-				referenceId: `note-ref-${noteKey}`,
-			};
-		});
-
 		sections.push({
 			id,
 			title,
 			titleHtml: await renderHeadingTitleHtml(bodySection.heading.source),
 			headingLevel,
-			contentBlocks: await resolveContentBlocks(content, bodySection.blocks, page, childPages, inlineNotes),
+			contentBlocks: groupRenderedTabs(
+				await resolveContentBlocks(content, bodySection.blocks, page, childPages),
+				bodySection.tabGroups,
+			),
 		});
 	}
 

package/src/lib/siteNavigation.ts

@@ -3,7 +3,6 @@ import type { SiteNode, SitePage } from './sitePages';
 import {
 	flattenSiteNavigationTree as flattenSiteNavigationTreeShared,
 	getDirectChildPages as getDirectChildPagesShared,
-	getFirstPageInNavigationNode as getFirstPageInNavigationNodeShared,
 	getListedSiteNavigationTree as getListedSiteNavigationTreeShared,
 	getSequentialPageNavigation as getSequentialPageNavigationShared,
 } from '../../scripts/lib/site-navigation-tree.mjs';
@@ -22,10 +21,6 @@ export const getListedSiteNavigationTree = (entries: SiteNavigationEntry[]) => (
 	getListedSiteNavigationTreeShared(entries) as SiteNavigationNode[]
 );
 
-export const getFirstPageInNavigationNode = (node: SiteNavigationNode): SitePage | null => (
-	getFirstPageInNavigationNodeShared(node) as SitePage | null
-);
-
 export const flattenSiteNavigationTree = (nodes: SiteNavigationNode[]): SiteNavigationNode[] => (
 	flattenSiteNavigationTreeShared(nodes) as SiteNavigationNode[]
 );

package/src/lib/sitePages.ts

@@ -4,6 +4,7 @@ import { decodePageDirectoryPath, parsePageDirectoryPath } from '../../scripts/l
 import { parsePageMarkdown } from '../../scripts/lib/page-markdown.mjs';
 import { readSiteFile } from '../../scripts/lib/site-content.mjs';
 import { homePageDirectory } from '../../scripts/lib/site-conventions.mjs';
+import { assertCategoryDestinationModel, createCategoryDestinationModel } from '../../scripts/lib/category-destinations.mjs';
 import { getSiteStructure } from '../../scripts/lib/site-structure.mjs';
 import { sitePagesDir, sitePagesLabel } from '../../scripts/lib/site-paths.mjs';
 
@@ -20,6 +21,7 @@ type SiteNodeBase = {
 	depth: number;
 	pageDirectories: string[];
 	pathSegment: string;
+	pathname: string;
 	pageDirectory: string;
 	pageId: string;
 	pageIds: string[];
@@ -36,10 +38,12 @@ export type SitePage = SiteNodeBase & {
 	markdown: string;
 	markdownDocument: Awaited<ReturnType<typeof parsePageMarkdown>>;
 	contentLabel: string;
+	contentPath: string;
 };
 
 export type SiteCategory = SiteNodeBase & {
 	kind: 'category';
+	categorySourceLabel: string;
 };
 
 export type SiteNode = SitePage | SiteCategory;
@@ -86,20 +90,26 @@ 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 markdownDocument = await parsePageMarkdown(body, { label: contentLabel });
+	const contentPath = path.join(sitePagesDir, pageDirectory, 'content.md');
+	const { body, frontmatter } = await readSiteFile(contentPath, contentLabel);
+	const markdownDocument = await parsePageMarkdown(body, {
+		label: contentLabel,
+		lineOffset: frontmatter.split('\n').length - 1,
+	});
+	const detailsError = markdownDocument.diagnostics.find((issue) => issue.code === 'heading-inside-details');
+	if (detailsError) throw new Error(`${detailsError.message} ${detailsError.fix}`);
 
 	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 +136,7 @@ const createSitePage = async (entry: SiteEntry): Promise<SitePage> => {
 		pagePath,
 		parentPagePath: isHome ? null : pageMetadata.parentPagePath,
 		contentLabel,
+		contentPath,
 		markdown: body,
 		markdownDocument,
 		title: markdownDocument.pageTitle.title,
@@ -142,6 +153,8 @@ const createSiteCategory = (category: Awaited<ReturnType<typeof getSiteStructure
 		order: category.pageOrder,
 	},
 	pathSegment: category.pagePath,
+	pathname: getPagePathname(category.pagePath),
+	categorySourceLabel: category.categorySourceLabel,
 	pageDirectory: category.pageDirectory,
 	pageDirectories: category.pageDirectories,
 	pageId: category.pageId,
@@ -223,6 +236,7 @@ export const getSiteModel = async (entries: SiteEntry[]) => {
 	}
 
 	return {
+		categoryDestinations: assertCategoryDestinationModel(createCategoryDestinationModel(nodes)),
 		categories: nodes.filter((node): node is SiteCategory => node.kind === 'category'),
 		nodes,
 		pages,

package/src/lib/table-sort-tooltip.ts

@@ -0,0 +1,109 @@
+export const createTableSortTooltip = () => {
+	const tooltip = document.createElement('div');
+	tooltip.id = 'norna-table-sort-tooltip';
+	tooltip.className = 'norna-table-sort-tooltip';
+	tooltip.setAttribute('role', 'tooltip');
+	tooltip.hidden = true;
+	document.body.append(tooltip);
+	let owner: HTMLButtonElement | null = null;
+	let openTimer: ReturnType<typeof setTimeout> | undefined;
+	let closeTimer: ReturnType<typeof setTimeout> | undefined;
+
+	const setDescription = (button: HTMLButtonElement, enabled: boolean) => {
+		const ids = new Set((button.getAttribute('aria-describedby') ?? '').split(/\s+/u).filter(Boolean));
+		if (enabled) ids.add(tooltip.id);
+		else ids.delete(tooltip.id);
+		if (ids.size) button.setAttribute('aria-describedby', [...ids].join(' '));
+		else button.removeAttribute('aria-describedby');
+	};
+	const hide = () => {
+		clearTimeout(openTimer);
+		clearTimeout(closeTimer);
+		if (owner) setDescription(owner, false);
+		owner = null;
+		tooltip.hidden = true;
+	};
+	const position = () => {
+		if (!owner || tooltip.hidden) return;
+		const bounds = owner.getBoundingClientRect();
+		const tip = tooltip.getBoundingClientRect();
+		const width = document.documentElement.clientWidth;
+		const height = window.innerHeight;
+		const left = Math.max(8, Math.min(width - tip.width - 8, bounds.left + (bounds.width - tip.width) / 2));
+		const below = bounds.bottom + 4;
+		const top = below + tip.height <= height - 8 ? below : Math.max(8, bounds.top - tip.height - 4);
+		tooltip.style.left = `${left}px`;
+		tooltip.style.top = `${top}px`;
+	};
+	const refresh = (button: HTMLButtonElement) => {
+		if (button !== owner || tooltip.hidden) return;
+		tooltip.textContent = button.dataset.tableSortAction ?? '';
+		position();
+	};
+	const show = (button: HTMLButtonElement, delay: number) => {
+		if (button === owner && !tooltip.hidden) {
+			clearTimeout(closeTimer);
+			return;
+		}
+		hide();
+		owner = button;
+		const open = () => {
+			if (!button.isConnected || button.closest('[inert]') || button.getAttribute('aria-hidden') === 'true') {
+				hide();
+				return;
+			}
+			tooltip.hidden = false;
+			setDescription(button, true);
+			refresh(button);
+		};
+		if (delay === 0) open();
+		else openTimer = setTimeout(open, delay);
+	};
+	const scheduleHide = () => {
+		clearTimeout(openTimer);
+		clearTimeout(closeTimer);
+		// Allow the pointer to cross the small gap into the tooltip.
+		closeTimer = setTimeout(() => {
+			if (!tooltip.matches(':hover') && !owner?.matches(':hover, :focus-visible')) hide();
+		}, 120);
+	};
+	tooltip.addEventListener('pointerenter', () => clearTimeout(closeTimer));
+	tooltip.addEventListener('pointerleave', scheduleHide);
+	document.addEventListener('keydown', (event) => {
+		if (event.key === 'Escape' && owner) {
+			hide();
+			event.preventDefault();
+		}
+	});
+	document.addEventListener('scroll', () => {
+		// Keyboard focus may scroll a clipped heading into view after opening its tip.
+		if (owner?.matches(':focus-visible')) {
+			const bounds = owner.getBoundingClientRect();
+			if (bounds.bottom > 0 && bounds.top < window.innerHeight) {
+				position();
+				return;
+			}
+		}
+		hide();
+	}, { capture: true, passive: true });
+	window.addEventListener('resize', hide, { passive: true });
+
+	return {
+		refresh,
+		attach(button: HTMLButtonElement) {
+			setDescription(button, false);
+			button.addEventListener('pointerenter', (event) => {
+				if (event.pointerType !== 'touch') show(button, 500);
+			});
+			button.addEventListener('pointerleave', () => {
+				if (button === owner) scheduleHide();
+			});
+			button.addEventListener('focus', () => {
+				if (button.matches(':focus-visible')) show(button, 0);
+			});
+			button.addEventListener('blur', () => {
+				if (button === owner) scheduleHide();
+			});
+		},
+	};
+};

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

@@ -45,18 +45,28 @@ export async function getStaticPaths() {
 		? [{ params: { slug: 'search' }, props: { searchPage: true } }]
 		: [];
 
-	return [...pagePaths, ...aliasPaths, ...searchPath];
+	const categoryPaths = siteModel.categoryDestinations.destinations.map((destination) => ({
+		params: { slug: destination.category.pathSegment },
+		props: destination.kind === 'redirect' ? {
+			alias: {
+				targetPathname: destination.target.pathname,
+				targetTitle: destination.target.title,
+				categoryTitle: destination.category.title,
+			},
+		} : { categoryPath: destination.pathname },
+	}));
+	return [...pagePaths, ...aliasPaths, ...searchPath, ...categoryPaths];
 }
 
-const { alias, entry, searchPage } = Astro.props;
+const { alias, entry, searchPage, categoryPath } = Astro.props;
 
-if (!searchPage && !alias && (!entry || isHomePageEntry(entry))) {
+if (!searchPage && !alias && !categoryPath && (!entry || isHomePageEntry(entry))) {
 	throw new Error('Page entry is missing.');
 }
 
 const currentPage = entry ? await getSitePage(entry) : null;
 
-if (!searchPage && !alias && !currentPage?.pathSegment) {
+if (!searchPage && !alias && !categoryPath && !currentPage?.pathSegment) {
 	throw new Error(`Page "${entry.id}" needs a page id.`);
 }
 ---
@@ -64,5 +74,5 @@ if (!searchPage && !alias && !currentPage?.pathSegment) {
 {searchPage
 	? <SearchPage />
 	: alias
-	? <PageAliasRedirect targetPathname={alias.targetPathname} targetTitle={alias.targetTitle} />
-	: <SitePage entry={entry} />}
+	? <PageAliasRedirect targetPathname={alias.targetPathname} targetTitle={alias.targetTitle} categoryTitle={alias.categoryTitle} />
+	: <SitePage entry={entry} categoryPath={categoryPath} />}