@janga/norna 0.7.11 → 0.7.12

package/src/components/SiteNavigation.astro

@@ -3,6 +3,8 @@ import projectConfig from '../../scripts/lib/project-config.mjs';
 import { withBasePath } from '../lib/basePath';
 import type { SectionNavigation } from '../lib/sectionContent';
 import type { SitePage } from '../lib/sitePages';
+import MobileSectionNavigationScript from './MobileSectionNavigationScript.astro';
+import NornaSmoothScrollScript from './NornaSmoothScrollScript.astro';
 
 type FrameColors = {
 	backgroundColor: string;
@@ -25,7 +27,6 @@ interface Props {
 }
 
 const { brandLabel, logo, currentPage, pageNavigation, frameColors } = Astro.props;
-const smoothScrollConfig = projectConfig.navigation.smoothScroll;
 const siteTopBackgroundColor = frameColors.backgroundColor === 'transparent'
 	? 'var(--color-page)'
 	: frameColors.backgroundColor;
@@ -35,53 +36,62 @@ const navigationStyle = [
 	...(logo?.height ? [`--site-brand-logo-height: ${logo.height}`] : []),
 ].join('; ');
 const showSiteNavigation = pageNavigation.length > 1;
+const showNavigationRow = showSiteNavigation || Boolean(logo);
 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;
+const showSinglePageSectionNavigation = Boolean(
+	!showSiteNavigation && currentPageNavigation && hasSectionMenu(currentPageNavigation.sections),
+);
+const hasCurrentPageSectionMenu = Boolean(
+	showSiteNavigation && currentPageNavigation && hasSectionMenu(currentPageNavigation.sections),
+);
+const useNornaSmoothScroll = projectConfig.navigation.scrollBehavior === 'norna-smooth';
 ---
 
 <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 && (
+	{showNavigationRow && (
 		<div class="site-nav-row">
 			<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>
-					{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>
-			</nav>
-
-			<details class="mobile-nav-menu">
+			{showSiteNavigation && (
+				<nav class="site-nav" aria-label={projectConfig.locale.labels.siteNavigation}>
+					<ul>
+						{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>
+				</nav>
+			)}
+
+			{showSiteNavigation && <details class="mobile-nav-menu">
 				<summary>
 					<span>{currentPage.navigation.label}</span>
 				</summary>
@@ -99,13 +109,13 @@ const hasSectionMenu = (pageSections: SectionNavigation[]) => pageSections.lengt
 						</ul>
 					</nav>
 
-					{currentPageNavigation && hasSectionMenu(currentPageNavigation.sections) && (
+					{currentPageNavigation && hasCurrentPageSectionMenu && (
 						<nav class="mobile-page-nav" aria-label={projectConfig.locale.labels.pageNavigation}>
 							<h2>{projectConfig.locale.labels.pageNavigation}</h2>
 							<ul>
-								{currentPageNavigation.sections.map((section, index) => (
+								{currentPageNavigation.sections.map((section) => (
 									<li>
-										<a href={sectionHref(currentPage, section)} aria-current={index === 0 ? 'true' : undefined}>
+										<a href={sectionHref(currentPage, section)}>
 											{section.title}
 										</a>
 									</li>
@@ -114,317 +124,24 @@ const hasSectionMenu = (pageSections: SectionNavigation[]) => pageSections.lengt
 						</nav>
 					)}
 				</div>
-			</details>
+			</details>}
 		</div>
 	)}
 
-</header>
-
-<script>
-	const siteTop = document.querySelector('.site-top');
-	const sections = Array.from(document.querySelectorAll('.site-section'));
-	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;
-	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 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 {
-				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 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);
-			if (top === undefined) return;
-
-			event.preventDefault();
-
-			const targetHash = linkUrl.hash;
-			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);
-	}
+	{showSinglePageSectionNavigation && currentPageNavigation && (
+		<nav class="page-nav" aria-label={projectConfig.locale.labels.pageNavigation}>
+			<ul>
+				{currentPageNavigation.sections.map((section) => (
+					<li>
+						<a href={`#${section.id}`}>{section.title}</a>
+					</li>
+				))}
+			</ul>
+		</nav>
+	)}
 
-	window.addEventListener('resize', updateAnchorOffset);
-	window.addEventListener('load', scheduleHashAnchorCorrection);
-	window.addEventListener('hashchange', () => syncToLocation({ behavior: 'auto', scrollHashlessTop: true }));
-	window.addEventListener('popstate', () => syncToLocation({ behavior: 'auto', scrollHashlessTop: true }));
+</header>
 
-	if (window.visualViewport) {
-		window.visualViewport.addEventListener('resize', updateAnchorOffset);
-	}
-</script>
+{useNornaSmoothScroll
+	? <NornaSmoothScrollScript />
+	: hasCurrentPageSectionMenu && <MobileSectionNavigationScript />}

package/src/components/SiteNotesScript.astro

@@ -0,0 +1,43 @@
+<script>
+	const noteParts = Array.from(document.querySelectorAll<HTMLElement>('[data-note-id]'));
+	const noteReferences = noteParts.filter((part) => part.matches('.section-note-ref a'));
+	const marginNotes = noteParts.filter((part) => part.matches('.section-note'));
+
+	const setNoteState = (noteId: string, active: boolean) => {
+		noteParts
+			.filter((part) => part.dataset.noteId === noteId)
+			.forEach((part) => part.classList.toggle('is-referenced', active));
+	};
+
+	noteParts.forEach((part) => {
+		const noteId = part.dataset.noteId;
+		if (!noteId) return;
+
+		part.addEventListener('pointerenter', () => setNoteState(noteId, true));
+		part.addEventListener('pointerleave', () => setNoteState(noteId, false));
+		part.addEventListener('focusin', () => setNoteState(noteId, true));
+		part.addEventListener('focusout', () => setNoteState(noteId, false));
+	});
+
+	const alignMarginNotes = () => {
+		const wideLayout = window.matchMedia('(min-width: 1101px)').matches;
+		if (!wideLayout) {
+			marginNotes.forEach((note) => note.style.removeProperty('--section-note-offset'));
+			return;
+		}
+
+		marginNotes.forEach((note) => {
+			const noteId = note.dataset.noteId;
+			const reference = noteReferences.find((part) => part.dataset.noteId === noteId);
+			if (!noteId || !reference) return;
+
+			note.style.removeProperty('--section-note-offset');
+			const offset = reference.getBoundingClientRect().top - note.getBoundingClientRect().top;
+			note.style.setProperty('--section-note-offset', `${Math.max(0, offset)}px`);
+		});
+	};
+
+	alignMarginNotes();
+	window.addEventListener('resize', alignMarginNotes);
+	document.fonts?.ready.then(alignMarginNotes);
+</script>

package/src/components/SitePage.astro

@@ -4,6 +4,7 @@ import path from 'node:path';
 import BaseLayout from '../layouts/BaseLayout.astro';
 import SiteNavigation from './SiteNavigation.astro';
 import SiteBanners from './SiteBanners.astro';
+import SiteNotesScript from './SiteNotesScript.astro';
 import SiteSection from './SiteSection.astro';
 import { getSectionNavigation, getSectionsContent } from '../lib/sectionContent';
 import { getRouteTheme } from '../lib/routeThemes';
@@ -65,6 +66,7 @@ const resolvedSections = await getSectionsContent(siteHtml, rawMarkdown, section
 const today = getToday();
 const siteBanners = (sitewideData.banners ?? []).filter((banner) => isVisibleToday(banner.visible, today));
 const visibleSections = resolvedSections.filter((section) => isVisibleToday(section.visible, today));
+const hasMarginNotes = visibleSections.some((section) => section.contentBlocks.some((block) => block.type === 'note'));
 
 const getPageContent = async (page: SitePage) => {
 	if (page.pathname === currentPage.pathname) {
@@ -102,7 +104,7 @@ if (visibleSections.length === 0) {
 		pageNavigation={pageNavigation}
 		frameColors={frameColors}
 	/>
-	<SiteBanners banners={siteBanners} />
+	{siteBanners.length > 0 && <SiteBanners banners={siteBanners} />}
 
 	<main id="main-content" class="site-content">
 		{visibleSections.map((section, index) => (
@@ -116,4 +118,5 @@ if (visibleSections.length === 0) {
 			/>
 		))}
 	</main>
+	{hasMarginNotes && <SiteNotesScript />}
 </BaseLayout>

package/src/components/SiteSection.astro

@@ -3,6 +3,7 @@ import projectConfig from '../../scripts/lib/project-config.mjs';
 import { resolveSectionSurface } from '../../scripts/lib/presentation.mjs';
 import CardList from './CardList.astro';
 import GalleryGrid from './GalleryGrid.astro';
+import ImageCarousel from './ImageCarousel.astro';
 import type { ResolvedSection } from '../lib/sectionContent';
 
 type ResponsiveValue<T> = { desktop: T; mobile: T };
@@ -379,9 +380,9 @@ const sectionStyle = [
 				const block = group.block;
 				if (block.type === 'image-carousel') {
 					return (
-						<GalleryGrid
+						<ImageCarousel
 							title={section.title}
-							items={[{ carousel: block.images }]}
+							images={block.images}
 							maxAvailableWidthPercent={visualTheme.gallery.maxAvailableWidthPercent}
 							priorityFirstImage={priorityGalleryImage && groupIndex === 0}
 						/>
@@ -395,7 +396,7 @@ const sectionStyle = [
 				return (
 					<GalleryGrid
 						title={section.title}
-						items={block.images}
+						images={block.images}
 						maxAvailableWidthPercent={visualTheme.gallery.maxAvailableWidthPercent}
 						priorityFirstImage={priorityGalleryImage && groupIndex === 0}
 					/>
@@ -404,47 +405,3 @@ const sectionStyle = [
 		</div>
 	</div>
 </section>
-
-<script>
-	const noteParts = Array.from(document.querySelectorAll<HTMLElement>('[data-note-id]'));
-	const noteReferences = noteParts.filter((part) => part.matches('.section-note-ref a'));
-	const marginNotes = noteParts.filter((part) => part.matches('.section-note'));
-
-	const setNoteState = (noteId: string, active: boolean) => {
-		noteParts
-			.filter((part) => part.dataset.noteId === noteId)
-			.forEach((part) => part.classList.toggle('is-referenced', active));
-	};
-
-	noteParts.forEach((part) => {
-		const noteId = part.dataset.noteId;
-		if (!noteId) return;
-
-		part.addEventListener('pointerenter', () => setNoteState(noteId, true));
-		part.addEventListener('pointerleave', () => setNoteState(noteId, false));
-		part.addEventListener('focusin', () => setNoteState(noteId, true));
-		part.addEventListener('focusout', () => setNoteState(noteId, false));
-	});
-
-	const alignMarginNotes = () => {
-		const wideLayout = window.matchMedia('(min-width: 1101px)').matches;
-		if (!wideLayout) {
-			marginNotes.forEach((note) => note.style.removeProperty('--section-note-offset'));
-			return;
-		}
-
-		marginNotes.forEach((note) => {
-			const noteId = note.dataset.noteId;
-			const reference = noteReferences.find((part) => part.dataset.noteId === noteId);
-			if (!noteId || !reference) return;
-
-			note.style.removeProperty('--section-note-offset');
-			const offset = reference.getBoundingClientRect().top - note.getBoundingClientRect().top;
-			note.style.setProperty('--section-note-offset', `${Math.max(0, offset)}px`);
-		});
-	};
-
-	alignMarginNotes();
-	window.addEventListener('resize', alignMarginNotes);
-	document.fonts?.ready.then(alignMarginNotes);
-</script>

package/src/layouts/BaseLayout.astro

@@ -73,7 +73,7 @@ const {
 const documentTitle = title;
 const canonicalUrl = new URL(withBasePath(projectConfig.site.basePath, pathname), projectConfig.site.url).href;
 const iconLinks = getIconLinks();
-const scrollBehavior = projectConfig.navigation.smoothScroll.enabled ? 'smooth' : 'auto';
+const scrollBehavior = projectConfig.navigation.scrollBehavior === 'browser-smooth' ? 'smooth' : 'auto';
 const formatPercent = (value: number) => `${value}%`;
 const formatViewportHeightPercent = (value: number) => `${value}svh`;
 const layoutSpacing = visualTheme.layout.spacing;

package/src/lib/galleryImages.ts

@@ -0,0 +1,53 @@
+import { getGeneratedImage } from './generatedImages';
+
+export type GalleryImage = {
+	image: string;
+	src?: string;
+	alt?: string;
+	caption?: string;
+};
+
+type GeneratedImageWithDimensions = NonNullable<ReturnType<typeof getGeneratedImage>> & {
+	width: number;
+	height: number;
+};
+
+const hasDimensions = (image: ReturnType<typeof getGeneratedImage>): image is GeneratedImageWithDimensions => (
+	Boolean(image) && Number.isFinite(image.width) && Number.isFinite(image.height)
+);
+
+export 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}`;
+};
+
+export const getGalleryImageSizes = (maxAvailableWidthPercent: { desktop: number; mobile: number }) => [
+	`(max-width: 700px) ${maxAvailableWidthPercent.mobile}vw`,
+	`${maxAvailableWidthPercent.desktop}vw`,
+].join(', ');
+
+export const getImageClass = (image: GalleryImage) => {
+	const generatedImage = getGeneratedImage(image.src ?? image.image);
+	return hasDimensions(generatedImage) && generatedImage.width > generatedImage.height
+		? 'gallery-image-landscape'
+		: undefined;
+};
+
+export const getImageLoadingProps = (isPriority: boolean) => ({
+	decoding: 'async' as const,
+	fetchpriority: isPriority ? 'high' as const : 'low' as const,
+	loading: isPriority ? 'eager' as const : 'lazy' as const,
+});
+
+export const getCarouselAspectRatio = (images: GalleryImage[]) => {
+	const ratios = images
+		.map((image) => getGeneratedImage(image.src ?? image.image))
+		.filter(hasDimensions)
+		.map((image) => image.width / image.height);
+
+	return ratios.length > 0 ? Math.min(...ratios) : null;
+};