@janga/norna 0.7.18 → 0.7.23

package/src/components/SectionNavigationScript.astro

@@ -7,6 +7,52 @@
 	const submenuItems = Array.from(document.querySelectorAll<HTMLElement>('.site-nav-item-has-submenu'));
 	const mobileDestinationLinks = Array.from(mobileMenu?.querySelectorAll<HTMLAnchorElement>('.mobile-nav-destination') ?? []);
 	const mobileMenuSummary = mobileMenu?.querySelector<HTMLElement>(':scope > summary');
+	const sectionTrackingEnabled = document.documentElement.dataset.sectionTracking === 'enabled';
+	const trackedHeadingIds = new Set(sectionLinks.flatMap((link) => {
+		const linkUrl = new URL(link.href, window.location.href);
+		if (linkUrl.pathname !== window.location.pathname || !linkUrl.hash) return [];
+
+		try {
+			return [decodeURIComponent(linkUrl.hash.slice(1))];
+		} catch {
+			return [];
+		}
+	}));
+	const trackedHeadings = sectionTrackingEnabled
+		? Array.from(document.querySelectorAll<HTMLElement>('.site-content h2[id], .site-content h3[id]'))
+			.filter((heading) => trackedHeadingIds.has(heading.id))
+		: [];
+	let sectionTrackingFrame: number | undefined;
+	let sectionTrackingPaused = false;
+	let sectionTrackingResumeTimer: number | undefined;
+
+	const resumeSectionTracking = () => {
+		window.clearTimeout(sectionTrackingResumeTimer);
+		window.removeEventListener('scrollend', resumeSectionTracking);
+		sectionTrackingPaused = false;
+		sectionTrackingResumeTimer = undefined;
+	};
+
+	const pauseSectionTrackingForAnchorNavigation = () => {
+		if (!sectionTrackingEnabled) return;
+
+		sectionTrackingPaused = true;
+		if (sectionTrackingFrame !== undefined) {
+			window.cancelAnimationFrame(sectionTrackingFrame);
+			sectionTrackingFrame = undefined;
+		}
+		window.clearTimeout(sectionTrackingResumeTimer);
+		window.removeEventListener('scrollend', resumeSectionTracking);
+		if ('onscrollend' in document.documentElement) {
+			window.addEventListener('scrollend', resumeSectionTracking, { once: true });
+		}
+
+		const scrollBehavior = getComputedStyle(document.documentElement).scrollBehavior;
+		sectionTrackingResumeTimer = window.setTimeout(
+			resumeSectionTracking,
+			scrollBehavior === 'smooth' ? 2000 : 120,
+		);
+	};
 
 	const setAnchorOffset = () => {
 		if (!siteTop) return;
@@ -55,6 +101,56 @@
 		});
 	};
 
+	const updateReadingPosition = () => {
+		sectionTrackingFrame = undefined;
+		if (trackedHeadings.length === 0) return;
+
+		let currentHeadingId: string | undefined = trackedHeadings[0]?.id;
+
+		if (window.scrollY > 1) {
+			const viewportHeight = window.innerHeight;
+			const documentHeight = Math.max(
+				document.body.scrollHeight,
+				document.body.offsetHeight,
+				document.documentElement.clientHeight,
+				document.documentElement.scrollHeight,
+				document.documentElement.offsetHeight,
+			);
+			const maximumScroll = Math.max(0, documentHeight - viewportHeight);
+			const remainingScroll = Math.max(0, maximumScroll - window.scrollY);
+			const normalReadingLine = Math.max(
+				Math.ceil(siteTop?.getBoundingClientRect().bottom ?? 0) + 8,
+				Math.round(viewportHeight / 2),
+			);
+			const terminalReadingLine = viewportHeight - remainingScroll;
+			const readingLine = Math.min(
+				viewportHeight,
+				Math.max(normalReadingLine, terminalReadingLine),
+			);
+
+			for (const heading of trackedHeadings) {
+				if (heading.getBoundingClientRect().top > readingLine) break;
+				currentHeadingId = heading.id;
+			}
+		}
+
+		sectionLinks.forEach((link) => {
+			const target = getSamePageTarget(link);
+			const isCurrent = target !== undefined && target.id === currentHeadingId;
+
+			if (isCurrent) {
+				link.setAttribute('aria-current', 'location');
+			} else if (link.getAttribute('aria-current') === 'location') {
+				link.removeAttribute('aria-current');
+			}
+		});
+	};
+
+	const scheduleReadingPositionUpdate = () => {
+		if (!sectionTrackingEnabled || sectionTrackingPaused || sectionTrackingFrame !== undefined) return;
+		sectionTrackingFrame = window.requestAnimationFrame(updateReadingPosition);
+	};
+
 	submenuItems.forEach((item) => {
 		const resetDismissal = () => delete item.dataset.submenuDismissed;
 		item.addEventListener('pointerleave', resetDismissal);
@@ -111,6 +207,7 @@
 			const target = getSamePageTarget(link);
 			if (!target) return;
 
+			pauseSectionTrackingForAnchorNavigation();
 			if (mobileMenu) mobileMenu.open = false;
 			link.closest<HTMLElement>('.site-nav-item')?.setAttribute('data-submenu-dismissed', 'true');
 
@@ -128,13 +225,26 @@
 		});
 	});
 
