Appwrite console internationalization : Typesafe-i18n

.gitignore

@@ -13,3 +13,4 @@ node_modules
 node_modules/
 dist/
 .vercel
+.github

.typesafe-i18n.json

@@ -0,0 +1,5 @@
+{
+    "adapter": "svelte",
+    "$schema": "https://unpkg.com/[email protected]/schema/typesafe-i18n.json",
+    "outputPath": "./src/lib/i18n/"
+}

package.json

@@ -4,7 +4,8 @@
         "node": ">=16"
     },
     "scripts": {
-        "dev": "vite dev",
+        "dev": "npm-run-all --parallel vite typesafe-i18n",
+        "vite": "vite dev",
         "build": "node build.js",
         "preview": "vite preview",
         "sync": "svelte-kit sync",
@@ -15,7 +16,8 @@
         "test": "vitest run",
         "test:ui": "vitest --ui",
         "test:watch": "vitest watch",
-        "e2e": "playwright test tests/e2e"
+        "e2e": "playwright test tests/e2e",
+        "typesafe-i18n": "typesafe-i18n"
     },
     "dependencies": {
         "@analytics/google-analytics": "^1.0.5",
@@ -28,9 +30,11 @@
         "dotenv": "^16.0.3",
         "echarts": "^5.4.1",
         "logrocket": "^3.0.1",
+        "npm-run-all": "^4.1.5",
         "pretty-bytes": "^6.1.0",
         "prismjs": "^1.29.0",
         "tippy.js": "^6.3.7",
+        "typesafe-i18n": "^5.24.3",
         "web-vitals": "^3.1.1"
     },
     "devDependencies": {

src/lib/components/LanguageSelector.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+    import { locale, setLocale } from '$lib/i18n/i18n-svelte';
+    import type { Locales } from '$lib/i18n/i18n-types';
+    import { locales } from '$lib/i18n/i18n-util';
+    import { loadLocaleAsync } from '$lib/i18n/i18n-util.async';
+
+    const lang = [
+        { value: 'de', lng: 'German' },
+        { value: 'en', lng: 'English' },
+        { value: 'it', lng: 'Italian' }
+    ];
+
+    const chooseLocale = async (locale: Locales) => {
+        await loadLocaleAsync(locale);
+        setLocale(locale);
+    };
+
+    let localeToSelect: Locales;
+    $: localeToSelect && chooseLocale(localeToSelect);
+
+    $: $locale && localStorage.setItem('lang', $locale);
+</script>
+
+<select bind:value={localeToSelect}>
+    <option value="" selected disabled>language selector</option>
+    {#each locales as locale, i}
+        <option value={locale}>{locale === lang[i].value ? lang[i].lng : locale}</option>
+    {/each}
+</select>

src/lib/components/index.ts

@@ -38,6 +38,7 @@ export { default as Steps } from './steps.svelte';
 export { default as Step } from './step.svelte';
 export { default as Code } from './code.svelte';
 export { default as Json } from './json.svelte';
+export { default as LanguageSelector } from './LanguageSelector.svelte';
 export { default as CustomId } from './customId.svelte';
 export { default as Secret } from './secret.svelte';
 export { default as Trim } from './trim.svelte';

src/lib/i18n/de/de.json

@@ -0,0 +1,63 @@
+{
+    "globals": {
+        "placeholders": {
+            "email": "E-Mail",
+            "password": "Passwort",
+            "enter_password": "Passwort eingeben",
+            "confirm_password": "Passwort bestätigen",
+            "your_name": "Ihr Name",
+            "your_email": "Ihre E-Mail-Adresse",
+            "your_password": "Ihr Passwort",
+            "your_code": "dein Code"
+        },
+        "update": "aktualisieren",
+        "recover": "genesen",
+        "accept": "akzeptieren",
+        "cancel": "stornieren"
+    },
+    "login": {
+        "title": "anmelden",
+        "field_inputs": {
+            "email": "E-Mail",
+            "password": "Passwort"
+        }
+    },
+    "sign_up": {
+        "title": "Anmeldung",
+        "field_inputs": {
+            "name": "Name",
+            "email": "E-Mail",
+            "password": "Passwort",
+            "code": "Code"
+        },
+        "already_registered": "Sie haben bereits ein Konto?"
+    },
+    "password_recovery": {
+        "title": "Passwort-Wiederherstellung",
+        "forgot_password": "Passwort vergessen",
+        "field_inputs": {
+            "email": "E-Mail",
+            "new_password": "Neues Kennwort",
+            "cnf_password": "Bestätige das Passwort"
+        }
+    },
+    "accept_invite": {
+        "title": "Einladung annehmen",
+        "invalid_invite": "Ungültige Einladung",
+        "invite": "einladen",
+        "sign_up": "Melden Sie sich bei Appwrite an",
+        "warning_alert": {
+            "title": "Der Einladungslink ist ungültig",
+            "sub_title": "Bitten Sie den Projektinhaber, Ihnen eine neue Einladung zu senden."
+        },
+        "success_alert": {
+            "title": "Sie wurden eingeladen, an einem Teamprojekt auf Appwrite teilzunehmen"
+        }
+    },
+    "privacy_and_policy": {
+        "main_text": "Indem Sie die Einladung annehmen, erklären Sie sich damit einverstanden",
+        "terms_and_condition": "Geschäftsbedingungen",
+        "and": "Und",
+        "privacy_policy": "Datenschutz und Richtlinien"
+    }
+}

src/lib/i18n/de/index.ts

@@ -0,0 +1,6 @@
+import type { Translation } from '../i18n-types';
+import deJson from './de.json';
+
+const de: Translation = deJson;
+
+export default de;

src/lib/i18n/en/en.json

@@ -0,0 +1,77 @@
+{
+    "globals": {
+        "placeholders": {
+            "email": "Email",
+            "password": "Password",
+            "enter_password": "Enter Password",
+            "confirm_password": "Confirm Password",
+            "your_name": "Your name",
+            "your_email": "Your email",
+            "your_password": "Your password",
+            "your_code": "Your code",
+            "first_appwrite_project": "First Appwrite Project"
+        },
+        "update": "Update",
+        "recover": "Recover",
+        "accept": "Accept",
+        "cancel": "Cancel"
+    },
+    "login": {
+        "title": "Sign in",
+        "field_inputs": {
+            "email": "Email",
+            "password": "Password"
+        }
+    },
+    "sign_up": {
+        "title": "Sign up",
+        "field_inputs": {
+            "name": "Name",
+            "email": "Email",
+            "password": "Password",
+            "code": "code"
+        },
+        "already_registered": "Already got an account?"
+    },
+    "password_recovery": {
+        "title": "Password Recovery",
+        "forgot_password": "Forgot Password",
+        "field_inputs": {
+            "email": "Email",
+            "new_password": "New password",
+            "cnf_password": "Confirm password"
+        }
+    },
+    "accept_invite": {
+        "title": "Accept invite",
+        "invalid_invite": "Invalid invite",
+        "invite": "Invite",
+        "sign_up": "Sign up to Appwrite",
+        "warning_alert": {
+            "title": "The invite link is not valid",
+            "sub_title": "Please ask the project owner to send you a new invite."
+        },
+        "success_alert": {
+            "title": "You have been invited to join a team project on Appwrite"
+        }
+    },
+    "privacy_and_policy": {
+        "main_text": "By accepting the invitation, you agree to the",
+        "terms_and_condition": "Terms and Conditions",
+        "and": "and",
+        "privacy_policy": "Privacy and Policy"
+    },
+    "console": {
+        "onboarding": {
+            "header": "Onboarding",
+            "title": "Let's create your first project"
+        },
+        "basic_keywords": {
+            "project": "Project",
+            "project_name": "Project name",
+            "project_id": "Project ID",
+            "create_project": "Create Project"
+        }
+    }
+
+}

src/lib/i18n/en/index.ts

@@ -0,0 +1,6 @@
+import type { BaseTranslation } from '../i18n-types';
+import engJson from './en.json';
+
+const en: BaseTranslation = engJson;
+
+export default en;

src/lib/i18n/formatters.ts

@@ -0,0 +1,11 @@
+import type { FormattersInitializer } from 'typesafe-i18n';
+import { date } from 'typesafe-i18n/formatters';
+import type { Formatters, Locales } from './i18n-types';
+
+export const initFormatters: FormattersInitializer<Locales, Formatters> = (locale: Locales) => {
+    const formatters: Formatters = {
+        weekday: date(locale, { weekday: 'long' })
+    };
+
+    return formatters;
+};