🌐 Localize more pages

lang/en-US.json

@@ -32,5 +32,13 @@
   "multiFactorHint": "Check your inbox",
   "multiFactorTypeEmail": "Email One-time-password",
   "signInCompleted": "All Done",
-  "signInCompletedCaption": "Welcome back! You just signed in right now! We're going to direct you to dashboard..."
+  "signInCompletedCaption": "Welcome back! You just signed in right now! We're going to direct you to dashboard...",
+  "transferredToSolianHint": "This part of the functionality has been transferred to our application Solian, please download it or open it in your browser. To learn more, please visit the project description page.",
+  "personalize": "Personalize",
+  "personalizeCaption": "Bring your own color to the Solar Network.",
+  "security": "Security",
+  "securityCaption": "Guard your Solar Network account.",
+  "userActivity": "Activity",
+  "userActivityCaption": "Recent posts of this user.",
+  "productArchived": "Archived"
 }

lang/zh-CN.json

@@ -32,5 +32,13 @@
   "multiFactorHint": "检查您的收件箱",
   "multiFactorTypeEmail": "电子邮件一次性密码",
   "signInCompleted": "完成",
-  "signInCompletedCaption": "欢迎回来！您刚刚登录成功！我们将引导您进入仪表板..."
+  "signInCompletedCaption": "欢迎回来！您刚刚登录成功！我们将引导您进入仪表板...",
+  "transferredToSolianHint": "此部分功能已转移到我们的应用程序 Solian，请下载或在浏览器中打开。如需了解更多信息，请访问项目描述页面。",
+  "personalize": "个性化",
+  "personalizeCaption": "为 Solar Network 染上你的色彩。",
+  "security": "安全",
+  "securityCaption": "保护您的 Solar Network 账户。",
+  "userActivity": "活动",
+  "userActivityCaption": "此用户的最新帖子。",
+  "productArchived": "已归档"
 }

middleware/auth.ts

@@ -1,7 +1,7 @@
 export default defineNuxtRouteMiddleware((to, from) => {
-  const state = useLoggedInState();
+  const id = useUserinfo();
 
-  if (!state.value) {
+  if (!id.isLoggedIn) {
     return navigateTo(`/auth/sign-in?redirect_uri=${to.fullPath}`)
   }
 })

pages/products/[...slug].vue

@@ -18,7 +18,7 @@
               size="small"
               class="mx-[-6px]"
             >
-              Archived
+              {{ t("productArchived") }}
             </v-chip>
           </v-col>
         </v-row>
@@ -41,10 +41,10 @@
         </template>
         <template #not-found>
           <v-empty-state
-              icon="mdi-flask-empty-remove-outline"
-              text="We haven't this product, yet."
-              title="Not Found"
-              class="no-content-placeholder"
+            icon="mdi-flask-empty-remove-outline"
+            text="We haven't this product, yet."
+            title="Not Found"
+            class="no-content-placeholder"
           >
             <template #actions>
               <v-btn prepend-icon="mdi-list-box" variant="plain" text="Back to index" to="/products" exact />
@@ -64,8 +64,10 @@
 </style>
 
 <script setup lang="ts">
-const route = useRoute();
-const { data: page } = await useAsyncData('page', queryContent(route.path).findOne)
+const route = useRoute()
+
+const { t } = useI18n()
+const { data: page } = await useAsyncData("page", queryContent(route.path).findOne)
 </script>
 
 <style scoped>

pages/products/index.vue

@@ -18,7 +18,7 @@
               size="small"
               class="mx-[-6px]"
             >
-              Archived
+              {{ t("productArchived") }}
             </v-chip>
           </v-col>
         </v-row>
@@ -29,9 +29,11 @@
 
 <script setup lang="ts">
 useHead({
-  title: 'Products',
+  title: "Products",
 })
 
+const { t } = useI18n()
+
 const { data: products } = await useAsyncData("products", () => queryContent("/products").find())
 </script>
 

pages/users/[...name].vue

@@ -13,12 +13,14 @@
 
       <div class="mb-5 text-xs text-grey flex flex-col">
         <span>Solar Network User Web Preview</span>
-        <span>To get full view of this user's profile, open it on <a class="underline" :href="externalOpenLink">Solian</a></span>
+        <span>
+          To get full view of this user's profile, open it on <a class="underline" :href="externalOpenLink">Solian</a>
+        </span>
       </div>
 
       <div>
-        <h1 class="text-xl">Activity</h1>
-        <span>Recent posts of this user.</span>
+        <h1 class="text-xl">{{ t("userActivity") }}</h1>
+        <span>{{ t("userActivityCaption") }}</span>
       </div>
     </div>
 
@@ -32,9 +34,10 @@
 
 <script setup lang="ts">
 definePageMeta({
-  alias: ["/@:name(.*)*"]
+  alias: ["/@:name(.*)*"],
 })
 
+const { t } = useI18n()
 const route = useRoute()
 const config = useRuntimeConfig()
 

pages/users/me.vue

@@ -13,8 +13,8 @@
 
       <div class="mb-5">
         <div class="mx-[2.5ch]">
-          <h2 class="text-xl">Personalize</h2>
-          <span class="text-sm">Bring your own color to the Solar Network.</span>
+          <h2 class="text-xl">{{ t("personalize") }}</h2>
+          <span class="text-sm">{{ t("personalizeCaption") }}</span>
         </div>
 
         <v-alert
@@ -22,14 +22,14 @@
           type="info"
           variant="tonal"
           density="comfortable"
-          text="This part of the functionality has been transferred to our application Solian, please download it or open it in your browser. To learn more, please visit the project description page."
+          :text="t('transferredToSolianHint')"
         />
       </div>
 
       <div class="mb-5">
         <div class="mx-[2.5ch]">
-          <h2 class="text-xl">Security</h2>
-          <span class="text-sm">Guard your Solar Network account.</span>
+          <h2 class="text-xl">{{ t("security") }}</h2>
+          <span class="text-sm">{{ t("securityCaption") }}</span>
         </div>
 
         <account-auth-ticket-table class="mt-3" />
@@ -47,6 +47,7 @@ definePageMeta({
   middleware: ["auth"],
 })
 
+const { t } = useI18n()
 const config = useRuntimeConfig()
 
 const auth = useUserinfo()