@janga/norna 0.7.17 → 0.7.22

package/src/components/NavigationPageTree.astro

@@ -1,62 +1,182 @@
 ---
 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 type { SiteNavigationNode } from '../lib/siteNavigation';
+import type { SiteNode, SitePage } from '../lib/sitePages';
+import PageContentsLinks from './PageContentsLinks.astro';
 
 interface Props {
-	nodes: PageNavigationNode[];
+	nodes: SiteNavigationNode[];
 	currentPage: SitePage;
-	variant: 'mobile' | 'submenu';
+	variant: 'mobile' | 'sidebar' | 'submenu';
+	integratePageSections?: boolean;
 }
 
-const { nodes, currentPage, variant } = Astro.props;
+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 hasBranch = (node: SiteNavigationNode) => node.children.length > 0;
 const isCurrentPage = (page: SitePage) => page.pathname === currentPage.pathname;
-const isCurrentBranch = (page: SitePage) => (
-	page.isHome
-		? currentPage.isHome
-		: currentPage.pagePath === page.pagePath || currentPage.pagePath.startsWith(`${page.pagePath}/`)
+const isCurrentBranch = (node: SiteNode) => (
+	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 hasPageSections = (node: SiteNavigationNode) => (
+	node.node.kind === 'page' && node.headings.some((heading) => heading.depth === 2)
+);
+const hasPageDisclosure = (node: SiteNavigationNode) => 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),
+				'navigation-page-node-category': node.node.kind === 'category',
+				'navigation-page-node-current': node.node.kind === 'page' && isCurrentPage(node.node),
+				'navigation-page-node-current-branch': isCurrentBranch(node.node),
 			}]}
 		>
