feat(i18n): language selector (#710)

components.d.ts

@@ -98,6 +98,7 @@ declare module '@vue/runtime-core' {
     IconMdiRecord: typeof import('~icons/mdi/record')['default']
     IconMdiRefresh: typeof import('~icons/mdi/refresh')['default']
     IconMdiSearch: typeof import('~icons/mdi/search')['default']
+    IconMdiTranslate: typeof import('~icons/mdi/translate')['default']
     IconMdiVideo: typeof import('~icons/mdi/video')['default']
     InputCopyable: typeof import('./src/components/InputCopyable.vue')['default']
     IntegerBaseConverter: typeof import('./src/tools/integer-base-converter/integer-base-converter.vue')['default']
@@ -114,6 +115,7 @@ declare module '@vue/runtime-core' {
     JwtParser: typeof import('./src/tools/jwt-parser/jwt-parser.vue')['default']
     KeycodeInfo: typeof import('./src/tools/keycode-info/keycode-info.vue')['default']
     ListConverter: typeof import('./src/tools/list-converter/list-converter.vue')['default']
+    LocaleSelector: typeof import('./src/modules/i18n/components/locale-selector.vue')['default']
     LoremIpsumGenerator: typeof import('./src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue')['default']
     MacAddressGenerator: typeof import('./src/tools/mac-address-generator/mac-address-generator.vue')['default']
     MacAddressLookup: typeof import('./src/tools/mac-address-lookup/mac-address-lookup.vue')['default']

locales/en.yml

@@ -28,7 +28,7 @@ home:
 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!'
+  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
@@ -38,7 +38,7 @@ about:
   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'
+  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:
@@ -48,4 +48,18 @@ about:
   backHome: 'Back home'
 toolCard:
   new: New
-  
+search:
+  label: Search
+tools:
+  categories:
+    favorite-tools: 'Your favorite tools'
+    crypto: Crypto
+    converter: Converter
+    web: Web
+    images and videos: 'Images & Videos'
+    development: Development
+    network: Network
+    math: Math
+    measurement: Measurement
+    text: Text
+    data: Data

locales/fr.yml

@@ -1,3 +1,49 @@
 home:
   categories:
-    newestTools: "Nouveaux outils"
+    newestTools: 'Les nouveaux outils'
+    favoriteTools: 'Vos outils favoris'
+    allTools: 'Tous les outils'
+  subtitle: 'Outils pour les développeurs'
+  toggleMenu: 'Menu'
+  home: Accueil
+  uiLib: 'UI Lib'
+  buyMeACoffee: 'Soutenez IT-Tools'
+  follow:
+    title: 'Vous aimez it-tools ?'
+    p1: 'Soutenez-nous avec une star sur'
+    githubRepository: "le dépôt GitHub d'IT-Tools"
+    p2: 'ou suivez-nous sur'
+    twitterAccount: "le compte Twitter d'IT-Tools"
+    thankYou: 'Merci !'
+  nav:
+    github: 'Dépôt GitHub'
+    githubRepository: "Dépôt GitHub d'IT-Tools"
+    twitter: 'Compte Twitter'
+    twitterAccount: "Compte Twitter d'IT-Tools"
+    about: "À propos d'IT-Tools"
+    aboutLabel: 'À propos'
+    darkMode: 'Mode sombre'
+    lightMode: 'Mode clair'
+    mode: 'Basculer le mode sombre/clair'
+404:
+  notFound: '404 Not Found'
+  sorry: "Désolé, cette page n'existe pas"
+  maybe: 'Peut-être que le cache fait des siennes, essayez de forcer le rafraîchissement ?'
+  backHome: "Retour à l'accueil"
+toolCard:
+  new: Nouveau
+search:
+  label: Rechercher
+tools:
+  categories:
+    favorite-tools: 'Vos outils favoris'
+    crypto: Cryptographie
+    converter: Convertisseur
+    web: Web
+    images and videos: 'Images & Vidéos'
+    development: Développement
+    network: Réseau
+    math: Math
+    measurement: Mesure
+    text: Texte
+    data: Données

src/App.vue

@@ -11,6 +11,13 @@ const styleStore = useStyleStore();
 
 const theme = computed(() => (styleStore.isDarkTheme ? darkTheme : null));
 const themeOverrides = computed(() => (styleStore.isDarkTheme ? darkThemeOverrides : lightThemeOverrides));
+
+const { locale } = useI18n();
+
+syncRef(
+  locale,
+  useStorage('locale', locale),
+);
 </script>
 
 <template>

src/components/CollapsibleToolMenu.vue

@@ -36,7 +36,7 @@ const menuOptions = computed(() =>
     tools: components.map(tool => ({
       label: makeLabel(tool),
       icon: makeIcon(tool),
-      key: tool.name,
+      key: tool.path,
     })),
   })),
 );
