Add multilingual support with German translations and update language handling in the weather dashboard

Author: infinitel8p

.env

@@ -1,2 +1,3 @@
 OPENWEATHERMAP_API_KEY=# Replace with your OpenWeatherMap API key
 OPENWEATHERMAP_API_VERSION=3.0 # "3.0" for One Call 3.0, "2.5" for One Call 2.5, or "free" for the free Weather/Forecast API
+LANGUAGE=en # "en" for English, "de" for German

README.md

@@ -43,11 +43,13 @@ cd weather-forecast
    - `OPENWEATHERMAP_API_VERSION` — The API tier to use:
      - `3.0` (default) — [One Call API 3.0](https://openweathermap.org/api/one-call-3) (paid subscription)
      - `2.5` — [One Call API 2.5](https://openweathermap.org/api/one-call-api) (legacy paid subscription)
-     - `free` — Free tier using the standard [Weather](https://openweathermap.org/current) + [Forecast](https://openweathermap.org/forecast5) endpoints (no UV index, 3-hour forecast intervals instead of hourly)  
+     - `free` — Free tier using the standard [Weather](https://openweathermap.org/current) + [Forecast](https://openweathermap.org/forecast5) endpoints (no UV index, 3-hour forecast intervals instead of hourly)
+   - `LANGUAGE` — UI language: `en` (default) for English or `de` for German. Also affects weather descriptions from the API and date/time formatting.
+
 > [!Note]
 > Choose the API version based on your OpenWeatherMap subscription. The `free` option allows you to run the dashboard without a paid subscription, but with limited features and less granular forecast data.
 
-1. Install the dependencies
+4. Install the dependencies
 
 ```shell
 npm install

src/components/WeatherChart.jsx

@@ -8,7 +8,7 @@ import annotationPlugin from 'chartjs-plugin-annotation';
 
 Chart.register(...registerables, ChartDataLabels, annotationPlugin);
 
-export default function WeatherChart({ labels, temperatureData, precipitationData, uviData, sunrise, sunset }) {
+export default function WeatherChart({ labels, temperatureData, precipitationData, uviData, sunrise, sunset, tempLabel = "Temp °C", rainLabel = "Regen mm", uvLabel = "UV" }) {
   const canvasRef = useRef(null);
 
   useEffect(() => {
@@ -92,7 +92,7 @@ export default function WeatherChart({ labels, temperatureData, precipitationDat
         labels,
         datasets: [
           {
-            label: "Temp °C",
+            label: tempLabel,
             data: temperatureData,
             borderColor: colors.tempLine,
             backgroundColor: colors.tempFill,
@@ -103,7 +103,7 @@ export default function WeatherChart({ labels, temperatureData, precipitationDat
             borderWidth: 1.5,
           },
           {
-            label: "Regen mm",
+            label: rainLabel,
             data: precipitationData,
             borderColor: colors.precipLine,
             backgroundColor: colors.precipFill,
@@ -114,7 +114,7 @@ export default function WeatherChart({ labels, temperatureData, precipitationDat
             borderWidth: 1.5,
           },
           ...(uviData.length > 0 ? [{
-            label: "UV",
+            label: uvLabel,
             data: uviData,
             borderColor: colors.uviLine,
             backgroundColor: colors.uviFill,

src/lib/i18n.ts

@@ -0,0 +1,70 @@
+const translations = {
+	de: {
+		// index.astro - weather details
+		feelsLike: "Gefühlt",
+		sunrise: "Aufgang",
+		sunset: "Untergang",
+		wind: "Wind",
+		humidity: "Feuchte",
+		pressure: "Druck",
+		uv: "UV",
+		visibility: "Sicht",
+		clouds: "Wolken",
+		weatherUnavailable: "Wetterdaten nicht verfügbar",
+		autoReload: "Die Seite wird automatisch neu geladen.",
+		// setup.astro
+		dopplerRadar: "DOPPLER RADAR",
+		configuration: "Konfiguration",
+		location: "Standort",
+		or: "oder",
+		cityZip: "Stadt / PLZ",
+		country: "Land",
+		search: "Suchen...",
+		start: "Starten",
+		locationNotFound: "Standort nicht gefunden",
+		saveError: "Fehler beim Speichern der Position",
+		// chart
+		tempLabel: "Temp °C",
+		rainLabel: "Regen mm",
+		uvLabel: "UV",
+		// locale settings
+		locale: "de-DE",
+		owmLang: "DE",
+	},
+	en: {
+		feelsLike: "Feels like",
+		sunrise: "Sunrise",
+		sunset: "Sunset",
+		wind: "Wind",
+		humidity: "Humidity",
+		pressure: "Pressure",
+		uv: "UV",
+		visibility: "Visibility",
+		clouds: "Clouds",
+		weatherUnavailable: "Weather data unavailable",
+		autoReload: "The page will reload automatically.",
+		dopplerRadar: "DOPPLER RADAR",
+		configuration: "Configuration",
+		location: "Location",
+		or: "or",
+		cityZip: "City / ZIP",
+		country: "Country",
+		search: "Search...",
+		start: "Start",
+		locationNotFound: "Location not found",
+		saveError: "Failed to save location",
+		tempLabel: "Temp °C",
+		rainLabel: "Rain mm",
+		uvLabel: "UV",
+		locale: "en-US",
+		owmLang: "EN",
+	},
+} as const;
+
+export type Language = keyof typeof translations;
+export type TranslationKey = keyof (typeof translations)["de"];
+
+export function getTranslations(lang?: string) {
+	const key = (lang && lang in translations ? lang : "en") as Language;
+	return translations[key];
+}

src/lib/weather-api.ts

@@ -34,23 +34,25 @@ export async function fetchWeather(
 	lat: string,
 	lon: string,
 	apiKey: string,
-	apiVersion: string
+	apiVersion: string,
+	owmLang: string = "EN"
 ): Promise<{ data: NormalizedWeather | null; error: string | null }> {
 	if (apiVersion === "free") {
-		return fetchFreeApi(lat, lon, apiKey);
+		return fetchFreeApi(lat, lon, apiKey, owmLang);
 	}
-	return fetchOneCall(lat, lon, apiKey, apiVersion);
+	return fetchOneCall(lat, lon, apiKey, apiVersion, owmLang);
 }
 
 async function fetchOneCall(
 	lat: string,
 	lon: string,
 	apiKey: string,
-	version: string
+	version: string,
+	owmLang: string
 ): Promise<{ data: NormalizedWeather | null; error: string | null }> {
 	const v = version === "2.5" ? "2.5" : "3.0";
 	const res = await fetch(
-		`https://api.openweathermap.org/data/${v}/onecall?lat=${lat}&lon=${lon}&lang=DE&units=metric&exclude=minutely,alerts&appid=${apiKey}`
+		`https://api.openweathermap.org/data/${v}/onecall?lat=${lat}&lon=${lon}&lang=${owmLang}&units=metric&exclude=minutely,alerts&appid=${apiKey}`
 	);
 	const json = await res.json();
 	if (!res.ok) {
@@ -62,14 +64,15 @@ async function fetchOneCall(
 async function fetchFreeApi(
 	lat: string,
 	lon: string,
-	apiKey: string
+	apiKey: string,
+	owmLang: string
 ): Promise<{ data: NormalizedWeather | null; error: string | null }> {
 	const [weatherRes, forecastRes] = await Promise.all([
 		fetch(
-			`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&lang=DE&units=metric&appid=${apiKey}`
+			`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&lang=${owmLang}&units=metric&appid=${apiKey}`
 		),
 		fetch(
-			`https://api.openweathermap.org/data/2.5/forecast?lat=${lat}&lon=${lon}&lang=DE&units=metric&appid=${apiKey}`
+			`https://api.openweathermap.org/data/2.5/forecast?lat=${lat}&lon=${lon}&lang=${owmLang}&units=metric&appid=${apiKey}`
 		),
 	]);
 

src/pages/api/set-location.ts

@@ -4,7 +4,7 @@ import type { APIRoute } from "astro";
 export const POST: APIRoute = async ({ request, cookies }) => {
     const { lat, lon, other, country } = await request.json();
     const env = import.meta.env;
-    const countryCode = country || "DE";
+    const countryCode = country || "US";
 
     if (other) {
         const key = env.OPENWEATHERMAP_API_KEY;

src/pages/index.astro

@@ -13,8 +13,10 @@ import {
 	IconCloud,
 } from "@tabler/icons-react";
 import { fetchWeather } from "@/lib/weather-api";
+import { getTranslations } from "@/lib/i18n";
 
 const env = import.meta.env;
+const t = getTranslations(env.LANGUAGE);
 const latCookie = Astro.cookies.get("lat");
 const lonCookie = Astro.cookies.get("lon");
 const cityCookie = Astro.cookies.get("city");
@@ -29,11 +31,11 @@ if (!lat || !lon) {
 
 const apiVersion = env.OPENWEATHERMAP_API_VERSION || "3.0";
 const { data: oneCall, error: apiError } = await fetchWeather(
-	lat, lon, env.OPENWEATHERMAP_API_KEY, apiVersion
+	lat, lon, env.OPENWEATHERMAP_API_KEY, apiVersion, t.owmLang
 );
 
 const time = new Date();
-const currentDate = time.toLocaleDateString("de-DE", {
+const currentDate = time.toLocaleDateString(t.locale, {
 	timeZone: "Europe/Berlin",
 	weekday: "long",
 	month: "long",
@@ -52,7 +54,7 @@ const hourlyUVIndex = rawUVI.some((v) => v > 0) ? rawUVI : [];
 
 function formatToBerlinTime(unixTimestamp) {
 	const date = new Date(unixTimestamp * 1000);
-	return date.toLocaleTimeString("de-DE", {
+	return date.toLocaleTimeString(t.locale, {
 		timeZone: "Europe/Berlin",
 		hour: "2-digit",
 		minute: "2-digit",
@@ -62,7 +64,7 @@ function formatToBerlinTime(unixTimestamp) {
 
 function formatToBerlinDate(unixTimestamp) {
 	const date = new Date(unixTimestamp * 1000);
-	return date.toLocaleDateString("de-DE", {
+	return date.toLocaleDateString(t.locale, {
 		timeZone: "Europe/Berlin",
 		weekday: "short",
 	});
@@ -558,9 +560,9 @@ function formatToBerlinDate(unixTimestamp) {
 		{apiError ? (
 		<div class="flex-1 flex items-center justify-center">
 			<div class="hud-card p-6 text-center max-w-md">
-				<p class="text-2xl font-semibold dash-primary mb-2">Wetterdaten nicht verfügbar</p>
+				<p class="text-2xl font-semibold dash-primary mb-2">{t.weatherUnavailable}</p>
 				<p class="text-sm dash-muted font-mono">{apiError}</p>
-				<p class="text-xs dash-muted mt-3">Die Seite wird automatisch neu geladen.</p>
+				<p class="text-xs dash-muted mt-3">{t.autoReload}</p>
 			</div>
 		</div>
 		) : (<Fragment>
@@ -589,7 +591,7 @@ function formatToBerlinDate(unixTimestamp) {
 							{Math.round(oneCall.current.temp)}°
 						</p>
 						<p class="font-mono text-sm dash-muted -mt-2">
-							Gefühlt {Math.round(oneCall.current.feels_like)}°
+							{t.feelsLike} {Math.round(oneCall.current.feels_like)}°
 						</p>
 					</div>
 				</div>
@@ -604,42 +606,42 @@ function formatToBerlinDate(unixTimestamp) {
 				<div class="detail-item">
 					<IconSunrise size={32} className="detail-icon" />
 					<div class="detail-text">
-						<span class="detail-label">Aufgang</span>
+						<span class="detail-label">{t.sunrise}</span>
 						<span class="detail-value">{formatToBerlinTime(oneCall.current.sunrise)}</span>
 					</div>
 				</div>
 				<div class="detail-item">
 					<IconSunset size={32} className="detail-icon" />
 					<div class="detail-text">
-						<span class="detail-label">Untergang</span>
+						<span class="detail-label">{t.sunset}</span>
 						<span class="detail-value">{formatToBerlinTime(oneCall.current.sunset)}</span>
 					</div>
 				</div>
 				<div class="detail-item">
 					<IconWind size={32} className="detail-icon" />
 					<div class="detail-text">
-						<span class="detail-label">Wind</span>
+						<span class="detail-label">{t.wind}</span>
 						<span class="detail-value">{oneCall.current.wind_speed}<span class="detail-unit">m/s</span></span>
 					</div>
 				</div>
 				<div class="detail-item">
 					<IconDroplet size={32} className="detail-icon" />
 					<div class="detail-text">
-						<span class="detail-label">Feuchte</span>
+						<span class="detail-label">{t.humidity}</span>
 						<span class="detail-value">{oneCall.current.humidity}<span class="detail-unit">%</span></span>
 					</div>
 				</div>
 				<div class="detail-item">
 					<IconGauge size={32} className="detail-icon" />
 					<div class="detail-text">
-						<span class="detail-label">Druck</span>
+						<span class="detail-label">{t.pressure}</span>
 						<span class="detail-value">{oneCall.current.pressure}<span class="detail-unit">hPa</span></span>
 					</div>
 				</div>
 				<div class="detail-item">
 					<IconUvIndex size={32} className="detail-icon" />
 					<div class="detail-text">
-						<span class="detail-label">UV</span>
+						<span class="detail-label">{t.uv}</span>
 						<span class:list={[
 							"detail-value",
 							{
@@ -654,14 +656,14 @@ function formatToBerlinDate(unixTimestamp) {
 				<div class="detail-item">
 					<IconEye size={32} className="detail-icon" />
 					<div class="detail-text">
-						<span class="detail-label">Sicht</span>
+						<span class="detail-label">{t.visibility}</span>
 						<span class="detail-value">{oneCall.current.visibility / 1000}<span class="detail-unit">km</span></span>
 					</div>
 				</div>
 				<div class="detail-item">
 					<IconCloud size={32} className="detail-icon" />
 					<div class="detail-text">
-						<span class="detail-label">Wolken</span>
+						<span class="detail-label">{t.clouds}</span>
 						<span class="detail-value">{oneCall.current.clouds}<span class="detail-unit">%</span></span>
 					</div>
 				</div>
@@ -678,6 +680,9 @@ function formatToBerlinDate(unixTimestamp) {
 				uviData={hourlyUVIndex}
 				sunrise={formatToBerlinTime(oneCall.current.sunrise)}
 				sunset={formatToBerlinTime(oneCall.current.sunset)}
+				tempLabel={t.tempLabel}
+				rainLabel={t.rainLabel}
+				uvLabel={t.uvLabel}
 			/>
 		</div>