Merge branch 'main' into tools/mac-address-generator

.github/workflows/docker-nightly-release.yml

@@ -57,26 +57,26 @@ jobs:
         uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac # v4
 
       - name: Login to GitHub Container Registry
-        uses: docker/login-action@v2
+        uses: docker/login-action@v3
         with:
           registry: ghcr.io
           username: ${{ github.repository_owner }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Login to Docker Hub
-        uses: docker/login-action@v2
+        uses: docker/login-action@v3
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
 
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@v2
+        uses: docker/setup-qemu-action@v3
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2
+        uses: docker/setup-buildx-action@v3
 
       - name: Build and push
-        uses: docker/build-push-action@v4
+        uses: docker/build-push-action@v5
         with:
           context: .
           file: ./Dockerfile

.github/workflows/releases.yml

@@ -16,26 +16,26 @@ jobs:
         uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac # v4
 
       - name: Login to GitHub Container Registry
-        uses: docker/login-action@v2
+        uses: docker/login-action@v3
         with:
           registry: ghcr.io
           username: ${{ github.repository_owner }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Login to Docker Hub
-        uses: docker/login-action@v2
+        uses: docker/login-action@v3
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
 
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@v2
+        uses: docker/setup-qemu-action@v3
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2
+        uses: docker/setup-buildx-action@v3
 
       - name: Build and push
-        uses: docker/build-push-action@v4
+        uses: docker/build-push-action@v5
         with:
           context: .
           file: ./Dockerfile

.nvmrc

@@ -1 +1 @@
-18.18.0
+18.18.2

locales/en.yml

@@ -1,4 +1,51 @@
 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'
+  h1p2: ', aggregates useful tools for developer and people working in IT. If you find it useful, please feel free to share it to people you think may find it useful too and don''''t forget to bookmark it in your shortcut bar!'
+  h1p3: 'IT Tools is open-source (under the MIT license) and free, and will always be, but it costs me money to host and renew the domain name. If you want to support my work, and encourage me to add more tools, please consider supporting by'
+  h1p4: 'sponsoring me'
+  h2: Technologies
+  h2p1: 'IT Tools is made in Vue.js (Vue 3) with the the Naive UI component library and is hosted and continuously deployed by Vercel. Third-party open-source libraries are used in some tools, you may find the complete list in the'
+  h2p2: 'file of the repository.'
+  h3: 'Found a bug? A tool is missing?'
+  h3p1: 'If you need a tool that is currently not present here, and you think can be useful, you are welcome to submit a feature request in the'
+  h3p2: 'issues section'
+  h3p3: 'in the GitHub repository.'
+  h3p4: 'And if you found a bug, or something doesn''''t work as expected, please file a bug report in the'
+  h3p5: 'issues section'
+  h3p6: 'in the GitHub repository.'
+404:
+  notFound: '404 Not Found'
+  sorry: 'Sorry, this page does not seem to exist'
+  maybe: 'Maybe the cache is doing tricky things, try force-refreshing?'
+  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/components/ToolCard.vue

@@ -26,7 +26,7 @@ const appTheme = useAppTheme();
             :bordered="false"
             :color="{ color: theme.primaryColor, textColor: theme.tagColor }"
           >
-            New
+            {{ $t('toolCard.new') }}
           </n-tag>
 
           <FavoriteButton :tool="tool" />

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/404.page.vue

@@ -11,17 +11,17 @@ useHead({ title: 'Page not found - IT Tools' });
     </span>
 
     <h1 m-0 mt-3>
-      404 Not Found
+      {{ $t('404.notFound') }}
     </h1>
     <div mt-4 op-60>
-      Sorry, this page does not seem to exist
+      {{ $t('404.sorry') }}
     </div>
     <div mb-8 op-60>
-      Maybe the cache is doing tricky things, try force-refreshing?
+      {{ $t('404.maybe') }}
     </div>
 
     <c-button to="/">
-      Back home
+      {{ $t('404.backHome') }}
     </c-button>
   </div>
 </template>

src/pages/About.vue

@@ -8,62 +8,56 @@ const { tracker } = useTracker();
 
 <template>
   <div mx-auto mt-50px max-w-600px>
-    <h1>About IT-Tools</h1>
+    <h1>{{ $t('about.h1') }}</h1>
     <p text-justify>
-      This wonderful website, made with ❤ by
+      {{ $t('about.h1p1') }}
       <c-link href="https://github.com/CorentinTh" target="_blank" rel="noopener">
         Corentin Thomasset
-      </c-link>,
+      </c-link>{{ $t('about.h1p2') }}
-      aggregates useful tools for developer and people working in IT. If you find it useful, please feel free to share
-      it to people you think may find it useful too and don't forget to bookmark it in your shortcut bar!
     </p>
     <p text-justify>
-      IT Tools is open-source (under the MIT license) and free, and will always be, but it costs me money to host and
+      {{ $t('about.h1p3') }}
-      renew the domain name. If you want to support my work, and encourage me to add more tools, please consider
-      supporting by
       <c-link
         href="https://www.buymeacoffee.com/cthmsst"
         rel="noopener"
         target="_blank"
         @click="() => tracker.trackEvent({ eventName: 'Support button clicked' })"
       >
-        sponsoring me
+        {{ $t('about.h1p4') }}
       </c-link>.
     </p>
 
-    <h2>Technologies</h2>
+    <h2>{{ $t('about.h2') }}</h2>
     <p text-justify>
-      IT Tools is made in Vue.js (Vue 3) with the the Naive UI component library and is hosted and continuously deployed
+      {{ $t('about.h2p1') }}
-      by Vercel. Third-party open-source libraries are used in some tools, you may find the complete list in the
       <c-link href="https://github.com/CorentinTh/it-tools/blob/main/package.json" rel="noopener" target="_blank">
         package.json
       </c-link>
-      file of the repository.
+      {{ $t('about.h2p2') }}
     </p>
 
-    <h2>Found a bug? A tool is missing?</h2>
+    <h2>{{ $t('about.h3') }}</h2>
     <p text-justify>
-      If you need a tool that is currently not present here, and you think can be useful, you are welcome to submit a
+      {{ $t('about.h3p1') }}
-      feature request in the
       <c-link
         href="https://github.com/CorentinTh/it-tools/issues/new/choose"
         rel="noopener"
         target="_blank"
       >
-        issues section
+        {{ $t('about.h3p2') }}
       </c-link>
-      in the GitHub repository.
+      {{ $t('about.h3p3') }}
     </p>
     <p text-justify>
-      And if you found a bug, or something doesn't work as expected, please file a bug report in the
+      {{ $t('about.h3p4') }}
       <c-link
         href="https://github.com/CorentinTh/it-tools/issues/new/choose"
         rel="noopener"
         target="_blank"
       >
-        issues section
+        {{ $t('about.h3p5') }}
       </c-link>
-      in the GitHub repository.
+      {{ $t('about.h3p6') }}
     </p>
   </div>
 </template>

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>

src/plugins/i18n.plugin.ts

@@ -29,3 +29,9 @@ export const i18nPlugin: Plugin = {
     app.use(i18n);
   },
 };
+
+export const translate = function (localeKey: string) {
+  // @ts-expect-error global
+  const hasKey = i18n.global.te(localeKey, i18n.global.locale);
+  return hasKey ? i18n.global.t(localeKey) : localeKey;
+};

src/tools/token-generator/index.ts

@@ -1,11 +1,11 @@
 import { ArrowsShuffle } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'Token generator',
+  name: translate('tools.token-generator.title'),
   path: '/token-generator',
-  description:
+  description: translate('tools.token-generator.description'),
-    'Generate random string with the chars you want: uppercase or lowercase letters, numbers and/or symbols.',
   keywords: ['token', 'random', 'string', 'alphanumeric', 'symbols', 'number', 'letters', 'lowercase', 'uppercase'],
   component: () => import('./token-generator.tool.vue'),
   icon: ArrowsShuffle,

src/tools/token-generator/locales/en.yml

@@ -6,4 +6,10 @@ tools:
     uppercase: Uppercase (ABC...)
     lowercase: Lowercase (abc...)
     numbers: Numbers (123...)
-    symbols: Symbols (!-;...)
+    symbols: Symbols (!-;...)
+    length: Length
+    tokenPlaceholder: 'The token...'
+    copied: Token copied to the clipboard
+    button:
+      copy: Copy
+      refresh: Refresh

src/tools/token-generator/token-generator.tool.vue

@@ -21,7 +21,7 @@ const [token, refreshToken] = computedRefreshable(() =>
   }),
 );
 
