@janga/norna 0.7.0

package/src/components/GalleryGrid.astro

@@ -0,0 +1,221 @@
+---
+import type { CollectionEntry } from 'astro:content';
+import projectConfig from '../../scripts/lib/project-config.mjs';
+import { getGeneratedImage, getImageAttributes } from '../lib/generatedImages';
+
+type SiteSection = CollectionEntry<'site'>['data']['sections'][number];
+type GalleryItem = SiteSection['gallery'][number];
+type GalleryImage = Extract<GalleryItem, { image: string }>;
+
+interface Props {
+	title: string;
+	items: GalleryItem[];
+	priorityFirstImage?: boolean;
+}
+
+const { title, items, priorityFirstImage = false } = Astro.props;
+const galleryImageSizes = [
+	`(max-width: 700px) ${projectConfig.gallery.maxAvailableWidthPercent.mobile}vw`,
+	`${projectConfig.gallery.maxAvailableWidthPercent.desktop}vw`,
+].join(', ');
+const getImageClass = (image: GalleryImage) => {
+	const generatedImage = getGeneratedImage(image.image);
+	return generatedImage && generatedImage.width > generatedImage.height
+		? 'gallery-image-landscape'
+		: undefined;
+};
+const getImageLoadingProps = (isPriority: boolean) => ({
+	decoding: 'async' as const,
+	fetchpriority: isPriority ? 'high' as const : 'low' as const,
+	loading: isPriority ? 'eager' as const : 'lazy' as const,
+});
+const getCarouselAspectRatio = (images: GalleryImage[]) => {
+	const ratios = images
+		.map((image) => getGeneratedImage(image.image))
+		.filter((image): image is NonNullable<typeof image> => Boolean(image))
+		.map((image) => image.width / image.height);
+
+	return ratios.length > 0 ? Math.min(...ratios) : null;
+};
+---
+
+<div class="gallery" aria-label={`${projectConfig.locale.labels.gallery}: ${title}`}>
+	{items.map((item, itemIndex) => {
+		const isPriorityItem = priorityFirstImage && itemIndex === 0;
+
+		if ('image' in item) {
+			return (
+				<figure class="gallery-item">
+					<div class="gallery-image-frame">
+						<img
+							{...getImageAttributes(item.image, galleryImageSizes)}
+							class:list={['gallery-image', getImageClass(item)]}
+							alt={item.alt}
+							{...getImageLoadingProps(isPriorityItem)}
+						/>
+					</div>
+					{item.caption && (
+						<figcaption class="gallery-meta">
+							<div class="gallery-details">
+								<span>{item.caption}</span>
+							</div>
+						</figcaption>
+					)}
+				</figure>
+			);
+		}
+
+		const carouselAspectRatio = getCarouselAspectRatio(item.carousel);
+		const carouselStyle = carouselAspectRatio
+			? `--gallery-carousel-aspect-ratio: ${carouselAspectRatio}`
+			: undefined;
+
+		return (
+			<section
+				class="gallery-item gallery-carousel"
+				data-carousel
+				tabindex="0"
+				role="group"
+				aria-roledescription="carousel"
+				aria-label={`${title}, bildkarusell`}
+				style={carouselStyle}
+			>
+				<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.image, galleryImageSizes)}
+											class:list={['gallery-image', getImageClass(image)]}
+											alt={image.alt}
+											{...getImageLoadingProps(isPriorityItem && imageIndex === 0)}
+										/>
+									</div>
+								</figure>
+							))}
+						</div>
+					</div>
+					<button
+						class="gallery-carousel-button gallery-carousel-button-previous"
+						type="button"
+						data-carousel-previous
+						aria-label="Föregående bild"
+						title="Föregående bild"
+					>
+						<span aria-hidden="true">‹</span>
+					</button>
+					<button
+						class="gallery-carousel-button gallery-carousel-button-next"
+						type="button"
+						data-carousel-next
+						aria-label="Nästa bild"
+						title="Nästa bild"
+					>
+						<span aria-hidden="true">›</span>
+					</button>
+					<output class="gallery-carousel-position" data-carousel-position aria-live="polite">
+						1 / {item.carousel.length}
+					</output>
+				</div>
+				<div class="gallery-carousel-captions" data-carousel-captions>
+					{item.carousel.map((image, imageIndex) => (
+						image.caption && (
+							<p
+								class="gallery-meta gallery-carousel-caption"
+								data-carousel-caption
+								data-carousel-caption-index={imageIndex}
+							>
+								<span class="gallery-details">
+									<span>{image.caption}</span>
+								</span>
+							</p>
+						)
+					))}
+				</div>
+			</section>
+		);
+	})}
+</div>
+
+<script>
+	import EmblaCarousel from 'embla-carousel';
+
+	const carouselSelector = '[data-carousel]';
+
+	const initializeCarousel = (carousel: HTMLElement) => {
+		const viewport = carousel.querySelector<HTMLElement>('[data-carousel-viewport]');
+		const previous = carousel.querySelector<HTMLButtonElement>('[data-carousel-previous]');
+		const next = carousel.querySelector<HTMLButtonElement>('[data-carousel-next]');
+		const position = carousel.querySelector<HTMLOutputElement>('[data-carousel-position]');
+		const captions = Array.from(carousel.querySelectorAll<HTMLElement>('[data-carousel-caption]'));
+		const slides = Array.from(carousel.querySelectorAll<HTMLElement>('[data-carousel-slide]'));
+		if (!viewport || !previous || !next || !position || slides.length < 2) return;
+
+		let controlsTimeout: number | undefined;
+		const showControls = () => {
+			carousel.classList.add('is-interacting');
+			window.clearTimeout(controlsTimeout);
+			controlsTimeout = window.setTimeout(() => {
+				carousel.classList.remove('is-interacting');
+			}, 1600);
+		};
+
+		carousel.dataset.carouselReady = 'true';
+
+		const embla = EmblaCarousel(viewport, {
+			align: 'start',
+			containScroll: false,
+			loop: true,
+		});
+
+		const update = () => {
+			const activeIndex = embla.selectedScrollSnap();
+			slides.forEach((slide, index) => {
+				const isSelected = index === activeIndex;
+				slide.classList.toggle('is-active', isSelected);
+				slide.setAttribute('aria-hidden', String(!isSelected));
+			});
+			captions.forEach((caption) => {
+				const isSelected = Number(caption.dataset.carouselCaptionIndex) === activeIndex;
+				caption.classList.toggle('is-active', isSelected);
+				caption.setAttribute('aria-hidden', String(!isSelected));
+			});
+			previous.disabled = false;
+			next.disabled = false;
+			position.textContent = `${activeIndex + 1} / ${slides.length}`;
+		};
+
+		previous.addEventListener('click', () => {
+			showControls();
+			embla.scrollPrev();
+		});
+		next.addEventListener('click', () => {
+			showControls();
+			embla.scrollNext();
+		});
+		carousel.addEventListener('focusin', showControls);
+		carousel.addEventListener('pointerdown', showControls);
+		carousel.addEventListener('keydown', (event) => {
+			if (event.key === 'ArrowLeft') {
+				event.preventDefault();
+				showControls();
+				embla.scrollPrev();
+			}
+			if (event.key === 'ArrowRight') {
+				event.preventDefault();
+				showControls();
+				embla.scrollNext();
+			}
+		});
+		embla.on('select', () => {
+			showControls();
+			update();
+		});
+		embla.on('reInit', update);
+		update();
+	};
+
+	document.querySelectorAll<HTMLElement>(carouselSelector).forEach(initializeCarousel);
+</script>

