feat: i18n

components/account/AccountPostsFollowers.vue

@@ -8,14 +8,26 @@ defineProps<{
 
 <template>
   <div flex gap-5>
-    <NuxtLink :to="getAccountPath(account)" exact-active-class="text-primary">
+    <NuxtLink :to="getAccountPath(account)" text-secondary exact-active-class="text-primary">
-      <span font-bold>{{ formattedNumber(account.statusesCount) }}</span> <span text-secondary>Posts</span>
+      <template #default="{ isExactActive }">
+        <i18n-t keypath="account.posts">
+          <span font-bold :class="isExactActive ? 'text-primary' : 'text-base'">{{ formattedNumber(account.statusesCount) }}</span>
+        </i18n-t>
+      </template>
     </NuxtLink>
-    <NuxtLink :to="`${getAccountPath(account)}/following`" exact-active-class="text-primary">
+    <NuxtLink :to="`${getAccountPath(account)}/following`" text-secondary exact-active-class="text-primary">
-      <span font-bold>{{ humanReadableNumber(account.followingCount) }}</span> <span text-secondary>Following</span>
+      <template #default="{ isExactActive }">
+        <i18n-t keypath="account.following">
+          <span font-bold :class="isExactActive ? 'text-primary' : 'text-base'">{{ humanReadableNumber(account.followingCount) }}</span>
+        </i18n-t>
+      </template>
     </NuxtLink>
-    <NuxtLink :to="`${getAccountPath(account)}/followers`" exact-active-class="text-primary">
+    <NuxtLink :to="`${getAccountPath(account)}/followers`" text-secondary exact-active-class="text-primary">
-      <span font-bold>{{ humanReadableNumber(account.followersCount) }}</span> <span text-secondary>Followers</span>
+      <template #default="{ isExactActive }">
+        <i18n-t keypath="account.following">
+          <span font-bold :class="isExactActive ? 'text-primary' : 'text-base'">{{ humanReadableNumber(account.followersCount) }}</span>
+        </i18n-t>
+      </template>
     </NuxtLink>
   </div>
 </template>

locales/en-US.json

@@ -9,5 +9,10 @@
     "favourites": "Favourites",
     "bookmarks": "Bookmarks",
     "profile": "Profile"
+  },
+  "account": {
+    "posts": "{0} Posts",
+    "following": "{0} Following",
+    "followers": "{0} Followers"
   }
 }

locales/zh-CN.json

@@ -9,5 +9,10 @@
     "local": "本地",
     "notifications": "通知",
     "profile": "个人资料"
+  },
+  "account": {
+    "followers": "被 {0} 人关注",
+    "following": "正在关注 {0} 人",
+    "posts": "{0} 条帖文"
   }
 }

pages/favourites.vue

@@ -1,19 +1,22 @@
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
 definePageMeta({
   middleware: 'auth',
 })
 
 const paginator = useMasto().favourites.getIterator()
+const { t } = useI18n()
 
 useHead({
-  title: 'Favourites',
+  title: () => t('nav_side.favourites'),
 })
 </script>
 
 <template>
   <MainContent>
     <template #title>
-      <span text-lg font-bold>Favourites</span>
+      <span text-lg font-bold>{{ t('nav_side.favourites') }}</span>
     </template>
     <slot>
       <TimelinePaginator :paginator="paginator" />

pages/home.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
 definePageMeta({
   middleware: 'auth',
   alias: ['/signin/callback'],
@@ -10,12 +12,17 @@ if (useRoute().path === '/signin/callback') {
 }
 
 const paginator = useMasto().timelines.getHomeIterable()
+
+const { t } = useI18n()
+useHead({
+  title: () => t('nav_side.home'),
+})
 </script>
 
 <template>
   <MainContent>
     <template #title>
-      <span text-lg font-bold>Home</span>
+      <span text-lg font-bold>{{ $t('nav_side.home') }}</span>
     </template>
     <slot>
       <PublishWidget draft-key="home" border="b base" />