@janga/norna 0.7.25 → 0.7.27

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

@@ -1,34 +1,70 @@
 ---
+import { getCollection } from 'astro:content';
+import { getPresentationCssVariables, resolveThemePresentation } from '../../scripts/lib/presentation.mjs';
 import projectConfig from '../../scripts/lib/project-config.mjs';
 import { getAbsolutePageUrl } from '../../scripts/lib/site-page-urls.mjs';
+import { siteThemeLabel } from '../../scripts/lib/site-paths.mjs';
 import { withBasePath } from '../lib/basePath';
+import { getReaderPreferencesScript } from '../lib/readerPreferencesScript.mjs';
 
 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);
+const [siteTheme] = await getCollection('theme');
+if (!siteTheme) throw new Error(`${siteThemeLabel} is required. Add a root theme before building the site.`);
+const presentation = resolveThemePresentation(siteTheme.data, siteThemeLabel);
+const documentStyle = Object.entries(getPresentationCssVariables(presentation))
+	.map(([name, value]) => `${name}: ${value}`).join('; ');
+const readerPreferencesScript = getReaderPreferencesScript({
+	...presentation.readerPreferences,
+	cookiePath: projectConfig.site.basePath,
+});
 ---
 
 <!doctype html>
-<html lang={lang} data-pagefind-ignore="all">
+<html lang={lang} data-pagefind-ignore="all" data-appearance={presentation.appearance.default} style={documentStyle}>
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width" />
 		<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>
+		<meta name="theme-color" content={presentation.palette.page.backgroundColor} />
 		<style is:inline>
 			:root {
-				color-scheme: light dark;
+				--color-page: var(--palette-light-page-background);
+				--color-primary-text: var(--palette-light-primary-text);
+				--color-link-text: var(--palette-light-link-text);
+				color-scheme: light;
+				min-height: 100%;
+				background: var(--color-page);
+				color: var(--color-primary-text);
 				font-family: system-ui, sans-serif;
 			}
 
+			:root[data-appearance='dark'] {
+				--color-page: var(--palette-dark-page-background);
+				--color-primary-text: var(--palette-dark-primary-text);
+				--color-link-text: var(--palette-dark-link-text);
+				color-scheme: dark;
+			}
+
+			@media (prefers-color-scheme: dark) {
+				:root[data-appearance='system'] {
+					--color-page: var(--palette-dark-page-background);
+					--color-primary-text: var(--palette-dark-primary-text);
+					--color-link-text: var(--palette-dark-link-text);
+					color-scheme: dark;
+				}
+			}
+
 			body {
 				margin: 0;
 				padding: 2rem;
@@ -38,12 +74,18 @@ const canonicalUrl = getAbsolutePageUrl(projectConfig.site.url, targetPathname);
 				max-width: 42rem;
 				margin-inline: auto;
 			}
+
+			a {
+				color: var(--color-link-text);
+			}
 		</style>
+		<script is:inline set:html={readerPreferencesScript} />
+		<meta http-equiv="refresh" content={`0; url=${targetHref}`} />
 	</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[];
 }