-	window.addEventListener('hashchange', updateCurrentSection);
+	window.addEventListener('hashchange', () => {
+		pauseSectionTrackingForAnchorNavigation();
+		updateCurrentSection();
+		scheduleReadingPositionUpdate();
+	});
+	if (window.location.hash) pauseSectionTrackingForAnchorNavigation();
 	updateCurrentSection();
+	if (sectionTrackingEnabled) {
+		window.addEventListener('scroll', scheduleReadingPositionUpdate, { passive: true });
+		window.addEventListener('resize', scheduleReadingPositionUpdate);
+		scheduleReadingPositionUpdate();
+	}
 
 	setAnchorOffset();
 	if (window.location.hash) window.requestAnimationFrame(alignInitialHashTarget);
 
 	if (siteTop && 'ResizeObserver' in window) {
-		new ResizeObserver(setAnchorOffset).observe(siteTop);
+		new ResizeObserver(() => {
+			setAnchorOffset();
+			scheduleReadingPositionUpdate();
+		}).observe(siteTop);
 	}
 </script>

package/src/components/SiteBreadcrumbs.astro

@@ -1,31 +1,34 @@
 ---
 import projectConfig from '../../scripts/lib/project-config.mjs';
 import { withBasePath } from '../lib/basePath';
-import type { SitePage } from '../lib/sitePages';
+import type { SiteNode, SitePage } from '../lib/sitePages';
 
 interface Props {
 	currentPage: SitePage;
-	pages: SitePage[];
+	nodes: SiteNode[];
 }
 
-const { currentPage, pages } = Astro.props;
-const pagesByPath = new Map(pages.map((page) => [page.pagePath, page]));
-const ancestors: SitePage[] = [];
+const { currentPage, nodes } = Astro.props;
+const nodesByPath = new Map(nodes.map((node) => [node.pagePath, node]));
+const ancestors: SiteNode[] = [];
 let parentPagePath = currentPage.parentPagePath;
 while (parentPagePath !== null) {
-	const parentPage = pagesByPath.get(parentPagePath);
-	if (!parentPage) break;
-	ancestors.unshift(parentPage);
-	parentPagePath = parentPage.parentPagePath;
+	const parentNode = nodesByPath.get(parentPagePath);
+	if (!parentNode) break;
+	ancestors.unshift(parentNode);
+	parentPagePath = parentNode.parentPagePath;
 }
 const pageHref = (page: SitePage) => withBasePath(projectConfig.site.basePath, page.pathname);
-const breadcrumbPages = ancestors;
 ---
 
 <nav class="site-breadcrumbs" aria-label={projectConfig.locale.labels.breadcrumb}>
 	<ol>