-			{variant === 'mobile' && hasBranch(node) ? (
-				<details class="mobile-navigation-branch" open={isCurrentBranch(node.page)}>
-					<summary><span>{node.page.title}</span></summary>
-					<div class="mobile-navigation-branch-content">
-						<ul class="mobile-navigation-page-links">
-							<li>
-								<a
-									class="mobile-nav-destination mobile-nav-overview"
-									href={pageHref(node.page)}
-									aria-current={isCurrentPage(node.page) ? 'page' : undefined}
-								>
-									{projectConfig.locale.labels.navigationOverview}
-								</a>
-							</li>
-						</ul>
-						{node.children.length > 0 && (
-							<Astro.self nodes={node.children} currentPage={currentPage} variant={variant} />
-						)}
+			{node.node.kind === 'category' ? (
+				<details
+					class:list={[
+						'navigation-page-branch',
+						'navigation-page-disclosure',
+						'navigation-category-disclosure',
+						`navigation-page-disclosure-${variant}`,
+					]}
+					data-page-path={node.node.pagePath}
+					data-current-branch={isCurrentBranch(node.node) ? 'true' : undefined}
+					open={isCurrentBranch(node.node)}
+				>
+					<summary
+						class="navigation-page-summary"
+						aria-controls={getBranchId(node.node)}
+					>
+						<span class="navigation-page-summary-title">{node.node.title}</span>
+						<span class="navigation-page-chevron" 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>
-			) : (
+			) : variant !== 'submenu' && integratePageSections ? (
+				hasPageDisclosure(node) ? (
+					<details
+						class:list={['navigation-page-branch', 'navigation-page-disclosure', `navigation-page-disclosure-${variant}`]}
+						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)}
+						>
+							<span class="navigation-page-summary-title">{node.node.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.node)}
+							aria-current={isCurrentPage(node.node) ? 'page' : undefined}
+						>
+							{node.node.title}
+						</a>
+						<div id={getBranchId(node.node)} class="navigation-page-branch-content">
+							{hasPageSections(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>
+					</details>
+				) : (
+					<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>
+				)
+			) : variant !== 'submenu' ? (
 				<>
 					<a
 						class:list={['navigation-page-link', { 'mobile-nav-destination': variant === 'mobile' }]}
-						href={pageHref(node.page)}
-						aria-current={isCurrentPage(node.page) ? 'page' : undefined}
+						href={pageHref(node.node)}
+						aria-current={isCurrentPage(node.node) ? 'page' : undefined}
+					>
+						{node.node.title}
+					</a>
+					{variant === 'sidebar' && isCurrentPage(node.node) && hasPageSections(node) && (
+						<nav
+							class="navigation-page-sections"
+							aria-label={`${projectConfig.locale.labels.pageNavigation}: ${node.node.title}`}
+						>
+							<PageContentsLinks
+								headings={node.headings}
+								variant="desktop"
+							/>
+						</nav>
+					)}
+					{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>
+					)}
+				</>
+			) : (
+				<>
+					<a
+						class="navigation-page-link"
+						href={pageHref(node.node)}
+						aria-current={isCurrentPage(node.node) ? 'page' : undefined}
 					>
-						{node.page.title}
+						{node.node.title}
 					</a>
 					{node.children.length > 0 && (
 						<Astro.self nodes={node.children} currentPage={currentPage} variant={variant} />

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

@@ -2,11 +2,27 @@
 	const siteTop = document.querySelector<HTMLElement>('.site-top');
 	const mobileMenu = document.querySelector<HTMLDetailsElement>('.mobile-nav-menu');
 	const sectionLinks = Array.from(document.querySelectorAll<HTMLAnchorElement>(
-		'.mobile-nav-sections a, .page-nav a',
+		'.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 sectionTrackingEnabled = document.documentElement.dataset.sectionTracking === 'enabled';
+	const trackedHeadingIds = new Set(sectionLinks.flatMap((link) => {
+		const linkUrl = new URL(link.href, window.location.href);
+		if (linkUrl.pathname !== window.location.pathname || !linkUrl.hash) return [];
+
+		try {
+			return [decodeURIComponent(linkUrl.hash.slice(1))];
+		} catch {
+			return [];
+		}
+	}));
+	const trackedHeadings = sectionTrackingEnabled
+		? Array.from(document.querySelectorAll<HTMLElement>('.site-content h2[id], .site-content h3[id]'))
+			.filter((heading) => trackedHeadingIds.has(heading.id))
+		: [];
+	let sectionTrackingFrame: number | undefined;
 
 	const setAnchorOffset = () => {
 		if (!siteTop) return;
@@ -40,9 +56,34 @@
 	const updateCurrentSection = () => {
 		sectionLinks.forEach((link) => {
 			const linkUrl = new URL(link.href, window.location.href);
-			const isCurrent = linkUrl.pathname === window.location.pathname
-				&& linkUrl.hash !== ''
-				&& linkUrl.hash === window.location.hash;
+			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');
+			}
+		});
+	};
+
+	const updateReadingPosition = () => {
+		sectionTrackingFrame = undefined;
+		const readingLine = Math.ceil(siteTop?.getBoundingClientRect().bottom ?? 0) + 8;
+		let currentHeadingId: string | undefined;
+
+		for (const heading of trackedHeadings) {
+			if (heading.getBoundingClientRect().top > readingLine) break;
+			currentHeadingId = heading.id;
+		}
+
+		sectionLinks.forEach((link) => {
+			const target = getSamePageTarget(link);
+			const isCurrent = target !== undefined && target.id === currentHeadingId;
 
 			if (isCurrent) {
 				link.setAttribute('aria-current', 'location');
@@ -52,6 +93,11 @@
 		});
 	};
 
+	const scheduleReadingPositionUpdate = () => {
+		if (!sectionTrackingEnabled || sectionTrackingFrame !== undefined) return;
+		sectionTrackingFrame = window.requestAnimationFrame(updateReadingPosition);
+	};
+
 	submenuItems.forEach((item) => {
 		const resetDismissal = () => delete item.dataset.submenuDismissed;
 		item.addEventListener('pointerleave', resetDismissal);
@@ -67,7 +113,11 @@
 
 		mobileMenu.addEventListener('toggle', () => {
 			document.documentElement.classList.toggle('mobile-navigation-open', mobileMenu.open);
-			if (mobileMenu.open) window.requestAnimationFrame(() => mobileMenu.querySelector<HTMLElement>('h2')?.focus());
+			if (mobileMenu.open) {
+				window.requestAnimationFrame(() => (
+					mobileMenu.querySelector<HTMLElement>('.mobile-nav-view h2, .mobile-nav-view a')?.focus()
+				));
+			}
 		});
 
 		mobileMenu.addEventListener('keydown', (event) => {
@@ -121,13 +171,24 @@
 		});
 	});
 
-	window.addEventListener('hashchange', updateCurrentSection);
+	window.addEventListener('hashchange', () => {
+		updateCurrentSection();
+		scheduleReadingPositionUpdate();
+	});
 	updateCurrentSection();
+	if (sectionTrackingEnabled) {
+		window.addEventListener('scroll', scheduleReadingPositionUpdate, { passive: true });
+		window.addEventListener('resize', scheduleReadingPositionUpdate);
+		scheduleReadingPositionUpdate();
+	}
 
 	setAnchorOffset();
 	if (window.location.hash) window.requestAnimationFrame(alignInitialHashTarget);
 
 	if (siteTop && 'ResizeObserver' in window) {
-		new ResizeObserver(setAnchorOffset).observe(siteTop);
+		new ResizeObserver(() => {
+			setAnchorOffset();
+			scheduleReadingPositionUpdate();
+		}).observe(siteTop);
 	}
 </script>

package/src/components/SiteBreadcrumbs.astro

@@ -1,29 +1,35 @@
 ---
 import projectConfig from '../../scripts/lib/project-config.mjs';
 import { withBasePath } from '../lib/basePath';
-import type { SitePage } from '../lib/sitePages';
+import type { SiteNode, SitePage } from '../lib/sitePages';
 
 interface Props {
 	currentPage: SitePage;
-	pages: SitePage[];
+	nodes: SiteNode[];
 }
 
-const { currentPage, pages } = Astro.props;
-const pagesByPath = new Map(pages.map((page) => [page.pagePath, page]));
-const ancestors = currentPage.pageIds
-	.slice(0, -1)
-	.map((_, index) => pagesByPath.get(currentPage.pageIds.slice(0, index + 1).join('/')))
-	.filter((page): page is SitePage => page !== undefined);
+const { currentPage, nodes } = Astro.props;
+const nodesByPath = new Map(nodes.map((node) => [node.pagePath, node]));
+const ancestors: SiteNode[] = [];
+let parentPagePath = currentPage.parentPagePath;
+while (parentPagePath !== null) {
+	const parentNode = nodesByPath.get(parentPagePath);
+	if (!parentNode) break;
+	ancestors.unshift(parentNode);
+	parentPagePath = parentNode.parentPagePath;
+}
 const pageHref = (page: SitePage) => withBasePath(projectConfig.site.basePath, page.pathname);
 ---
 
-{ancestors.length > 0 && (
-	<nav class="site-breadcrumbs" aria-label={projectConfig.locale.labels.breadcrumb}>
-		<ol>
-			{ancestors.map((page) => (
-				<li><a href={pageHref(page)}>{page.title}</a></li>
-			))}
-			<li><span aria-current="page">{currentPage.title}</span></li>
-		</ol>
-	</nav>
-)}
+<nav class="site-breadcrumbs" aria-label={projectConfig.locale.labels.breadcrumb}>
+	<ol>
+		{ancestors.map((node) => (
+			<li>
+				{node.kind === 'page'
+					? <a href={pageHref(node)}>{node.title}</a>
+					: <span>{node.title}</span>}
+			</li>
+		))}
+		<li><span aria-current="page">{currentPage.title}</span></li>
+	</ol>
+</nav>