Merge pull request 'Use vue-i18n' (#68) from feature/vue-i18n into main

Reviewed-on: #68
Reviewed-by: Johannes D. Vos

THIRD_PARTY_LICENSES

@@ -364,6 +364,16 @@ OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
 
 -----------
 
+The following npm package may be included in this product:
+
+ - @vue/devtools-api@6.6.4
+
+This package contains the following license:
+
+MIT
+
+-----------
+
 The following npm package may be included in this product:
 
  - json5@2.2.3
@@ -1371,6 +1381,67 @@ SOFTWARE.
 
 -----------
 
+The following npm packages may be included in this product:
+
+ - @intlify/core-base@11.4.4
+ - @intlify/message-compiler@11.4.4
+ - @intlify/shared@11.4.4
+ - vue-i18n@11.4.4
+
+These packages each contain the following license:
+
+The MIT License (MIT)
+
+Copyright (c) 2020 kazuya kawaguchi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+-----------
+
+The following npm package may be included in this product:
+
+ - @intlify/devtools-types@11.4.4
+
+This package contains the following license:
+
+The MIT License (MIT)
+
+Copyright (c) 2024 kazuya kawaguchi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+-----------
+
 The following npm package may be included in this product:
 
  - hookable@5.5.3

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "terser": "^5.47.1",
         "vue": "^3.5.32",
+        "vue-i18n": "^11.4.4",
         "vue-router": "^5.0.6"
       },
       "devDependencies": {
@@ -106,6 +107,63 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@intlify/core-base": {
+      "version": "11.4.4",
+      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-11.4.4.tgz",
+      "integrity": "sha512-w/vItlylrAmhebkIbVl5YY8XMCtj8Mb2g70ttxktMYuf5AuRahgEHL2iLgLIsZBIbTSgs4hkUo7ucCL0uTJvOg==",
+      "dependencies": {
+        "@intlify/devtools-types": "11.4.4",
+        "@intlify/message-compiler": "11.4.4",
+        "@intlify/shared": "11.4.4"
+      },
+      "engines": {
+        "node": ">= 22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/devtools-types": {
+      "version": "11.4.4",
+      "resolved": "https://registry.npmjs.org/@intlify/devtools-types/-/devtools-types-11.4.4.tgz",
+      "integrity": "sha512-PcBLmGmDQsTSVV911P8upzpcLJO1CNVYi/IH6bGnLR2nA+0L963+kXN1ZrisTEnbtw2ewN6HMMSldqzjronA0Q==",
+      "dependencies": {
+        "@intlify/core-base": "11.4.4",
+        "@intlify/shared": "11.4.4"
+      },
+      "engines": {
+        "node": ">= 22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/message-compiler": {
+      "version": "11.4.4",
+      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-11.4.4.tgz",
+      "integrity": "sha512-vn0OAV9pYkJlPPmgnsSm5eAG3mL0+9C/oaded2JY9jmxBbhmUXT3TcAUY8WRgLY9Hte7lkUJKpXrVlYjMXBD2w==",
+      "dependencies": {
+        "@intlify/shared": "11.4.4",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/shared": {
+      "version": "11.4.4",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-11.4.4.tgz",
+      "integrity": "sha512-QRUCHqda1U6aR14FR0vvXD4+4gj6+fm0AhAozvSuRCw0fCvrmCugWpgiR4xH2NI6s8am6N9p5OhirplsX8ZS3g==",
+      "engines": {
+        "node": ">= 22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -2105,6 +2163,31 @@
         }
       }
     },
+    "node_modules/vue-i18n": {
+      "version": "11.4.4",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-11.4.4.tgz",
+      "integrity": "sha512-gIbXVSFQV4jcSJxfwdZ5zSZmZ+12CnX0K3vBkRSd6Zn+HSzCp+QwUgPwpD/uN0oKNKI9RzlUXPKVedEuMgNG0A==",
+      "dependencies": {
+        "@intlify/core-base": "11.4.4",
+        "@intlify/devtools-types": "11.4.4",
+        "@intlify/shared": "11.4.4",
+        "@vue/devtools-api": "^6.5.0"
+      },
+      "engines": {
+        "node": ">= 22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/vue-i18n/node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g=="
+    },
     "node_modules/vue-router": {
       "version": "5.0.6",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-5.0.6.tgz",

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "terser": "^5.47.1",
     "vue": "^3.5.32",
+    "vue-i18n": "^11.4.4",
     "vue-router": "^5.0.6"
   },
   "devDependencies": {

src/features/colorScheme/components/ColorSchemeButton.vue

@@ -16,6 +16,9 @@ limitations under the License.
 
 <script setup>
 import { inject } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const colorScheme = inject('colorScheme');
 
@@ -25,24 +28,22 @@ const colorSchemeNextMapper = {
     'auto': 'light'
 };
 
-const colorSchemeTextMapper = {
-    'light': 'Switch to light mode',
-    'dark': 'Switch to dark mode',
-    'auto': 'Switch to the system scheme'
-}
-
 const colorSchemeIconMapper = {
     'dark': '⏾',
     'light': '☀',
     'auto': '◐'
-}
+};
+
+const getTooltipTranslation = function (colorScheme) {
+    return t(`preferences.colorScheme.switch.${colorSchemeNextMapper[colorScheme]}`);
+};
 </script>
 
 <template>
     <button class="color-scheme-button"
         @click="colorScheme = colorSchemeNextMapper[colorScheme]"
-        :aria-label="colorSchemeTextMapper[colorSchemeNextMapper[colorScheme]]"
-        :title="colorSchemeTextMapper[colorSchemeNextMapper[colorScheme]]"
+        :aria-label="getTooltipTranslation(colorScheme)"
+        :title="getTooltipTranslation(colorScheme)"
     >
         {{ colorSchemeIconMapper[colorSchemeNextMapper[colorScheme]] }}
     </button>

src/features/search/components/Searchbar.vue

@@ -18,6 +18,9 @@ limitations under the License.
 const searchQuery = defineModel();
 
 import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const router = useRouter()
 const props = defineProps(['autoSubmit'])
@@ -38,10 +41,10 @@ const submitSearch = function () {
             <input
                 v-model="searchQuery"
                 type="search"
-                placeholder="Search..."
+                :placeholder="t('search.searchBar.placeholder')"
                 required
             />
-            <button type="submit" class="search-button">Search</button>
+            <button type="submit" class="search-button">{{ t('search.searchBar.submit') }}</button>
         </div>
     </form>
     </template>

src/features/search/views/SearchResultsView.vue

@@ -17,6 +17,10 @@ limitations under the License.
 <script setup>
 import Searchbar from '@/features/search/components/Searchbar.vue';
 
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
 const props = defineProps(['searchQuery']);
 
 const searchQueryModel = defineModel();
@@ -28,8 +32,8 @@ searchQueryModel.value = props.searchQuery;
 
     <div class="search-results-error-message-container">
         <div class="search-results-error-message">
-            <p>Search is not available right now.</p>
-            <p>Please try again to another time.</p>
+            <p>{{ t('search.error.searchNotAvailable') }}</p>
+            <p>{{ t('error.tryAgainToAnotherTime') }}</p>
         </div>
     </div>
     <div class="search-results-container">

src/i18n.js

@@ -0,0 +1,51 @@
+/*
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { createI18n } from 'vue-i18n';
+import getCurrentLanguage from './utils/currentLanguage';
+
+export const fallbackLocale = 'en';
+
+const SUPPORTED_LANGUAGES = [
+    'en'
+];
+
+export const i18n = createI18n({
+    legacy: false,
+    locale: getCurrentLanguage(),
+    fallbackLocale: fallbackLocale,
+    messages: {}
+});
+
+const loadedLanguages = new Set();
+
+export async function loadLanguage (locale) {
+    if (!SUPPORTED_LANGUAGES.includes(locale)) {
+        locale = fallbackLocale;
+    }
+
+    if (loadedLanguages.has(locale)) {
+        i18n.global.locale.value = locale;
+        return;
+    };
+
+    const messages = (await import(`./locales/${locale}.json`)).default;
+
+    i18n.global.setLocaleMessage(locale, messages);
+    i18n.global.locale.value = locale;
+
+    loadedLanguages.add(locale);
+};

src/locales/en.json

@@ -0,0 +1,30 @@
+{
+    "search": {
+        "searchBar": {
+            "submit": "Search",
+            "placeholder": "Search..."
+        },
+        "error": {
+            "searchNotAvailable": "Search is not available right now."
+        }
+    },
+    "error": {
+        "tryAgainToAnotherTime": "Please try again to another time.",
+        "pageNotFound": "The page you are looking for does not exist. Please check the URL or return to the search page."
+    },
+    "links": {
+        "back": {
+            "search": "Back to Search"
+        }
+    },
+    "preferences": {
+        "colorScheme": {
+            "switch": {
+                "light": "Switch to light mode",
+                "dark": "Switch to dark mode",
+                "auto": "Switch to the system color scheme"
+            }
+        }
+    },
+    "slogan": "Built to search."
+}

src/main.js

@@ -16,8 +16,15 @@ limitations under the License.
 
 import { createApp } from 'vue'
 import App from './App.vue'
+import { i18n, loadLanguage } from './i18n';
+import getCurrentLanguage from './utils/currentLanguage';
 import router from './router'
 import './styles/common.css'
 import './styles/variables/colors.css'
 
-createApp(App).use(router).mount('#app')
+await loadLanguage(getCurrentLanguage());
+
+createApp(App)
+    .use(router)
+    .use(i18n)
+    .mount('#app')

src/utils/currentLanguage.js

@@ -0,0 +1,20 @@
+/*
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+export default function getCurrentLanguage () {
+    const locale = new Intl.Locale(navigator.language);
+    return locale.language;
+};

src/views/NotFound.vue

@@ -14,12 +14,20 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
+<script setup>
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+</script>
+
 <template>
     <div class="not-found">
        <span class="error-message">
-            The page you are looking for does not exist. Please check the URL or return to the search page.
+            {{ t('error.pageNotFound') }}
         </span>
-        <RouterLink to="/" id="link">Back to Search</RouterLink>
+        <RouterLink to="/" id="link">
+            {{ t('links.back.search') }}
+        </RouterLink>
     </div>
 </template>
 

src/views/SearchView.vue

@@ -18,8 +18,10 @@ limitations under the License.
 import Searchbar from '../features/search/components/Searchbar.vue';
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
 import logo from '@/assets/logo.svg';
 
+const { t } = useI18n();
 const router = useRouter();
 
 const searchQuery = ref('');
@@ -34,7 +36,7 @@ const submitSearch = function () {
     <header class="global-header">
         <img :src="logo" alt="Seekra" class="header-logo" />
         <span class="slogan">
-            Built to search.
+            {{ t('slogan') }}
         </span>
     </header>