@janga/norna 0.7.23 → 0.7.24

package/src/components/EditSourceLink.astro

@@ -0,0 +1,17 @@
+---
+import { PencilLine } from '@lucide/astro';
+
+interface Props {
+	href: string;
+	label: string;
+}
+
+const { href, label } = Astro.props;
+---
+
+<p class="edit-source-link" data-pagefind-ignore="all">
+	<a href={href}>
+		<PencilLine aria-hidden="true" />
+		<span>{label}</span>
+	</a>
+</p>

package/src/components/ImageCarousel.astro

@@ -1,5 +1,6 @@
 ---
 import projectConfig from '../../scripts/lib/project-config.mjs';
+import { defaultImageMaxAvailableHeightPercent } from '../../scripts/lib/image-presentation.mjs';
 import { getImageAttributes } from '../lib/generatedImages';
 import {
 	getCaptionId,
@@ -33,15 +34,13 @@ const {
 } = Astro.props;
 const managedImageSizes = getManagedImageSizes(maxAvailableWidthPercent);
 const carouselAspectRatio = getCarouselAspectRatio(images);
+const carouselMaxAvailableHeightPercent = maxAvailableHeightPercent
+	?? defaultImageMaxAvailableHeightPercent;
 const carouselStyle = carouselAspectRatio
 	? [
 		`--image-carousel-aspect-ratio: ${carouselAspectRatio}`,
-		...(maxAvailableHeightPercent
-			? [
-				`--image-carousel-width-from-height-desktop: ${carouselAspectRatio * maxAvailableHeightPercent.desktop}svh`,
-				`--image-carousel-width-from-height-mobile: ${carouselAspectRatio * maxAvailableHeightPercent.mobile}svh`,
-			]
-			: []),
+		`--image-carousel-width-from-height-desktop: ${carouselAspectRatio * carouselMaxAvailableHeightPercent.desktop}svh`,
+		`--image-carousel-width-from-height-mobile: ${carouselAspectRatio * carouselMaxAvailableHeightPercent.mobile}svh`,
 	].join('; ')
 	: undefined;
 ---

package/src/components/NavigationPageTree.astro

@@ -7,7 +7,7 @@ import PageContentsLinks from './PageContentsLinks.astro';
 
 interface Props {
 	nodes: SiteNavigationNode[];
-	currentPage: SitePage;
+	currentPage?: SitePage;
 	variant: 'mobile' | 'sidebar' | 'submenu';
 	integratePageSections?: boolean;
 }
@@ -15,26 +15,31 @@ interface Props {
 const { nodes, currentPage, variant, integratePageSections = false } = Astro.props;
 const pageHref = (page: SitePage) => withBasePath(projectConfig.site.basePath, page.pathname);
 const hasBranch = (node: SiteNavigationNode) => node.children.length > 0;
-const isCurrentPage = (page: SitePage) => page.pathname === currentPage.pathname;
-const isCurrentBranch = (node: SiteNode) => (
+const isCurrentPage = (page: SitePage) => currentPage?.pathname === page.pathname;
+const isCurrentBranch = (node: SiteNode) => Boolean(currentPage && (
 	currentPage.pageDirectory === node.pageDirectory
 	|| currentPage.pageDirectory.startsWith(`${node.pageDirectory}/pages/`)
-);
+));
 const getBranchId = (node: SiteNode) => [
 	'navigation',
 	variant,
 	node.pagePath || 'home',
 	'children',
 ].join('-').replace(/[^a-z0-9-]+/gi, '-');
+const getSectionsId = (node: SiteNode) => [
+	'navigation',
+	variant,
+	node.pagePath || 'home',
+	'sections',
+].join('-').replace(/[^a-z0-9-]+/gi, '-');
 const hasPageSections = (node: SiteNavigationNode) => (
 	node.node.kind === 'page' && node.headings.some((heading) => heading.depth === 2)
 );
-const hasPageDisclosure = (node: SiteNavigationNode) => hasBranch(node) || hasPageSections(node);
-const usesPageDisclosure = (node: SiteNavigationNode) => (
-	variant === 'sidebar'
-		? hasBranch(node)
-		: integratePageSections && hasPageDisclosure(node)
+const showsPageSections = (node: SiteNavigationNode) => (
+	integratePageSections
+	&& hasPageSections(node)
 );
+const usesPageDisclosure = (node: SiteNavigationNode) => variant !== 'submenu' && hasBranch(node);
 ---
 
 <ul class:list={['navigation-page-tree', `navigation-page-tree-${variant}`]}>
@@ -42,9 +47,13 @@ const usesPageDisclosure = (node: SiteNavigationNode) => (
 		<li
 			class:list={['navigation-page-node', {
 				'navigation-page-node-category': node.node.kind === 'category',
+				'navigation-page-node-page-disclosure': node.node.kind === 'page' && usesPageDisclosure(node),
 				'navigation-page-node-current': node.node.kind === 'page' && isCurrentPage(node.node),
 				'navigation-page-node-current-branch': isCurrentBranch(node.node),
 			}]}
+			data-navigation-title={node.node.title}
+			data-navigation-kind={node.node.kind}
+			data-navigation-current-page={node.node.kind === 'page' && isCurrentPage(node.node) ? 'true' : undefined}
 		>
 			{node.node.kind === 'category' ? (
 				<details
@@ -80,26 +89,69 @@ const usesPageDisclosure = (node: SiteNavigationNode) => (
 					data-page-path={node.node.pagePath || '/'}
 					data-current-branch={isCurrentBranch(node.node) ? 'true' : undefined}
 					data-current-page={isCurrentPage(node.node) ? 'true' : undefined}
-					data-has-sections={hasPageSections(node) ? 'true' : undefined}
 					open={isCurrentBranch(node.node)}
 				>
 					<summary
 						class="navigation-page-summary"
 						aria-controls={getBranchId(node.node)}
+						aria-label={`${projectConfig.locale.labels.navigationChildren}: ${node.node.title}`}
 					>
-						<span class="navigation-page-summary-title">{node.node.title}</span>
 						<span class="navigation-page-chevron" aria-hidden="true"></span>
 					</summary>
+				</details>
+				<a
+					class:list={['navigation-page-open-link', { 'mobile-nav-destination': variant === 'mobile' }]}
+					href={pageHref(node.node)}
+					aria-current={isCurrentPage(node.node) ? 'page' : undefined}
+				>
+					{node.node.title}
+				</a>
+				<div id={getBranchId(node.node)} class="navigation-page-branch-content">
+					{showsPageSections(node) && (
+						<nav
+							class="navigation-page-sections"
+							aria-label={`${projectConfig.locale.labels.pageNavigation}: ${node.node.title}`}
+						>
+							<PageContentsLinks
+								headings={node.headings}
+								variant={variant === 'mobile' ? 'mobile' : 'desktop'}
+								pageHref={isCurrentPage(node.node) ? undefined : pageHref(node.node)}
+							/>
+						</nav>
+					)}
+					{hasBranch(node) && (
+						<Astro.self
+							nodes={node.children}
+							currentPage={currentPage}
+							variant={variant}
+							integratePageSections={integratePageSections}
+						/>
+					)}
+				</div>
+			) : variant !== 'submenu' ? (
+				<>
 					<a
-						class:list={['navigation-page-open-link', { 'mobile-nav-destination': variant === 'mobile' }]}
+						class:list={['navigation-page-link', { 'mobile-nav-destination': variant === 'mobile' }]}
 						href={pageHref(node.node)}
 						aria-current={isCurrentPage(node.node) ? 'page' : undefined}
 					>
 						{node.node.title}
 					</a>
-					<div id={getBranchId(node.node)} class="navigation-page-branch-content">
-						{integratePageSections && hasPageSections(node) && (
+					{showsPageSections(node) && (
+						<details
+							class="navigation-page-sections-disclosure"
+							data-page-path={node.node.pagePath || '/'}
+							data-current-page={isCurrentPage(node.node) ? 'true' : undefined}
+							open={isCurrentPage(node.node)}
+						>
+							<summary
+								aria-controls={getSectionsId(node.node)}
+								aria-label={`${projectConfig.locale.labels.pageSections}: ${node.node.title}`}
+							>
+								<span class="navigation-page-chevron" aria-hidden="true"></span>
+							</summary>
 							<nav
+								id={getSectionsId(node.node)}
 								class="navigation-page-sections"
 								aria-label={`${projectConfig.locale.labels.pageNavigation}: ${node.node.title}`}
 							>
@@ -109,47 +161,6 @@ const usesPageDisclosure = (node: SiteNavigationNode) => (
 									pageHref={isCurrentPage(node.node) ? undefined : pageHref(node.node)}
 								/>
 							</nav>
-						)}
-						{hasBranch(node) && (
-							<Astro.self
-								nodes={node.children}
-								currentPage={currentPage}
-								variant={variant}
-								integratePageSections={integratePageSections}
-							/>
-						)}
-					</div>
-				</details>
-			) : variant !== 'submenu' ? (
-				<>
-					<a
-						class:list={['navigation-page-link', { 'mobile-nav-destination': variant === 'mobile' }]}
-						href={pageHref(node.node)}
-						aria-current={isCurrentPage(node.node) ? 'page' : undefined}
-					>
-						{node.node.title}
-					</a>
-					{hasBranch(node) && (
-						<details
-							class="navigation-page-branch"
-							data-page-path={node.node.pagePath || '/'}
-							data-current-branch={isCurrentBranch(node.node) ? 'true' : undefined}
-							open={isCurrentBranch(node.node)}
-						>
-							<summary aria-controls={getBranchId(node.node)}>
-								<span class="visually-hidden">
-									{projectConfig.locale.labels.navigationChildren}: {node.node.title}
-								</span>
-								<span aria-hidden="true"></span>
-							</summary>
-							<div id={getBranchId(node.node)} class="navigation-page-branch-content">
-								<Astro.self
-									nodes={node.children}
-									currentPage={currentPage}
-									variant={variant}
-									integratePageSections={integratePageSections}
-								/>
-							</div>
 						</details>
 					)}
 				</>

package/src/components/NavigationTreeControls.astro

@@ -0,0 +1,77 @@
+---
+import { ChevronsDownUp, ChevronsUpDown, ListFilter, LocateFixed } from '@lucide/astro';
+import projectConfig from '../../scripts/lib/project-config.mjs';
+import type { SiteNavigationNode } from '../lib/siteNavigation';
+
+interface Props {
+	idPrefix: string;
+	nodes: SiteNavigationNode[];
+}
+
+const { idPrefix, nodes } = Astro.props;
+const countNodes = (tree: SiteNavigationNode[]): number => tree.reduce(
+	(total, node) => total + 1 + countNodes(node.children),
+	0,
+);
+const minimumUsefulNodeCount = 12;
+const showControls = countNodes(nodes) >= minimumUsefulNodeCount;
+const labels = projectConfig.locale.labels;
+const filterId = `${idPrefix}-filter`;
+const statusId = `${idPrefix}-status`;
+---
+
+{showControls && (
+	<div
+		class="navigation-tree-controls"
+		data-tree-controls
+		data-tree-label-collapsed={labels.navigationCollapsedAll}
+		data-tree-label-expanded={labels.navigationExpandedAll}
+		data-tree-label-filter-matches={labels.navigationFilterMatches}
+		data-tree-label-located={labels.navigationLocatedCurrent}
+		hidden
+	>
+		<label class="navigation-tree-filter" for={filterId}>
+			<ListFilter aria-hidden="true" />
+			<span class="visually-hidden">{labels.navigationFilter}</span>
+			<input
+				id={filterId}
+				type="search"
+				autocomplete="off"
+				spellcheck="false"
+				placeholder={labels.navigationFilter}
+				aria-describedby={statusId}
+				data-tree-filter
+			/>
+		</label>
+		<div class="navigation-tree-commands" role="group" aria-label={labels.navigationControls}>
+			<button
+				type="button"
+				aria-label={labels.navigationExpandAll}
+				title={labels.navigationExpandAll}
+				data-tree-expand-all
+			>
+				<ChevronsUpDown aria-hidden="true" />
+			</button>
+			<button
+				type="button"
+				aria-label={labels.navigationCollapseAll}
+				title={labels.navigationCollapseAll}
+				data-tree-collapse-all
+			>
+				<ChevronsDownUp aria-hidden="true" />
+			</button>
+			<button
+				type="button"
+				aria-label={labels.navigationLocateCurrent}
+				title={labels.navigationLocateCurrent}
+				data-tree-locate-current
+			>
+				<LocateFixed aria-hidden="true" />
+			</button>
+		</div>
+		<p class="navigation-tree-filter-empty" data-tree-filter-empty hidden>
+			{labels.navigationFilterEmpty}
+		</p>
+		<p id={statusId} class="visually-hidden" role="status" aria-live="polite" data-tree-status></p>
+	</div>
+)}

package/src/components/PageAliasRedirect.astro

@@ -15,7 +15,7 @@ const canonicalUrl = getAbsolutePageUrl(projectConfig.site.url, targetPathname);
 ---
 
 <!doctype html>
-<html lang={lang}>
+<html lang={lang} data-pagefind-ignore="all">
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width" />

package/src/components/PageList.astro

@@ -0,0 +1,33 @@
+---
+import { ArrowRight } from '@lucide/astro';
+import projectConfig from '../../scripts/lib/project-config.mjs';
+import { withBasePath } from '../lib/basePath';
+
+type PageListItem = {
+	title: string;
+	pathname: string;
+	description?: string;
+};
+
+interface Props {
+	pages: PageListItem[];
+}
+
+const { pages } = Astro.props;
+---
+
+<nav class="child-page-list" aria-label={projectConfig.locale.labels.navigationChildren}>
+	<ul>
+		{pages.map((page) => (
+			<li>
+				<a href={withBasePath(projectConfig.site.basePath, page.pathname)}>
+					<span class="child-page-list-copy">
+						<strong>{page.title}</strong>
+						{page.description && <span>{page.description}</span>}
+					</span>
+					<ArrowRight aria-hidden="true" />
+				</a>
+			</li>
+		))}
+	</ul>
+</nav>

package/src/components/PageSequenceNavigation.astro

@@ -0,0 +1,37 @@
+---
+import { ArrowLeft, ArrowRight } from '@lucide/astro';
+import projectConfig from '../../scripts/lib/project-config.mjs';
+import { withBasePath } from '../lib/basePath';
+import type { SitePage } from '../lib/sitePages';
+
+interface Props {
+	previous: SitePage | null;
+	next: SitePage | null;
+}
+
+const { previous, next } = Astro.props;
+const pageHref = (page: SitePage) => withBasePath(projectConfig.site.basePath, page.pathname);
+---
+
+{(previous || next) && (
+	<nav class="page-sequence-navigation" aria-label={projectConfig.locale.labels.pageSequence}>
+		{previous ? (
+			<a class="page-sequence-link page-sequence-previous" href={pageHref(previous)} rel="prev">
+				<ArrowLeft aria-hidden="true" />
+				<span>
+					<span class="page-sequence-direction">{projectConfig.locale.labels.previousPage}</span>
+					<span class="page-sequence-title">{previous.title}</span>
+				</span>
+			</a>
+		) : <span class="page-sequence-empty" aria-hidden="true"></span>}
+		{next ? (
+			<a class="page-sequence-link page-sequence-next" href={pageHref(next)} rel="next">
+				<span>
+					<span class="page-sequence-direction">{projectConfig.locale.labels.nextPage}</span>
+					<span class="page-sequence-title">{next.title}</span>
+				</span>
+				<ArrowRight aria-hidden="true" />
+			</a>
+		) : <span class="page-sequence-empty" aria-hidden="true"></span>}
+	</nav>
+)}

package/src/components/SearchPage.astro

@@ -0,0 +1,151 @@
+---
+import { getCollection } from 'astro:content';
+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';
+import SiteBanners from './SiteBanners.astro';
+import SiteNavigation from './SiteNavigation.astro';
+import SiteSection from './SiteSection.astro';
+import BaseLayout from '../layouts/BaseLayout.astro';
+import type { ResolvedSection } from '../lib/sectionContent';
+import { flattenSiteNavigationTree, getListedSiteNavigationTree } from '../lib/siteNavigation';
+import { getSiteModel, type SitePage } from '../lib/sitePages';
+import { getLogoAsset } from '../lib/sitePublicAssets';
+import { getToday, isVisibleToday } from '../lib/visibility';
+import { withBasePath } from '../lib/basePath';
+
+const siteDirectory = (process.env.NORNA_SITE_DIR ?? 'site').trim();
+const siteModel = await getSiteModel(await getCollection('site'));
+const { nodes: siteNodes, pages: sitePages } = siteModel;
+const homePage = sitePages.find((page) => page.isHome);
+if (!homePage) throw new Error('The required homepage 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.');
+const [sitewide] = await getCollection('sitewide');
+const sitewideData = sitewide?.data ?? {};
+const siteThemeData = siteTheme.data;
+const themeLabel = `${siteDirectory || 'site'}/${siteTheme.id}`;
+const visualTheme = resolveThemeVisualConfig(siteThemeData, themeLabel);
+const getPageContent = (page: SitePage) => page.markdownDocument.navigationHeadings.map((heading) => ({ ...heading }));
+const siteNavigation = siteNodes.map((node) => {
+	const headings = node.kind === 'page' ? getPageContent(node) : [];
+	return {
+		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,
+	nodes: renderedNavigationEntries.map(({ node, headings }) => ({
+		depth: Math.max(1, node.depth),
+		headings,
+		isHome: node.isHome,
+		kind: node.kind,
+		listed: node.navigation.listed,
+		pagePath: node.pagePath,
+	})),
+});
+const pagePresentation = resolvePagePresentation(siteThemeData, themeLabel, {
+	navigationMode: navigationModel.mode,
+});
+const pageTextWidth = getTextWidthCssValue(pagePresentation.typography.values.body.width);
+const frameColors = resolveFrameColors({ theme: siteThemeData, sourceLabel: themeLabel });
+const logoAsset = getLogoAsset();
+const logo = logoAsset
+	? {
+		src: logoAsset.href,
+		alt: homePage.title,
+		height: sitewideData.logo?.height,
+	}
+	: undefined;
+const today = getToday();
+const siteBanners = (sitewideData.banners ?? []).filter((banner) => isVisibleToday(banner.visible, today));
+const labels = projectConfig.locale.labels;
+const searchSection: ResolvedSection = {
+	id: null,
+	title: labels.search,
+	titleHtml: labels.search,
+	headingLevel: 1,
+	contentBlocks: [{
+		type: 'html',
+		html: `<p>${labels.searchDescription}</p><div class="norna-search" id="norna-search"><p data-search-status>${labels.searchLoading}</p><noscript><p>${labels.searchNoScript}</p></noscript></div>`,
+	}],
+};
+const hasNavigationRailFrame = navigationModel.requestedMode === 'tree'
+	|| (
+		navigationModel.requestedMode === 'automatic'
+		&& (navigationModel.hasNestedPages || navigationModel.hasCategories)
+	);
+const bundlePath = withBasePath(projectConfig.site.basePath, '/pagefind/');
+const searchScript = `(() => {
+	const root = document.querySelector('#norna-search');
+	const status = root?.querySelector('[data-search-status]');
+	if (!root) return;
+	const script = document.createElement('script');
+	script.src = ${JSON.stringify(`${bundlePath}pagefind-ui.js`)};
+	script.onload = () => {
+		status?.remove();
+		new window.PagefindUI({
+			element: '#norna-search',
+			bundlePath: ${JSON.stringify(bundlePath)},
+			baseUrl: ${JSON.stringify(projectConfig.site.basePath)},
+			showImages: false,
+			showSubResults: true
+		});
+		const labelInput = () => {
+			const input = root.querySelector('.pagefind-ui__search-input');
+			if (!input) return false;
+			input.setAttribute('aria-label', ${JSON.stringify(labels.search)});
+			return true;
+		};
+		if (!labelInput()) {
+			const observer = new MutationObserver(() => {
+				if (labelInput()) observer.disconnect();
+			});
+			observer.observe(root, { childList: true, subtree: true });
+		}
+	};
+	script.onerror = () => {
+		if (status) status.textContent = ${JSON.stringify(labels.searchUnavailable)};
+	};
+	document.head.append(script);
+})();`;
+---
+
+<BaseLayout
+	title={labels.search}
+	description={labels.searchDescription}
+	presentation={pagePresentation}
+	visualTheme={visualTheme}
+	frameColors={frameColors}
+	pathname="/search/"
+	footer={sitewideData.footer}
+	indexable={false}
+>
+	<link slot="head" rel="stylesheet" href={`${bundlePath}pagefind-ui.css`} />
+	<SiteNavigation
+		logo={logo}
+		navigationEntries={siteNavigation}
+		navigationMode={navigationModel.mode}
+		showTopNavigationSubmenus={navigationModel.requestedMode !== 'automatic' && navigationModel.mode !== 'tree'}
+		hasNavigationRailFrame={hasNavigationRailFrame}
+		frameColors={frameColors}
+		readerPreferences={pagePresentation.readerPreferences}
+		searchPage
+	/>
+	{siteBanners.length > 0 && <SiteBanners banners={siteBanners} />}
+	<main class="site-content search-page-content" id="main-content" style={`--page-text-width: ${pageTextWidth}`}>
+		<SiteSection
+			section={searchSection}
+			pagePresentation={pagePresentation}
+			visualTheme={visualTheme}
+			sectionIndex={0}
+		/>
+	</main>
+	<script is:inline set:html={searchScript} />
+</BaseLayout>

package/src/components/SiteNavigation.astro

@@ -1,4 +1,5 @@
 ---
+import { Search } from '@lucide/astro';
 import projectConfig from '../../scripts/lib/project-config.mjs';
 import { withBasePath } from '../lib/basePath';
 import type { SectionNavigation } from '../lib/sectionContent';
@@ -11,6 +12,7 @@ import {
 import type { SiteNode, SitePage } from '../lib/sitePages';
 import DisplaySettings from './DisplaySettings.astro';
 import NavigationPageTree from './NavigationPageTree.astro';
+import NavigationTreeControls from './NavigationTreeControls.astro';
 import SectionNavigationScript from './SectionNavigationScript.astro';
 
 type FrameColors = {
@@ -24,7 +26,7 @@ interface Props {
 		alt: string;
 		height?: string;
 	};
-	currentPage: SitePage;
+	currentPage?: SitePage;
 	navigationEntries: SiteNavigationEntry[];
 	navigationMode: 'sections' | 'top' | 'tree';
 	showTopNavigationSubmenus: boolean;
@@ -42,6 +44,7 @@ interface Props {
 			focusReading: 'off' | 'on';
 		};
 	};
+	searchPage?: boolean;
 }
 
 const {
@@ -53,6 +56,7 @@ const {
 	hasNavigationRailFrame,
 	frameColors,
 	readerPreferences,
+	searchPage = false,
 } = Astro.props;
 const siteTopBackgroundColor = frameColors.backgroundColor === 'transparent'
 	? 'var(--color-page)'
@@ -67,10 +71,15 @@ const topLevelNavigation = siteNavigationTree;
 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 = (node: SiteNode) => currentPage.pageDirectory === node.pageDirectory
-	|| currentPage.pageDirectory.startsWith(`${node.pageDirectory}/pages/`);
+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 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 hasSectionMenu = (pageSections: SectionNavigation[]) => pageSections.length > 1;
@@ -94,7 +103,9 @@ const showPageNavigation = Boolean(
 const showSinglePageTitleOnly = showSinglePageTopLink && currentPageSectionCount === 0;
 const showMobileNavigation = showSiteNavigation || hasCurrentPageSectionMenu || hasTreePageContents;
 const showReaderControls = Object.values(readerPreferences.controls).some(Boolean);
-const showDesktopNavigationRow = showSiteNavigation || Boolean(logo) || showReaderControls;
+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';
 ---
@@ -150,6 +161,18 @@ const needsNavigationScript = hasCurrentPageSectionMenu || hasTreePageContents |
 					</nav>
 				)}
 
+				{showSearch && (
+					<a
+						class="site-search-link"
+						href={searchHref}
+						aria-current={searchPage ? 'page' : undefined}
+						aria-label={projectConfig.locale.labels.search}
+						title={projectConfig.locale.labels.search}
+					>
+						<Search aria-hidden="true" />
+					</a>
+				)}
+
 				{showReaderControls && (
 					<DisplaySettings controls={readerPreferences.controls} defaults={readerPreferences.defaults} />
 				)}
@@ -163,6 +186,10 @@ const needsNavigationScript = hasCurrentPageSectionMenu || hasTreePageContents |
 					{showSiteNavigation && (
 						<nav class="mobile-nav-view" aria-label={projectConfig.locale.labels.siteNavigation}>
 							<h2 tabindex="-1">{projectConfig.locale.labels.siteNavigation}</h2>
+							<NavigationTreeControls
+								idPrefix="mobile-tree-navigation"
+								nodes={siteNavigationTree}
+							/>
 							<NavigationPageTree
 								nodes={siteNavigationTree}
 								currentPage={currentPage}
@@ -172,7 +199,7 @@ const needsNavigationScript = hasCurrentPageSectionMenu || hasTreePageContents |
 						</nav>
 					)}
 
-					{navigationMode !== 'tree' && hasCurrentPageSectionMenu && currentPageNavigation && (
+					{navigationMode !== 'tree' && hasCurrentPageSectionMenu && currentPageNavigation && currentPage && (
 						<nav class="mobile-nav-view" aria-label={projectConfig.locale.labels.pageNavigation}>
 							{!showSinglePageTopLink && (
 								<h2 tabindex="-1">{projectConfig.locale.labels.pageNavigation}</h2>
@@ -204,7 +231,7 @@ const needsNavigationScript = hasCurrentPageSectionMenu || hasTreePageContents |
 		</div>
 	)}
 
-	{showPageNavigation && currentPageNavigation && (
+	{showPageNavigation && currentPageNavigation && currentPage && (
 		<nav
 			class:list={['page-nav', { 'page-nav-title-only': showSinglePageTitleOnly }]}
 			aria-label={projectConfig.locale.labels.pageNavigation}