-const { copy } = useCopy({ source: token, text: 'Token copied to the clipboard' });
+const { copy } = useCopy({ source: token, text: t('tools.token-generator.copied') });
 </script>
 
 <template>
@@ -51,14 +51,14 @@ const { copy } = useCopy({ source: token, text: 'Token copied to the clipboard'
         </div>
       </n-form>
 
-      <n-form-item :label="`Length (${length})`" label-placement="left">
+      <n-form-item :label="`${t('tools.token-generator.length')} (${length})`" label-placement="left">
         <n-slider v-model:value="length" :step="1" :min="1" :max="512" />
       </n-form-item>
 
       <c-input-text
         v-model:value="token"
         multiline
-        placeholder="The token..."
+        :placeholder="t('tools.token-generator.tokenPlaceholder')"
         readonly
         rows="3"
         autosize
@@ -67,10 +67,10 @@ const { copy } = useCopy({ source: token, text: 'Token copied to the clipboard'
 
       <div mt-5 flex justify-center gap-3>
         <c-button @click="copy()">
-          Copy
+          {{ t('tools.token-generator.button.copy') }}
         </c-button>
         <c-button @click="refreshToken">
-          Refresh
+          {{ t('tools.token-generator.button.refresh') }}
         </c-button>
       </div>
     </c-card>