@janga/norna 0.7.18 → 0.7.23

package/src/components/CodeBlockCopyScript.astro

@@ -0,0 +1,92 @@
+---
+import { Check, Copy, X } from '@lucide/astro';
+import projectConfig from '../../scripts/lib/project-config.mjs';
+
+const labels = {
+	copy: projectConfig.locale.labels.copyCode,
+	copied: projectConfig.locale.labels.codeCopied,
+	failed: projectConfig.locale.labels.codeCopyFailed,
+};
+---
+
+<template data-code-copy-template>
+	<button class="code-block-copy" type="button" aria-label={labels.copy} title={labels.copy}>
+		<Copy aria-hidden="true" data-code-copy-icon="copy" size={18} stroke-width={2} />
+		<Check aria-hidden="true" data-code-copy-icon="copied" hidden size={18} stroke-width={2} />
+		<X aria-hidden="true" data-code-copy-icon="failed" hidden size={18} stroke-width={2} />
+		<span class="visually-hidden" aria-live="polite" data-code-copy-status></span>
+	</button>
+</template>
+
+<script is:inline define:vars={{ labels }}>
+	(() => {
+		const template = document.querySelector('[data-code-copy-template]');
+		if (!(template instanceof HTMLTemplateElement)) return;
+
+		const resetTimers = new WeakMap();
+		const copyText = async (text) => {
+			if (navigator.clipboard?.writeText) {
+				try {
+					await navigator.clipboard.writeText(text);
+					return;
+				} catch {}
+			}
+
+			const input = document.createElement('textarea');
+			input.value = text;
+			input.setAttribute('readonly', '');
+			input.style.cssText = 'position:fixed;inset:0 auto auto 0;opacity:0;pointer-events:none';
+			document.body.append(input);
+			input.select();
+			const copied = document.execCommand('copy');
+			input.remove();
+			if (!copied) throw new Error('The browser rejected the copy command.');
+		};
+
+		const showState = (button, state) => {
+			button.querySelectorAll('[data-code-copy-icon]').forEach((icon) => {
+				icon.hidden = icon.getAttribute('data-code-copy-icon') !== state;
+			});
+			const status = button.querySelector('[data-code-copy-status]');
+			if (status) status.textContent = state === 'copied' ? labels.copied : labels.failed;
+			button.dataset.copyState = state;
+
+			clearTimeout(resetTimers.get(button));
+			resetTimers.set(button, setTimeout(() => {
+				button.querySelectorAll('[data-code-copy-icon]').forEach((icon) => {
+					icon.hidden = icon.getAttribute('data-code-copy-icon') !== 'copy';
+				});
+				if (status) status.textContent = '';
+				delete button.dataset.copyState;
+			}, 2000));
+		};
+
+		document.querySelectorAll('#main-content .section-markdown pre > code').forEach((code) => {
+			const pre = code.parentElement;
+			if (!pre || pre.parentElement?.classList.contains('code-block')) return;
+
+			const wrapper = document.createElement('div');
+			wrapper.className = 'code-block';
+			pre.before(wrapper);
+			wrapper.append(pre);
+
+			const button = template.content.firstElementChild?.cloneNode(true);
+			if (!(button instanceof HTMLButtonElement)) return;
+			wrapper.append(button);
+			button.addEventListener('click', async () => {
+				if (button.dataset.copyBusy === 'true') return;
+				button.dataset.copyBusy = 'true';
+				try {
+					await copyText(code.textContent ?? '');
+					showState(button, 'copied');
+				} catch {
+					showState(button, 'failed');
+				} finally {
+					delete button.dataset.copyBusy;
+				}
+			});
+		});
+
+		template.remove();
+	})();
+</script>

package/src/components/DisplaySettings.astro

