@janga/norna 0.7.8 → 0.7.10

package/src/components/GalleryGrid.astro

@@ -17,13 +17,25 @@ type GeneratedImageWithDimensions = NonNullable<ReturnType<typeof getGeneratedIm
 interface Props {
 	title: string;
 	items: GalleryItem[];
+	maxAvailableWidthPercent: {
+		desktop: number;
+		mobile: number;
+	};
 	priorityFirstImage?: boolean;
 }
 
-const { title, items, priorityFirstImage = false } = Astro.props;
+const { title, items, maxAvailableWidthPercent, priorityFirstImage = false } = Astro.props;
+const getCaptionId = (image: GalleryImage, itemIndex: number, imageIndex = 0) => {
+	const source = (image.src ?? image.image)
+		.toLowerCase()
+		.replace(/[^a-z0-9]+/g, '-')
+		.replace(/^-|-$/g, '');
+
+	return `gallery-caption-${source}-${itemIndex}-${imageIndex}`;
+};
 const galleryImageSizes = [
-	`(max-width: 700px) ${projectConfig.gallery.maxAvailableWidthPercent.mobile}vw`,
-	`${projectConfig.gallery.maxAvailableWidthPercent.desktop}vw`,
+	`(max-width: 700px) ${maxAvailableWidthPercent.mobile}vw`,
+	`${maxAvailableWidthPercent.desktop}vw`,
 ].join(', ');
 const hasDimensions = (image: ReturnType<typeof getGeneratedImage>): image is GeneratedImageWithDimensions => (
 	Boolean(image) && Number.isFinite(image.width) && Number.isFinite(image.height)
@@ -54,6 +66,8 @@ const getCarouselAspectRatio = (images: GalleryImage[]) => {
 		const isPriorityItem = priorityFirstImage && itemIndex === 0;
 
 		if ('image' in item) {
+			const captionId = item.caption ? getCaptionId(item, itemIndex) : undefined;
+
 			return (
 				<figure class="gallery-item">
 					<div class="gallery-image-frame">
@@ -61,11 +75,12 @@ const getCarouselAspectRatio = (images: GalleryImage[]) => {
 							{...getImageAttributes(item.src ?? item.image, galleryImageSizes)}
 							class:list={['gallery-image', getImageClass(item)]}
 							alt={item.alt ?? ''}
+							aria-describedby={captionId}
 							{...getImageLoadingProps(isPriorityItem)}
 						/>
 					</div>
 					{item.caption && (
-						<figcaption class="gallery-meta">
+						<figcaption class="gallery-meta" id={captionId}>
 							<div class="gallery-details">
 								<span>{item.caption}</span>
 							</div>
@@ -93,18 +108,23 @@ const getCarouselAspectRatio = (images: GalleryImage[]) => {
 				<div class="gallery-carousel-stage">
 					<div class="gallery-carousel-viewport" data-carousel-viewport>
 						<div class="gallery-carousel-slides">
-							{item.carousel.map((image, imageIndex) => (
-								<figure class="gallery-carousel-slide" data-carousel-slide>
-									<div class="gallery-carousel-image-frame">
-										<img
-											{...getImageAttributes(image.src ?? image.image, galleryImageSizes)}
-											class:list={['gallery-image', getImageClass(image)]}
-											alt={image.alt ?? ''}
-											{...getImageLoadingProps(isPriorityItem && imageIndex === 0)}
-										/>
-									</div>
-								</figure>
-							))}
+							{item.carousel.map((image, imageIndex) => {
+								const captionId = image.caption ? getCaptionId(image, itemIndex, imageIndex) : undefined;
+
+								return (
+									<figure class="gallery-carousel-slide" data-carousel-slide>
+										<div class="gallery-carousel-image-frame">
+											<img
+												{...getImageAttributes(image.src ?? image.image, galleryImageSizes)}
+												class:list={['gallery-image', getImageClass(image)]}
+												alt={image.alt ?? ''}
+												aria-describedby={captionId}
+												{...getImageLoadingProps(isPriorityItem && imageIndex === 0)}
+											/>
+										</div>
+									</figure>
+								);
+							})}
 						</div>
 					</div>
 					<button
@@ -134,6 +154,7 @@ const getCarouselAspectRatio = (images: GalleryImage[]) => {
 						image.caption && (
 							<p
 								class="gallery-meta gallery-carousel-caption"
+								id={getCaptionId(image, itemIndex, imageIndex)}
 								data-carousel-caption
 								data-carousel-caption-index={imageIndex}
 							>

package/src/components/SiteBanners.astro

@@ -0,0 +1,100 @@
+---
+import projectConfig from '../../scripts/lib/project-config.mjs';
+
+type Banner = {
+	id: string;
+	tone: 'warning';
+	title: string;
+	text: string;
+	visible?: {
+		from?: string;
+		until?: string;
+	};
+};
+
+interface Props {
+	banners: Banner[];
+}
+
+const { banners } = Astro.props;
+const hashBanner = (banner: Banner) => {
+	const value = [
+		banner.id,
+		banner.tone,
+		banner.title,
+		banner.text,
+		banner.visible?.from ?? '',
+		banner.visible?.until ?? '',
+	].join('\u001f');
+	let hash = 0;
+
+	for (const character of value) {
+		hash = ((hash << 5) - hash + character.charCodeAt(0)) | 0;
+	}
+
+	return (hash >>> 0).toString(36);
+};
+const getStorageKey = (banner: Banner) => `norna-banner:${banner.id}:${hashBanner(banner)}`;
+const dismissBannerLabel = projectConfig.locale.labels.dismissBanner;
+const siteBannersLabel = projectConfig.locale.labels.siteBanners;
+---
+
+{banners.length > 0 && (
+	<aside class="site-banners" aria-label={siteBannersLabel}>
+		{banners.map((banner) => {
+			const storageKey = getStorageKey(banner);
+			const dismissLabel = `${dismissBannerLabel}: ${banner.title}`;
+
+			return (
+				<article
+					class:list={['site-banner', `site-banner-${banner.tone}`]}
+					data-norna-banner
+					data-banner-key={storageKey}
+					role="status"
+				>
+					<div class="site-banner-copy">
+						<p class="site-banner-title">{banner.title}</p>
+						<p class="site-banner-text">{banner.text}</p>
+					</div>
+					<button class="site-banner-dismiss" type="button" data-dismiss-banner aria-label={dismissLabel} title={dismissLabel}>
+						<span aria-hidden="true">&times;</span>
+					</button>
+				</article>
+			);
+		})}
+	</aside>
+)}
+
+<script is:inline>
+	(() => {
+		const storagePrefix = 'norna-banner:';
+		const banners = Array.from(document.querySelectorAll('[data-norna-banner]'));
+
+		banners.forEach((banner) => {
+			const storageKey = banner.getAttribute('data-banner-key');
+			const dismissButton = banner.querySelector('[data-dismiss-banner]');
+
+			if (!storageKey || !(dismissButton instanceof HTMLButtonElement)) return;
+
+			try {
+				if (localStorage.getItem(storageKey) === 'dismissed') {
+					banner.hidden = true;
+				}
+			} catch {
+				// Private browsing modes may deny storage; the banner remains usable.
+			}
+
+			dismissButton.addEventListener('click', () => {
+				try {
+					if (storageKey.startsWith(storagePrefix)) {
+						localStorage.setItem(storageKey, 'dismissed');
+					}
+				} catch {
+					// Dismissing still works for the current page when storage is unavailable.
+				}
+
+				banner.hidden = true;
+			});
+		});
+	})();
+</script>

package/src/components/SiteNavigation.astro

@@ -1,7 +1,7 @@
 ---
 import projectConfig from '../../scripts/lib/project-config.mjs';
 import { withBasePath } from '../lib/basePath';
-import type { ResolvedSection } from '../lib/sectionContent';
+import type { SectionNavigation } from '../lib/sectionContent';
 import type { SitePage } from '../lib/sitePages';
 
 type FrameColors = {
@@ -11,13 +11,20 @@ type FrameColors = {
 
 interface Props {
 	brandLabel: string;
+	logo?: {
+		src: string;
+		alt: string;
+		height?: string;
+	};
 	currentPage: SitePage;
-	pages: SitePage[];
-	sections: ResolvedSection[];
+	pageNavigation: Array<{
+		page: SitePage;
+		sections: SectionNavigation[];
+	}>;
 	frameColors: FrameColors;
 }
 
-const { brandLabel, currentPage, pages, sections, frameColors } = Astro.props;
+const { brandLabel, logo, currentPage, pageNavigation, frameColors } = Astro.props;
 const smoothScrollConfig = projectConfig.navigation.smoothScroll;
 const siteTopBackgroundColor = frameColors.backgroundColor === 'transparent'
 	? 'var(--color-page)'
@@ -25,12 +32,15 @@ const siteTopBackgroundColor = frameColors.backgroundColor === 'transparent'
 const navigationStyle = [
 	`--site-top-background-color: ${siteTopBackgroundColor}`,
 	`--site-top-text-color: ${frameColors.textColor}`,
+	...(logo?.height ? [`--site-brand-logo-height: ${logo.height}`] : []),
 ].join('; ');
-const showSiteNavigation = pages.length > 1;
-const showPageNavigation = sections.length > 1;
-const homePage = pages.find((page) => page.isHome) ?? currentPage;
+const showSiteNavigation = pageNavigation.length > 1;
+const homePage = pageNavigation.find(({ page }) => page.isHome)?.page ?? currentPage;
+const currentPageNavigation = pageNavigation.find(({ page }) => page.pathname === currentPage.pathname);
 const isCurrentPage = (page: SitePage) => page.pathname === currentPage.pathname;
 const pageHref = (page: SitePage) => withBasePath(projectConfig.site.basePath, page.pathname);
+const sectionHref = (page: SitePage, section: SectionNavigation) => `${pageHref(page)}#${section.id}`;
+const hasSectionMenu = (pageSections: SectionNavigation[]) => pageSections.length > 1;
 ---
 
 <a class="skip-link" href="#main-content">{projectConfig.locale.labels.skipToContent}</a>
@@ -42,15 +52,30 @@ const pageHref = (page: SitePage) => withBasePath(projectConfig.site.basePath, p
 >
 	{showSiteNavigation && (
 		<div class="site-nav-row">
-			<a class="site-brand" href={pageHref(homePage)}>{brandLabel}</a>
+			<a class="site-brand" href={pageHref(homePage)}>
+				{logo ? <img class="site-brand-logo" src={withBasePath(projectConfig.site.basePath, logo.src)} alt={logo.alt} /> : brandLabel}
+			</a>
 
 			<nav class="site-nav" aria-label={projectConfig.locale.labels.siteNavigation}>
 				<ul>
-					{pages.map((page) => (
-						<li>
+					{pageNavigation.map(({ page, sections: pageSections }) => (
+						<li class:list={['site-nav-item', { 'site-nav-item-has-sections': hasSectionMenu(pageSections) }]}>
 							<a href={pageHref(page)} aria-current={isCurrentPage(page) ? 'page' : undefined}>
 								{page.navigation.label}
 							</a>
+							{hasSectionMenu(pageSections) && (
+								<div class="site-nav-submenu">
+									<nav aria-label={`${page.navigation.label} ${projectConfig.locale.labels.pageNavigation}`}>
+										<ul>
+											{pageSections.map((section) => (
+												<li>
+													<a href={sectionHref(page, section)}>{section.title}</a>
+												</li>
+											))}
+										</ul>
+									</nav>
+								</div>
+							)}
 						</li>
 					))}
 				</ul>
@@ -64,7 +89,7 @@ const pageHref = (page: SitePage) => withBasePath(projectConfig.site.basePath, p
 					<nav class="mobile-site-nav" aria-label={projectConfig.locale.labels.siteNavigation}>
 						<h2>{projectConfig.locale.labels.siteNavigation}</h2>
 						<ul>
-							{pages.map((page) => (
+							{pageNavigation.map(({ page }) => (
 								<li>
 									<a href={pageHref(page)} aria-current={isCurrentPage(page) ? 'page' : undefined}>
 										{page.navigation.label}
@@ -74,13 +99,13 @@ const pageHref = (page: SitePage) => withBasePath(projectConfig.site.basePath, p
 						</ul>
 					</nav>
 
-					{showPageNavigation && (
+					{currentPageNavigation && hasSectionMenu(currentPageNavigation.sections) && (
 						<nav class="mobile-page-nav" aria-label={projectConfig.locale.labels.pageNavigation}>
 							<h2>{projectConfig.locale.labels.pageNavigation}</h2>
 							<ul>
-								{sections.map((section, index) => (
+								{currentPageNavigation.sections.map((section, index) => (
 									<li>
-										<a href={`#${section.id}`} aria-current={index === 0 ? 'true' : undefined}>
+										<a href={sectionHref(currentPage, section)} aria-current={index === 0 ? 'true' : undefined}>
 											{section.title}
 										</a>
 									</li>
@@ -93,25 +118,12 @@ const pageHref = (page: SitePage) => withBasePath(projectConfig.site.basePath, p
 		</div>
 	)}
 
-	{showPageNavigation && (
-		<nav class="page-nav" aria-label={projectConfig.locale.labels.pageNavigation}>
-			<ul>
-				{sections.map((section, index) => (
-					<li>
-						<a href={`#${section.id}`} aria-current={index === 0 ? 'true' : undefined}>
-							{section.title}
-						</a>
-					</li>
-				))}
-			</ul>
-		</nav>
-	)}
 </header>
 
 <script>
 	const siteTop = document.querySelector('.site-top');
 	const sections = Array.from(document.querySelectorAll('.site-section'));
-	const links = Array.from(document.querySelectorAll('.page-nav a, .mobile-page-nav a'));
+	const links = Array.from(document.querySelectorAll('.site-nav-submenu a, .mobile-page-nav a'));
 	const mobileMenu = document.querySelector('.mobile-nav-menu');
 	const smoothScrollConfig = JSON.parse(siteTop?.getAttribute('data-smooth-scroll') ?? '{}');
 	const anchorPadding = 0;
@@ -159,7 +171,9 @@ const pageHref = (page: SitePage) => withBasePath(projectConfig.site.basePath, p
 		activeSectionId = section.id;
 
 		links.forEach((link) => {
-			const isActive = link.getAttribute('href') === `#${section.id}`;
+			const linkUrl = new URL(link.href, window.location.href);
+			const isCurrentPageLink = linkUrl.pathname === window.location.pathname;
+			const isActive = isCurrentPageLink && linkUrl.hash === `#${section.id}`;
 			if (isActive) {
 				link.setAttribute('aria-current', 'true');
 			} else {
@@ -372,7 +386,10 @@ const pageHref = (page: SitePage) => withBasePath(projectConfig.site.basePath, p
 
 	links.forEach((link) => {
 		link.addEventListener('click', (event) => {
-			const section = getSectionFromHash(link.hash);
+			const linkUrl = new URL(link.href, window.location.href);
+			if (linkUrl.pathname !== window.location.pathname) return;
+
+			const section = getSectionFromHash(linkUrl.hash);
 			if (!(section instanceof HTMLElement)) return;
 
 			const top = getSectionScrollTop(section);
@@ -380,7 +397,7 @@ const pageHref = (page: SitePage) => withBasePath(projectConfig.site.basePath, p
 
 			event.preventDefault();
 
-			const targetHash = `#${section.id}`;
+			const targetHash = linkUrl.hash;
 			const duration = getScrollDuration(top - window.scrollY);
 
 			setHash(targetHash);

package/src/components/SitePage.astro

@@ -3,12 +3,16 @@ import { getCollection, type CollectionEntry } from 'astro:content';
 import path from 'node:path';
 import BaseLayout from '../layouts/BaseLayout.astro';
 import SiteNavigation from './SiteNavigation.astro';
+import SiteBanners from './SiteBanners.astro';
 import SiteSection from './SiteSection.astro';
-import { getSectionsContent } from '../lib/sectionContent';
+import { getSectionNavigation, getSectionsContent } from '../lib/sectionContent';
+import { getRouteTheme } from '../lib/routeThemes';
 import { getNavigationPages, getSitePage, getSitePages } from '../lib/sitePages';
 import { getToday, isVisibleToday } from '../lib/visibility';
+import { getLogoAsset } from '../lib/sitePublicAssets';
 import { readSiteFile } from '../../scripts/lib/site-content.mjs';
 import { siteContentPath, siteRoutesDir } from '../../scripts/lib/site-paths.mjs';
+import { resolveThemeVisualConfig } from '../../scripts/lib/project-config.mjs';
 import { resolveFrameColors, resolvePagePresentation } from '../../scripts/lib/presentation.mjs';
 
 type SiteEntry = CollectionEntry<'site'>;
@@ -28,23 +32,55 @@ const pageContentPath = currentPage.routeDirectory
 	? path.join(siteRoutesDir, currentPage.routeDirectory, 'route-content.md')
 	: siteContentPath;
 const rawMarkdown = (await readSiteFile(pageContentPath, siteContentLabel)).body;
-const [theme] = await getCollection('theme');
+const [siteTheme] = await getCollection('theme');
+if (!siteTheme) {
+	throw new Error('site/theme.md is required. Add a root theme before building the site.');
+}
+const [sitewide] = await getCollection('sitewide');
+const sitewideData = sitewide?.data ?? {};
 const navigationPages = getNavigationPages(sitePages);
 const homePage = sitePages.find((page) => page.isHome) ?? currentPage;
-const themeData = theme?.data ?? {};
-const brandLabel = themeData.navigation?.brand ?? homePage.title;
-const pagePresentation = resolvePagePresentation(themeData, entry.data.presentation);
-const frameColors = resolveFrameColors({
-	theme: themeData,
-	pagePresentation,
-	pageFrame: entry.data.frame,
-});
+const siteThemeData = siteTheme.data;
+const routeTheme = await getRouteTheme(currentPage.routeDirectory);
+const themeData = routeTheme?.data ?? siteThemeData;
+const themeLabel = routeTheme
+	? `${siteDirectory || 'site'}/${routeTheme.id}`
+	: `${siteDirectory || 'site'}/theme.md`;
+const visualTheme = resolveThemeVisualConfig(themeData, themeLabel);
+const brandLabel = sitewideData.navigation?.brand ?? homePage.title;
+const logoAsset = getLogoAsset();
+const logoSettings = sitewideData.navigation?.logo;
+const logo = logoAsset
+	? {
+		src: logoAsset.href,
+		alt: logoSettings?.alt ?? brandLabel,
+		height: logoSettings?.height,
+	}
+	: undefined;
+const pagePresentation = resolvePagePresentation(themeData);
+const frameColors = resolveFrameColors({ theme: themeData });
 const sections = entry.data.sections;
 const siteHtml = entry.rendered?.html ?? '';
-const resolvedSections = getSectionsContent(siteHtml, rawMarkdown, sections, currentPage, pagePresentation.inlineStyles);
+const resolvedSections = await getSectionsContent(siteHtml, rawMarkdown, sections, currentPage);
 const today = getToday();
+const siteBanners = (sitewideData.banners ?? []).filter((banner) => isVisibleToday(banner.visible, today));
 const visibleSections = resolvedSections.filter((section) => isVisibleToday(section.visible, today));
 
+const getPageContent = async (page: SitePage) => {
+	if (page.pathname === currentPage.pathname) {
+		return visibleSections.map(({ id, title }) => ({ id, title }));
+	}
+
+	const pageSections = getSectionNavigation(page.entry.rendered?.html ?? '', page.entry.data.sections);
+
+	return pageSections.filter((section) => isVisibleToday(page.entry.data.sections[section.id]?.visible, today));
+};
+
+const pageNavigation = await Promise.all(navigationPages.map(async (page) => ({
+	page,
+	sections: await getPageContent(page),
+})));
+
 if (visibleSections.length === 0) {
 	throw new Error(`No sections are visible for ${today}. Check sections.<section-id>.visible in ${siteContentLabel}.`);
 }
@@ -53,22 +89,28 @@ if (visibleSections.length === 0) {
 <BaseLayout
 	title={entry.data.title}
 	description={entry.data.description}
+	presentation={pagePresentation}
+	visualTheme={visualTheme}
 	frameColors={frameColors}
 	pathname={currentPage.pathname}
+	footer={sitewideData.footer}
 >
 	<SiteNavigation
 		brandLabel={brandLabel}
+		logo={logo}
 		currentPage={currentPage}
-		pages={navigationPages}
-		sections={visibleSections}
+		pageNavigation={pageNavigation}
 		frameColors={frameColors}
 	/>
+	<SiteBanners banners={siteBanners} />
 
 	<main id="main-content" class="site-content">
 		{visibleSections.map((section, index) => (
 			<SiteSection
 				section={section}
 				pagePresentation={pagePresentation}
+				visualTheme={visualTheme}
+				sectionIndex={index}
 				headingLevel={index === 0 ? 1 : 2}
 				priorityGalleryImage={index === 0}
 			/>