From 00562ed5e87a88a7038b4670f20e155c4f5b070d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8E=AB=E9=A2=93?= <it_motui@163.com>
Date: Mon, 23 Oct 2023 15:14:34 +0800
Subject: [PATCH] feat(i18n): home page (#687)

(cherry picked from commit 9d39826078ceb929a5ca3b577f9f39449303c289)
---
 locales/en.yml                   | 27 ++++++++++++++++++++++++++-
 src/components/NavbarButtons.vue | 16 ++++++++--------
 src/layouts/base.layout.vue      | 10 +++++-----
 src/pages/Home.page.vue          | 16 ++++++++--------
 4 files changed, 47 insertions(+), 22 deletions(-)

diff --git a/locales/en.yml b/locales/en.yml
index dfe668e7..1f31b68a 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -1,6 +1,30 @@
 home:
   categories:
     newestTools: Newest tools
+    favoriteTools: 'Your favorite tools'
+    allTools: 'All the tools'
+  subtitle: 'Handy tools for developers'
+  toggleMenu: 'Toggle menu'
+  home: Home
+  uiLib: 'UI Lib'
+  buyMeACoffee: 'Buy me a coffee'
+  follow:
+    title: 'You like it-tools?'
+    p1: 'Give us a star on'
+    githubRepository: 'IT-Tools GitHub repository'
+    p2: 'or follow us on'
+    twitterAccount: 'IT-Tools Twitter account'
+    thankYou: 'Thank you !'
+  nav:
+    github: 'GitHub repository'
+    githubRepository: 'IT-Tools GitHub repository'
+    twitter: 'Twitter account'
+    twitterAccount: 'IT Tools Twitter account'
+    about: 'About  IT-Tools'
+    aboutLabel: 'About'
+    darkMode: 'Dark mode'
+    lightMode: 'Light mode'
+    mode: 'Toggle dark/light mode'
 about:
   h1: 'About IT-Tools'
   h1p1: 'This wonderful website, made with ❤ by'
@@ -23,4 +47,5 @@ about:
   maybe: 'Maybe the cache is doing tricky things, try force-refreshing?'
   backHome: 'Back home'
 toolCard:
-  new: New
\ No newline at end of file
+  new: New
+  
\ No newline at end of file
diff --git a/src/components/NavbarButtons.vue b/src/components/NavbarButtons.vue
index 653afdd2..cfc58cdd 100644
--- a/src/components/NavbarButtons.vue
+++ b/src/components/NavbarButtons.vue
@@ -7,39 +7,39 @@ const { isDarkTheme } = toRefs(styleStore);
 </script>
 
 <template>
-  <c-tooltip tooltip="Github repository" position="bottom">
+  <c-tooltip :tooltip="$t('home.nav.github')" position="bottom">
     <c-button
       circle
       variant="text"
       href="https://github.com/CorentinTh/it-tools"
       target="_blank"
       rel="noopener noreferrer"
-      aria-label="IT-Tools' GitHub repository"
+      :aria-label="$t('home.nav.githubRepository')"
     >
       <n-icon size="25" :component="BrandGithub" />
     </c-button>
   </c-tooltip>
 
-  <c-tooltip tooltip="Twitter account" position="bottom">
+  <c-tooltip :tooltip="$t('home.nav.twitter')" position="bottom">
     <c-button
       circle
       variant="text"
       href="https://twitter.com/ittoolsdottech"
       rel="noopener"
       target="_blank"
-      aria-label="IT Tools' Twitter account"
+      :aria-label="$t('home.nav.twitterAccount')"
     >
       <n-icon size="25" :component="BrandTwitter" />
     </c-button>
   </c-tooltip>
 
-  <c-tooltip tooltip="About IT-Tools" position="bottom">
-    <c-button circle variant="text" to="/about" aria-label="About">
+  <c-tooltip :tooltip="$t('home.nav.about')" position="bottom">
+    <c-button circle variant="text" to="/about" :aria-label="$t('home.nav.aboutLabel')">
       <n-icon size="25" :component="InfoCircle" />
     </c-button>
   </c-tooltip>
-  <c-tooltip :tooltip="isDarkTheme ? 'Light mode' : 'Dark mode'" position="bottom">
-    <c-button circle variant="text" aria-label="Toggle dark/light mode" @click="() => styleStore.toggleDark()">
+  <c-tooltip :tooltip="isDarkTheme ? $t('home.nav.lightMode') : $t('home.nav.darkMode')" position="bottom">
+    <c-button circle variant="text" :aria-label="$t('home.nav.mode')" @click="() => styleStore.toggleDark()">
       <n-icon v-if="isDarkTheme" size="25" :component="Sun" />
       <n-icon v-else size="25" :component="Moon" />
     </c-button>
diff --git a/src/layouts/base.layout.vue b/src/layouts/base.layout.vue
index 4f9e4cd1..2bbb67fb 100644
--- a/src/layouts/base.layout.vue
+++ b/src/layouts/base.layout.vue
@@ -41,7 +41,7 @@ const tools = computed<ToolCategory[]>(() => [
           </div>
           <div class="divider" />
           <div class="subtitle">
-            Handy tools for developers
+            {{ $t('home.subtitle') }}
           </div>
         </div>
       </RouterLink>
@@ -88,20 +88,20 @@ const tools = computed<ToolCategory[]>(() => [
         <c-button
           circle
           variant="text"
-          aria-label="Toggle menu"
+          :aria-label="$t('home.toggleMenu')"
           @click="styleStore.isMenuCollapsed = !styleStore.isMenuCollapsed"
         >
           <NIcon size="25" :component="Menu2" />
         </c-button>
 
         <c-tooltip tooltip="Home" position="bottom">
-          <c-button to="/" circle variant="text" aria-label="Home">
+          <c-button to="/" circle variant="text" :aria-label="$t('home.home')">
             <NIcon size="25" :component="Home2" />
           </c-button>
         </c-tooltip>
 
         <c-tooltip tooltip="UI Lib" position="bottom">
-          <c-button v-if="config.app.env === 'development'" to="/c-lib" circle variant="text" aria-label="UI Lib">
+          <c-button v-if="config.app.env === 'development'" to="/c-lib" circle variant="text" :aria-label="$t('home.uiLib')">
             <icon-mdi:brush-variant text-20px />
           </c-button>
         </c-tooltip>
@@ -122,7 +122,7 @@ const tools = computed<ToolCategory[]>(() => [
             :bordered="false"
             @click="() => tracker.trackEvent({ eventName: 'Support button clicked' })"
           >
-            Buy me a coffee
+            {{ $t('home.buyMeACoffee') }}
             <NIcon v-if="!styleStore.isSmallScreen" :component="Heart" ml-2 />
           </c-button>
         </c-tooltip>
diff --git a/src/pages/Home.page.vue b/src/pages/Home.page.vue
index 5c7c3c4f..7f34081b 100644
--- a/src/pages/Home.page.vue
+++ b/src/pages/Home.page.vue
@@ -17,21 +17,21 @@ const { t } = useI18n();
     <div class="grid-wrapper">
       <n-grid v-if="config.showBanner" x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
         <n-gi>
-          <ColoredCard title="You like it-tools?" :icon="Heart">
-            Give us a star on
+          <ColoredCard :title="$t('home.follow.title')" :icon="Heart">
+            {{ $t('home.follow.p1') }}
             <a
               href="https://github.com/CorentinTh/it-tools"
               rel="noopener"
               target="_blank"
-              aria-label="IT-Tools' GitHub repository"
+              :aria-label="$t('home.follow.githubRepository')"
             >GitHub</a>
-            or follow us on
+            {{ $t('home.follow.p2') }}
             <a
               href="https://twitter.com/ittoolsdottech"
               rel="noopener"
               target="_blank"
-              aria-label="IT-Tools' Twitter account"
-            >Twitter</a>! Thank you
+              :aria-label="$t('home.follow.twitterAccount')"
+            >Twitter</a>{{ $t('home.follow.thankYou') }}
             <n-icon :component="Heart" />
           </ColoredCard>
         </n-gi>
@@ -39,7 +39,7 @@ const { t } = useI18n();
 
       <transition name="height">
         <div v-if="toolStore.favoriteTools.length > 0">
-          <n-h3>Your favorite tools</n-h3>
+          <n-h3>{{ $t('home.categories.favoriteTools') }}</n-h3>
           <n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
             <n-gi v-for="tool in toolStore.favoriteTools" :key="tool.name">
               <ToolCard :tool="tool" />
@@ -57,7 +57,7 @@ const { t } = useI18n();
         </n-grid>
       </div>
 
-      <n-h3>All the tools</n-h3>
+      <n-h3>{{ $t('home.categories.allTools') }}</n-h3>
       <n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
         <n-gi v-for="tool in toolStore.tools" :key="tool.name">
           <transition>