@janga/norna 0.7.24 → 0.7.26

package/src/components/SiteNavigation.astro

@@ -1,19 +1,20 @@
 ---
-import { Search } from '@lucide/astro';
+import { Menu, Search, X } from '@lucide/astro';
 import projectConfig from '../../scripts/lib/project-config.mjs';
 import { withBasePath } from '../lib/basePath';
 import type { SectionNavigation } from '../lib/sectionContent';
 import {
-	getFirstPageInNavigationNode,
 	getListedSiteNavigationTree,
 	type SiteNavigationEntry,
 	type SiteNavigationNode,
 } from '../lib/siteNavigation';
-import type { SiteNode, SitePage } from '../lib/sitePages';
+import type { SiteNode } from '../lib/sitePages';
 import DisplaySettings from './DisplaySettings.astro';
 import NavigationPageTree from './NavigationPageTree.astro';
 import NavigationTreeControls from './NavigationTreeControls.astro';
+import TopPageMenu from './TopPageMenu.astro';
 import SectionNavigationScript from './SectionNavigationScript.astro';
+import SearchNavigationScript from './SearchNavigationScript.astro';
 
 type FrameColors = {
 	backgroundColor: string;
@@ -26,7 +27,7 @@ interface Props {
 		alt: string;
 		height?: string;
 	};
-	currentPage?: SitePage;
+	currentPage?: SiteNode;
 	navigationEntries: SiteNavigationEntry[];
 	navigationMode: 'sections' | 'top' | 'tree';
 	showTopNavigationSubmenus: boolean;
@@ -67,6 +68,12 @@ const navigationStyle = [
 	...(logo?.height ? [`--site-brand-logo-height: ${logo.height}`] : []),
 ].join('; ');
 const siteNavigationTree = getListedSiteNavigationTree(navigationEntries);
+const mobileNavigationTree = navigationMode === 'top'
+	? getListedSiteNavigationTree(navigationEntries.map((entry) => ({
+		...entry,
+		headings: entry.headings.filter((heading) => heading.depth === 2),
+	})))
+	: siteNavigationTree;
 const topLevelNavigation = siteNavigationTree;
 const showSiteNavigation = topLevelNavigation.some(({ node }) => !node.isHome);
 const homeNode = navigationEntries.find(({ node }) => node.isHome)?.node;
@@ -75,13 +82,13 @@ if (!homePage) throw new Error('Site navigation requires a homepage.');
 const currentPageNavigation = currentPage
 	? navigationEntries.find(({ node }) => node.kind === 'page' && node.pathname === currentPage.pathname)
 	: undefined;
-const isCurrentPage = (page: SitePage) => currentPage?.pathname === page.pathname;
+const isCurrentPage = (page: SiteNode) => currentPage?.pathname === page.pathname;
 const isCurrentBranch = (node: SiteNode) => Boolean(currentPage && (
 	currentPage.pageDirectory === node.pageDirectory
 	|| currentPage.pageDirectory.startsWith(`${node.pageDirectory}/pages/`)
 ));
-const pageHref = (page: SitePage) => withBasePath(projectConfig.site.basePath, page.pathname);
-const getNavigationPage = (node: SiteNavigationNode) => getFirstPageInNavigationNode(node);
+const pageHref = (page: SiteNode) => withBasePath(projectConfig.site.basePath, page.pathname);
+const getNavigationPage = (node: SiteNavigationNode) => node.node;
 const hasSectionMenu = (pageSections: SectionNavigation[]) => pageSections.length > 1;
 const showSinglePageTopLink = !showSiteNavigation;
 const currentPageSectionCount = currentPageNavigation?.sections.length ?? 0;
@@ -97,6 +104,7 @@ const hasTreePageContents = Boolean(
 );
 const showPageNavigation = Boolean(
 	navigationMode !== 'tree'
+	&& (navigationMode !== 'top' || showSinglePageTopLink)
 	&& currentPageNavigation
 	&& (showSinglePageTopLink || hasCurrentPageSectionMenu),
 );
@@ -107,7 +115,7 @@ const showSearch = projectConfig.search.enabled;
 const searchHref = withBasePath(projectConfig.site.basePath, '/search/');
 const showDesktopNavigationRow = showSiteNavigation || Boolean(logo) || showReaderControls || showSearch;
 const showNavigationRow = showMobileNavigation || showDesktopNavigationRow;
-const needsNavigationScript = hasCurrentPageSectionMenu || hasTreePageContents || navigationMode === 'tree';
+const needsNavigationScript = showMobileNavigation || hasCurrentPageSectionMenu || hasTreePageContents;
 ---
 
 <a class="skip-link" href="#main-content">{projectConfig.locale.labels.skipToContent}</a>
@@ -138,22 +146,20 @@ const needsNavigationScript = hasCurrentPageSectionMenu || hasTreePageContents |
 					{topLevelNavigation.map((navigationNode) => {
 						const destination = getNavigationPage(navigationNode);
 						if (!destination) return null;
-						const nodeIsCurrentPage = navigationNode.node.kind === 'page' && isCurrentPage(navigationNode.node);
+						const nodeIsCurrentPage = isCurrentPage(navigationNode.node);
 						return (
 							<li class:list={['site-nav-item', {
-								'site-nav-item-has-submenu': showTopNavigationSubmenus && navigationNode.children.length > 0,
 								'site-nav-item-current-branch': !nodeIsCurrentPage && isCurrentBranch(navigationNode.node),
 							}]}>
 								<a href={pageHref(destination)} aria-current={nodeIsCurrentPage ? 'page' : undefined}>
 									{navigationNode.node.title}
 								</a>
-								{showTopNavigationSubmenus && navigationNode.children.length > 0 && (
-									<div class="site-nav-submenu">
-										<nav aria-label={`${navigationNode.node.title} ${projectConfig.locale.labels.siteNavigation}`}>
-											<NavigationPageTree nodes={[navigationNode]} currentPage={currentPage} variant="submenu" />
-										</nav>
-									</div>
-								)}
+								<TopPageMenu
+									node={navigationNode}
+									currentPage={currentPage}
+									showSections={navigationMode === 'top'}
+									showChildren={showTopNavigationSubmenus}
+								/>
 							</li>
 						);
 					})}
@@ -165,6 +171,8 @@ const needsNavigationScript = hasCurrentPageSectionMenu || hasTreePageContents |
 					<a
 						class="site-search-link"
 						href={searchHref}
+						data-search-base={projectConfig.site.basePath}
+						data-search-source-title={currentPage?.title}
 						aria-current={searchPage ? 'page' : undefined}
 						aria-label={projectConfig.locale.labels.search}
 						title={projectConfig.locale.labels.search}
@@ -177,56 +185,80 @@ const needsNavigationScript = hasCurrentPageSectionMenu || hasTreePageContents |
 					<DisplaySettings controls={readerPreferences.controls} defaults={readerPreferences.defaults} />
 				)}
 