@@ -62,7 +62,7 @@ const themeVars = useThemeVars();
 
         <n-menu
           class="menu"
-          :value="route.name as string"
+          :value="route.path"
           :collapsed-width="64"
           :collapsed-icon-size="22"
           :options="tools"

src/layouts/base.layout.vue

@@ -4,10 +4,10 @@ import { NIcon, useThemeVars } from 'naive-ui';
 import { RouterLink } from 'vue-router';
 import { Heart, Home2, Menu2 } from '@vicons/tabler';
 
+import { storeToRefs } from 'pinia';
 import HeroGradient from '../assets/hero-gradient.svg?component';
 import MenuLayout from '../components/MenuLayout.vue';
 import NavbarButtons from '../components/NavbarButtons.vue';
-import { toolsByCategory } from '@/tools';
 import { useStyleStore } from '@/stores/style.store';
 import { config } from '@/config';
 import type { ToolCategory } from '@/tools/tools.types';
@@ -21,12 +21,14 @@ const version = config.app.version;
 const commitSha = config.app.lastCommitSha.slice(0, 7);
 
 const { tracker } = useTracker();
+const { t } = useI18n();
 
 const toolStore = useToolStore();
+const { favoriteTools, toolsByCategory } = storeToRefs(toolStore);
 
 const tools = computed<ToolCategory[]>(() => [
-  ...(toolStore.favoriteTools.length > 0 ? [{ name: 'Your favorite tools', components: toolStore.favoriteTools }] : []),
-  ...toolsByCategory,
+  ...(favoriteTools.value.length > 0 ? [{ name: t('tools.categories.favorite-tools'), components: favoriteTools.value }] : []),
+  ...toolsByCategory.value,
 ]);
 </script>
 
