From 283688452f0c2e55e3509e77c2181382357b37b1 Mon Sep 17 00:00:00 2001
From: LittleSheep <littlesheep.code@hotmail.com>
Date: Tue, 13 Aug 2024 16:00:58 +0800
Subject: [PATCH] :globe_with_meridians: Add i18n tool chain and landing page
 translation to simplified chinese

---
 app.vue             |  1 +
 i18n.config.ts      |  3 +++
 lang/en-US.json     |  9 +++++++++
 lang/zh-CN.json     |  9 +++++++++
 layouts/default.vue | 25 +++++++++++++++++++++++++
 nuxt.config.ts      | 18 ++++++++++++++++++
 package.json        |  1 +
 pages/index.vue     | 23 ++++++++++++-----------
 8 files changed, 78 insertions(+), 11 deletions(-)
 create mode 100644 i18n.config.ts
 create mode 100644 lang/en-US.json
 create mode 100644 lang/zh-CN.json

diff --git a/app.vue b/app.vue
index 45d7509..4ea47a4 100644
--- a/app.vue
+++ b/app.vue
@@ -1,5 +1,6 @@
 <template>
   <v-app>
+    <nuxt-loading-indicator color="white" />
     <nuxt-layout>
       <nuxt-page />
     </nuxt-layout>
diff --git a/i18n.config.ts b/i18n.config.ts
new file mode 100644
index 0000000..0f50286
--- /dev/null
+++ b/i18n.config.ts
@@ -0,0 +1,3 @@
+export default defineI18nConfig(() => ({
+  fallbackLocale: 'en',
+}))
diff --git a/lang/en-US.json b/lang/en-US.json
new file mode 100644
index 0000000..0a2bf4a
--- /dev/null
+++ b/lang/en-US.json
@@ -0,0 +1,9 @@
+{
+  "brandName": "Solsynth",
+  "brandNameFormal": "Solsynth LLC",
+  "indexIntroduce": "An energetic software company that create wonderful software which everyone love.",
+  "indexProductListHint": "See some of our products just there",
+  "indexActivities": "Activities",
+  "indexActivitiesCaption": "Keep in touch,\nand learn what we doing recently.",
+  "indexActivitiesHint": "See some posts in our realm just here"
+}
diff --git a/lang/zh-CN.json b/lang/zh-CN.json
new file mode 100644
index 0000000..1982c52
--- /dev/null
+++ b/lang/zh-CN.json
@@ -0,0 +1,9 @@
+{
+  "brandName": "索尔辛茨",
+  "brandNameFormal": "索尔辛茨实业有限公司",
+  "indexIntroduce": "一家充满活力的软件公司，创造了人人喜爱的精彩软件。",
+  "indexProductListHint": "在这里看看我们的一些产品",
+  "indexActivities": "动态",
+  "indexActivitiesCaption": "开发软件，闭门造车是大忌，了解我们最近在做什么。",
+  "indexActivitiesHint": "看看我们领域中的一些帖子"
+}
diff --git a/layouts/default.vue b/layouts/default.vue
index 013aea5..8d1287f 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -13,6 +13,29 @@
 
       <v-spacer></v-spacer>
 
+      <v-menu>
+        <template v-slot:activator="{ props }">
+          <v-btn
+            size="small"
+            icon="mdi-translate"
+            v-bind="props"
+          />
+        </template>
+        <v-list>
+          <v-list-item
+            class="w-48"
+            density="compact"
+            v-for="item in locales"
+            :key="item.code"
+            :value="item.code"
+            :active="locale == item.code"
+            @click.prevent.stop="setLocale(item.code)"
+          >
+            <v-list-item-title>{{ item.name }}</v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+
       <user-menu />
     </v-container>
   </v-app-bar>
@@ -24,6 +47,8 @@
 
 <script setup lang="ts">
 import Logo from "../assets/logo-w-shadow.png"
+
+const { locale, locales, setLocale } = useI18n()
 </script>
 
 <style scoped>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 8cdc4a3..6fb590e 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -13,6 +13,23 @@ export default defineNuxtConfig({
     ],
   },
 
+  i18n: {
+    strategy: "no_prefix",
+    detectBrowserLanguage: {
+      useCookie: true,
+      cookieCrossOrigin: true,
+      cookieKey: "__capital_i18n",
+      redirectOn: "root",
+    },
+    locales: [
+      { code: "en", name: "English", file: "en-US.json" },
+      { code: "zh-CN", name: "简体中文", file: "zh-CN.json" },
+    ],
+    lazy: true,
+    langDir: "lang",
+    defaultLocale: "en",
+  },
+
   css: ["@/assets/index.css"],
 
   runtimeConfig: {
@@ -70,6 +87,7 @@ export default defineNuxtConfig({
     "@nuxt/image",
     "@nuxtjs/sitemap",
     "@pinia/nuxt",
+    "@nuxtjs/i18n",
     (_options, nuxt) => {
       nuxt.hooks.hook("vite:extendConfig", (config) => {
         // @ts-expect-error
diff --git a/package.json b/package.json
index 68ece5f..938f087 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@mdi/font": "^7.4.47",
     "@nuxt/content": "^2.13.2",
     "@nuxt/image": "^1.7.0",
+    "@nuxtjs/i18n": "^8.3.3",
     "@nuxtjs/sitemap": "^6.0.0-beta.1",
     "@pinia/nuxt": "^0.5.3",
     "nuxt": "^3.12.4",
diff --git a/pages/index.vue b/pages/index.vue
index 15e158f..a9d5eab 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -2,13 +2,13 @@
   <v-container class="flex flex-col my-2 gap-[4rem]">
     <v-row class="content-section">
       <v-col cols="12" md="4" class="flex justify-start">
-        <div>
-          <h1 class="text-4xl font-bold">Solsynth</h1>
-          <p class="text-lg mt-3">
-            An energetic software company that create wonderful software which everyone love.
+        <div class="flex flex-col items-start">
+          <h1 class="text-4xl font-bold">{{ t("brandName") }}</h1>
+          <p class="text-lg mt-3 max-w-2/3">
+            {{ t("indexIntroduce") }}
           </p>
           <p class="text-grey mt-2">
-            See some of our products just there
+            {{ t("indexProductListHint") }}
             <v-icon icon="mdi-arrow-right" size="16" class="mb-0.5" />
           </p>
         </div>
@@ -26,15 +26,14 @@
         </v-card>
       </v-col>
       <v-col cols="12" md="4" class="flex justify-end" order="first" order-md="last">
-        <div class="text-right">
-          <h1 class="text-4xl font-bold">Activities</h1>
-          <p class="text-lg mt-3">
-            Keep in touch, <br />
-            and learn what we doing recently.
+        <div class="text-right flex flex-col items-end">
+          <h1 class="text-4xl font-bold">{{ t("indexActivities") }}</h1>
+          <p class="text-lg mt-3 max-w-2/3">
+            {{ t("indexActivitiesCaption") }}
           </p>
           <p class="text-grey mt-2">
             <v-icon icon="mdi-arrow-left" size="16" class="mb-0.5" />
-            See some posts in our realm just here
+            {{ t("indexActivitiesHint") }}
           </p>
         </div>
       </v-col>
@@ -43,6 +42,8 @@
 </template>
 
 <script setup lang="ts">
+const { t } = useI18n()
+
 const { data: products } = await useAsyncData("products", () => queryContent("/products").where({ archived: { $ne: true } }).limit(5).find())
 </script>