feat: improve translations

src/routes/+layout.server.ts

@@ -1,27 +0,0 @@
-import type { LayoutServerLoad } from "./$types";
-import { availableLanguageTags } from "$paraglide/runtime";
-import { redirect } from "@sveltejs/kit";
-
-type AvailableLanguages = typeof availableLanguageTags[number];
-
-export const load: LayoutServerLoad = function ({ request, cookies }) {
-
-  const url = new URL(request.url);
-  let language = cookies.get("lang") as unknown as AvailableLanguages;
-  const acceptLanguage = request.headers.get('accept-language')?.split(",")?.[0]?.split("-")?.[0] as AvailableLanguages;
-
-  if (!language || !availableLanguageTags.includes(language)) {
-    if (availableLanguageTags.includes(acceptLanguage)) {
-      language = acceptLanguage;
-      cookies.set("lang", language);
-    } else {
-      language = "de"
-    }
-  }
-
-  if (!url.pathname.startsWith("/" + language) && language !== "de") {
-    throw redirect(302, `/${language}/${url.pathname}`.replaceAll("//", "/"))
-  }
-
-  return
-}

src/routes/+layout.svelte

@@ -1,8 +1,53 @@
 <script lang="ts">
 	import ParaglideAdapter from '$lib/components/ParaglideAdapter.svelte';
+	import { onMount } from 'svelte';
 	import './global.css';
+	import { languageTag, setLanguageTag } from '$paraglide/runtime';
+	import { page } from '$app/stores';
+
+	const languages = {
+		de: 'Deutsch',
+		en: 'English',
+		it: 'Italiano'
+	};
+
+	$: lang = $page.params.lang || 'de';
+
+	onMount(() => {
+		if (localStorage.getItem('language-set') !== 'true') {
+			const language = navigator.language.split('-')[0];
+			console.log(`Language detected: ${language}`);
+			if (language in languages) {
+				localStorage.setItem('language-set', 'true');
+				console.log(`Language set to ${language}`);
+				setLanguageTag(language as keyof typeof languages);
+			}
+		}
+	});
 </script>
 
 <ParaglideAdapter>
 	<slot />
+
+	<span>
+		{#each Object.entries(languages) as [key, value]}
+			<a href="#" on:click={() => setLanguageTag(key)} class:active={key === lang}>{value}</a>
+		{/each}
+	</span>
 </ParaglideAdapter>
+
+<style>
+	span {
+		position: fixed;
+		bottom: 10px;
+		left: 10px;
+	}
+	span > a {
+		color: white;
+		text-decoration: none;
+		margin-right: 0.4em;
+	}
+	span > a.active {
+		text-decoration: underline;
+	}
+</style>