-				{showMobileNavigation && <details class="mobile-nav-menu">
-			<summary>
-				<span>{projectConfig.locale.labels.navigationMenu}</span>
-			</summary>
-			<div class="mobile-nav-panel">
-			<div class="mobile-site-nav" data-navigation-root={pageHref(homePage)}>
-					{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}
-								variant="mobile"
-								integratePageSections={navigationMode === 'tree'}
-							/>
-						</nav>
-					)}
+					{showMobileNavigation && (
+						<details class="mobile-nav-menu" data-compact-navigation>
+							<summary>
+								<span>{projectConfig.locale.labels.navigationMenu}</span>
+								<Menu class="mobile-nav-trigger-icon mobile-nav-trigger-open" aria-hidden="true" />
+								<X class="mobile-nav-trigger-icon mobile-nav-trigger-close" aria-hidden="true" />
+							</summary>
+							<div
+								class="mobile-nav-panel"
+								data-compact-navigation-panel
+								role="dialog"
+								aria-modal="true"
+								aria-label={projectConfig.locale.labels.navigationMenu}
+							>
+								<div class="mobile-nav-panel-actions">
+									<button
+										type="button"
+										class="mobile-nav-close"
+										data-compact-navigation-close
+										aria-label={projectConfig.locale.labels.closeNavigation}
+									>
+										<X aria-hidden="true" />
+									</button>
+								</div>
+								<div
+									class="mobile-site-nav"
+									data-navigation-root={pageHref(homePage)}
+									data-navigation-state-root={pageHref(homePage)}
+								>
+									{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={mobileNavigationTree}
+											/>
+											<NavigationPageTree
+												nodes={mobileNavigationTree}
+												currentPage={currentPage}
+												variant="mobile"
+												integratePageSections={navigationMode === 'tree' || navigationMode === 'top'}
+											/>
+										</nav>
+									)}
 
-					{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>
-							)}
-							<ul class="mobile-nav-sections">
-								{showSinglePageTopLink && (
-									<li class="mobile-nav-page-top-item">
-										<a
-											class="mobile-nav-destination mobile-nav-page-top"
-											data-page-top
-											href={pageHref(currentPage)}
-										>
-											{currentPage.title}
-										</a>
-									</li>
-								)}
-									{currentPageNavigation.sections.map((section) => (
-										<li>
-											<a class="mobile-nav-destination" href={`#${section.id}`}>{section.title}</a>
-										</li>
-								))}
-							</ul>
-						</nav>
+									{(navigationMode === 'sections' || !showSiteNavigation) && hasCurrentPageSectionMenu && currentPageNavigation && currentPage && (
+										<nav class="mobile-nav-view" aria-label={projectConfig.locale.labels.pageNavigation}>
+											{!showSinglePageTopLink && (
+												<h2 tabindex="-1">{projectConfig.locale.labels.pageNavigation}</h2>
+											)}
+											<ul class="mobile-nav-sections">
+												{showSinglePageTopLink && (
+													<li class="mobile-nav-page-top-item">
+														<a
+															class="mobile-nav-destination mobile-nav-page-top"
+															data-page-top
+															href={pageHref(currentPage)}
+														>
+															{currentPage.title}
+														</a>
+													</li>
+												)}
+												{currentPageNavigation.sections.map((section) => (
+													<li>
+														<a class="mobile-nav-destination" href={`#${section.id}`}>{section.title}</a>
+													</li>
+												))}
+											</ul>
+										</nav>
+									)}
+								</div>
+							</div>
+						</details>
 					)}