@@ -0,0 +1,107 @@
+---
+import projectConfig from '../../scripts/lib/project-config.mjs';
+
+type Appearance = 'system' | 'light' | 'dark';
+type ReadingWidth = 'narrow' | 'standard' | 'wide';
+
+interface Props {
+	controls: {
+		appearance: boolean;
+		readingWidth: boolean;
+		focusReading: boolean;
+	};
+	defaults: {
+		appearance: Appearance;
+		readingWidth: ReadingWidth;
+		focusReading: 'off' | 'on';
+	};
+}
+
+const { controls, defaults } = Astro.props;
+const labels = projectConfig.locale.labels;
+const appearanceOptions = [
+	{ value: 'system', label: labels.appearanceSystem },
+	{ value: 'light', label: labels.appearanceLight },
+	{ value: 'dark', label: labels.appearanceDark },
+] as const;
+const widthOptions = [
+	{ value: 'narrow', label: labels.readingWidthNarrow },
+	{ value: 'standard', label: labels.readingWidthStandard },
+	{ value: 'wide', label: labels.readingWidthWide },
+] as const;
+---
+
+<details class="display-settings" data-display-settings>
+	<summary aria-label={labels.displaySettings}>
+		<svg class="display-settings-trigger-icon" aria-hidden="true" viewBox="0 0 24 24">
+			<path d="M4 21v-7"></path>
+			<path d="M4 10V3"></path>
+			<path d="M12 21v-9"></path>
+			<path d="M12 8V3"></path>
+			<path d="M20 21v-5"></path>
+			<path d="M20 12V3"></path>
+			<path d="M1 14h6"></path>
+			<path d="M9 8h6"></path>
+			<path d="M17 16h6"></path>
+		</svg>
+		<span class="display-settings-focus-status" aria-hidden="true">{labels.focusReading}</span>
+	</summary>
+	<form class="display-settings-panel">
+		<p class="display-settings-title">{labels.displaySettings}</p>
+
+		{controls.appearance && (
+			<fieldset>
+				<legend>{labels.appearance}</legend>
+				<div class="display-settings-segmented">
+					{appearanceOptions.map((option) => (
+						<label>
+							<input
+								type="radio"
+								name="appearance"
+								value={option.value}
+								checked={defaults.appearance === option.value}
+								data-reader-appearance
+							/>
+							<span>{option.label}</span>
+						</label>
+					))}
+				</div>
+			</fieldset>
+		)}
+
+		{controls.readingWidth && (
+			<fieldset>
+				<legend>{labels.readingWidth}</legend>
+				<div class="display-settings-segmented">
+					{widthOptions.map((option) => (
+						<label>
+							<input
+								type="radio"
+								name="reading-width"
+								value={option.value}
+								checked={defaults.readingWidth === option.value}
+								data-reader-width
+							/>
+							<span>{option.label}</span>
+						</label>
+					))}
+				</div>
+			</fieldset>
+		)}
+
+		{controls.focusReading && (
+			<label class="display-settings-toggle">
+				<input
+					type="checkbox"
+					checked={defaults.focusReading === 'on'}
+					data-reader-focus
+				/>
+				<span>{labels.focusReading}</span>
+			</label>
+		)}
+
+		<button class="display-settings-reset" type="button" data-reader-reset>
+			{labels.resetDisplaySettings}
+		</button>
+	</form>
+</details>

package/src/components/ImageCarousel.astro

@@ -17,14 +17,32 @@ interface Props {
 		desktop: number;
 		mobile: number;
 	};
+	maxAvailableHeightPercent?: {
+		desktop: number;
+		mobile: number;
+	};
 	priorityFirstImage?: boolean;
 }
 
-const { title, images, maxAvailableWidthPercent, priorityFirstImage = false } = Astro.props;
+const {
+	title,
+	images,
+	maxAvailableWidthPercent,
+	maxAvailableHeightPercent,
+	priorityFirstImage = false,
+} = Astro.props;
 const managedImageSizes = getManagedImageSizes(maxAvailableWidthPercent);
 const carouselAspectRatio = getCarouselAspectRatio(images);
 const carouselStyle = carouselAspectRatio
