@janga/norna 0.7.16 → 0.7.18

package/scripts/test-schemas.mjs

@@ -10,15 +10,21 @@ const expectedDocumentationRef = `v${packageJson.version}`;
 const filenames = [
 	'config.schema.json',
 	'theme.schema.json',
+	'page-theme.schema.json',
 	'sitewide-content.schema.json',
 	'content-frontmatter.schema.json',
 ];
 const requiredRichHelp = {
-	'config.schema.json': ['url', 'language', 'scrollBehavior'],
-	'theme.schema.json': ['preset', 'layout', 'images', 'typography', 'palette', 'sectionSurfaces'],
-	'sitewide-content.schema.json': ['navigation', 'banners', 'footer'],
-	'content-frontmatter.schema.json': ['title', 'description', 'navigation', 'sections'],
+	'config.schema.json': ['url', 'language', 'navigation', 'scrollBehavior'],
+	'theme.schema.json': ['preset', 'shape', 'layout', 'images', 'typography', 'palette', 'sections'],
+	'page-theme.schema.json': ['layout', 'images', 'sections'],
+	'sitewide-content.schema.json': ['logo', 'banners', 'footer'],
+	'content-frontmatter.schema.json': ['page', 'navigation'],
 };
+const manifest = JSON.parse(await readFile(path.join(root, 'schemas', 'manifest.json'), 'utf8'));
+assert.equal(manifest.editorApiVersion, 1);
+assert.equal(manifest.schemaVersion, 2);
+assert.equal(manifest.files.pageTheme, 'page-theme.schema.json');
 
 const githubHeadingAnchor = (heading) => heading
 	.toLowerCase()
@@ -49,22 +55,26 @@ const assertDocumentationLinks = async (markdownDescription, location) => {
 	}
 };
 
-const visitSchema = (schema, location) => {
+const visitSchema = (schema, location, richProperties) => {
 	assert.equal(schema.enum, undefined, `${location} uses an undescribed enum.`);
 	if (schema.properties) {
 		for (const [name, property] of Object.entries(schema.properties)) {
 			assert.ok(property.description, `${location}.${name} has no description.`);
-			visitSchema(property, `${location}.${name}`);
+			richProperties.push([property, `${location}.${name}`]);
+			visitSchema(property, `${location}.${name}`, richProperties);
 		}
 	}
-	if (schema.items) visitSchema(schema.items, `${location}[]`);
+	if (schema.items) visitSchema(schema.items, `${location}[]`, richProperties);
+	if (schema.additionalProperties && typeof schema.additionalProperties === 'object') {
+		visitSchema(schema.additionalProperties, `${location}.*`, richProperties);
+	}
 	for (const keyword of ['allOf', 'anyOf', 'oneOf']) {
 		for (const [index, candidate] of (schema[keyword] ?? []).entries()) {
 			if (Object.hasOwn(candidate, 'const')) {
 				assert.ok(candidate.title, `${location}.${keyword}[${index}] has no title.`);
 				assert.ok(candidate.description, `${location}.${keyword}[${index}] has no description.`);
 			}
-			visitSchema(candidate, `${location}.${keyword}[${index}]`);
+			visitSchema(candidate, `${location}.${keyword}[${index}]`, richProperties);
 		}
 	}
 };
@@ -83,7 +93,16 @@ for (const filename of filenames) {
 		);
 		await assertDocumentationLinks(property.markdownDescription, `${filename}.${propertyName}`);
 	}
