feat: improve translations

messages/de.json

@@ -8,7 +8,7 @@
   "wantAlternativePersonality": "Möchtet Ihr, dass wir eine alternative Persönlichkeit für Euch erschaffen?",
   "wantNobleName": "Möchtet Ihr einen würdigen Adelsnamen für Euch in Erwägung ziehen?",
   "yourNobleName": "Euer Adelsname",
-  "nobleName":"Adelstitel",
+  "nobleName": "Adelstitel",
   "name": "Name",
   "titleTooLong": "Wir bitten um Entschuldigung, aber dieser Titel ist zu lang. (maximal 100 Zeichen)",
   "hundredChars": "/100 Zeichen",

messages/en.json

@@ -8,7 +8,7 @@
   "wantAlternativePersonality": "Would you like us to create an alternative personality for you?",
   "wantNobleName": "Would you like to consider a worthy noble name for yourself?",
   "yourNobleName": "Your noble name",
-  "nobleName":"Noble Title",
+  "nobleName": "Noble Title",
   "name": "Surname",
   "titleTooLong": "We apologize, but this title is too long. (maximum 100 characters)",
   "hundredChars": "/100 characters",

messages/it.json

@@ -0,0 +1,52 @@
+{
+  "$schema": "https://inlang.com/schema/inlang-message-format",
+  "invite": "Vi invitiamo cordialmente a partecipare alla nostra esclusiva festa di Capodanno, che quest'anno si svolgerà nella magica atmosfera di un ballo in maschera. Immergiti in una notte piena di mistero, eleganza e splendore festoso.",
+  "welcome": "Benvenuti al ballo in maschera",
+  "acceptInvite": "Accettare l'invito",
+  "nameTooLong": "Ci scusiamo, ma questo nome è troppo lungo. (massimo 100 caratteri)",
+  "createNameWith": "Disegneremo {name} con",
+  "wantAlternativePersonality": "Vorresti che creassimo una personalità alternativa per te?",
+  "wantNobleName": "Ti piacerebbe prendere in considerazione un degno nome nobile per te stesso?",
+  "yourNobleName": "Il tuo nobile nome",
+  "nobleName": "Titolo nobiliare",
+  "name": "Cognome",
+  "titleTooLong": "Ci scusiamo, ma il titolo è troppo lungo. (massimo 100 caratteri)",
+  "hundredChars": "/100 caratteri",
+  "accept": "accettare",
+  "newSuggestions": "nuovi suggerimenti",
+  "titleSuggestions": "Suggerimenti per nomi nobili",
+  "shouldCreatePortrait": "I nostri artisti di talento dovrebbero creare un tuo ritratto maestoso?",
+  "skinVeryBright": "molto più luminoso",
+  "skinBright": "più luminoso",
+  "skinMedium": "medio",
+  "skinDark": "più scuro",
+  "skinVeryDark": "molto più scuro",
+  "skinAnd": "pelle e",
+  "hairTypeStraight": "Dritto",
+  "hairTypeCurly": "riccio",
+  "hairTypeWavy": "ondulato",
+  "hairLengthLong": "lungo",
+  "hairLengthMedium": "medio-lungo",
+  "hairLengthShort": "corto",
+  "hairColorRed": "rosso",
+  "hairColorBlack": "nero",
+  "hairColorBlond": "biondo",
+  "hairColorBrown": "marrone",
+  "hairDrawing": "capelli",
+  "paintPortrait": "ritratto dipinto (~15 secondi)",
+  "portraitIsBeingDrawn": "Il tuo nobile volto sarà dipinto",
+  "acceptPortrait": "Accetta il ritratto",
+  "requestNewPortrait": "Richiedi un nuovo ritratto",
+  "invitationIsBeingSend": "L'invito è stato inviato",
+  "sendInvitation": "Spedire un invito",
+  "guestGallery": "Galleria degli ospiti",
+  "howSureAppearing": "Quanto possiamo essere sicuri del tuo aspetto brillante?",
+  "howName": "Quali sono i tuoi nomi e cognomi, nobile ospite?",
+  "saveName": "Salva nome",
+  "notAtAll": "Affatto",
+  "very": "molto",
+  "yes": "sì",
+  "no": "no",
+  "alreadyHaveOne": "Ne ho già uno",
+  "nobleTitlesAreWritten": "I nomi nobili sono scritti"
+}

project.inlang.json

@@ -3,7 +3,8 @@
   "sourceLanguageTag": "de",
   "languageTags": [
     "en",
-    "de"
+    "de",
+    "it"
   ],
   "modules": [
     "https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-empty-pattern@latest/dist/index.js",

src/lib/components/Questions.svelte

@@ -106,7 +106,7 @@
 <div class="wrapper">
 	<section in:slide={{ delay: 500 }}>
 		<TextSplit content={m.howName()} />
-		<input placeholder="Name" type="text" bind:value={$data.name} />
+		<input placeholder={m.name()} type="text" bind:value={$data.name} />
 
 		{#if $data.name.length > 99}
 			<p class="error">

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>