-	? `--image-carousel-aspect-ratio: ${carouselAspectRatio}`
+	? [
+		`--image-carousel-aspect-ratio: ${carouselAspectRatio}`,
+		...(maxAvailableHeightPercent
+			? [
+				`--image-carousel-width-from-height-desktop: ${carouselAspectRatio * maxAvailableHeightPercent.desktop}svh`,
+				`--image-carousel-width-from-height-mobile: ${carouselAspectRatio * maxAvailableHeightPercent.mobile}svh`,
+			]
+			: []),
+	].join('; ')
 	: undefined;
 ---
 
@@ -35,7 +53,7 @@ const carouselStyle = carouselAspectRatio
 		tabindex="0"
 		role="group"
 		aria-roledescription="carousel"
-		aria-label={`${title}, bildkarusell`}
+		aria-label={`${title}, ${projectConfig.locale.labels.imageCarousel}`}
 		style={carouselStyle}
 	>
 		<div class="image-carousel-stage">
@@ -64,19 +82,23 @@ const carouselStyle = carouselAspectRatio
 				class="image-carousel-button image-carousel-button-previous"
 				type="button"
 				data-carousel-previous
-				aria-label="Föregående bild"
-				title="Föregående bild"
+				aria-label={projectConfig.locale.labels.previousImage}
+				title={projectConfig.locale.labels.previousImage}
 			>
-				<span aria-hidden="true">‹</span>
+				<svg aria-hidden="true" viewBox="0 0 24 24">
+					<path d="m15 18-6-6 6-6"></path>
+				</svg>
 			</button>
 			<button
 				class="image-carousel-button image-carousel-button-next"
 				type="button"
 				data-carousel-next
-				aria-label="Nästa bild"
-				title="Nästa bild"
+				aria-label={projectConfig.locale.labels.nextImage}
+				title={projectConfig.locale.labels.nextImage}
 			>
-				<span aria-hidden="true">›</span>
+				<svg aria-hidden="true" viewBox="0 0 24 24">
+					<path d="m9 18 6-6-6-6"></path>
+				</svg>
 			</button>
 			<output class="image-carousel-position" data-carousel-position aria-live="polite">
 				1 / {images.length}
@@ -132,6 +154,9 @@ const carouselStyle = carouselAspectRatio
 			containScroll: false,
 			loop: true,
 		});
