feat(i18n): home page (#687)

(cherry picked from commit 9d39826078ceb929a5ca3b577f9f39449303c289)

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'
@@ -24,3 +48,4 @@ about:
   backHome: 'Back home'
 toolCard:
   new: New
+  

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-tooltip :tooltip="$t('home.nav.about')" position="bottom">
-    <c-button circle variant="text" to="/about" aria-label="About">
+    <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-tooltip :tooltip="isDarkTheme ? $t('home.nav.lightMode') : $t('home.nav.darkMode')" position="bottom">
-    <c-button circle variant="text" aria-label="Toggle dark/light mode" @click="() => styleStore.toggleDark()">
+    <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>

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>

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">
+          <ColoredCard :title="$t('home.follow.title')" :icon="Heart">
-            Give us a star on
+            {{ $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"
+              :aria-label="$t('home.follow.twitterAccount')"
-            >Twitter</a>! Thank you
+            >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>