Merge remote-tracking branch 'origin/main' into feat/duration-calculator

2025-05-14 01:46:52 -04:00 · 2024-09-29 20:34:32 +02:00 · 2024-09-29 20:34:32 +02:00 · f3f4209e55
commit f3f4209e55
parent a2acee2f85 1c35ac3704
162 changed files with 3937 additions and 669 deletions
--- a/src/components/FormatTransformer.vue
+++ b/src/components/FormatTransformer.vue
@ -48,7 +48,7 @@ const output = computed(() => transformer.value(input.value));
    monospace
  />

-  <div>
+  <div overflow-auto>
    <div mb-5px>
      {{ outputLabel }}
    </div>
--- a/src/components/TextareaCopyable.vue
+++ b/src/components/TextareaCopyable.vue
@ -7,6 +7,7 @@ import sqlHljs from 'highlight.js/lib/languages/sql';
 import xmlHljs from 'highlight.js/lib/languages/xml';
 import yamlHljs from 'highlight.js/lib/languages/yaml';
 import iniHljs from 'highlight.js/lib/languages/ini';
+import markdownHljs from 'highlight.js/lib/languages/markdown';
 import { useCopy } from '@/composable/copy';

 const props = withDefaults(
@ -30,6 +31,7 @@ hljs.registerLanguage('html', xmlHljs);
 hljs.registerLanguage('xml', xmlHljs);
 hljs.registerLanguage('yaml', yamlHljs);
 hljs.registerLanguage('toml', iniHljs);
+hljs.registerLanguage('markdown', markdownHljs);

 const { value, language, followHeightOf, copyPlacement, copyMessage } = toRefs(props);
 const { height } = followHeightOf.value ? useElementSize(followHeightOf) : { height: ref(null) };
--- a/src/components/ToolCard.vue
+++ b/src/components/ToolCard.vue
@ -1,78 +1,41 @@
 <script setup lang="ts">
 import { useThemeVars } from 'naive-ui';
 import FavoriteButton from './FavoriteButton.vue';
-import { useAppTheme } from '@/ui/theme/themes';
 import type { Tool } from '@/tools/tools.types';

 const props = defineProps<{ tool: Tool & { category: string } }>();
 const { tool } = toRefs(props);
 const theme = useThemeVars();
-
-const appTheme = useAppTheme();
 </script>

 <template>
-  <router-link :to="tool.path">
-    <c-card class="tool-card">
+  <router-link :to="tool.path" class="decoration-none">
+    <c-card class="h-full transition transition-duration-0.5s !border-2px !hover:border-primary">
      <div flex items-center justify-between>
-        <n-icon class="icon" size="40" :component="tool.icon" />
+        <n-icon class="text-neutral-400 dark:text-neutral-600" size="40" :component="tool.icon" />
+
        <div flex items-center gap-8px>
-          <n-tag
+          <div
            v-if="tool.isNew"
-            size="small"
-            class="badge-new"
-            round
-            type="success"
-            :bordered="false"
-            :color="{ color: theme.primaryColor, textColor: theme.tagColor }"
+            class="rounded-full px-8px py-3px text-xs text-white dark:text-neutral-800"
+            :style="{
+              'background-color': theme.primaryColor,
+            }"
          >
            {{ $t('toolCard.new') }}
-          </n-tag>
+          </div>

          <FavoriteButton :tool="tool" />
        </div>
      </div>
-      <n-h3 class="title">
-        <n-ellipsis>{{ tool.name }}</n-ellipsis>
-      </n-h3>

-      <div class="description">
-        <n-ellipsis :line-clamp="2" :tooltip="false" style="min-height: 44.78px">
-          {{ tool.description }}
-          <br>&nbsp;
-        </n-ellipsis>
+      <div class="truncat my-5px text-lg text-black dark:text-white">
+        {{ tool.name }}
+      </div>
+
+      <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">
+        {{ tool.description }}
      </div>
    </c-card>
  </router-link>
 </template>
-
-<style lang="less" scoped>
-a {
-  text-decoration: none;
-}
-
-.tool-card {
-  transition: border-color ease 0.5s;
-  border-width: 2px !important;
-  color: transparent;
-
-  &:hover {
-    border-color: v-bind('appTheme.primary.colorHover');
-  }
-
-  .icon {
-    opacity: 0.6;
-    color: v-bind('theme.textColorBase');
-  }
-
-  .title {
-    margin: 5px 0;
-  }
-
-  .description {
-    opacity: 0.6;
-    color: v-bind('theme.textColorBase');
-    margin: 5px 0;
-  }
-}
-</style>
--- a/src/composable/debouncedref.ts
+++ b/src/composable/debouncedref.ts
@ -0,0 +1,21 @@
+import _ from 'lodash';
+
+function useDebouncedRef<T>(initialValue: T, delay: number, immediate: boolean = false) {
+  const state = ref(initialValue);
+  const debouncedRef = customRef((track, trigger) => ({
+    get() {
+      track();
+      return state.value;
+    },
+    set: _.debounce(
+      (value) => {
+        state.value = value;
+        trigger();
+      },
+      delay,
+      { leading: immediate },
+    ),
+  }));
+  return debouncedRef;
+}
+export default useDebouncedRef;
--- a/src/composable/downloadBase64.ts
+++ b/src/composable/downloadBase64.ts
@ -1,8 +1,13 @@
-import { extension as getExtensionFromMime } from 'mime-types';
+import { extension as getExtensionFromMimeType, extension as getMimeTypeFromExtension } from 'mime-types';
 import type { Ref } from 'vue';
 import _ from 'lodash';