-	visitSchema(schema, filename);
+	const richProperties = [];
+	visitSchema(schema, filename, richProperties);
+	for (const [property, location] of richProperties) {
+		assert.match(
+			property.markdownDescription,
+			/^```yaml\n/,
+			`${location} rich help must start with YAML syntax.`,
+		);
+		await assertDocumentationLinks(property.markdownDescription, location);
+	}
 }
 
 const config = JSON.parse(await readFile(path.join(root, 'schemas', 'config.schema.json'), 'utf8'));
@@ -92,11 +111,59 @@ assert.deepEqual(config.properties.language.examples, ['en', 'sv', 'en-GB', 'sv-
 assert.equal(config.properties.scrollBehavior.default, 'instant');
 
 const sitewide = JSON.parse(await readFile(path.join(root, 'schemas', 'sitewide-content.schema.json'), 'utf8'));
-assert.deepEqual(Object.keys(sitewide.properties.navigation.properties), ['label', 'logo']);
-assert.deepEqual(Object.keys(sitewide.properties.navigation.properties.logo.properties), ['height']);
-assert.match(sitewide.properties.navigation.properties.logo.markdownDescription, /```yaml\nnavigation:\n  label: Example Site\n  logo:\n    height: 2rem\n```/);
-assert.match(sitewide.properties.navigation.properties.logo.markdownDescription, /does not enable or select the file/);
-assert.match(sitewide.properties.navigation.properties.logo.markdownDescription, /docs\/public-files\.md#navigation-logo/);
-assert.equal(sitewide.properties.navigation.properties.logo.description.length < 100, true);
+assert.deepEqual(Object.keys(sitewide.properties.logo.properties), ['height']);
+assert.match(sitewide.properties.logo.markdownDescription, /```yaml\nlogo:\n  height: 2rem\n```/);
+assert.match(sitewide.properties.logo.markdownDescription, /does not enable or select the file/);
+assert.match(sitewide.properties.logo.markdownDescription, /homepage Markdown H1/);
+assert.match(sitewide.properties.logo.markdownDescription, /docs\/public-files\.md#navigation-logo/);
+assert.equal(sitewide.properties.logo.description.length < 100, true);
+const bannerItem = sitewide.properties.banners.items;
+assert.equal(bannerItem.title, 'Warning banner');
+assert.match(bannerItem.description, /important temporary information/);
+assert.match(bannerItem.markdownDescription, /A `warning` is a dismissible site-wide notice/);
+await assertDocumentationLinks(bannerItem.markdownDescription, 'sitewide-content.schema.json.banners[]');
+assert.equal(bannerItem.defaultSnippets[0].label, 'Warning banner');
+assert.deepEqual(bannerItem.defaultSnippets[0].body, {
+	id: '${1:project-status}',
+	tone: 'warning',
+	title: '${2:Important notice}',
+	text: '${3:Brief explanation.}',
+});
+await assertDocumentationLinks(
+	bannerItem.defaultSnippets[0].markdownDescription,
+	'sitewide-content.schema.json.banners[].defaultSnippets[0]',
+);
+const buildInfo = sitewide.properties.footer.properties.buildInfo;
+assert.equal(buildInfo.type, 'boolean');
+assert.equal(buildInfo.default, false);
+assert.match(buildInfo.markdownDescription, /footer:\n  buildInfo: true/);
+
+const theme = JSON.parse(await readFile(path.join(root, 'schemas', 'theme.schema.json'), 'utf8'));
+assert.equal(theme.properties.layout.properties.gutter.defaultSnippets[0].label, 'Responsive page gutter');
+assert.equal(theme.properties.layout.properties.spacing.defaultSnippets[0].label, 'Layout spacing overrides');
+assert.equal(theme.properties.typography.properties.overrides.defaultSnippets[0].label, 'Typography overrides');
+assert.equal(
+	theme.properties.images.properties.maxAvailableWidthPercent.defaultSnippets[0].label,
+	'Responsive image limit',
+);
+assert.equal(theme.properties.navigation, undefined);
+assert.equal(theme.properties.layout.properties.density, undefined);
+assert.ok(theme.properties.layout.properties.contentSpacing);
+assert.ok(theme.properties.layout.properties.textWidth);
+assert.ok(theme.properties.sections.properties.backgroundPattern);
+
+const pageTheme = JSON.parse(await readFile(path.join(root, 'schemas', 'page-theme.schema.json'), 'utf8'));
+assert.deepEqual(Object.keys(pageTheme.properties), ['layout', 'images', 'sections']);
+assert.deepEqual(Object.keys(pageTheme.properties.layout.properties), ['contentSpacing', 'textWidth']);
+assert.equal(pageTheme.properties.preset, undefined);
+assert.equal(pageTheme.properties.palette, undefined);
+assert.equal(pageTheme.properties.typography, undefined);
+
+const content = JSON.parse(await readFile(path.join(root, 'schemas', 'content-frontmatter.schema.json'), 'utf8'));
+assert.deepEqual(Object.keys(content.properties), ['page', 'navigation']);
+assert.deepEqual(Object.keys(content.properties.page.properties), ['description']);
+assert.equal(content.properties.page.required, undefined);
+assert.equal(content.required, undefined);
+assert.deepEqual(Object.keys(content.properties.navigation.properties), ['listed']);
 
 console.log('Schema metadata tests passed.');

package/scripts/test-theme-presets.mjs

@@ -35,12 +35,14 @@ try {
 		assert.ok(metadata.description);
 		const resolved = resolveThemeConfig({ preset: presetName }, 'test theme');
 		assert.equal(resolved.preset, presetName);
-		assert.ok(resolved.layout?.density);
+		assert.ok(resolved.layout?.contentSpacing);
+		assert.ok(resolved.layout?.textWidth);
+		assert.ok(resolved.shape);
 		assert.ok(resolved.images?.width);
 		assert.ok(resolved.typography?.fontFamily);
 		assert.ok(resolved.typography?.profile);
 		assert.ok(resolved.palette);
-		assert.ok(resolved.sectionSurfaces);
+		assert.ok(resolved.sections?.backgroundPattern);
 	}
 
 	const overridden = resolveThemeConfig({
@@ -48,22 +50,20 @@ try {
 		layout: { pageWidth: '1300px' },
 		palette: 'dark',
 	}, 'test theme');
-	assert.equal(overridden.layout.density, 'compact');
+	assert.equal(overridden.layout.contentSpacing, 'compact');
+	assert.equal(overridden.layout.textWidth, 'narrow');
 	assert.equal(overridden.layout.pageWidth, '1300px');
+	assert.equal(overridden.layout.localNavigationGap, 'clamp(1.5rem, 3vw, 3rem)');
 	assert.equal(overridden.images.width, '920px');
 	assert.equal(overridden.palette, 'dark');
-	assert.deepEqual(overridden.sectionSurfaces, ['base', 'soft']);
+	assert.equal(overridden.sections.backgroundPattern, 'alternating');
 	assert.throws(
 		() => resolveThemeConfig({ preset: 'unknown' }, 'test/theme.yaml'),
 		/Unknown theme preset "unknown" in test\/theme\.yaml.*portfolio, documentation, project, statement/,
 	);
 	assert.throws(
-		() => resolveThemePresentation({ sectionSurfaces: ['base', 'glowing'] }, 'test/theme.yaml'),
-		/Unknown section surface "glowing" in test\/theme\.yaml.*base, soft, emphasis/,
-	);
-	assert.throws(
-		() => resolveThemePresentation({ sectionSurfaces: ['base', 'base'] }, 'test/theme.yaml'),
-		/Each section surface may appear only once in test\/theme\.yaml/,
+		() => resolveThemePresentation({ sections: { backgroundPattern: 'glowing' } }, 'test/theme.yaml'),
+		/sections\.backgroundPattern must be one of uniform, alternating, cycling in test\/theme\.yaml/,
 	);
 
 	const listResult = runCli(['theme:presets']);
@@ -87,13 +87,16 @@ try {
 		assert.equal(entry.description, metadata.description);
 	}
 
-	await mkdir(path.join(siteDir, 'routes', '010-guide'), { recursive: true });
-	await writeFile(path.join(siteDir, 'config.yaml'), 'url: https://example.com/\n');
-	await writeFile(path.join(siteDir, 'content.md'), `---
-title: Theme preset test
-description: Root page
+	await mkdir(path.join(siteDir, 'pages', '000-home'), { recursive: true });
+	await mkdir(path.join(siteDir, 'pages', '010-guide'), { recursive: true });
+	await writeFile(path.join(siteDir, 'config.yaml'), 'url: https://example.com/\nnavigation:\n  mode: top\n');
+	await writeFile(path.join(siteDir, 'pages', '000-home', 'content.md'), `---
+page:
+  description: Root page
 ---
 
+# Theme preset test
+
 ## Home {#home}
 
 Root content.
@@ -103,46 +106,56 @@ layout:
   pageWidth: 1300px
 palette: dark
 `);
-	await writeFile(path.join(siteDir, 'routes', '010-guide', 'content.md'), `---
-title: Guide
-description: Route page
-navigation:
-  label: Guide
+	await writeFile(path.join(siteDir, 'pages', '010-guide', 'content.md'), `---
+page:
+  description: Additional page
 ---
 
-## Guide {#guide}
-
-Route content.
+# Guide
+Page content.
 `);
-	await writeFile(path.join(siteDir, 'routes', '010-guide', 'theme.yaml'), `preset: portfolio
-layout:
-  pageWidth: 1010px
-palette: light
+	await writeFile(path.join(siteDir, 'pages', '010-guide', 'theme.yaml'), `layout:
+  contentSpacing: spacious
+  textWidth: wide
+images:
+  width: 700px
+sections:
+  backgroundPattern: cycling
 `);
 
 	const buildResult = runCli(['build']);
 	assert.equal(buildResult.status, 0, buildResult.stderr || buildResult.stdout);
 	const rootHtml = await readFile(path.join(tempRoot, 'dist', 'index.html'), 'utf8');
-	const routeHtml = await readFile(path.join(tempRoot, 'dist', 'guide', 'index.html'), 'utf8');
+	const pageHtml = await readFile(path.join(tempRoot, 'dist', 'guide', 'index.html'), 'utf8');
 	assert.match(rootHtml, /--page-width: 1300px/);
 	assert.match(rootHtml, /--font-sans: Georgia, 'Times New Roman', serif/);
 	assert.match(rootHtml, /--color-page: #000000/);
-	assert.match(routeHtml, /--page-width: 1010px/);
-	assert.match(routeHtml, /--font-sans: 'Helvetica Neue', Arial, sans-serif/);
-	assert.match(routeHtml, /--color-page: #ffffff/);
+	assert.match(pageHtml, /--page-width: 1300px/);
+	assert.match(pageHtml, /--font-sans: Georgia, 'Times New Roman', serif/);
+	assert.match(pageHtml, /--color-page: #000000/);
+	assert.match(pageHtml, /--image-width: 700px/);
+	assert.match(pageHtml, /--space-section-to-section-desktop: clamp\(2\.25rem, 5vw, 4\.5rem\)/);
+	assert.match(rootHtml, /data-navigation-mode="top"/);
+	assert.match(pageHtml, /data-navigation-mode="top"/);
 
 	const typographyResult = runCli(['typography', 'show']);
 	assert.equal(typographyResult.status, 0, typographyResult.stderr || typographyResult.stdout);
 	assert.match(typographyResult.stdout, /value: reading/);
-	assert.match(typographyResult.stdout, /value: restrained/);
-
-	const routeThemePath = path.join(siteDir, 'routes', '010-guide', 'theme.yaml');
-	const routeThemeSource = await readFile(routeThemePath, 'utf8');
-	await writeFile(routeThemePath, 'preset: unknown\n');
-	const invalidRoutePresetResult = runCli(['config:check']);
-	assert.notEqual(invalidRoutePresetResult.status, 0);
-	assert.match(invalidRoutePresetResult.stderr, /Unknown theme preset "unknown" in .*routes\/010-guide\/theme\.yaml/);
-	await writeFile(routeThemePath, routeThemeSource);
+	assert.doesNotMatch(typographyResult.stdout, /value: restrained/);
+
+	const pageThemePath = path.join(siteDir, 'pages', '010-guide', 'theme.yaml');
+	const pageThemeSource = await readFile(pageThemePath, 'utf8');
+	await writeFile(pageThemePath, 'preset: unknown\n');
+	const invalidPagePresetResult = runCli(['config:check']);
+	assert.notEqual(invalidPagePresetResult.status, 0);
+	assert.match(invalidPagePresetResult.stderr, /page themes may not define site-wide visual identity through "preset"/);
+	await writeFile(pageThemePath, pageThemeSource);
+	await writeFile(pageThemePath, 'navigation:\n  mode: sections\n');
+	const pageNavigationResult = runCli(['config:check']);
+	assert.notEqual(pageNavigationResult.status, 0);
+	assert.match(pageNavigationResult.stderr, /navigation is technical, site-wide configuration/);
+	assert.match(pageNavigationResult.stderr, /config\.yaml/);
+	await writeFile(pageThemePath, pageThemeSource);
 
 	const exportResult = runCli(['theme:export', 'documentation']);
 	assert.equal(exportResult.status, 0, exportResult.stderr || exportResult.stdout);
@@ -154,9 +167,11 @@ palette: light
 	assert.match(exportedSource, /# Alternatives: dark, light, paper\./);
 	const exportedConfig = load(exportedSource);
 	assert.equal(exportedConfig.preset, 'documentation');
+	assert.equal(exportedConfig.navigation, undefined);
+	assert.equal(exportedConfig.shape, themePresets.documentation.shape);
 	assert.equal(exportedConfig.layout.pageWidth, themePresets.documentation.layout.pageWidth);
 	assert.equal(exportedConfig.typography.fontFamily, themePresets.documentation.typography.fontFamily);
-	assert.deepEqual(exportedConfig.sectionSurfaces, ['base', 'soft']);
+	assert.equal(exportedConfig.sections.backgroundPattern, 'alternating');
 
 	const exportAgainResult = runCli(['theme:export', 'documentation']);
 	assert.notEqual(exportAgainResult.status, 0);
@@ -167,7 +182,7 @@ palette: light
 	assert.notEqual(unknownExportResult.status, 0);
 	assert.match(unknownExportResult.stderr, /Unknown theme preset "unknown"/);
 
-	console.log('ok - complete theme presets resolve for root and route themes and export as protected references');
+	console.log('ok - complete root presets and limited inherited page themes resolve and export as protected references');
 } finally {
 	await rm(tempRoot, { force: true, recursive: true });
 }

package/src/components/NavigationPageTree.astro

@@ -0,0 +1,157 @@
+---
+import projectConfig from '../../scripts/lib/project-config.mjs';
+import { withBasePath } from '../lib/basePath';
+import type { PageNavigationNode } from '../lib/siteNavigation';
+import type { SitePage } from '../lib/sitePages';
+import PageContentsLinks from './PageContentsLinks.astro';
+
+interface Props {
+	nodes: PageNavigationNode[];
+	currentPage: SitePage;
+	variant: 'mobile' | 'sidebar' | 'submenu';
+	integratePageSections?: boolean;
+}
+
+const { nodes, currentPage, variant, integratePageSections = false } = Astro.props;
+const pageHref = (page: SitePage) => withBasePath(projectConfig.site.basePath, page.pathname);
+const hasBranch = (node: PageNavigationNode) => node.children.length > 0;
+const isCurrentPage = (page: SitePage) => page.pathname === currentPage.pathname;
+const isCurrentBranch = (page: SitePage) => (
+	currentPage.pageDirectory === page.pageDirectory
+	|| currentPage.pageDirectory.startsWith(`${page.pageDirectory}/pages/`)
+);
+const getBranchId = (page: SitePage) => [
+	'navigation',
+	variant,
+	page.pagePath || 'home',
+	'children',
+].join('-').replace(/[^a-z0-9-]+/gi, '-');
+const hasPageSections = (node: PageNavigationNode) => node.headings.some((heading) => heading.depth === 2);
+const hasPageDisclosure = (node: PageNavigationNode) => hasBranch(node) || hasPageSections(node);
+---
+
+<ul class:list={['navigation-page-tree', `navigation-page-tree-${variant}`]}>
+	{nodes.map((node) => (
+		<li
+			class:list={['navigation-page-node', {
+				'navigation-page-node-current': isCurrentPage(node.page),
+				'navigation-page-node-current-branch': isCurrentBranch(node.page),
+			}]}
+		>
+			{variant !== 'submenu' && integratePageSections ? (
+				hasPageDisclosure(node) ? (
+					<details
+						class:list={['navigation-page-branch', 'navigation-page-disclosure', `navigation-page-disclosure-${variant}`]}
+						data-page-path={node.page.pagePath || '/'}
+						data-current-branch={isCurrentBranch(node.page) ? 'true' : undefined}
+						data-current-page={isCurrentPage(node.page) ? 'true' : undefined}
+						data-has-sections={hasPageSections(node) ? 'true' : undefined}
+						open={isCurrentBranch(node.page)}
+					>
+						<summary
+							class="navigation-page-summary"
+							aria-controls={getBranchId(node.page)}
+						>
+							<span class="navigation-page-summary-title">{node.page.title}</span>
+							<span class="navigation-page-chevron" aria-hidden="true"></span>
+						</summary>
+						<a
+							class:list={['navigation-page-open-link', { 'mobile-nav-destination': variant === 'mobile' }]}
+							href={pageHref(node.page)}
+							aria-current={isCurrentPage(node.page) ? 'page' : undefined}
+						>
+							{node.page.title}
+						</a>
+						<div id={getBranchId(node.page)} class="navigation-page-branch-content">
+							{hasPageSections(node) && (
+								<nav
+									class="navigation-page-sections"
+									aria-label={`${projectConfig.locale.labels.pageNavigation}: ${node.page.title}`}
+								>
+									<PageContentsLinks
+										headings={node.headings}
+										variant={variant === 'mobile' ? 'mobile' : 'desktop'}
+										pageHref={isCurrentPage(node.page) ? undefined : pageHref(node.page)}
+									/>
+								</nav>
+							)}
+							{hasBranch(node) && (
+								<Astro.self
+									nodes={node.children}
+									currentPage={currentPage}
+									variant={variant}
+									integratePageSections={integratePageSections}
+								/>
+							)}
+						</div>
+					</details>
+				) : (
+					<a
+						class:list={['navigation-page-link', { 'mobile-nav-destination': variant === 'mobile' }]}
+						href={pageHref(node.page)}
+						aria-current={isCurrentPage(node.page) ? 'page' : undefined}
+					>
+						{node.page.title}
+					</a>
+				)
+			) : variant !== 'submenu' ? (
+				<>
+					<a
+						class:list={['navigation-page-link', { 'mobile-nav-destination': variant === 'mobile' }]}
+						href={pageHref(node.page)}
+						aria-current={isCurrentPage(node.page) ? 'page' : undefined}
+					>
+						{node.page.title}
+					</a>
+					{variant === 'sidebar' && isCurrentPage(node.page) && hasPageSections(node) && (
+						<nav
+							class="navigation-page-sections"
+							aria-label={`${projectConfig.locale.labels.pageNavigation}: ${node.page.title}`}
+						>
+							<PageContentsLinks
+								headings={node.headings}
+								variant="desktop"
+							/>
+						</nav>
+					)}
+					{hasBranch(node) && (
+						<details
+							class="navigation-page-branch"
+							data-page-path={node.page.pagePath || '/'}
+							data-current-branch={isCurrentBranch(node.page) ? 'true' : undefined}
+							open={isCurrentBranch(node.page)}
+						>
+							<summary aria-controls={getBranchId(node.page)}>
+								<span class="visually-hidden">
+									{projectConfig.locale.labels.navigationChildren}: {node.page.title}
+								</span>
+								<span aria-hidden="true"></span>
+							</summary>
+							<div id={getBranchId(node.page)} class="navigation-page-branch-content">
+								<Astro.self
+									nodes={node.children}
+									currentPage={currentPage}
+									variant={variant}
+									integratePageSections={integratePageSections}
+								/>
+							</div>
+						</details>
+					)}
+				</>
+			) : (
+				<>
+					<a
+						class="navigation-page-link"
+						href={pageHref(node.page)}
+						aria-current={isCurrentPage(node.page) ? 'page' : undefined}
+					>
+						{node.page.title}
+					</a>
+					{node.children.length > 0 && (
+						<Astro.self nodes={node.children} currentPage={currentPage} variant={variant} />
+					)}
+				</>
+			)}
+		</li>
+	))}
+</ul>

package/src/components/PageContentsLinks.astro

@@ -0,0 +1,40 @@
+---
+import type { HeadingNavigation } from '../lib/sectionContent';
+
+interface Props {
+	headings: HeadingNavigation[];
+	variant: 'desktop' | 'mobile';
+	pageHref?: string;
+}
+
+const { headings, variant, pageHref = '' } = Astro.props;
+const sections = headings
+	.filter((heading) => heading.depth === 2)
+	.map((heading) => ({
+		...heading,
+		children: headings.filter((candidate) => (
+			candidate.depth === 3 && candidate.parentId === heading.id
+		)),
+	}));
+---
+
+<ol class:list={['page-contents-links', `page-contents-links-${variant}`]}>
+	{sections.map((section) => (
+		<li>
+			<a class={variant === 'mobile' ? 'mobile-nav-destination' : undefined} href={`${pageHref}#${section.id}`}>
+				{section.title}
+			</a>
+			{section.children.length > 0 && (
+				<ol>
+					{section.children.map((heading) => (
+						<li>
+							<a class={variant === 'mobile' ? 'mobile-nav-destination' : undefined} href={`${pageHref}#${heading.id}`}>
+								{heading.title}
+							</a>
+						</li>
+					))}
+				</ol>
+			)}
+		</li>
+	))}
+</ol>

package/src/components/SectionNavigationScript.astro

@@ -1,7 +1,12 @@
 <script>
 	const siteTop = document.querySelector<HTMLElement>('.site-top');
 	const mobileMenu = document.querySelector<HTMLDetailsElement>('.mobile-nav-menu');
-	const mobileSectionLinks = Array.from(document.querySelectorAll<HTMLAnchorElement>('.mobile-page-nav a'));
+	const sectionLinks = Array.from(document.querySelectorAll<HTMLAnchorElement>(
+		'.mobile-nav-sections a, .page-contents-links a, .page-nav a',
+	));
+	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 setAnchorOffset = () => {
 		if (!siteTop) return;
@@ -10,17 +15,124 @@
 		document.documentElement.style.setProperty('--site-top-anchor-offset', `${offset}px`);
 	};
 
-	mobileSectionLinks.forEach((link) => {
-		link.addEventListener('click', (event) => {
+	const alignInitialHashTarget = () => {
+		if (!window.location.hash) return;
+
+		try {
+			const target = document.getElementById(decodeURIComponent(window.location.hash.slice(1)));
+			target?.scrollIntoView({ block: 'start' });
+		} catch {
+			// Invalid URL encoding is left to the browser's native hash handling.
+		}
+	};
+
+	const getSamePageTarget = (link: HTMLAnchorElement) => {
+		const linkUrl = new URL(link.href, window.location.href);
+		if (linkUrl.pathname !== window.location.pathname || !linkUrl.hash) return undefined;
+
+		try {
+			return document.getElementById(decodeURIComponent(linkUrl.hash.slice(1))) ?? undefined;
+		} catch {
+			return undefined;
+		}
+	};
+
+	const updateCurrentSection = () => {
+		sectionLinks.forEach((link) => {
 			const linkUrl = new URL(link.href, window.location.href);
-			if (linkUrl.pathname !== window.location.pathname) return;
+			const isPageTop = link.hasAttribute('data-page-top');
+			const isCurrent = linkUrl.pathname === window.location.pathname && (
+				isPageTop
+					? window.location.hash === ''
+					: linkUrl.hash !== '' && linkUrl.hash === window.location.hash
+			);
+
+			if (isCurrent) {
+				link.setAttribute('aria-current', 'location');
+			} else if (link.getAttribute('aria-current') === 'location') {
+				link.removeAttribute('aria-current');
+			}
+		});
+	};
+
+	submenuItems.forEach((item) => {
+		const resetDismissal = () => delete item.dataset.submenuDismissed;
+		item.addEventListener('pointerleave', resetDismissal);
+		item.querySelector<HTMLAnchorElement>(':scope > a')?.addEventListener('focus', resetDismissal);
+	});
+
+	if (mobileMenu) {
+		mobileDestinationLinks.forEach((link) => {
+			link.addEventListener('click', () => {
+				mobileMenu.open = false;
+			});
+		});
+
+		mobileMenu.addEventListener('toggle', () => {
+			document.documentElement.classList.toggle('mobile-navigation-open', mobileMenu.open);
+			if (mobileMenu.open) {
+				window.requestAnimationFrame(() => (
+					mobileMenu.querySelector<HTMLElement>('.mobile-nav-view h2, .mobile-nav-view a')?.focus()
+				));
+			}
+		});
+
+		mobileMenu.addEventListener('keydown', (event) => {
+			if (!mobileMenu.open) return;
+
+			if (event.key === 'Escape') {
+				event.preventDefault();
+				mobileMenu.open = false;
+				mobileMenuSummary?.focus();
+				return;
+			}
+
+			if (event.key !== 'Tab') return;
+
+			const focusableElements = Array.from(mobileMenu.querySelectorAll<HTMLElement>(
+				'summary, a[href]:not([hidden]), [tabindex]:not([tabindex="-1"]):not([hidden])',
+			)).filter((element) => element.getClientRects().length > 0);
+			const firstFocusable = focusableElements[0];
+			const lastFocusable = focusableElements.at(-1);
+			if (!firstFocusable || !lastFocusable) return;
+
+			if (event.shiftKey && document.activeElement === firstFocusable) {
+				event.preventDefault();
+				lastFocusable.focus();
+			} else if (!event.shiftKey && document.activeElement === lastFocusable) {
+				event.preventDefault();
+				firstFocusable.focus();
+			}
+		});
+	}
+
+	sectionLinks.forEach((link) => {
+		link.addEventListener('click', (event) => {
+			const target = getSamePageTarget(link);
+			if (!target) return;
 
 			if (mobileMenu) mobileMenu.open = false;
-			if (event.detail > 0) link.blur();
+			link.closest<HTMLElement>('.site-nav-item')?.setAttribute('data-submenu-dismissed', 'true');
+
+			window.requestAnimationFrame(() => {
+				updateCurrentSection();
+				if (event.detail > 0) {
+					link.blur();
+					return;
+				}
+
+				target.setAttribute('tabindex', '-1');
+				target.focus({ preventScroll: true });
+				target.addEventListener('blur', () => target.removeAttribute('tabindex'), { once: true });
+			});
 		});
 	});
 
+	window.addEventListener('hashchange', updateCurrentSection);
+	updateCurrentSection();
+
 	setAnchorOffset();
+	if (window.location.hash) window.requestAnimationFrame(alignInitialHashTarget);
 
 	if (siteTop && 'ResizeObserver' in window) {
 		new ResizeObserver(setAnchorOffset).observe(siteTop);