@janga/norna 0.7.23 → 0.7.24

package/src/components/SitePage.astro

@@ -2,21 +2,32 @@
 import { getCollection, type CollectionEntry } from 'astro:content';
 import BaseLayout from '../layouts/BaseLayout.astro';
 import CodeBlockCopyScript from './CodeBlockCopyScript.astro';
+import EditSourceLink from './EditSourceLink.astro';
 import SiteBreadcrumbs from './SiteBreadcrumbs.astro';
 import SiteNavigation from './SiteNavigation.astro';
 import SiteBanners from './SiteBanners.astro';
 import PageContentsNavigation from './PageContentsNavigation.astro';
+import PageSequenceNavigation from './PageSequenceNavigation.astro';
 import SiteSection from './SiteSection.astro';
 import SiteTreeNavigation from './SiteTreeNavigation.astro';
 import TreeNavigationScript from './TreeNavigationScript.astro';
 import { getSectionsContent, type ResolvedSection } from '../lib/sectionContent';
 import { getPageTheme } from '../lib/pageThemes';
 import { getSiteModel, type SitePage } from '../lib/sitePages';
-import { flattenSiteNavigationTree, getListedSiteNavigationTree } from '../lib/siteNavigation';
+import {
+	flattenSiteNavigationTree,
+	getDirectChildPages,
+	getListedSiteNavigationTree,
+	getSequentialPageNavigation,
+} from '../lib/siteNavigation';
 import { getToday, isVisibleToday } from '../lib/visibility';
 import { getLogoAsset } from '../lib/sitePublicAssets';
-import { resolveNavigationModel } from '../../scripts/lib/navigation-model.mjs';
+import {
+	resolveNavigationModel,
+	resolvePageContentsPlacement,
+} from '../../scripts/lib/navigation-model.mjs';
 import { projectConfig, resolveThemeVisualConfig } from '../../scripts/lib/project-config.mjs';
+import { getEditSourceUrl } from '../../scripts/lib/edit-source-link.mjs';
 import { getTextWidthCssValue, resolveFrameColors, resolvePagePresentation } from '../../scripts/lib/presentation.mjs';
 import { mergePageThemeConfig } from '../../scripts/lib/theme-presets.mjs';
 
@@ -55,24 +66,8 @@ const logo = logoAsset
 		height: logoSettings?.height,
 	}
 	: undefined;
-const siteHtml = entry.rendered?.html ?? '';
-const resolvedSections = await getSectionsContent(siteHtml, currentPage);
-const hasCodeBlocks = resolvedSections.some((section) => section.contentBlocks.some((block) => (
-	block.type === 'html' && /<pre\b[^>]*>[\s\S]*?<code\b/i.test(block.html)
-)));
 const today = getToday();
 const siteBanners = (sitewideData.banners ?? []).filter((banner) => isVisibleToday(banner.visible, today));
