feat: translate the page

src/routes/+layout.server.ts

@@ -0,0 +1,27 @@
+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,5 +1,8 @@
 <script lang="ts">
+	import ParaglideAdapter from '$lib/components/ParaglideAdapter.svelte';
 	import './global.css';
 </script>
 
-<slot />
+<ParaglideAdapter>
+	<slot />
+</ParaglideAdapter>

src/routes/[[lang]]/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import Loader from '$lib/components/Loader.svelte';
 	import Questions from '$lib/components/Questions.svelte';
 	import TextSplit from '$lib/components/TextSplit.svelte';
 	import Button from '$lib/components/button.svelte';
@@ -9,6 +8,7 @@
 	import Maskenball from '$lib/components/maskenball.svelte';
 	import { onMount } from 'svelte';
 	import { fade } from 'svelte/transition';
+	import * as m from '$paraglide/messages';
 
 	let curtainsVisible = false;
 	let buttonVisible = false;
@@ -59,10 +59,7 @@
 
 {#if contentVisible}
 	<div class="einladung" out:fade>
-		<TextSplit
-			center
-			content="Wir laden dich herzlich ein, an unserer exklusiven Silvesterparty teilzunehmen, die dieses Jahr im magischen Ambiente eines Maskenballs stattfindet. Tauche ein in eine Nacht voller Geheimnisse, Eleganz und festlichem Glanz."
-		/>
+		<TextSplit center content={m.invite()} />
 
 		<span in:fade={{ delay: 8000, duration: 1000 }}>
 			<Button
@@ -70,7 +67,7 @@
 				on:click={() => {
 					contentVisible = false;
 					questionVisible = true;
-				}}>Einladung annehmen</Button
+				}}>{m.acceptInvite()}</Button
 			>
 		</span>
 	</div>

src/routes/[[lang]]/gallery/+page.svelte

@@ -2,6 +2,7 @@
 	import ImageFrame from '$lib/components/ImageFrame.svelte';
 	import Confetti from '$lib/components/confetti.svelte';
 	import { onMount } from 'svelte';
+	import * as m from '$paraglide/messages';
 
 	export let data;
 
@@ -29,7 +30,7 @@
 </svelte:head>
 
 <div class="wrapper">
-	<h1>Gallerie der Gäste</h1>
+	<h1>{m.guestGallery()}</h1>
 	<div class="grid">
 		{#each items as item}
 			<div

src/routes/load.ts

@@ -0,0 +1,3 @@
+export const load: Handler = async (req, res) => {
+};
+