+		const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
+		const scrollPrevious = () => embla.scrollPrev(reducedMotion.matches);
+		const scrollNext = () => embla.scrollNext(reducedMotion.matches);
 
 		const update = () => {
 			const activeIndex = embla.selectedScrollSnap();
@@ -152,11 +177,11 @@ const carouselStyle = carouselAspectRatio
 
 		previous.addEventListener('click', () => {
 			showControls();
-			embla.scrollPrev();
+			scrollPrevious();
 		});
 		next.addEventListener('click', () => {
 			showControls();
-			embla.scrollNext();
+			scrollNext();
 		});
 		carousel.addEventListener('focusin', showControls);
 		carousel.addEventListener('pointerdown', showControls);
@@ -164,12 +189,12 @@ const carouselStyle = carouselAspectRatio
 			if (event.key === 'ArrowLeft') {
 				event.preventDefault();
 				showControls();
-				embla.scrollPrev();
+				scrollPrevious();
 			}
 			if (event.key === 'ArrowRight') {
 				event.preventDefault();
 				showControls();
-				embla.scrollNext();
+				scrollNext();
 			}
 		});
 		embla.on('select', () => {

package/src/components/NavigationPageTree.astro

@@ -1,12 +1,12 @@
 ---
 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' | 'sidebar' | 'submenu';
 	integratePageSections?: boolean;
@@ -14,120 +14,135 @@ interface 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) => (
-	currentPage.pageDirectory === page.pageDirectory
-	|| currentPage.pageDirectory.startsWith(`${page.pageDirectory}/pages/`)
+const isCurrentBranch = (node: SiteNode) => (
+	currentPage.pageDirectory === node.pageDirectory
+	|| currentPage.pageDirectory.startsWith(`${node.pageDirectory}/pages/`)
 );
-const getBranchId = (page: SitePage) => [
+const getBranchId = (node: SiteNode) => [
 	'navigation',
 	variant,
-	page.pagePath || 'home',
+	node.pagePath || 'home',
 	'children',
 ].join('-').replace(/[^a-z0-9-]+/gi, '-');
-const hasPageSections = (node: PageNavigationNode) => node.headings.some((heading) => heading.depth === 2);
-const hasPageDisclosure = (node: PageNavigationNode) => hasBranch(node) || hasPageSections(node);
+const hasPageSections = (node: SiteNavigationNode) => (
+	node.node.kind === 'page' && node.headings.some((heading) => heading.depth === 2)
+);
+const hasPageDisclosure = (node: SiteNavigationNode) => hasBranch(node) || hasPageSections(node);
+const usesPageDisclosure = (node: SiteNavigationNode) => (
+	variant === 'sidebar'
+		? hasBranch(node)
+		: integratePageSections && hasPageDisclosure(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 !== 'submenu' && integratePageSections ? (
-				hasPageDisclosure(node) ? (
-					<details
-						class:list={['navigation-page-branch', 'navigation-page-disclosure', `navigation-page-disclosure-${variant}`]}
-						data-page-path={node.page.pagePath || '/'}
-						data-current-branch={isCurrentBranch(node.page) ? 'true' : undefined}
-						data-current-page={isCurrentPage(node.page) ? 'true' : undefined}
-						data-has-sections={hasPageSections(node) ? 'true' : undefined}
-						open={isCurrentBranch(node.page)}
+			{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)}
 					>
-						<summary
-							class="navigation-page-summary"
-							aria-controls={getBranchId(node.page)}
-						>
-							<span class="navigation-page-summary-title">{node.page.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.page)}
-							aria-current={isCurrentPage(node.page) ? 'page' : undefined}
-						>
-							{node.page.title}
-						</a>
-						<div id={getBranchId(node.page)} class="navigation-page-branch-content">
-							{hasPageSections(node) && (
-								<nav
-									class="navigation-page-sections"
-									aria-label={`${projectConfig.locale.labels.pageNavigation}: ${node.page.title}`}
-								>
-									<PageContentsLinks
-										headings={node.headings}
-										variant={variant === 'mobile' ? 'mobile' : 'desktop'}
-										pageHref={isCurrentPage(node.page) ? undefined : pageHref(node.page)}
-									/>
-								</nav>
-							)}
-							{hasBranch(node) && (
-								<Astro.self
-									nodes={node.children}
-									currentPage={currentPage}
-									variant={variant}
-									integratePageSections={integratePageSections}
-								/>
-							)}
-						</div>
-					</details>
-				) : (
+						<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' && usesPageDisclosure(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-link', { 'mobile-nav-destination': variant === 'mobile' }]}
-						href={pageHref(node.page)}
-						aria-current={isCurrentPage(node.page) ? 'page' : undefined}
+						class:list={['navigation-page-open-link', { 'mobile-nav-destination': variant === 'mobile' }]}
+						href={pageHref(node.node)}
+						aria-current={isCurrentPage(node.node) ? 'page' : undefined}
 					>
-						{node.page.title}
+						{node.node.title}
 					</a>
-				)
+					<div id={getBranchId(node.node)} class="navigation-page-branch-content">
+						{integratePageSections && 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>
 			) : 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.page.title}
+						{node.node.title}
 					</a>
-					{variant === 'sidebar' && isCurrentPage(node.page) && hasPageSections(node) && (
-						<nav
-							class="navigation-page-sections"
-							aria-label={`${projectConfig.locale.labels.pageNavigation}: ${node.page.title}`}
-						>
-							<PageContentsLinks
-								headings={node.headings}
-								variant="desktop"
-							/>
-						</nav>
-					)}
 					{hasBranch(node) && (
 						<details
 							class="navigation-page-branch"
-							data-page-path={node.page.pagePath || '/'}
-							data-current-branch={isCurrentBranch(node.page) ? 'true' : undefined}
-							open={isCurrentBranch(node.page)}
+							data-page-path={node.node.pagePath || '/'}
+							data-current-branch={isCurrentBranch(node.node) ? 'true' : undefined}
+							open={isCurrentBranch(node.node)}
 						>
-							<summary aria-controls={getBranchId(node.page)}>
+							<summary aria-controls={getBranchId(node.node)}>
 								<span class="visually-hidden">
-									{projectConfig.locale.labels.navigationChildren}: {node.page.title}
+									{projectConfig.locale.labels.navigationChildren}: {node.node.title}
 								</span>
 								<span aria-hidden="true"></span>
 							</summary>
-							<div id={getBranchId(node.page)} class="navigation-page-branch-content">
+							<div id={getBranchId(node.node)} class="navigation-page-branch-content">
 								<Astro.self
 									nodes={node.children}
 									currentPage={currentPage}
@@ -142,10 +157,10 @@ const hasPageDisclosure = (node: PageNavigationNode) => hasBranch(node) || hasPa
 				<>
 					<a
 						class="navigation-page-link"
-						href={pageHref(node.page)}
-						aria-current={isCurrentPage(node.page) ? 'page' : undefined}
+						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/PageAliasRedirect.astro

@@ -0,0 +1,49 @@
+---
+import projectConfig from '../../scripts/lib/project-config.mjs';
+import { getAbsolutePageUrl } from '../../scripts/lib/site-page-urls.mjs';
+import { withBasePath } from '../lib/basePath';
+
+interface Props {
+	targetPathname: string;
+	targetTitle: string;
+}
+
+const { targetPathname, targetTitle } = Astro.props;
+const { labels, lang } = projectConfig.locale;
+const targetHref = withBasePath(projectConfig.site.basePath, targetPathname);
+const canonicalUrl = getAbsolutePageUrl(projectConfig.site.url, targetPathname);
+---
+
+<!doctype html>
+<html lang={lang}>
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width" />
+		<meta name="robots" content="noindex, follow" />
+		<meta http-equiv="refresh" content={`0; url=${targetHref}`} />
+		<link rel="canonical" href={canonicalUrl} />
+		<title>{labels.pageMoved}: {targetTitle}</title>
+		<style is:inline>
+			:root {
+				color-scheme: light dark;
+				font-family: system-ui, sans-serif;
+			}
+
+			body {
+				margin: 0;
+				padding: 2rem;
+			}
+
+			main {
+				max-width: 42rem;
+				margin-inline: auto;
+			}
+		</style>
+	</head>
+	<body>
+		<main>
+			<h1>{labels.pageMoved}</h1>
+			<p>{labels.pageMovedText} <a href={targetHref}>{targetTitle}</a>.</p>
+		</main>
+	</body>
+</html>

package/src/components/PageContentsNavigation.astro

@@ -0,0 +1,21 @@
+---
+import projectConfig from '../../scripts/lib/project-config.mjs';
+import type { HeadingNavigation } from '../lib/sectionContent';
+import PageContentsLinks from './PageContentsLinks.astro';
+
+interface Props {
+	headings: HeadingNavigation[];
+	pageTitle: string;
+	variant: 'inline' | 'rail';
+}
+
+const { headings, pageTitle, variant } = Astro.props;
+const label = `${projectConfig.locale.labels.pageNavigation}: ${pageTitle}`;
+---
+
+<aside class={`page-contents-navigation page-contents-navigation-${variant}`}>
+	<nav aria-label={label}>
+		<p class="page-contents-navigation-label">{projectConfig.locale.labels.pageNavigation}</p>
+		<PageContentsLinks headings={headings} variant="desktop" />
+	</nav>
+</aside>