@janga/norna 0.7.22 → 0.7.24

package/src/components/SectionNavigationScript.astro

@@ -23,6 +23,36 @@
 			.filter((heading) => trackedHeadingIds.has(heading.id))
 		: [];
 	let sectionTrackingFrame: number | undefined;
+	let sectionTrackingPaused = false;
+	let sectionTrackingResumeTimer: number | undefined;
+
+	const resumeSectionTracking = () => {
+		window.clearTimeout(sectionTrackingResumeTimer);
+		window.removeEventListener('scrollend', resumeSectionTracking);
+		sectionTrackingPaused = false;
+		sectionTrackingResumeTimer = undefined;
+	};
+
+	const pauseSectionTrackingForAnchorNavigation = () => {
+		if (!sectionTrackingEnabled) return;
+
+		sectionTrackingPaused = true;
+		if (sectionTrackingFrame !== undefined) {
+			window.cancelAnimationFrame(sectionTrackingFrame);
+			sectionTrackingFrame = undefined;
+		}
+		window.clearTimeout(sectionTrackingResumeTimer);
+		window.removeEventListener('scrollend', resumeSectionTracking);
+		if ('onscrollend' in document.documentElement) {
+			window.addEventListener('scrollend', resumeSectionTracking, { once: true });
+		}
+
+		const scrollBehavior = getComputedStyle(document.documentElement).scrollBehavior;
+		sectionTrackingResumeTimer = window.setTimeout(
+			resumeSectionTracking,
+			scrollBehavior === 'smooth' ? 2000 : 120,
+		);
+	};
 
 	const setAnchorOffset = () => {
 		if (!siteTop) return;
@@ -73,12 +103,35 @@
 
 	const updateReadingPosition = () => {
 		sectionTrackingFrame = undefined;
-		const readingLine = Math.ceil(siteTop?.getBoundingClientRect().bottom ?? 0) + 8;
-		let currentHeadingId: string | undefined;
+		if (trackedHeadings.length === 0) return;
+
+		let currentHeadingId: string | undefined = trackedHeadings[0]?.id;
+
+		if (window.scrollY > 1) {
+			const viewportHeight = window.innerHeight;
+			const documentHeight = Math.max(
+				document.body.scrollHeight,
+				document.body.offsetHeight,
+				document.documentElement.clientHeight,
+				document.documentElement.scrollHeight,
+				document.documentElement.offsetHeight,
+			);
+			const maximumScroll = Math.max(0, documentHeight - viewportHeight);
+			const remainingScroll = Math.max(0, maximumScroll - window.scrollY);
+			const normalReadingLine = Math.max(
+				Math.ceil(siteTop?.getBoundingClientRect().bottom ?? 0) + 8,
+				Math.round(viewportHeight / 2),
+			);
+			const terminalReadingLine = viewportHeight - remainingScroll;
+			const readingLine = Math.min(
+				viewportHeight,
+				Math.max(normalReadingLine, terminalReadingLine),
+			);
 
-		for (const heading of trackedHeadings) {
-			if (heading.getBoundingClientRect().top > readingLine) break;
-			currentHeadingId = heading.id;
+			for (const heading of trackedHeadings) {
+				if (heading.getBoundingClientRect().top > readingLine) break;
+				currentHeadingId = heading.id;
+			}
 		}
 
 		sectionLinks.forEach((link) => {
@@ -94,7 +147,7 @@
 	};
 
 	const scheduleReadingPositionUpdate = () => {
-		if (!sectionTrackingEnabled || sectionTrackingFrame !== undefined) return;
+		if (!sectionTrackingEnabled || sectionTrackingPaused || sectionTrackingFrame !== undefined) return;
 		sectionTrackingFrame = window.requestAnimationFrame(updateReadingPosition);
 	};
 
@@ -154,6 +207,7 @@
 			const target = getSamePageTarget(link);
 			if (!target) return;
 
+			pauseSectionTrackingForAnchorNavigation();
 			if (mobileMenu) mobileMenu.open = false;
 			link.closest<HTMLElement>('.site-nav-item')?.setAttribute('data-submenu-dismissed', 'true');
 
@@ -172,9 +226,11 @@
 	});
 
 	window.addEventListener('hashchange', () => {
+		pauseSectionTrackingForAnchorNavigation();
 		updateCurrentSection();
 		scheduleReadingPositionUpdate();
 	});
+	if (window.location.hash) pauseSectionTrackingForAnchorNavigation();
 	updateCurrentSection();
 	if (sectionTrackingEnabled) {
 		window.addEventListener('scroll', scheduleReadingPositionUpdate, { passive: true });

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,9 +26,11 @@ interface Props {
 		alt: string;
 		height?: string;
 	};
-	currentPage: SitePage;
+	currentPage?: SitePage;
 	navigationEntries: SiteNavigationEntry[];
 	navigationMode: 'sections' | 'top' | 'tree';
+	showTopNavigationSubmenus: boolean;
+	hasNavigationRailFrame: boolean;
 	frameColors: FrameColors;
 	readerPreferences: {
 		controls: {
@@ -40,9 +44,20 @@ interface Props {
 			focusReading: 'off' | 'on';
 		};
 	};
+	searchPage?: boolean;
 }
 
-const { logo, currentPage, navigationEntries, navigationMode, frameColors, readerPreferences } = Astro.props;
+const {
+	logo,
+	currentPage,
+	navigationEntries,
+	navigationMode,
+	showTopNavigationSubmenus,
+	hasNavigationRailFrame,
+	frameColors,
+	readerPreferences,
+	searchPage = false,
+} = Astro.props;
 const siteTopBackgroundColor = frameColors.backgroundColor === 'transparent'
 	? 'var(--color-page)'
 	: frameColors.backgroundColor;
@@ -56,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;
@@ -83,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';
 ---
@@ -94,6 +116,7 @@ const needsNavigationScript = hasCurrentPageSectionMenu || hasTreePageContents |
 	class:list={['site-top', {
 		'site-top-has-site-nav': showSiteNavigation,
 		'site-top-has-navigation-row': showDesktopNavigationRow,
+		'site-top-has-navigation-rail-frame': hasNavigationRailFrame,
 	}]}
 	data-navigation-mode={navigationMode}
 	style={navigationStyle}
@@ -118,13 +141,13 @@ const needsNavigationScript = hasCurrentPageSectionMenu || hasTreePageContents |
 						const nodeIsCurrentPage = navigationNode.node.kind === 'page' && isCurrentPage(navigationNode.node);
 						return (
 							<li class:list={['site-nav-item', {
-								'site-nav-item-has-submenu': navigationMode !== 'tree' && navigationNode.children.length > 0,
+								'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>
-								{navigationMode !== 'tree' && navigationNode.children.length > 0 && (
+								{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" />
@@ -138,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} />
 				)}
@@ -151,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}
@@ -160,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>
@@ -192,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}

package/src/components/SitePage.astro

@@ -1,20 +1,33 @@
 ---
 import { getCollection, type CollectionEntry } from 'astro:content';
 import BaseLayout from '../layouts/BaseLayout.astro';
+import CodeBlockCopyScript from './CodeBlockCopyScript.astro';
+import EditSourceLink from './EditSourceLink.astro';
 import SiteBreadcrumbs from './SiteBreadcrumbs.astro';
 import SiteNavigation from './SiteNavigation.astro';
 import SiteBanners from './SiteBanners.astro';
+import PageContentsNavigation from './PageContentsNavigation.astro';
+import PageSequenceNavigation from './PageSequenceNavigation.astro';
 import SiteSection from './SiteSection.astro';
 import SiteTreeNavigation from './SiteTreeNavigation.astro';
 import TreeNavigationScript from './TreeNavigationScript.astro';
 import { getSectionsContent, type ResolvedSection } from '../lib/sectionContent';
 import { getPageTheme } from '../lib/pageThemes';
 import { getSiteModel, type SitePage } from '../lib/sitePages';
-import { flattenSiteNavigationTree, getListedSiteNavigationTree } from '../lib/siteNavigation';
+import {
+	flattenSiteNavigationTree,
+	getDirectChildPages,
+	getListedSiteNavigationTree,
+	getSequentialPageNavigation,
+} from '../lib/siteNavigation';
 import { getToday, isVisibleToday } from '../lib/visibility';
 import { getLogoAsset } from '../lib/sitePublicAssets';
-import { resolveNavigationModel } from '../../scripts/lib/navigation-model.mjs';
+import {
+	resolveNavigationModel,
+	resolvePageContentsPlacement,
+} from '../../scripts/lib/navigation-model.mjs';
 import { projectConfig, resolveThemeVisualConfig } from '../../scripts/lib/project-config.mjs';
+import { getEditSourceUrl } from '../../scripts/lib/edit-source-link.mjs';
 import { getTextWidthCssValue, resolveFrameColors, resolvePagePresentation } from '../../scripts/lib/presentation.mjs';
 import { mergePageThemeConfig } from '../../scripts/lib/theme-presets.mjs';
 
@@ -53,21 +66,8 @@ const logo = logoAsset
 		height: logoSettings?.height,
 	}
 	: undefined;
-const siteHtml = entry.rendered?.html ?? '';
-const resolvedSections = await getSectionsContent(siteHtml, currentPage);
 const today = getToday();
 const siteBanners = (sitewideData.banners ?? []).filter((banner) => isVisibleToday(banner.visible, today));
-const hasPrioritizableImage = (section: ResolvedSection) => section.contentBlocks.some((block) => (
-	block.type === 'image-stack'
-	|| block.type === 'image-carousel'
-));
-const firstImageSectionIndex = resolvedSections.findIndex(hasPrioritizableImage);
-let contentSectionIndex = 0;
-const renderedSections = resolvedSections.map((section, index) => ({
-	section,
-	sectionIndex: section.headingLevel === 1 ? 0 : contentSectionIndex++,
-	prioritizeFirstImage: index === firstImageSectionIndex,
-}));
 
 const getPageContent = (page: SitePage) =>
 	page.markdownDocument.navigationHeadings.map(({ depth, id, parentId, title }) => ({
@@ -87,7 +87,33 @@ const siteNavigation = siteNodes.map((node) => {
 			.map(({ id, title }) => ({ id, title })),
 	};
 });
-const renderedNavigationEntries = flattenSiteNavigationTree(getListedSiteNavigationTree(siteNavigation));
+const listedNavigationTree = getListedSiteNavigationTree(siteNavigation);
+const renderedNavigationEntries = flattenSiteNavigationTree(listedNavigationTree);
+const pageSequence = getSequentialPageNavigation(listedNavigationTree, currentPage.pagePath);
+const childPages = getDirectChildPages(listedNavigationTree, currentPage.pagePath);
+const siteHtml = entry.rendered?.html ?? '';
+const resolvedSections = await getSectionsContent(siteHtml, currentPage, childPages);
+const hasCodeBlocks = resolvedSections.some((section) => section.contentBlocks.some((block) => (
+	block.type === 'html' && /<pre\b[^>]*>[\s\S]*?<code\b/i.test(block.html)
+)));
+const hasPrioritizableImage = (section: ResolvedSection) => section.contentBlocks.some((block) => (
+	block.type === 'image-stack'
+	|| block.type === 'image-carousel'
+));
+const firstImageSectionIndex = resolvedSections.findIndex(hasPrioritizableImage);
+let contentSectionIndex = 0;
+const renderedSections = resolvedSections.map((section, index) => ({
+	section,
+	sectionIndex: section.headingLevel === 1 ? 0 : contentSectionIndex++,
+	prioritizeFirstImage: index === firstImageSectionIndex,
+}));
+const hasPageSequence = Boolean(pageSequence.previous || pageSequence.next);
+const editSourceUrl = projectConfig.editLink
+	? getEditSourceUrl({
+		baseUrl: projectConfig.editLink.baseUrl,
+		sourcePath: currentPage.contentLabel,
+	})
+	: null;
 const navigationModel = resolveNavigationModel({
 	mode: projectConfig.navigation.mode,
 	nodes: renderedNavigationEntries.map(({ node, headings }) => ({
@@ -96,7 +122,12 @@ const navigationModel = resolveNavigationModel({
 		isHome: node.isHome,
 		kind: node.kind,
 		listed: node.navigation.listed,
+		pagePath: node.pagePath,
 	})),
+	currentPage: {
+		isHome: currentPage.isHome,
+		pagePath: currentPage.pagePath,
+	},
 });
 const pagePresentation = resolvePagePresentation(themeData, themeLabel, {
 	navigationMode: navigationModel.mode,
@@ -104,6 +135,32 @@ const pagePresentation = resolvePagePresentation(themeData, themeLabel, {
 const pageTextWidth = getTextWidthCssValue(pagePresentation.typography.values.body.width);
 const frameColors = resolveFrameColors({ theme: siteThemeData, sourceLabel: `${siteDirectory || 'site'}/${siteTheme.id}` });
 const hasTreeNavigation = navigationModel.mode === 'tree';
+const currentPageNavigation = siteNavigation.find(({ node }) => (
+	node.kind === 'page' && node.pathname === currentPage.pathname
+));
+const pageContentsHeadings = currentPageNavigation?.headings.filter(({ depth }) => depth === 2 || depth === 3) ?? [];
+const pageContentsPlacement = resolvePageContentsPlacement({
+	navigationMode: navigationModel.mode,
+	nodes: renderedNavigationEntries.map(({ node }) => ({
+		depth: Math.max(1, node.depth),
+		isHome: node.isHome,
+		listed: node.navigation.listed,
+		pagePath: node.pagePath,
+	})),
+	currentPage: {
+		isHome: currentPage.isHome,
+		pagePath: currentPage.pagePath,
+	},
+	headingCount: pageContentsHeadings.length,
+});
+const hasContentsNavigation = pageContentsPlacement.placement !== 'none';
+const integratePageContentsInTree = pageContentsPlacement.placement === 'page-tree';
+const showContentsRail = pageContentsPlacement.placement === 'contents-rail';
+const hasNavigationRailFrame = navigationModel.requestedMode === 'tree'
+	|| (
+		navigationModel.requestedMode === 'automatic'
+		&& (navigationModel.hasNestedPages || navigationModel.hasCategories)
+	);
 const showBreadcrumbs = !currentPage.isHome && currentPage.parentPagePath !== null;
 const reserveBreadcrumbSpace = hasTreeNavigation || showBreadcrumbs;
 
@@ -117,30 +174,54 @@ const reserveBreadcrumbSpace = hasTreeNavigation || showBreadcrumbs;
 	frameColors={frameColors}
 	pathname={currentPage.pathname}
 	footer={sitewideData.footer}
-	treeNavigation={hasTreeNavigation}
+	contentsNavigation={hasContentsNavigation}
+	searchable
 >
 	<SiteNavigation
 		logo={logo}
 		currentPage={currentPage}
 		navigationEntries={siteNavigation}
 		navigationMode={navigationModel.mode}
+		showTopNavigationSubmenus={navigationModel.requestedMode !== 'automatic' && navigationModel.mode !== 'tree'}
+		hasNavigationRailFrame={hasNavigationRailFrame}
 		frameColors={frameColors}
 		readerPreferences={pagePresentation.readerPreferences}
 	/>
 	{siteBanners.length > 0 && <SiteBanners banners={siteBanners} />}
 
-	<div class:list={['site-page-layout', { 'site-page-layout-tree': hasTreeNavigation }]}>
+	<div class:list={['site-page-layout', {
+		'site-page-layout-tree': hasTreeNavigation,
+		'site-page-layout-contents': showContentsRail,
+	}]}
+		data-page-contents-placement={hasContentsNavigation ? pageContentsPlacement.placement : undefined}
+	>
 		{hasTreeNavigation && (
-			<SiteTreeNavigation currentPage={currentPage} navigationEntries={siteNavigation} />
+			<SiteTreeNavigation
+				currentPage={currentPage}
+				navigationEntries={siteNavigation}
+				integratePageSections={integratePageContentsInTree}
+			/>
 		)}
 		<main
-			class:list={['site-content', { 'site-content-has-breadcrumbs': reserveBreadcrumbSpace }]}
+			class:list={['site-content', {
+				'site-content-has-breadcrumbs': reserveBreadcrumbSpace,
+				'site-content-has-edit-source': Boolean(editSourceUrl),
+				'site-content-has-page-sequence': hasPageSequence,
+			}]}
 			id="main-content"
+			data-pagefind-body
 			style={`--page-text-width: ${pageTextWidth}`}
 		>
 			{showBreadcrumbs
 				? <SiteBreadcrumbs currentPage={currentPage} nodes={siteNodes} />
 				: reserveBreadcrumbSpace && <div class="site-breadcrumbs" aria-hidden="true"></div>}
+			{showContentsRail && (
+				<PageContentsNavigation
+					headings={pageContentsHeadings}
+					pageTitle={currentPage.title}
+					variant="inline"
+				/>
+			)}
 			{renderedSections.map(({ section, sectionIndex, prioritizeFirstImage }) => (
 				<SiteSection
 					section={section}
@@ -150,7 +231,19 @@ const reserveBreadcrumbSpace = hasTreeNavigation || showBreadcrumbs;
 					prioritizeFirstImage={prioritizeFirstImage}
 				/>
 			))}
+			{editSourceUrl && (
+				<EditSourceLink href={editSourceUrl} label={projectConfig.locale.labels.editSource} />
+			)}
+			<PageSequenceNavigation previous={pageSequence.previous} next={pageSequence.next} />
 		</main>
+		{showContentsRail && (
+			<PageContentsNavigation
+				headings={pageContentsHeadings}
+				pageTitle={currentPage.title}
+				variant="rail"
+			/>
+		)}
 	</div>
 	{hasTreeNavigation && <TreeNavigationScript />}
+	{hasCodeBlocks && <CodeBlockCopyScript />}
 </BaseLayout>

package/src/components/SiteSection.astro

@@ -9,6 +9,7 @@ import {
 import CardList from './CardList.astro';
 import ImageCarousel from './ImageCarousel.astro';
 import ImageStack from './ImageStack.astro';
+import PageList from './PageList.astro';
 import type { ResolvedSection } from '../lib/sectionContent';
 
 type ResponsiveValue<T> = { desktop: T; mobile: T };
@@ -33,10 +34,15 @@ type ResolvedPagePresentation = {
 };
 type VisualTheme = {
 	images: {
+		presentation: 'prose-aligned' | 'centered-fit';
 		maxAvailableWidthPercent: {
 			desktop: number;
 			mobile: number;
 		};
+		maxAvailableHeightPercent?: {
+			desktop: number;
+			mobile: number;
+		};
 	};
 };
 
@@ -108,6 +114,7 @@ const isStructuredBlock = (block: ResolvedSection['contentBlocks'][number]) => (
 	block.type === 'image-stack'
 	|| block.type === 'image-carousel'
 	|| block.type === 'card-list'
+	|| block.type === 'page-list'
 );
 const hasMedia = section.contentBlocks.some((block) => (
 	block.type === 'image-stack'
@@ -116,7 +123,7 @@ const hasMedia = section.contentBlocks.some((block) => (
 ));
 const contentGroups: Array<
 	| { type: 'reading'; blocks: ResolvedSection['contentBlocks'] }
-	| { type: 'media'; block: Extract<ResolvedSection['contentBlocks'][number], { type: 'image-stack' | 'image-carousel' | 'card-list' }> }
+	| { type: 'structured'; block: Extract<ResolvedSection['contentBlocks'][number], { type: 'image-stack' | 'image-carousel' | 'card-list' | 'page-list' }> }
 > = [];
 let readingBlocks: ResolvedSection['contentBlocks'] = [];
 const flushReadingBlocks = () => {
@@ -128,14 +135,17 @@ const flushReadingBlocks = () => {
 for (const block of section.contentBlocks) {
 	if (isStructuredBlock(block)) {
 		flushReadingBlocks();
-		contentGroups.push({ type: 'media', block });
+		contentGroups.push({ type: 'structured', block });
 	} else {
 		readingBlocks = [...readingBlocks, block];
 	}
 }
 
 flushReadingBlocks();
-const firstMediaGroupIndex = contentGroups.findIndex((group) => group.type === 'media');
+const firstMediaGroupIndex = contentGroups.findIndex((group) => (
+	group.type === 'structured'
+	&& (group.block.type === 'image-stack' || group.block.type === 'image-carousel')
+));
 const markdownHeadingStyle = (level: 'h3' | 'h4') => {
 	const headingConfig = markdownHeadings[level];
 	const fontSize = getHeadingTypographySizeValue(level, headingConfig.size);
@@ -235,6 +245,9 @@ const sectionStyle = [
 						/>
 					);
 				}
+				if (block.type === 'page-list') {
+					return <PageList pages={block.pages} />;
+				}
 
 				return (
 					<ImageStack

package/src/components/SiteTreeNavigation.astro

@@ -3,13 +3,15 @@ import projectConfig from '../../scripts/lib/project-config.mjs';
 import { getListedSiteNavigationTree, type SiteNavigationEntry } from '../lib/siteNavigation';
 import type { SitePage } from '../lib/sitePages';
 import NavigationPageTree from './NavigationPageTree.astro';
+import NavigationTreeControls from './NavigationTreeControls.astro';
 
 interface Props {
 	currentPage: SitePage;
 	navigationEntries: SiteNavigationEntry[];
+	integratePageSections?: boolean;
 }
 
-const { currentPage, navigationEntries } = Astro.props;
+const { currentPage, navigationEntries, integratePageSections = false } = Astro.props;
 const roots = getListedSiteNavigationTree(navigationEntries);
 const activeRoot = roots.find((node) => (
 	currentPage.pageDirectory === node.node.pageDirectory
@@ -24,12 +26,16 @@ const navigationRoot = activeRoot?.node.pagePath ? `/${activeRoot.node.pagePath}
 		class="tree-local-navigation"
 		data-navigation-root={navigationRoot}
 	>
+		<NavigationTreeControls
+			idPrefix="desktop-tree-navigation"
+			nodes={[activeRoot]}
+		/>
 		<nav aria-label={`${activeRoot.node.title}: ${projectConfig.locale.labels.siteNavigation}`}>
 			<NavigationPageTree
 				nodes={[activeRoot]}
 				currentPage={currentPage}
 				variant="sidebar"
-				integratePageSections
+				integratePageSections={integratePageSections}
 			/>
 		</nav>
 	</aside>