i18n

src/lib/components/navigation/footer.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { resolve } from '$app/paths';
+	import { href } from '$lib/i18n';
+	import * as m from '$lib/paraglide/messages';
 
 	import LogoMark from './logo-mark.svelte';
 
@@ -22,12 +23,12 @@
 	];
 
 	const forecastLinks = [
-		{ href: resolve('/weather/week'), label: '7-Day Forecast' },
-		{ href: resolve('/weather/compare'), label: 'Model Comparison' },
-		{ href: resolve('/weather/14-day'), label: '14-Day Forecast' },
-		{ href: resolve('/weather/seasonal'), label: 'Seasonal Outlook' },
-		{ href: resolve('/weather/historical'), label: 'Historical Weather' },
-		{ href: resolve('/weather/maps'), label: 'Weather Maps' }
+		{ href: href('/weather/week'), label: m.nav_week() },
+		{ href: href('/weather/compare'), label: m.nav_compare() },
+		{ href: href('/weather/14-day'), label: m.nav_14day() },
+		{ href: href('/weather/seasonal'), label: m.page_seasonal_subtitle() },
+		{ href: href('/weather/historical'), label: m.page_historical_subtitle() },
+		{ href: href('/weather/maps'), label: m.nav_maps() }
 	];
 
 	const year = new Date().getFullYear();
@@ -47,10 +48,10 @@
 					<span class="text-lg font-bold tracking-tight">Drizz.li</span>
 				</div>
 				<p class="mt-3 text-sm leading-relaxed text-muted-foreground">
-					Fast, no-nonsense weather forecasts built on open data.
+					{m.footer_tagline()}
 				</p>
 				<p class="mt-3 text-xs text-muted-foreground">
-					Weather data by
+					{m.footer_data_by()}
 					<a
 						class="font-medium underline-offset-2 hover:text-foreground hover:underline"
 						href="https://open-meteo.com"
@@ -61,9 +62,9 @@
 			</div>
 
 			<!-- Forecasts -->
-			<nav aria-label="Forecasts">
+			<nav aria-label={m.footer_forecasts()}>
 				<h3 class="text-[11px] font-bold tracking-wider text-muted-foreground uppercase">
-					Forecasts
+					{m.footer_forecasts()}
 				</h3>
 				<ul class="mt-3 flex flex-col gap-2 text-sm">
 					{#each forecastLinks as link (link.href)}
@@ -78,16 +79,16 @@
 			</nav>
 
 			<!-- Popular locations (spans two columns of links) -->
-			<nav aria-label="Popular locations" class="lg:col-span-2">
+			<nav aria-label={m.footer_popular()} class="lg:col-span-2">
 				<h3 class="text-[11px] font-bold tracking-wider text-muted-foreground uppercase">
-					Popular locations
+					{m.footer_popular()}
 				</h3>
 				<ul class="mt-3 grid grid-cols-2 gap-x-6 gap-y-2 text-sm sm:grid-cols-3">
 					{#each popularCities as city (city.slug)}
 						<li>
 							<a
 								class="text-foreground/80 underline-offset-2 hover:text-foreground hover:underline"
-								href={resolve('/weather/week/[location]', { location: city.slug })}
+								href={href('/weather/week/[location]', { location: city.slug })}
 								>{city.label} weather</a
 							>
 						</li>
@@ -102,20 +103,20 @@
 		>
 			<span>© {year} Drizz.li</span>
 			<nav aria-label="Legal" class="flex flex-wrap items-center gap-x-5 gap-y-1">
-				<a class="underline-offset-2 hover:text-foreground hover:underline" href={resolve('/about')}
+				<a class="underline-offset-2 hover:text-foreground hover:underline" href={href('/about')}
 					>About</a
 				>
 				<a
 					class="underline-offset-2 hover:text-foreground hover:underline"
-					href={resolve('/legal/imprint')}>Imprint</a
+					href={href('/legal/imprint')}>Imprint</a
 				>
 				<a
 					class="underline-offset-2 hover:text-foreground hover:underline"
-					href={resolve('/legal/privacy')}>Privacy</a
+					href={href('/legal/privacy')}>Privacy</a
 				>
 				<a
 					class="underline-offset-2 hover:text-foreground hover:underline"
-					href={resolve('/legal/terms')}>Terms</a
+					href={href('/legal/terms')}>Terms</a
 				>
 			</nav>
 		</div>