-		{breadcrumbPages.map((page) => (
-			<li><a href={pageHref(page)}>{page.title}</a></li>
+		{ancestors.map((node) => (
+			<li>
+				{node.kind === 'page'
+					? <a href={pageHref(node)}>{node.title}</a>
+					: <span>{node.title}</span>}
+			</li>
 		))}
 		<li><span aria-current="page">{currentPage.title}</span></li>
 	</ol>

package/src/components/SiteNavigation.astro

@@ -2,8 +2,14 @@
 import projectConfig from '../../scripts/lib/project-config.mjs';
 import { withBasePath } from '../lib/basePath';
 import type { SectionNavigation } from '../lib/sectionContent';
-import { getListedPageNavigationTree, type PageNavigationEntry } from '../lib/siteNavigation';
-import type { SitePage } from '../lib/sitePages';
+import {
+	getFirstPageInNavigationNode,
+	getListedSiteNavigationTree,
+	type SiteNavigationEntry,
+	type SiteNavigationNode,
+} from '../lib/siteNavigation';
+import type { SiteNode, SitePage } from '../lib/sitePages';
+import DisplaySettings from './DisplaySettings.astro';
 import NavigationPageTree from './NavigationPageTree.astro';
 import SectionNavigationScript from './SectionNavigationScript.astro';
 
@@ -19,12 +25,35 @@ interface Props {
 		height?: string;
 	};
 	currentPage: SitePage;
-	pageNavigation: PageNavigationEntry[];
+	navigationEntries: SiteNavigationEntry[];
 	navigationMode: 'sections' | 'top' | 'tree';
+	showTopNavigationSubmenus: boolean;
+	hasNavigationRailFrame: boolean;
 	frameColors: FrameColors;
+	readerPreferences: {
+		controls: {
+			appearance: boolean;
+			readingWidth: boolean;
+			focusReading: boolean;
+		};
+		defaults: {
+			appearance: 'system' | 'light' | 'dark';
+			readingWidth: 'narrow' | 'standard' | 'wide';
+			focusReading: 'off' | 'on';
+		};
+	};
 }
 
-const { logo, currentPage, pageNavigation, navigationMode, frameColors } = Astro.props;
+const {
+	logo,
+	currentPage,
+	navigationEntries,
+	navigationMode,
+	showTopNavigationSubmenus,
+	hasNavigationRailFrame,
+	frameColors,
+	readerPreferences,
+} = Astro.props;
 const siteTopBackgroundColor = frameColors.backgroundColor === 'transparent'
 	? 'var(--color-page)'
 	: frameColors.backgroundColor;
@@ -33,69 +62,99 @@ const navigationStyle = [
 	`--site-top-text-color: ${frameColors.textColor}`,
 	...(logo?.height ? [`--site-brand-logo-height: ${logo.height}`] : []),
 ].join('; ');
-const siteNavigationPages = pageNavigation.filter(({ page }) => page.isHome || page.navigation.listed);
-const siteNavigationTree = getListedPageNavigationTree(pageNavigation);
+const siteNavigationTree = getListedSiteNavigationTree(navigationEntries);
 const topLevelNavigation = siteNavigationTree;
-const showSiteNavigation = siteNavigationPages.some(({ page }) => !page.isHome);
-const homePage = pageNavigation.find(({ page }) => page.isHome)?.page ?? currentPage;
-const currentPageNavigation = pageNavigation.find(({ page }) => page.pathname === currentPage.pathname);
+const showSiteNavigation = topLevelNavigation.some(({ node }) => !node.isHome);
+const homeNode = navigationEntries.find(({ node }) => node.isHome)?.node;
+const homePage = homeNode?.kind === 'page' ? homeNode : currentPage;
+const currentPageNavigation = navigationEntries.find(({ node }) => node.kind === 'page' && node.pathname === currentPage.pathname);
 const isCurrentPage = (page: SitePage) => page.pathname === currentPage.pathname;
-const isCurrentBranch = (page: SitePage) => currentPage.pageDirectory === page.pageDirectory
-	|| currentPage.pageDirectory.startsWith(`${page.pageDirectory}/pages/`);
+const isCurrentBranch = (node: SiteNode) => currentPage.pageDirectory === node.pageDirectory
+	|| currentPage.pageDirectory.startsWith(`${node.pageDirectory}/pages/`);
 const pageHref = (page: SitePage) => withBasePath(projectConfig.site.basePath, page.pathname);
+const getNavigationPage = (node: SiteNavigationNode) => getFirstPageInNavigationNode(node);
 const hasSectionMenu = (pageSections: SectionNavigation[]) => pageSections.length > 1;
+const showSinglePageTopLink = !showSiteNavigation;
+const currentPageSectionCount = currentPageNavigation?.sections.length ?? 0;
 const hasCurrentPageSectionMenu = Boolean(
-	currentPageNavigation && hasSectionMenu(currentPageNavigation.sections),
+	currentPageNavigation && (
+		showSinglePageTopLink
+			? currentPageSectionCount > 0
+			: hasSectionMenu(currentPageNavigation.sections)
+	),
 );
 const hasTreePageContents = Boolean(
 	navigationMode === 'tree' && currentPageNavigation?.headings.length,
 );
-const showSinglePageTopLink = !showSiteNavigation;
+const showPageNavigation = Boolean(
+	navigationMode !== 'tree'
+	&& currentPageNavigation
+	&& (showSinglePageTopLink || hasCurrentPageSectionMenu),
+);
+const showSinglePageTitleOnly = showSinglePageTopLink && currentPageSectionCount === 0;
 const showMobileNavigation = showSiteNavigation || hasCurrentPageSectionMenu || hasTreePageContents;
-const showNavigationRow = showMobileNavigation || Boolean(logo);
+const showReaderControls = Object.values(readerPreferences.controls).some(Boolean);
+const showDesktopNavigationRow = showSiteNavigation || Boolean(logo) || showReaderControls;
+const showNavigationRow = showMobileNavigation || showDesktopNavigationRow;
 const needsNavigationScript = hasCurrentPageSectionMenu || hasTreePageContents || navigationMode === 'tree';
 ---
 
 <a class="skip-link" href="#main-content">{projectConfig.locale.labels.skipToContent}</a>
 
 <header
-	class:list={['site-top', { 'site-top-has-site-nav': showSiteNavigation }]}
+	class:list={['site-top', {
+		'site-top-has-site-nav': showSiteNavigation,
+		'site-top-has-navigation-row': showDesktopNavigationRow,
+		'site-top-has-navigation-rail-frame': hasNavigationRailFrame,
+	}]}
 	data-navigation-mode={navigationMode}
 	style={navigationStyle}
 >
 	{showNavigationRow && (
-		<div class="site-nav-row">
+		<div class:list={['site-nav-row', { 'site-nav-row-mobile-only': !showDesktopNavigationRow }]}>
 			{logo && (
-				<a class="site-brand" href={pageHref(homePage)}>
-					<img class="site-brand-logo" src={withBasePath(projectConfig.site.basePath, logo.src)} alt={logo.alt} />
-				</a>
+				<div class="site-nav-leading">
+					<a class="site-brand" href={pageHref(homePage)}>
+						<img class="site-brand-logo" src={withBasePath(projectConfig.site.basePath, logo.src)} alt={logo.alt} />
+					</a>
+				</div>
 			)}
 
-			{showSiteNavigation && (
-				<nav class="site-nav" aria-label={projectConfig.locale.labels.siteNavigation}>
+			<div class="site-nav-actions">
+				{showSiteNavigation && (
+					<nav class="site-nav" aria-label={projectConfig.locale.labels.siteNavigation}>
 					<ul>
-					{topLevelNavigation.map((node) => (
-						<li class:list={['site-nav-item', {
-							'site-nav-item-has-submenu': navigationMode !== 'tree' && node.children.length > 0,
-							'site-nav-item-current-branch': !isCurrentPage(node.page) && isCurrentBranch(node.page),
-						}]}>
-							<a href={pageHref(node.page)} aria-current={isCurrentPage(node.page) ? 'page' : undefined}>
-								{node.page.title}
-							</a>
-							{navigationMode !== 'tree' && node.children.length > 0 && (
-								<div class="site-nav-submenu">
-									<nav aria-label={`${node.page.title} ${projectConfig.locale.labels.siteNavigation}`}>
-										<NavigationPageTree nodes={[node]} currentPage={currentPage} variant="submenu" />
-									</nav>
+					{topLevelNavigation.map((navigationNode) => {
+						const destination = getNavigationPage(navigationNode);
+						if (!destination) return null;
+						const nodeIsCurrentPage = navigationNode.node.kind === 'page' && isCurrentPage(navigationNode.node);
+						return (
+							<li class:list={['site-nav-item', {
+								'site-nav-item-has-submenu': showTopNavigationSubmenus && navigationNode.children.length > 0,
+								'site-nav-item-current-branch': !nodeIsCurrentPage && isCurrentBranch(navigationNode.node),
+							}]}>
+								<a href={pageHref(destination)} aria-current={nodeIsCurrentPage ? 'page' : undefined}>
+									{navigationNode.node.title}
+								</a>
+								{showTopNavigationSubmenus && navigationNode.children.length > 0 && (
+									<div class="site-nav-submenu">
+										<nav aria-label={`${navigationNode.node.title} ${projectConfig.locale.labels.siteNavigation}`}>
+											<NavigationPageTree nodes={[navigationNode]} currentPage={currentPage} variant="submenu" />
+										</nav>
 									</div>
 								)}
 							</li>
-						))}
+						);
+					})}
 					</ul>
-				</nav>
-			)}
+					</nav>
+				)}
 
-			{showMobileNavigation && <details class="mobile-nav-menu">
+				{showReaderControls && (
+					<DisplaySettings controls={readerPreferences.controls} defaults={readerPreferences.defaults} />
+				)}
+
+				{showMobileNavigation && <details class="mobile-nav-menu">
 			<summary>
 				<span>{projectConfig.locale.labels.navigationMenu}</span>
 			</summary>
@@ -140,12 +199,16 @@ const needsNavigationScript = hasCurrentPageSectionMenu || hasTreePageContents |
 					)}
 				</div>
 			</div>
-		</details>}
+				</details>}
+			</div>
 		</div>
 	)}
 
-	{navigationMode !== 'tree' && hasCurrentPageSectionMenu && currentPageNavigation && (
-		<nav class="page-nav" aria-label={projectConfig.locale.labels.pageNavigation}>
+	{showPageNavigation && currentPageNavigation && (
+		<nav
+			class:list={['page-nav', { 'page-nav-title-only': showSinglePageTitleOnly }]}
+			aria-label={projectConfig.locale.labels.pageNavigation}
+		>
 			<div class="page-nav-inner">
 				{!showSinglePageTopLink && (
 					<span class="page-nav-label">{projectConfig.locale.labels.pageNavigation}</span>

package/src/components/SitePage.astro

@@ -1,22 +1,21 @@
 ---
 import { getCollection, type CollectionEntry } from 'astro:content';
-import path from 'node:path';
 import BaseLayout from '../layouts/BaseLayout.astro';
+import CodeBlockCopyScript from './CodeBlockCopyScript.astro';
 import SiteBreadcrumbs from './SiteBreadcrumbs.astro';
 import SiteNavigation from './SiteNavigation.astro';
 import SiteBanners from './SiteBanners.astro';
-import SiteNotesScript from './SiteNotesScript.astro';
+import PageContentsNavigation from './PageContentsNavigation.astro';
 import SiteSection from './SiteSection.astro';
 import SiteTreeNavigation from './SiteTreeNavigation.astro';
 import TreeNavigationScript from './TreeNavigationScript.astro';
-import { getHeadingNavigation, getSectionsContent, type ResolvedSection } from '../lib/sectionContent';
+import { getSectionsContent, type ResolvedSection } from '../lib/sectionContent';
 import { getPageTheme } from '../lib/pageThemes';
-import { getSitePage, getSitePages, type SitePage } from '../lib/sitePages';
+import { getSiteModel, type SitePage } from '../lib/sitePages';
+import { flattenSiteNavigationTree, getListedSiteNavigationTree } from '../lib/siteNavigation';
 import { getToday, isVisibleToday } from '../lib/visibility';
 import { getLogoAsset } from '../lib/sitePublicAssets';
-import { readSiteFile } from '../../scripts/lib/site-content.mjs';
 import { resolveNavigationModel } from '../../scripts/lib/navigation-model.mjs';
-import { sitePagesDir } from '../../scripts/lib/site-paths.mjs';
 import { projectConfig, resolveThemeVisualConfig } from '../../scripts/lib/project-config.mjs';
 import { getTextWidthCssValue, resolveFrameColors, resolvePagePresentation } from '../../scripts/lib/presentation.mjs';
 import { mergePageThemeConfig } from '../../scripts/lib/theme-presets.mjs';
@@ -29,15 +28,10 @@ interface Props {
 
 const { entry } = Astro.props;
 const siteDirectory = (process.env.NORNA_SITE_DIR ?? 'site').trim();
-const sitePages = getSitePages(await getCollection('site'));
-const currentPage = getSitePage(entry);
-const getPageContentFile = (page: SitePage) => ({
-		label: `${siteDirectory || 'site'}/pages/${page.pageDirectory}/content.md`,
-		path: path.join(sitePagesDir, page.pageDirectory, 'content.md'),
-	});
-const pageContentFile = getPageContentFile(currentPage);
-const siteContentLabel = pageContentFile.label;
-const rawMarkdown = (await readSiteFile(pageContentFile.path, pageContentFile.label)).body;
+const siteModel = await getSiteModel(await getCollection('site'));
+const { nodes: siteNodes, pages: sitePages } = siteModel;
+const currentPage = sitePages.find((page) => page.entry.id === entry.id);
+if (!currentPage) throw new Error(`Page entry "${entry.id}" is missing from the site page model.`);
 const [siteTheme] = await getCollection('theme');
 if (!siteTheme) {
 	throw new Error('site/theme.yaml is required. Add a root theme before building the site.');
@@ -61,14 +55,13 @@ const logo = logoAsset
 		height: logoSettings?.height,
 	}
 	: undefined;
-const pagePresentation = resolvePagePresentation(themeData, themeLabel);
-const pageTextWidth = getTextWidthCssValue(pagePresentation.typography.values.body.width);
-const frameColors = resolveFrameColors({ theme: siteThemeData, sourceLabel: `${siteDirectory || 'site'}/${siteTheme.id}` });
 const siteHtml = entry.rendered?.html ?? '';
-const resolvedSections = await getSectionsContent(siteHtml, rawMarkdown, currentPage, siteContentLabel);
+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 hasMarginNotes = resolvedSections.some((section) => section.contentBlocks.some((block) => block.type === 'note'));
 const hasPrioritizableImage = (section: ResolvedSection) => section.contentBlocks.some((block) => (
 	block.type === 'image-stack'
 	|| block.type === 'image-carousel'
@@ -81,34 +74,56 @@ const renderedSections = resolvedSections.map((section, index) => ({
 	prioritizeFirstImage: index === firstImageSectionIndex,
 }));
 
-const getPageContent = async (page: SitePage) => {
-	const contentFile = getPageContentFile(page);
-	const pageMarkdown = page.pathname === currentPage.pathname
-		? rawMarkdown
-		: (await readSiteFile(contentFile.path, contentFile.label)).body;
-	return getHeadingNavigation(pageMarkdown, contentFile.label);
-};
+const getPageContent = (page: SitePage) =>
+	page.markdownDocument.navigationHeadings.map(({ depth, id, parentId, title }) => ({
+		depth,
+		id,
+		parentId,
+		title,
+	}));
 
-const pageNavigation = await Promise.all(sitePages.map(async (page) => {
-	const headings = await getPageContent(page);
+const siteNavigation = siteNodes.map((node) => {
+	const headings = node.kind === 'page' ? getPageContent(node) : [];
 	return {
-		page,
+		node,
 		headings,
 		sections: headings
 			.filter((heading) => heading.depth === 2)
 			.map(({ id, title }) => ({ id, title })),
 	};
-}));
+});
+const renderedNavigationEntries = flattenSiteNavigationTree(getListedSiteNavigationTree(siteNavigation));
 const navigationModel = resolveNavigationModel({
 	mode: projectConfig.navigation.mode,
-	pages: pageNavigation.map(({ page, headings }) => ({
-		depth: Math.max(1, page.depth),
+	nodes: renderedNavigationEntries.map(({ node, headings }) => ({
+		depth: Math.max(1, node.depth),
 		headings,
-		isHome: page.isHome,
-		listed: page.navigation.listed,
+		isHome: node.isHome,
+		kind: node.kind,
+		listed: node.navigation.listed,
+		pagePath: node.pagePath,
 	})),
+	currentPage: {
+		isHome: currentPage.isHome,
+		pagePath: currentPage.pagePath,
+	},
+});
+const pagePresentation = resolvePagePresentation(themeData, themeLabel, {
+	navigationMode: navigationModel.mode,
 });
+const pageTextWidth = getTextWidthCssValue(pagePresentation.typography.values.body.width);
+const frameColors = resolveFrameColors({ theme: siteThemeData, sourceLabel: `${siteDirectory || 'site'}/${siteTheme.id}` });
 const hasTreeNavigation = navigationModel.mode === 'tree';
+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 hasNavigationRailFrame = navigationModel.requestedMode === 'tree'
+	|| (
+		navigationModel.requestedMode === 'automatic'
+		&& (navigationModel.hasNestedPages || navigationModel.hasCategories)
+	);
 const showBreadcrumbs = !currentPage.isHome && currentPage.parentPagePath !== null;
 const reserveBreadcrumbSpace = hasTreeNavigation || showBreadcrumbs;
 
@@ -122,19 +137,26 @@ const reserveBreadcrumbSpace = hasTreeNavigation || showBreadcrumbs;
 	frameColors={frameColors}
 	pathname={currentPage.pathname}
 	footer={sitewideData.footer}
+	contentsNavigation={hasContentsNavigation}
 >
 	<SiteNavigation
 		logo={logo}
 		currentPage={currentPage}
-		pageNavigation={pageNavigation}
+		navigationEntries={siteNavigation}
 		navigationMode={navigationModel.mode}
+		showTopNavigationSubmenus={navigationModel.requestedMode !== 'automatic' && navigationModel.mode !== 'tree'}
+		hasNavigationRailFrame={hasNavigationRailFrame}
 		frameColors={frameColors}
+		readerPreferences={pagePresentation.readerPreferences}
 	/>
 	{siteBanners.length > 0 && <SiteBanners banners={siteBanners} />}
 
-	<div class:list={['site-page-layout', { 'site-page-layout-tree': hasTreeNavigation }]}>
+	<div class:list={['site-page-layout', {
+		'site-page-layout-tree': hasTreeNavigation,
+		'site-page-layout-contents': hasContentsNavigation,
+	}]}>
 		{hasTreeNavigation && (
-			<SiteTreeNavigation currentPage={currentPage} pageNavigation={pageNavigation} />
+			<SiteTreeNavigation currentPage={currentPage} navigationEntries={siteNavigation} />
 		)}
 		<main
 			class:list={['site-content', { 'site-content-has-breadcrumbs': reserveBreadcrumbSpace }]}
@@ -142,8 +164,15 @@ const reserveBreadcrumbSpace = hasTreeNavigation || showBreadcrumbs;
 			style={`--page-text-width: ${pageTextWidth}`}
 		>
 			{showBreadcrumbs
-				? <SiteBreadcrumbs currentPage={currentPage} pages={sitePages} />
+				? <SiteBreadcrumbs currentPage={currentPage} nodes={siteNodes} />
 				: reserveBreadcrumbSpace && <div class="site-breadcrumbs" aria-hidden="true"></div>}
+			{hasContentsNavigation && (
+				<PageContentsNavigation
+					headings={pageContentsHeadings}
+					pageTitle={currentPage.title}
+					variant="inline"
+				/>
+			)}
 			{renderedSections.map(({ section, sectionIndex, prioritizeFirstImage }) => (
 				<SiteSection
 					section={section}
@@ -154,7 +183,14 @@ const reserveBreadcrumbSpace = hasTreeNavigation || showBreadcrumbs;
 				/>
 			))}
 		</main>
+		{hasContentsNavigation && (
+			<PageContentsNavigation
+				headings={pageContentsHeadings}
+				pageTitle={currentPage.title}
+				variant="rail"
+			/>
+		)}
 	</div>
 	{hasTreeNavigation && <TreeNavigationScript />}
-	{hasMarginNotes && <SiteNotesScript />}
+	{hasCodeBlocks && <CodeBlockCopyScript />}
 </BaseLayout>