🌐 Fixed language-detection

frontend/package.json

@@ -33,6 +33,7 @@
 		"eslint-plugin-svelte3": "^3.2.1",
 		"felte": "^1.0.1",
 		"highlight.js": "^11.4.0",
+		"i18next-browser-languagedetector": "^6.1.4",
 		"i18next-scanner": "^3.1.0",
 		"ioredis": "^4.28.5",
 		"js-cookie": "^3.0.1",

frontend/pnpm-lock.yaml

@@ -21,6 +21,7 @@ specifiers:
     felte: ^1.0.1
     highlight.js: ^11.4.0
     i18next: ^21.6.14
+    i18next-browser-languagedetector: ^6.1.4
     i18next-scanner: ^3.1.0
     ioredis: ^4.28.5
     js-cookie: ^3.0.1
@@ -64,6 +65,7 @@ devDependencies:
     eslint-plugin-svelte3: 3.4.1_eslint@7.32.0+svelte@3.46.4
     felte: 1.0.1_svelte@3.46.4
     highlight.js: 11.4.0
+    i18next-browser-languagedetector: 6.1.4
     i18next-scanner: 3.1.0
     ioredis: 4.28.5
     js-cookie: 3.0.1
@@ -2279,6 +2281,15 @@ packages:
         engines: { node: '>=12.0.0' }
         dev: true
 
+    /i18next-browser-languagedetector/6.1.4:
+        resolution:
+            {
+                integrity: sha512-wukWnFeU7rKIWT66VU5i8I+3Zc4wReGcuDK2+kuFhtoxBRGWGdvYI9UQmqNL/yQH1KogWwh+xGEaIPH8V/i2Zg==
+            }
+        dependencies:
+            '@babel/runtime': 7.17.2
+        dev: true
+
     /i18next-scanner/3.1.0:
         resolution:
             {

frontend/src/lib/i18n/i18n-service.ts

@@ -1,18 +1,19 @@
 import i18next from 'i18next';
 import translations from './translations';
 import en from './locales/en.json';
+import de from './locales/de.json';
+import LanguageDetector from 'i18next-browser-languagedetector';
 
 import type { i18n, Resource } from 'i18next';
 
-const INITIAL_LANGUAGE = 'en';
-
 export class I18nService {
 	// expose i18next
 	i18n: i18n;
 	constructor() {
 		this.i18n = i18next;
 		this.initialize();
-		this.changeLanguage(INITIAL_LANGUAGE);
+		// this.changeLanguage("de")
+		//this.changeLanguage(INITIAL_LANGUAGE);
 	}
 
 	// Our translation function
@@ -22,8 +23,8 @@ export class I18nService {
 
 	// Initializing i18n
 	initialize() {
-		this.i18n.init({
-			lng: INITIAL_LANGUAGE,
+		this.i18n.use(LanguageDetector).init({
+			// lng: INITIAL_LANGUAGE,
 			fallbackLng: 'en',
 			debug: false,
 			defaultNS: 'translation',
@@ -32,12 +33,27 @@ export class I18nService {
 			interpolation: {
 				escapeValue: false
 			},
+			// detection: {
+			// 	order: ['browser', 'querystring', 'navigator', 'localStorage', 'htmlTag'],
+			// 	lookupQuerystring: 'lng'
+			// }
 			detection: {
-				order: ['browser', 'querystring', 'navigator', 'localStorage', 'htmlTag'],
-				lookupQuerystring: 'lng'
+				order: [
+					'querystring',
+					'cookie',
+					'localStorage',
+					'sessionStorage',
+					'navigator',
+					'htmlTag',
+					'path',
+					'subdomain'
+				],
+				lookupQuerystring: 'lng',
+				lookupLocalStorage: 'language'
 			}
 		});
 		this.i18n.addResourceBundle('en', 'translation', en);
+		this.i18n.addResourceBundle('de', 'translation', de);
 	}
 
 	changeLanguage(language: string) {

frontend/src/routes/__layout.svelte

@@ -4,20 +4,10 @@
 	import { navbarVisible } from '$lib/stores.ts';
 	import * as Sentry from '@sentry/browser';
 	import { BrowserTracing } from '@sentry/tracing';
-	import { initLocalizationContext, getLocalization } from '$lib/i18n';
-	import { browser } from '$app/env';
+	import { initLocalizationContext } from '$lib/i18n';
 
 	initLocalizationContext();
 
-	if (browser) {
-		if (localStorage.getItem('language') === null) {
-			localStorage.setItem('language', 'en');
-		} else {
-			const { currentLanguage } = getLocalization();
-			currentLanguage.set(localStorage.getItem('language'));
-		}
-	}
-
 	if (import.meta.env.VITE_SENTRY !== null) {
 		Sentry.init({
 			dsn: import.meta.env.VITE_SENTRY,