@janga/norna 0.7.23 → 0.7.25

package/src/components/ImageStackEnhancement.astro

@@ -0,0 +1,331 @@
+---
+import { Maximize2, Minimize2, X } from '@lucide/astro';
+import projectConfig from '../../scripts/lib/project-config.mjs';
+
+const labels = projectConfig.locale.labels;
+---
+
+<dialog class="image-inspector" data-image-inspector aria-label={labels.imageInspection}>
+	<div class="image-inspector-layout">
+		<div class="image-inspector-controls">
+			<button
+				type="button"
+				data-image-inspector-size
+				hidden
+				aria-label={labels.imageInspectionActualSize}
+				title={labels.imageInspectionActualSize}
+				data-fit-label={labels.imageInspectionFit}
+				data-actual-label={labels.imageInspectionActualSize}
+			>
+				<Maximize2 aria-hidden="true" data-image-inspector-size-icon="actual" size={20} stroke-width={2} />
+				<Minimize2 aria-hidden="true" data-image-inspector-size-icon="fit" hidden size={20} stroke-width={2} />
+			</button>
+			<button
+				type="button"
+				data-image-inspector-close
+				aria-label={labels.imageInspectionClose}
+				title={labels.imageInspectionClose}
+			>
+				<X aria-hidden="true" size={20} stroke-width={2} />
+			</button>
+		</div>
+		<div class="image-inspector-media" data-image-inspector-media data-image-inspector-mode="fit">
+			<img data-image-inspector-image alt="" />
+		</div>
+		<p class="image-inspector-caption" id="image-inspector-caption" data-image-inspector-caption hidden></p>
+	</div>
+</dialog>
+
+<script>
+	const dialog = document.querySelector<HTMLDialogElement>('[data-image-inspector]');
+	const triggers = Array.from(document.querySelectorAll<HTMLAnchorElement>('[data-image-inspection-trigger]'));
+	const figures = Array.from(document.querySelectorAll<HTMLElement>('[data-image-stack-figure]'));
+	const enlargementThreshold = 1.2;
+	const persistentCaptionViewportWidth = 1101;
+	const persistentCaptionMinimumWidth = 160;
+	const persistentCaptionHeightRatio = 0.9;
+	let captionScheduledFrame: number | null = null;
+
+	const isVisible = (element: Element) => {
+		const style = getComputedStyle(element);
+		const bounds = element.getBoundingClientRect();
+		return style.display !== 'none' && style.visibility !== 'hidden' && bounds.width > 0 && bounds.height > 0;
+	};
+
+	const rectanglesOverlap = (first: DOMRect, second: DOMRect) => (
+		first.left < second.right
+		&& first.right > second.left
+		&& first.top < second.bottom
+		&& first.bottom > second.top
+	);
+
+	const resolveCssLength = (value: string, fallback: number) => {
+		const probe = document.createElement('span');
+		probe.style.cssText = [
+			'position:fixed',
+			'visibility:hidden',
+			'pointer-events:none',
+			'box-sizing:content-box',
+			'height:0',
+			'padding:0',
+			'border:0',
+			`width:${value.trim() || `${fallback}px`}`,
+		].join(';');
+		document.body.append(probe);
+		const width = probe.getBoundingClientRect().width;
+		probe.remove();
+		return Number.isFinite(width) && width > 0 ? width : fallback;
+	};
+
+	const clearPersistentCaption = (figure: HTMLElement) => {
+		delete figure.dataset.imageCaptionPlacement;
+		figure.style.removeProperty('--image-persistent-caption-inline-start');
+		figure.style.removeProperty('--image-persistent-caption-width');
+		figure.style.removeProperty('--image-persistent-caption-reserve');
+		figure.style.removeProperty('--image-persistent-caption-block-start');
+		figure.style.removeProperty('--image-persistent-caption-block-end');
+	};
+
+	const updatePersistentCaption = (figure: HTMLElement) => {
+		clearPersistentCaption(figure);
+		if (window.innerWidth < persistentCaptionViewportWidth) return;
+
+		const frame = figure.querySelector<HTMLElement>('.managed-image-frame');
+		const caption = figure.querySelector<HTMLElement>('.image-meta');
+		const image = frame?.querySelector<HTMLImageElement>('img');
+		const layout = figure.closest<HTMLElement>('.site-page-layout-tree')
+			?? figure.closest<HTMLElement>('.site-content');
+		if (!frame || !caption || !image || !layout || !isVisible(frame) || !isVisible(caption)) return;
+
+		const headerOffset = Number.parseFloat(
+			getComputedStyle(document.documentElement).getPropertyValue('--site-top-anchor-offset'),
+		) || 0;
+		const usableViewportHeight = Math.max(0, window.innerHeight - headerOffset);
+		const imageBounds = image.getBoundingClientRect();
+		if (imageBounds.height < usableViewportHeight * persistentCaptionHeightRatio) return;
+
+		const visibleContentsRail = Array.from(
+			layout.querySelectorAll<HTMLElement>('.page-contents-navigation-rail'),
+		).some(isVisible);
+		const reservesContentsLane = layout.dataset.pageContentsPlacement === 'contents-rail'
+			&& document.documentElement.dataset.focusReading !== 'on';
+		if (visibleContentsRail || reservesContentsLane) return;
+
+		const frameBounds = frame.getBoundingClientRect();
+		const figureBounds = figure.getBoundingClientRect();
+		const captionBounds = caption.getBoundingClientRect();
+		const layoutBounds = layout.getBoundingClientRect();
+		const rootStyle = getComputedStyle(document.documentElement);
+		const figureStyle = getComputedStyle(figure);
+		const gap = resolveCssLength(figureStyle.getPropertyValue('--image-caption-inline-gap'), 12);
+		const preferredWidth = resolveCssLength(rootStyle.getPropertyValue('--section-note-width'), 192);
+		const isRightToLeft = getComputedStyle(figure).direction === 'rtl';
+		const availableWidth = isRightToLeft
+			? imageBounds.left - layoutBounds.left - gap
+			: layoutBounds.right - imageBounds.right - gap;
+		const captionWidth = Math.min(preferredWidth, availableWidth);
+		if (captionWidth < persistentCaptionMinimumWidth || captionBounds.height > imageBounds.height) return;
+
+		const proposedBounds = new DOMRect(
+			isRightToLeft ? imageBounds.left - gap - captionWidth : imageBounds.right + gap,
+			imageBounds.top,
+			captionWidth,
+			imageBounds.height,
+		);
+		const laneClaims = Array.from(figure.closest('.site-section')?.querySelectorAll<HTMLElement>([
+			'.section-note',
+			'[data-table-layout="end"]',
+			'[data-table-layout="canvas"]',
+		].join(', ')) ?? []).filter((element) => element !== figure && isVisible(element));
+		if (laneClaims.some((element) => rectanglesOverlap(proposedBounds, element.getBoundingClientRect()))) return;
+
+		const reserve = Math.max(0, captionBounds.bottom - frameBounds.bottom);
+		const inlineStart = isRightToLeft
+			? figureBounds.right - imageBounds.left + gap
+			: imageBounds.right - figureBounds.left + gap;
+		const blockStart = imageBounds.top - figureBounds.top;
+		const blockEnd = figureBounds.bottom - imageBounds.bottom;
+		figure.style.setProperty('--image-persistent-caption-inline-start', `${inlineStart}px`);
+		figure.style.setProperty('--image-persistent-caption-width', `${captionWidth}px`);
+		figure.style.setProperty('--image-persistent-caption-reserve', `${reserve}px`);
+		figure.style.setProperty('--image-persistent-caption-block-start', `${blockStart}px`);
+		figure.style.setProperty('--image-persistent-caption-block-end', `${blockEnd}px`);
+		figure.dataset.imageCaptionPlacement = 'persistent';
+	};
+
+	const updatePersistentCaptions = () => {
+		captionScheduledFrame = null;
+		figures.forEach(updatePersistentCaption);
+	};
+
+	const schedulePersistentCaptionUpdate = () => {
+		if (captionScheduledFrame !== null) return;
+		captionScheduledFrame = requestAnimationFrame(updatePersistentCaptions);
+	};
+
+	if (figures.length > 0) {
+		figures.forEach((figure) => {
+			const image = figure.querySelector('img');
+			if (image && !image.complete) image.addEventListener('load', schedulePersistentCaptionUpdate, { once: true });
+		});
+		if ('ResizeObserver' in window) {
+			const observer = new ResizeObserver(schedulePersistentCaptionUpdate);
+			figures.forEach((figure) => {
+				const frame = figure.querySelector('.managed-image-frame');
+				if (frame) observer.observe(frame);
+			});
+		}
+		const preferenceObserver = new MutationObserver(schedulePersistentCaptionUpdate);
+		preferenceObserver.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: ['data-focus-reading', 'data-reading-width'],
+		});
+		window.addEventListener('resize', schedulePersistentCaptionUpdate, { passive: true });
+		document.fonts?.ready.then(schedulePersistentCaptionUpdate).catch(() => {});
+		updatePersistentCaptions();
+	}
+
+	if (dialog && typeof dialog.showModal === 'function' && triggers.length > 0) {
+		const inspectedImage = dialog.querySelector<HTMLImageElement>('[data-image-inspector-image]');
+		const media = dialog.querySelector<HTMLElement>('[data-image-inspector-media]');
+		const caption = dialog.querySelector<HTMLElement>('[data-image-inspector-caption]');
+		const sizeButton = dialog.querySelector<HTMLButtonElement>('[data-image-inspector-size]');
+		const closeButton = dialog.querySelector<HTMLButtonElement>('[data-image-inspector-close]');
+		let activeTrigger: HTMLAnchorElement | null = null;
+		let scheduledFrame: number | null = null;
+		let sizeControlScheduledFrame: number | null = null;
+
+		const setInspectorMode = (mode: 'fit' | 'actual') => {
+			if (!media || !sizeButton) return;
+			media.dataset.imageInspectorMode = mode;
+			const nextLabel = mode === 'fit'
+				? sizeButton.dataset.actualLabel
+				: sizeButton.dataset.fitLabel;
+			if (nextLabel) {
+				sizeButton.setAttribute('aria-label', nextLabel);
+				sizeButton.title = nextLabel;
+			}
+			sizeButton.querySelectorAll<SVGElement>('[data-image-inspector-size-icon]').forEach((icon) => {
+				icon.hidden = icon.dataset.imageInspectorSizeIcon !== (mode === 'fit' ? 'actual' : 'fit');
+			});
+		};
+
+		const canInspect = (trigger: HTMLAnchorElement) => {
+			const image = trigger.querySelector('img');
+			const width = Number(trigger.dataset.imageIntrinsicWidth);
+			const height = Number(trigger.dataset.imageIntrinsicHeight);
+			if (!image || !Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) {
+				return false;
+			}
+
+			const bounds = image.getBoundingClientRect();
+			if (bounds.width <= 0 || bounds.height <= 0) return false;
+			const captionReserve = trigger.getAttribute('aria-describedby') ? 176 : 112;
+			const availableWidth = Math.max(0, window.innerWidth - 48);
+			const availableHeight = Math.max(0, window.innerHeight - captionReserve);
+			const fitScale = Math.min(1, availableWidth / width, availableHeight / height);
+			const renderedScale = Math.min(bounds.width / width, bounds.height / height);
+			const fitGain = fitScale / renderedScale;
+			const actualSizeGain = 1 / renderedScale;
+
+			return Math.max(fitGain, actualSizeGain) >= enlargementThreshold;
+		};
+
+		const updateSizeControlAvailability = () => {
+			sizeControlScheduledFrame = null;
+			if (!activeTrigger || !inspectedImage || !media || !sizeButton) return;
+
+			const isScalable = activeTrigger.dataset.imageInspectionScalable === 'true';
+			const intrinsicWidth = inspectedImage.naturalWidth;
+			const intrinsicHeight = inspectedImage.naturalHeight;
+			const fitScale = intrinsicWidth > 0 && intrinsicHeight > 0
+				? Math.min(1, media.clientWidth / intrinsicWidth, media.clientHeight / intrinsicHeight)
+				: 1;
+			const actualSizeGain = fitScale > 0 ? 1 / fitScale : 1;
+			const isUseful = !isScalable && actualSizeGain >= enlargementThreshold;
+
+			if (!isUseful && media.dataset.imageInspectorMode === 'actual') setInspectorMode('fit');
+			if (!isUseful && document.activeElement === sizeButton) closeButton?.focus();
+			sizeButton.hidden = !isUseful;
+			sizeButton.disabled = !isUseful;
+		};
+
+		const scheduleSizeControlUpdate = () => {
+			if (sizeControlScheduledFrame !== null) return;
+			sizeControlScheduledFrame = requestAnimationFrame(updateSizeControlAvailability);
+		};
+
+		const updateAvailability = () => {
+			scheduledFrame = null;
+			triggers.forEach((trigger) => {
+				trigger.dataset.imageInspectionAvailable = canInspect(trigger) ? 'true' : 'false';
+			});
+		};
+
+		const scheduleAvailabilityUpdate = () => {
+			if (scheduledFrame !== null) return;
+			scheduledFrame = requestAnimationFrame(updateAvailability);
+		};
+
+		const openInspector = (trigger: HTMLAnchorElement) => {
+			if (!inspectedImage || !caption || !closeButton) return;
+			const sourceImage = trigger.querySelector('img');
+			const captionId = trigger.getAttribute('aria-describedby');
+			const sourceCaption = captionId ? document.getElementById(captionId) : null;
+			activeTrigger = trigger;
+			sizeButton?.setAttribute('disabled', '');
+			if (sizeButton) sizeButton.hidden = true;
+			inspectedImage.src = trigger.href;
+			inspectedImage.alt = sourceImage?.alt ?? '';
+			if (sourceCaption?.textContent?.trim()) {
+				caption.textContent = sourceCaption.textContent.trim();
+				caption.hidden = false;
+				inspectedImage.setAttribute('aria-describedby', caption.id);
+			} else {
+				caption.textContent = '';
+				caption.hidden = true;
+				inspectedImage.removeAttribute('aria-describedby');
+			}
+			setInspectorMode('fit');
+			document.documentElement.dataset.imageInspectorOpen = 'true';
+			dialog.showModal();
+			closeButton.focus();
+			if (inspectedImage.complete) scheduleSizeControlUpdate();
+		};
+
+		triggers.forEach((trigger) => {
+			const image = trigger.querySelector('img');
+			if (image && !image.complete) image.addEventListener('load', scheduleAvailabilityUpdate, { once: true });
+			trigger.addEventListener('click', (event) => {
+				if (trigger.dataset.imageInspectionAvailable !== 'true') return;
+				event.preventDefault();
+				openInspector(trigger);
+			});
+		});
+
+		sizeButton?.addEventListener('click', () => {
+			setInspectorMode(media?.dataset.imageInspectorMode === 'actual' ? 'fit' : 'actual');
+		});
+		closeButton?.addEventListener('click', () => dialog.close());
+		dialog.addEventListener('close', () => {
+			delete document.documentElement.dataset.imageInspectorOpen;
+			activeTrigger?.focus();
+			activeTrigger = null;
+			if (inspectedImage) inspectedImage.removeAttribute('src');
+		});
+
+		if ('ResizeObserver' in window) {
+			const observer = new ResizeObserver(scheduleAvailabilityUpdate);
+			triggers.forEach((trigger) => observer.observe(trigger));
+			if (media) new ResizeObserver(scheduleSizeControlUpdate).observe(media);
+		} else {
+			window.addEventListener('resize', () => {
+				scheduleAvailabilityUpdate();
+				scheduleSizeControlUpdate();
+			}, { passive: true });
+		}
+		inspectedImage?.addEventListener('load', scheduleSizeControlUpdate);
+		document.fonts?.ready.then(scheduleAvailabilityUpdate).catch(() => {});
+		updateAvailability();
+	}
+</script>