-				</div>
-			</div>
-				</details>}
 			</div>
 		</div>
 	)}
@@ -261,3 +293,4 @@ const needsNavigationScript = hasCurrentPageSectionMenu || hasTreePageContents |
 </header>
 
 {needsNavigationScript && <SectionNavigationScript />}
+{showSearch && <SearchNavigationScript />}

package/src/components/SitePage.astro

@@ -2,7 +2,10 @@
 import { getCollection, type CollectionEntry } from 'astro:content';
 import BaseLayout from '../layouts/BaseLayout.astro';
 import CodeBlockCopyScript from './CodeBlockCopyScript.astro';
+import ContentTabsScript from './ContentTabsScript.astro';
+import NoteNavigationScript from './NoteNavigationScript.astro';
 import EditSourceLink from './EditSourceLink.astro';
+import ImageStackEnhancement from './ImageStackEnhancement.astro';
 import SiteBreadcrumbs from './SiteBreadcrumbs.astro';
 import SiteNavigation from './SiteNavigation.astro';
 import SiteBanners from './SiteBanners.astro';
@@ -10,8 +13,9 @@ import PageContentsNavigation from './PageContentsNavigation.astro';
 import PageSequenceNavigation from './PageSequenceNavigation.astro';
 import SiteSection from './SiteSection.astro';
 import SiteTreeNavigation from './SiteTreeNavigation.astro';
+import TableOverflowScript from './TableOverflowScript.astro';
 import TreeNavigationScript from './TreeNavigationScript.astro';