package/src/components/SiteNavigation.astro

@@ -0,0 +1,410 @@
+---
+import type { CollectionEntry } from 'astro:content';
+import projectConfig from '../../scripts/lib/project-config.mjs';
+import type { SitePage } from '../lib/sitePages';
+
+type SiteSection = CollectionEntry<'site'>['data']['sections'][number];
+type ResolvedSection = SiteSection & { title: string };
+type FrameColors = {
+	backgroundColor: string;
+	textColor: string;
+};
+
+interface Props {
+	currentPage: SitePage;
+	pages: SitePage[];
+	sections: ResolvedSection[];
+	frameColors: FrameColors;
+}
+
+const { currentPage, pages, sections, frameColors } = Astro.props;
+const smoothScrollConfig = projectConfig.navigation.smoothScroll;
+const navigationStyle = [
+	`--site-top-background-color: ${frameColors.backgroundColor}`,
+	`--site-top-text-color: ${frameColors.textColor}`,
+].join('; ');
+const showSiteNavigation = pages.length > 1;
+const showPageNavigation = sections.length > 1;
+const homePage = pages.find((page) => page.isHome) ?? currentPage;
+const brandLabel = homePage.title;
+const isCurrentPage = (page: SitePage) => page.pathname === currentPage.pathname;
+---
+
+<a class="skip-link" href="#main-content">{projectConfig.locale.labels.skipToContent}</a>
+
+<header
+	class:list={['site-top', { 'site-top-has-site-nav': showSiteNavigation }]}
+	data-smooth-scroll={JSON.stringify(smoothScrollConfig)}
+	style={navigationStyle}
+>
+	{showSiteNavigation && (
+		<div class="site-nav-row">
+			<a class="site-brand" href={homePage.pathname}>{brandLabel}</a>
+
+			<nav class="site-nav" aria-label={projectConfig.locale.labels.siteNavigation}>
+				<ul>
+					{pages.map((page) => (
+						<li>
+							<a href={page.pathname} aria-current={isCurrentPage(page) ? 'page' : undefined}>
+								{page.navigation.label}
+							</a>
+						</li>
+					))}
+				</ul>
+			</nav>
+
+			<details class="mobile-nav-menu">
+				<summary>
+					<span>{currentPage.navigation.label}</span>
+				</summary>
+				<div class="mobile-nav-panel">
+					<nav class="mobile-site-nav" aria-label={projectConfig.locale.labels.siteNavigation}>
+						<h2>{projectConfig.locale.labels.siteNavigation}</h2>
+						<ul>
+							{pages.map((page) => (
+								<li>
+									<a href={page.pathname} aria-current={isCurrentPage(page) ? 'page' : undefined}>
+										{page.navigation.label}
+									</a>
+								</li>
+							))}
+						</ul>
+					</nav>
+
+					{showPageNavigation && (
+						<nav class="mobile-page-nav" aria-label={projectConfig.locale.labels.pageNavigation}>
+							<h2>{projectConfig.locale.labels.pageNavigation}</h2>
+							<ul>
+								{sections.map((section, index) => (
+									<li>
+										<a href={`#${section.id}`} aria-current={index === 0 ? 'true' : undefined}>
+											{section.title}
+										</a>
+									</li>
+								))}
+							</ul>
+						</nav>
+					)}
+				</div>
+			</details>
+		</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 mobileMenu = document.querySelector('.mobile-nav-menu');
+	const smoothScrollConfig = JSON.parse(siteTop?.getAttribute('data-smooth-scroll') ?? '{}');
+	const anchorPadding = 0;
+	const anchorCorrectionDelays = [120, 320, 700, 1_000, 2_000];
+	const reduceMotionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+	const minimumScrollDuration = smoothScrollConfig.minimumDurationMs;
+	const maximumScrollDuration = smoothScrollConfig.maximumDurationMs;
+	const scrollDurationPerPixel = smoothScrollConfig.durationPerPixelMs;
+	const scrollInterruptEvents = ['wheel', 'touchstart'];
+	const scrollInterruptKeys = new Set(['ArrowDown', 'ArrowUp', 'End', 'Home', 'PageDown', 'PageUp', ' ']);
+	let activeScrollAnimation = null;
+	let activeSectionId = null;
+	let anchorCorrectionToken = 0;
+
+	if ('scrollRestoration' in history) {
+		history.scrollRestoration = 'manual';
+	}
+
+	const setAnchorOffset = () => {
+		if (!(siteTop instanceof HTMLElement)) return;
+
+		const offset = Math.ceil(siteTop.getBoundingClientRect().height + anchorPadding);
+		document.documentElement.style.setProperty('--site-top-anchor-offset', `${offset}px`);
+		return offset;
+	};
+
+	const getSectionFromHash = (hash) => {
+		const id = hash.replace(/^#/, '');
+		return sections.find((section) => section.id === id);
+	};
+
+	const getSectionHeading = (section) => section?.querySelector('h1, h2');
+
+	const cancelActiveScroll = () => {
+		if (activeScrollAnimation) {
+			activeScrollAnimation.cancel();
+			activeScrollAnimation = null;
+		}
+	};
+
+	const setActiveSection = (section) => {
+		if (!section) return;
+		if (activeSectionId === section.id) return;
+
+		activeSectionId = section.id;
+
+		links.forEach((link) => {
+			const isActive = link.getAttribute('href') === `#${section.id}`;
+			if (isActive) {
+				link.setAttribute('aria-current', 'true');
+			} else {
+				link.removeAttribute('aria-current');
+			}
+		});
+	};
+
+	const getHashSection = () => getSectionFromHash(window.location.hash);
+
+	const setHash = (targetHash) => {
+		if (window.location.hash !== targetHash) {
+			history.pushState(null, '', targetHash);
+		}
+	};
+
+	const closeMobileMenu = () => {
+		if (mobileMenu instanceof HTMLDetailsElement) {
+			mobileMenu.open = false;
+		}
+	};
+
+	const getSectionScrollTop = (section) => {
+		if (!(section instanceof HTMLElement)) return;
+		const heading = getSectionHeading(section);
+		if (!(heading instanceof HTMLElement)) return;
+
+		const offset = setAnchorOffset();
+		if (!offset) return;
+
+		return Math.max(0, heading.getBoundingClientRect().top + window.scrollY - offset);
+	};
+
+	const jumpTo = (top) => {
+		cancelActiveScroll();
+
+		const root = document.documentElement;
+		const previousScrollBehavior = root.style.scrollBehavior;
+		root.style.scrollBehavior = 'auto';
+		window.scrollTo(0, top);
+		root.style.scrollBehavior = previousScrollBehavior;
+	};
+
+	const getScrollDuration = (distance) => {
+		const distancePx = Math.abs(distance);
+
+		if (!smoothScrollConfig.enabled || reduceMotionQuery.matches || distancePx <= anchorPadding) return 0;
+
+		return Math.min(
+			maximumScrollDuration,
+			Math.max(minimumScrollDuration, distancePx * scrollDurationPerPixel),
+		);
+	};
+
+	const easeInOutCubic = (progress) => (
+		progress < 0.5
+			? 4 * progress * progress * progress
+			: 1 - Math.pow(-2 * progress + 2, 3) / 2
+	);
+
+	const animateScrollTo = (
+		target,
+		{ duration, onComplete } = {},
+	) => {
+		cancelActiveScroll();
+
+		const getTop = typeof target === 'function' ? target : () => target;
+		let latestTop = getTop();
+		if (latestTop === undefined) return 0;
+
+		const startY = window.scrollY;
+		const distance = latestTop - startY;
+		const scrollDuration = duration ?? getScrollDuration(distance);
+
+		if (scrollDuration <= 0) {
+			const top = getTop();
+			if (top === undefined) return 0;
+
+			jumpTo(top);
+			onComplete?.();
+			return 0;
+		}
+
+		const root = document.documentElement;
+		const previousScrollBehavior = root.style.scrollBehavior;
+		const startedAt = performance.now();
+		let frameId = 0;
+
+		const state = {
+			cancel: () => {},
+		};
+
+		const cleanup = () => {
+			scrollInterruptEvents.forEach((eventName) => {
+				window.removeEventListener(eventName, interruptScroll);
+			});
+			window.removeEventListener('keydown', interruptScrollKey);
+			root.style.scrollBehavior = previousScrollBehavior;
+
+			if (activeScrollAnimation === state) {
+				activeScrollAnimation = null;
+			}
+		};
+
+		const cancel = () => {
+			if (frameId) {
+				cancelAnimationFrame(frameId);
+			}
+
+			cleanup();
+		};
+
+		const interruptScroll = () => cancel();
+		const interruptScrollKey = (event) => {
+			if (scrollInterruptKeys.has(event.key)) {
+				interruptScroll();
+			}
+		};
+
+		const step = (now) => {
+			const elapsed = now - startedAt;
+			const progress = Math.min(1, elapsed / scrollDuration);
+			const top = getTop();
+			if (top !== undefined) {
+				latestTop = top;
+			}
+
+			const nextY = startY + (latestTop - startY) * easeInOutCubic(progress);
+
+			window.scrollTo(0, nextY);
+
+			if (progress >= 1) {
+				window.scrollTo(0, latestTop);
+				cleanup();
+				onComplete?.();
+				return;
+			}
+
+			frameId = requestAnimationFrame(step);
+		};
+
+		state.cancel = cancel;
+		activeScrollAnimation = state;
+		root.style.scrollBehavior = 'auto';
+		scrollInterruptEvents.forEach((eventName) => {
+			window.addEventListener(eventName, interruptScroll, { passive: true });
+		});
+		window.addEventListener('keydown', interruptScrollKey);
+		frameId = requestAnimationFrame(step);
+
+		return scrollDuration;
+	};
+
+	const scrollToSection = (section, { behavior = 'smooth', duration, onComplete } = {}) => {
+		const top = getSectionScrollTop(section);
+		if (top === undefined) return 0;
+
+		const scrollDuration = behavior === 'smooth'
+			? animateScrollTo(() => getSectionScrollTop(section), { duration, onComplete })
+			: (jumpTo(top), onComplete?.(), 0);
+
+		setActiveSection(section);
+
+		return scrollDuration;
+	};
+
+	const updateAnchorOffset = () => {
+		setAnchorOffset();
+	};
+
+	const correctCurrentHashAnchor = () => {
+		if (activeScrollAnimation) return;
+
+		const section = getHashSection();
+		if (section instanceof HTMLElement) {
+			scrollToSection(section, { behavior: 'auto' });
+		}
+	};
+
+	const scheduleHashAnchorCorrection = () => {
+		if (!window.location.hash) return;
+
+		anchorCorrectionToken += 1;
+		const token = anchorCorrectionToken;
+
+		anchorCorrectionDelays.forEach((delay) => {
+			window.setTimeout(() => {
+				if (token === anchorCorrectionToken) {
+					requestAnimationFrame(correctCurrentHashAnchor);
+				}
+			}, delay);
+		});
+	};
+
+	const syncToLocation = ({ behavior = 'auto', scrollHashlessTop = false } = {}) => {
+		const section = getHashSection();
+
+		if (section instanceof HTMLElement) {
+			scrollToSection(section, { behavior });
+			scheduleHashAnchorCorrection();
+			return;
+		}
+
+		if (scrollHashlessTop) {
+			jumpTo(0);
+		}
+
+		setActiveSection(sections[0]);
+	};
+
+	links.forEach((link) => {
+		link.addEventListener('click', (event) => {
+			const section = getSectionFromHash(link.hash);
+			if (!(section instanceof HTMLElement)) return;
+
+			const top = getSectionScrollTop(section);
+			if (top === undefined) return;
+
+			event.preventDefault();
+
+			const targetHash = `#${section.id}`;
+			const duration = getScrollDuration(top - window.scrollY);
+
+			setHash(targetHash);
+			setActiveSection(section);
+			closeMobileMenu();
+
+			scrollToSection(section, {
+				behavior: 'smooth',
+				duration,
+				onComplete: scheduleHashAnchorCorrection,
+			});
+		});
+	});
+
+	updateAnchorOffset();
+	requestAnimationFrame(() => syncToLocation({ behavior: 'auto' }));
+
+	if (siteTop instanceof HTMLElement && 'ResizeObserver' in window) {
+		new ResizeObserver(updateAnchorOffset).observe(siteTop);
+	}
+
+	window.addEventListener('resize', updateAnchorOffset);
+	window.addEventListener('load', scheduleHashAnchorCorrection);
+	window.addEventListener('hashchange', () => syncToLocation({ behavior: 'auto', scrollHashlessTop: true }));
+	window.addEventListener('popstate', () => syncToLocation({ behavior: 'auto', scrollHashlessTop: true }));
+
+	if (window.visualViewport) {
+		window.visualViewport.addEventListener('resize', updateAnchorOffset);
+	}
+</script>

package/src/components/SitePage.astro

@@ -0,0 +1,69 @@
+---
+import { getCollection, type CollectionEntry } from 'astro:content';
+import BaseLayout from '../layouts/BaseLayout.astro';
+import SiteNavigation from './SiteNavigation.astro';
+import SiteSection from './SiteSection.astro';
+import { getSectionsContent } from '../lib/sectionContent';
+import { getNavigationPages, getSitePage, getSitePages } from '../lib/sitePages';
+import { getToday, isVisibleToday } from '../lib/visibility';
+import { resolveFrameColors, resolvePagePresentation } from '../../scripts/lib/presentation.mjs';
+
+type SiteEntry = CollectionEntry<'site'>;
+
+interface Props {
+	entry: SiteEntry;
+}
+
+const { entry } = Astro.props;
+const siteDirectory = (process.env.NORNA_SITE_DIR ?? 'site').trim();
+const siteContentLabel = entry.id.includes('-route-')
+	? `${siteDirectory || 'site'}/routes/${entry.id.split('-route-').at(-1)}/route-content.md`
+	: `${siteDirectory || 'site'}/content.md`;
+const [theme] = await getCollection('theme');
+const allEntries = await getCollection('site');
+const sitePages = getSitePages(allEntries);
+const currentPage = getSitePage(entry);
+const navigationPages = getNavigationPages(sitePages);
+const themeData = theme?.data ?? {};
+const pagePresentation = resolvePagePresentation(themeData.presentation, entry.data.presentation);
+const frameColors = resolveFrameColors({
+	themePresentation: themeData.presentation,
+	themeFrame: themeData.frame,
+	pagePresentation,
+	pageFrame: entry.data.frame,
+});
+const sections = entry.data.sections;
+const siteHtml = entry.rendered?.html ?? '';
+const resolvedSections = getSectionsContent(siteHtml, sections, pagePresentation.inlineStyles);
+const today = getToday();
+const visibleSections = resolvedSections.filter((section) => isVisibleToday(section.visible, today));
+
+if (visibleSections.length === 0) {
+	throw new Error(`No sections are visible for ${today}. Check sections[].visible in ${siteContentLabel}.`);
+}
+---
+
+<BaseLayout
+	title={entry.data.title}
+	description={entry.data.description}
+	frameColors={frameColors}
+	pathname={currentPage.pathname}
+>
+	<SiteNavigation
+		currentPage={currentPage}
+		pages={navigationPages}
+		sections={visibleSections}
+		frameColors={frameColors}
+	/>
+
+	<main id="main-content" class="site-content">
+		{visibleSections.map((section, index) => (
+			<SiteSection
+				section={section}
+				pagePresentation={pagePresentation}
+				headingLevel={index === 0 ? 1 : 2}
+				priorityGalleryImage={index === 0}
+			/>
+		))}
+	</main>
+</BaseLayout>