Add localization support

frontend/package.json

@@ -17,7 +17,8 @@
     "pinia-plugin-persistedstate": "^1.6.3",
     "tailwind-gradient-mask-image": "^1.0.0",
     "vue": "^3.2.25",
-    "vue-axios": "^3.4.1"
+    "vue-axios": "^3.4.1",
+    "vue-i18n": "^9.2.2"
   },
   "devDependencies": {
     "@types/node": "^17.0.45",

frontend/src/App.vue

@@ -10,6 +10,7 @@ import NotFound from "./routes/NotFound.vue"
 import Footer from "./components/Footer.vue"
 import Navbar from "./components/Navbar.vue"
 import Alerts from "./components/Alerts.vue"
+import {useI18nStore} from "./app/i18n-store"
 
 const routes: { [route: string]: any; } = {
     "/": Home,
@@ -32,8 +33,13 @@ export default defineComponent({
         theme(): string {
             return localStorage.getItem("theme") ?? ""
         },
+        locale(): string {
+            return this.$i18n.locale
+        }
     },
     mounted() {
+        this.$i18n.locale = this.$i18n.availableLocales.find((locale: string) => locale === useI18nStore().locale) ?? "en_US"
+        
         let theme = localStorage.getItem("theme")
         if (theme) {
             document.documentElement.setAttribute("data-theme", theme)
@@ -48,7 +54,7 @@ export default defineComponent({
 
 <template>
     <meta name="theme-color" :key="theme" :content="theme === 'cupcake' ? '#efeae6' : '#242933'">
-    <div class="overflow-x-hidden">
+    <div class="overflow-x-hidden" :key="locale">
         <Navbar class="top-0 fixed z-10" :class="`navbar-${current}`"/>
 
         <div class="min-h-screen flex flex-col justify-between bg-base-200">

frontend/src/app/i18n-store.ts

@@ -0,0 +1,62 @@
+import {defineStore} from "pinia"
+
+export interface State {
+    locale: String,
+}
+
+const getFirstBrowserLanguage = function () {
+    let nav = window.navigator,
+        browserLanguagePropertyKeys = ["language", "browserLanguage", "systemLanguage", "userLanguage"],
+        i,
+        language
+
+    // support for HTML 5.1 "navigator.languages"
+    if (Array.isArray(nav.languages)) {
+        for (i = 0; i < nav.languages.length; i++) {
+            language = nav.languages[i]
+            if (language && language.length) {
+                return language
+            }
+        }
+    }
+
+    // support for other well known properties in browsers
+    for (i = 0; i < browserLanguagePropertyKeys.length; i++) {
+        language = (nav as any)[browserLanguagePropertyKeys[i]]
+        if (language && language.length) {
+            return language
+        }
+    }
+
+    return null
+}
+
+const defaultLocale = function() {
+    let locale = getFirstBrowserLanguage()
+    if (locale) {
+        locale = (locale as String).toLowerCase()
+        if (locale === "en-gb" || locale === "en-au" || locale === "en-ca" || locale === "en-ie" || locale === "en-nz" || locale === "en-za") {
+            return "en_GB"
+        } else if (locale.startsWith("en")) {
+            return "en_US"
+        } else if (locale === "zh-hk" || locale === "zh-tw") {
+            return "zh_TW"
+        } else if (locale.startsWith("zh")) {
+            return "zh_CN"
+        }
+    }
+
+    return "en_US"
+}
+
+function newState(): State {
+    return {
+        locale: defaultLocale(),
+    }
+}
+
+export const useI18nStore = defineStore({
+    id: "i18n",
+    state: newState,
+    persist: true,
+})