more translations

src/lib/components/localized-content.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+
+	import { getLocale } from '$lib/paraglide/runtime';
+
+	import type { Component } from 'svelte';
+
+	/**
+	 * Picks the content component for the current locale.
+	 *
+	 * Long-form pages (about, imprint, privacy, terms) are kept as one component
+	 * per language rather than as message strings: the prose is full of inline
+	 * links, lists and headings, and splitting that into placeholders makes both
+	 * the source and the translations harder to read and to keep correct.
+	 */
+	interface Props {
+		variants: Record<string, Component>;
+	}
+
+	let { variants }: Props = $props();
+
+	let Content = $derived.by(() => {
+		// the URL decides the locale, so re-resolve on navigation
+		void $page.url.pathname;
+		return variants[getLocale()] ?? variants.en;
+	});
+</script>
+
+<Content />

src/lib/components/navigation/footer.svelte

@@ -89,7 +89,7 @@
 							<a
 								class="text-foreground/80 underline-offset-2 hover:text-foreground hover:underline"
 								href={href('/weather/week/[location]', { location: city.slug })}
-								>{city.label} weather</a
+								>{m.city_weather({ city: city.label })}</a
 							>
 						</li>
 					{/each}
@@ -102,21 +102,21 @@
 			class="mt-10 flex flex-col items-start justify-between gap-3 border-t border-border/70 pt-5 text-xs text-muted-foreground sm:flex-row sm:items-center"
 		>
 			<span>© {year} Drizz.li</span>
-			<nav aria-label="Legal" class="flex flex-wrap items-center gap-x-5 gap-y-1">
+			<nav aria-label={m.legal_nav()} class="flex flex-wrap items-center gap-x-5 gap-y-1">
 				<a class="underline-offset-2 hover:text-foreground hover:underline" href={href('/about')}
-					>About</a
+					>{m.legal_about()}</a
 				>
 				<a
 					class="underline-offset-2 hover:text-foreground hover:underline"
-					href={href('/legal/imprint')}>Imprint</a
+					href={href('/legal/imprint')}>{m.legal_imprint()}</a
 				>
 				<a
 					class="underline-offset-2 hover:text-foreground hover:underline"
-					href={href('/legal/privacy')}>Privacy</a
+					href={href('/legal/privacy')}>{m.legal_privacy()}</a
 				>
 				<a
 					class="underline-offset-2 hover:text-foreground hover:underline"
-					href={href('/legal/terms')}>Terms</a
+					href={href('/legal/terms')}>{m.legal_terms()}</a
 				>
 			</nav>
 		</div>