🌐 Add support for the Accept-Language header

playwright.config.ts

@@ -27,7 +27,9 @@ export default defineConfig({
 		baseURL: 'http://127.0.0.1:4173',
 
 		/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-		trace: 'on-first-retry'
+		trace: 'on-first-retry',
+
+		locale: 'de-DE'
 	},
 
 	/* Configure projects for major browsers */

src/languages/i18n.ts

@@ -18,7 +18,8 @@ export const languages = {
 export const languageShortcuts = Object.keys(languages) as (keyof typeof languages)[];
 export type Languages = keyof typeof languages;
 
-export let lang: Languages = 'de';
+// export let lang: Languages = 'de';
+export let lang: Languages;
 
 currentLanguage.subscribe((value) => {
 	lang = value;

src/lib/layout/Language.svelte

@@ -4,6 +4,9 @@
 	import { currentLanguage } from '../../stores';
 	import type { Languages } from '../../languages/i18n';
 
+	export let defaultLanguage: Languages;
+	currentLanguage.set(defaultLanguage);
+
 	currentLanguage.subscribe((l) => {
 		if (browser) document.getElementsByTagName('html')[0].lang = l;
 	});

src/routes/+layout.server.ts

@@ -0,0 +1,26 @@
+import { languageShortcuts, type Languages } from '../languages/i18n';
+
+const defaultLanguage: Languages = 'de';
+
+export const load = ({ request }) => {
+	const header = request.headers;
+	const accpetedLanguages = header.get('accept-language') as string | null;
+	if (!accpetedLanguages) return { requestLanguage: defaultLanguage };
+	const possibilities = languageShortcuts.filter((i) => accpetedLanguages.indexOf(i) > -1);
+
+	const sortedPossibilities = [...possibilities].sort((a, b) => {
+		const indexA = accpetedLanguages.indexOf(a);
+		const indexB = accpetedLanguages.indexOf(b);
+		return indexA - indexB;
+	});
+
+	/**
+	 * The language that should be used if no lang is specified in localstorage
+	 * Defaults to German
+	 */
+	const lang = sortedPossibilities.length > 0 ? sortedPossibilities[0] : defaultLanguage;
+
+	return {
+		requestLanguage: lang
+	} as const;
+};

src/routes/+layout.svelte

@@ -15,10 +15,17 @@
 	import Theme from '$lib/layout/Theme.svelte';
 	import SubjectColors from '$lib/layout/SubjectColors.svelte';
 	import Launcher from '$lib/layout/launcher/launcher.svelte';
+	import type { Languages } from '../languages/i18n';
 
 	let footerHeight = 0;
 	let navbarHeight = 0;
 
+	interface DataInterface {
+		requestLanguage: Languages;
+	}
+
+	export let data: DataInterface;
+
 	const updateCSSVariables = () => {
 		if (browser) {
 			document.documentElement.style.setProperty('--navbar-height', `${navbarHeight}px`);
@@ -52,7 +59,7 @@
 <Network />
 <Settings />
 <Title />
-<Language />
+<Language defaultLanguage={data.requestLanguage} />
 <Theme />
 <Logout />
 <SubjectColors />