@janga/norna 0.7.25 → 0.7.26

package/scripts/sync-site-public.mjs

@@ -9,6 +9,8 @@ import {
 	sitePublicLabel,
 } from './lib/site-paths.mjs';
 import { getSiteStructure } from './lib/site-structure.mjs';
+import { getSiteLinkGraph } from './lib/site-link-graph.mjs';
+import { assertCategoryDestinationModel } from './lib/category-destinations.mjs';
 
 const keepAstroPublicEntries = new Set([
 	'images',
@@ -53,9 +55,12 @@ for (const generatedFile of generatedPublicFiles) {
 }
 
 const siteStructure = await getSiteStructure();
+const { categoryModel } = await getSiteLinkGraph({ siteStructure });
+const { destinations: categoryDestinations } = assertCategoryDestinationModel(categoryModel);
 const sitemapXml = createSitemapXml({
 	siteStructure,
 	siteUrl: projectConfig.site.url,
+	categoryDestinations,
 });
 
 await mkdir(astroPublicDir, { recursive: true });
@@ -79,4 +84,5 @@ for (const entry of sourceEntries) {
 await writeFile(path.join(astroPublicDir, sitemapFilename), sitemapXml);
 
 console.log(`Synced ${sitePublicLabel}/ to ${astroPublicLabel}/.`);
-console.log(`Generated ${astroPublicLabel}/${sitemapFilename} for ${siteStructure.contentFiles.length} public page${siteStructure.contentFiles.length === 1 ? '' : 's'}.`);
+const pageCount = siteStructure.contentFiles.length + categoryDestinations.filter(({ kind }) => kind === 'listing').length;
+console.log(`Generated ${astroPublicLabel}/${sitemapFilename} for ${pageCount} public page${pageCount === 1 ? '' : 's'}.`);

package/src/components/CodeBlockCopyScript.astro

@@ -14,7 +14,7 @@ const labels = {
 		<Copy aria-hidden="true" data-code-copy-icon="copy" size={18} stroke-width={2} />
 		<Check aria-hidden="true" data-code-copy-icon="copied" hidden size={18} stroke-width={2} />
 		<X aria-hidden="true" data-code-copy-icon="failed" hidden size={18} stroke-width={2} />
-		<span class="visually-hidden" aria-live="polite" data-code-copy-status></span>
+		<span class="code-block-copy-status" aria-live="polite" data-code-copy-status></span>
 	</button>
 </template>
 
@@ -24,6 +24,39 @@ const labels = {
 		if (!(template instanceof HTMLTemplateElement)) return;
 
 		const resetTimers = new WeakMap();
+		const layoutUpdaters = [];
+		const prepareLayout = (wrapper, pre) => {
+			const topLevel = wrapper.parentElement?.classList.contains('section-markdown');
+			let scheduled = false;
+			const update = () => {
+				scheduled = false;
+				if (topLevel) {
+					const layout = ['prose', 'end', 'canvas'].find((candidate) => {
+						wrapper.dataset.codeLayout = candidate;
+						return pre.scrollWidth <= pre.clientWidth + 1;
+					}) ?? 'canvas';
+					wrapper.dataset.codeLayout = layout;
+				}
+				const overflow = pre.scrollWidth > pre.clientWidth + 1;
+				wrapper.dataset.codeOverflow = String(overflow);
+				if (overflow) pre.setAttribute('tabindex', '0');
+				else pre.removeAttribute('tabindex');
+			};
+			const schedule = () => {
+				if (scheduled) return;
+				scheduled = true;
+				requestAnimationFrame(update);
+			};
+			layoutUpdaters.push(schedule);
+			if ('ResizeObserver' in window) {
+				const observer = new ResizeObserver(schedule);
+				observer.observe(wrapper.parentElement);
+				const body = wrapper.closest('.section-body');
+				if (body) observer.observe(body);
+			}
+			window.addEventListener('resize', schedule, { passive: true });
+			update();
+		};
 		const copyText = async (text) => {
 			if (navigator.clipboard?.writeText) {
 				try {
@@ -45,7 +78,7 @@ const labels = {
 
 		const showState = (button, state) => {
 			button.querySelectorAll('[data-code-copy-icon]').forEach((icon) => {
-				icon.hidden = icon.getAttribute('data-code-copy-icon') !== state;
+				icon.toggleAttribute('hidden', icon.getAttribute('data-code-copy-icon') !== state);
 			});
 			const status = button.querySelector('[data-code-copy-status]');
 			if (status) status.textContent = state === 'copied' ? labels.copied : labels.failed;
@@ -54,11 +87,11 @@ const labels = {
 			clearTimeout(resetTimers.get(button));
 			resetTimers.set(button, setTimeout(() => {
 				button.querySelectorAll('[data-code-copy-icon]').forEach((icon) => {
-					icon.hidden = icon.getAttribute('data-code-copy-icon') !== 'copy';
+					icon.toggleAttribute('hidden', icon.getAttribute('data-code-copy-icon') !== 'copy');
 				});
-				if (status) status.textContent = '';
+				// Keep the live announcement available after the visual feedback ends.
 				delete button.dataset.copyState;
-			}, 2000));
+			}, state === 'copied' ? 1000 : 2000));
 		};
 
 		document.querySelectorAll('#main-content .section-markdown pre > code').forEach((code) => {
@@ -79,9 +112,12 @@ const labels = {
 			if (!(button instanceof HTMLButtonElement)) return;
 			const title = codeExample?.querySelector(':scope > .norna-code-title');
 			(title ?? wrapper).append(button);
+			prepareLayout(wrapper, pre);
 			button.addEventListener('click', async () => {
 				if (button.dataset.copyBusy === 'true') return;
 				button.dataset.copyBusy = 'true';
+				const status = button.querySelector('[data-code-copy-status]');
+				if (status) status.textContent = '';
 				try {
 					await copyText(code.textContent ?? '');
 					showState(button, 'copied');
@@ -92,6 +128,12 @@ const labels = {
 				}
 			});
 		});
+		const preferences = new MutationObserver(() => layoutUpdaters.forEach((update) => update()));
+		preferences.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: ['data-reading-width', 'data-focus-reading', 'dir'],
+		});
+		document.fonts?.ready.then(() => layoutUpdaters.forEach((update) => update()));
 
 		template.remove();
 	})();

package/src/components/ContentBlocks.astro

@@ -0,0 +1,39 @@
+---
+import CardList from './CardList.astro';
+import ImageCarousel from './ImageCarousel.astro';
+import ImageStack from './ImageStack.astro';
+import PageList from './PageList.astro';
+import type { SectionContentBlock } from '../lib/sectionContent';
+
+interface Props {
+	blocks: SectionContentBlock[];
+	title: string;
+	images: {
+		maxAvailableWidthPercent: { desktop: number; mobile: number };
+		maxAvailableHeightPercent?: { desktop: number; mobile: number };
+	};
+	cardWidth: 'text' | 'narrow' | 'normal' | 'wide';
+	prioritizeFirstImage?: boolean;
+}
+const { blocks, title, images, cardWidth, prioritizeFirstImage = false } = Astro.props;
+const firstMediaIndex = blocks.findIndex((block) => block.type === 'image-stack' || block.type === 'image-carousel');
+---
+
+{blocks.map((block, index) => {
+	if (block.type === 'html') return <div class="section-markdown" set:html={block.html} />;
+	if (block.type === 'tabs') return (
+		<div class="content-tabs content-block-note-lane-boundary" data-content-tabs>
+			<div class="content-tabs-controls" data-tabs-controls hidden></div>
+			{block.panels.map((panel, panelIndex) => (
+				<div class="content-tab-panel" data-tab-panel role="group" aria-labelledby={`norna-tabs-label-${block.index}-${panelIndex}`}>
+					<div class="content-tab-label" data-tab-label id={`norna-tabs-label-${block.index}-${panelIndex}`}>{panel.label}</div>
+					<Astro.self blocks={panel.contentBlocks} title={title} images={images} cardWidth={cardWidth} />
+				</div>
+			))}
+		</div>
+	);
+	if (block.type === 'page-list') return <PageList pages={block.pages} />;
+	if (block.type === 'card-list') return <CardList cards={block.cards} layout={block.layout} flow={block.flow} size={block.size} width={block.width ?? cardWidth} />;
+	if (block.type === 'image-carousel') return <ImageCarousel title={title} images={block.images} maxAvailableWidthPercent={images.maxAvailableWidthPercent} maxAvailableHeightPercent={images.maxAvailableHeightPercent} priorityFirstImage={prioritizeFirstImage && index === firstMediaIndex} />;
+	return <ImageStack title={title} images={block.images} maxAvailableWidthPercent={images.maxAvailableWidthPercent} priorityFirstImage={prioritizeFirstImage && index === firstMediaIndex} />;
+})}

package/src/components/ContentTabsScript.astro

@@ -0,0 +1,60 @@
+<script>
+	document.querySelectorAll<HTMLElement>('[data-content-tabs]').forEach((group, groupIndex) => {
+		const controls = group.querySelector<HTMLElement>('[data-tabs-controls]')!;
+		const panels = Array.from(group.querySelectorAll<HTMLElement>(':scope > [data-tab-panel]'));
+		const labels = panels.map((panel) => panel.querySelector<HTMLElement>('[data-tab-label]')!);
+		const buttons = panels.map((panel, index) => {
+			const button = document.createElement('button');
+			const id = `norna-tabs-${groupIndex}-${index}`;
+			button.type = 'button';
+			button.id = `${id}-tab`;
+			button.textContent = labels[index].textContent;
+			button.setAttribute('role', 'tab');
+			button.setAttribute('aria-controls', id);
+			panel.id = id;
+			panel.setAttribute('role', 'tabpanel');
+			panel.setAttribute('aria-labelledby', button.id);
+			panel.tabIndex = 0;
+			controls.append(button);
+			return button;
+		});
+		const heading = group.closest('section')?.querySelector<HTMLElement>('h1, h2');
+		controls.setAttribute('role', 'tablist');
+		if (heading?.id) controls.setAttribute('aria-labelledby', heading.id);
+		const select = (selected: number, focus = false) => {
+			buttons.forEach((button, index) => {
+				button.setAttribute('aria-selected', String(index === selected));
+				button.tabIndex = index === selected ? 0 : -1;
+				panels[index].hidden = index !== selected;
+			});
+			if (focus) buttons[selected].focus({ preventScroll: true });
+			group.dispatchEvent(new CustomEvent('norna:tab-change', { bubbles: true }));
+			window.dispatchEvent(new Event('resize'));
+		};
+		buttons.forEach((button, index) => {
+			button.addEventListener('click', () => select(index));
+			button.addEventListener('keydown', (event) => {
+				let selected = index;
+				if (event.key === 'ArrowRight') selected = (index + 1) % buttons.length;
+				else if (event.key === 'ArrowLeft') selected = (index - 1 + buttons.length) % buttons.length;
+				else if (event.key === 'Home') selected = 0;
+				else if (event.key === 'End') selected = buttons.length - 1;
+				else return;
+				event.preventDefault();
+				select(selected, true);
+			});
+		});
+		controls.hidden = false;
+		group.dataset.tabsReady = 'true';
+		select(0);
+		const revealTarget = () => {
+			let id: string;
+			try { id = decodeURIComponent(location.hash.slice(1)); } catch { return; }
+			const target = document.getElementById(id);
+			const index = panels.findIndex((panel) => target && panel.contains(target));
+			if (index >= 0) { select(index); target?.scrollIntoView(); }
+		};
+		window.addEventListener('hashchange', revealTarget);
+		revealTarget();
+	});
+</script>

package/src/components/DisplaySettings.astro

@@ -49,25 +49,23 @@ const widthOptions = [
 	<form class="display-settings-panel">
 		<p class="display-settings-title">{labels.displaySettings}</p>
 
-		{controls.appearance && (
-			<fieldset>
-				<legend>{labels.appearance}</legend>
-				<div class="display-settings-segmented">
-					{appearanceOptions.map((option) => (
-						<label>
-							<input
-								type="radio"
-								name="appearance"
-								value={option.value}
-								checked={defaults.appearance === option.value}
-								data-reader-appearance
-							/>
-							<span>{option.label}</span>
-						</label>
-					))}
-				</div>
-			</fieldset>
-		)}
+		<fieldset>
+			<legend>{labels.appearance}</legend>
+			<div class="display-settings-segmented">
+				{appearanceOptions.map((option) => (
+					<label>
+						<input
+							type="radio"
+							name="appearance"
+							value={option.value}
+							checked={defaults.appearance === option.value}
+							data-reader-appearance
+						/>
+						<span>{option.label}</span>
+					</label>
+				))}
+			</div>
+		</fieldset>
 
 		{controls.readingWidth && (
 			<fieldset>

package/src/components/NavigationPageTree.astro

@@ -7,7 +7,7 @@ import PageContentsLinks from './PageContentsLinks.astro';
 
 interface Props {
 	nodes: SiteNavigationNode[];
-	currentPage?: SitePage;
+	currentPage?: SiteNode;
 	variant: 'mobile' | 'sidebar' | 'submenu';
 	integratePageSections?: boolean;
 }

package/src/components/NoteNavigationScript.astro

@@ -0,0 +1,4 @@
+<script>
+	import { installNoteNavigation } from '../lib/noteNavigation';
+	installNoteNavigation();
+</script>

package/src/components/PageAliasRedirect.astro

@@ -6,9 +6,10 @@ import { withBasePath } from '../lib/basePath';
 interface Props {
 	targetPathname: string;
 	targetTitle: string;
+	categoryTitle?: string;
 }
 
-const { targetPathname, targetTitle } = Astro.props;
+const { targetPathname, targetTitle, categoryTitle } = Astro.props;
 const { labels, lang } = projectConfig.locale;
 const targetHref = withBasePath(projectConfig.site.basePath, targetPathname);
 const canonicalUrl = getAbsolutePageUrl(projectConfig.site.url, targetPathname);
@@ -22,7 +23,7 @@ const canonicalUrl = getAbsolutePageUrl(projectConfig.site.url, targetPathname);
 		<meta name="robots" content="noindex, follow" />
 		<meta http-equiv="refresh" content={`0; url=${targetHref}`} />
 		<link rel="canonical" href={canonicalUrl} />
-		<title>{labels.pageMoved}: {targetTitle}</title>
+		<title>{categoryTitle ?? labels.pageMoved}: {targetTitle}</title>
 		<style is:inline>
 			:root {
 				color-scheme: light dark;
@@ -42,8 +43,8 @@ const canonicalUrl = getAbsolutePageUrl(projectConfig.site.url, targetPathname);
 	</head>
 	<body>
 		<main>
-			<h1>{labels.pageMoved}</h1>
-			<p>{labels.pageMovedText} <a href={targetHref}>{targetTitle}</a>.</p>
+			<h1>{categoryTitle ?? labels.pageMoved}</h1>
+			<p>{!categoryTitle && labels.pageMovedText} <a href={targetHref}>{targetTitle}</a>.</p>
 		</main>
 	</body>
 </html>

package/src/components/SearchNavigationScript.astro

@@ -0,0 +1,4 @@
+<script>
+	import { setupSearchNavigation } from '../lib/searchNavigation';
+	setupSearchNavigation();
+</script>

package/src/components/SearchPage.astro

@@ -1,5 +1,6 @@
 ---
 import { getCollection } from 'astro:content';
+import { ArrowLeft } from '@lucide/astro';
 import { resolveNavigationModel } from '../../scripts/lib/navigation-model.mjs';
 import { getTextWidthCssValue, resolveFrameColors, resolvePagePresentation } from '../../scripts/lib/presentation.mjs';
 import { projectConfig, resolveThemeVisualConfig } from '../../scripts/lib/project-config.mjs';
@@ -82,6 +83,9 @@ const hasNavigationRailFrame = navigationModel.requestedMode === 'tree'
 		&& (navigationModel.hasNestedPages || navigationModel.hasCategories)
 	);
 const bundlePath = withBasePath(projectConfig.site.basePath, '/pagefind/');
+const pagefindTranslationOption = projectConfig.locale.pagefindTranslations
+	? `,\n\t\t\ttranslations: ${JSON.stringify(projectConfig.locale.pagefindTranslations)}`
+	: '';
 const searchScript = `(() => {
 	const root = document.querySelector('#norna-search');
 	const status = root?.querySelector('[data-search-status]');
@@ -95,7 +99,7 @@ const searchScript = `(() => {
 			bundlePath: ${JSON.stringify(bundlePath)},
 			baseUrl: ${JSON.stringify(projectConfig.site.basePath)},
 			showImages: false,
-			showSubResults: true
+			showSubResults: true${pagefindTranslationOption}
 		});
 		const labelInput = () => {
 			const input = root.querySelector('.pagefind-ui__search-input');
@@ -145,7 +149,44 @@ const searchScript = `(() => {
 			pagePresentation={pagePresentation}
 			visualTheme={visualTheme}
 			sectionIndex={0}
-		/>
+		>
+			<div slot="before-heading" class="search-return">
+				<a href={projectConfig.site.basePath} data-search-return data-search-return-label={labels.searchReturn}>
+					<ArrowLeft aria-hidden="true" />
+					<span>{labels.returnHome}</span>
+				</a>
+			</div>
+		</SiteSection>
 	</main>
 	<script is:inline set:html={searchScript} />
 </BaseLayout>
+
+<style>
+	.search-return {
+		width: var(--layout-heading-width);
+		margin-inline: var(--layout-inline-start-margin) var(--layout-inline-end-margin);
+		margin-bottom: 1rem;
+	}
+
+	.search-return a {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5rem;
+		min-height: 2.75rem;
+		max-width: 100%;
+		color: var(--color-link-text);
+		font-size: 0.9375rem;
+		line-height: 1.5;
+		text-underline-offset: 0.2em;
+	}
+
+	.search-return svg {
+		width: 1.125rem;
+		height: 1.125rem;
+		flex-shrink: 0;
+	}
+
+	.search-return span {
+		overflow-wrap: anywhere;
+	}
+</style>

package/src/components/SectionNavigationScript.astro

@@ -1,15 +1,18 @@
 <script>
+	import { setupNavigationFollowing } from '../lib/navigationFollowing';
+
 	const siteTop = document.querySelector<HTMLElement>('.site-top');
 	const mobileMenu = document.querySelector<HTMLDetailsElement>('.mobile-nav-menu');
 	const sectionLinks = Array.from(document.querySelectorAll<HTMLAnchorElement>(
-		'.mobile-nav-sections a, .page-contents-links a, .page-nav a',
+		'.mobile-nav-sections a, .page-contents-links a, .page-nav a, .top-page-sections a',
 	));
-	const submenuItems = Array.from(document.querySelectorAll<HTMLElement>('.site-nav-item-has-submenu'));
+	const topPageMenus = Array.from(document.querySelectorAll<HTMLDetailsElement>('.top-page-menu'));
 	const mobileDestinationLinks = Array.from(mobileMenu?.querySelectorAll<HTMLAnchorElement>('.mobile-nav-destination') ?? []);
 	const mobileMenuSummary = mobileMenu?.querySelector<HTMLElement>(':scope > summary');
 	const mobileMenuPanel = mobileMenu?.querySelector<HTMLElement>('[data-compact-navigation-panel]');
 	const mobileMenuClose = mobileMenu?.querySelector<HTMLButtonElement>('[data-compact-navigation-close]');
 	const sectionTrackingEnabled = document.documentElement.dataset.sectionTracking === 'enabled';
+	const navigationFollowing = sectionTrackingEnabled ? setupNavigationFollowing() : undefined;
 	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 [];
@@ -101,6 +104,7 @@
 				link.removeAttribute('aria-current');
 			}
 		});
+		navigationFollowing?.update();
 	};
 
 	const updateReadingPosition = () => {
@@ -146,6 +150,7 @@
 				link.removeAttribute('aria-current');
 			}
 		});
+		navigationFollowing?.update();
 	};
 
 	const scheduleReadingPositionUpdate = () => {
@@ -153,11 +158,38 @@
 		sectionTrackingFrame = window.requestAnimationFrame(updateReadingPosition);
 	};
 
-	submenuItems.forEach((item) => {
-		const resetDismissal = () => delete item.dataset.submenuDismissed;
-		item.addEventListener('pointerleave', resetDismissal);
-		item.querySelector<HTMLAnchorElement>(':scope > a')?.addEventListener('focus', resetDismissal);
+	topPageMenus.forEach((menu) => {
+		menu.addEventListener('toggle', () => {
+			if (!menu.open) return;
+			topPageMenus.forEach((other) => { if (other !== menu) other.open = false; });
+			const panel = menu.querySelector<HTMLElement>('.top-page-panel');
+			if (!panel) return;
+			panel.style.removeProperty('--top-page-panel-shift');
+			const rectangle = panel.getBoundingClientRect();
+			const shift = Math.max(0, 16 - rectangle.left)
+				- Math.max(0, rectangle.right - document.documentElement.clientWidth + 16);
+			panel.style.setProperty('--top-page-panel-shift', `${shift}px`);
+		});
+		menu.addEventListener('keydown', (event) => {
+			if (event.key !== 'Escape' || !menu.open) return;
+			event.preventDefault();
+			menu.open = false;
+			menu.querySelector('summary')?.focus();
+		});
+		menu.addEventListener('focusout', (event) => {
+			if (event.relatedTarget instanceof Node && !menu.contains(event.relatedTarget)) menu.open = false;
+		});
+		menu.querySelectorAll('a').forEach((link) => {
+			link.addEventListener('click', () => { menu.open = false; });
+		});
 	});
+	if (topPageMenus.length > 0) {
+		document.addEventListener('pointerdown', (event) => {
+			topPageMenus.forEach((menu) => {
+				if (event.target instanceof Node && !menu.contains(event.target)) menu.open = false;
+			});
+		});
+	}
 
 	if (mobileMenu) {
 		const siteHeader = mobileMenu.closest<HTMLElement>('.site-top');
@@ -192,7 +224,7 @@
 		};
 		const closeMenu = (restoreFocus: boolean) => {
 			mobileMenu.open = false;
-			if (restoreFocus) mobileMenuSummary?.focus();
+			if (restoreFocus) mobileMenuSummary?.focus({ preventScroll: true });
 		};
 
 		mobileDestinationLinks.forEach((link) => {
@@ -206,9 +238,10 @@
 			document.documentElement.classList.toggle('mobile-navigation-open', mobileMenu.open);
 			setBackgroundInert(mobileMenu.open);
 			if (mobileMenu.open) {
-				window.requestAnimationFrame(() => (
-					mobileMenuClose?.focus()
-				));
+				window.requestAnimationFrame(() => {
+					mobileMenuClose?.focus({ preventScroll: true });
+					navigationFollowing?.revealCompact();
+				});
 			}
 		});
 
@@ -247,7 +280,6 @@
 
 			pauseSectionTrackingForAnchorNavigation();
 			if (mobileMenu) mobileMenu.open = false;
-			link.closest<HTMLElement>('.site-nav-item')?.setAttribute('data-submenu-dismissed', 'true');
 
 			window.requestAnimationFrame(() => {
 				updateCurrentSection();

package/src/components/SiteBreadcrumbs.astro

@@ -4,7 +4,7 @@ import { withBasePath } from '../lib/basePath';
 import type { SiteNode, SitePage } from '../lib/sitePages';
 
 interface Props {
-	currentPage: SitePage;
+	currentPage: SiteNode;
 	nodes: SiteNode[];
 }
 

package/src/components/SiteNavigation.astro

@@ -4,16 +4,17 @@ import projectConfig from '../../scripts/lib/project-config.mjs';
 import { withBasePath } from '../lib/basePath';
 import type { SectionNavigation } from '../lib/sectionContent';
 import {
-	getFirstPageInNavigationNode,
 	getListedSiteNavigationTree,
 	type SiteNavigationEntry,
 	type SiteNavigationNode,
 } from '../lib/siteNavigation';
-import type { SiteNode, SitePage } from '../lib/sitePages';
+import type { SiteNode } from '../lib/sitePages';
 import DisplaySettings from './DisplaySettings.astro';
 import NavigationPageTree from './NavigationPageTree.astro';
 import NavigationTreeControls from './NavigationTreeControls.astro';
+import TopPageMenu from './TopPageMenu.astro';
 import SectionNavigationScript from './SectionNavigationScript.astro';
+import SearchNavigationScript from './SearchNavigationScript.astro';
 
 type FrameColors = {
 	backgroundColor: string;
@@ -26,7 +27,7 @@ interface Props {
 		alt: string;
 		height?: string;
 	};
-	currentPage?: SitePage;
+	currentPage?: SiteNode;
 	navigationEntries: SiteNavigationEntry[];
 	navigationMode: 'sections' | 'top' | 'tree';
 	showTopNavigationSubmenus: boolean;
@@ -67,6 +68,12 @@ const navigationStyle = [
 	...(logo?.height ? [`--site-brand-logo-height: ${logo.height}`] : []),
 ].join('; ');
 const siteNavigationTree = getListedSiteNavigationTree(navigationEntries);
+const mobileNavigationTree = navigationMode === 'top'
+	? getListedSiteNavigationTree(navigationEntries.map((entry) => ({
+		...entry,
+		headings: entry.headings.filter((heading) => heading.depth === 2),
+	})))
+	: siteNavigationTree;
 const topLevelNavigation = siteNavigationTree;
 const showSiteNavigation = topLevelNavigation.some(({ node }) => !node.isHome);
 const homeNode = navigationEntries.find(({ node }) => node.isHome)?.node;
@@ -75,13 +82,13 @@ if (!homePage) throw new Error('Site navigation requires a homepage.');
 const currentPageNavigation = currentPage
 	? navigationEntries.find(({ node }) => node.kind === 'page' && node.pathname === currentPage.pathname)
 	: undefined;
-const isCurrentPage = (page: SitePage) => currentPage?.pathname === page.pathname;
+const isCurrentPage = (page: SiteNode) => currentPage?.pathname === page.pathname;
 const isCurrentBranch = (node: SiteNode) => Boolean(currentPage && (
 	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 pageHref = (page: SiteNode) => withBasePath(projectConfig.site.basePath, page.pathname);
+const getNavigationPage = (node: SiteNavigationNode) => node.node;
 const hasSectionMenu = (pageSections: SectionNavigation[]) => pageSections.length > 1;
 const showSinglePageTopLink = !showSiteNavigation;
 const currentPageSectionCount = currentPageNavigation?.sections.length ?? 0;
@@ -97,6 +104,7 @@ const hasTreePageContents = Boolean(
 );
 const showPageNavigation = Boolean(
 	navigationMode !== 'tree'
+	&& (navigationMode !== 'top' || showSinglePageTopLink)
 	&& currentPageNavigation
 	&& (showSinglePageTopLink || hasCurrentPageSectionMenu),
 );
@@ -107,7 +115,7 @@ const showSearch = projectConfig.search.enabled;
 const searchHref = withBasePath(projectConfig.site.basePath, '/search/');
 const showDesktopNavigationRow = showSiteNavigation || Boolean(logo) || showReaderControls || showSearch;
 const showNavigationRow = showMobileNavigation || showDesktopNavigationRow;
-const needsNavigationScript = hasCurrentPageSectionMenu || hasTreePageContents || navigationMode === 'tree';
+const needsNavigationScript = showMobileNavigation || hasCurrentPageSectionMenu || hasTreePageContents;
 ---
 
 <a class="skip-link" href="#main-content">{projectConfig.locale.labels.skipToContent}</a>
@@ -138,22 +146,20 @@ const needsNavigationScript = hasCurrentPageSectionMenu || hasTreePageContents |
 					{topLevelNavigation.map((navigationNode) => {
 						const destination = getNavigationPage(navigationNode);
 						if (!destination) return null;
-						const nodeIsCurrentPage = navigationNode.node.kind === 'page' && isCurrentPage(navigationNode.node);
+						const nodeIsCurrentPage = 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>
-								)}
+								<TopPageMenu
+									node={navigationNode}
+									currentPage={currentPage}
+									showSections={navigationMode === 'top'}
+									showChildren={showTopNavigationSubmenus}
+								/>
 							</li>
 						);
 					})}
@@ -165,6 +171,8 @@ const needsNavigationScript = hasCurrentPageSectionMenu || hasTreePageContents |
 					<a
 						class="site-search-link"
 						href={searchHref}
+						data-search-base={projectConfig.site.basePath}
+						data-search-source-title={currentPage?.title}
 						aria-current={searchPage ? 'page' : undefined}
 						aria-label={projectConfig.locale.labels.search}
 						title={projectConfig.locale.labels.search}
@@ -211,18 +219,18 @@ const needsNavigationScript = hasCurrentPageSectionMenu || hasTreePageContents |
 											<h2 tabindex="-1">{projectConfig.locale.labels.siteNavigation}</h2>
 											<NavigationTreeControls
 												idPrefix="mobile-tree-navigation"
-												nodes={siteNavigationTree}
+												nodes={mobileNavigationTree}
 											/>
 											<NavigationPageTree
-												nodes={siteNavigationTree}
+												nodes={mobileNavigationTree}
 												currentPage={currentPage}
 												variant="mobile"
-												integratePageSections={navigationMode === 'tree'}
+												integratePageSections={navigationMode === 'tree' || navigationMode === 'top'}
 											/>
 										</nav>
 									)}
 
-									{navigationMode !== 'tree' && hasCurrentPageSectionMenu && currentPageNavigation && currentPage && (
+									{(navigationMode === 'sections' || !showSiteNavigation) && hasCurrentPageSectionMenu && currentPageNavigation && currentPage && (
 										<nav class="mobile-nav-view" aria-label={projectConfig.locale.labels.pageNavigation}>
 											{!showSinglePageTopLink && (
 												<h2 tabindex="-1">{projectConfig.locale.labels.pageNavigation}</h2>
@@ -285,3 +293,4 @@ const needsNavigationScript = hasCurrentPageSectionMenu || hasTreePageContents |
 </header>
 
 {needsNavigationScript && <SectionNavigationScript />}
+{showSearch && <SearchNavigationScript />}