From 7f44911c6eb06b4d05ca2e58a035f7de00f99484 Mon Sep 17 00:00:00 2001 From: Mawoka Date: Sat, 26 Mar 2022 19:10:11 +0100 Subject: [PATCH] :globe_with_meridians: Fixed language-detection --- frontend/package.json | 1 + frontend/pnpm-lock.yaml | 11 ++ frontend/src/lib/i18n/i18n-service.ts | 30 ++++-- frontend/src/lib/i18n/locales/de.json | 146 +++++++++++++------------- frontend/src/routes/__layout.svelte | 12 +-- 5 files changed, 109 insertions(+), 91 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index c7d44b7..9ca2fab 100644 --- a/frontend/package.json +++ b/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", diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index e88bb06..95582e3 100644 --- a/frontend/pnpm-lock.yaml +++ b/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: { diff --git a/frontend/src/lib/i18n/i18n-service.ts b/frontend/src/lib/i18n/i18n-service.ts index da6c72e..49e7371 100644 --- a/frontend/src/lib/i18n/i18n-service.ts +++ b/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) { diff --git a/frontend/src/lib/i18n/locales/de.json b/frontend/src/lib/i18n/locales/de.json index 2837f00..ed30c4a 100644 --- a/frontend/src/lib/i18n/locales/de.json +++ b/frontend/src/lib/i18n/locales/de.json @@ -1,75 +1,75 @@ { - "index_page": { - "meta": { - "title": "Home", - "description": "ClassQuiz ist eine Quiz-App wie KAHOOT! für Schüler*innen, welche open-source und kostenlos ist" - }, - "stats": "Statistiken", - "features": "Features", - "features_description": { - "1": "ClassQuiz ist eine Quiz-Platform, welche das erstellen und managen von Quizzes erlaubt.", - "2": "Das Hauptfeature ist die KAHOOT!-Importfunktion, mit der man Quizzes von KAHOOT! importieren kann." - }, - "slogan": "Die open-source Quiz-Platform!" - }, - "overview_page": { - "create": "Erstellen", - "import": "Importieren", - "logout": "Ausloggen", - "title": "Titel", - "created_at": "Erstellt am", - "question_count": "Fragenanzahl", - "play": "Spielen", - "edit": "Bearbeiten", - "delete": "Löschen", - "public": "Öffentlich", - "start": "Starten" - }, - "edit_page": { - "save": "Speichern", - "success_update_title": "Quiz erfolgreich aktualisiert!", - "success_update_body": "Das Quiz wurde erfolgreich aktualisiert!", - "close": "Schließen" - }, - "create_page": { - "success": { - "title": "Quiz erfolgreich erstellt!", - "body": "Das Quiz wurde erfolgreich erstellt!" - }, - "close": "Schließen" - }, - "register_page": { - "greeting": "Schön, dich zu sehen!", - "create_account": "Account erstellen", - "email": "Email", - "username": "Nutzername", - "password": "Passwort", - "forgot_password?": "Passwort vergessen?", - "register": "Registrieren", - "already_have_account?": "Hast du schon einen Account?", - "login": "Login" - }, - "login_page": { - "welcome_back": "Willkommen zurück!", - "login_or_create_account": "Einloggen oder Account erstellen", - "already_have_account": "Noch kein Account?", - "modal": { - "success": { - "success_check_mail": "Login erfolgreich! Guck in deine Mailbox!", - "success": "Login erfolgreich!", - "description": { - "success_check_mail": "Bitte überprüfe deine Mailbox, weil du eine Email mit einem Link, um dich einzuloggen, empfangen haben solltest.", - "success": "Du hast dich erfolgreich angemeldet!" - } - }, - "error": { - "wrong_creds": "Falsche Email oder falsches Passwort!", - "unexpected": "Unerwarteter Fehler!", - "description": { - "wrong_creds": "Bitte stelle sicher, dass dein Passwort und deine Email richtig sind!", - "unexpected": "Der gute alte unerwartete Fehler hat uns heimgesucht!" - } - } - } - } + "index_page": { + "meta": { + "title": "Home", + "description": "ClassQuiz ist eine Quiz-App wie KAHOOT! für Schüler*innen, welche open-source und kostenlos ist" + }, + "stats": "Statistiken", + "features": "Features", + "features_description": { + "1": "ClassQuiz ist eine Quiz-Platform, welche das erstellen und managen von Quizzes erlaubt.", + "2": "Das Hauptfeature ist die KAHOOT!-Importfunktion, mit der man Quizzes von KAHOOT! importieren kann." + }, + "slogan": "Die open-source Quiz-Platform!" + }, + "overview_page": { + "create": "Erstellen", + "import": "Importieren", + "logout": "Ausloggen", + "title": "Titel", + "created_at": "Erstellt am", + "question_count": "Fragenanzahl", + "play": "Spielen", + "edit": "Bearbeiten", + "delete": "Löschen", + "public": "Öffentlich", + "start": "Starten" + }, + "edit_page": { + "save": "Speichern", + "success_update_title": "Quiz erfolgreich aktualisiert!", + "success_update_body": "Das Quiz wurde erfolgreich aktualisiert!", + "close": "Schließen" + }, + "create_page": { + "success": { + "title": "Quiz erfolgreich erstellt!", + "body": "Das Quiz wurde erfolgreich erstellt!" + }, + "close": "Schließen" + }, + "register_page": { + "greeting": "Schön, dich zu sehen!", + "create_account": "Account erstellen", + "email": "Email", + "username": "Nutzername", + "password": "Passwort", + "forgot_password?": "Passwort vergessen?", + "register": "Registrieren", + "already_have_account?": "Hast du schon einen Account?", + "login": "Login" + }, + "login_page": { + "welcome_back": "Willkommen zurück!", + "login_or_create_account": "Einloggen oder Account erstellen", + "already_have_account": "Noch kein Account?", + "modal": { + "success": { + "success_check_mail": "Login erfolgreich! Guck in deine Mailbox!", + "success": "Login erfolgreich!", + "description": { + "success_check_mail": "Bitte überprüfe deine Mailbox, weil du eine Email mit einem Link, um dich einzuloggen, empfangen haben solltest.", + "success": "Du hast dich erfolgreich angemeldet!" + } + }, + "error": { + "wrong_creds": "Falsche Email oder falsches Passwort!", + "unexpected": "Unerwarteter Fehler!", + "description": { + "wrong_creds": "Bitte stelle sicher, dass dein Passwort und deine Email richtig sind!", + "unexpected": "Der gute alte unerwartete Fehler hat uns heimgesucht!" + } + } + } + } } diff --git a/frontend/src/routes/__layout.svelte b/frontend/src/routes/__layout.svelte index 3ffcd7d..dac91bc 100644 --- a/frontend/src/routes/__layout.svelte +++ b/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,