-const hasPrioritizableImage = (section: ResolvedSection) => section.contentBlocks.some((block) => (
-	block.type === 'image-stack'
-	|| block.type === 'image-carousel'
-));
-const firstImageSectionIndex = resolvedSections.findIndex(hasPrioritizableImage);
-let contentSectionIndex = 0;
-const renderedSections = resolvedSections.map((section, index) => ({
-	section,
-	sectionIndex: section.headingLevel === 1 ? 0 : contentSectionIndex++,
-	prioritizeFirstImage: index === firstImageSectionIndex,
-}));
 
 const getPageContent = (page: SitePage) =>
 	page.markdownDocument.navigationHeadings.map(({ depth, id, parentId, title }) => ({
@@ -92,7 +87,33 @@ const siteNavigation = siteNodes.map((node) => {
 			.map(({ id, title }) => ({ id, title })),
 	};
 });
-const renderedNavigationEntries = flattenSiteNavigationTree(getListedSiteNavigationTree(siteNavigation));
+const listedNavigationTree = getListedSiteNavigationTree(siteNavigation);
+const renderedNavigationEntries = flattenSiteNavigationTree(listedNavigationTree);
+const pageSequence = getSequentialPageNavigation(listedNavigationTree, currentPage.pagePath);
+const childPages = getDirectChildPages(listedNavigationTree, currentPage.pagePath);
+const siteHtml = entry.rendered?.html ?? '';
+const resolvedSections = await getSectionsContent(siteHtml, currentPage, childPages);
+const hasCodeBlocks = resolvedSections.some((section) => section.contentBlocks.some((block) => (
+	block.type === 'html' && /<pre\b[^>]*>[\s\S]*?<code\b/i.test(block.html)
+)));
+const hasPrioritizableImage = (section: ResolvedSection) => section.contentBlocks.some((block) => (
+	block.type === 'image-stack'
+	|| block.type === 'image-carousel'
+));
+const firstImageSectionIndex = resolvedSections.findIndex(hasPrioritizableImage);
+let contentSectionIndex = 0;
+const renderedSections = resolvedSections.map((section, index) => ({
+	section,
+	sectionIndex: section.headingLevel === 1 ? 0 : contentSectionIndex++,
+	prioritizeFirstImage: index === firstImageSectionIndex,
+}));
+const hasPageSequence = Boolean(pageSequence.previous || pageSequence.next);
+const editSourceUrl = projectConfig.editLink
+	? getEditSourceUrl({
+		baseUrl: projectConfig.editLink.baseUrl,
+		sourcePath: currentPage.contentLabel,
+	})
+	: null;
 const navigationModel = resolveNavigationModel({
 	mode: projectConfig.navigation.mode,
 	nodes: renderedNavigationEntries.map(({ node, headings }) => ({
@@ -118,7 +139,23 @@ const currentPageNavigation = siteNavigation.find(({ node }) => (
 	node.kind === 'page' && node.pathname === currentPage.pathname
 ));
 const pageContentsHeadings = currentPageNavigation?.headings.filter(({ depth }) => depth === 2 || depth === 3) ?? [];
-const hasContentsNavigation = hasTreeNavigation && pageContentsHeadings.length > 1;
+const pageContentsPlacement = resolvePageContentsPlacement({
+	navigationMode: navigationModel.mode,
+	nodes: renderedNavigationEntries.map(({ node }) => ({
+		depth: Math.max(1, node.depth),
+		isHome: node.isHome,
+		listed: node.navigation.listed,
+		pagePath: node.pagePath,
+	})),
+	currentPage: {
+		isHome: currentPage.isHome,
+		pagePath: currentPage.pagePath,
+	},
+	headingCount: pageContentsHeadings.length,
+});
+const hasContentsNavigation = pageContentsPlacement.placement !== 'none';
+const integratePageContentsInTree = pageContentsPlacement.placement === 'page-tree';
+const showContentsRail = pageContentsPlacement.placement === 'contents-rail';
 const hasNavigationRailFrame = navigationModel.requestedMode === 'tree'
 	|| (
 		navigationModel.requestedMode === 'automatic'
@@ -138,6 +175,7 @@ const reserveBreadcrumbSpace = hasTreeNavigation || showBreadcrumbs;
 	pathname={currentPage.pathname}
 	footer={sitewideData.footer}
 	contentsNavigation={hasContentsNavigation}
+	searchable
 >
 	<SiteNavigation
 		logo={logo}
@@ -153,20 +191,31 @@ const reserveBreadcrumbSpace = hasTreeNavigation || showBreadcrumbs;
 
 	<div class:list={['site-page-layout', {
 		'site-page-layout-tree': hasTreeNavigation,
-		'site-page-layout-contents': hasContentsNavigation,
-	}]}>
+		'site-page-layout-contents': showContentsRail,
+	}]}
+		data-page-contents-placement={hasContentsNavigation ? pageContentsPlacement.placement : undefined}
+	>
 		{hasTreeNavigation && (
-			<SiteTreeNavigation currentPage={currentPage} navigationEntries={siteNavigation} />
+			<SiteTreeNavigation
+				currentPage={currentPage}
+				navigationEntries={siteNavigation}
+				integratePageSections={integratePageContentsInTree}
+			/>
 		)}
 		<main
-			class:list={['site-content', { 'site-content-has-breadcrumbs': reserveBreadcrumbSpace }]}
+			class:list={['site-content', {
+				'site-content-has-breadcrumbs': reserveBreadcrumbSpace,
+				'site-content-has-edit-source': Boolean(editSourceUrl),
+				'site-content-has-page-sequence': hasPageSequence,
+			}]}
 			id="main-content"
+			data-pagefind-body
 			style={`--page-text-width: ${pageTextWidth}`}
 		>
 			{showBreadcrumbs
 				? <SiteBreadcrumbs currentPage={currentPage} nodes={siteNodes} />
 				: reserveBreadcrumbSpace && <div class="site-breadcrumbs" aria-hidden="true"></div>}
-			{hasContentsNavigation && (
+			{showContentsRail && (
 				<PageContentsNavigation
 					headings={pageContentsHeadings}
 					pageTitle={currentPage.title}
@@ -182,8 +231,12 @@ const reserveBreadcrumbSpace = hasTreeNavigation || showBreadcrumbs;
 					prioritizeFirstImage={prioritizeFirstImage}
 				/>
 			))}
+			{editSourceUrl && (
+				<EditSourceLink href={editSourceUrl} label={projectConfig.locale.labels.editSource} />
+			)}
+			<PageSequenceNavigation previous={pageSequence.previous} next={pageSequence.next} />
 		</main>
-		{hasContentsNavigation && (
+		{showContentsRail && (
 			<PageContentsNavigation
 				headings={pageContentsHeadings}
 				pageTitle={currentPage.title}

package/src/components/SiteSection.astro

@@ -9,6 +9,7 @@ import {
 import CardList from './CardList.astro';
 import ImageCarousel from './ImageCarousel.astro';
 import ImageStack from './ImageStack.astro';
+import PageList from './PageList.astro';
 import type { ResolvedSection } from '../lib/sectionContent';
 
 type ResponsiveValue<T> = { desktop: T; mobile: T };
@@ -113,6 +114,7 @@ const isStructuredBlock = (block: ResolvedSection['contentBlocks'][number]) => (
 	block.type === 'image-stack'
 	|| block.type === 'image-carousel'
 	|| block.type === 'card-list'
+	|| block.type === 'page-list'
 );
 const hasMedia = section.contentBlocks.some((block) => (
 	block.type === 'image-stack'
@@ -121,7 +123,7 @@ const hasMedia = section.contentBlocks.some((block) => (
 ));
 const contentGroups: Array<
 	| { type: 'reading'; blocks: ResolvedSection['contentBlocks'] }
-	| { type: 'media'; block: Extract<ResolvedSection['contentBlocks'][number], { type: 'image-stack' | 'image-carousel' | 'card-list' }> }
+	| { type: 'structured'; block: Extract<ResolvedSection['contentBlocks'][number], { type: 'image-stack' | 'image-carousel' | 'card-list' | 'page-list' }> }
 > = [];
 let readingBlocks: ResolvedSection['contentBlocks'] = [];
 const flushReadingBlocks = () => {
@@ -133,14 +135,17 @@ const flushReadingBlocks = () => {
 for (const block of section.contentBlocks) {
 	if (isStructuredBlock(block)) {
 		flushReadingBlocks();
-		contentGroups.push({ type: 'media', block });
+		contentGroups.push({ type: 'structured', block });
 	} else {
 		readingBlocks = [...readingBlocks, block];
 	}
 }
 
 flushReadingBlocks();
-const firstMediaGroupIndex = contentGroups.findIndex((group) => group.type === 'media');
+const firstMediaGroupIndex = contentGroups.findIndex((group) => (
+	group.type === 'structured'
+	&& (group.block.type === 'image-stack' || group.block.type === 'image-carousel')
+));
 const markdownHeadingStyle = (level: 'h3' | 'h4') => {
 	const headingConfig = markdownHeadings[level];
 	const fontSize = getHeadingTypographySizeValue(level, headingConfig.size);
@@ -240,6 +245,9 @@ const sectionStyle = [
 						/>
 					);
 				}
+				if (block.type === 'page-list') {
+					return <PageList pages={block.pages} />;
+				}
 
 				return (
 					<ImageStack

package/src/components/SiteTreeNavigation.astro

@@ -3,13 +3,15 @@ import projectConfig from '../../scripts/lib/project-config.mjs';
 import { getListedSiteNavigationTree, type SiteNavigationEntry } from '../lib/siteNavigation';
 import type { SitePage } from '../lib/sitePages';
 import NavigationPageTree from './NavigationPageTree.astro';
+import NavigationTreeControls from './NavigationTreeControls.astro';
 
 interface Props {
 	currentPage: SitePage;
 	navigationEntries: SiteNavigationEntry[];
+	integratePageSections?: boolean;
 }
 
-const { currentPage, navigationEntries } = Astro.props;
+const { currentPage, navigationEntries, integratePageSections = false } = Astro.props;
 const roots = getListedSiteNavigationTree(navigationEntries);
 const activeRoot = roots.find((node) => (
 	currentPage.pageDirectory === node.node.pageDirectory
@@ -24,11 +26,16 @@ const navigationRoot = activeRoot?.node.pagePath ? `/${activeRoot.node.pagePath}
 		class="tree-local-navigation"
 		data-navigation-root={navigationRoot}
 	>
+		<NavigationTreeControls
+			idPrefix="desktop-tree-navigation"
+			nodes={[activeRoot]}
+		/>
 		<nav aria-label={`${activeRoot.node.title}: ${projectConfig.locale.labels.siteNavigation}`}>
 			<NavigationPageTree
 				nodes={[activeRoot]}
 				currentPage={currentPage}
 				variant="sidebar"
+				integratePageSections={integratePageSections}
 			/>
 		</nav>
 	</aside>

package/src/components/TreeNavigationScript.astro

@@ -1,7 +1,12 @@
 <script>
 	type NavigationState = {
 		openPaths: string[];
-		sectionPaths: string[];
+		sectionOpenByPath: Record<string, boolean>;
+		scrollTop: number;
+	};
+	type NavigationSnapshot = {
+		branchOpen: boolean[];
+		sectionOpen: boolean[];
 		scrollTop: number;
 	};
 
@@ -11,13 +16,34 @@
 		const branches = Array.from(container.querySelectorAll<HTMLDetailsElement>(
 			'.navigation-page-disclosure[data-page-path]',
 		));
-		let storedState: NavigationState = { openPaths: [], sectionPaths: [], scrollTop: 0 };
+		const sectionBranches = Array.from(container.querySelectorAll<HTMLDetailsElement>(
+			'.navigation-page-sections-disclosure[data-page-path]',
+		));
+		const navigationNodes = Array.from(container.querySelectorAll<HTMLElement>(
+			'.navigation-page-node[data-navigation-title]',
+		));
+		const getScrollContainer = () => {
+			let candidate: HTMLElement | null = container;
+
+			while (candidate) {
+				if (/auto|scroll/.test(getComputedStyle(candidate).overflowY)) return candidate;
+				candidate = candidate.parentElement;
+			}
+
+			return container;
+		};
+		const scrollContainer = getScrollContainer();
+		let filterSnapshot: NavigationSnapshot | null = null;
 
 		try {
 			const parsedState = JSON.parse(sessionStorage.getItem(stateKey) ?? '{}');
-			storedState = {
+			const storedState: NavigationState = {
 				openPaths: Array.isArray(parsedState.openPaths) ? parsedState.openPaths : [],
-				sectionPaths: Array.isArray(parsedState.sectionPaths) ? parsedState.sectionPaths : [],
+				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,
 			};
 
@@ -25,15 +51,18 @@
 				const pagePath = branch.dataset.pagePath ?? '';
 				branch.open = branch.dataset.currentBranch === 'true'
 					|| storedState.openPaths.includes(pagePath);
-
-				if (storedState.sectionPaths.includes(pagePath)) {
-					branch.dataset.sectionsOpen = 'true';
-				}
+			});
+			sectionBranches.forEach((branch) => {
+				const pagePath = branch.dataset.pagePath ?? '';
+				const storedOpen = storedState.sectionOpenByPath[pagePath];
+				branch.open = typeof storedOpen === 'boolean'
+					? storedOpen
+					: branch.dataset.currentPage === 'true';
 			});
 
 			if (storedState.scrollTop > 0) {
 				requestAnimationFrame(() => {
-					container.scrollTop = storedState.scrollTop;
+					scrollContainer.scrollTop = storedState.scrollTop;
 				});
 			}
 		} catch {
@@ -41,37 +70,189 @@
 		}
 
 		const saveState = () => {
+			if (filterSnapshot) return;
+
 			try {
 				const openBranches = branches.filter((branch) => branch.open);
+				const sectionOpenByPath = Object.fromEntries(sectionBranches.map((branch) => [
+					branch.dataset.pagePath ?? '',
+					branch.open,
+				]));
 				const state: NavigationState = {
 					openPaths: openBranches.map((branch) => branch.dataset.pagePath ?? ''),
-					sectionPaths: openBranches
-						.filter((branch) => (
-							branch.dataset.sectionsOpen === 'true'
-							|| branch.dataset.currentPage === 'true'
-						))
-						.map((branch) => branch.dataset.pagePath ?? ''),
-					scrollTop: container.scrollTop,
+					sectionOpenByPath,
+					scrollTop: scrollContainer.scrollTop,
 				};
 				sessionStorage.setItem(stateKey, JSON.stringify(state));
 			} catch {
 				// Navigation state persistence is an optional enhancement.
 			}
 		};
+		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;
+		const collapseButton = controls?.querySelector<HTMLButtonElement>('[data-tree-collapse-all]') ?? null;
+		const locateButton = controls?.querySelector<HTMLButtonElement>('[data-tree-locate-current]') ?? null;
+		const emptyMessage = controls?.querySelector<HTMLElement>('[data-tree-filter-empty]') ?? null;
+		const status = controls?.querySelector<HTMLElement>('[data-tree-status]') ?? null;
+		const currentPageNode = container.querySelector<HTMLElement>(
+			'.navigation-page-node[data-navigation-current-page="true"]',
+		);
+		const labels = {
+			collapsed: controls?.dataset.treeLabelCollapsed ?? '',
+			expanded: controls?.dataset.treeLabelExpanded ?? '',
+			filterMatches: controls?.dataset.treeLabelFilterMatches ?? '{count}',
+			located: controls?.dataset.treeLabelLocated ?? '',
+		};
+		const normalizeTitle = (value: string) => value
+			.normalize('NFKD')
+			.replace(/\p{Mark}+/gu, '')
+			.toLocaleLowerCase(document.documentElement.lang || undefined)
+			.trim();
+		const setStatus = (message: string) => {
+			if (status) status.textContent = message;
+		};
+		const getSnapshot = (): NavigationSnapshot => ({
+			branchOpen: branches.map((branch) => branch.open),
+			sectionOpen: sectionBranches.map((branch) => branch.open),
+			scrollTop: scrollContainer.scrollTop,
+		});
+		const revealNodeAndAncestors = (node: HTMLElement) => {
+			let currentNode: HTMLElement | null = node;
+
+			while (currentNode && container.contains(currentNode)) {
+				currentNode.hidden = false;
+				const parentNode = currentNode.parentElement?.closest<HTMLElement>(
+					'.navigation-page-node[data-navigation-title]',
+				) ?? null;
+				const parentBranch = parentNode?.querySelector<HTMLDetailsElement>(
+					':scope > .navigation-page-disclosure[data-page-path]',
+				);
+				if (parentBranch) parentBranch.open = true;
+				currentNode = parentNode;
+			}
+		};
+		const restoreFilterSnapshot = () => {
+			if (!filterSnapshot) return;
 
-		requestAnimationFrame(() => {
-			branches.forEach((branch) => branch.addEventListener('toggle', () => {
-				if (branch.open && branch.dataset.hasSections === 'true') {
-					branch.dataset.sectionsOpen = 'true';
-				} else if (!branch.open) {
-					delete branch.dataset.sectionsOpen;
+			branches.forEach((branch, index) => { branch.open = filterSnapshot?.branchOpen[index] ?? false; });
+			sectionBranches.forEach((branch, index) => { branch.open = filterSnapshot?.sectionOpen[index] ?? false; });
+			scrollContainer.scrollTop = filterSnapshot.scrollTop;
+			filterSnapshot = null;
+			requestAnimationFrame(saveState);
+		};
+		const clearFilter = () => {
+			navigationNodes.forEach((node) => { node.hidden = false; });
+			delete container.dataset.treeFilterActive;
+			if (emptyMessage) emptyMessage.hidden = true;
+			if (expandButton) expandButton.disabled = false;
+			if (collapseButton) collapseButton.disabled = false;
+			restoreFilterSnapshot();
+			setStatus('');
+		};
+		const applyFilter = () => {
+			const query = normalizeTitle(filterInput?.value ?? '');
+
+			if (!query) {
+				clearFilter();
+				return;
+			}
+
+			if (!filterSnapshot) filterSnapshot = getSnapshot();
+			container.dataset.treeFilterActive = 'true';
+			if (expandButton) expandButton.disabled = true;
+			if (collapseButton) collapseButton.disabled = true;
+			navigationNodes.forEach((node) => { node.hidden = true; });
+
+			const matches = navigationNodes.filter((node) => normalizeTitle(
+				node.dataset.navigationTitle ?? '',
+			).includes(query));
+			matches.forEach((node) => {
+				revealNodeAndAncestors(node);
+
+				if (node.dataset.navigationKind === 'category') {
+					node.querySelectorAll<HTMLElement>('.navigation-page-node[data-navigation-title]')
+						.forEach((descendant) => { descendant.hidden = false; });
+					const categoryBranch = node.querySelector<HTMLDetailsElement>(
+						':scope > .navigation-category-disclosure',
+					);
+					if (categoryBranch) categoryBranch.open = true;
 				}
-				saveState();
-			}));
+			});
+
+			if (matches.length === 0 && currentPageNode) revealNodeAndAncestors(currentPageNode);
+			if (emptyMessage) emptyMessage.hidden = matches.length > 0;
+			setStatus(labels.filterMatches.replace('{count}', String(matches.length)));
+		};
+		const setAllOpen = (open: boolean) => {
+			branches.forEach((branch) => { branch.open = open; });
+			sectionBranches.forEach((branch) => { branch.open = open; });
+			saveState();
+			setStatus(open ? labels.expanded : labels.collapsed);
+		};
+		const locateCurrentPage = () => {
+			if (!currentPageNode) return;
+
+			if (filterInput?.value) {
+				filterInput.value = '';
+				clearFilter();
+			}
+			revealNodeAndAncestors(currentPageNode);
+			currentPageNode.querySelectorAll<HTMLDetailsElement>(
+				':scope > .navigation-page-disclosure, :scope > .navigation-page-sections-disclosure',
+			).forEach((branch) => { branch.open = true; });
+			saveState();
+
+			const currentPageLink = currentPageNode.querySelector<HTMLAnchorElement>(
+				':scope > .navigation-page-link, :scope > .navigation-page-open-link',
+			);
+			if (!currentPageLink) return;
+
+			currentPageLink.focus({ preventScroll: true });
+			const scrollBox = scrollContainer.getBoundingClientRect();
+			const linkBox = currentPageLink.getBoundingClientRect();
+			scrollContainer.scrollTop += linkBox.top - scrollBox.top
+				- Math.max(0, (scrollContainer.clientHeight - linkBox.height) / 2);
+			setStatus(labels.located);
+		};
+		const openLinkedPage = (link: HTMLAnchorElement) => {
+			if (filterInput?.value) {
+				filterInput.value = '';
+				clearFilter();
+			}
+			const pageNode = link.closest<HTMLElement>('.navigation-page-node');
+			const pageDisclosure = pageNode?.querySelector<HTMLDetailsElement>(
+				':scope > .navigation-page-disclosure:not(.navigation-category-disclosure)',
+			);
+			const sectionDisclosure = pageNode?.querySelector<HTMLDetailsElement>(
+				':scope > .navigation-page-sections-disclosure[data-page-path]',
+			);
+
+			if (pageDisclosure) pageDisclosure.open = true;
+			if (sectionDisclosure) sectionDisclosure.open = true;
+			saveState();
+		};
+
+		requestAnimationFrame(() => {
+			branches.forEach((branch) => branch.addEventListener('toggle', saveState));
+			sectionBranches.forEach((branch) => branch.addEventListener('toggle', saveState));
 		});
 
-		container.addEventListener('scroll', saveState, { passive: true });
-		container.querySelectorAll('a').forEach((link) => link.addEventListener('click', saveState));
+		if (controls) controls.hidden = false;
+		if (locateButton && !currentPageNode) locateButton.disabled = true;
+		filterInput?.addEventListener('input', applyFilter);
+		filterInput?.addEventListener('keydown', (event) => {
+			if (event.key !== 'Escape' || !filterInput.value) return;
+			event.preventDefault();
+			filterInput.value = '';
+			clearFilter();
+		});
+		expandButton?.addEventListener('click', () => setAllOpen(true));
+		collapseButton?.addEventListener('click', () => setAllOpen(false));
+		locateButton?.addEventListener('click', locateCurrentPage);
+		scrollContainer.addEventListener('scroll', saveState, { passive: true });
+		container.querySelectorAll<HTMLAnchorElement>('.navigation-page-link, .navigation-page-open-link')
+			.forEach((link) => link.addEventListener('click', () => openLinkedPage(link)));
 		window.addEventListener('pagehide', saveState);
 	};
 

package/src/layouts/BaseLayout.astro

@@ -1,7 +1,7 @@
 ---
 import projectConfig from '../../scripts/lib/project-config.mjs';
 import { getPresentationCssVariables } from '../../scripts/lib/presentation.mjs';
-import { getIconLinks } from '../lib/sitePublicAssets';
+import { getIconLinks, getSocialImageAsset } from '../lib/sitePublicAssets';
 import { withBasePath } from '../lib/basePath';
 import { getReaderPreferencesScript } from '../lib/readerPreferencesScript.mjs';
 import '../styles/global.css';
@@ -77,6 +77,8 @@ interface Props {
 		buildInfo?: boolean;
 	};
 	contentsNavigation?: boolean;
+	indexable?: boolean;
+	searchable?: boolean;
 }
 
 const {
@@ -88,11 +90,17 @@ const {
 	pathname = '/',
 	footer,
 	contentsNavigation = false,
+	indexable = true,
+	searchable = false,
 } = Astro.props;
 
 const documentTitle = title;
 const canonicalUrl = new URL(withBasePath(projectConfig.site.basePath, pathname), projectConfig.site.url).href;
 const iconLinks = getIconLinks();
+const socialImageAsset = getSocialImageAsset();
+const socialImageUrl = socialImageAsset
+	? new URL(withBasePath(projectConfig.site.basePath, socialImageAsset.href), projectConfig.site.url).href
+	: null;
 const scrollBehavior = projectConfig.navigation.scrollBehavior === 'smooth' ? 'smooth' : 'auto';
 const formatPercent = (value: number) => `${value}%`;
 const formatViewportHeightPercent = (value: number) => `${value}svh`;
@@ -132,6 +140,39 @@ const documentStyle = [
 		]
 		: []),
 ].join('; ');
+const marginNoteReadingWidths = [
+	['narrow', 'min(60ch, 680px)'],
+	['standard', 'min(72ch, 680px)'],
+	['wide', `min(80ch, ${visualTheme.images.width})`],
+] as const;
+const vacantContentsTrackWidth = `11rem + ${visualTheme.layout.localNavigationGap}`;
+const marginNoteDeclarations = [
+	'float: right;',
+	'clear: right;',
+	'width: var(--layout-note-width);',
+	'margin: 0 calc(0px - var(--layout-note-width) - var(--layout-note-gap)) 0.75rem var(--layout-note-gap);',
+].join('\n');
+const marginNoteLayoutCss = [
+	'@media (min-width: 1101px) {',
+	...marginNoteReadingWidths.flatMap(([readingWidth, textWidth]) => [
+		[
+			`@container (min-width: calc(${textWidth} + ${visualTheme.layout.noteWidth} + ${visualTheme.layout.noteGap})) {`,
+			`:root[data-reading-width="${readingWidth}"] .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 {`,
+				marginNoteDeclarations,
+			'}',
+		'}',
+		].join('\n'),
+	]),
+	'}',
+].join('\n');
 const { buildInfo, copyrightMessage } = footer ?? {};
 const showBuildInfo = buildInfo === true;
 const buildTime = showBuildInfo
@@ -164,16 +205,29 @@ const readerPreferencesScript = readerPreferencesEnabled
 	data-reading-width={presentation.readerPreferences.defaults.readingWidth}
 	data-focus-reading={presentation.readerPreferences.defaults.focusReading}
 	data-section-tracking={contentsNavigation ? 'enabled' : undefined}
+	data-pagefind-ignore={searchable ? undefined : 'all'}
 	style={documentStyle}
 >
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<meta name="format-detection" content="telephone=no" />
+		{!indexable && <meta name="robots" content="noindex" />}
 		{description && <meta name="description" content={description} />}
+		{indexable && <meta property="og:type" content="website" />}
+		{indexable && <meta property="og:title" content={documentTitle} />}
+		{indexable && <meta property="og:url" content={canonicalUrl} />}
+		{indexable && description && <meta property="og:description" content={description} />}
+		{indexable && socialImageUrl && <meta property="og:image" content={socialImageUrl} />}
+		{indexable && socialImageAsset && <meta property="og:image:type" content={socialImageAsset.type} />}
+		{indexable && <meta name="twitter:card" content={socialImageUrl ? 'summary_large_image' : 'summary'} />}
+		{indexable && <meta name="twitter:title" content={documentTitle} />}
+		{indexable && description && <meta name="twitter:description" content={description} />}
+		{indexable && socialImageUrl && <meta name="twitter:image" content={socialImageUrl} />}
 		<meta name="theme-color" content={presentation.palette.page.backgroundColor} />
 		{readerPreferencesScript && <script is:inline set:html={readerPreferencesScript} />}
-		<link rel="canonical" href={canonicalUrl} />
+		<style is:inline set:html={marginNoteLayoutCss} />
+		{indexable && <link rel="canonical" href={canonicalUrl} />}
 		<meta name="generator" content={Astro.generator} />
 		{iconLinks.map((iconLink) => (
 			<link
@@ -183,6 +237,7 @@ const readerPreferencesScript = readerPreferencesEnabled
 				href={iconLink.href}
 			/>
 		))}
+		<slot name="head" />
 		<title>{documentTitle}</title>
 	</head>
 	<body>