-export { getMimeTypeFromBase64, useDownloadFileFromBase64 };
+export {
+  getMimeTypeFromBase64,
+  getMimeTypeFromExtension, getExtensionFromMimeType,
+  useDownloadFileFromBase64, useDownloadFileFromBase64Refs,
+  previewImageFromBase64,
+};

 const commonMimeTypesSignatures = {
  'JVBERi0': 'application/pdf',
@ -36,30 +41,78 @@ function getFileExtensionFromMimeType({
  defaultExtension?: string
 }) {
  if (mimeType) {
-    return getExtensionFromMime(mimeType) ?? defaultExtension;
+    return getExtensionFromMimeType(mimeType) ?? defaultExtension;
  }

  return defaultExtension;
 }

-function useDownloadFileFromBase64({ source, filename }: { source: Ref<string>; filename?: string }) {
+function downloadFromBase64({ sourceValue, filename, extension, fileMimeType }:
+{ sourceValue: string; filename?: string; extension?: string; fileMimeType?: string }) {
+  if (sourceValue === '') {
+    throw new Error('Base64 string is empty');
+  }
+
+  const defaultExtension = extension ?? 'txt';
+  const { mimeType } = getMimeTypeFromBase64({ base64String: sourceValue });
+  let base64String = sourceValue;
+  if (!mimeType) {
+    const targetMimeType = fileMimeType ?? getMimeTypeFromExtension(defaultExtension);
+    base64String = `data:${targetMimeType};base64,${sourceValue}`;
+  }
+
+  const cleanExtension = extension ?? getFileExtensionFromMimeType(
+    { mimeType, defaultExtension });
+  let cleanFileName = filename ?? `file.${cleanExtension}`;
+  if (extension && !cleanFileName.endsWith(`.${extension}`)) {
+    cleanFileName = `${cleanFileName}.${cleanExtension}`;
+  }
+
+  const a = document.createElement('a');
+  a.href = base64String;
+  a.download = cleanFileName;
+  a.click();
+}
+
+function useDownloadFileFromBase64(
+  { source, filename, extension, fileMimeType }:
+  { source: Ref<string>; filename?: string; extension?: string; fileMimeType?: string }) {
  return {
    download() {
-      if (source.value === '') {
-        throw new Error('Base64 string is empty');
-      }
-
-      const { mimeType } = getMimeTypeFromBase64({ base64String: source.value });
-      const base64String = mimeType
-        ? source.value
-        : `data:text/plain;base64,${source.value}`;
-
-      const cleanFileName = filename ?? `file.${getFileExtensionFromMimeType({ mimeType })}`;
-
-      const a = document.createElement('a');
-      a.href = base64String;
-      a.download = cleanFileName;
-      a.click();
+      downloadFromBase64({ sourceValue: source.value, filename, extension, fileMimeType });
    },
  };
 }
+
+function useDownloadFileFromBase64Refs(
+  { source, filename, extension }:
+  { source: Ref<string>; filename?: Ref<string>; extension?: Ref<string> }) {
+  return {
+    download() {
+      downloadFromBase64({ sourceValue: source.value, filename: filename?.value, extension: extension?.value });
+    },
+  };
+}
+
+function previewImageFromBase64(base64String: string): HTMLImageElement {
+  if (base64String === '') {
+    throw new Error('Base64 string is empty');
+  }
+
+  const img = document.createElement('img');
+  img.src = base64String;
+
+  const container = document.createElement('div');
+  container.appendChild(img);
+
+  const previewContainer = document.getElementById('previewContainer');
+  if (previewContainer) {
+    previewContainer.innerHTML = '';
+    previewContainer.appendChild(container);
+  }
+  else {
+    throw new Error('Preview container element not found');
+  }
+
+  return img;
+}
--- a/src/composable/queryParams.ts
+++ b/src/composable/queryParams.ts
@ -1,7 +1,8 @@
 import { useRouteQuery } from '@vueuse/router';
 import { computed } from 'vue';
+import { useStorage } from '@vueuse/core';

-export { useQueryParam };
+export { useQueryParam, useQueryParamOrStorage };

 const transformers = {
  number: {
@ -16,6 +17,12 @@ const transformers = {
    fromQuery: (value: string) => value.toLowerCase() === 'true',
    toQuery: (value: boolean) => (value ? 'true' : 'false'),
  },
+  object: {
+    fromQuery: (value: string) => {
+      return JSON.parse(value);
+    },
+    toQuery: (value: object) => JSON.stringify(value),
+  },
 };

 function useQueryParam<T>({ name, defaultValue }: { name: string; defaultValue: T }) {
@ -33,3 +40,27 @@ function useQueryParam<T>({ name, defaultValue }: { name: string; defaultValue:
    },
  });
 }
+
+function useQueryParamOrStorage<T>({ name, storageName, defaultValue }: { name: string; storageName: string; defaultValue: T }) {
+  const type = typeof defaultValue;
+  const transformer = transformers[type as keyof typeof transformers] ?? transformers.string;
+
+  const storageRef = useStorage(storageName, defaultValue);
+  const proxyDefaultValue = transformer.toQuery(defaultValue as never);
+  const proxy = useRouteQuery(name, proxyDefaultValue);
+
+  const r = ref(defaultValue);
+
+  watch(r,
+    (value) => {
+      proxy.value = transformer.toQuery(value as never);
+      storageRef.value = value as never;
+    },
+    { deep: true });
+
+  r.value = (proxy.value && proxy.value !== proxyDefaultValue
+    ? transformer.fromQuery(proxy.value) as unknown as T
+    : storageRef.value as T) as never;
+
+  return r;
+}
--- a/src/composable/validation.ts
+++ b/src/composable/validation.ts
@ -3,9 +3,11 @@ import _ from 'lodash';
 import { type Ref, reactive, watch } from 'vue';

 type ValidatorReturnType = unknown;
+type GetErrorMessageReturnType = string;

 export interface UseValidationRule<T> {
  validator: (value: T) => ValidatorReturnType
+  getErrorMessage?: (value: T) => GetErrorMessageReturnType
  message: string
 }

@ -24,6 +26,15 @@ export function isFalsyOrHasThrown(cb: () => ValidatorReturnType): boolean {
  }
 }

+export function getErrorMessageOrThrown(cb: () => GetErrorMessageReturnType): string {
+  try {
+    return cb() || '';
+  }
+  catch (e: any) {
+    return e.toString();
+  }
+}
+
 export interface ValidationAttrs {
  feedback: string
  validationStatus: string | undefined
@ -61,7 +72,13 @@ export function useValidation<T>({

      for (const rule of get(rules)) {
        if (isFalsyOrHasThrown(() => rule.validator(source.value))) {
-          state.message = rule.message;
+          if (rule.getErrorMessage) {
+            const getErrorMessage = rule.getErrorMessage;
+            state.message = rule.message.replace('{0}', getErrorMessageOrThrown(() => getErrorMessage(source.value)));
+          }
+          else {
+            state.message = rule.message;
+          }
          state.status = 'error';
        }
      }
--- a/src/layouts/base.layout.vue
+++ b/src/layouts/base.layout.vue
@ -81,7 +81,7 @@ const tools = computed<ToolCategory[]>(() => [
          </div>
          <div>
            © {{ new Date().getFullYear() }}
-            <c-link target="_blank" rel="noopener" href="https://github.com/CorentinTh">
+            <c-link target="_blank" rel="noopener" href="https://corentin.tech?utm_source=it-tools&utm_medium=footer">
              Corentin Thomasset
            </c-link>
          </div>
--- a/src/main.ts
+++ b/src/main.ts
@ -3,6 +3,7 @@ import { createPinia } from 'pinia';
 import { createHead } from '@vueuse/head';

 import { registerSW } from 'virtual:pwa-register';
+import shadow from 'vue-shadow-dom';
 import { plausible } from './plugins/plausible.plugin';

 import 'virtual:uno.css';
@ -23,5 +24,6 @@ app.use(i18nPlugin);
 app.use(router);
 app.use(naive);
 app.use(plausible);
+app.use(shadow);

 app.mount('#app');
--- a/src/modules/i18n/components/locale-selector.vue
+++ b/src/modules/i18n/components/locale-selector.vue
@ -3,11 +3,14 @@ const { availableLocales, locale } = useI18n();

 const localesLong: Record<string, string> = {
  en: 'English',
+  de: 'Deutsch',
  es: 'Español',
  fr: 'Français',
  pt: 'Português',
  ru: 'Русский',
+  uk: 'Українська',
  zh: '中文',
+  vi: 'Tiếng Việt',
 };

 const localeOptions = computed(() =>
--- a/src/pages/Home.page.vue
+++ b/src/pages/Home.page.vue
@ -13,76 +13,60 @@ const { t } = useI18n();
 </script>

 <template>
-  <div class="home-page">
+  <div class="pt-50px">
    <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="$t('home.follow.title')" :icon="Heart">
-            {{ $t('home.follow.p1') }}
-            <a
-              href="https://github.com/CorentinTh/it-tools"
-              rel="noopener"
-              target="_blank"
-              :aria-label="$t('home.follow.githubRepository')"
-            >GitHub</a>
-            {{ $t('home.follow.p2') }}
-            <a
-              href="https://twitter.com/ittoolsdottech"
-              rel="noopener"
-              target="_blank"
-              :aria-label="$t('home.follow.twitterAccount')"
-            >Twitter</a>.
-            {{ $t('home.follow.thankYou') }}
-            <n-icon :component="Heart" />
-          </ColoredCard>
-        </n-gi>
-      </n-grid>
+      <div v-if="config.showBanner" class="grid grid-cols-1 gap-12px lg:grid-cols-3 md:grid-cols-3 sm:grid-cols-2 xl:grid-cols-4">
+        <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="$t('home.follow.githubRepository')"
+          >GitHub</a>
+          {{ $t('home.follow.p2') }}
+          <a
+            href="https://twitter.com/ittoolsdottech"
+            rel="noopener"
+            target="_blank"
+            :aria-label="$t('home.follow.twitterAccount')"
+          >Twitter</a>.
+          {{ $t('home.follow.thankYou') }}
+          <n-icon :component="Heart" />
+        </ColoredCard>
+      </div>

      <transition name="height">
        <div v-if="toolStore.favoriteTools.length > 0">
-          <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" />
-            </n-gi>
-          </n-grid>
+          <h3 class="mb-5px mt-25px font-500 text-neutral-400">
+            {{ $t('home.categories.favoriteTools') }}
+          </h3>
+          <div class="grid grid-cols-1 gap-12px lg:grid-cols-3 md:grid-cols-3 sm:grid-cols-2 xl:grid-cols-4">
+            <ToolCard v-for="tool in toolStore.favoriteTools" :key="tool.name" :tool="tool" />
+          </div>
        </div>
      </transition>

      <div v-if="toolStore.newTools.length > 0">
-        <n-h3>{{ t('home.categories.newestTools') }}</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.newTools" :key="tool.name">
-            <ToolCard :tool="tool" />
-          </n-gi>
-        </n-grid>
+        <h3 class="mb-5px mt-25px font-500 text-neutral-400">
+          {{ t('home.categories.newestTools') }}
+        </h3>
+        <div class="grid grid-cols-1 gap-12px lg:grid-cols-3 md:grid-cols-3 sm:grid-cols-2 xl:grid-cols-4">
+          <ToolCard v-for="tool in toolStore.newTools" :key="tool.name" :tool="tool" />
+        </div>
      </div>

-      <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>
-            <ToolCard :tool="tool" />
-          </transition>
-        </n-gi>
-      </n-grid>
+      <h3 class="mb-5px mt-25px font-500 text-neutral-400">
+        {{ $t('home.categories.allTools') }}
+      </h3>
+      <div class="grid grid-cols-1 gap-12px lg:grid-cols-3 md:grid-cols-3 sm:grid-cols-2 xl:grid-cols-4">
+        <ToolCard v-for="tool in toolStore.tools" :key="tool.name" :tool="tool" />
+      </div>
    </div>
  </div>
 </template>

 <style scoped lang="less">
-.home-page {
-  padding-top: 50px;
-}
-
-.n-h3 {
-  margin-bottom: 10px;
-}
-
-::v-deep(.n-grid) {
-  margin-bottom: 30px;
-}
-
 .height-enter-active,
 .height-leave-active {
  transition: all 0.5s ease-in-out;
--- a/src/plugins/i18n.plugin.ts
+++ b/src/plugins/i18n.plugin.ts
@ -1,22 +1,7 @@
+import messages from '@intlify/unplugin-vue-i18n/messages';
+import { get } from '@vueuse/core';
 import type { Plugin } from 'vue';
 import { createI18n } from 'vue-i18n';
-import baseMessages from '@intlify/unplugin-vue-i18n/messages';
-import _ from 'lodash';
-import { parse as parseYaml } from 'yaml';
-
-const i18nFiles = import.meta.glob('../tools/*/locales/**.yml', { as: 'raw' });
-
-const messagesByTools = await Promise.all(_.map(i18nFiles, async (fileDescriptor, path) => {
-  const [, locale] = path.match(/\.\/tools\/.*?\/locales\/(.*)\.ya?ml$/i) ?? [];
-  const content = parseYaml(await fileDescriptor());
-
-  return { [locale]: content };
-}));
-
-const messages = _.merge(
-  baseMessages,
-  _.merge({}, ...messagesByTools),
-);

 const i18n = createI18n({
  legacy: false,
@ -31,7 +16,6 @@ export const i18nPlugin: Plugin = {
 };

 export const translate = function (localeKey: string) {
-  // @ts-expect-error global
-  const hasKey = i18n.global.te(localeKey, i18n.global.locale);
+  const hasKey = i18n.global.te(localeKey, get(i18n.global.locale));
  return hasKey ? i18n.global.t(localeKey) : localeKey;
 };
--- a/src/tools/ascii-text-drawer/ascii-text-drawer.vue
+++ b/src/tools/ascii-text-drawer/ascii-text-drawer.vue
@ -0,0 +1,93 @@
+<script setup lang="ts">
+import figlet from 'figlet';
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
+
+const input = ref('Ascii ART');
+const font = useStorage('ascii-text-drawer:font', 'Standard');
+const width = useStorage('ascii-text-drawer:width', 80);
+const output = ref('');
+const errored = ref(false);
+const processing = ref(false);
+
+figlet.defaults({ fontPath: '//unpkg.com/figlet@1.6.0/fonts/' });
+
+watchEffect(async () => {
+  processing.value = true;
+  try {
+    const options: figlet.Options = {
+      font: font.value as figlet.Fonts,
+      width: width.value,
+      whitespaceBreak: true,
+    };
+    output.value = await (new Promise<string>((resolve, reject) =>
+      figlet.text(input.value, options,
+        (err, text) => {
+          if (err) {
+            reject(err);
+            return;
+          }
+
+          resolve(text ?? '');
+        })));
+    errored.value = false;
+  }
+  catch (e: any) {
+    errored.value = true;
+  }
+  processing.value = false;
+});
+
+const fonts = ['1Row', '3-D', '3D Diagonal', '3D-ASCII', '3x5', '4Max', '5 Line Oblique', 'AMC 3 Line', 'AMC 3 Liv1', 'AMC AAA01', 'AMC Neko', 'AMC Razor', 'AMC Razor2', 'AMC Slash', 'AMC Slider', 'AMC Thin', 'AMC Tubes', 'AMC Untitled', 'ANSI Shadow', 'ASCII New Roman', 'Acrobatic', 'Alligator', 'Alligator2', 'Alpha', 'Alphabet', 'Arrows', 'Avatar', 'B1FF', 'B1FF', 'Banner', 'Banner3-D', 'Banner3', 'Banner4', 'Barbwire', 'Basic', 'Bear', 'Bell', 'Benjamin', 'Big Chief', 'Big Money-ne', 'Big Money-nw', 'Big Money-se', 'Big Money-sw', 'Big', 'Bigfig', 'Binary', 'Block', 'Blocks', 'Bloody', 'Bolger', 'Braced', 'Bright', 'Broadway KB', 'Broadway', 'Bubble', 'Bulbhead', 'Caligraphy', 'Caligraphy2', 'Calvin S', 'Cards', 'Catwalk', 'Chiseled', 'Chunky', 'Coinstak', 'Cola', 'Colossal', 'Computer', 'Contessa', 'Contrast', 'Cosmike', 'Crawford', 'Crawford2', 'Crazy', 'Cricket', 'Cursive', 'Cyberlarge', 'Cybermedium', 'Cybersmall', 'Cygnet', 'DANC4', 'DOS Rebel', 'DWhistled', 'Dancing Font', 'Decimal', 'Def Leppard', 'Delta Corps Priest 1', 'Diamond', 'Diet Cola', 'Digital', 'Doh', 'Doom', 'Dot Matrix', 'Double Shorts', 'Double', 'Dr Pepper', 'Efti Chess', 'Efti Font', 'Efti Italic', 'Efti Piti', 'Efti Robot', 'Efti Wall', 'Efti Water', 'Electronic', 'Elite', 'Epic', 'Fender', 'Filter', 'Fire Font-k', 'Fire Font-s', 'Flipped', 'Flower Power', 'Four Tops', 'Fraktur', 'Fun Face', 'Fun Faces', 'Fuzzy', 'Georgi16', 'Georgia11', 'Ghost', 'Ghoulish', 'Glenyn', 'Goofy', 'Gothic', 'Graceful', 'Gradient', 'Graffiti', 'Greek', 'Heart Left', 'Heart Right', 'Henry 3D', 'Hex', 'Hieroglyphs', 'Hollywood', 'Horizontal Left', 'Horizontal Right', 'ICL-1900', 'Impossible', 'Invita', 'Isometric1', 'Isometric2', 'Isometric3', 'Isometric4', 'Italic', 'Ivrit', 'JS Block Letters', 'JS Bracket Letters', 'JS Capital Curves', 'JS Cursive', 'JS Stick Letters', 'Jacky', 'Jazmine', 'Jerusalem', 'Katakana', 'Kban', 'Keyboard', 'Knob', 'Konto Slant', 'Konto', 'LCD', 'Larry 3D 2', 'Larry 3D', 'Lean', 'Letters', 'Lil Devil', 'Line Blocks', 'Linux', 'Lockergnome', 'Madrid', 'Marquee', 'Maxfour', 'Merlin1', 'Merlin2', 'Mike', 'Mini', 'Mirror', 'Mnemonic', 'Modular', 'Morse', 'Morse2', 'Moscow', 'Mshebrew210', 'Muzzle', 'NScript', 'NT Greek', 'NV Script', 'Nancyj-Fancy', 'Nancyj-Improved', 'Nancyj-Underlined', 'Nancyj', 'Nipples', 'O8', 'OS2', 'Octal', 'Ogre', 'Old Banner', 'Patorjk\'s Cheese', 'Patorjk-HeX', 'Pawp', 'Peaks Slant', 'Peaks', 'Pebbles', 'Pepper', 'Poison', 'Puffy', 'Puzzle', 'Pyramid', 'Rammstein', 'Rectangles', 'Red Phoenix', 'Relief', 'Relief2', 'Reverse', 'Roman', 'Rot13', 'Rot13', 'Rotated', 'Rounded', 'Rowan Cap', 'Rozzo', 'Runic', 'Runyc', 'S Blood', 'SL Script', 'Santa Clara', 'Script', 'Serifcap', 'Shadow', 'Shimrod', 'Short', 'Slant Relief', 'Slant', 'Slide', 'Small Caps', 'Small Isometric1', 'Small Keyboard', 'Small Poison', 'Small Script', 'Small Shadow', 'Small Slant', 'Small Tengwar', 'Small', 'Soft', 'Speed', 'Spliff', 'Stacey', 'Stampate', 'Stampatello', 'Standard', 'Star Strips', 'Star Wars', 'Stellar', 'Stforek', 'Stick Letters', 'Stop', 'Straight', 'Stronger Than All', 'Sub-Zero', 'Swamp Land', 'Swan', 'Sweet', 'THIS', 'Tanja', 'Tengwar', 'Term', 'Test1', 'The Edge', 'Thick', 'Thin', 'Thorned', 'Three Point', 'Ticks Slant', 'Ticks', 'Tiles', 'Tinker-Toy', 'Tombstone', 'Train', 'Trek', 'Tsalagi', 'Tubular', 'Twisted', 'Two Point', 'USA Flag', 'Univers', 'Varsity', 'Wavy', 'Weird', 'Wet Letter', 'Whimsy', 'Wow'];
+</script>
+
+<template>
+  <c-card style="max-width: 600px;">
+    <c-input-text
+      v-model:value="input"
+      label="Your text:"
+      placeholder="Your text to draw"
+      raw-text
+      multiline
+      rows="4"
+    />
+
+    <n-divider />
+
+    <n-grid cols="4" x-gap="12" w-full>
+      <n-gi span="2">
+        <c-select
+          v-model:value="font"
+          label-position="top"
+          label="Font:"
+          :options="fonts"
+          searchable="true"
+          placeholder="Select font to use"
+        />
+      </n-gi>
+      <n-gi span="2">
+        <n-form-item label="Width:" label-placement="top" label-width="100" :show-feedback="false">
+          <n-input-number v-model:value="width" min="0" max="10000" w-full placeholder="Width of the text" />
+        </n-form-item>
+      </n-gi>
+    </n-grid>
+
+    <n-divider />
+
+    <div v-if="processing" flex items-center justify-center>
+      <n-spin size="medium" />
+      <span class="ml-2">Loading font...</span>
+    </div>
+
+    <c-alert v-if="errored" mt-1 text-center type="error">
+      Current settings resulted in error.
+    </c-alert>
+
+    <n-form-item v-if="!processing && !errored" label="Ascii Art text:">
+      <TextareaCopyable
+        :value="output"
+        mb-1 mt-1
+        copy-placement="outside"
+      />
+    </n-form-item>
+  </c-card>
+</template>
--- a/src/tools/ascii-text-drawer/index.ts
+++ b/src/tools/ascii-text-drawer/index.ts
@ -0,0 +1,12 @@
+import { Artboard } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'ASCII Art Text Generator',
+  path: '/ascii-text-drawer',
+  description: 'Create ASCII art text with many fonts and styles.',
+  keywords: ['ascii', 'asciiart', 'text', 'drawer'],
+  component: () => import('./ascii-text-drawer.vue'),
+  icon: Artboard,
+  createdAt: new Date('2024-03-03'),
+});
--- a/src/tools/base64-file-converter/base64-file-converter.vue
+++ b/src/tools/base64-file-converter/base64-file-converter.vue
@ -2,12 +2,19 @@
 import { useBase64 } from '@vueuse/core';
 import type { Ref } from 'vue';
 import { useCopy } from '@/composable/copy';
-import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
+import { getExtensionFromMimeType, getMimeTypeFromBase64, previewImageFromBase64, useDownloadFileFromBase64Refs } from '@/composable/downloadBase64';
 import { useValidation } from '@/composable/validation';
 import { isValidBase64 } from '@/utils/base64';

+const fileName = ref('file');
+const fileExtension = ref('');
 const base64Input = ref('');
-const { download } = useDownloadFileFromBase64({ source: base64Input });
+const { download } = useDownloadFileFromBase64Refs(
+  {
+    source: base64Input,
+    filename: fileName,
+    extension: fileExtension,
+  });
 const base64InputValidation = useValidation({
  source: base64Input,
  rules: [
@ -18,6 +25,35 @@ const base64InputValidation = useValidation({
  ],
 });

+watch(
+  base64Input,
+  (newValue, _) => {
+    const { mimeType } = getMimeTypeFromBase64({ base64String: newValue });
+    if (mimeType) {
+      fileExtension.value = getExtensionFromMimeType(mimeType) || fileExtension.value;
+    }
+  },
+);
+
+function previewImage() {
+  if (!base64InputValidation.isValid) {
+    return;
+  }
+  try {
+    const image = previewImageFromBase64(base64Input.value);
+    image.style.maxWidth = '100%';
+    image.style.maxHeight = '400px';
+    const previewContainer = document.getElementById('previewContainer');
+    if (previewContainer) {
+      previewContainer.innerHTML = '';
+      previewContainer.appendChild(image);
+    }
+  }
+  catch (_) {
+    //
+  }
+}
+
 function downloadFile() {
  if (!base64InputValidation.isValid) {
    return;
@ -44,6 +80,24 @@ async function onUpload(file: File) {

 <template>
  <c-card title="Base64 to file">
+    <n-grid cols="3" x-gap="12">
+      <n-gi span="2">
+        <c-input-text
+          v-model:value="fileName"
+          label="File Name"
+          placeholder="Download filename"
+          mb-2
+        />
+      </n-gi>
+      <n-gi>
+        <c-input-text
+          v-model:value="fileExtension"
+          label="Extension"
+          placeholder="Extension"
+          mb-2
+        />
+      </n-gi>
+    </n-grid>
    <c-input-text
      v-model:value="base64Input"
      multiline
@ -53,7 +107,14 @@ async function onUpload(file: File) {
      mb-2
    />

-    <div flex justify-center>
+    <div flex justify-center py-2>
+      <div id="previewContainer" />
+    </div>
+
+    <div flex justify-center gap-3>
+      <c-button :disabled="base64Input === '' || !base64InputValidation.isValid" @click="previewImage()">
+        Preview image
+      </c-button>
      <c-button :disabled="base64Input === '' || !base64InputValidation.isValid" @click="downloadFile()">
        Download file
      </c-button>
--- a/src/tools/base64-file-converter/index.ts
+++ b/src/tools/base64-file-converter/index.ts
@ -1,10 +1,11 @@
 import { FileDigit } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'Base64 file converter',
+  name: translate('tools.base64-file-converter.title'),
  path: '/base64-file-converter',
-  description: 'Convert string, files or images into a it\'s base64 representation.',
+  description: translate('tools.base64-file-converter.description'),
  keywords: ['base64', 'converter', 'upload', 'image', 'file', 'conversion', 'web', 'data', 'format'],
  component: () => import('./base64-file-converter.vue'),
  icon: FileDigit,
--- a/src/tools/base64-string-converter/index.ts
+++ b/src/tools/base64-string-converter/index.ts
@ -1,10 +1,11 @@
 import { FileDigit } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'Base64 string encoder/decoder',
+  name: translate('tools.base64-string-converter.title'),
  path: '/base64-string-converter',
-  description: 'Simply encode and decode string into a their base64 representation.',
+  description: translate('tools.base64-string-converter.description'),
  keywords: ['base64', 'converter', 'conversion', 'web', 'data', 'format', 'atob', 'btoa'],
  component: () => import('./base64-string-converter.vue'),
  icon: FileDigit,
--- a/src/tools/basic-auth-generator/index.ts
+++ b/src/tools/basic-auth-generator/index.ts
@ -1,10 +1,11 @@
 import { PasswordRound } from '@vicons/material';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'Basic auth generator',
+  name: translate('tools.basic-auth-generator.title'),
  path: '/basic-auth-generator',
-  description: 'Generate a base64 basic auth header from an username and a password.',
+  description: translate('tools.basic-auth-generator.description'),
  keywords: [
    'basic',
    'auth',
--- a/src/tools/bcrypt/bcrypt.vue
+++ b/src/tools/bcrypt/bcrypt.vue
@ -28,7 +28,7 @@ const compareMatch = computed(() => compareSync(compareString.value, compareHash
      mb-2
    />
    <n-form-item label="Salt count: " label-placement="left" label-width="120">
-      <n-input-number v-model:value="saltCount" placeholder="Salt rounds..." :max="10" :min="0" w-full />
+      <n-input-number v-model:value="saltCount" placeholder="Salt rounds..." :max="100" :min="0" w-full />
    </n-form-item>

    <c-input-text :value="hashed" readonly text-center />
--- a/src/tools/bcrypt/index.ts
+++ b/src/tools/bcrypt/index.ts
@ -1,11 +1,11 @@
 import { LockSquare } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'Bcrypt',
+  name: translate('tools.bcrypt.title'),
  path: '/bcrypt',
-  description:
-    'Hash and compare text string using bcrypt. Bcrypt is a password-hashing function based on the Blowfish cipher.',
+  description: translate('tools.bcrypt.description'),
  keywords: ['bcrypt', 'hash', 'compare', 'password', 'salt', 'round', 'storage', 'crypto'],
  component: () => import('./bcrypt.vue'),
  icon: LockSquare,
--- a/src/tools/benchmark-builder/index.ts
+++ b/src/tools/benchmark-builder/index.ts
@ -1,10 +1,11 @@
 import { SpeedFilled } from '@vicons/material';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'Benchmark builder',
+  name: translate('tools.benchmark-builder.title'),
  path: '/benchmark-builder',
-  description: 'Easily compare execution time of tasks with this very simple online benchmark builder.',
+  description: translate('tools.benchmark-builder.description'),
  keywords: ['benchmark', 'builder', 'execution', 'duration', 'mean', 'variance'],
  component: () => import('./benchmark-builder.vue'),
  icon: SpeedFilled,
--- a/src/tools/bip39-generator/index.ts
+++ b/src/tools/bip39-generator/index.ts
@ -1,10 +1,11 @@
 import { AlignJustified } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'BIP39 passphrase generator',
+  name: translate('tools.bip39-generator.title'),
  path: '/bip39-generator',
-  description: 'Generate BIP39 passphrase from existing or random mnemonic, or get the mnemonic from the passphrase.',
+  description: translate('tools.bip39-generator.description'),
  keywords: ['BIP39', 'passphrase', 'generator', 'mnemonic', 'entropy'],
  component: () => import('./bip39-generator.vue'),
  icon: AlignJustified,
--- a/src/tools/camera-recorder/index.ts
+++ b/src/tools/camera-recorder/index.ts
@ -1,10 +1,11 @@
 import { Camera } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'Camera recorder',
+  name: translate('tools.camera-recorder.title'),
  path: '/camera-recorder',
-  description: 'Take a picture or record a video from your webcam or camera.',
+  description: translate('tools.camera-recorder.description'),
  keywords: ['camera', 'recoder'],
  component: () => import('./camera-recorder.vue'),
  icon: Camera,
--- a/src/tools/case-converter/index.ts
+++ b/src/tools/case-converter/index.ts
@ -1,10 +1,11 @@
 import { LetterCaseToggle } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'Case converter',
+  name: translate('tools.case-converter.title'),
  path: '/case-converter',
-  description: 'Change the case of a string and chose between different formats',
+  description: translate('tools.case-converter.description'),
  keywords: [
    'case',
    'converter',
--- a/src/tools/chmod-calculator/index.ts
+++ b/src/tools/chmod-calculator/index.ts
@ -1,10 +1,11 @@
 import { FileInvoice } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'Chmod calculator',
+  name: translate('tools.chmod-calculator.title'),
  path: '/chmod-calculator',
-  description: 'Compute your chmod permissions and commands with this online chmod calculator.',
+  description: translate('tools.chmod-calculator.description'),
  keywords: [
    'chmod',
    'calculator',
--- a/src/tools/chronometer/index.ts
+++ b/src/tools/chronometer/index.ts
@ -1,10 +1,11 @@
 import { TimerOutlined } from '@vicons/material';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'Chronometer',
+  name: translate('tools.chronometer.title'),
  path: '/chronometer',
-  description: 'Monitor the duration of a thing. Basically a chronometer with simple chronometer features.',
+  description: translate('tools.chronometer.description'),
  keywords: ['chronometer', 'time', 'lap', 'duration', 'measure', 'pause', 'resume', 'stopwatch'],
  component: () => import('./chronometer.vue'),
  icon: TimerOutlined,
--- a/src/tools/color-converter/index.ts
+++ b/src/tools/color-converter/index.ts
@ -1,10 +1,11 @@
 import { Palette } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'Color converter',
+  name: translate('tools.color-converter.title'),
  path: '/color-converter',
-  description: 'Convert color between the different formats (hex, rgb, hsl and css name)',
+  description: translate('tools.color-converter.description'),
  keywords: ['color', 'converter'],
  component: () => import('./color-converter.vue'),
  icon: Palette,
--- a/src/tools/crontab-generator/index.ts
+++ b/src/tools/crontab-generator/index.ts
@ -1,10 +1,11 @@
 import { Alarm } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'Crontab generator',
+  name: translate('tools.crontab-generator.title'),
  path: '/crontab-generator',
-  description: 'Validate and generate crontab and get the human readable description of the cron schedule.',
+  description: translate('tools.crontab-generator.description'),
  keywords: [
    'crontab',
    'generator',
--- a/src/tools/date-time-converter/index.ts
+++ b/src/tools/date-time-converter/index.ts
@ -1,10 +1,11 @@
 import { Calendar } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'Date-time converter',
+  name: translate('tools.date-converter.title'),
  path: '/date-converter',
-  description: 'Convert date and time into the various different formats',
+  description: translate('tools.date-converter.description'),
  keywords: ['date', 'time', 'converter', 'iso', 'utc', 'timezone', 'year', 'month', 'day', 'minute', 'seconde'],
  component: () => import('./date-time-converter.vue'),
  icon: Calendar,
--- a/src/tools/device-information/index.ts
+++ b/src/tools/device-information/index.ts
@ -1,10 +1,11 @@
 import { DeviceDesktop } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'Device information',
+  name: translate('tools.device-information.title'),
  path: '/device-information',
-  description: 'Get information about your current device (screen size, pixel-ratio, user agent, ...)',
+  description: translate('tools.device-information.description'),
  keywords: [
    'device',
    'information',
--- a/src/tools/docker-run-to-docker-compose-converter/index.ts
+++ b/src/tools/docker-run-to-docker-compose-converter/index.ts
@ -1,10 +1,11 @@
 import { BrandDocker } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'Docker run to Docker compose converter',
+  name: translate('tools.docker-run-to-docker-compose-converter.title'),
  path: '/docker-run-to-docker-compose-converter',
-  description: 'Turns docker run commands into docker-compose files!',
+  description: translate('tools.docker-run-to-docker-compose-converter.description'),
  keywords: ['docker', 'run', 'compose', 'yaml', 'yml', 'convert', 'deamon'],
  component: () => import('./docker-run-to-docker-compose-converter.vue'),
  icon: BrandDocker,
--- a/src/tools/email-normalizer/email-normalizer.vue
+++ b/src/tools/email-normalizer/email-normalizer.vue
@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { normalizeEmail } from 'email-normalizer';
+import { withDefaultOnError } from '@/utils/defaults';
+import { useCopy } from '@/composable/copy';
+
+const emails = ref('');
+const normalizedEmails = computed(() => {
+  if (!emails.value) {
+    return '';
+  }
+
+  return emails.value
+    .split('\n')
+    .map((email) => {
+      return withDefaultOnError(() => normalizeEmail({ email }), `Unable to parse email: ${email}`);
+    })
+    .join('\n');
+});
+
+const { copy } = useCopy({ source: normalizedEmails, text: 'Normalized emails copied to the clipboard', createToast: true });
+</script>
+
+<template>
+  <div>
+    <div class="mb-2">
+      Raw emails to normalize:
+    </div>
+    <c-input-text
+      v-model:value="emails"
+      placeholder="Put your emails here (one per line)..."
+      rows="3"
+      multiline
+      autocomplete="off"
+      autocorrect="off"
+      autocapitalize="off"
+      spellcheck="false"
+      autofocus
+      monospace
+    />
+
+    <div class="mb-2 mt-4">
+      Normalized emails:
+    </div>
+    <c-input-text
+      :value="normalizedEmails"
+      placeholder="Normalized emails will appear here..."
+      rows="3"
+      autocomplete="off"
+      autocorrect="off"
+      autocapitalize="off"
+      spellcheck="false"
+      multiline
+      readonly
+      monospace
+    />
+    <div class="mt-4 flex justify-center gap-2">
+      <c-button @click="emails = ''">
+        Clear emails
+      </c-button>
+      <c-button :disabled="!normalizedEmails" @click="copy()">
+        Copy normalized emails
+      </c-button>
+    </div>
+  </div>
+</template>
--- a/src/tools/email-normalizer/index.ts
+++ b/src/tools/email-normalizer/index.ts
@ -0,0 +1,12 @@
+import { Mail } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Email normalizer',
+  path: '/email-normalizer',
+  description: 'Normalize email addresses to a standard format for easier comparison. Useful for deduplication and data cleaning.',
+  keywords: ['email', 'normalizer'],
+  component: () => import('./email-normalizer.vue'),
+  icon: Mail,
+  createdAt: new Date('2024-08-15'),
+});
--- a/src/tools/emoji-picker/emoji-picker.vue
+++ b/src/tools/emoji-picker/emoji-picker.vue
@ -4,6 +4,7 @@ import emojiKeywords from 'emojilib';
 import _ from 'lodash';
 import type { EmojiInfo } from './emoji.types';
 import { useFuzzySearch } from '@/composable/fuzzySearch';
+import useDebouncedRef from '@/composable/debouncedref';

 const escapeUnicode = ({ emoji }: { emoji: string }) => emoji.split('').map(unit => `\\u${unit.charCodeAt(0).toString(16).padStart(4, '0')}`).join('');
 const getEmojiCodePoints = ({ emoji }: { emoji: string }) => emoji.codePointAt(0) ? `0x${emoji.codePointAt(0)?.toString(16)}` : undefined;
@ -23,7 +24,7 @@ const emojisGroups: { emojiInfos: EmojiInfo[]; group: string }[] = _
  .map((emojiInfos, group) => ({ group, emojiInfos }))
  .value();

-const searchQuery = ref('');
+const searchQuery = useDebouncedRef('', 500);

 const { searchResult } = useFuzzySearch({
  search: searchQuery,
--- a/src/tools/emoji-picker/index.ts
+++ b/src/tools/emoji-picker/index.ts
@ -1,10 +1,11 @@
 import { MoodSmile } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'Emoji picker',
+  name: translate('tools.emoji-picker.title'),
  path: '/emoji-picker',
-  description: 'Copy and paste emojis easily and get the unicode and code points value of each emoji.',
+  description: translate('tools.emoji-picker.description'),
  keywords: ['emoji', 'picker', 'unicode', 'copy', 'paste'],
  component: () => import('./emoji-picker.vue'),
  icon: MoodSmile,
--- a/src/tools/encryption/index.ts
+++ b/src/tools/encryption/index.ts
@ -1,10 +1,11 @@
 import { Lock } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'Encrypt / decrypt text',
+  name: translate('tools.encryption.title'),
  path: '/encryption',
-  description: 'Encrypt and decrypt text clear text using crypto algorithm like AES, TripleDES, Rabbit or RC4.',
+  description: translate('tools.encryption.description'),
  keywords: ['cypher', 'encipher', 'text', 'AES', 'TripleDES', 'Rabbit', 'RC4'],
  component: () => import('./encryption.vue'),
  icon: Lock,
--- a/src/tools/eta-calculator/index.ts
+++ b/src/tools/eta-calculator/index.ts
@ -1,11 +1,11 @@
 import { Hourglass } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'ETA calculator',
+  name: translate('tools.eta-calculator.title'),
  path: '/eta-calculator',
-  description:
-    'An ETA (Estimated Time of Arrival) calculator to know the approximate end time of a task, for example the moment of ending of a download.',
+  description: translate('tools.eta-calculator.description'),
  keywords: ['eta', 'calculator', 'estimated', 'time', 'arrival', 'average'],
  component: () => import('./eta-calculator.vue'),
  icon: Hourglass,
--- a/src/tools/git-memo/index.ts
+++ b/src/tools/git-memo/index.ts
@ -1,11 +1,11 @@
 import { BrandGit } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'Git cheatsheet',
+  name: translate('tools.git-memo.title'),
  path: '/git-memo',
-  description:
-    'Git is a decentralized version management software. With this cheatsheet you will have a quick access to the most common git commands.',
+  description: translate('tools.git-memo.description'),
  keywords: ['git', 'push', 'force', 'pull', 'commit', 'amend', 'rebase', 'merge', 'reset', 'soft', 'hard', 'lease'],
  component: () => import('./git-memo.vue'),
  icon: BrandGit,
--- a/src/tools/hash-text/index.ts
+++ b/src/tools/hash-text/index.ts
@ -1,11 +1,11 @@
 import { EyeOff } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'Hash text',
+  name: translate('tools.hash-text.title'),
  path: '/hash-text',
-  description:
-    'Hash a text string using the function you need : MD5, SHA1, SHA256, SHA224, SHA512, SHA384, SHA3 or RIPEMD160',
+  description: translate('tools.hash-text.description'),
  keywords: [
    'hash',
    'digest',
--- a/src/tools/hmac-generator/index.ts
+++ b/src/tools/hmac-generator/index.ts
@ -1,11 +1,11 @@
 import { ShortTextRound } from '@vicons/material';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'Hmac generator',
+  name: translate('tools.hmac-generator.title'),
  path: '/hmac-generator',
-  description:
-    'Computes a hash-based message authentication code (HMAC) using a secret key and your favorite hashing function.',
+  description: translate('tools.hmac-generator.description'),
  keywords: ['hmac', 'generator', 'MD5', 'SHA1', 'SHA256', 'SHA224', 'SHA512', 'SHA384', 'SHA3', 'RIPEMD160'],
  component: () => import('./hmac-generator.vue'),
  icon: ShortTextRound,
--- a/src/tools/html-entities/index.ts
+++ b/src/tools/html-entities/index.ts
@ -1,10 +1,11 @@
 import { Code } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'Escape html entities',
+  name: translate('tools.html-entities.title'),
  path: '/html-entities',
-  description: 'Escape or unescape html entities (replace <,>, &, " and \' to their html version)',
+  description: translate('tools.html-entities.description'),
  keywords: ['html', 'entities', 'escape', 'unescape', 'special', 'characters', 'tags'],
  component: () => import('./html-entities.vue'),
  icon: Code,
--- a/src/tools/html-wysiwyg-editor/index.ts
+++ b/src/tools/html-wysiwyg-editor/index.ts
@ -1,10 +1,11 @@
 import { Edit } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'HTML WYSIWYG editor',
+  name: translate('tools.html-wysiwyg-editor.title'),
  path: '/html-wysiwyg-editor',
-  description: 'Online HTML editor with feature-rich WYSIWYG editor, get the source code of the content immediately.',
+  description: translate('tools.html-wysiwyg-editor.description'),
  keywords: ['html', 'wysiwyg', 'editor', 'p', 'ul', 'ol', 'converter', 'live'],
  component: () => import('./html-wysiwyg-editor.vue'),
  icon: Edit,
--- a/src/tools/http-status-codes/index.ts
+++ b/src/tools/http-status-codes/index.ts
@ -2,11 +2,12 @@ import { HttpRound } from '@vicons/material';
 import { defineTool } from '../tool';

 import { codesByCategories } from './http-status-codes.constants';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'HTTP status codes',
+  name: translate('tools.http-status-codes.title'),
  path: '/http-status-codes',
-  description: 'The list of all HTTP status codes their name and their meaning.',
+  description: translate('tools.http-status-codes.description'),
  keywords: [
    'http',
    'status',
--- a/src/tools/iban-validator-and-parser/index.ts
+++ b/src/tools/iban-validator-and-parser/index.ts
@ -1,10 +1,11 @@
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';
 import Bank from '~icons/mdi/bank';

 export const tool = defineTool({
-  name: 'IBAN validator and parser',
+  name: translate('tools.iban-validator-and-parser.title'),
  path: '/iban-validator-and-parser',
-  description: 'Validate and parse IBAN numbers. Check if IBAN is valid and get the country, BBAN, if it is a QR-IBAN and the IBAN friendly format.',
+  description: translate('tools.iban-validator-and-parser.description'),
  keywords: ['iban', 'validator', 'and', 'parser', 'bic', 'bank'],
  component: () => import('./iban-validator-and-parser.vue'),
  icon: Bank,
--- a/src/tools/index.ts
+++ b/src/tools/index.ts
@ -1,6 +1,17 @@
 import { tool as base64FileConverter } from './base64-file-converter';
 import { tool as base64StringConverter } from './base64-string-converter';
 import { tool as basicAuthGenerator } from './basic-auth-generator';
+import { tool as emailNormalizer } from './email-normalizer';
+
+import { tool as asciiTextDrawer } from './ascii-text-drawer';
+
+import { tool as textToUnicode } from './text-to-unicode';
+import { tool as safelinkDecoder } from './safelink-decoder';
+import { tool as xmlToJson } from './xml-to-json';
+import { tool as jsonToXml } from './json-to-xml';
+import { tool as regexTester } from './regex-tester';
+import { tool as regexMemo } from './regex-memo';
+import { tool as markdownToHtml } from './markdown-to-html';
 import { tool as durationCalculator } from './duration-calculator';
 import { tool as pdfSignatureChecker } from './pdf-signature-checker';
 import { tool as numeronymGenerator } from './numeronym-generator';
@ -76,6 +87,7 @@ import { tool as urlParser } from './url-parser';
 import { tool as uuidGenerator } from './uuid-generator';
 import { tool as macAddressLookup } from './mac-address-lookup';
 import { tool as xmlFormatter } from './xml-formatter';
+import { tool as yamlViewer } from './yaml-viewer';

 export const toolsByCategory: ToolCategory[] = [
  {
@ -94,6 +106,7 @@ export const toolsByCategory: ToolCategory[] = [
      caseConverter,
      textToNatoAlphabet,
      textToBinary,
+      textToUnicode,
      yamlToJson,
      yamlToToml,
      jsonToYaml,
@ -101,6 +114,9 @@ export const toolsByCategory: ToolCategory[] = [
      listConverter,
      tomlToJson,
      tomlToYaml,
+      xmlToJson,
+      jsonToXml,
+      markdownToHtml,
    ],
  },
  {
@ -121,6 +137,7 @@ export const toolsByCategory: ToolCategory[] = [
      userAgentParser,
      httpStatusCodes,
      jsonDiff,
+      safelinkDecoder,
    ],
  },
  {
@ -140,6 +157,10 @@ export const toolsByCategory: ToolCategory[] = [
      chmodCalculator,
      dockerRunToDockerComposeConverter,
      xmlFormatter,
+      yamlViewer,
+      emailNormalizer,
+      regexTester,
+      regexMemo,
    ],
  },
  {
@ -161,7 +182,15 @@ export const toolsByCategory: ToolCategory[] = [
  },
  {
    name: 'Text',
-    components: [loremIpsumGenerator, textStatistics, emojiPicker, stringObfuscator, textDiff, numeronymGenerator],
+    components: [
+      loremIpsumGenerator,
+      textStatistics,
+      emojiPicker,
+      stringObfuscator,
+      textDiff,
+      numeronymGenerator,
+      asciiTextDrawer,
+    ],
  },
  {
    name: 'Data',
--- a/src/tools/integer-base-converter/index.ts
+++ b/src/tools/integer-base-converter/index.ts
@ -1,10 +1,11 @@
 import { ArrowsLeftRight } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'Integer base converter',
+  name: translate('tools.base-converter.title'),
  path: '/base-converter',
-  description: 'Convert number between different bases (decimal, hexadecimal, binary, octal, base64, ...)',
+  description: translate('tools.base-converter.description'),
  keywords: ['integer', 'number', 'base', 'conversion', 'decimal', 'hexadecimal', 'binary', 'octal', 'base64'],
  component: () => import('./integer-base-converter.vue'),
  icon: ArrowsLeftRight,
--- a/src/tools/integer-base-converter/integer-base-converter.model.test.ts
+++ b/src/tools/integer-base-converter/integer-base-converter.model.test.ts
@ -11,6 +11,9 @@ describe('integer-base-converter', () => {
        expect(convertBase({ value: '10100101', fromBase: 2, toBase: 16 })).toEqual('a5');
        expect(convertBase({ value: '192654', fromBase: 10, toBase: 8 })).toEqual('570216');
        expect(convertBase({ value: 'zz', fromBase: 64, toBase: 10 })).toEqual('2275');
+        expect(convertBase({ value: '42540766411283223938465490632011909384', fromBase: 10, toBase: 10 })).toEqual('42540766411283223938465490632011909384');
+        expect(convertBase({ value: '42540766411283223938465490632011909384', fromBase: 10, toBase: 16 })).toEqual('20010db8000085a300000000ac1f8908');
+        expect(convertBase({ value: '20010db8000085a300000000ac1f8908', fromBase: 16, toBase: 10 })).toEqual('42540766411283223938465490632011909384');
      });
    });
  });
--- a/src/tools/integer-base-converter/integer-base-converter.model.ts
+++ b/src/tools/integer-base-converter/integer-base-converter.model.ts
@ -5,16 +5,16 @@ export function convertBase({ value, fromBase, toBase }: { value: string; fromBa
  let decValue = value
    .split('')
    .reverse()
-    .reduce((carry: number, digit: string, index: number) => {
+    .reduce((carry: bigint, digit: string, index: number) => {
      if (!fromRange.includes(digit)) {
        throw new Error(`Invalid digit "${digit}" for base ${fromBase}.`);
      }
-      return (carry += fromRange.indexOf(digit) * fromBase ** index);
-    }, 0);
+      return (carry += BigInt(fromRange.indexOf(digit)) * BigInt(fromBase) ** BigInt(index));
+    }, 0n);
  let newValue = '';
  while (decValue > 0) {
-    newValue = toRange[decValue % toBase] + newValue;
-    decValue = (decValue - (decValue % toBase)) / toBase;
+    newValue = toRange[Number(decValue % BigInt(toBase))] + newValue;
+    decValue = (decValue - (decValue % BigInt(toBase))) / BigInt(toBase);
  }
  return newValue || '0';
 }
--- a/src/tools/ipv4-address-converter/index.ts
+++ b/src/tools/ipv4-address-converter/index.ts
@ -1,10 +1,11 @@
 import { Binary } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'Ipv4 address converter',
+  name: translate('tools.ipv4-address-converter.title'),
  path: '/ipv4-address-converter',
-  description: 'Convert an ip address into decimal, binary, hexadecimal or event in ipv6',
+  description: translate('tools.ipv4-address-converter.description'),
  keywords: ['ipv4', 'address', 'converter', 'decimal', 'hexadecimal', 'binary', 'ipv6'],
  component: () => import('./ipv4-address-converter.vue'),
  icon: Binary,
--- a/src/tools/ipv4-range-expander/index.ts
+++ b/src/tools/ipv4-range-expander/index.ts
@ -1,11 +1,11 @@
 import { UnfoldMoreOutlined } from '@vicons/material';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'IPv4 range expander',
+  name: translate('tools.ipv4-range-expander.title'),
  path: '/ipv4-range-expander',
-  description:
-    'Given a start and an end IPv4 address this tool calculates a valid IPv4 network with its CIDR notation.',
+  description: translate('tools.ipv4-range-expander.description'),
  keywords: ['ipv4', 'range', 'expander', 'subnet', 'creator', 'cidr'],
  component: () => import('./ipv4-range-expander.vue'),
  icon: UnfoldMoreOutlined,
--- a/src/tools/ipv4-subnet-calculator/index.ts
+++ b/src/tools/ipv4-subnet-calculator/index.ts
@ -1,10 +1,11 @@
 import { RouterOutlined } from '@vicons/material';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'IPv4 subnet calculator',
+  name: translate('tools.ipv4-subnet-calculator.title'),
  path: '/ipv4-subnet-calculator',
-  description: 'Parse your IPv4 CIDR blocks and get all the info you need about your sub network.',
+  description: translate('tools.ipv4-subnet-calculator.description'),
  keywords: ['ipv4', 'subnet', 'calculator', 'mask', 'network', 'cidr', 'netmask', 'bitmask', 'broadcast', 'address'],
  component: () => import('./ipv4-subnet-calculator.vue'),
  icon: RouterOutlined,
--- a/src/tools/ipv6-ula-generator/index.ts
+++ b/src/tools/ipv6-ula-generator/index.ts
@ -1,10 +1,11 @@
 import { BuildingFactory } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'IPv6 ULA generator',
+  name: translate('tools.ipv6-ula-generator.title'),
  path: '/ipv6-ula-generator',
-  description: 'Generate your own local, non-routable IP addresses on your network according to RFC4193.',
+  description: translate('tools.ipv6-ula-generator.description'),
  keywords: ['ipv6', 'ula', 'generator', 'rfc4193', 'network', 'private'],
  component: () => import('./ipv6-ula-generator.vue'),
  icon: BuildingFactory,
--- a/src/tools/json-diff/index.ts
+++ b/src/tools/json-diff/index.ts
@ -1,10 +1,11 @@
 import { CompareArrowsRound } from '@vicons/material';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'JSON diff',
+  name: translate('tools.json-diff.title'),
  path: '/json-diff',
-  description: 'Compare two JSON objects and get the differences between them.',
+  description: translate('tools.json-diff.description'),
  keywords: ['json', 'diff', 'compare', 'difference', 'object', 'data'],
  component: () => import('./json-diff.vue'),
  icon: CompareArrowsRound,
--- a/src/tools/json-minify/index.ts
+++ b/src/tools/json-minify/index.ts
@ -1,10 +1,11 @@
 import { Braces } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'JSON minify',
+  name: translate('tools.json-minify.title'),
  path: '/json-minify',
-  description: 'Minify and compress your JSON by removing unnecessary white spaces.',
+  description: translate('tools.json-minify.description'),
  keywords: ['json', 'minify', 'format'],
  component: () => import('./json-minify.vue'),
  icon: Braces,
--- a/src/tools/json-to-csv/index.ts
+++ b/src/tools/json-to-csv/index.ts
@ -1,10 +1,11 @@
 import { List } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'JSON to CSV',
+  name: translate('tools.json-to-csv.title'),
  path: '/json-to-csv',
-  description: 'Convert JSON to CSV with automatic header detection.',
+  description: translate('tools.json-to-csv.description'),
  keywords: ['json', 'to', 'csv', 'convert'],
  component: () => import('./json-to-csv.vue'),
  icon: List,
--- a/src/tools/json-to-toml/index.ts
+++ b/src/tools/json-to-toml/index.ts
@ -1,10 +1,11 @@
 import { Braces } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'JSON to TOML',
+  name: translate('tools.json-to-toml.title'),
  path: '/json-to-toml',
-  description: 'Parse and convert JSON to TOML.',
+  description: translate('tools.json-to-toml.description'),
  keywords: ['json', 'parse', 'toml', 'convert', 'transform'],
  component: () => import('./json-to-toml.vue'),
  icon: Braces,
--- a/src/tools/json-to-xml/index.ts
+++ b/src/tools/json-to-xml/index.ts
@ -0,0 +1,12 @@
+import { Braces } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'JSON to XML',
+  path: '/json-to-xml',
+  description: 'Convert JSON to XML',
+  keywords: ['json', 'xml'],
+  component: () => import('./json-to-xml.vue'),
+  icon: Braces,
+  createdAt: new Date('2024-08-09'),
+});
--- a/src/tools/json-to-xml/json-to-xml.vue
+++ b/src/tools/json-to-xml/json-to-xml.vue
@ -0,0 +1,32 @@
+<script setup lang="ts">
+import convert from 'xml-js';
+import JSON5 from 'json5';
+import { withDefaultOnError } from '@/utils/defaults';
+import type { UseValidationRule } from '@/composable/validation';
+
+const defaultValue = '{"a":{"_attributes":{"x":"1.234","y":"It\'s"}}}';
+function transformer(value: string) {
+  return withDefaultOnError(() => {
+    return convert.js2xml(JSON5.parse(value), { compact: true });
+  }, '');
+}
+
+const rules: UseValidationRule<string>[] = [
+  {
+    validator: (v: string) => v === '' || JSON5.parse(v),
+    message: 'Provided JSON is not valid.',
+  },
+];
+</script>
+
+<template>
+  <format-transformer
+    input-label="Your JSON content"
+    :input-default="defaultValue"
+    input-placeholder="Paste your JSON content here..."
+    output-label="Converted XML"
+    output-language="xml"
+    :transformer="transformer"
+    :input-validation-rules="rules"
+  />
+</template>
--- a/src/tools/json-to-yaml-converter/index.ts
+++ b/src/tools/json-to-yaml-converter/index.ts
@ -1,10 +1,11 @@
 import { Braces } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'JSON to YAML converter',
+  name: translate('tools.json-to-yaml-converter.title'),
  path: '/json-to-yaml-converter',
-  description: 'Simply convert JSON to YAML with this live online converter.',
+  description: translate('tools.json-to-yaml-converter.description'),
  keywords: ['yaml', 'to', 'json'],
  component: () => import('./json-to-yaml.vue'),
  icon: Braces,
--- a/src/tools/json-viewer/index.ts
+++ b/src/tools/json-viewer/index.ts
@ -1,10 +1,11 @@
 import { Braces } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'JSON prettify and format',
+  name: translate('tools.json-prettify.title'),
  path: '/json-prettify',
-  description: 'Prettify your JSON string to a human friendly readable format.',
+  description: translate('tools.json-prettify.description'),
  keywords: ['json', 'viewer', 'prettify', 'format'],
  component: () => import('./json-viewer.vue'),
  icon: Braces,
--- a/src/tools/jwt-parser/index.ts
+++ b/src/tools/jwt-parser/index.ts
@ -1,10 +1,11 @@
 import { Key } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'JWT parser',
+  name: translate('tools.jwt-parser.title'),
  path: '/jwt-parser',
-  description: 'Parse and decode your JSON Web Token (jwt) and display its content.',
+  description: translate('tools.jwt-parser.description'),
  keywords: [
    'jwt',
    'parser',
--- a/src/tools/jwt-parser/jwt-parser.service.ts
+++ b/src/tools/jwt-parser/jwt-parser.service.ts
@ -19,7 +19,7 @@ function decodeJwt({ jwt }: { jwt: string }) {

 function parseClaims({ claim, value }: { claim: string; value: unknown }) {
  const claimDescription = CLAIM_DESCRIPTIONS[claim];
-  const formattedValue = _.isPlainObject(value) ? JSON.stringify(value, null, 3) : _.toString(value);
+  const formattedValue = _.isPlainObject(value) || _.isArray(value) ? JSON.stringify(value, null, 3) : _.toString(value);
  const friendlyValue = getFriendlyValue({ claim, value });

  return {
--- a/src/tools/jwt-parser/jwt-parser.vue
+++ b/src/tools/jwt-parser/jwt-parser.vue
@ -39,7 +39,7 @@ const validation = useValidation({
            {{ section.title }}
          </th>
          <tr v-for="{ claim, claimDescription, friendlyValue, value } in decodedJWT[section.key]" :key="claim + value">
-            <td class="claims">
+            <td class="claims" style="vertical-align: top;">
              <span font-bold>
                {{ claim }}
              </span>
@ -47,7 +47,7 @@ const validation = useValidation({
                ({{ claimDescription }})
              </span>
            </td>
-            <td>
+            <td style="word-wrap: break-word;word-break: break-all;">
              <span>{{ value }}</span>
              <span v-if="friendlyValue" ml-2 op-70>
                ({{ friendlyValue }})
--- a/src/tools/keycode-info/index.ts
+++ b/src/tools/keycode-info/index.ts
@ -1,10 +1,11 @@
 import { Keyboard } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'Keycode info',
+  name: translate('tools.keycode-info.title'),
  path: '/keycode-info',
-  description: 'Find the javascript keycode, code, location and modifiers of any pressed key.',
+  description: translate('tools.keycode-info.description'),
  keywords: [
    'keycode',
    'info',
--- a/src/tools/list-converter/index.ts
+++ b/src/tools/list-converter/index.ts
@ -1,11 +1,11 @@
 import { List } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'List converter',
+  name: translate('tools.list-converter.title'),
  path: '/list-converter',
-  description:
-    'This tool can process column-based data and apply various changes (transpose, add prefix and suffix, reverse list, sort list, lowercase values, truncate values) to each row.',
+  description: translate('tools.list-converter.description'),
  keywords: ['list', 'converter', 'sort', 'reverse', 'prefix', 'suffix', 'lowercase', 'truncate'],
  component: () => import('./list-converter.vue'),
  icon: List,
--- a/src/tools/lorem-ipsum-generator/index.ts
+++ b/src/tools/lorem-ipsum-generator/index.ts
@ -1,11 +1,11 @@
 import { AlignJustified } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'Lorem ipsum generator',
+  name: translate('tools.lorem-ipsum-generator.title'),
  path: '/lorem-ipsum-generator',
-  description:
-    'Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content',
+  description: translate('tools.lorem-ipsum-generator.description'),
  keywords: ['lorem', 'ipsum', 'dolor', 'sit', 'amet', 'placeholder', 'text', 'filler', 'random', 'generator'],
  component: () => import('./lorem-ipsum-generator.vue'),
  icon: AlignJustified,
--- a/src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue
+++ b/src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue
@ -2,6 +2,7 @@
 import { generateLoremIpsum } from './lorem-ipsum-generator.service';
 import { useCopy } from '@/composable/copy';
 import { randIntFromInterval } from '@/utils/random';
+import { computedRefreshable } from '@/composable/computedRefreshable';

 const paragraphs = ref(1);
 const sentences = ref([3, 8]);
@ -9,7 +10,7 @@ const words = ref([8, 15]);
 const startWithLoremIpsum = ref(true);
 const asHTML = ref(false);

-const loremIpsumText = computed(() =>
+const [loremIpsumText, refreshLoremIpsum] = computedRefreshable(() =>
  generateLoremIpsum({
    paragraphCount: paragraphs.value,
    asHTML: asHTML.value,
@ -18,6 +19,7 @@ const loremIpsumText = computed(() =>
    startWithLoremIpsum: startWithLoremIpsum.value,
  }),
 );
+
 const { copy } = useCopy({ source: loremIpsumText, text: 'Lorem ipsum copied to the clipboard' });
 </script>

@ -41,10 +43,13 @@ const { copy } = useCopy({ source: loremIpsumText, text: 'Lorem ipsum copied to

    <c-input-text :value="loremIpsumText" multiline placeholder="Your lorem ipsum..." readonly mt-5 rows="5" />

-    <div mt-5 flex justify-center>
+    <div mt-5 flex justify-center gap-3>
      <c-button autofocus @click="copy()">
        Copy
      </c-button>
+      <c-button @click="refreshLoremIpsum">
+        Refresh
+      </c-button>
    </div>
  </c-card>
 </template>
--- a/src/tools/mac-address-generator/index.ts
+++ b/src/tools/mac-address-generator/index.ts
@ -1,10 +1,11 @@
 import { Devices } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'MAC address generator',
+  name: translate('tools.mac-address-generator.title'),
  path: '/mac-address-generator',
-  description: 'Enter the quantity and prefix. MAC addresses will be generated in your chosen case (uppercase or lowercase)',
+  description: translate('tools.mac-address-generator.description'),
  keywords: ['mac', 'address', 'generator', 'random', 'prefix'],
  component: () => import('./mac-address-generator.vue'),
  icon: Devices,
--- a/src/tools/mac-address-lookup/index.ts
+++ b/src/tools/mac-address-lookup/index.ts
@ -1,10 +1,11 @@
 import { Devices } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'MAC address lookup',
+  name: translate('tools.mac-address-lookup.title'),
  path: '/mac-address-lookup',
-  description: 'Find the vendor and manufacturer of a device by its MAC address.',
+  description: translate('tools.mac-address-lookup.description'),
  keywords: ['mac', 'address', 'lookup', 'vendor', 'parser', 'manufacturer'],
  component: () => import('./mac-address-lookup.vue'),
  icon: Devices,
--- a/src/tools/markdown-to-html/index.ts
+++ b/src/tools/markdown-to-html/index.ts
@ -0,0 +1,12 @@
+import { Markdown } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Markdown to HTML',
+  path: '/markdown-to-html',
+  description: 'Convert Markdown to Html and allow to print (as PDF)',
+  keywords: ['markdown', 'html', 'converter', 'pdf'],
+  component: () => import('./markdown-to-html.vue'),
+  icon: Markdown,
+  createdAt: new Date('2024-08-25'),
+});
--- a/src/tools/markdown-to-html/markdown-to-html.vue
+++ b/src/tools/markdown-to-html/markdown-to-html.vue
@ -0,0 +1,44 @@
+<script setup lang="ts">
+import markdownit from 'markdown-it';
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
+
+const inputMarkdown = ref('');
+const outputHtml = computed(() => {
+  const md = markdownit();
+  return md.render(inputMarkdown.value);
+});
+
+function printHtml() {
+  const w = window.open();
+  if (w === null) {
+    return;
+  }
+  w.document.body.innerHTML = outputHtml.value;
+  w.print();
+}
+</script>
+
+<template>
+  <div>
+    <c-input-text
+      v-model:value="inputMarkdown"
+      multiline raw-text
+      placeholder="Your Markdown content..."
+      rows="8"
+      autofocus
+      label="Your Markdown to convert:"
+    />
+
+    <n-divider />
+
+    <n-form-item label="Output HTML:">
+      <TextareaCopyable :value="outputHtml" :word-wrap="true" language="html" />
+    </n-form-item>
+
+    <div flex justify-center>
+      <n-button @click="printHtml">
+        Print as PDF
+      </n-button>
+    </div>
+  </div>
+</template>
--- a/src/tools/math-evaluator/index.ts
+++ b/src/tools/math-evaluator/index.ts
@ -1,10 +1,11 @@
 import { Math } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'Math evaluator',
+  name: translate('tools.math-evaluator.title'),
  path: '/math-evaluator',
-  description: 'A calculator for evaluating mathematical expressions. You can use functions like sqrt, cos, sin, abs, etc.',
+  description: translate('tools.math-evaluator.description'),
  keywords: [
    'math',
    'evaluator',
--- a/src/tools/meta-tag-generator/index.ts
+++ b/src/tools/meta-tag-generator/index.ts
@ -1,10 +1,11 @@
 import { Tags } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'Open graph meta generator',
+  name: translate('tools.og-meta-generator.title'),
  path: '/og-meta-generator',
-  description: 'Generate open-graph and socials html meta tags for your website.',
+  description: translate('tools.og-meta-generator.description'),
  keywords: [
    'meta',
    'tag',
--- a/src/tools/mime-types/index.ts
+++ b/src/tools/mime-types/index.ts
@ -1,10 +1,11 @@
 import { World } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'Mime types',
+  name: translate('tools.mime-types.title'),
  path: '/mime-types',
-  description: 'Convert mime types to extensions and vice-versa.',
+  description: translate('tools.mime-types.description'),
  keywords: ['mime', 'types', 'extension', 'content', 'type'],
  component: () => import('./mime-types.vue'),
  icon: World,
--- a/src/tools/numeronym-generator/index.ts
+++ b/src/tools/numeronym-generator/index.ts
@ -1,10 +1,11 @@
 import { defineTool } from '../tool';
 import n7mIcon from './n7m-icon.svg?component';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'Numeronym generator',
+  name: translate('tools.numeronym-generator.title'),
  path: '/numeronym-generator',
-  description: 'A numeronym is a word where a number is used to form an abbreviation. For example, "i18n" is a numeronym of "internationalization" where 18 stands for the number of letters between the first i and the last n in the word.',
+  description: translate('tools.numeronym-generator.description'),
  keywords: ['numeronym', 'generator', 'abbreviation', 'i18n', 'a11y', 'l10n'],
  component: () => import('./numeronym-generator.vue'),
  icon: n7mIcon,
--- a/src/tools/otp-code-generator-and-validator/index.ts
+++ b/src/tools/otp-code-generator-and-validator/index.ts
@ -1,10 +1,11 @@
 import { DeviceMobile } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'OTP code generator',
+  name: translate('tools.otp-generator.title'),
  path: '/otp-generator',
-  description: 'Generate and validate time-based OTP (one time password) for multi-factor authentication.',
+  description: translate('tools.otp-generator.description'),
  keywords: [
    'otp',
    'code',
--- a/src/tools/password-strength-analyser/index.ts
+++ b/src/tools/password-strength-analyser/index.ts
@ -1,10 +1,11 @@
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';
 import PasswordIcon from '~icons/mdi/form-textbox-password';

 export const tool = defineTool({
-  name: 'Password strength analyser',
+  name: translate('tools.password-strength-analyser.title'),
  path: '/password-strength-analyser',
-  description: 'Discover the strength of your password with this client side only password strength analyser and crack time estimation tool.',
+  description: translate('tools.password-strength-analyser.description'),
  keywords: ['password', 'strength', 'analyser', 'and', 'crack', 'time', 'estimation', 'brute', 'force', 'attack', 'entropy', 'cracking', 'hash', 'hashing', 'algorithm', 'algorithms', 'md5', 'sha1', 'sha256', 'sha512', 'bcrypt', 'scrypt', 'argon2', 'argon2id', 'argon2i', 'argon2d'],
  component: () => import('./password-strength-analyser.vue'),
  icon: PasswordIcon,
--- a/src/tools/pdf-signature-checker/index.ts
+++ b/src/tools/pdf-signature-checker/index.ts
@ -1,10 +1,11 @@
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';
 import FileCertIcon from '~icons/mdi/file-certificate-outline';

 export const tool = defineTool({
-  name: 'PDF signature checker',
+  name: translate('tools.pdf-signature-checker.title'),
  path: '/pdf-signature-checker',
-  description: 'Verify the signatures of a PDF file. A signed PDF file contains one or more signatures that may be used to determine whether the contents of the file have been altered since the file was signed.',
+  description: translate('tools.pdf-signature-checker.description'),
  keywords: ['pdf', 'signature', 'checker', 'verify', 'validate', 'sign'],
  component: () => import('./pdf-signature-checker.vue'),
  icon: FileCertIcon,
--- a/src/tools/percentage-calculator/index.ts
+++ b/src/tools/percentage-calculator/index.ts
@ -1,10 +1,11 @@
 import { Percentage } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'Percentage calculator',
+  name: translate('tools.percentage-calculator.title'),
  path: '/percentage-calculator',
-  description: 'Easily calculate percentages from a value to another value, or from a percentage to a value.',
+  description: translate('tools.percentage-calculator.description'),
  keywords: ['percentage', 'calculator', 'calculate', 'value', 'number', '%'],
  component: () => import('./percentage-calculator.vue'),
  icon: Percentage,
--- a/src/tools/phone-parser-and-formatter/index.ts
+++ b/src/tools/phone-parser-and-formatter/index.ts
@ -1,11 +1,11 @@
 import { Phone } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'Phone parser and formatter',
+  name: translate('tools.phone-parser-and-formatter.title'),
  path: '/phone-parser-and-formatter',
-  description:
-    'Parse, validate and format phone numbers. Get information about the phone number, like the country code, type, etc.',
+  description: translate('tools.phone-parser-and-formatter.description'),
  keywords: [
    'phone',
    'parser',
--- a/src/tools/qr-code-generator/index.ts
+++ b/src/tools/qr-code-generator/index.ts
@ -1,11 +1,11 @@
 import { Qrcode } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'QR Code generator',
+  name: translate('tools.qrcode-generator.title'),
  path: '/qrcode-generator',
-  description:
-    'Generate and download QR-code for an url or just a text and customize the background and foreground colors.',
+  description: translate('tools.qrcode-generator.description'),
  keywords: ['qr', 'code', 'generator', 'square', 'color', 'link', 'low', 'medium', 'quartile', 'high', 'transparent'],
  component: () => import('./qr-code-generator.vue'),
  icon: Qrcode,
--- a/src/tools/random-port-generator/index.ts
+++ b/src/tools/random-port-generator/index.ts
@ -1,10 +1,11 @@
 import { Server } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'Random port generator',
+  name: translate('tools.random-port-generator.title'),
  path: '/random-port-generator',
-  description: 'Generate random port numbers outside of the range of "known" ports (0-1023).',
+  description: translate('tools.random-port-generator.description'),
  keywords: ['system', 'port', 'lan', 'generator', 'random', 'development', 'computer'],
  component: () => import('./random-port-generator.vue'),
  icon: Server,
--- a/src/tools/regex-memo/index.ts
+++ b/src/tools/regex-memo/index.ts
@ -0,0 +1,12 @@
+import { BrandJavascript } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Regex cheatsheet',
+  path: '/regex-memo',
+  description: 'Javascript Regex/Regular Expression cheatsheet',
+  keywords: ['regex', 'regular', 'expression', 'javascript', 'memo', 'cheatsheet'],
+  component: () => import('./regex-memo.vue'),
+  icon: BrandJavascript,
+  createdAt: new Date('2024-09-20'),
+});
--- a/src/tools/regex-memo/regex-memo.content.md
+++ b/src/tools/regex-memo/regex-memo.content.md
@ -0,0 +1,121 @@
+### Normal characters
+
+Expression | Description
+:--|:--
+`.` or `[^\n\r]` | any character *excluding* a newline or carriage return
+`[A-Za-z]` | alphabet
+`[a-z]` | lowercase alphabet
+`[A-Z]` | uppercase alphabet
+`\d` or `[0-9]` | digit
+`\D` or `[^0-9]` | non-digit
+`_` | underscore
+`\w` or `[A-Za-z0-9_]` | alphabet, digit or underscore
+`\W` or `[^A-Za-z0-9_]` | inverse of `\w`
+`\S` | inverse of `\s`
+
+### Whitespace characters
+
+Expression | Description
+:--|:--
+` ` | space
+`\t` | tab
+`\n` | newline
+`\r` | carriage return
+`\s` | space, tab, newline or carriage return
+
+### Character set
+
+Expression | Description
+:--|:--
+`[xyz]` | either `x`, `y` or `z`
+`[^xyz]` | neither `x`, `y` nor `z`
+`[1-3]` | either `1`, `2` or `3`
+`[^1-3]` | neither `1`, `2` nor `3`
+
+- Think of a character set as an `OR` operation on the single characters that are enclosed between the square brackets.
+- Use `^` after the opening `[` to “negate” the character set.
+- Within a character set, `.` means a literal period.
+
+### Characters that require escaping
+
+#### Outside a character set
+
+Expression | Description
+:--|:--
+`\.` | period
+`\^` | caret
+`\$` | dollar sign
+`\|` | pipe
+`\\` | back slash
+`\/` | forward slash
+`\(` | opening bracket
+`\)` | closing bracket
+`\[` | opening square bracket
+`\]` | closing square bracket
+`\{` | opening curly bracket
+`\}` | closing curly bracket
+
+#### Inside a character set
+
+Expression | Description
+:--|:--
+`\\` | back slash
+`\]` | closing square bracket
+
+- A `^` must be escaped only if it occurs immediately after the opening `[` of the character set.
+- A `-` must be escaped only if it occurs between two alphabets or two digits.
+
+### Quantifiers
+
+Expression | Description
+:--|:--
+`{2}` | exactly 2
+`{2,}` | at least 2
+`{2,7}` | at least 2 but no more than 7
+`*` | 0 or more
+`+` | 1 or more
+`?` | exactly 0 or 1
+
+- The quantifier goes *after* the expression to be quantified.
+
+### Boundaries
+
+Expression | Description
+:--|:--
+`^` | start of string
+`$` | end of string
+`\b` | word boundary
+
+- How word boundary matching works:
+    - At the beginning of the string if the first character is `\w`.
+    - Between two adjacent characters within the string, if the first character is `\w` and the second character is `\W`.
+    - At the end of the string if the last character is `\w`.
+
+### Matching
+
+Expression | Description
+:--|:--
+`foo\|bar` | match either `foo` or `bar`
+`foo(?=bar)` | match `foo` if it’s before `bar`
+`foo(?!bar)` | match `foo` if it’s *not* before `bar`
+`(?<=bar)foo` | match `foo` if it’s after `bar`
+`(?<!bar)foo` | match `foo` if it’s *not* after `bar`
+
+### Grouping and capturing
+
+Expression | Description
+:--|:--
+`(foo)` | capturing group; match and capture `foo`
+`(?:foo)` | non-capturing group; match `foo` but *without* capturing `foo`
+`(foo)bar\1` | `\1` is a backreference to the 1st capturing group; match `foobarfoo`
+
+- Capturing groups are only relevant in the following methods:
+    - `string.match(regexp)`
+    - `string.matchAll(regexp)`
+    - `string.replace(regexp, callback)`
+- `\N` is a backreference to the `Nth` capturing group. Capturing groups are numbered starting from 1.
+
+## References and tools
+
+- [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions)
+- [RegExplained](https://leaverou.github.io/regexplained/)
--- a/src/tools/regex-memo/regex-memo.vue
+++ b/src/tools/regex-memo/regex-memo.vue
@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { useThemeVars } from 'naive-ui';
+import Memo from './regex-memo.content.md';
+
+const themeVars = useThemeVars();
+</script>
+
+<template>
+  <div>
+    <Memo />
+  </div>
+</template>
+
+<style lang="less" scoped>
+::v-deep(pre) {
+  margin: 0;
+  padding: 15px 22px;
+  background-color: v-bind('themeVars.cardColor');
+  border-radius: 4px;
+  overflow: auto;
+}
+::v-deep(table) {
+  border-collapse: collapse;
+}
+::v-deep(table), ::v-deep(td), ::v-deep(th) {
+  border: 1px solid v-bind('themeVars.textColor1');
+  padding: 5px;
+}
+::v-deep(a) {
+  color: v-bind('themeVars.textColor1');
+}
+</style>
--- a/src/tools/regex-tester/index.ts
+++ b/src/tools/regex-tester/index.ts
@ -0,0 +1,12 @@
+import { Language } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Regex Tester',
+  path: '/regex-tester',
+  description: 'Test your regular expressions with sample text.',
+  keywords: ['regex', 'tester', 'sample', 'expression'],
+  component: () => import('./regex-tester.vue'),
+  icon: Language,
+  createdAt: new Date('2024-09-20'),
+});
--- a/src/tools/regex-tester/regex-tester.service.test.ts
+++ b/src/tools/regex-tester/regex-tester.service.test.ts
@ -0,0 +1,106 @@
+import { describe, expect, it } from 'vitest';
+import { matchRegex } from './regex-tester.service';
+
+const regexesData = [
+  {
+    regex: '',
+    text: '',
+    flags: '',
+    result: [],
+  },
+  {
+    regex: '.*',
+    text: '',
+    flags: '',
+    result: [],
+  },
+  {
+    regex: '',
+    text: 'aaa',
+    flags: '',
+    result: [],
+  },
+  {
+    regex: 'a',
+    text: 'baaa',
+    flags: '',
+    result: [
+      {
+        captures: [],
+        groups: [],
+        index: 1,
+        value: 'a',
+      },
+    ],
+  },
+  {
+    regex: '(.)(?<g>r)',
+    text: 'azertyr',
+    flags: 'g',
+    result: [
+      {
+        captures: [
+          {
+            end: 3,
+            name: '1',
+            start: 2,
+            value: 'e',
+          },
+          {
+            end: 4,
+            name: '2',
+            start: 3,
+            value: 'r',
+          },
+        ],
+        groups: [
+          {
+            end: 4,
+            name: 'g',
+            start: 3,
+            value: 'r',
+          },
+        ],
+        index: 2,
+        value: 'er',
+      },
+      {
+        captures: [
+          {
+            end: 6,
+            name: '1',
+            start: 5,
+            value: 'y',
+          },
+          {
+            end: 7,
+            name: '2',
+            start: 6,
+            value: 'r',
+          },
+        ],
+        groups: [
+          {
+            end: 7,
+            name: 'g',
+            start: 6,
+            value: 'r',
+          },
+        ],
+        index: 5,
+        value: 'yr',
+      },
+    ],
+  },
+];
+
+describe('regex-tester', () => {
+  for (const reg of regexesData) {
+    const { regex, text, flags, result: expected_result } = reg;
+    it(`Should matchRegex("${regex}","${text}","${flags}") return correct result`, async () => {
+      const result = matchRegex(regex, text, `${flags}d`);
+
+      expect(result).to.deep.equal(expected_result);
+    });
+  }
+});
--- a/src/tools/regex-tester/regex-tester.service.ts
+++ b/src/tools/regex-tester/regex-tester.service.ts
@ -0,0 +1,61 @@
+interface RegExpGroupIndices {
+  [name: string]: [number, number]
+}
+interface RegExpIndices extends Array<[number, number]> {
+  groups: RegExpGroupIndices
+}
+interface RegExpExecArrayWithIndices extends RegExpExecArray {
+  indices: RegExpIndices
+}
+interface GroupCapture {
+  name: string
+  value: string
+  start: number
+  end: number
+};
+
+export function matchRegex(regex: string, text: string, flags: string) {
+  // if (regex === '' || text === '') {
+  //   return [];
+  // }
+
+  let lastIndex = -1;
+  const re = new RegExp(regex, flags);
+  const results = [];
+  let match = re.exec(text) as RegExpExecArrayWithIndices;
+  while (match !== null) {
+    if (re.lastIndex === lastIndex || match[0] === '') {
+      break;
+    }
+    const indices = match.indices;
+    const captures: Array<GroupCapture> = [];
+    Object.entries(match).forEach(([captureName, captureValue]) => {
+      if (captureName !== '0' && captureName.match(/\d+/)) {
+        captures.push({
+          name: captureName,
+          value: captureValue,
+          start: indices[Number(captureName)][0],
+          end: indices[Number(captureName)][1],
+        });
+      }
+    });
+    const groups: Array<GroupCapture> = [];
+    Object.entries(match.groups || {}).forEach(([groupName, groupValue]) => {
+      groups.push({
+        name: groupName,
+        value: groupValue,
+        start: indices.groups[groupName][0],
+        end: indices.groups[groupName][1],
+      });
+    });
+    results.push({
+      index: match.index,
+      value: match[0],
+      captures,
+      groups,
+    });
+    lastIndex = re.lastIndex;
+    match = re.exec(text) as RegExpExecArrayWithIndices;
+  }
+  return results;
+}
--- a/src/tools/regex-tester/regex-tester.vue
+++ b/src/tools/regex-tester/regex-tester.vue
@ -0,0 +1,193 @@
+<script setup lang="ts">
+import RandExp from 'randexp';
+import { render } from '@regexper/render';
+import type { ShadowRootExpose } from 'vue-shadow-dom';
+import { matchRegex } from './regex-tester.service';
+import { useValidation } from '@/composable/validation';
+import { useQueryParamOrStorage } from '@/composable/queryParams';
+
+const regex = useQueryParamOrStorage({ name: 'regex', storageName: 'regex-tester:regex', defaultValue: '' });
+const text = ref('');
+const global = ref(true);
+const ignoreCase = ref(false);
+const multiline = ref(false);
+const dotAll = ref(true);
+const unicode = ref(true);
+const unicodeSets = ref(false);
+const visualizerSVG = ref<ShadowRootExpose>();
+
+const regexValidation = useValidation({
+  source: regex,
+  rules: [
+    {
+      message: 'Invalid regex: {0}',
+      validator: value => new RegExp(value),
+      getErrorMessage: (value) => {
+        const _ = new RegExp(value);
+        return '';
+      },
+    },
+  ],
+});
+const results = computed(() => {
+  let flags = 'd';
+  if (global.value) {
+    flags += 'g';
+  }
+  if (ignoreCase.value) {
+    flags += 'i';
+  }
+  if (multiline.value) {
+    flags += 'm';
+  }
+  if (dotAll.value) {
+    flags += 's';
+  }
+  if (unicode.value) {
+    flags += 'u';
+  }
+  else if (unicodeSets.value) {
+    flags += 'v';
+  }
+
+  try {
+    return matchRegex(regex.value, text.value, flags);
+  }
+  catch (_) {
+    return [];
+  }
+});
+
+const sample = computed(() => {
+  try {
+    const randexp = new RandExp(new RegExp(regex.value.replace(/\(\?\<[^\>]*\>/g, '(?:')));
+    return randexp.gen();
+  }
+  catch (_) {
+    return '';
+  }
+});
+
+watchEffect(
+  async () => {
+    const regexValue = regex.value;
+    // shadow root is required:
+    // @regexper/render append a <defs><style> that broke svg transparency of icons in the whole site
+    const visualizer = visualizerSVG.value?.shadow_root;
+    if (visualizer) {
+      while (visualizer.lastChild) {
+        visualizer.removeChild(visualizer.lastChild);
+      }
+      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+      try {
+        await render(regexValue, svg);
+      }
+      catch (_) {
+      }
+      visualizer.appendChild(svg);
+    }
+  },
+);
+</script>
+
+<template>
+  <div max-w-600px>
+    <c-card title="Regex" mb-1>
+      <c-input-text
+        v-model:value="regex"
+        label="Regex to test:"
+        placeholder="Put the regex to test"
+        multiline
+        rows="3"
+        :validation="regexValidation"
+      />
+      <router-link target="_blank" to="/regex-memo" mb-1 mt-1>
+        See Regular Expression Cheatsheet
+      </router-link>
+      <n-space>
+        <n-checkbox v-model:checked="global">
+          <span title="Global search">Global search. (<code>g</code>)</span>
+        </n-checkbox>
+        <n-checkbox v-model:checked="ignoreCase">
+          <span title="Case-insensitive search">Case-insensitive search. (<code>i</code>)</span>
+        </n-checkbox>
+        <n-checkbox v-model:checked="multiline">
+          <span title="Allows ^ and $ to match next to newline characters.">Multiline(<code>m</code>)</span>
+        </n-checkbox>
+        <n-checkbox v-model:checked="dotAll">
+          <span title="Allows . to match newline characters.">Singleline(<code>s</code>)</span>
+        </n-checkbox>
+        <n-checkbox v-model:checked="unicode">
+          <span title="Unicode; treat a pattern as a sequence of Unicode code points.">Unicode(<code>u</code>)</span>
+        </n-checkbox>
+        <n-checkbox v-model:checked="unicodeSets">
+          <span title="An upgrade to the u mode with more Unicode features.">Unicode Sets (<code>v</code>)</span>
+        </n-checkbox>
+      </n-space>
+
+      <n-divider />
+
+      <c-input-text
+        v-model:value="text"
+        label="Text to match:"
+        placeholder="Put the text to match"
+        multiline
+        rows="5"
+      />
+    </c-card>
+
+    <c-card title="Matches" mb-1 mt-3>
+      <n-table v-if="results?.length > 0">
+        <thead>
+          <tr>
+            <th scope="col">
+              Index in text
+            </th>
+            <th scope="col">
+              Value
+            </th>
+            <th scope="col">
+              Captures
+            </th>
+            <th scope="col">
+              Groups
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="match of results" :key="match.index">
+            <td>{{ match.index }}</td>
+            <td>{{ match.value }}</td>
+            <td>
+              <ul>
+                <li v-for="capture in match.captures" :key="capture.name">
+                  "{{ capture.name }}" = {{ capture.value }} [{{ capture.start }} - {{ capture.end }}]
+                </li>
+              </ul>
+            </td>
+            <td>
+              <ul>
+                <li v-for="group in match.groups" :key="group.name">
+                  "{{ group.name }}" = {{ group.value }} [{{ group.start }} - {{ group.end }}]
+                </li>
+              </ul>
+            </td>
+          </tr>
+        </tbody>
+      </n-table>
+      <c-alert v-else>
+        No match
+      </c-alert>
+    </c-card>
+
+    <c-card title="Sample matching text" mt-3>
+      <pre style="white-space: pre-wrap; word-break: break-all;">{{ sample }}</pre>
+    </c-card>
+
+    <c-card title="Regex Diagram" style="overflow-x: scroll;" mt-3>
+      <shadow-root ref="visualizerSVG">
+&#xa0;
+      </shadow-root>
+    </c-card>
+  </div>
+</template>
--- a/src/tools/roman-numeral-converter/index.ts
+++ b/src/tools/roman-numeral-converter/index.ts
@ -1,10 +1,11 @@
 import { LetterX } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'Roman numeral converter',
+  name: translate('tools.roman-numeral-converter.title'),
  path: '/roman-numeral-converter',
-  description: 'Convert Roman numerals to numbers and convert numbers to Roman numerals.',
+  description: translate('tools.roman-numeral-converter.description'),
  keywords: ['roman', 'arabic', 'converter', 'X', 'I', 'V', 'L', 'C', 'D', 'M'],
  component: () => import('./roman-numeral-converter.vue'),
  icon: LetterX,
--- a/src/tools/rsa-key-pair-generator/index.ts
+++ b/src/tools/rsa-key-pair-generator/index.ts
@ -1,10 +1,11 @@
 import { Certificate } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'RSA key pair generator',
+  name: translate('tools.rsa-key-pair-generator.title'),
  path: '/rsa-key-pair-generator',
-  description: 'Generate new random RSA private and public key pem certificates.',
+  description: translate('tools.rsa-key-pair-generator.description'),
  keywords: ['rsa', 'key', 'pair', 'generator', 'public', 'private', 'secret', 'ssh', 'pem'],
  component: () => import('./rsa-key-pair-generator.vue'),
  icon: Certificate,
--- a/src/tools/safelink-decoder/index.ts
+++ b/src/tools/safelink-decoder/index.ts
@ -0,0 +1,12 @@
+import { Mailbox } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Outlook Safelink decoder',
+  path: '/safelink-decoder',
+  description: 'Decode Outlook SafeLink links',
+  keywords: ['outlook', 'safelink', 'decoder'],
+  component: () => import('./safelink-decoder.vue'),
+  icon: Mailbox,
+  createdAt: new Date('2024-03-11'),
+});
--- a/src/tools/safelink-decoder/safelink-decoder.service.test.ts
+++ b/src/tools/safelink-decoder/safelink-decoder.service.test.ts
@ -0,0 +1,21 @@
+import { describe, expect, it } from 'vitest';
+import { decodeSafeLinksURL } from './safelink-decoder.service';
+
+describe('safelink-decoder', () => {
+  describe('decodeSafeLinksURL', () => {
+    describe('decode outlook safelink urls', () => {
+      it('should decode basic safelink urls', () => {
+        expect(decodeSafeLinksURL('https://aus01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.google.com%2Fsearch%3Fq%3Dsafelink%26rlz%3D1&data=05%7C02%7C%7C1ed07253975b46da1d1508dc3443752a%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C638442711583216725%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C0%7C%7C%7C&sdata=%2BQY0HBnnxfI7pzZoxzlhZdDvYu80LwQB0zUUjrffVnk%3D&reserved=0'))
+          .toBe('https://www.google.com/search?q=safelink&rlz=1');
+      });
+      it('should decode encoded safelink urls', () => {
+        expect(decodeSafeLinksURL('https://aus01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.google.com%2Fsearch%3Fq%3Dsafelink%26rlz%3D1&amp;data=05%7C02%7C%7C1ed07253975b46da1d1508dc3443752a%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C638442711583216725%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C0%7C%7C%7C&amp;sdata=%2BQY0HBnnxfI7pzZoxzlhZdDvYu80LwQB0zUUjrffVnk%3D&amp;reserved=0'))
+          .toBe('https://www.google.com/search?q=safelink&rlz=1');
+      });
+      it('throw on not outlook safelink urls', () => {
+        expect(() => decodeSafeLinksURL('https://google.com'))
+          .toThrow('Invalid SafeLinks URL provided');
+      });
+    });
+  });
+});
--- a/src/tools/safelink-decoder/safelink-decoder.service.ts
+++ b/src/tools/safelink-decoder/safelink-decoder.service.ts
@ -0,0 +1,7 @@
+export function decodeSafeLinksURL(safeLinksUrl: string) {
+  if (!safeLinksUrl.match(/\.safelinks\.protection\.outlook\.com/)) {
+    throw new Error('Invalid SafeLinks URL provided');
+  }
+
+  return new URL(safeLinksUrl).searchParams.get('url');
+}
--- a/src/tools/safelink-decoder/safelink-decoder.vue
+++ b/src/tools/safelink-decoder/safelink-decoder.vue
@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { decodeSafeLinksURL } from './safelink-decoder.service';
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
+
+const inputSafeLinkUrl = ref('');
+const outputDecodedUrl = computed(() => {
+  try {
+    return decodeSafeLinksURL(inputSafeLinkUrl.value);
+  }
+  catch (e: any) {
+    return e.toString();
+  }
+});
+</script>
+
+<template>
+  <div>
+    <c-input-text
+      v-model:value="inputSafeLinkUrl"
+      raw-text
+      placeholder="Your input Outlook SafeLink Url..."
+      autofocus
+      label="Your input Outlook SafeLink Url:"
+    />
+
+    <n-divider />
+
+    <n-form-item label="Output decoded URL:">
+      <TextareaCopyable :value="outputDecodedUrl" :word-wrap="true" />
+    </n-form-item>
+  </div>
+</template>
--- a/src/tools/slugify-string/index.ts
+++ b/src/tools/slugify-string/index.ts
@ -1,10 +1,11 @@
 import { AbcRound } from '@vicons/material';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'Slugify string',
+  name: translate('tools.slugify-string.title'),
  path: '/slugify-string',
-  description: 'Make a string url, filename and id safe.',
+  description: translate('tools.slugify-string.description'),
  keywords: ['slugify', 'string', 'escape', 'emoji', 'special', 'character', 'space', 'trim'],
  component: () => import('./slugify-string.vue'),
  icon: AbcRound,
--- a/src/tools/sql-prettify/index.ts
+++ b/src/tools/sql-prettify/index.ts
@ -1,10 +1,11 @@
 import { Database } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'SQL prettify and format',
+  name: translate('tools.sql-prettify.title'),
  path: '/sql-prettify',
-  description: 'Format and prettify your SQL queries online (it supports various SQL dialects).',
+  description: translate('tools.sql-prettify.description'),
  keywords: [
    'sql',
    'prettify',
--- a/src/tools/string-obfuscator/index.ts
+++ b/src/tools/string-obfuscator/index.ts
@ -1,10 +1,11 @@
 import { EyeOff } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'String obfuscator',
+  name: translate('tools.string-obfuscator.title'),
  path: '/string-obfuscator',
-  description: 'Obfuscate a string (like a secret, an IBAN, or a token) to make it shareable and identifiable without revealing its content.',
+  description: translate('tools.string-obfuscator.description'),
  keywords: ['string', 'obfuscator', 'secret', 'token', 'hide', 'obscure', 'mask', 'masking'],
  component: () => import('./string-obfuscator.vue'),
  icon: EyeOff,
--- a/src/tools/svg-placeholder-generator/index.ts
+++ b/src/tools/svg-placeholder-generator/index.ts
@ -1,10 +1,11 @@
 import { ImageOutlined } from '@vicons/material';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'SVG placeholder generator',
+  name: translate('tools.svg-placeholder-generator.title'),
  path: '/svg-placeholder-generator',
-  description: 'Generate svg images to use as placeholder in your applications.',
+  description: translate('tools.svg-placeholder-generator.description'),
  keywords: ['svg', 'placeholder', 'generator', 'image', 'size', 'mockup'],
  component: () => import('./svg-placeholder-generator.vue'),
  icon: ImageOutlined,
--- a/src/tools/temperature-converter/index.ts
+++ b/src/tools/temperature-converter/index.ts
@ -1,11 +1,11 @@
 import { Temperature } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';

 export const tool = defineTool({
-  name: 'Temperature converter',
+  name: translate('tools.temperature-converter.title'),
  path: '/temperature-converter',
-  description:
-    'Temperature degrees conversions for Kelvin, Celsius, Fahrenheit, Rankine, Delisle, Newton, Réaumur and Rømer.',
+  description: translate('tools.temperature-converter.description'),
  keywords: [
    'temperature',
    'converter',
--- a/Show more
+++ b/Show more