package/src/components/NavigationPageTree.astro

@@ -7,7 +7,7 @@ import PageContentsLinks from './PageContentsLinks.astro';
 
 interface Props {
 	nodes: SiteNavigationNode[];
-	currentPage: SitePage;
+	currentPage?: SitePage;
 	variant: 'mobile' | 'sidebar' | 'submenu';
 	integratePageSections?: boolean;
 }
@@ -15,26 +15,31 @@ interface Props {
 const { nodes, currentPage, variant, integratePageSections = false } = Astro.props;
 const pageHref = (page: SitePage) => withBasePath(projectConfig.site.basePath, page.pathname);
 const hasBranch = (node: SiteNavigationNode) => node.children.length > 0;
-const isCurrentPage = (page: SitePage) => page.pathname === currentPage.pathname;
-const isCurrentBranch = (node: SiteNode) => (
+const isCurrentPage = (page: SitePage) => currentPage?.pathname === page.pathname;
+const isCurrentBranch = (node: SiteNode) => Boolean(currentPage && (
 	currentPage.pageDirectory === node.pageDirectory
 	|| currentPage.pageDirectory.startsWith(`${node.pageDirectory}/pages/`)
-);
+));
 const getBranchId = (node: SiteNode) => [
 	'navigation',
 	variant,
 	node.pagePath || 'home',
 	'children',
 ].join('-').replace(/[^a-z0-9-]+/gi, '-');
+const getSectionsId = (node: SiteNode) => [
+	'navigation',
+	variant,
+	node.pagePath || 'home',
+	'sections',
+].join('-').replace(/[^a-z0-9-]+/gi, '-');
 const hasPageSections = (node: SiteNavigationNode) => (
 	node.node.kind === 'page' && node.headings.some((heading) => heading.depth === 2)
 );
-const hasPageDisclosure = (node: SiteNavigationNode) => hasBranch(node) || hasPageSections(node);
-const usesPageDisclosure = (node: SiteNavigationNode) => (
-	variant === 'sidebar'
-		? hasBranch(node)
-		: integratePageSections && hasPageDisclosure(node)
+const showsPageSections = (node: SiteNavigationNode) => (
+	integratePageSections
+	&& hasPageSections(node)
 );
+const usesPageDisclosure = (node: SiteNavigationNode) => variant !== 'submenu' && hasBranch(node);
 ---
 
 <ul class:list={['navigation-page-tree', `navigation-page-tree-${variant}`]}>
@@ -42,9 +47,13 @@ const usesPageDisclosure = (node: SiteNavigationNode) => (
 		<li
 			class:list={['navigation-page-node', {
 				'navigation-page-node-category': node.node.kind === 'category',
+				'navigation-page-node-page-disclosure': node.node.kind === 'page' && usesPageDisclosure(node),
 				'navigation-page-node-current': node.node.kind === 'page' && isCurrentPage(node.node),
 				'navigation-page-node-current-branch': isCurrentBranch(node.node),
 			}]}
+			data-navigation-title={node.node.title}
+			data-navigation-kind={node.node.kind}
+			data-navigation-current-page={node.node.kind === 'page' && isCurrentPage(node.node) ? 'true' : undefined}
 		>
 			{node.node.kind === 'category' ? (
 				<details
@@ -80,26 +89,69 @@ const usesPageDisclosure = (node: SiteNavigationNode) => (
 					data-page-path={node.node.pagePath || '/'}
 					data-current-branch={isCurrentBranch(node.node) ? 'true' : undefined}
 					data-current-page={isCurrentPage(node.node) ? 'true' : undefined}
-					data-has-sections={hasPageSections(node) ? 'true' : undefined}
 					open={isCurrentBranch(node.node)}
 				>
 					<summary
 						class="navigation-page-summary"
 						aria-controls={getBranchId(node.node)}
+						aria-label={`${projectConfig.locale.labels.navigationChildren}: ${node.node.title}`}
 					>
-						<span class="navigation-page-summary-title">{node.node.title}</span>
 						<span class="navigation-page-chevron" aria-hidden="true"></span>
 					</summary>
+				</details>
+				<a
+					class:list={['navigation-page-open-link', { 'mobile-nav-destination': variant === 'mobile' }]}
+					href={pageHref(node.node)}
+					aria-current={isCurrentPage(node.node) ? 'page' : undefined}
+				>
+					{node.node.title}
+				</a>
+				<div id={getBranchId(node.node)} class="navigation-page-branch-content">
+					{showsPageSections(node) && (
+						<nav
+							class="navigation-page-sections"
+							aria-label={`${projectConfig.locale.labels.pageNavigation}: ${node.node.title}`}
+						>
+							<PageContentsLinks
+								headings={node.headings}
+								variant={variant === 'mobile' ? 'mobile' : 'desktop'}
+								pageHref={isCurrentPage(node.node) ? undefined : pageHref(node.node)}
+							/>
+						</nav>
+					)}
+					{hasBranch(node) && (
+						<Astro.self
+							nodes={node.children}
+							currentPage={currentPage}
+							variant={variant}
+							integratePageSections={integratePageSections}
+						/>
+					)}
+				</div>
+			) : variant !== 'submenu' ? (
+				<>
 					<a
-						class:list={['navigation-page-open-link', { 'mobile-nav-destination': variant === 'mobile' }]}
+						class:list={['navigation-page-link', { 'mobile-nav-destination': variant === 'mobile' }]}
 						href={pageHref(node.node)}
 						aria-current={isCurrentPage(node.node) ? 'page' : undefined}
 					>
 						{node.node.title}
 					</a>
-					<div id={getBranchId(node.node)} class="navigation-page-branch-content">
-						{integratePageSections && hasPageSections(node) && (
+					{showsPageSections(node) && (
+						<details
+							class="navigation-page-sections-disclosure"
+							data-page-path={node.node.pagePath || '/'}
+							data-current-page={isCurrentPage(node.node) ? 'true' : undefined}
+							open={isCurrentPage(node.node)}
+						>
+							<summary
+								aria-controls={getSectionsId(node.node)}
+								aria-label={`${projectConfig.locale.labels.pageSections}: ${node.node.title}`}
+							>
+								<span class="navigation-page-chevron" aria-hidden="true"></span>
+							</summary>
 							<nav
+								id={getSectionsId(node.node)}
 								class="navigation-page-sections"
 								aria-label={`${projectConfig.locale.labels.pageNavigation}: ${node.node.title}`}
 							>
@@ -109,47 +161,6 @@ const usesPageDisclosure = (node: SiteNavigationNode) => (
 									pageHref={isCurrentPage(node.node) ? undefined : pageHref(node.node)}
 								/>
 							</nav>
-						)}
-						{hasBranch(node) && (
-							<Astro.self
-								nodes={node.children}
-								currentPage={currentPage}
-								variant={variant}
-								integratePageSections={integratePageSections}
-							/>
-						)}
-					</div>
-				</details>
-			) : variant !== 'submenu' ? (
-				<>
-					<a
-						class:list={['navigation-page-link', { 'mobile-nav-destination': variant === 'mobile' }]}
-						href={pageHref(node.node)}
-						aria-current={isCurrentPage(node.node) ? 'page' : undefined}
-					>
-						{node.node.title}
-					</a>
-					{hasBranch(node) && (
-						<details
-							class="navigation-page-branch"
-							data-page-path={node.node.pagePath || '/'}
-							data-current-branch={isCurrentBranch(node.node) ? 'true' : undefined}
-							open={isCurrentBranch(node.node)}
-						>
-							<summary aria-controls={getBranchId(node.node)}>
-								<span class="visually-hidden">
-									{projectConfig.locale.labels.navigationChildren}: {node.node.title}
-								</span>
-								<span aria-hidden="true"></span>
-							</summary>
-							<div id={getBranchId(node.node)} class="navigation-page-branch-content">
-								<Astro.self
-									nodes={node.children}
-									currentPage={currentPage}
-									variant={variant}
-									integratePageSections={integratePageSections}
-								/>
-							</div>
 						</details>
 					)}
 				</>

package/src/components/NavigationTreeControls.astro

@@ -0,0 +1,77 @@
+---
+import { ChevronsDownUp, ChevronsUpDown, ListFilter, LocateFixed } from '@lucide/astro';
+import projectConfig from '../../scripts/lib/project-config.mjs';
+import type { SiteNavigationNode } from '../lib/siteNavigation';
+
+interface Props {
+	idPrefix: string;
+	nodes: SiteNavigationNode[];
+}
+
+const { idPrefix, nodes } = Astro.props;
+const countNodes = (tree: SiteNavigationNode[]): number => tree.reduce(
+	(total, node) => total + 1 + countNodes(node.children),
+	0,
+);
+const minimumUsefulNodeCount = 12;
+const showControls = countNodes(nodes) >= minimumUsefulNodeCount;
+const labels = projectConfig.locale.labels;
+const filterId = `${idPrefix}-filter`;
+const statusId = `${idPrefix}-status`;
+---
+
+{showControls && (
+	<div
+		class="navigation-tree-controls"
+		data-tree-controls
+		data-tree-label-collapsed={labels.navigationCollapsedAll}
+		data-tree-label-expanded={labels.navigationExpandedAll}
+		data-tree-label-filter-matches={labels.navigationFilterMatches}
+		data-tree-label-located={labels.navigationLocatedCurrent}
+		hidden
+	>
+		<label class="navigation-tree-filter" for={filterId}>
+			<ListFilter aria-hidden="true" />
+			<span class="visually-hidden">{labels.navigationFilter}</span>
+			<input
+				id={filterId}
+				type="search"
+				autocomplete="off"
+				spellcheck="false"
+				placeholder={labels.navigationFilter}
+				aria-describedby={statusId}
+				data-tree-filter
+			/>
+		</label>
+		<div class="navigation-tree-commands" role="group" aria-label={labels.navigationControls}>
+			<button
+				type="button"
+				aria-label={labels.navigationExpandAll}
+				title={labels.navigationExpandAll}
+				data-tree-expand-all
+			>
+				<ChevronsUpDown aria-hidden="true" />
+			</button>
+			<button
+				type="button"
+				aria-label={labels.navigationCollapseAll}
+				title={labels.navigationCollapseAll}
+				data-tree-collapse-all
+			>
+				<ChevronsDownUp aria-hidden="true" />
+			</button>
+			<button
+				type="button"
+				aria-label={labels.navigationLocateCurrent}
+				title={labels.navigationLocateCurrent}
+				data-tree-locate-current
+			>
+				<LocateFixed aria-hidden="true" />
+			</button>
+		</div>
+		<p class="navigation-tree-filter-empty" data-tree-filter-empty hidden>
+			{labels.navigationFilterEmpty}
+		</p>
+		<p id={statusId} class="visually-hidden" role="status" aria-live="polite" data-tree-status></p>
+	</div>
+)}

package/src/components/PageAliasRedirect.astro

@@ -15,7 +15,7 @@ const canonicalUrl = getAbsolutePageUrl(projectConfig.site.url, targetPathname);
 ---
 
 <!doctype html>
-<html lang={lang}>
+<html lang={lang} data-pagefind-ignore="all">
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width" />

package/src/components/PageContentsNavigation.astro

@@ -6,14 +6,13 @@ import PageContentsLinks from './PageContentsLinks.astro';
 interface Props {
 	headings: HeadingNavigation[];
 	pageTitle: string;
-	variant: 'inline' | 'rail';
 }
 
-const { headings, pageTitle, variant } = Astro.props;
+const { headings, pageTitle } = Astro.props;
 const label = `${projectConfig.locale.labels.pageNavigation}: ${pageTitle}`;
 ---
 
-<aside class={`page-contents-navigation page-contents-navigation-${variant}`}>
+<aside class="page-contents-navigation page-contents-navigation-rail">
 	<nav aria-label={label}>
 		<p class="page-contents-navigation-label">{projectConfig.locale.labels.pageNavigation}</p>
 		<PageContentsLinks headings={headings} variant="desktop" />

package/src/components/PageList.astro

@@ -0,0 +1,33 @@
+---
+import { ArrowRight } from '@lucide/astro';
+import projectConfig from '../../scripts/lib/project-config.mjs';
+import { withBasePath } from '../lib/basePath';
+
+type PageListItem = {
+	title: string;
+	pathname: string;
+	description?: string;
+};
+
+interface Props {
+	pages: PageListItem[];
+}
+
+const { pages } = Astro.props;
+---
+
+<nav class="child-page-list" aria-label={projectConfig.locale.labels.navigationChildren}>
+	<ul>
+		{pages.map((page) => (
+			<li>
+				<a href={withBasePath(projectConfig.site.basePath, page.pathname)}>
+					<span class="child-page-list-copy">
+						<strong>{page.title}</strong>
+						{page.description && <span>{page.description}</span>}
+					</span>
+					<ArrowRight aria-hidden="true" />
+				</a>
+			</li>
+		))}
+	</ul>
+</nav>