@@ -47,8 +49,12 @@ const tools = computed<ToolCategory[]>(() => [
       </RouterLink>
 
       <div class="sider-content">
-        <div v-if="styleStore.isSmallScreen" flex justify-center>
-          <NavbarButtons />
+        <div v-if="styleStore.isSmallScreen" flex flex-col items-center>
+          <locale-selector w="90%" />
+
+          <div flex justify-center>
+            <NavbarButtons />
+          </div>
         </div>
 
         <CollapsibleToolMenu :tools-by-category="tools" />
@@ -108,6 +114,8 @@ const tools = computed<ToolCategory[]>(() => [
 
         <command-palette />
 
+        <locale-selector v-if="!styleStore.isSmallScreen" />
+
         <div>
           <NavbarButtons v-if="!styleStore.isSmallScreen" />
         </div>

src/modules/command-palette/command-palette.vue

@@ -116,7 +116,7 @@ function activateOption(option: PaletteOption) {
       <span flex items-center gap-3 op-40>
 
         <icon-mdi-search />
-        Search...
+        {{ $t('search.label') }}
 
         <span hidden flex-1 border border-current border-op-40 rounded border-solid px-5px py-3px sm:inline>
           {{ isMac ? 'Cmd' : 'Ctrl' }}&nbsp;+&nbsp;K

src/modules/i18n/components/locale-selector.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+const { availableLocales, locale } = useI18n();
+
+const localesLong: Record<string, string> = {
+  en: 'English',
+  es: 'Español',
+  fr: 'Français',
+  pt: 'Português',
+  ru: 'Русский',
+  zh: '中文',
+};
+
+const localeOptions = computed(() =>
+  availableLocales.map(locale => ({
+    label: localesLong[locale] ?? locale,
+    value: locale,
+  })),
+);
+</script>
+
+<template>
+  <c-select
+    v-model:value="locale"
+    :options="localeOptions"
+    placeholder="Select a language"
+    w-100px
+  />
+</template>

src/pages/Home.page.vue

@@ -31,7 +31,8 @@ const { t } = useI18n();
               rel="noopener"
               target="_blank"
               :aria-label="$t('home.follow.twitterAccount')"
-            >Twitter</a>{{ $t('home.follow.thankYou') }}
+            >Twitter</a>.
+            {{ $t('home.follow.thankYou') }}
             <n-icon :component="Heart" />
           </ColoredCard>
         </n-gi>

src/tools/tools.store.ts

@@ -1,44 +1,57 @@
 import { type MaybeRef, get, useStorage } from '@vueuse/core';
 import { defineStore } from 'pinia';
 import type { Ref } from 'vue';
-import type { Tool, ToolWithCategory } from './tools.types';
+import _ from 'lodash';
+import type { Tool, ToolCategory, ToolWithCategory } from './tools.types';
 import { toolsWithCategory } from './index';
 
-export const useToolStore = defineStore('tools', {
-  state: () => ({
-    favoriteToolsName: useStorage('favoriteToolsName', []) as Ref<string[]>,
-  }),
-  getters: {
-    favoriteTools(state) {
-      return state.favoriteToolsName
-        .map(favoriteName => toolsWithCategory.find(({ name }) => name === favoriteName))
-        .filter(Boolean) as ToolWithCategory[]; // cast because .filter(Boolean) does not remove undefined from type
-    },
+export const useToolStore = defineStore('tools', () => {
+  const favoriteToolsName = useStorage('favoriteToolsName', []) as Ref<string[]>;
+  const { t } = useI18n();
 
-    notFavoriteTools(state): ToolWithCategory[] {
-      return toolsWithCategory.filter(tool => !state.favoriteToolsName.includes(tool.name));
-    },
+  const tools = computed<ToolWithCategory[]>(() => toolsWithCategory.map((tool) => {
+    const toolI18nKey = tool.path.replace(/\//g, '');
 
-    tools(): ToolWithCategory[] {
-      return toolsWithCategory;
-    },
+    return ({
+      ...tool,
+      name: t(`tools.${toolI18nKey}.title`, tool.name),
+      description: t(`tools.${toolI18nKey}.description`, tool.description),
+      category: t(`tools.categories.${tool.category.toLowerCase()}`, tool.category),
+    });
+  }));
 
-    newTools(): ToolWithCategory[] {
-      return this.tools.filter(({ isNew }) => isNew);
-    },
-  },
+  const toolsByCategory = computed<ToolCategory[]>(() => {
+    return _.chain(tools.value)
+      .groupBy('category')
+      .map((components, name) => ({
+        name,
+        components,
+      }))
+      .value();
+  });
+
+  const favoriteTools = computed(() => {
+    return favoriteToolsName.value
+      .map(favoriteName => tools.value.find(({ name }) => name === favoriteName))
+      .filter(Boolean) as ToolWithCategory[]; // cast because .filter(Boolean) does not remove undefined from type
+  });
+
+  return {
+    tools,
+    favoriteTools,
+    toolsByCategory,
+    newTools: computed(() => tools.value.filter(({ isNew }) => isNew)),
 
-  actions: {
     addToolToFavorites({ tool }: { tool: MaybeRef<Tool> }) {
-      this.favoriteToolsName.push(get(tool).name);
+      favoriteToolsName.value.push(get(tool).name);
     },
 
     removeToolFromFavorites({ tool }: { tool: MaybeRef<Tool> }) {
-      this.favoriteToolsName = this.favoriteToolsName.filter(name => get(tool).name !== name);
+      favoriteToolsName.value = favoriteToolsName.value.filter(name => get(tool).name !== name);
     },
 
     isToolFavorite({ tool }: { tool: MaybeRef<Tool> }) {
-      return this.favoriteToolsName.includes(get(tool).name);
+      return favoriteToolsName.value.includes(get(tool).name);
     },
-  },
+  };
 });

src/ui/c-select/c-select.demo.vue

@@ -33,4 +33,19 @@ const value = ref('');
   <c-select label="Label" label-position="left" label-align="left" mb-2 label-width="200px" />
   <c-select label="Label" label-position="left" label-align="center" mb-2 label-width="200px" />
   <c-select label="Label" label-position="left" label-align="right" mb-2 label-width="200px" />
+
+  <h2>Custom displayed value</h2>
+  <c-select v-model:value="value" :options="optionsA" mb-2>
+    <template #displayed-value>
+      <span class="font-bold lh-normal">Hello</span>
+    </template>
+  </c-select>
+
+  <c-select v-model:value="value" :options="optionsA">
+    <template #displayed-value>
+      <span lh-normal>
+        <icon-mdi-translate />
+      </span>
+    </template>
+  </c-select>
 </template>

src/ui/c-select/c-select.vue

@@ -150,13 +150,15 @@ function onSearchInput() {
         @keydown="handleKeydown"
       >
         <div flex-1 truncate>
-          <input v-if="searchable && isOpen" ref="searchInputRef" v-model="searchQuery" type="text" placeholder="Search..." class="search-input" w-full lh-normal color-current @input="onSearchInput">
-          <span v-else-if="selectedOption" lh-normal>
-            {{ selectedOption.label }}
-          </span>
-          <span v-else class="placeholder" lh-normal>
-            {{ placeholder ?? 'Select an option' }}
-          </span>
+          <slot name="displayed-value">
+            <input v-if="searchable && isOpen" ref="searchInputRef" v-model="searchQuery" type="text" placeholder="Search..." class="search-input" w-full lh-normal color-current @input="onSearchInput">
+            <span v-else-if="selectedOption" lh-normal>
+              {{ selectedOption.label }}
+            </span>
+            <span v-else class="placeholder" lh-normal>
+              {{ placeholder ?? 'Select an option' }}
+            </span>
+          </slot>
         </div>
 
         <icon-mdi-chevron-down class="chevron" />