-import { getSectionsContent, type ResolvedSection } from '../lib/sectionContent';
+import { flattenContentBlocks, getSectionsContent, type ResolvedSection } from '../lib/sectionContent';
 import { getPageTheme } from '../lib/pageThemes';
 import { getSiteModel, type SitePage } from '../lib/sitePages';
 import {
@@ -27,22 +31,25 @@ import {
 	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 { resolveEditSourceTarget } from '../../scripts/lib/edit-source-link.mjs';
 import { getTextWidthCssValue, resolveFrameColors, resolvePagePresentation } from '../../scripts/lib/presentation.mjs';
 import { mergePageThemeConfig } from '../../scripts/lib/theme-presets.mjs';
 
 type SiteEntry = CollectionEntry<'site'>;
 
 interface Props {
-	entry: SiteEntry;
+	entry?: SiteEntry;
+	categoryPath?: string;
 }
 
-const { entry } = Astro.props;
+const { entry, categoryPath } = Astro.props;
 const siteDirectory = (process.env.NORNA_SITE_DIR ?? 'site').trim();
 const siteModel = await getSiteModel(await getCollection('site'));
 const { nodes: siteNodes, pages: sitePages } = siteModel;
-const currentPage = sitePages.find((page) => page.entry.id === entry.id);
-if (!currentPage) throw new Error(`Page entry "${entry.id}" is missing from the site page model.`);
+const categoryDestination = categoryPath ? siteModel.categoryDestinations.byPathname.get(categoryPath) : null;
+const currentPage = categoryDestination?.category
+	?? sitePages.find((page) => page.entry.id === entry?.id);
+if (!currentPage) throw new Error(`Page entry "${entry?.id ?? categoryPath}" 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.');
@@ -91,11 +98,35 @@ 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) => (
+const siteHtml = entry?.rendered?.html ?? '';
+const resolvedSections: ResolvedSection[] = categoryDestination ? [{
+	id: null,
+	title: currentPage.title,
+	titleHtml: currentPage.title.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;'),
+	headingLevel: 1,
+	contentBlocks: [{
+		type: 'page-list',
+		pages: categoryDestination.children.map((node) => ({
+			title: node.title,
+			pathname: node.pathname,
+			description: node.kind === 'page' ? node.entry.data.page?.description : undefined,
+		})),
+	}],
+}] : await getSectionsContent(siteHtml, currentPage, childPages);
+const allContentBlocks = resolvedSections.flatMap((section) => flattenContentBlocks(section.contentBlocks));
+const hasTabs = allContentBlocks.some((block) => block.type === 'tabs');
+const hasNotes = allContentBlocks.some((block) => (
+	block.type === 'html' && /class="[^"]*\bsection-note-ref\b|\bdata-footnote-ref(?:="")?/.test(block.html)
+));
+const hasCodeBlocks = allContentBlocks.some((block) => (
 	block.type === 'html' && /<pre\b[^>]*>[\s\S]*?<code\b/i.test(block.html)
-)));
+));
+const hasTables = allContentBlocks.some((block) => (
+	block.type === 'html' && /\bdata-table-frame(?:="")?/i.test(block.html)
+));
+const hasImageStack = allContentBlocks.some((block) => (
+	block.type === 'image-stack'
+));
 const hasPrioritizableImage = (section: ResolvedSection) => section.contentBlocks.some((block) => (
 	block.type === 'image-stack'
 	|| block.type === 'image-carousel'
@@ -108,10 +139,13 @@ const renderedSections = resolvedSections.map((section, index) => ({
 	prioritizeFirstImage: index === firstImageSectionIndex,
 }));
 const hasPageSequence = Boolean(pageSequence.previous || pageSequence.next);
-const editSourceUrl = projectConfig.editLink
-	? getEditSourceUrl({
-		baseUrl: projectConfig.editLink.baseUrl,
-		sourcePath: currentPage.contentLabel,
+const editSourceTarget = projectConfig.editLink && currentPage.kind === 'page'
+	? resolveEditSourceTarget({
+		...projectConfig.editLink,
+		development: import.meta.env.DEV,
+		hostname: Astro.url.hostname,
+		sourceLabel: currentPage.contentLabel,
+		sourcePath: currentPage.contentPath,
 	})
 	: null;
 const navigationModel = resolveNavigationModel({
@@ -135,6 +169,7 @@ 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 showTreeNavigation = hasTreeNavigation && !currentPage.isHome;
 const currentPageNavigation = siteNavigation.find(({ node }) => (
 	node.kind === 'page' && node.pathname === currentPage.pathname
 ));
@@ -154,27 +189,31 @@ const pageContentsPlacement = resolvePageContentsPlacement({
 	headingCount: pageContentsHeadings.length,
 });
 const hasContentsNavigation = pageContentsPlacement.placement !== 'none';
-const integratePageContentsInTree = pageContentsPlacement.placement === 'page-tree';
+const hasTrackedSectionNavigation = hasContentsNavigation
+	|| (hasTreeNavigation && currentPage.isHome && pageContentsHeadings.length >= 2);
+const integratePageContentsInTree = hasTreeNavigation;
 const showContentsRail = pageContentsPlacement.placement === 'contents-rail';
-const hasNavigationRailFrame = navigationModel.requestedMode === 'tree'
+const hasNavigationRailFrame = !currentPage.isHome && (
+	navigationModel.requestedMode === 'tree'
 	|| (
 		navigationModel.requestedMode === 'automatic'
 		&& (navigationModel.hasNestedPages || navigationModel.hasCategories)
-	);
+	)
+);
 const showBreadcrumbs = !currentPage.isHome && currentPage.parentPagePath !== null;
-const reserveBreadcrumbSpace = hasTreeNavigation || showBreadcrumbs;
+const reserveBreadcrumbSpace = showTreeNavigation || showBreadcrumbs;
 
 ---
 
 <BaseLayout
 	title={currentPage.title}
-	description={entry.data.page?.description}
+	description={entry?.data.page?.description}
 	presentation={pagePresentation}
 	visualTheme={visualTheme}
 	frameColors={frameColors}
 	pathname={currentPage.pathname}
 	footer={sitewideData.footer}
-	contentsNavigation={hasContentsNavigation}
+	contentsNavigation={hasTrackedSectionNavigation}
 	searchable
 >
 	<SiteNavigation
@@ -190,12 +229,12 @@ const reserveBreadcrumbSpace = hasTreeNavigation || showBreadcrumbs;
 	{siteBanners.length > 0 && <SiteBanners banners={siteBanners} />}
 
 	<div class:list={['site-page-layout', {
-		'site-page-layout-tree': hasTreeNavigation,
+		'site-page-layout-tree': showTreeNavigation,
 		'site-page-layout-contents': showContentsRail,
 	}]}
 		data-page-contents-placement={hasContentsNavigation ? pageContentsPlacement.placement : undefined}
 	>
-		{hasTreeNavigation && (
+		{showTreeNavigation && (
 			<SiteTreeNavigation
 				currentPage={currentPage}
 				navigationEntries={siteNavigation}
@@ -205,7 +244,7 @@ const reserveBreadcrumbSpace = hasTreeNavigation || showBreadcrumbs;
 		<main
 			class:list={['site-content', {
 				'site-content-has-breadcrumbs': reserveBreadcrumbSpace,
-				'site-content-has-edit-source': Boolean(editSourceUrl),
+				'site-content-has-edit-source': Boolean(editSourceTarget),
 				'site-content-has-page-sequence': hasPageSequence,
 			}]}
 			id="main-content"
@@ -215,13 +254,6 @@ const reserveBreadcrumbSpace = hasTreeNavigation || showBreadcrumbs;
 			{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}
@@ -231,8 +263,13 @@ const reserveBreadcrumbSpace = hasTreeNavigation || showBreadcrumbs;
 					prioritizeFirstImage={prioritizeFirstImage}
 				/>
 			))}
-			{editSourceUrl && (
-				<EditSourceLink href={editSourceUrl} label={projectConfig.locale.labels.editSource} />
+			{editSourceTarget && (
+				<EditSourceLink
+					href={editSourceTarget.href}
+					label={editSourceTarget.kind === 'local'
+						? projectConfig.locale.labels.openInVsCode
+						: projectConfig.locale.labels.editSource}
+				/>
 			)}
 			<PageSequenceNavigation previous={pageSequence.previous} next={pageSequence.next} />
 		</main>
@@ -240,10 +277,13 @@ const reserveBreadcrumbSpace = hasTreeNavigation || showBreadcrumbs;
 			<PageContentsNavigation
 				headings={pageContentsHeadings}
 				pageTitle={currentPage.title}
-				variant="rail"
 			/>
 		)}
 	</div>
 	{hasTreeNavigation && <TreeNavigationScript />}
 	{hasCodeBlocks && <CodeBlockCopyScript />}
+	{hasTabs && <ContentTabsScript />}
+	{hasNotes && <NoteNavigationScript />}
+	{hasTables && <TableOverflowScript />}
+	{hasImageStack && <ImageStackEnhancement />}
 </BaseLayout>

package/src/components/SiteSection.astro

@@ -6,11 +6,8 @@ import {
 	getHeadingTypographySizeValue,
 	getTypographySizeValue,
 } from '../../scripts/lib/typography.mjs';
-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';
+import ContentBlocks from './ContentBlocks.astro';
+import { flattenContentBlocks, type ResolvedSection } from '../lib/sectionContent';
 
 type ResponsiveValue<T> = { desktop: T; mobile: T };
 type ResponsiveOverride<T> = { desktop?: T; mobile?: T };
@@ -110,42 +107,11 @@ const bodyWidth = {
 	desktop: bodyWidthValue,
 	mobile: bodyWidthValue,
 };
-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) => (
+const hasMedia = flattenContentBlocks(section.contentBlocks).some((block) => (
 	block.type === 'image-stack'
 	|| block.type === 'image-carousel'
 	|| (block.type === 'card-list' && block.cards.some((card) => card.image))
 ));
-const contentGroups: Array<
-	| { type: 'reading'; blocks: ResolvedSection['contentBlocks'] }
-	| { type: 'structured'; block: Extract<ResolvedSection['contentBlocks'][number], { type: 'image-stack' | 'image-carousel' | 'card-list' | 'page-list' }> }
-> = [];
-let readingBlocks: ResolvedSection['contentBlocks'] = [];
-const flushReadingBlocks = () => {
-	if (readingBlocks.length === 0) return;
-	contentGroups.push({ type: 'reading', blocks: readingBlocks });
-	readingBlocks = [];
-};
-
-for (const block of section.contentBlocks) {
-	if (isStructuredBlock(block)) {
-		flushReadingBlocks();
-		contentGroups.push({ type: 'structured', block });
-	} else {
-		readingBlocks = [...readingBlocks, block];
-	}
-}
-
-flushReadingBlocks();
-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);
@@ -209,55 +175,13 @@ const sectionStyle = [
 	style={sectionStyle}
 >
 	<div class="section-card">
+		<slot name="before-heading" />
 		<header class="section-header">
 			<HeadingTag id={headingId} set:html={section.titleHtml} />
 		</header>
 
 		<div class:list={['section-body', { 'section-body-has-media': hasMedia, 'section-body-text-only': !hasMedia }]}>
-			{contentGroups.map((group, groupIndex) => {
-				if (group.type === 'reading') {
-					return group.blocks.map((block) => block.type === 'html'
-						&& block.html
-						&& <div class="section-markdown" set:html={block.html} />);
-				}
-
-				const block = group.block;
-				if (block.type === 'image-carousel') {
-					return (
-						<ImageCarousel
-							title={section.title}
-							images={block.images}
-							maxAvailableWidthPercent={visualTheme.images.maxAvailableWidthPercent}
-							maxAvailableHeightPercent={visualTheme.images.maxAvailableHeightPercent}
-							priorityFirstImage={prioritizeFirstImage && groupIndex === firstMediaGroupIndex}
-						/>
-					);
-				}
-
-				if (block.type === 'card-list') {
-					return (
-						<CardList
-							cards={block.cards}
-							layout={block.layout}
-							flow={block.flow}
-							size={block.size}
-							width={block.width ?? pagePresentation.blocks.cardList.width}
-						/>
-					);
-				}
-				if (block.type === 'page-list') {
-					return <PageList pages={block.pages} />;
-				}
-
-				return (
-					<ImageStack
-						title={section.title}
-						images={block.images}
-						maxAvailableWidthPercent={visualTheme.images.maxAvailableWidthPercent}
-						priorityFirstImage={prioritizeFirstImage && groupIndex === firstMediaGroupIndex}
-					/>
-				);
-			})}
+			<ContentBlocks blocks={section.contentBlocks} title={section.title} images={visualTheme.images} cardWidth={pagePresentation.blocks.cardList.width} prioritizeFirstImage={prioritizeFirstImage} />
 		</div>
 	</div>
 </section>

package/src/components/SiteTreeNavigation.astro

@@ -1,12 +1,13 @@
 ---
 import projectConfig from '../../scripts/lib/project-config.mjs';
+import { withBasePath } from '../lib/basePath';
 import { getListedSiteNavigationTree, type SiteNavigationEntry } from '../lib/siteNavigation';
-import type { SitePage } from '../lib/sitePages';
+import type { SiteNode } from '../lib/sitePages';
 import NavigationPageTree from './NavigationPageTree.astro';
 import NavigationTreeControls from './NavigationTreeControls.astro';
 
 interface Props {
-	currentPage: SitePage;
+	currentPage: SiteNode;
 	navigationEntries: SiteNavigationEntry[];
 	integratePageSections?: boolean;
 }
@@ -18,6 +19,7 @@ const activeRoot = roots.find((node) => (
 	|| currentPage.pageDirectory.startsWith(`${node.node.pageDirectory}/pages/`)
 ));
 const navigationRoot = activeRoot?.node.pagePath ? `/${activeRoot.node.pagePath}/` : '/';
+const navigationStateRoot = withBasePath(projectConfig.site.basePath, '/');
 ---
 
 {activeRoot && (
@@ -25,6 +27,7 @@ const navigationRoot = activeRoot?.node.pagePath ? `/${activeRoot.node.pagePath}
 		id="tree-local-navigation"
 		class="tree-local-navigation"
 		data-navigation-root={navigationRoot}
+		data-navigation-state-root={navigationStateRoot}
 	>
 		<NavigationTreeControls
 			idPrefix="desktop-tree-navigation"