chore(version): release 2023.12.21-5ed3693

docs(changelog): update changelog for 2023.12.21-5ed3693
fix(jwt-parser): jwt claim array support (#799 )
2023-12-21 08:45:28 +01:00 · 2023-12-21 08:45:27 +01:00 · 2023-12-12 14:04:19 +01:00 · 2023-11-29 13:58:07 +01:00 · 2023-11-22 20:27:46 +01:00 · 2023-11-16 18:27:51 +01:00
164 changed files with 5836 additions and 2784 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -0,0 +1,5 @@
+node_modules
+playwright-report
+coverage
+dist
+test-results
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -10,5 +10,12 @@ module.exports = {
    '@typescript-eslint/semi': ['error', 'always'],
    '@typescript-eslint/no-use-before-define': ['error', { allowNamedExports: true, functions: false }],
    'vue/no-empty-component-block': ['error'],
+    'no-restricted-imports': ['error', {
+      paths: [{
+        name: '@vueuse/core',
+        importNames: ['useClipboard'],
+        message: 'Please use local useCopy from src/composable/copy.ts instead of useClipboard.',
+      }],
+    }],
  },
 };
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -11,7 +11,7 @@ jobs:
    runs-on: ubuntu-latest

    steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac # v4
      - run: corepack enable
      - uses: actions/setup-node@v3
        with:
--- a/.github/workflows/codeql-analysis.yml
+++ b/.github/workflows/codeql-analysis.yml
@@ -37,7 +37,7 @@ jobs:

    steps:
    - name: Checkout repository
-      uses: actions/checkout@v3
+      uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac # v4

    # Initializes the CodeQL tools for scanning.
    - name: Initialize CodeQL
--- a/.github/workflows/docker-nightly-release.yml
+++ b/.github/workflows/docker-nightly-release.yml
@@ -12,7 +12,7 @@ jobs:
    outputs:
      should_run: ${{ steps.should_run.outputs.should_run }}
    steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac # v4
      - name: print latest_commit
        run: echo ${{ github.sha }}

@@ -28,7 +28,7 @@ jobs:
    if: ${{ needs.check_date.outputs.should_run != 'false' }}

    steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac # v4
      - run: corepack enable
      - uses: actions/setup-node@v3
        with:
@@ -54,29 +54,29 @@ jobs:

    steps:
      - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac # v4

      - name: Login to GitHub Container Registry
-        uses: docker/login-action@v2
+        uses: docker/login-action@v3
        with:
          registry: ghcr.io
          username: ${{ github.repository_owner }}
          password: ${{ secrets.GITHUB_TOKEN }}

      - name: Login to Docker Hub
-        uses: docker/login-action@v2
+        uses: docker/login-action@v3
        with:
          username: ${{ secrets.DOCKERHUB_USERNAME }}
          password: ${{ secrets.DOCKERHUB_TOKEN }}

      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v2
+        uses: docker/setup-qemu-action@v3

      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2
+        uses: docker/setup-buildx-action@v3

      - name: Build and push
-        uses: docker/build-push-action@v4
+        uses: docker/build-push-action@v5
        with:
          context: .
          file: ./Dockerfile
--- a/.github/workflows/e2e-tests.yml
+++ b/.github/workflows/e2e-tests.yml
@@ -1,18 +1,18 @@
 name: E2E tests
-on: [deployment_status]
-
+on:
+  pull_request:
+  push:
+    branches:
+      - main
 jobs:
  test:
-    if: github.event.deployment_status.state == 'success'
-    timeout-minutes: 60
+    timeout-minutes: 10
    runs-on: ubuntu-latest
-    env:
-      BASE_URL: ${{ github.event.deployment_status.target_url }}
    strategy:
      matrix:
        shard: [1/3, 2/3, 3/3]
    steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac # v4

      - run: corepack enable

@@ -28,6 +28,9 @@ jobs:
      - name: Install dependencies
        run: pnpm install

+      - name: Build app
+        run: pnpm build
+
      - name: Restore Playwright browsers from cache
        uses: actions/cache@v3
        with:
--- a/.github/workflows/releases.yml
+++ b/.github/workflows/releases.yml
@@ -13,29 +13,29 @@ jobs:
        run: echo "RELEASE_VERSION=${GITHUB_REF#refs/tags/v}" >> $GITHUB_ENV

      - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac # v4

      - name: Login to GitHub Container Registry
-        uses: docker/login-action@v2
+        uses: docker/login-action@v3
        with:
          registry: ghcr.io
          username: ${{ github.repository_owner }}
          password: ${{ secrets.GITHUB_TOKEN }}

      - name: Login to Docker Hub
-        uses: docker/login-action@v2
+        uses: docker/login-action@v3
        with:
          username: ${{ secrets.DOCKERHUB_USERNAME }}
          password: ${{ secrets.DOCKERHUB_TOKEN }}

      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v2
+        uses: docker/setup-qemu-action@v3

      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2
+        uses: docker/setup-buildx-action@v3

      - name: Build and push
-        uses: docker/build-push-action@v4
+        uses: docker/build-push-action@v5
        with:
          context: .
          file: ./Dockerfile
@@ -55,7 +55,7 @@ jobs:
        run: echo "RELEASE_VERSION=${GITHUB_REF#refs/tags/v}" >> $GITHUB_ENV

      - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac # v4

      - run: corepack enable

--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-18.17.1
+18.18.2
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,125 @@

 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.

+## Version 2023.12.21-5ed3693
+
+### Features
+- **i18n**: improve chinese i18n (#757) (2e56641)
+- **i18n**: add tooltip and favoriteButton i18n (#756) (a1037cf)
+- **i18n**: add Chinese translation base (#718) (8f99eb6)
+- **new tool**: pdf signature checker (#745) (4781920)
+- **new tool**: numeronym generator (#729) (e07e2ae)
+
+### Bug fixes
+- **jwt-parser**: jwt claim array support (#799) (5ed3693)
+- **camera-recorder**: stop camera on navigation (#782) (80e46c9)
+- **doc**: updated create new tool command in readme (#762) (7a70dbb)
+- **base64-file-converter**: fix downloading of index.html content without data preambula (#750) (043e4f0)
+- **docker**: rollback armv7 in docker releases (#741) (205e360)
+- **eta**: corrected example (#737) (821cbea)
+
+### Refactoring
+- **about, i18n**: improved i18n dx with markdown (#753) (bd3edcb)
+- **token, i18n**: complete fr translation (#752) (de1ee69)
+- **uuid generator**: uuid version picker (#751) (38586ca)
+- **case converter**: no split on lowercase, uppercase and mocking case (#748) (ca43a25)
+- **ui**: replaced legacy n-upload with c-file-upload (#747) (7fe47b3)
+- **token**: added password in token generator keywords (#746) (16ffe6b)
+- **bcrypt**: fix input label align (#721) (093ff31)
+
+### Chores
+- **deps**: switched from oui to oui-data for mac address lookup (#693) (0fe9a20)
+- **deps**: update unocss monorepo to ^0.57.0 (#638) (2e396d8)
+- **docker**: added armv7 plateform for docker releases (#722) (fe1de8c)
+
+## Version 2023.11.02-7d94e11
+
+### Features
+- **i18n**: language selector (#710) (e86fd96)
+
+### Bug fixes
+- **dockerfile**: revert replacement of nginx image with non-privileged one (#716) (7d94e11)
+- **encryption**: alert on decryption error (#711) (02b0d0d)
+
+### Refactoring
+- **math-evaluator**: improved description (e87f4b1)
+- **math-evaluator**: improved search and UX (#713) (58de897)
+
+## Version 2023.11.01-e164afb
+
+### Features
+- **command-palette**: clear prompt on palette close (#708) (d013696)
+- **command-palette**: added about page in command palette (99b1eb9)
+- **new tool**: random MAC address generator (#657) (cc3425d)
+- **case-converter**: added mocking case (#705) (681f7bf)
+- **date-converter**: added excel date time format (#704) (f5eb7a8)
+- **i18n**: token generator (#688) (02e68d3)
+- **i18n**: home page (#687) (00562ed)
+- **i18n**: support for i18n in .ts files (#683) (ebb4ec4)
+- **i18n**: tool card (#682) (84a4a64)
+- **i18n**: about page (#680) (a2b53c2)
+- **i18n**: 404 page (#679) (35563b8)
+- **new tool**: text to ascii converter (#669) (b2ad4f7)
+- **new tool**: ULID generator (#623) (5c4d775)
+- **new tool**: add wifi qr code generator (#599) (0eedce6)
+- **new tool**: iban validation and parser (#591) (3a63837)
+- **new tool**: text diff and comparator (#588) (81bfe57)
+
+### Bug fixes
+- **deps**: fix issue on slugify (#593) (#673) (720201a)
+- **deps**: update dependency monaco-editor to ^0.43.0 (#620) (e371ef7)
+- **deps**: update dependency sql-formatter to v13 (#606) (c7d4562)
+
+### Refactoring
+- **ui**: better ui demo preview menu (#664) (015c673)
+- **color-converter**: improved color-converter UX (#701) (abb8335)
+- **docker**: improved docker config (#700) (020e9cb)
+- **c-table**: added description on c-table for accessibility (b408df8)
+- **ci**: reduced timeout in e2e (#666) (88b8818)
+- **ui**: new c-table ui component (#665) (ee4c853)
+- **ui**: removed n-page-header component in user-agent parser (#663) (cbf58fd)
+- **ui**: removed n-p components in about page (#662) (a757a51)
+- **ui**: switched naive tooltip components to custom ones (#661) (025f556)
+- **spelling**: minor corrections to phrasing/spelling (#596) (8a30b6b)
+- **i18n**: merge tools scoped locales with global ones (#612) (233d556)
+- **c-key-value-list**: got rid of table for layout (#611) (7ab9204)
+- **CI**: run e2e against built app and no longer vercel (#610) (18dd140)
+- **bcrypt**: fix typo (#604) (e18bae1)
+
+### Chores
+- **deps**: clean unused dependencies (#709) (e164afb)
+- **deps**: update docker/setup-qemu-action action to v3 (#627) (4365226)
+- **deps**: update docker/setup-buildx-action action to v3 (#626) (57ecda1)
+- **deps**: update docker/login-action action to v3 (#625) (d8d7a3b)
+- **deps**: update docker/build-push-action action to v5 (#624) (d36b18f)
+- **deps**: update dependency node to v18.18.2 (#674) (eea9f91)
+- **deps**: update dependency node to v18.18.0 (#636) (2d2dffb)
+- **deps**: update actions/checkout action to v4 (#613) (4972159)
+- **deps**: update dependency unplugin-icons to ^0.17.0 (#609) (f035f48)
+- **deps**: update dependency @intlify/unplugin-vue-i18n to ^0.13.0 (#597) (d1dff42)
+- **deps**: update dependency @antfu/eslint-config to ^0.41.0 (#585) (a9cd91c)
+- **deps**: update dependency typescript to ~5.2.0 (#587) (f3e14fc)
+
+### Doc
+- **readme**: added contributors list (#622) (557b304)
+- **hosting**: added cloudron in the other hosting solutions section (#589) (06c3547)
+
+## Version 2023.08.21-6f93cba
+
+### Features
+- **copy**: support legacy copy to clipboard for older browser (#581) (6f93cba)
+- **new tool**: string obfuscator (#575) (c58d6e3)
+
+### Bug fixes
+- **deps**: update dependency sql-formatter to v12 (#520) (2bcb77a)
+
+### Chores
+- **deps**: switched to fucking typescript v5 (#501) (76b2761)
+- **deps**: update dependency @antfu/eslint-config to ^0.40.0 (#552) (6ff9a01)
+- **deps**: update dependency prettier to v3 (#564) (a2b9b15)
+- **deps**: removed @typescript-eslint/parser (#563) (144f86e)
+- **deps**: removed ts-pattern (#565) (0f1f659)
+
 ## Version 2023.08.16-9bd4ad4

 ### Features
--- a/7
+++ b/7
@@ -1,9 +1,12 @@
 # build stage
 FROM node:lts-alpine AS build-stage
+# Set environment variables for non-interactive npm installs
+ENV NPM_CONFIG_LOGLEVEL warn
+ENV CI true
 WORKDIR /app
+COPY package.json pnpm-lock.yaml ./
+RUN npm install -g pnpm && pnpm i --frozen-lockfile
 COPY . .
-RUN npm install -g pnpm
-RUN pnpm i --frozen-lockfile
 RUN pnpm build

 # production stage
--- a/README.md
+++ b/README.md
@@ -26,6 +26,7 @@ docker run -d --name it-tools --restart unless-stopped -p 8080:80 ghcr.io/corent

 **Other solutions:**

+- [Cloudron](https://www.cloudron.io/store/tech.ittools.cloudron.html)
 - [Tipi](https://www.runtipi.io/docs/apps-available)
 - [Unraid](https://unraid.net/community/apps?q=it-tools)

@@ -34,6 +35,7 @@ docker run -d --name it-tools --restart unless-stopped -p 8080:80 ghcr.io/corent
 ### Recommended IDE Setup

 [VSCode](https://code.visualstudio.com/) with the following extensions:
+
 - [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur)
 - [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
 - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
@@ -41,16 +43,13 @@ docker run -d --name it-tools --restart unless-stopped -p 8080:80 ghcr.io/corent

 with the following settings:

-```json5
+```json
 {
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
-  "i18n-ally.localesPaths": [
-    "locales",
-    "src/tools/*/locales"
-  ],
+  "i18n-ally.localesPaths": ["locales", "src/tools/*/locales"],
  "i18n-ally.keystyle": "nested"
 }
 ```
@@ -101,17 +100,25 @@ pnpm lint
 To create a new tool, there is a script that generate the boilerplate of the new tool, simply run:

 ```sh
-pnpm run script:create-new-tool my-tool-name
+pnpm run script:create:tool my-tool-name
 ```

 It will create a directory in `src/tools` with the correct files, and a the import in `src/tools/index.ts`. You will just need to add the imported tool in the proper category and develop the tool.

+## Contributors
+
+Big thanks to all the people who have already contributed!
+
+[![contributors](https://contrib.rocks/image?repo=corentinth/it-tools)](https://github.com/corentinth/it-tools/graphs/contributors)
+
 ## Credits

 Coded with ❤️ by [Corentin Thomasset](//corentin-thomasset.fr).

 This project is continuously deployed using [vercel.com](https://vercel.com).

+Contributor graph is generated using [contrib.rocks](https://contrib.rocks/preview?repo=corentinth/it-tools).
+
 <a href="https://www.producthunt.com/posts/it-tools?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-it&#0045;tools" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=345793&theme=light" alt="IT&#0032;Tools - Collection&#0032;of&#0032;handy&#0032;online&#0032;tools&#0032;for&#0032;devs&#0044;&#0032;with&#0032;great&#0032;UX | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
 <a href="https://www.producthunt.com/posts/it-tools?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-it&#0045;tools" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=345793&theme=light&period=daily" alt="IT&#0032;Tools - Collection&#0032;of&#0032;handy&#0032;online&#0032;tools&#0032;for&#0032;devs&#0044;&#0032;with&#0032;great&#0032;UX | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>

--- a/_templates/generator/ui-component/component.demo.ejs.t
+++ b/_templates/generator/ui-component/component.demo.ejs.t
@@ -0,0 +1,6 @@
+---
+to: src/ui/<%= h.changeCase.param(name) %>/<%= h.changeCase.param(name) %>.demo.vue
+---
+<template>
+  <<%= h.changeCase.param(name) %> />
+</template>
--- a/_templates/generator/ui-component/component.ejs.t
+++ b/_templates/generator/ui-component/component.ejs.t
@@ -0,0 +1,13 @@
+---
+to: src/ui/<%= h.changeCase.param(name) %>/<%= h.changeCase.param(name) %>.vue
+---
+<script lang="ts" setup>
+const props = withDefaults(defineProps<{ prop?: string }>(), { prop: '' });
+const { prop } = toRefs(props);
+</script>
+
+<template>
+  <div>
+    {{ prop }}
+  </div>
+</template>
--- a/components.d.ts
+++ b/components.d.ts
@@ -25,17 +25,30 @@ declare module '@vue/runtime-core' {
    CaseConverter: typeof import('./src/tools/case-converter/case-converter.vue')['default']
    CButton: typeof import('./src/ui/c-button/c-button.vue')['default']
    'CButton.demo': typeof import('./src/ui/c-button/c-button.demo.vue')['default']
+    CButtonsSelect: typeof import('./src/ui/c-buttons-select/c-buttons-select.vue')['default']
+    'CButtonsSelect.demo': typeof import('./src/ui/c-buttons-select/c-buttons-select.demo.vue')['default']
    CCard: typeof import('./src/ui/c-card/c-card.vue')['default']
    'CCard.demo': typeof import('./src/ui/c-card/c-card.demo.vue')['default']
+    CCollapse: typeof import('./src/ui/c-collapse/c-collapse.vue')['default']
+    'CCollapse.demo': typeof import('./src/ui/c-collapse/c-collapse.demo.vue')['default']
+    CDiffEditor: typeof import('./src/ui/c-diff-editor/c-diff-editor.vue')['default']
+    CFileUpload: typeof import('./src/ui/c-file-upload/c-file-upload.vue')['default']
+    'CFileUpload.demo': typeof import('./src/ui/c-file-upload/c-file-upload.demo.vue')['default']
    ChmodCalculator: typeof import('./src/tools/chmod-calculator/chmod-calculator.vue')['default']
    Chronometer: typeof import('./src/tools/chronometer/chronometer.vue')['default']
    CInputText: typeof import('./src/ui/c-input-text/c-input-text.vue')['default']
    'CInputText.demo': typeof import('./src/ui/c-input-text/c-input-text.demo.vue')['default']
+    CKeyValueList: typeof import('./src/ui/c-key-value-list/c-key-value-list.vue')['default']
+    CKeyValueListItem: typeof import('./src/ui/c-key-value-list/c-key-value-list-item.vue')['default']
    CLabel: typeof import('./src/ui/c-label/c-label.vue')['default']
    CLink: typeof import('./src/ui/c-link/c-link.vue')['default']
    'CLink.demo': typeof import('./src/ui/c-link/c-link.demo.vue')['default']
+    CMarkdown: typeof import('./src/ui/c-markdown/c-markdown.vue')['default']
+    'CMarkdown.demo': typeof import('./src/ui/c-markdown/c-markdown.demo.vue')['default']
    CModal: typeof import('./src/ui/c-modal/c-modal.vue')['default']
    'CModal.demo': typeof import('./src/ui/c-modal/c-modal.demo.vue')['default']
+    CModalValue: typeof import('./src/ui/c-modal-value/c-modal-value.vue')['default']
+    'CModalValue.demo': typeof import('./src/ui/c-modal-value/c-modal-value.demo.vue')['default']
    CollapsibleToolMenu: typeof import('./src/components/CollapsibleToolMenu.vue')['default']
    ColorConverter: typeof import('./src/tools/color-converter/color-converter.vue')['default']
    ColoredCard: typeof import('./src/components/ColoredCard.vue')['default']
@@ -44,8 +57,13 @@ declare module '@vue/runtime-core' {
    CrontabGenerator: typeof import('./src/tools/crontab-generator/crontab-generator.vue')['default']
    CSelect: typeof import('./src/ui/c-select/c-select.vue')['default']
    'CSelect.demo': typeof import('./src/ui/c-select/c-select.demo.vue')['default']
+    CTable: typeof import('./src/ui/c-table/c-table.vue')['default']
+    'CTable.demo': typeof import('./src/ui/c-table/c-table.demo.vue')['default']
+    CTextCopyable: typeof import('./src/ui/c-text-copyable/c-text-copyable.vue')['default']
+    'CTextCopyable.demo': typeof import('./src/ui/c-text-copyable/c-text-copyable.demo.vue')['default']
+    CTooltip: typeof import('./src/ui/c-tooltip/c-tooltip.vue')['default']
+    'CTooltip.demo': typeof import('./src/ui/c-tooltip/c-tooltip.demo.vue')['default']
    DateTimeConverter: typeof import('./src/tools/date-time-converter/date-time-converter.vue')['default']
-    'Demo.routes': typeof import('./src/ui/demo/demo.routes.vue')['default']
    'DemoHome.page': typeof import('./src/ui/demo/demo-home.page.vue')['default']
    DemoWrapper: typeof import('./src/ui/demo/demo-wrapper.vue')['default']
    DeviceInformation: typeof import('./src/tools/device-information/device-information.vue')['default']
@@ -68,12 +86,14 @@ declare module '@vue/runtime-core' {
    HtmlEntities: typeof import('./src/tools/html-entities/html-entities.vue')['default']
    HtmlWysiwygEditor: typeof import('./src/tools/html-wysiwyg-editor/html-wysiwyg-editor.vue')['default']
    HttpStatusCodes: typeof import('./src/tools/http-status-codes/http-status-codes.vue')['default']
+    IbanValidatorAndParser: typeof import('./src/tools/iban-validator-and-parser/iban-validator-and-parser.vue')['default']
    'IconMdi:brushVariant': typeof import('~icons/mdi/brush-variant')['default']
+    'IconMdi:contentCopy': typeof import('~icons/mdi/content-copy')['default']
    'IconMdi:kettleSteamOutline': typeof import('~icons/mdi/kettle-steam-outline')['default']
+    IconMdiArrowDown: typeof import('~icons/mdi/arrow-down')['default']
+    IconMdiArrowRight: typeof import('~icons/mdi/arrow-right')['default']
    IconMdiArrowRightBottom: typeof import('~icons/mdi/arrow-right-bottom')['default']
    IconMdiCamera: typeof import('~icons/mdi/camera')['default']
-    IconMdiCameraOutline: typeof import('~icons/mdi/camera-outline')['default']
-    IconMdiCameraVideoOff: typeof import('~icons/mdi/camera-video-off')['default']
    IconMdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
    IconMdiChevronRight: typeof import('~icons/mdi/chevron-right')['default']
    IconMdiClose: typeof import('~icons/mdi/close')['default']
@@ -82,14 +102,14 @@ declare module '@vue/runtime-core' {
    IconMdiDownload: typeof import('~icons/mdi/download')['default']
    IconMdiEye: typeof import('~icons/mdi/eye')['default']
    IconMdiEyeOff: typeof import('~icons/mdi/eye-off')['default']
-    IconMdiMagnify: typeof import('~icons/mdi/magnify')['default']
+    IconMdiHeart: typeof import('~icons/mdi/heart')['default']
    IconMdiPause: typeof import('~icons/mdi/pause')['default']
    IconMdiPlay: typeof import('~icons/mdi/play')['default']
    IconMdiRecord: typeof import('~icons/mdi/record')['default']
    IconMdiRefresh: typeof import('~icons/mdi/refresh')['default']
    IconMdiSearch: typeof import('~icons/mdi/search')['default']
-    IconMdiSearchRound: typeof import('~icons/mdi/search-round')['default']
-    IconMdiTea: typeof import('~icons/mdi/tea')['default']
+    IconMdiTranslate: typeof import('~icons/mdi/translate')['default']
+    IconMdiTriangleDown: typeof import('~icons/mdi/triangle-down')['default']
    IconMdiVideo: typeof import('~icons/mdi/video')['default']
    InputCopyable: typeof import('./src/components/InputCopyable.vue')['default']
    IntegerBaseConverter: typeof import('./src/tools/integer-base-converter/integer-base-converter.vue')['default']
@@ -106,7 +126,9 @@ declare module '@vue/runtime-core' {
    JwtParser: typeof import('./src/tools/jwt-parser/jwt-parser.vue')['default']
    KeycodeInfo: typeof import('./src/tools/keycode-info/keycode-info.vue')['default']
    ListConverter: typeof import('./src/tools/list-converter/list-converter.vue')['default']
+    LocaleSelector: typeof import('./src/modules/i18n/components/locale-selector.vue')['default']
    LoremIpsumGenerator: typeof import('./src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue')['default']
+    MacAddressGenerator: typeof import('./src/tools/mac-address-generator/mac-address-generator.vue')['default']
    MacAddressLookup: typeof import('./src/tools/mac-address-lookup/mac-address-lookup.vue')['default']
    MathEvaluator: typeof import('./src/tools/math-evaluator/math-evaluator.vue')['default']
    MenuBar: typeof import('./src/tools/html-wysiwyg-editor/editor/menu-bar.vue')['default']
@@ -135,29 +157,26 @@ declare module '@vue/runtime-core' {
    NH3: typeof import('naive-ui')['NH3']
    NIcon: typeof import('naive-ui')['NIcon']
    NImage: typeof import('naive-ui')['NImage']
-    NInput: typeof import('naive-ui')['NInput']
    NInputGroup: typeof import('naive-ui')['NInputGroup']
    NInputGroupLabel: typeof import('naive-ui')['NInputGroupLabel']
    NInputNumber: typeof import('naive-ui')['NInputNumber']
    NLayout: typeof import('naive-ui')['NLayout']
    NLayoutSider: typeof import('naive-ui')['NLayoutSider']
    NMenu: typeof import('naive-ui')['NMenu']
-    NP: typeof import('naive-ui')['NP']
-    NPageHeader: typeof import('naive-ui')['NPageHeader']
    NProgress: typeof import('naive-ui')['NProgress']
    NScrollbar: typeof import('naive-ui')['NScrollbar']
-    NSelect: typeof import('naive-ui')['NSelect']
    NSlider: typeof import('naive-ui')['NSlider']
    NStatistic: typeof import('naive-ui')['NStatistic']
    NSwitch: typeof import('naive-ui')['NSwitch']
    NTable: typeof import('naive-ui')['NTable']
    NTag: typeof import('naive-ui')['NTag']
-    NText: typeof import('naive-ui')['NText']
-    NTooltip: typeof import('naive-ui')['NTooltip']
+    NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
    NUpload: typeof import('naive-ui')['NUpload']
    NUploadDragger: typeof import('naive-ui')['NUploadDragger']
    OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']
    PasswordStrengthAnalyser: typeof import('./src/tools/password-strength-analyser/password-strength-analyser.vue')['default']
+    PdfSignatureChecker: typeof import('./src/tools/pdf-signature-checker/pdf-signature-checker.vue')['default']
+    PdfSignatureDetails: typeof import('./src/tools/pdf-signature-checker/components/pdf-signature-details.vue')['default']
    PercentageCalculator: typeof import('./src/tools/percentage-calculator/percentage-calculator.vue')['default']
    PhoneParserAndFormatter: typeof import('./src/tools/phone-parser-and-formatter/phone-parser-and-formatter.vue')['default']
    QrCodeGenerator: typeof import('./src/tools/qr-code-generator/qr-code-generator.vue')['default']
@@ -170,10 +189,13 @@ declare module '@vue/runtime-core' {
    SlugifyString: typeof import('./src/tools/slugify-string/slugify-string.vue')['default']
    SpanCopyable: typeof import('./src/components/SpanCopyable.vue')['default']
    SqlPrettify: typeof import('./src/tools/sql-prettify/sql-prettify.vue')['default']
+    StringObfuscator: typeof import('./src/tools/string-obfuscator/string-obfuscator.vue')['default']
    SvgPlaceholderGenerator: typeof import('./src/tools/svg-placeholder-generator/svg-placeholder-generator.vue')['default']
    TemperatureConverter: typeof import('./src/tools/temperature-converter/temperature-converter.vue')['default']
    TextareaCopyable: typeof import('./src/components/TextareaCopyable.vue')['default']
+    TextDiff: typeof import('./src/tools/text-diff/text-diff.vue')['default']
    TextStatistics: typeof import('./src/tools/text-statistics/text-statistics.vue')['default']
+    TextToBinary: typeof import('./src/tools/text-to-binary/text-to-binary.vue')['default']
    TextToNatoAlphabet: typeof import('./src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue')['default']
    TokenDisplay: typeof import('./src/tools/otp-code-generator-and-validator/token-display.vue')['default']
    'TokenGenerator.tool': typeof import('./src/tools/token-generator/token-generator.tool.vue')['default']
@@ -181,11 +203,13 @@ declare module '@vue/runtime-core' {
    TomlToYaml: typeof import('./src/tools/toml-to-yaml/toml-to-yaml.vue')['default']
    'Tool.layout': typeof import('./src/layouts/tool.layout.vue')['default']
    ToolCard: typeof import('./src/components/ToolCard.vue')['default']
+    UlidGenerator: typeof import('./src/tools/ulid-generator/ulid-generator.vue')['default']
    UrlEncoder: typeof import('./src/tools/url-encoder/url-encoder.vue')['default']
    UrlParser: typeof import('./src/tools/url-parser/url-parser.vue')['default']
    UserAgentParser: typeof import('./src/tools/user-agent-parser/user-agent-parser.vue')['default']
    UserAgentResultCards: typeof import('./src/tools/user-agent-parser/user-agent-result-cards.vue')['default']
    UuidGenerator: typeof import('./src/tools/uuid-generator/uuid-generator.vue')['default']
+    WifiQrCodeGenerator: typeof import('./src/tools/wifi-qr-code-generator/wifi-qr-code-generator.vue')['default']
    XmlFormatter: typeof import('./src/tools/xml-formatter/xml-formatter.vue')['default']
    YamlToJson: typeof import('./src/tools/yaml-to-json-converter/yaml-to-json.vue')['default']
    YamlToToml: typeof import('./src/tools/yaml-to-toml/yaml-to-toml.vue')['default']
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -1,4 +1,71 @@
 home:
  categories:
    newestTools: Newest tools
+    favoriteTools: 'Your favorite tools'
+    allTools: 'All the tools'
+  subtitle: 'Handy tools for developers'
+  toggleMenu: 'Toggle menu'
+  home: Home
+  uiLib: 'UI Lib'
+  support: 'Support IT Tools development'
+  buyMeACoffee: 'Buy me a coffee'
+  follow:
+    title: 'You like it-tools?'
+    p1: 'Give us a star on'
+    githubRepository: 'IT-Tools GitHub repository'
+    p2: 'or follow us on'
+    twitterAccount: 'IT-Tools Twitter account'
+    thankYou: 'Thank you !'
+  nav:
+    github: 'GitHub repository'
+    githubRepository: 'IT-Tools GitHub repository'
+    twitter: 'Twitter account'
+    twitterAccount: 'IT Tools Twitter account'
+    about: 'About  IT-Tools'
+    aboutLabel: 'About'
+    darkMode: 'Dark mode'
+    lightMode: 'Light mode'
+    mode: 'Toggle dark/light mode'
+about:
+  content: >
+    # About IT-Tools

+    This wonderful website, made with ❤ by [Corentin Thomasset](https://github.com/CorentinTh) , aggregates useful tools for developer and people working in IT. If you find it useful, please feel free to share it to people you think may find it useful too and don't forget to bookmark it in your shortcut bar!
+
+    IT Tools is open-source (under the MIT license) and free, and will always be, but it costs me money to host and renew the domain name. If you want to support my work, and encourage me to add more tools, please consider supporting by [sponsoring me](https://www.buymeacoffee.com/cthmsst).
+
+    ## Technologies
+
+    IT Tools is made in Vue.js (Vue 3) with the the Naive UI component library and is hosted and continuously deployed by Vercel. Third-party open-source libraries are used in some tools, you may find the complete list in the [package.json](https://github.com/CorentinTh/it-tools/blob/main/package.json) file of the repository.
+
+    ## Found a bug? A tool is missing?
+
+    If you need a tool that is currently not present here, and you think can be useful, you are welcome to submit a feature request in the [issues section](https://github.com/CorentinTh/it-tools/issues/new/choose) in the GitHub repository.
+
+    And if you found a bug, or something doesn't work as expected, please file a bug report in the [issues section](https://github.com/CorentinTh/it-tools/issues/new/choose) in the GitHub repository.
+
+404:
+  notFound: '404 Not Found'
+  sorry: 'Sorry, this page does not seem to exist'
+  maybe: 'Maybe the cache is doing tricky things, try force-refreshing?'
+  backHome: 'Back home'
+favoriteButton:
+  remove: 'Remove from favorites'
+  add: 'Add to favorites'
+toolCard:
+  new: New
+search:
+  label: Search
+tools:
+  categories:
+    favorite-tools: 'Your favorite tools'
+    crypto: Crypto
+    converter: Converter
+    web: Web
+    images and videos: 'Images & Videos'
+    development: Development
+    network: Network
+    math: Math
+    measurement: Measurement
+    text: Text
+    data: Data
--- a/locales/fr.yml
+++ b/locales/fr.yml
@@ -1,3 +1,65 @@
 home:
  categories:
-    newestTools: "Nouveaux outils"
+    newestTools: 'Les nouveaux outils'
+    favoriteTools: 'Vos outils favoris'
+    allTools: 'Tous les outils'
+  subtitle: 'Outils pour les développeurs'
+  toggleMenu: 'Menu'
+  home: Accueil
+  uiLib: 'UI Lib'
+  buyMeACoffee: 'Soutenez IT-Tools'
+  follow:
+    title: 'Vous aimez it-tools ?'
+    p1: 'Soutenez-nous avec une star sur'
+    githubRepository: "le dépôt GitHub d'IT-Tools"
+    p2: 'ou suivez-nous sur'
+    twitterAccount: "le compte Twitter d'IT-Tools"
+    thankYou: 'Merci !'
+  nav:
+    github: 'Dépôt GitHub'
+    githubRepository: "Dépôt GitHub d'IT-Tools"
+    twitter: 'Compte Twitter'
+    twitterAccount: "Compte Twitter d'IT-Tools"
+    about: "À propos d'IT-Tools"
+    aboutLabel: 'À propos'
+    darkMode: 'Mode sombre'
+    lightMode: 'Mode clair'
+    mode: 'Basculer le mode sombre/clair'
+about:
+  content: >
+    # À propos de IT-Tools
+
+    Ce merveilleux site, fait avec ❤ par [Corentin Thomasset](https://github.com/CorentinTh), regroupe des outils utiles pour les développeurs et les personnes travaillant dans l'informatique. Si vous le trouvez utile, n'hésitez pas à le partager et n'oubliez pas de le mettre dans vos favoris !
+
+    IT Tools est open-source (sous licence MIT) et gratuit, et le restera toujours, mais cela me coûte de l'argent pour l'héberger et renouveler le nom de domaine. Si vous voulez soutenir mon travail, et m'encourager à ajouter plus d'outils, n'hésitez pas à me [soutenir](https://www.buymeacoffee.com/cthmsst).
+
+    ## Technologies
+
+    IT Tools est fait en Vue.js (Vue 3) avec la bibliothèque de composants Naive UI et est hébergé et déployé en continu par Vercel. Des bibliothèques open-source tierces sont utilisées dans certains outils, vous pouvez trouver la liste complète dans le fichier [package.json](https://github.com/CorentinTh/it-tools/blob/main/package.json) du dépôt.
+
+    ## Vous avez trouvé un bug ? Un outil manque ?
+
+    Si vous avez besoin d'un outil qui n'est pas encore présent ici, et que vous pensez qu'il peut être utile, vous êtes invité à soumettre une demande de fonctionnalité dans la [section issue](https://github.com/CorentinTh/it-tools/issues/new/choose) du dépôt GitHub.
+
+404:
+  notFound: '404 Not Found'
+  sorry: "Désolé, cette page n'existe pas"
+  maybe: 'Peut-être que le cache fait des siennes, essayez de forcer le rafraîchissement ?'
+  backHome: "Retour à l'accueil"
+toolCard:
+  new: Nouveau
+search:
+  label: Rechercher
+tools:
+  categories:
+    favorite-tools: 'Vos outils favoris'
+    crypto: Cryptographie
+    converter: Convertisseur
+    web: Web
+    images and videos: 'Images & Vidéos'
+    development: Développement
+    network: Réseau
+    math: Math
+    measurement: Mesure
+    text: Texte
+    data: Données
--- a/locales/zh.yml
+++ b/locales/zh.yml
@@ -0,0 +1,71 @@
+home:
+  categories:
+    newestTools: '最新工具'
+    favoriteTools: '我的收藏'
+    allTools: '全部工具'
+  subtitle: '助力开发人员和 IT 工作者'
+  toggleMenu: '切换菜单'
+  home: '主页'
+  uiLib: 'UI 库'
+  support: '支持 IT 工具开发'
+  buyMeACoffee: '赞助'
+  follow:
+    title: '关注我们'
+    p1: '给我们 Star'
+    githubRepository: 'GitHub 仓库'
+    p2: '关注我们的'
+    twitterAccount: 'Twitter'
+    thankYou: '感谢您的支持！'
+  nav:
+    github: 'GitHub 仓库'
+    githubRepository: 'GitHub 仓库'
+    twitter: 'Twitter 账号'
+    twitterAccount: 'Twitter 账号'
+    about: '关于 IT-Tools'
+    aboutLabel: '关于'
+    darkMode: '深色模式'
+    lightMode: '浅色模式'
+    mode: '颜色模式'
+about:
+  content: >
+    # 关于 IT-Tools
+
+    IT-Tools 由 [Corentin Thomasset](https://github.com/CorentinTh) 用 ❤ 开发，汇集了对开发人员和 IT 从业者有用的工具。如果对您有帮助，请将其分享给您的朋友，并且添加到收藏夹中！
+
+    IT-Tools 永久免费且开源（MIT 许可证），但需要资金用于托管和续订域名。如果您想支持我的工作，并鼓励我添加更多工具，请考虑通过 [赞助我](https://www.buymeacoffee.com/cthmsst) 进行支持。
+
+    ## 技术
+
+    IT-Tools 采用 Vue.js（Vue 3）和 Naive UI 组件库开发，并由 Vercel 托管和持续部署。某些工具使用了第三方开源库，您可以在仓库的 [package.json](https://github.com/CorentinTh/it-tools/blob/main/package.json) 文件中找到完整的列表。
+
+    ## 发现了 Bug？缺少工具？
+
+    如果目前这里没有您需要的工具，并且您认为它可能有用，欢迎在 GitHub 仓库的 [issues](https://github.com/CorentinTh/it-tools/issues/new/choose) 中提交新增功能的请求。
+
+    如果您发现了 Bug，或者某些功能未能按预期工作，请在 GitHub 仓库的 [issues](https://github.com/CorentinTh/it-tools/issues/new/choose) 中提交错误报告。
+
+404:
+  notFound: '404 页面不存在'
+  sorry: '抱歉，该页面似乎不存在'
+  maybe: '也许缓存出现了一些问题，试试强制刷新页面？'
+  backHome: '返回主页'
+favoriteButton:
+  remove: '取消收藏'
+  add: '加入收藏'
+toolCard:
+  new: '新'
+search:
+  label: '搜索'
+tools:
+  categories:
+    favorite-tools: '我的收藏'
+    crypto: '加密'
+    converter: '转换器'
+    web: Web
+    images and videos: '图片和视频'
+    development: '开发'
+    network: '网络'
+    math: '数学'
+    measurement: '测量'
+    text: '文本'
+    data: '数据'
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "it-tools",
-  "version": "2023.8.16-9bd4ad4",
+  "version": "2023.12.21-5ed3693",
  "description": "Collection of handy online tools for developers, with great UX. ",
  "keywords": [
    "productivity",
@@ -21,27 +21,29 @@
  },
  "scripts": {
    "dev": "vite",
-    "build": "vue-tsc --noEmit && vite build",
+    "build": "vue-tsc --noEmit && NODE_OPTIONS=--max_old_space_size=4096 vite build",
    "preview": "vite preview --port 5050",
    "test": "npm run test:unit",
    "test:unit": "vitest --environment jsdom",
    "test:e2e": "playwright test",
+    "test:e2e:dev": "BASE_URL=http://localhost:5173 NO_WEB_SERVER=true playwright test",
    "coverage": "vitest run --coverage",
    "typecheck": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
    "lint": "eslint src --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --ignore-path .gitignore",
-    "script:create-new-tool": "node scripts/create-tool.mjs",
+    "script:create:tool": "node scripts/create-tool.mjs",
+    "script:create:ui": "hygen generator ui-component",
    "release": "node ./scripts/release.mjs"
  },
  "dependencies": {
    "@it-tools/bip39": "^0.0.4",
    "@it-tools/oggen": "^1.3.0",
-    "@sindresorhus/slugify": "^2.2.0",
-    "@tiptap/pm": "^2.0.3",
-    "@tiptap/starter-kit": "^2.0.3",
-    "@tiptap/vue-3": "^2.0.3",
+    "@sindresorhus/slugify": "^2.2.1",
+    "@tiptap/pm": "2.1.6",
+    "@tiptap/starter-kit": "2.1.6",
+    "@tiptap/vue-3": "2.0.3",
    "@vicons/material": "^0.12.0",
    "@vicons/tabler": "^0.12.0",
-    "@vueuse/core": "^10.1.2",
+    "@vueuse/core": "^10.3.0",
    "@vueuse/head": "^1.0.0",
    "@vueuse/router": "^10.0.0",
    "bcryptjs": "^2.4.3",
@@ -53,28 +55,32 @@
    "cronstrue": "^2.26.0",
    "crypto-js": "^4.1.1",
    "date-fns": "^2.29.3",
+    "dompurify": "^3.0.6",
    "emojilib": "^3.0.10",
    "figue": "^1.2.0",
    "fuse.js": "^6.6.2",
    "highlight.js": "^11.7.0",
    "iarna-toml-esm": "^3.0.5",
+    "ibantools": "^4.3.3",
    "json5": "^2.2.3",
    "jwt-decode": "^3.1.2",
    "libphonenumber-js": "^1.10.28",
    "lodash": "^4.17.21",
-    "mathjs": "^11.0.0",
+    "marked": "^10.0.0",
+    "mathjs": "^11.9.1",
    "mime-types": "^2.1.35",
-    "naive-ui": "^2.34.3",
+    "monaco-editor": "^0.43.0",
+    "naive-ui": "^2.35.0",
    "netmask": "^2.0.2",
    "node-forge": "^1.3.1",
-    "oui": "^12.0.52",
+    "oui-data": "^1.0.10",
+    "pdf-signature-reader": "^1.4.2",
    "pinia": "^2.0.34",
    "plausible-tracker": "^0.3.8",
    "qrcode": "^1.5.1",
-    "randombytes": "^2.1.0",
-    "sql-formatter": "^8.2.0",
-    "ts-pattern": "^4.2.2",
+    "sql-formatter": "^13.0.0",
    "ua-parser-js": "^1.0.35",
+    "ulid": "^2.3.0",
    "unicode-emoji-json": "^0.4.0",
    "unplugin-auto-import": "^0.16.4",
    "uuid": "^9.0.0",
@@ -86,44 +92,43 @@
    "yaml": "^2.2.1"
  },
  "devDependencies": {
-    "@antfu/eslint-config": "^0.39.3",
+    "@antfu/eslint-config": "^0.41.0",
    "@iconify-json/mdi": "^1.1.50",
-    "@intlify/unplugin-vue-i18n": "^0.12.0",
+    "@intlify/unplugin-vue-i18n": "^0.13.0",
    "@playwright/test": "^1.32.3",
    "@rushstack/eslint-patch": "^1.2.0",
+    "@tsconfig/node18": "^18.2.0",
    "@types/bcryptjs": "^2.4.2",
    "@types/crypto-js": "^4.1.1",
+    "@types/dompurify": "^3.0.5",
    "@types/jsdom": "^21.0.0",
    "@types/lodash": "^4.14.192",
    "@types/mime-types": "^2.1.1",
    "@types/netmask": "^2.0.0",
-    "@types/node": "^18.0.0",
+    "@types/node": "^18.15.11",
    "@types/node-forge": "^1.3.2",
-    "@types/prettier": "^2.7.2",
    "@types/qrcode": "^1.5.0",
-    "@types/randombytes": "^2.0.0",
    "@types/ua-parser-js": "^0.7.36",
    "@types/uuid": "^9.0.0",
-    "@typescript-eslint/parser": "^5.58.0",
-    "@unocss/eslint-config": "^0.55.0",
-    "@vitejs/plugin-vue": "^4.0.0",
-    "@vitejs/plugin-vue-jsx": "^3.0.0",
+    "@unocss/eslint-config": "^0.57.0",
+    "@vitejs/plugin-vue": "^4.3.2",
+    "@vitejs/plugin-vue-jsx": "^3.0.2",
    "@vue/compiler-sfc": "^3.2.47",
    "@vue/runtime-dom": "^3.3.4",
    "@vue/test-utils": "^2.3.2",
-    "@vue/tsconfig": "^0.1.3",
-    "c8": "^8.0.0",
+    "@vue/tsconfig": "^0.4.0",
    "consola": "^3.0.2",
-    "eslint": "^8.38.0",
+    "eslint": "^8.47.0",
+    "hygen": "^6.2.11",
    "jsdom": "^22.0.0",
    "less": "^4.1.3",
-    "prettier": "^2.8.7",
-    "typescript": "~4.9.0",
-    "unocss": "^0.55.0",
+    "prettier": "^3.0.0",
+    "typescript": "~5.2.0",
+    "unocss": "^0.57.0",
    "unocss-preset-scrollbar": "^0.2.1",
-    "unplugin-icons": "^0.16.1",
+    "unplugin-icons": "^0.17.0",
    "unplugin-vue-components": "^0.25.0",
-    "vite": "^4.0.0",
+    "vite": "^4.4.9",
    "vite-plugin-pwa": "^0.16.0",
    "vite-plugin-vue-markdown": "^0.23.5",
    "vite-svg-loader": "^4.0.0",
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -2,6 +2,7 @@ import { defineConfig, devices } from '@playwright/test';

 const isCI = !!process.env.CI;
 const baseUrl = process.env.BASE_URL || 'http://localhost:5050';
+const useWebServer = process.env.NO_WEB_SERVER !== 'true';

 /**
 * See https://playwright.dev/docs/test-configuration.
@@ -52,13 +53,13 @@ export default defineConfig({

  /* Run your local dev server before starting the tests */

-  ...(isCI
-    ? {}
-    : {
-        webServer: {
-          command: 'npm run preview',
-          url: 'http://127.0.0.1:5050',
-          reuseExistingServer: true,
-        },
-      }),
+  ...(useWebServer
+    && {
+      webServer: {
+        command: 'npm run preview',
+        url: 'http://127.0.0.1:5050',
+        reuseExistingServer: !isCI,
+      },
+    }
+  ),
 });
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,6 +11,13 @@ const styleStore = useStyleStore();

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

 <template>
--- a/src/components/CollapsibleToolMenu.vue
+++ b/src/components/CollapsibleToolMenu.vue
@@ -36,7 +36,7 @@ const menuOptions = computed(() =>
    tools: components.map(tool => ({
      label: makeLabel(tool),
      icon: makeIcon(tool),
-      key: tool.name,
+      key: tool.path,
    })),
  })),
 );
@@ -62,7 +62,7 @@ const themeVars = useThemeVars();

        <n-menu
          class="menu"
-          :value="route.name as string"
+          :value="route.path"
          :collapsed-width="64"
          :collapsed-icon-size="22"
          :options="tools"
--- a/src/components/FavoriteButton.vue
+++ b/src/components/FavoriteButton.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { FavoriteFilled } from '@vicons/material';
-
 import { useToolStore } from '@/tools/tools.store';
 import type { Tool } from '@/tools/tools.types';

@@ -26,18 +24,15 @@ function toggleFavorite(event: MouseEvent) {
 </script>

 <template>
-  <n-tooltip trigger="hover">
-    <template #trigger>
-      <c-button
-        variant="text"
-        circle
-        :type="buttonType"
-        :style="{ opacity: isFavorite ? 1 : 0.2 }"
-        @click="toggleFavorite"
-      >
-        <n-icon :component="FavoriteFilled" />
-      </c-button>
-    </template>
-    {{ isFavorite ? 'Remove from favorites' : 'Add to favorites' }}
-  </n-tooltip>
+  <c-tooltip :tooltip="isFavorite ? $t('favoriteButton.remove') : $t('favoriteButton.add') ">
+    <c-button
+      variant="text"
+      circle
+      :type="buttonType"
+      :style="{ opacity: isFavorite ? 1 : 0.2 }"
+      @click="toggleFavorite"
+    >
+      <icon-mdi-heart />
+    </c-button>
+  </c-tooltip>
 </template>
--- a/src/components/InputCopyable.vue
+++ b/src/components/InputCopyable.vue
@@ -1,35 +1,23 @@
 <script setup lang="ts">
-import { useClipboard, useVModel } from '@vueuse/core';
+import { useVModel } from '@vueuse/core';
+import { useCopy } from '@/composable/copy';

 const props = defineProps<{ value: string }>();
 const emit = defineEmits(['update:value']);

 const value = useVModel(props, 'value', emit);
-const tooltipText = ref('Copy to clipboard');
-
-const { copy } = useClipboard({ source: value });
-
-function onCopyClicked() {
-  copy();
-  tooltipText.value = 'Copied!';
-
-  setTimeout(() => {
-    tooltipText.value = 'Copy to clipboard';
-  }, 2000);
-}
+const { copy, isJustCopied } = useCopy({ source: value, createToast: false });
+const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : 'Copy to clipboard');
 </script>

 <template>
  <c-input-text v-model:value="value">
    <template #suffix>
-      <n-tooltip trigger="hover">
-        <template #trigger>
-          <c-button circle variant="text" size="small" @click="onCopyClicked">
-            <icon-mdi-content-copy />
-          </c-button>
-        </template>
-        {{ tooltipText }}
-      </n-tooltip>
+      <c-tooltip :tooltip="tooltipText">
+        <c-button circle variant="text" size="small" @click="copy()">
+          <icon-mdi-content-copy />
+        </c-button>
+      </c-tooltip>
    </template>
  </c-input-text>
 </template>
--- a/src/components/NavbarButtons.vue
+++ b/src/components/NavbarButtons.vue
@@ -7,56 +7,43 @@ const { isDarkTheme } = toRefs(styleStore);
 </script>

 <template>
-  <n-tooltip trigger="hover">
-    <template #trigger>
-      <c-button
-        circle
-        variant="text"
-        href="https://github.com/CorentinTh/it-tools"
-        target="_blank"
-        rel="noopener noreferrer"
-        aria-label="IT-Tools' GitHub repository"
-      >
-        <n-icon size="25" :component="BrandGithub" />
-      </c-button>
-    </template>
-    Github repository
-  </n-tooltip>
+  <c-tooltip :tooltip="$t('home.nav.github')" position="bottom">
+    <c-button
+      circle
+      variant="text"
+      href="https://github.com/CorentinTh/it-tools"
+      target="_blank"
+      rel="noopener noreferrer"
+      :aria-label="$t('home.nav.githubRepository')"
+    >
+      <n-icon size="25" :component="BrandGithub" />
+    </c-button>
+  </c-tooltip>

-  <n-tooltip trigger="hover">
-    <template #trigger>
-      <c-button
-        circle
-        variant="text"
-        href="https://twitter.com/ittoolsdottech"
-        rel="noopener"
-        target="_blank"
-        aria-label="IT Tools' Twitter account"
-      >
-        <n-icon size="25" :component="BrandTwitter" />
-      </c-button>
-    </template>
-    IT Tools' Twitter account
-  </n-tooltip>
+  <c-tooltip :tooltip="$t('home.nav.twitter')" position="bottom">
+    <c-button
+      circle
+      variant="text"
+      href="https://twitter.com/ittoolsdottech"
+      rel="noopener"
+      target="_blank"
+      :aria-label="$t('home.nav.twitterAccount')"
+    >
+      <n-icon size="25" :component="BrandTwitter" />
+    </c-button>
+  </c-tooltip>

-  <n-tooltip trigger="hover">
-    <template #trigger>
-      <c-button circle variant="text" to="/about" aria-label="About">
-        <n-icon size="25" :component="InfoCircle" />
-      </c-button>
-    </template>
-    About
-  </n-tooltip>
-  <n-tooltip trigger="hover">
-    <template #trigger>
-      <c-button circle variant="text" aria-label="Toggle dark/light mode" @click="() => styleStore.toggleDark()">
-        <n-icon v-if="isDarkTheme" size="25" :component="Sun" />
-        <n-icon v-else size="25" :component="Moon" />
-      </c-button>
-    </template>
-    <span v-if="isDarkTheme">Light mode</span>
-    <span v-else>Dark mode</span>
-  </n-tooltip>
+  <c-tooltip :tooltip="$t('home.nav.about')" position="bottom">
+    <c-button circle variant="text" to="/about" :aria-label="$t('home.nav.aboutLabel')">
+      <n-icon size="25" :component="InfoCircle" />
+    </c-button>
+  </c-tooltip>
+  <c-tooltip :tooltip="isDarkTheme ? $t('home.nav.lightMode') : $t('home.nav.darkMode')" position="bottom">
+    <c-button circle variant="text" :aria-label="$t('home.nav.mode')" @click="() => styleStore.toggleDark()">
+      <n-icon v-if="isDarkTheme" size="25" :component="Sun" />
+      <n-icon v-else size="25" :component="Moon" />
+    </c-button>
+  </c-tooltip>
 </template>

 <style lang="less" scoped>
--- a/src/components/SpanCopyable.vue
+++ b/src/components/SpanCopyable.vue
@@ -1,34 +1,17 @@
 <script setup lang="ts">
-import { useClipboard } from '@vueuse/core';
+import { useCopy } from '@/composable/copy';

 const props = withDefaults(defineProps<{ value?: string }>(), { value: '' });
 const { value } = toRefs(props);

 const initialText = 'Copy to clipboard';
-const tooltipText = ref(initialText);

-const { copy } = useClipboard({ source: value });
-
-function handleClick() {
-  copy();
-  tooltipText.value = 'Copied!';
-
-  setTimeout(() => (tooltipText.value = initialText), 1000);
-}
+const { copy, isJustCopied } = useCopy({ source: value, createToast: false });
+const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : initialText);
 </script>

 <template>
-  <n-tooltip trigger="hover">
-    <template #trigger>
-      <span class="value" @click="handleClick">{{ value }}</span>
-    </template>
-    {{ tooltipText }}
-  </n-tooltip>
+  <c-tooltip :tooltip="tooltipText">
+    <span cursor-pointer font-mono @click="copy()">{{ value }}</span>
+  </c-tooltip>
 </template>
-
-<style scoped lang="less">
-.value {
-  cursor: pointer;
-  font-family: monospace;
-}
-</style>
--- a/src/components/TextareaCopyable.vue
+++ b/src/components/TextareaCopyable.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { Copy } from '@vicons/tabler';
-import { useClipboard, useElementSize } from '@vueuse/core';
+import { useElementSize } from '@vueuse/core';
 import hljs from 'highlight.js/lib/core';
 import jsonHljs from 'highlight.js/lib/languages/json';
 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 { useCopy } from '@/composable/copy';

 const props = withDefaults(
  defineProps<{
@@ -33,22 +34,13 @@ hljs.registerLanguage('toml', iniHljs);
 const { value, language, followHeightOf, copyPlacement, copyMessage } = toRefs(props);
 const { height } = followHeightOf.value ? useElementSize(followHeightOf) : { height: ref(null) };

-const { copy } = useClipboard({ source: value });
-const tooltipText = ref(copyMessage.value);
-
-function onCopyClicked() {
-  copy();
-  tooltipText.value = 'Copied !';
-
-  setTimeout(() => {
-    tooltipText.value = copyMessage.value;
-  }, 2000);
-}
+const { copy, isJustCopied } = useCopy({ source: value, createToast: false });
+const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : copyMessage.value);
 </script>

 <template>
  <div style="overflow-x: hidden; width: 100%">
-    <c-card class="result-card">
+    <c-card relative>
      <n-scrollbar
        x-scrollable
        trigger="none"
@@ -58,19 +50,16 @@ function onCopyClicked() {
          <n-code :code="value" :language="language" :trim="false" data-test-id="area-content" />
        </n-config-provider>
      </n-scrollbar>
-      <n-tooltip v-if="value" trigger="hover">
-        <template #trigger>
-          <div class="copy-button" :class="[copyPlacement]">
-            <c-button circle important:h-10 important:w-10 @click="onCopyClicked">
-              <n-icon size="22" :component="Copy" />
-            </c-button>
-          </div>
-        </template>
-        <span>{{ tooltipText }}</span>
-      </n-tooltip>
+      <div absolute right-10px top-10px>
+        <c-tooltip v-if="value" :tooltip="tooltipText" position="left">
+          <c-button circle important:h-10 important:w-10 @click="copy()">
+            <n-icon size="22" :component="Copy" />
+          </c-button>
+        </c-tooltip>
+      </div>
    </c-card>
    <div v-if="copyPlacement === 'outside'" mt-4 flex justify-center>
-      <c-button @click="onCopyClicked">
+      <c-button @click="copy()">
        {{ tooltipText }}
      </c-button>
    </div>
@@ -82,25 +71,4 @@ function onCopyClicked() {
  padding-bottom: 10px;
  margin-bottom: -10px;
 }
-.result-card {
-  position: relative;
-  .copy-button {
-    position: absolute;
-    opacity: 1;
-
-    &.top-right {
-      top: 10px;
-      right: 10px;
-    }
-
-    &.bottom-right {
-      bottom: 10px;
-      right: 10px;
-    }
-    &.outside,
-    &.none {
-      display: none;
-    }
-  }
-}
 </style>
--- a/src/components/ToolCard.vue
+++ b/src/components/ToolCard.vue
@@ -26,7 +26,7 @@ const appTheme = useAppTheme();
            :bordered="false"
            :color="{ color: theme.primaryColor, textColor: theme.tagColor }"
          >
-            New
+            {{ $t('toolCard.new') }}
          </n-tag>

          <FavoriteButton :tool="tool" />
--- a/src/composable/computed/catchedComputed.ts
+++ b/src/composable/computed/catchedComputed.ts
@@ -0,0 +1,22 @@
+import { type Ref, ref, watchEffect } from 'vue';
+
+export { computedCatch };
+
+function computedCatch<T, D>(getter: () => T, { defaultValue }: { defaultValue: D; defaultErrorMessage?: string }): [Ref<T | D>, Ref<string | undefined>];
+function computedCatch<T, D>(getter: () => T, { defaultValue, defaultErrorMessage = 'Unknown error' }: { defaultValue?: D; defaultErrorMessage?: string } = {}) {
+  const error = ref<string | undefined>();
+  const value = ref<T | D | undefined>();
+
+  watchEffect(() => {
+    try {
+      error.value = undefined;
+      value.value = getter();
+    }
+    catch (err) {
+      error.value = err instanceof Error ? err.message : err?.toString() ?? defaultErrorMessage;
+      value.value = defaultValue;
+    }
+  });
+
+  return [value, error] as const;
+}
--- a/src/composable/copy.ts
+++ b/src/composable/copy.ts
@@ -1,11 +1,19 @@
-import { type MaybeRef, get, useClipboard } from '@vueuse/core';
+// eslint-disable-next-line no-restricted-imports
+import { useClipboard } from '@vueuse/core';
 import { useMessage } from 'naive-ui';
+import type { MaybeRefOrGetter } from 'vue';
+
+export function useCopy({ source, text = 'Copied to the clipboard', createToast = true }: { source?: MaybeRefOrGetter<string>; text?: string; createToast?: boolean } = {}) {
+  const { copy, copied, ...rest } = useClipboard({
+    source,
+    legacy: true,
+  });

-export function useCopy({ source, text = 'Copied to the clipboard' }: { source?: MaybeRef<unknown>; text?: string } = {}) {
-  const { copy } = useClipboard(source ? { source: computed(() => String(get(source))) } : {});
  const message = useMessage();

  return {
+    ...rest,
+    isJustCopied: copied,
    async copy(content?: string, { notificationMessage }: { notificationMessage?: string } = {}) {
      if (source) {
        await copy();
@@ -14,7 +22,9 @@ export function useCopy({ source, text = 'Copied to the clipboard' }: { source?:
        await copy(content);
      }

-      message.success(notificationMessage ?? text);
+      if (createToast) {
+        message.success(notificationMessage ?? text);
+      }
    },
  };
 }
--- a/src/composable/downloadBase64.test.ts
+++ b/src/composable/downloadBase64.test.ts
@@ -0,0 +1,32 @@
+import { describe, expect, it } from 'vitest';
+import { getMimeTypeFromBase64 } from './downloadBase64';
+
+describe('downloadBase64', () => {
+  describe('getMimeTypeFromBase64', () => {
+    it('when the base64 string has a data URI, it returns the mime type', () => {
+      expect(getMimeTypeFromBase64({ base64String: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA' })).to.deep.equal({ mimeType: 'image/png' });
+      expect(getMimeTypeFromBase64({ base64String: 'data:image/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA' })).to.deep.equal({ mimeType: 'image/jpg' });
+    });
+
+    it('when the base64 string has no data URI, it try to infer the mime type from the signature', () => {
+      // https://en.wikipedia.org/wiki/List_of_file_signatures
+
+      // PNG
+      expect(getMimeTypeFromBase64({ base64String: 'iVBORw0KGgoAAAANSUhEUgAAAAUA' })).to.deep.equal({ mimeType: 'image/png' });
+
+      // GIF
+      expect(getMimeTypeFromBase64({ base64String: 'R0lGODdh' })).to.deep.equal({ mimeType: 'image/gif' });
+      expect(getMimeTypeFromBase64({ base64String: 'R0lGODlh' })).to.deep.equal({ mimeType: 'image/gif' });
+
+      // JPG
+      expect(getMimeTypeFromBase64({ base64String: '/9j/' })).to.deep.equal({ mimeType: 'image/jpg' });
+
+      // PDF
+      expect(getMimeTypeFromBase64({ base64String: 'JVBERi0' })).to.deep.equal({ mimeType: 'application/pdf' });
+    });
+
+    it('when the base64 string has no data URI and no signature, it returns an undefined mimeType', () => {
+      expect(getMimeTypeFromBase64({ base64String: 'JVBERi' })).to.deep.equal({ mimeType: undefined });
+    });
+  });
+});
--- a/src/composable/downloadBase64.ts
+++ b/src/composable/downloadBase64.ts
@@ -1,32 +1,60 @@
 import { extension as getExtensionFromMime } from 'mime-types';
 import type { Ref } from 'vue';
+import _ from 'lodash';

-function getFileExtensionFromBase64({
-  base64String,
+export { getMimeTypeFromBase64, useDownloadFileFromBase64 };
+
+const commonMimeTypesSignatures = {
+  'JVBERi0': 'application/pdf',
+  'R0lGODdh': 'image/gif',
+  'R0lGODlh': 'image/gif',
+  'iVBORw0KGgo': 'image/png',
+  '/9j/': 'image/jpg',
+};
+
+function getMimeTypeFromBase64({ base64String }: { base64String: string }) {
+  const [,mimeTypeFromBase64] = base64String.match(/data:(.*?);base64/i) ?? [];
+
+  if (mimeTypeFromBase64) {
+    return { mimeType: mimeTypeFromBase64 };
+  }
+
+  const inferredMimeType = _.find(commonMimeTypesSignatures, (_mimeType, signature) => base64String.startsWith(signature));
+
+  if (inferredMimeType) {
+    return { mimeType: inferredMimeType };
+  }
+
+  return { mimeType: undefined };
+}
+
+function getFileExtensionFromMimeType({
+  mimeType,
  defaultExtension = 'txt',
 }: {
-  base64String: string
+  mimeType: string | undefined
  defaultExtension?: string
 }) {
-  const hasMimeType = base64String.match(/data:(.*?);base64/i);
-
-  if (hasMimeType) {
-    return getExtensionFromMime(hasMimeType[1]) || defaultExtension;
+  if (mimeType) {
+    return getExtensionFromMime(mimeType) ?? defaultExtension;
  }

  return defaultExtension;
 }

-export function useDownloadFileFromBase64({ source, filename }: { source: Ref<string>; filename?: string }) {
+function useDownloadFileFromBase64({ source, filename }: { source: Ref<string>; filename?: string }) {
  return {
    download() {
-      const base64String = source.value;
-
-      if (base64String === '') {
+      if (source.value === '') {
        throw new Error('Base64 string is empty');
      }

-      const cleanFileName = filename ?? `file.${getFileExtensionFromBase64({ base64String })}`;
+      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/src/layouts/base.layout.vue
+++ b/src/layouts/base.layout.vue
@@ -4,10 +4,10 @@ import { NIcon, useThemeVars } from 'naive-ui';
 import { RouterLink } from 'vue-router';
 import { Heart, Home2, Menu2 } from '@vicons/tabler';

+import { storeToRefs } from 'pinia';
 import HeroGradient from '../assets/hero-gradient.svg?component';
 import MenuLayout from '../components/MenuLayout.vue';
 import NavbarButtons from '../components/NavbarButtons.vue';
-import { toolsByCategory } from '@/tools';
 import { useStyleStore } from '@/stores/style.store';
 import { config } from '@/config';
 import type { ToolCategory } from '@/tools/tools.types';
@@ -21,12 +21,14 @@ const version = config.app.version;
 const commitSha = config.app.lastCommitSha.slice(0, 7);

 const { tracker } = useTracker();
+const { t } = useI18n();

 const toolStore = useToolStore();
+const { favoriteTools, toolsByCategory } = storeToRefs(toolStore);

 const tools = computed<ToolCategory[]>(() => [
-  ...(toolStore.favoriteTools.length > 0 ? [{ name: 'Your favorite tools', components: toolStore.favoriteTools }] : []),
-  ...toolsByCategory,
+  ...(favoriteTools.value.length > 0 ? [{ name: t('tools.categories.favorite-tools'), components: favoriteTools.value }] : []),
+  ...toolsByCategory.value,
 ]);
 </script>

@@ -41,14 +43,18 @@ const tools = computed<ToolCategory[]>(() => [
          </div>
          <div class="divider" />
          <div class="subtitle">
-            Handy tools for developers
+            {{ $t('home.subtitle') }}
          </div>
        </div>
      </RouterLink>

      <div class="sider-content">
-        <div v-if="styleStore.isSmallScreen" flex justify-center>
-          <NavbarButtons />
+        <div v-if="styleStore.isSmallScreen" flex flex-col items-center>
+          <locale-selector w="90%" />
+
+          <div flex justify-center>
+            <NavbarButtons />
+          </div>
        </div>

        <CollapsibleToolMenu :tools-by-category="tools" />
@@ -88,48 +94,46 @@ const tools = computed<ToolCategory[]>(() => [
        <c-button
          circle
          variant="text"
-          aria-label="Toggle menu"
+          :aria-label="$t('home.toggleMenu')"
          @click="styleStore.isMenuCollapsed = !styleStore.isMenuCollapsed"
        >
          <NIcon size="25" :component="Menu2" />
        </c-button>

-        <n-tooltip trigger="hover">
-          <template #trigger>
-            <c-button to="/" circle variant="text" aria-label="Home">
-              <NIcon size="25" :component="Home2" />
-            </c-button>
-          </template>
-          Home
-        </n-tooltip>
+        <c-tooltip :tooltip="$t('home.home')" position="bottom">
+          <c-button to="/" circle variant="text" :aria-label="$t('home.home')">
+            <NIcon size="25" :component="Home2" />
+          </c-button>
+        </c-tooltip>

-        <c-button v-if="config.app.env === 'development'" to="/c-lib" circle variant="text" aria-label="UI Lib">
-          <icon-mdi:brush-variant text-20px />
-        </c-button>
+        <c-tooltip :tooltip="$t('home.uiLib')" position="bottom">
+          <c-button v-if="config.app.env === 'development'" to="/c-lib" circle variant="text" :aria-label="$t('home.uiLib')">
+            <icon-mdi:brush-variant text-20px />
+          </c-button>
+        </c-tooltip>

        <command-palette />

+        <locale-selector v-if="!styleStore.isSmallScreen" />
+
        <div>
          <NavbarButtons v-if="!styleStore.isSmallScreen" />
        </div>

-        <n-tooltip trigger="hover">
-          <template #trigger>
-            <c-button
-              round
-              href="https://www.buymeacoffee.com/cthmsst"
-              rel="noopener"
-              target="_blank"
-              class="support-button"
-              :bordered="false"
-              @click="() => tracker.trackEvent({ eventName: 'Support button clicked' })"
-            >
-              Buy me a coffee
-              <NIcon v-if="!styleStore.isSmallScreen" :component="Heart" ml-2 />
-            </c-button>
-          </template>
-          ❤ Support IT Tools development !
-        </n-tooltip>
+        <c-tooltip position="bottom" :tooltip="$t('home.support')">
+          <c-button
+            round
+            href="https://www.buymeacoffee.com/cthmsst"
+            rel="noopener"
+            target="_blank"
+            class="support-button"
+            :bordered="false"
+            @click="() => tracker.trackEvent({ eventName: 'Support button clicked' })"
+          >
+            {{ $t('home.buyMeACoffee') }}
+            <NIcon v-if="!styleStore.isSmallScreen" :component="Heart" ml-2 />
+          </c-button>
+        </c-tooltip>
      </div>
      <slot />
    </template>
--- a/src/modules/command-palette/command-palette.store.ts
+++ b/src/modules/command-palette/command-palette.store.ts
@@ -9,6 +9,7 @@ import SunIcon from '~icons/mdi/white-balance-sunny';
 import GithubIcon from '~icons/mdi/github';
 import BugIcon from '~icons/mdi/bug-outline';
 import DiceIcon from '~icons/mdi/dice-5';
+import InfoIcon from '~icons/mdi/information-outline';

 export const useCommandPaletteStore = defineStore('command-palette', () => {
  const toolStore = useToolStore();
@@ -61,6 +62,14 @@ export const useCommandPaletteStore = defineStore('command-palette', () => {
      keywords: ['report', 'issue', 'bug', 'problem', 'error'],
      icon: BugIcon,
    },
+    {
+      name: 'About',
+      description: 'Learn more about IT-Tools.',
+      to: '/about',
+      category: 'Pages',
+      keywords: ['about', 'learn', 'more', 'info', 'information'],
+      icon: InfoIcon,
+    },
  ];

  const { searchResult } = useFuzzySearch({
--- a/src/modules/command-palette/command-palette.vue
+++ b/src/modules/command-palette/command-palette.vue
@@ -37,6 +37,7 @@ function open() {

 function close() {
  isModalOpen.value = false;
+  searchPrompt.value = '';
 }

 const selectedOptionIndex = ref(0);
@@ -115,7 +116,7 @@ function activateOption(option: PaletteOption) {
      <span flex items-center gap-3 op-40>

        <icon-mdi-search />
-        Search...
+        {{ $t('search.label') }}

        <span hidden flex-1 border border-current border-op-40 rounded border-solid px-5px py-3px sm:inline>
          {{ isMac ? 'Cmd' : 'Ctrl' }}&nbsp;+&nbsp;K
--- a/src/modules/i18n/components/locale-selector.vue
+++ b/src/modules/i18n/components/locale-selector.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+const { availableLocales, locale } = useI18n();
+
+const localesLong: Record<string, string> = {
+  en: 'English',
+  es: 'Español',
+  fr: 'Français',
+  pt: 'Português',
+  ru: 'Русский',
+  zh: '中文',
+};
+
+const localeOptions = computed(() =>
+  availableLocales.map(locale => ({
+    label: localesLong[locale] ?? locale,
+    value: locale,
+  })),
+);
+</script>
+
+<template>
+  <c-select
+    v-model:value="locale"
+    :options="localeOptions"
+    placeholder="Select a language"
+    w-100px
+  />
+</template>
--- a/src/pages/404.page.vue
+++ b/src/pages/404.page.vue
@@ -11,17 +11,17 @@ useHead({ title: 'Page not found - IT Tools' });
    </span>

    <h1 m-0 mt-3>
-      404 Not Found
+      {{ $t('404.notFound') }}
    </h1>
    <div mt-4 op-60>
-      Sorry, this page does not seem to exist
+      {{ $t('404.sorry') }}
    </div>
    <div mb-8 op-60>
-      Maybe the cache is doing tricky things, try force-refreshing?
+      {{ $t('404.maybe') }}
    </div>

    <c-button to="/">
-      Back home
+      {{ $t('404.backHome') }}
    </c-button>
  </div>
 </template>
--- a/src/pages/About.vue
+++ b/src/pages/About.vue
@@ -1,85 +1,9 @@
 <script setup lang="ts">
 import { useHead } from '@vueuse/head';
-import { useTracker } from '@/modules/tracker/tracker.services';

 useHead({ title: 'About - IT Tools' });
-const { tracker } = useTracker();
 </script>

 <template>
-  <div class="about-page">
-    <n-h1>About</n-h1>
-    <n-p>
-      This wonderful website, made with ❤ by
-      <c-link href="https://github.com/CorentinTh" target="_blank" rel="noopener">
-        Corentin Thomasset
-      </c-link>,
-      aggregates useful tools for developer and people working in IT. If you find it useful, please feel free to share
-      it to people you think may find it useful too and don't forget to bookmark it in your shortcut bar!
-    </n-p>
-    <n-p>
-      IT Tools is open-source (under the MIT license) and free, and will always be, but it costs me money to host and
-      renew the domain name. If you want to support my work, and encourage me to add more tools, please consider
-      supporting by
-      <c-link
-        href="https://www.buymeacoffee.com/cthmsst"
-        rel="noopener"
-        target="_blank"
-        @click="() => tracker.trackEvent({ eventName: 'Support button clicked' })"
-      >
-        sponsoring me
-      </c-link>.
-    </n-p>
-
-    <n-h2>Technologies</n-h2>
-    <n-p>
-      IT Tools is made in Vue.js (Vue 3) with the the Naive UI component library and is hosted and continuously deployed
-      by Vercel. Third-party open-source libraries are used in some tools, you may find the complete list in the
-      <c-link href="https://github.com/CorentinTh/it-tools/blob/main/package.json" rel="noopener" target="_blank">
-        package.json
-      </c-link>
-      file of the repository.
-    </n-p>
-
-    <n-h2>Found a bug? A tool is missing?</n-h2>
-    <n-p>
-      If you need a tool that is currently not present here, and you think can be useful, you are welcome to submit a
-      feature request in the
-      <c-link
-        href="https://github.com/CorentinTh/it-tools/issues/new/choose"
-        rel="noopener"
-        target="_blank"
-      >
-        issues section
-      </c-link>
-      in the GitHub repository.
-    </n-p>
-    <n-p>
-      And if you found a bug, or something doesn't work as expected, please file a bug report in the
-      <c-link
-        href="https://github.com/CorentinTh/it-tools/issues/new/choose"
-        rel="noopener"
-        target="_blank"
-      >
-        issues section
-      </c-link>
-      in the GitHub repository.
-    </n-p>
-  </div>
+  <c-markdown :markdown="$t('about.content')" mx-auto mt-50px max-w-600px />
 </template>
-
-<style scoped lang="less">
-.about-page {
-  max-width: 600px;
-  margin: 50px auto;
-  box-sizing: border-box;
-
-  .n-h2 {
-    margin-bottom: 0px;
-  }
-
-  .n-p {
-    text-align: justify;
-  }
-}
-</style>
--- a/src/pages/Home.page.vue
+++ b/src/pages/Home.page.vue
@@ -17,21 +17,22 @@ const { t } = useI18n();
    <div class="grid-wrapper">
      <n-grid v-if="config.showBanner" x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
        <n-gi>
-          <ColoredCard title="You like it-tools?" :icon="Heart">
-            Give us a star on
+          <ColoredCard :title="$t('home.follow.title')" :icon="Heart">
+            {{ $t('home.follow.p1') }}
            <a
              href="https://github.com/CorentinTh/it-tools"
              rel="noopener"
              target="_blank"
-              aria-label="IT-Tools' GitHub repository"
+              :aria-label="$t('home.follow.githubRepository')"
            >GitHub</a>
-            or follow us on
+            {{ $t('home.follow.p2') }}
            <a
              href="https://twitter.com/ittoolsdottech"
              rel="noopener"
              target="_blank"
-              aria-label="IT-Tools' Twitter account"
-            >Twitter</a>! Thank you
+              :aria-label="$t('home.follow.twitterAccount')"
+            >Twitter</a>.
+            {{ $t('home.follow.thankYou') }}
            <n-icon :component="Heart" />
          </ColoredCard>
        </n-gi>
@@ -39,7 +40,7 @@ const { t } = useI18n();

      <transition name="height">
        <div v-if="toolStore.favoriteTools.length > 0">
-          <n-h3>Your favorite tools</n-h3>
+          <n-h3>{{ $t('home.categories.favoriteTools') }}</n-h3>
          <n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
            <n-gi v-for="tool in toolStore.favoriteTools" :key="tool.name">
              <ToolCard :tool="tool" />
@@ -49,7 +50,7 @@ const { t } = useI18n();
      </transition>

      <div v-if="toolStore.newTools.length > 0">
-        <n-h3>{{ t('home.categories.newestTools', 'Newest tools') }}</n-h3>
+        <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" />
@@ -57,7 +58,7 @@ const { t } = useI18n();
        </n-grid>
      </div>

-      <n-h3>All the tools</n-h3>
+      <n-h3>{{ $t('home.categories.allTools') }}</n-h3>
      <n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
        <n-gi v-for="tool in toolStore.tools" :key="tool.name">
          <transition>
--- a/src/plugins/i18n.plugin.ts
+++ b/src/plugins/i18n.plugin.ts
@@ -1,6 +1,22 @@
-import type { App } from 'vue';
+import type { Plugin } from 'vue';
 import { createI18n } from 'vue-i18n';
-import messages from '@intlify/unplugin-vue-i18n/messages';
+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,
@@ -8,8 +24,14 @@ const i18n = createI18n({
  messages,
 });

-export const i18nPlugin = {
-  install: (app: App) => {
+export const i18nPlugin: Plugin = {
+  install: (app) => {
    app.use(i18n);
  },
 };
+
+export const translate = function (localeKey: string) {
+  // @ts-expect-error global
+  const hasKey = i18n.global.te(localeKey, i18n.global.locale);
+  return hasKey ? i18n.global.t(localeKey) : localeKey;
+};
--- a/src/shims.d.ts
+++ b/src/shims.d.ts
@@ -1,21 +1,41 @@
 declare module '*.vue' {
-  import type { ComponentOptions, ComponentOptions } from 'vue';
+  import type {  ComponentOptions } from 'vue';
  const Component: ComponentOptions;
  export default Component;
 }

 declare module '*.md' {
+  import type {  ComponentOptions } from 'vue';
  const Component: ComponentOptions;
  export default Component;
 }

-declare module '~icons/*' {
-  import { FunctionalComponent, SVGAttributes } from 'vue';
-  const component: FunctionalComponent<SVGAttributes>;
-  export default component;
-}
-
 declare module 'iarna-toml-esm' {
  export const parse: (toml: string) => any;
  export const stringify: (obj: any) => string;
 }
+
+declare module 'emojilib' {
+  const lib: Record<string, string[]>;
+  export default lib;
+}
+
+declare module 'unicode-emoji-json' {
+  const emoji: Record<string, {
+    name: string;
+    slug: string;
+    group: string;
+    emoji_version: string;
+    unicode_version: string;
+    skin_tone_support: boolean;
+    skin_tone_support_unicode_version: string;
+  }>;
+  
+  export default emoji;
+}
+
+declare module 'pdf-signature-reader' {
+  const verifySignature: (pdf: ArrayBuffer) => ({signatures: SignatureInfo[]});
+
+  export default verifySignature;
+}
--- a/src/tools/base64-file-converter/base64-file-converter.vue
+++ b/src/tools/base64-file-converter/base64-file-converter.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import { Upload } from '@vicons/tabler';
 import { useBase64 } from '@vueuse/core';
-import type { UploadFileInfo } from 'naive-ui';
 import type { Ref } from 'vue';
 import { useCopy } from '@/composable/copy';
 import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
@@ -33,14 +31,12 @@ function downloadFile() {
  }
 }

-const fileList = ref();
 const fileInput = ref() as Ref<File>;
 const { base64: fileBase64 } = useBase64(fileInput);
 const { copy: copyFileBase64 } = useCopy({ source: fileBase64, text: 'Base64 string copied to the clipboard' });

-async function onUpload({ file: { file } }: { file: UploadFileInfo }) {
+async function onUpload(file: File) {
  if (file) {
-    fileList.value = [];
    fileInput.value = file;
  }
 }
@@ -65,18 +61,8 @@ async function onUpload({ file: { file } }: { file: UploadFileInfo }) {
  </c-card>

  <c-card title="File to base64">
-    <n-upload v-model:file-list="fileList" :show-file-list="true" :on-before-upload="onUpload" list-type="image">
-      <n-upload-dragger>
-        <div mb-2>
-          <n-icon size="35" :depth="3" :component="Upload" />
-        </div>
-        <div op-60>
-          Click or drag a file to this area to upload
-        </div>
-      </n-upload-dragger>
-    </n-upload>
-
-    <c-input-text :value="fileBase64" multiline readonly placeholder="File in base64 will be here" rows="5" mb-2 />
+    <c-file-upload title="Drag and drop a file here, or click to select a file" @file-upload="onUpload" />
+    <c-input-text :value="fileBase64" multiline readonly placeholder="File in base64 will be here" rows="5" my-2 />

    <div flex justify-center>
      <c-button @click="copyFileBase64()">
--- a/src/tools/bcrypt/bcrypt.vue
+++ b/src/tools/bcrypt/bcrypt.vue
@@ -23,6 +23,7 @@ const compareMatch = computed(() => compareSync(compareString.value, compareHash
      raw-text
      label="Your string: "
      label-position="left"
+      label-align="right"
      label-width="120px"
      mb-2
    />
@@ -45,7 +46,7 @@ const compareMatch = computed(() => compareSync(compareString.value, compareHash
        <c-input-text v-model:value="compareString" placeholder="Your string to compare..." raw-text />
      </n-form-item>
      <n-form-item label="Your hash: " label-placement="left">
-        <c-input-text v-model:value="compareHash" placeholder="Your hahs to compare..." raw-text />
+        <c-input-text v-model:value="compareHash" placeholder="Your hash to compare..." raw-text />
      </n-form-item>
      <n-form-item label="Do they match ? " label-placement="left" :show-feedback="false">
        <div class="compare-result" :class="{ positive: compareMatch }">
--- a/src/tools/benchmark-builder/benchmark-builder.models.ts
+++ b/src/tools/benchmark-builder/benchmark-builder.models.ts
@@ -18,7 +18,7 @@ function computeVariance({ data }: { data: number[] }) {
  return computeAverage({ data: squaredDiffs });
 }

-function arrayToMarkdownTable({ data, headerMap = {} }: { data: unknown[]; headerMap?: Record<string, string> }) {
+function arrayToMarkdownTable({ data, headerMap = {} }: { data: Record<string, unknown>[]; headerMap?: Record<string, string> }) {
  if (!Array.isArray(data) || data.length === 0) {
    return '';
  }
--- a/src/tools/benchmark-builder/benchmark-builder.vue
+++ b/src/tools/benchmark-builder/benchmark-builder.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { Plus, Trash } from '@vicons/tabler';
-import { useClipboard, useStorage } from '@vueuse/core';
+import { useStorage } from '@vueuse/core';
 import _ from 'lodash';

 import { arrayToMarkdownTable, computeAverage, computeVariance } from './benchmark-builder.models';
 import DynamicValues from './dynamic-values.vue';
+import { useCopy } from '@/composable/copy';

 const suites = useStorage('benchmark-builder:suites', [
  { title: 'Suite 1', data: [5, 10] },
@@ -47,14 +48,14 @@ const results = computed(() => {
    });
 });

-const { copy } = useClipboard();
+const { copy } = useCopy({ createToast: false });

 const header = {
+  position: 'Position',
  title: 'Suite',
  size: 'Samples',
  mean: 'Mean',
  variance: 'Variance',
-  position: 'Position',
 };

 function copyAsMarkdown() {
@@ -130,26 +131,8 @@ function copyAsBulletList() {
        </c-button>
      </div>

-      <n-table>
-        <thead>
-          <tr>
-            <th>{{ header.position }}</th>
-            <th>{{ header.title }}</th>
-            <th>{{ header.size }}</th>
-            <th>{{ header.mean }}</th>
-            <th>{{ header.variance }}</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="{ title, size, mean, variance, position } of results" :key="title">
-            <td>{{ position }}</td>
-            <td>{{ title }}</td>
-            <td>{{ size }}</td>
-            <td>{{ mean }}</td>
-            <td>{{ variance }}</td>
-          </tr>
-        </tbody>
-      </n-table>
+      <c-table :data="results" :headers="header" />
+
      <div mt-5 flex justify-center gap-3>
        <c-button @click="copyAsMarkdown()">
          Copy as markdown table
--- a/src/tools/benchmark-builder/dynamic-values.vue
+++ b/src/tools/benchmark-builder/dynamic-values.vue
@@ -39,14 +39,11 @@ function onInputEnter(index: number) {
        autofocus
        @keydown.enter="onInputEnter(index)"
      />
-      <n-tooltip>
-        <template #trigger>
-          <c-button circle variant="text" @click="values.splice(index, 1)">
-            <n-icon :component="Trash" depth="3" size="18" />
-          </c-button>
-        </template>
-        Delete value
-      </n-tooltip>
+      <c-tooltip tooltip="Delete this value">
+        <c-button circle variant="text" @click="values.splice(index, 1)">
+          <n-icon :component="Trash" depth="3" size="18" />
+        </c-button>
+      </c-tooltip>
    </div>

    <c-button @click="addValue">
--- a/src/tools/camera-recorder/camera-recorder.vue
+++ b/src/tools/camera-recorder/camera-recorder.vue
@@ -28,6 +28,7 @@ const permissionCannotBePrompted = ref(false);
 const {
  stream,
  start,
+  stop,
  enabled: isMediaStreamAvailable,
 } = useUserMedia({
  constraints: computed(() => ({
@@ -83,6 +84,8 @@ watchEffect(() => {
  }
 });

+onBeforeUnmount(() => stop());
+
 async function requestPermissions() {
  try {
    await ensurePermissions();
--- a/src/tools/case-converter/case-converter.vue
+++ b/src/tools/case-converter/case-converter.vue
@@ -23,11 +23,11 @@ const input = ref('lorem ipsum dolor sit amet');
 const formats = computed(() => [
  {
    label: 'Lowercase:',
-    value: noCase(input.value, baseConfig).toLocaleLowerCase(),
+    value: input.value.toLocaleLowerCase(),
  },
  {
    label: 'Uppercase:',
-    value: noCase(input.value, baseConfig).toLocaleUpperCase(),
+    value: input.value.toLocaleUpperCase(),
  },
  {
    label: 'Camelcase:',
@@ -73,6 +73,13 @@ const formats = computed(() => [
    label: 'Snakecase:',
    value: snakeCase(input.value, baseConfig),
  },
+  {
+    label: 'Mockingcase:',
+    value: input.value
+      .split('')
+      .map((char, index) => (index % 2 === 0 ? char.toUpperCase() : char.toLowerCase()))
+      .join(''),
+  },
 ]);

 const inputLabelAlignmentConfig = {
@@ -92,7 +99,7 @@ const inputLabelAlignmentConfig = {
      v-bind="inputLabelAlignmentConfig"
    />

-    <div divider my-16px />
+    <div my-16px divider />

    <InputCopyable
      v-for="format in formats"
--- a/src/tools/color-converter/color-converter.e2e.spec.ts
+++ b/src/tools/color-converter/color-converter.e2e.spec.ts
@@ -0,0 +1,23 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('Tool - Color converter', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/color-converter');
+  });
+
+  test('Has title', async ({ page }) => {
+    await expect(page).toHaveTitle('Color converter - IT Tools');
+  });
+
+  test('Color is converted from its name to other formats', async ({ page }) => {
+    await page.getByTestId('input-name').fill('olive');
+
+    expect(await page.getByTestId('input-name').inputValue()).toEqual('olive');
+    expect(await page.getByTestId('input-hex').inputValue()).toEqual('#808000');
+    expect(await page.getByTestId('input-rgb').inputValue()).toEqual('rgb(128, 128, 0)');
+    expect(await page.getByTestId('input-hsl').inputValue()).toEqual('hsl(60, 100%, 25%)');
+    expect(await page.getByTestId('input-hwb').inputValue()).toEqual('hwb(60 0% 50%)');
+    expect(await page.getByTestId('input-cmyk').inputValue()).toEqual('device-cmyk(0% 0% 100% 50%)');
+    expect(await page.getByTestId('input-lch').inputValue()).toEqual('lch(52.15% 56.81 99.57)');
+  });
+});
--- a/src/tools/color-converter/color-converter.models.test.ts
+++ b/src/tools/color-converter/color-converter.models.test.ts
@@ -0,0 +1,13 @@
+import { describe, expect, it } from 'vitest';
+import { removeAlphaChannelWhenOpaque } from './color-converter.models';
+
+describe('color-converter models', () => {
+  describe('removeAlphaChannelWhenOpaque', () => {
+    it('remove alpha channel of an hex color when it is opaque (alpha = 1)', () => {
+      expect(removeAlphaChannelWhenOpaque('#000000ff')).toBe('#000000');
+      expect(removeAlphaChannelWhenOpaque('#ffffffFF')).toBe('#ffffff');
+      expect(removeAlphaChannelWhenOpaque('#000000FE')).toBe('#000000FE');
+      expect(removeAlphaChannelWhenOpaque('#00000000')).toBe('#00000000');
+    });
+  });
+});
--- a/src/tools/color-converter/color-converter.models.ts
+++ b/src/tools/color-converter/color-converter.models.ts
@@ -0,0 +1,52 @@
+import { type Colord, colord } from 'colord';
+import { withDefaultOnError } from '@/utils/defaults';
+import { useValidation } from '@/composable/validation';
+
+export { removeAlphaChannelWhenOpaque, buildColorFormat };
+
+function removeAlphaChannelWhenOpaque(hexColor: string) {
+  return hexColor.replace(/^(#(?:[0-9a-f]{3}){1,2})ff$/i, '$1');
+}
+
+function buildColorFormat({
+  label,
+  parse = value => colord(value),
+  format,
+  placeholder,
+  invalidMessage = `Invalid ${label.toLowerCase()} format.`,
+  type = 'text',
+}: {
+  label: string
+  parse?: (value: string) => Colord
+  format: (value: Colord) => string
+  placeholder?: string
+  invalidMessage?: string
+  type?: 'text' | 'color-picker'
+}) {
+  const value = ref('');
+
+  return {
+    type,
+    label,
+    parse: (v: string) => withDefaultOnError(() => parse(v), undefined),
+    format,
+    placeholder,
+    value,
+    validation: useValidation({
+      source: value,
+      rules: [
+        {
+          message: invalidMessage,
+          validator: v => withDefaultOnError(() => {
+            if (v === '') {
+              return true;
+            }
+
+            return parse(v).isValid();
+          }, false),
+        },
+      ],
+    }),
+
+  };
+}
--- a/src/tools/color-converter/color-converter.vue
+++ b/src/tools/color-converter/color-converter.vue
@@ -1,87 +1,103 @@
 <script setup lang="ts">
+import type { Colord } from 'colord';
 import { colord, extend } from 'colord';
-
+import _ from 'lodash';
 import cmykPlugin from 'colord/plugins/cmyk';
 import hwbPlugin from 'colord/plugins/hwb';
 import namesPlugin from 'colord/plugins/names';
 import lchPlugin from 'colord/plugins/lch';
-import InputCopyable from '../../components/InputCopyable.vue';
+import { buildColorFormat } from './color-converter.models';

 extend([cmykPlugin, hwbPlugin, namesPlugin, lchPlugin]);

-const name = ref('');
-const hex = ref('#1ea54cff');
-const rgb = ref('');
-const hsl = ref('');
-const hwb = ref('');
-const cmyk = ref('');
-const lch = ref('');
+const formats = {
+  picker: buildColorFormat({
+    label: 'color picker',
+    format: (v: Colord) => v.toHex(),
+    type: 'color-picker',
+  }),
+  hex: buildColorFormat({
+    label: 'hex',
+    format: (v: Colord) => v.toHex(),
+    placeholder: 'e.g. #ff0000',
+  }),
+  rgb: buildColorFormat({
+    label: 'rgb',
+    format: (v: Colord) => v.toRgbString(),
+    placeholder: 'e.g. rgb(255, 0, 0)',
+  }),
+  hsl: buildColorFormat({
+    label: 'hsl',
+    format: (v: Colord) => v.toHslString(),
+    placeholder: 'e.g. hsl(0, 100%, 50%)',
+  }),
+  hwb: buildColorFormat({
+    label: 'hwb',
+    format: (v: Colord) => v.toHwbString(),
+    placeholder: 'e.g. hwb(0, 0%, 0%)',
+  }),
+  lch: buildColorFormat({
+    label: 'lch',
+    format: (v: Colord) => v.toLchString(),
+    placeholder: 'e.g. lch(53.24, 104.55, 40.85)',
+  }),
+  cmyk: buildColorFormat({
+    label: 'cmyk',
+    format: (v: Colord) => v.toCmykString(),
+    placeholder: 'e.g. cmyk(0, 100%, 100%, 0)',
+  }),
+  name: buildColorFormat({
+    label: 'name',
+    format: (v: Colord) => v.toName({ closest: true }) ?? 'Unknown',
+    placeholder: 'e.g. red',
+  }),
+};

-function onInputUpdated(value: string, omit: string) {
-  try {
-    const color = colord(value);
+updateColorValue(colord('#1ea54c'));

-    if (omit !== 'name') {
-      name.value = color.toName({ closest: true }) ?? '';
-    }
-    if (omit !== 'hex') {
-      hex.value = color.toHex();
-    }
-    if (omit !== 'rgb') {
-      rgb.value = color.toRgbString();
-    }
-    if (omit !== 'hsl') {
-      hsl.value = color.toHslString();
-    }
-    if (omit !== 'hwb') {
-      hwb.value = color.toHwbString();
-    }
-    if (omit !== 'cmyk') {
-      cmyk.value = color.toCmykString();
-    }
-    if (omit !== 'lch') {
-      lch.value = color.toLchString();
-    }
+function updateColorValue(value: Colord | undefined, omitLabel?: string) {
+  if (value === undefined) {
+    return;
  }
-  catch {
-    //
+
+  if (!value.isValid()) {
+    return;
  }
+
+  _.forEach(formats, ({ value: valueRef, format }, key) => {
+    if (key !== omitLabel) {
+      valueRef.value = format(value);
+    }
+  });
 }
-
-onInputUpdated(hex.value, 'hex');
 </script>

 <template>
  <c-card>
-    <n-form label-width="100" label-placement="left">
-      <n-form-item label="color picker:">
+    <template v-for="({ label, parse, placeholder, validation, type }, key) in formats" :key="key">
+      <input-copyable
+        v-if="type === 'text'"
+        v-model:value="formats[key].value.value"
+        :test-id="`input-${key}`"
+        :label="`${label}:`"
+        label-position="left"
+        label-width="100px"
+        label-align="right"
+        :placeholder="placeholder"
+        :validation="validation"
+        raw-text
+        clearable
+        mt-2
+        @update:value="(v:string) => updateColorValue(parse(v), key)"
+      />
+
+      <n-form-item v-else-if="type === 'color-picker'" :label="`${label}:`" label-width="100" label-placement="left" :show-feedback="false">
        <n-color-picker
-          v-model:value="hex"
+          v-model:value="formats[key].value.value"
          placement="bottom-end"
-          @update:value="(v: string) => onInputUpdated(v, 'hex')"
+          @update:value="(v:string) => updateColorValue(parse(v), key)"
        />
      </n-form-item>
-      <n-form-item label="color name:">
-        <InputCopyable v-model:value="name" @update:value="(v: string) => onInputUpdated(v, 'name')" />
-      </n-form-item>
-      <n-form-item label="hex:">
-        <InputCopyable v-model:value="hex" @update:value="(v: string) => onInputUpdated(v, 'hex')" />
-      </n-form-item>
-      <n-form-item label="rgb:">
-        <InputCopyable v-model:value="rgb" @update:value="(v: string) => onInputUpdated(v, 'rgb')" />
-      </n-form-item>
-      <n-form-item label="hsl:">
-        <InputCopyable v-model:value="hsl" @update:value="(v: string) => onInputUpdated(v, 'hsl')" />
-      </n-form-item>
-      <n-form-item label="hwb:">
-        <InputCopyable v-model:value="hwb" @update:value="(v: string) => onInputUpdated(v, 'hwb')" />
-      </n-form-item>
-      <n-form-item label="lch:">
-        <InputCopyable v-model:value="lch" @update:value="(v: string) => onInputUpdated(v, 'lch')" />
-      </n-form-item>
-      <n-form-item label="cmyk:">
-        <InputCopyable v-model:value="cmyk" @update:value="(v: string) => onInputUpdated(v, 'cmyk')" />
-      </n-form-item>
-    </n-form>
+    </template>
  </c-card>
 </template>
--- a/src/tools/crontab-generator/crontab-generator.vue
+++ b/src/tools/crontab-generator/crontab-generator.vue
@@ -167,34 +167,8 @@ const cronValidationRules = [
        </div>
      </c-card>
    </div>
-    <n-table v-else size="small">
-      <thead>
-        <tr>
-          <th class="text-left" scope="col">
-            Symbol
-          </th>
-          <th class="text-left" scope="col">
-            Meaning
-          </th>
-          <th class="text-left" scope="col">
-            Example
-          </th>
-          <th class="text-left" scope="col">
-            Equivalent
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="{ symbol, meaning, example, equivalent } in helpers" :key="symbol">
-          <td>{{ symbol }}</td>
-          <td>{{ meaning }}</td>
-          <td>
-            <code>{{ example }}</code>
-          </td>
-          <td>{{ equivalent }}</td>
-        </tr>
-      </tbody>
-    </n-table>
+
+    <c-table v-else :data="helpers" />
  </c-card>
 </template>

--- a/src/tools/date-time-converter/date-time-converter.e2e.spec.ts
+++ b/src/tools/date-time-converter/date-time-converter.e2e.spec.ts
@@ -29,5 +29,6 @@ test.describe('Date time converter - json to yaml', () => {
    expect((await page.getByTestId('Timestamp').inputValue()).trim()).toEqual('1681333824000');
    expect((await page.getByTestId('UTC format').inputValue()).trim()).toEqual('Wed, 12 Apr 2023 21:10:24 GMT');
    expect((await page.getByTestId('Mongo ObjectID').inputValue()).trim()).toEqual('64371e400000000000000000');
+    expect((await page.getByTestId('Excel date/time').inputValue()).trim()).toEqual('45028.88222222222');
  });
 });
--- a/src/tools/date-time-converter/date-time-converter.models.test.ts
+++ b/src/tools/date-time-converter/date-time-converter.models.test.ts
@@ -1,5 +1,8 @@
 import { describe, expect, test } from 'vitest';
 import {
+  dateToExcelFormat,
+  excelFormatToDate,
+  isExcelFormat,
  isISO8601DateTimeString,
  isISO9075DateString,
  isMongoObjectId,
@@ -139,4 +142,39 @@ describe('date-time-converter models', () => {
      expect(isMongoObjectId('')).toBe(false);
    });
  });
+
+  describe('isExcelFormat', () => {
+    test('an Excel format string is a floating number that can be negative', () => {
+      expect(isExcelFormat('0')).toBe(true);
+      expect(isExcelFormat('1')).toBe(true);
+      expect(isExcelFormat('1.1')).toBe(true);
+      expect(isExcelFormat('-1.1')).toBe(true);
+      expect(isExcelFormat('-1')).toBe(true);
+
+      expect(isExcelFormat('')).toBe(false);
+      expect(isExcelFormat('foo')).toBe(false);
+      expect(isExcelFormat('1.1.1')).toBe(false);
+    });
+  });
+
+  describe('dateToExcelFormat', () => {
+    test('a date in Excel format is the number of days since 01/01/1900', () => {
+      expect(dateToExcelFormat(new Date('2016-05-20T00:00:00.000Z'))).toBe('42510');
+      expect(dateToExcelFormat(new Date('2016-05-20T12:00:00.000Z'))).toBe('42510.5');
+      expect(dateToExcelFormat(new Date('2023-10-31T09:26:06.421Z'))).toBe('45230.39312987268');
+      expect(dateToExcelFormat(new Date('1970-01-01T00:00:00.000Z'))).toBe('25569');
+      expect(dateToExcelFormat(new Date('1800-01-01T00:00:00.000Z'))).toBe('-36522');
+    });
+  });
+
+  describe('excelFormatToDate', () => {
+    test('a date in Excel format is the number of days since 01/01/1900', () => {
+      expect(excelFormatToDate('0')).toEqual(new Date('1899-12-30T00:00:00.000Z'));
+      expect(excelFormatToDate('1')).toEqual(new Date('1899-12-31T00:00:00.000Z'));
+      expect(excelFormatToDate('2')).toEqual(new Date('1900-01-01T00:00:00.000Z'));
+      expect(excelFormatToDate('4242.4242')).toEqual(new Date('1911-08-12T10:10:50.880Z'));
+      expect(excelFormatToDate('42738.22626859954')).toEqual(new Date('2017-01-03T05:25:49.607Z'));
+      expect(excelFormatToDate('-1000')).toEqual(new Date('1897-04-04T00:00:00.000Z'));
+    });
+  });
 });
--- a/src/tools/date-time-converter/date-time-converter.models.ts
+++ b/src/tools/date-time-converter/date-time-converter.models.ts
@@ -9,6 +9,9 @@ export {
  isTimestamp,
  isUTCDateString,
  isMongoObjectId,
+  dateToExcelFormat,
+  excelFormatToDate,
+  isExcelFormat,
 };

 const ISO8601_REGEX
@@ -21,6 +24,8 @@ const RFC3339_REGEX

 const RFC7231_REGEX = /^[A-Za-z]{3},\s[0-9]{2}\s[A-Za-z]{3}\s[0-9]{4}\s[0-9]{2}:[0-9]{2}:[0-9]{2}\sGMT$/;

+const EXCEL_FORMAT_REGEX = /^-?\d+(\.\d+)?$/;
+
 function createRegexMatcher(regex: RegExp) {
  return (date?: string) => !_.isNil(date) && regex.test(date);
 }
@@ -33,6 +38,8 @@ const isUnixTimestamp = createRegexMatcher(/^[0-9]{1,10}$/);
 const isTimestamp = createRegexMatcher(/^[0-9]{1,13}$/);
 const isMongoObjectId = createRegexMatcher(/^[0-9a-fA-F]{24}$/);

+const isExcelFormat = createRegexMatcher(EXCEL_FORMAT_REGEX);
+
 function isUTCDateString(date?: string) {
  if (_.isNil(date)) {
    return false;
@@ -45,3 +52,11 @@ function isUTCDateString(date?: string) {
    return false;
  }
 }
+
+function dateToExcelFormat(date: Date) {
+  return String(((date.getTime()) / (1000 * 60 * 60 * 24)) + 25569);
+}
+
+function excelFormatToDate(excelFormat: string | number) {
+  return new Date((Number(excelFormat) - 25569) * 86400 * 1000);
+}
--- a/src/tools/date-time-converter/date-time-converter.vue
+++ b/src/tools/date-time-converter/date-time-converter.vue
@@ -14,6 +14,9 @@ import {
 } from 'date-fns';
 import type { DateFormat, ToDateMapper } from './date-time-converter.types';
 import {
+  dateToExcelFormat,
+  excelFormatToDate,
+  isExcelFormat,
  isISO8601DateTimeString,
  isISO9075DateString,
  isMongoObjectId,
@@ -82,9 +85,15 @@ const formats: DateFormat[] = [
  {
    name: 'Mongo ObjectID',
    fromDate: date => `${Math.floor(date.getTime() / 1000).toString(16)}0000000000000000`,
-    toDate: objectId => new Date(parseInt(objectId.substring(0, 8), 16) * 1000),
+    toDate: objectId => new Date(Number.parseInt(objectId.substring(0, 8), 16) * 1000),
    formatMatcher: date => isMongoObjectId(date),
  },
+  {
+    name: 'Excel date/time',
+    fromDate: date => dateToExcelFormat(date),
+    toDate: excelFormatToDate,
+    formatMatcher: isExcelFormat,
+  },
 ];

 const formatIndex = ref(6);
@@ -146,7 +155,7 @@ function formatDateUsingFormatter(formatter: (date: Date) => string, date?: Date
      <c-input-text
        v-model:value="inputDate"
        autofocus
-        placeholder="Put you date string here..."
+        placeholder="Put your date string here..."
        clearable
        test-id="date-time-converter-input"
        :validation="validation"
--- a/src/tools/emoji-picker/emoji-card.vue
+++ b/src/tools/emoji-picker/emoji-card.vue
@@ -29,7 +29,7 @@ const { copy } = useCopy();
        Unicode:  <span border="1px solid current op-30" b-rd-xl px-12px py-4px>{{ emojiInfo.unicode }}</span>
      </div> -->

-      <div flex gap-2 font-mono text-xs op-70>
+      <div flex gap-2 text-xs font-mono op-70>
        <span cursor-pointer transition hover:text-primary @click="copy(emojiInfo.codePoints, { notificationMessage: `Code points '${emojiInfo.codePoints}' copied to the clipboard` })">
          {{ emojiInfo.codePoints }}
        </span>
--- a/src/tools/emoji-picker/emoji.types.ts
+++ b/src/tools/emoji-picker/emoji.types.ts
@@ -5,4 +5,4 @@ export type EmojiInfo = {
  emoji: string
  codePoints: string | undefined
  unicode: string
-} & typeof emojiUnicodeData['\uD83E\uDD10'];
+} & typeof emojiUnicodeData[string];
--- a/src/tools/encryption/encryption.vue
+++ b/src/tools/encryption/encryption.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { AES, RC4, Rabbit, TripleDES, enc } from 'crypto-js';
+import { computedCatch } from '@/composable/computed/catchedComputed';

 const algos = { AES, TripleDES, Rabbit, RC4 };

@@ -11,9 +12,10 @@ const cypherOutput = computed(() => algos[cypherAlgo.value].encrypt(cypherInput.
 const decryptInput = ref('U2FsdGVkX1/EC3+6P5dbbkZ3e1kQ5o2yzuU0NHTjmrKnLBEwreV489Kr0DIB+uBs');
 const decryptAlgo = ref<keyof typeof algos>('AES');
 const decryptSecret = ref('my secret key');
-const decryptOutput = computed(() =>
-  algos[decryptAlgo.value].decrypt(decryptInput.value, decryptSecret.value).toString(enc.Utf8),
-);
+const [decryptOutput, decryptError] = computedCatch(() => algos[decryptAlgo.value].decrypt(decryptInput.value, decryptSecret.value).toString(enc.Utf8), {
+  defaultValue: '',
+  defaultErrorMessage: 'Unable to decrypt your text',
+});
 </script>

 <template>
@@ -63,7 +65,11 @@ const decryptOutput = computed(() =>
        />
      </div>
    </div>
+    <c-alert v-if="decryptError" type="error" mt-12 title="Error while decrypting">
+      {{ decryptError }}
+    </c-alert>
    <c-input-text
+      v-else
      label="Your decrypted text:"
      :value="decryptOutput"
      placeholder="Your string hash"
--- a/src/tools/eta-calculator/eta-calculator.vue
+++ b/src/tools/eta-calculator/eta-calculator.vue
@@ -26,8 +26,8 @@ const endAt = computed(() =>
 <template>
  <div>
    <div text-justify op-70>
-      With a concrete example, if you wash 3 plates in 5 minutes and you have 500 plates to wash, it will take you 5
-      hours and 10 minutes to wash them all.
+      With a concrete example, if you wash 5 plates in 3 minutes and you have 500 plates to wash, it will take you 5
+      hours to wash them all.
    </div>
    <n-divider />
    <div flex gap-2>
--- a/src/tools/hash-text/hash-text.service.ts
+++ b/src/tools/hash-text/hash-text.service.ts
@@ -2,6 +2,6 @@ export function convertHexToBin(hex: string) {
  return hex
    .trim()
    .split('')
-    .map(byte => parseInt(byte, 16).toString(2).padStart(4, '0'))
+    .map(byte => Number.parseInt(byte, 16).toString(2).padStart(4, '0'))
    .join('');
 }
--- a/src/tools/html-wysiwyg-editor/editor/menu-bar-item.vue
+++ b/src/tools/html-wysiwyg-editor/editor/menu-bar-item.vue
@@ -6,13 +6,9 @@ const { icon, title, action, isActive } = toRefs(props);
 </script>

 <template>
-  <n-tooltip trigger="hover">
-    <template #trigger>
-      <c-button circle variant="text" :type="isActive?.() ? 'primary' : 'default'" @click="action">
-        <n-icon :component="icon" />
-      </c-button>
-    </template>
-
-    {{ title }}
-  </n-tooltip>
+  <c-tooltip :tooltip="title">
+    <c-button circle variant="text" :type="isActive?.() ? 'primary' : 'default'" @click="action">
+      <n-icon :component="icon" />
+    </c-button>
+  </c-tooltip>
 </template>
--- a/src/tools/html-wysiwyg-editor/html-wysiwyg-editor.vue
+++ b/src/tools/html-wysiwyg-editor/html-wysiwyg-editor.vue
@@ -1,14 +1,16 @@
 <script setup lang="ts">
 import { format } from 'prettier';
-import htmlParser from 'prettier/parser-html';
+import htmlParser from 'prettier/plugins/html';
 import { useStorage } from '@vueuse/core';
 import Editor from './editor/editor.vue';
 import TextareaCopyable from '@/components/TextareaCopyable.vue';

 const html = useStorage('html-wysiwyg-editor--html', '<h1>Hey!</h1><p>Welcome to this html wysiwyg editor</p>');
+
+const formattedHtml = asyncComputed(() => format(html.value, { parser: 'html', plugins: [htmlParser] }), '');
 </script>

 <template>
  <Editor v-model:html="html" />
-  <TextareaCopyable :value="format(html, { parser: 'html', plugins: [htmlParser] })" language="html" />
+  <TextareaCopyable :value="formattedHtml" language="html" />
 </template>
--- a/src/tools/iban-validator-and-parser/iban-validator-and-parser.e2e.spec.ts
+++ b/src/tools/iban-validator-and-parser/iban-validator-and-parser.e2e.spec.ts
@@ -0,0 +1,52 @@
+import { type Page, expect, test } from '@playwright/test';
+
+async function extractIbanInfo({ page }: { page: Page }) {
+  const itemsLines = await page
+    .locator('.c-key-value-list__item').all();
+
+  return await Promise.all(
+    itemsLines.map(async item => [
+      (await item.locator('.c-key-value-list__key').textContent() ?? '').trim(),
+      (await item.locator('.c-key-value-list__value').textContent() ?? '').trim(),
+    ]),
+  );
+}
+
+test.describe('Tool - Iban validator and parser', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/iban-validator-and-parser');
+  });
+
+  test('Has correct title', async ({ page }) => {
+    await expect(page).toHaveTitle('IBAN validator and parser - IT Tools');
+  });
+
+  test('iban info are extracted from a valid iban', async ({ page }) => {
+    await page.getByTestId('iban-input').fill('DE89370400440532013000');
+
+    const ibanInfo = await extractIbanInfo({ page });
+
+    expect(ibanInfo).toEqual([
+      ['Is IBAN valid ?', 'Yes'],
+      ['Is IBAN a QR-IBAN ?', 'No'],
+      ['Country code', 'DE'],
+      ['BBAN', '370400440532013000'],
+      ['IBAN friendly format', 'DE89 3704 0044 0532 0130 00'],
+    ]);
+  });
+
+  test('invalid iban errors are displayed', async ({ page }) => {
+    await page.getByTestId('iban-input').fill('FR7630006060011234567890189');
+
+    const ibanInfo = await extractIbanInfo({ page });
+
+    expect(ibanInfo).toEqual([
+      ['Is IBAN valid ?', 'No'],
+      ['IBAN errors', 'Wrong account bank branch checksum Wrong IBAN checksum'],
+      ['Is IBAN a QR-IBAN ?', 'No'],
+      ['Country code', 'N/A'],
+      ['BBAN', 'N/A'],
+      ['IBAN friendly format', 'FR76 3000 6060 0112 3456 7890 189'],
+    ]);
+  });
+});
--- a/src/tools/iban-validator-and-parser/iban-validator-and-parser.service.ts
+++ b/src/tools/iban-validator-and-parser/iban-validator-and-parser.service.ts
@@ -0,0 +1,18 @@
+import { ValidationErrorsIBAN } from 'ibantools';
+
+export { getFriendlyErrors };
+
+const ibanErrorToMessage = {
+  [ValidationErrorsIBAN.NoIBANProvided]: 'No IBAN provided',
+  [ValidationErrorsIBAN.NoIBANCountry]: 'No IBAN country',
+  [ValidationErrorsIBAN.WrongBBANLength]: 'Wrong BBAN length',
+  [ValidationErrorsIBAN.WrongBBANFormat]: 'Wrong BBAN format',
+  [ValidationErrorsIBAN.ChecksumNotNumber]: 'Checksum is not a number',
+  [ValidationErrorsIBAN.WrongIBANChecksum]: 'Wrong IBAN checksum',
+  [ValidationErrorsIBAN.WrongAccountBankBranchChecksum]: 'Wrong account bank branch checksum',
+  [ValidationErrorsIBAN.QRIBANNotAllowed]: 'QR-IBAN not allowed',
+};
+
+function getFriendlyErrors(errorCodes: ValidationErrorsIBAN[]) {
+  return errorCodes.map(errorCode => ibanErrorToMessage[errorCode]).filter(Boolean);
+}
--- a/src/tools/iban-validator-and-parser/iban-validator-and-parser.vue
+++ b/src/tools/iban-validator-and-parser/iban-validator-and-parser.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { extractIBAN, friendlyFormatIBAN, isQRIBAN, validateIBAN } from 'ibantools';
+import { getFriendlyErrors } from './iban-validator-and-parser.service';
+import type { CKeyValueListItems } from '@/ui/c-key-value-list/c-key-value-list.types';
+
+const rawIban = ref('');
+
+const ibanInfo = computed<CKeyValueListItems>(() => {
+  const iban = rawIban.value.toUpperCase().replace(/\s/g, '').replace(/-/g, '');
+
+  if (iban === '') {
+    return [];
+  }
+
+  const { valid: isIbanValid, errorCodes } = validateIBAN(iban);
+  const { countryCode, bban } = extractIBAN(iban);
+  const errors = getFriendlyErrors(errorCodes);
+
+  return [
+
+    {
+      label: 'Is IBAN valid ?',
+      value: isIbanValid,
+      showCopyButton: false,
+    },
+    {
+      label: 'IBAN errors',
+      value: errors.length === 0 ? undefined : errors,
+      hideOnNil: true,
+      showCopyButton: false,
+    },
+    {
+      label: 'Is IBAN a QR-IBAN ?',
+      value: isQRIBAN(iban),
+      showCopyButton: false,
+    },
+    {
+      label: 'Country code',
+      value: countryCode,
+    },
+    {
+      label: 'BBAN',
+      value: bban,
+    },
+    {
+      label: 'IBAN friendly format',
+      value: friendlyFormatIBAN(iban),
+    },
+  ];
+});
+
+const ibanExamples = [
+  'FR7630006000011234567890189',
+  'DE89370400440532013000',
+  'GB29NWBK60161331926819',
+];
+</script>
+
+<template>
+  <div>
+    <c-input-text v-model:value="rawIban" placeholder="Enter an IBAN to check for validity..." test-id="iban-input" />
+
+    <c-card v-if="ibanInfo.length > 0" mt-5>
+      <c-key-value-list :items="ibanInfo" data-test-id="iban-info" />
+    </c-card>
+
+    <c-card title="Valid IBAN examples" mt-5>
+      <div v-for="iban in ibanExamples" :key="iban">
+        <c-text-copyable :value="iban" font-mono :displayed-value="friendlyFormatIBAN(iban)" />
+      </div>
+    </c-card>
+  </div>
+</template>
--- a/src/tools/iban-validator-and-parser/index.ts
+++ b/src/tools/iban-validator-and-parser/index.ts
@@ -0,0 +1,12 @@
+import { defineTool } from '../tool';
+import Bank from '~icons/mdi/bank';
+
+export const tool = defineTool({
+  name: 'IBAN validator and parser',
+  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.',
+  keywords: ['iban', 'validator', 'and', 'parser', 'bic', 'bank'],
+  component: () => import('./iban-validator-and-parser.vue'),
+  icon: Bank,
+  createdAt: new Date('2023-08-26'),
+});
--- a/src/tools/index.ts
+++ b/src/tools/index.ts
@@ -1,6 +1,14 @@
 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 pdfSignatureChecker } from './pdf-signature-checker';
+import { tool as numeronymGenerator } from './numeronym-generator';
+import { tool as macAddressGenerator } from './mac-address-generator';
+import { tool as textToBinary } from './text-to-binary';
+import { tool as ulidGenerator } from './ulid-generator';
+import { tool as ibanValidatorAndParser } from './iban-validator-and-parser';
+import { tool as stringObfuscator } from './string-obfuscator';
+import { tool as textDiff } from './text-diff';
 import { tool as emojiPicker } from './emoji-picker';
 import { tool as passwordStrengthAnalyser } from './password-strength-analyser';
 import { tool as yamlToToml } from './yaml-to-toml';
@@ -53,6 +61,7 @@ import { tool as metaTagGenerator } from './meta-tag-generator';
 import { tool as mimeTypes } from './mime-types';
 import { tool as otpCodeGeneratorAndValidator } from './otp-code-generator-and-validator';
 import { tool as qrCodeGenerator } from './qr-code-generator';
+import { tool as wifiQrCodeGenerator } from './wifi-qr-code-generator';
 import { tool as randomPortGenerator } from './random-port-generator';
 import { tool as romanNumeralConverter } from './roman-numeral-converter';
 import { tool as sqlPrettify } from './sql-prettify';
@@ -70,7 +79,7 @@ import { tool as xmlFormatter } from './xml-formatter';
 export const toolsByCategory: ToolCategory[] = [
  {
    name: 'Crypto',
-    components: [tokenGenerator, hashText, bcrypt, uuidGenerator, cypher, bip39, hmacGenerator, rsaKeyPairGenerator, passwordStrengthAnalyser],
+    components: [tokenGenerator, hashText, bcrypt, uuidGenerator, ulidGenerator, cypher, bip39, hmacGenerator, rsaKeyPairGenerator, passwordStrengthAnalyser, pdfSignatureChecker],
  },
  {
    name: 'Converter',
@@ -83,6 +92,7 @@ export const toolsByCategory: ToolCategory[] = [
      colorConverter,
      caseConverter,
      textToNatoAlphabet,
+      textToBinary,
      yamlToJson,
      yamlToToml,
      jsonToYaml,
@@ -114,7 +124,7 @@ export const toolsByCategory: ToolCategory[] = [
  },
  {
    name: 'Images and videos',
-    components: [qrCodeGenerator, svgPlaceholderGenerator, cameraRecorder],
+    components: [qrCodeGenerator, wifiQrCodeGenerator, svgPlaceholderGenerator, cameraRecorder],
  },
  {
    name: 'Development',
@@ -133,7 +143,7 @@ export const toolsByCategory: ToolCategory[] = [
  },
  {
    name: 'Network',
-    components: [ipv4SubnetCalculator, ipv4AddressConverter, ipv4RangeExpander, macAddressLookup, ipv6UlaGenerator],
+    components: [ipv4SubnetCalculator, ipv4AddressConverter, ipv4RangeExpander, macAddressLookup, macAddressGenerator, ipv6UlaGenerator],
  },
  {
    name: 'Math',
@@ -145,11 +155,11 @@ export const toolsByCategory: ToolCategory[] = [
  },
  {
    name: 'Text',
-    components: [loremIpsumGenerator, textStatistics, emojiPicker],
+    components: [loremIpsumGenerator, textStatistics, emojiPicker, stringObfuscator, textDiff, numeronymGenerator],
  },
  {
    name: 'Data',
-    components: [phoneParserAndFormatter],
+    components: [phoneParserAndFormatter, ibanValidatorAndParser],
  },
 ];

--- a/src/tools/ipv4-address-converter/ipv4-address-converter.service.ts
+++ b/src/tools/ipv4-address-converter/ipv4-address-converter.service.ts
@@ -23,7 +23,7 @@ function ipv4ToIpv6({ ip, prefix = '0000:0000:0000:0000:0000:ffff:' }: { ip: str
    + _.chain(ip)
      .trim()
      .split('.')
-      .map(part => parseInt(part).toString(16).padStart(2, '0'))
+      .map(part => Number.parseInt(part).toString(16).padStart(2, '0'))
      .chunk(2)
      .map(blocks => blocks.join(''))
      .join(':')
--- a/src/tools/ipv4-range-expander/ipv4-range-expander.service.ts
+++ b/src/tools/ipv4-range-expander/ipv4-range-expander.service.ts
@@ -13,7 +13,7 @@ function getRangesize(start: string, end: string) {
    return -1;
  }

-  return 1 + parseInt(end, 2) - parseInt(start, 2);
+  return 1 + Number.parseInt(end, 2) - Number.parseInt(start, 2);
 }

 function getCidr(start: string, end: string) {
@@ -55,8 +55,8 @@ function calculateCidr({ startIp, endIp }: { startIp: string; endIp: string }) {
  const cidr = getCidr(start, end);
  if (cidr != null) {
    const result: Ipv4RangeExpanderResult = {};
-    result.newEnd = bits2ip(parseInt(cidr.end, 2));
-    result.newStart = bits2ip(parseInt(cidr.start, 2));
+    result.newEnd = bits2ip(Number.parseInt(cidr.end, 2));
+    result.newStart = bits2ip(Number.parseInt(cidr.start, 2));
    result.newCidr = `${result.newStart}/${cidr.mask}`;
    result.newSize = getRangesize(cidr.start, cidr.end);

--- a/src/tools/jwt-parser/jwt-parser.service.ts
+++ b/src/tools/jwt-parser/jwt-parser.service.ts
@@ -1,6 +1,5 @@
 import jwtDecode, { type JwtHeader, type JwtPayload } from 'jwt-decode';
 import _ from 'lodash';
-import { match } from 'ts-pattern';
 import { ALGORITHM_DESCRIPTIONS, CLAIM_DESCRIPTIONS } from './jwt-parser.constants';

 export { decodeJwt };
@@ -20,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 {
@@ -32,10 +31,15 @@ function parseClaims({ claim, value }: { claim: string; value: unknown }) {
 }

 function getFriendlyValue({ claim, value }: { claim: string; value: unknown }) {
-  return match(claim)
-    .with('exp', 'nbf', 'iat', () => dateFormatter(value))
-    .with('alg', () => (_.isString(value) ? ALGORITHM_DESCRIPTIONS[value] : undefined))
-    .otherwise(() => undefined);
+  if (['exp', 'nbf', 'iat'].includes(claim)) {
+    return dateFormatter(value);
+  }
+
+  if (claim === 'alg' && _.isString(value)) {
+    return ALGORITHM_DESCRIPTIONS[value];
+  }
+
+  return undefined;
 }

 function dateFormatter(value: unknown) {
--- a/src/tools/mac-address-generator/index.ts
+++ b/src/tools/mac-address-generator/index.ts
@@ -0,0 +1,12 @@
+import { Devices } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'MAC address generator',
+  path: '/mac-address-generator',
+  description: 'Enter the quantity and prefix. MAC addresses will be generated in your chosen case (uppercase or lowercase)',
+  keywords: ['mac', 'address', 'generator', 'random', 'prefix'],
+  component: () => import('./mac-address-generator.vue'),
+  icon: Devices,
+  createdAt: new Date('2023-11-31'),
+});
--- a/src/tools/mac-address-generator/mac-address-generator.e2e.spec.ts
+++ b/src/tools/mac-address-generator/mac-address-generator.e2e.spec.ts
@@ -0,0 +1,11 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('Tool - MAC address generator', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/mac-address-generator');
+  });
+
+  test('Has correct title', async ({ page }) => {
+    await expect(page).toHaveTitle('MAC address generator - IT Tools');
+  });
+});
--- a/src/tools/mac-address-generator/mac-address-generator.vue
+++ b/src/tools/mac-address-generator/mac-address-generator.vue
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import _ from 'lodash';
+import { generateRandomMacAddress } from './mac-adress-generator.models';
+import { computedRefreshable } from '@/composable/computedRefreshable';
+import { useCopy } from '@/composable/copy';
+import { usePartialMacAddressValidation } from '@/utils/macAddress';
+
+const amount = useStorage('mac-address-generator-amount', 1);
+const macAddressPrefix = useStorage('mac-address-generator-prefix', '64:16:7F');
+
+const prefixValidation = usePartialMacAddressValidation(macAddressPrefix);
+
+const casesTransformers = [
+  { label: 'Uppercase', value: (value: string) => value.toUpperCase() },
+  { label: 'Lowercase', value: (value: string) => value.toLowerCase() },
+];
+const caseTransformer = ref(casesTransformers[0].value);
+
+const separators = [
+  {
+    label: ':',
+    value: ':',
+  },
+  {
+    label: '-',
+    value: '-',
+  },
+  {
+    label: '.',
+    value: '.',
+  },
+  {
+    label: 'None',
+    value: '',
+  },
+];
+const separator = useStorage('mac-address-generator-separator', separators[0].value);
+
+const [macAddresses, refreshMacAddresses] = computedRefreshable(() => {
+  if (!prefixValidation.isValid) {
+    return '';
+  }
+
+  const ids = _.times(amount.value, () => caseTransformer.value(generateRandomMacAddress({
+    prefix: macAddressPrefix.value,
+    separator: separator.value,
+  })));
+  return ids.join('\n');
+});
+
+const { copy } = useCopy({ source: macAddresses, text: 'MAC addresses copied to the clipboard' });
+</script>
+
+<template>
+  <div flex flex-col justify-center gap-2>
+    <div flex items-center>
+      <label w-150px pr-12px text-right> Quantity:</label>
+      <n-input-number v-model:value="amount" min="1" max="100" flex-1 />
+    </div>
+
+    <c-input-text
+      v-model:value="macAddressPrefix"
+      label="MAC address prefix:"
+      placeholder="Set a prefix, e.g. 64:16:7F"
+      clearable
+      label-position="left"
+      spellcheck="false"
+      :validation="prefixValidation"
+      raw-text
+      label-width="150px"
+      label-align="right"
+    />
+
+    <c-buttons-select
+      v-model:value="caseTransformer"
+      :options="casesTransformers"
+      label="Case:"
+      label-width="150px"
+      label-align="right"
+    />
+
+    <c-buttons-select
+      v-model:value="separator"
+      :options="separators"
+      label="Separator:"
+      label-width="150px"
+      label-align="right"
+    />
+
+    <c-card mt-5 flex data-test-id="ulids">
+      <pre m-0 m-x-auto>{{ macAddresses }}</pre>
+    </c-card>
+
+    <div flex justify-center gap-2>
+      <c-button data-test-id="refresh" @click="refreshMacAddresses()">
+        Refresh
+      </c-button>
+      <c-button @click="copy()">
+        Copy
+      </c-button>
+    </div>
+  </div>
+</template>
--- a/src/tools/mac-address-generator/mac-adress-generator.models.test.ts
+++ b/src/tools/mac-address-generator/mac-adress-generator.models.test.ts
@@ -0,0 +1,43 @@
+import { describe, expect, it } from 'vitest';
+import { generateRandomMacAddress, splitPrefix } from './mac-adress-generator.models';
+
+describe('mac-adress-generator models', () => {
+  describe('splitPrefix', () => {
+    it('a mac address prefix is splitted around non hex characters', () => {
+      expect(splitPrefix('')).toEqual([]);
+      expect(splitPrefix('01')).toEqual(['01']);
+      expect(splitPrefix('01:')).toEqual(['01']);
+      expect(splitPrefix('01:23')).toEqual(['01', '23']);
+      expect(splitPrefix('01-23')).toEqual(['01', '23']);
+    });
+
+    it('when a prefix contains only hex characters, they are grouped by 2', () => {
+      expect(splitPrefix('0123')).toEqual(['01', '23']);
+      expect(splitPrefix('012345')).toEqual(['01', '23', '45']);
+      expect(splitPrefix('0123456')).toEqual(['01', '23', '45', '06']);
+    });
+  });
+
+  describe('generateRandomMacAddress', () => {
+    const createRandomByteGenerator = () => {
+      let i = 0;
+      return () => (i++).toString(16).padStart(2, '0');
+    };
+
+    it('generates a random mac address', () => {
+      expect(generateRandomMacAddress({ getRandomByte: createRandomByteGenerator() })).toBe('00:01:02:03:04:05');
+    });
+
+    it('generates a random mac address with a prefix', () => {
+      expect(generateRandomMacAddress({ prefix: 'ff:ee:aa', getRandomByte: createRandomByteGenerator() })).toBe('ff:ee:aa:00:01:02');
+      expect(generateRandomMacAddress({ prefix: 'ff:ee:a', getRandomByte: createRandomByteGenerator() })).toBe('ff:ee:0a:00:01:02');
+    });
+
+    it('generates a random mac address with a prefix and a different separator', () => {
+      expect(generateRandomMacAddress({ prefix: 'ff-ee-aa', separator: '-', getRandomByte: createRandomByteGenerator() })).toBe('ff-ee-aa-00-01-02');
+      expect(generateRandomMacAddress({ prefix: 'ff:ee:aa', separator: '-', getRandomByte: createRandomByteGenerator() })).toBe('ff-ee-aa-00-01-02');
+      expect(generateRandomMacAddress({ prefix: 'ff-ee:aa', separator: '-', getRandomByte: createRandomByteGenerator() })).toBe('ff-ee-aa-00-01-02');
+      expect(generateRandomMacAddress({ prefix: 'ff ee:aa', separator: '-', getRandomByte: createRandomByteGenerator() })).toBe('ff-ee-aa-00-01-02');
+    });
+  });
+});
--- a/src/tools/mac-address-generator/mac-adress-generator.models.ts
+++ b/src/tools/mac-address-generator/mac-adress-generator.models.ts
@@ -0,0 +1,18 @@
+import _ from 'lodash';
+
+export { splitPrefix, generateRandomMacAddress };
+
+function splitPrefix(prefix: string): string[] {
+  const base = prefix.match(/[^0-9a-f]/i) === null ? prefix.match(/.{1,2}/g) ?? [] : prefix.split(/[^0-9a-f]/i);
+
+  return base.filter(Boolean).map(byte => byte.padStart(2, '0'));
+}
+
+function generateRandomMacAddress({ prefix: rawPrefix = '', separator = ':', getRandomByte = () => _.random(0, 255).toString(16).padStart(2, '0') }: { prefix?: string; separator?: string; getRandomByte?: () => string } = {}) {
+  const prefix = splitPrefix(rawPrefix);
+
+  const randomBytes = _.times(6 - prefix.length, getRandomByte);
+  const bytes = [...prefix, ...randomBytes];
+
+  return bytes.join(separator);
+}
--- a/src/tools/mac-address-lookup/mac-address-lookup.vue
+++ b/src/tools/mac-address-lookup/mac-address-lookup.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import db from 'oui/oui.json';
+import db from 'oui-data';
 import { macAddressValidationRules } from '@/utils/macAddress';
 import { useCopy } from '@/composable/copy';

 const getVendorValue = (address: string) => address.trim().replace(/[.:-]/g, '').toUpperCase().substring(0, 6);

 const macAddress = ref('20:37:06:12:34:56');
-const details = computed<string | undefined>(() => db[getVendorValue(macAddress.value)]);
+const details = computed<string | undefined>(() => (db as Record<string, string>)[getVendorValue(macAddress.value)]);

-const { copy } = useCopy({ source: details, text: 'Vendor info copied to the clipboard' });
+const { copy } = useCopy({ source: () => details.value ?? '', text: 'Vendor info copied to the clipboard' });
 </script>

 <template>
--- a/src/tools/mac-address-lookup/oui.d.ts
+++ b/src/tools/mac-address-lookup/oui.d.ts
@@ -1,4 +0,0 @@
-declare module 'oui/oui.json' {
-  const db: Record<string, string>;
-  export default db;
-}
--- a/src/tools/math-evaluator/index.ts
+++ b/src/tools/math-evaluator/index.ts
@@ -4,10 +4,13 @@ import { defineTool } from '../tool';
 export const tool = defineTool({
  name: 'Math evaluator',
  path: '/math-evaluator',
-  description: 'Evaluate math expression, like a calculator on steroid (you can use function like sqrt, cos, sin, abs, ...)',
+  description: 'A calculator for evaluating mathematical expressions. You can use functions like sqrt, cos, sin, abs, etc.',
  keywords: [
    'math',
    'evaluator',
+    'calculator',
+    'expression',
+    'abs',
    'acos',
    'acosh',
    'acot',
@@ -31,6 +34,7 @@ export const tool = defineTool({
    'sech',
    'sin',
    'sinh',
+    'sqrt',
    'tan',
    'tanh',
  ],
--- a/src/tools/math-evaluator/math-evaluator.vue
+++ b/src/tools/math-evaluator/math-evaluator.vue
@@ -16,6 +16,9 @@ const result = computed(() => withDefaultOnError(() => evaluate(expression.value
      multiline
      placeholder="Your math expression (ex: 2*sqrt(6) )..."
      raw-text
+      monospace
+      autofocus
+      autosize
    />

    <c-card v-if="result !== ''" title="Result " mt-5>
--- a/src/tools/numeronym-generator/index.ts
+++ b/src/tools/numeronym-generator/index.ts
@@ -0,0 +1,12 @@
+import { defineTool } from '../tool';
+import n7mIcon from './n7m-icon.svg?component';
+
+export const tool = defineTool({
+  name: 'Numeronym generator',
+  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.',
+  keywords: ['numeronym', 'generator', 'abbreviation', 'i18n', 'a11y', 'l10n'],
+  component: () => import('./numeronym-generator.vue'),
+  icon: n7mIcon,
+  createdAt: new Date('2023-11-05'),
+});
--- a/src/tools/numeronym-generator/n7m-icon.svg
+++ b/src/tools/numeronym-generator/n7m-icon.svg
@@ -0,0 +1,3 @@
+<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" >
+	<path id="n7m" fill="currentColor" aria-label="n7m"  d="m0.7 35v-16.7q1.1-0.2 2.8-0.5 1.7-0.3 4-0.3 2.1 0 3.4 0.6 1.4 0.5 2.2 1.6 0.8 1 1.1 2.5 0.4 1.4 0.4 3.2v9.6h-3.1v-9q0-1.6-0.2-2.7-0.2-1.1-0.7-1.8-0.5-0.7-1.4-1-0.8-0.3-2-0.3-0.5 0-1 0-0.6 0-1 0.1-0.5 0-0.9 0.1-0.4 0.1-0.5 0.1v14.5zm18.8 0h-3.2q0.2-2.6 0.9-5.5 0.8-3 1.9-5.7 1.1-2.8 2.4-5.1 1.3-2.4 2.5-3.9h-11.1v-2.7h14.6v2.6q-1.1 1.2-2.4 3.4-1.4 2.2-2.6 5-1.1 2.7-2 5.8-0.8 3-1 6.1zm6.6 0v-16.7q1.1-0.2 2.8-0.5 1.8-0.3 4-0.3 1.7 0 2.8 0.4 1.1 0.5 1.9 1.3 0.2-0.1 0.7-0.4 0.5-0.3 1.2-0.6 0.8-0.3 1.7-0.5 0.8-0.2 1.9-0.2 1.9 0 3.2 0.6 1.3 0.5 2 1.6 0.7 1 0.9 2.5 0.3 1.4 0.3 3.2v9.6h-3.1v-9q0-1.5-0.2-2.6-0.1-1.1-0.5-1.8-0.4-0.7-1.1-1.1-0.7-0.3-1.9-0.3-1.5 0-2.5 0.4-1 0.4-1.4 0.7 0.3 0.9 0.4 1.9 0.1 1 0.1 2.2v9.6h-3v-9q0-1.5-0.2-2.6-0.2-1.1-0.6-1.8-0.4-0.7-1.1-1.1-0.7-0.3-1.8-0.3-0.5 0-1 0-0.5 0-1 0.1-0.5 0-0.9 0.1-0.4 0.1-0.5 0.1v14.5z"/>
+</svg>
--- a/src/tools/numeronym-generator/numeronym-generator.e2e.spec.ts
+++ b/src/tools/numeronym-generator/numeronym-generator.e2e.spec.ts
@@ -0,0 +1,25 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('Tool - Numeronym generator', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/numeronym-generator');
+  });
+
+  test('Has correct title', async ({ page }) => {
+    await expect(page).toHaveTitle('Numeronym generator - IT Tools');
+  });
+
+  test('a numeronym is generated when a word is entered', async ({ page }) => {
+    await page.getByTestId('word-input').fill('internationalization');
+    const numeronym = await page.getByTestId('numeronym').inputValue();
+
+    expect(numeronym).toEqual('i18n');
+  });
+
+  test('when a word has 3 letters or less, the numeronym is the word itself', async ({ page }) => {
+    await page.getByTestId('word-input').fill('abc');
+    const numeronym = await page.getByTestId('numeronym').inputValue();
+
+    expect(numeronym).toEqual('abc');
+  });
+});
--- a/src/tools/numeronym-generator/numeronym-generator.service.test.ts
+++ b/src/tools/numeronym-generator/numeronym-generator.service.test.ts
@@ -0,0 +1,15 @@
+import { describe, expect, it } from 'vitest';
+import { generateNumeronym } from './numeronym-generator.service';
+
+describe('numeronym-generator service', () => {
+  describe('generateNumeronym', () => {
+    it('a numeronym of a word is the first letter, the number of letters between the first and the last letter, and the last letter', () => {
+      expect(generateNumeronym('internationalization')).toBe('i18n');
+      expect(generateNumeronym('accessibility')).toBe('a11y');
+      expect(generateNumeronym('localization')).toBe('l10n');
+    });
+    it('a numeronym of a word with 3 letters is the word itself', () => {
+      expect(generateNumeronym('abc')).toBe('abc');
+    });
+  });
+});
--- a/src/tools/numeronym-generator/numeronym-generator.service.ts
+++ b/src/tools/numeronym-generator/numeronym-generator.service.ts
@@ -0,0 +1,11 @@
+export { generateNumeronym };
+
+function generateNumeronym(word: string): string {
+  const wordLength = word.length;
+
+  if (wordLength <= 3) {
+    return word;
+  }
+
+  return `${word.at(0)}${wordLength - 2}${word.at(-1)}`;
+}
--- a/src/tools/numeronym-generator/numeronym-generator.vue
+++ b/src/tools/numeronym-generator/numeronym-generator.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { generateNumeronym } from './numeronym-generator.service';
+
+const word = ref('');
+
+const numeronym = computed(() => generateNumeronym(word.value));
+</script>
+
+<template>
+  <div flex flex-col items-center gap-4>
+    <c-input-text v-model:value="word" placeholder="Enter a word, e.g. 'internationalization'" size="large" clearable test-id="word-input" />
+
+    <icon-mdi-arrow-down text-30px />
+
+    <input-copyable :value="numeronym" size="large" readonly placeholder="Your numeronym will be here, e.g. 'i18n'" test-id="numeronym" />
+  </div>
+</template>
--- a/src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue
+++ b/src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue
@@ -61,19 +61,16 @@ const secretValidationRules = [
      :validation-rules="secretValidationRules"
    >
      <template #suffix>
-        <n-tooltip trigger="hover">
-          <template #trigger>
-            <c-button circle variant="text" size="small" @click="refreshSecret">
-              <icon-mdi-refresh />
-            </c-button>
-          </template>
-          Generate secret token
-        </n-tooltip>
+        <c-tooltip tooltip="Generate a new random secret">
+          <c-button circle variant="text" size="small" @click="refreshSecret">
+            <icon-mdi-refresh />
+          </c-button>
+        </c-tooltip>
      </template>
    </c-input-text>

    <div>
-      <TokenDisplay :tokens="tokens" style="margin-top: 2px" />
+      <TokenDisplay :tokens="tokens" />

      <n-progress :percentage="(100 * interval) / 30" :color="theme.primaryColor" :show-indicator="false" />
      <div style="text-align: center">
--- a/src/tools/otp-code-generator-and-validator/otp.service.ts
+++ b/src/tools/otp-code-generator-and-validator/otp.service.ts
@@ -15,7 +15,7 @@ export {
 };

 function hexToBytes(hex: string) {
-  return (hex.match(/.{1,2}/g) ?? []).map(char => parseInt(char, 16));
+  return (hex.match(/.{1,2}/g) ?? []).map(char => Number.parseInt(char, 16));
 }

 function computeHMACSha1(message: string, key: string) {
@@ -32,7 +32,7 @@ function base32toHex(base32: string) {
    .map(value => base32Chars.indexOf(value).toString(2).padStart(5, '0'))
    .join('');

-  const hex = (bits.match(/.{1,8}/g) ?? []).map(chunk => parseInt(chunk, 2).toString(16).padStart(2, '0')).join('');
+  const hex = (bits.match(/.{1,8}/g) ?? []).map(chunk => Number.parseInt(chunk, 2).toString(16).padStart(2, '0')).join('');

  return hex;
 }
--- a/src/tools/otp-code-generator-and-validator/token-display.vue
+++ b/src/tools/otp-code-generator-and-validator/token-display.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import { useClipboard } from '@vueuse/core';
+import { useCopy } from '@/composable/copy';

 const props = defineProps<{ tokens: { previous: string; current: string; next: string } }>();
-const { copy: copyPrevious, copied: previousCopied } = useClipboard();
-const { copy: copyCurrent, copied: currentCopied } = useClipboard();
-const { copy: copyNext, copied: nextCopied } = useClipboard();
+const { copy: copyPrevious, isJustCopied: previousCopied } = useCopy({ createToast: false });
+const { copy: copyCurrent, isJustCopied: currentCopied } = useCopy({ createToast: false });
+const { copy: copyNext, isJustCopied: nextCopied } = useCopy({ createToast: false });

 const { tokens } = toRefs(props);
 </script>

 <template>
  <div>
-    <div class="labels" w-full flex items-center>
+    <div mb-5px w-full flex items-center>
      <div flex-1 text-left>
        Previous
      </div>
@@ -22,60 +22,24 @@ const { tokens } = toRefs(props);
        Next
      </div>
    </div>
-    <n-input-group>
-      <n-tooltip trigger="hover" placement="bottom">
-        <template #trigger>
-          <c-button important:h-12 data-test-id="previous-otp" @click.prevent="copyPrevious(tokens.previous)">
-            {{ tokens.previous }}
-          </c-button>
-        </template>
-        <div>{{ previousCopied ? 'Copied !' : 'Copy previous OTP' }}</div>
-      </n-tooltip>
-      <n-tooltip trigger="hover" placement="bottom">
-        <template #trigger>
-          <c-button
-            data-test-id="current-otp"
-            class="current-otp"
-            important:h-12
-            @click.prevent="copyCurrent(tokens.current)"
-          >
-            {{ tokens.current }}
-          </c-button>
-        </template>
-        <div>{{ currentCopied ? 'Copied !' : 'Copy current OTP' }}</div>
-      </n-tooltip>
-      <n-tooltip trigger="hover" placement="bottom">
-        <template #trigger>
-          <c-button important:h-12 data-test-id="next-otp" @click.prevent="copyNext(tokens.next)">
-            {{
-              tokens.next
-            }}
-          </c-button>
-        </template>
-        <div>{{ nextCopied ? 'Copied !' : 'Copy next OTP' }}</div>
-      </n-tooltip>
-    </n-input-group>
+    <div flex items-center>
+      <c-tooltip :tooltip="previousCopied ? 'Copied !' : 'Copy previous OTP'" position="bottom" flex-1>
+        <c-button data-test-id="previous-otp" w-full important:h-12 important:rounded-r-none important:font-mono @click.prevent="copyPrevious(tokens.previous)">
+          {{ tokens.previous }}
+        </c-button>
+      </c-tooltip>
+      <c-tooltip :tooltip="currentCopied ? 'Copied !' : 'Copy current OTP'" position="bottom" flex-1 flex-basis-5xl>
+        <c-button
+          data-test-id="current-otp" w-full important:border-x="1px solid gray op-40" important:h-12 important:rounded-0 important:text-22px @click.prevent="copyCurrent(tokens.current)"
+        >
+          {{ tokens.current }}
+        </c-button>
+      </c-tooltip>
+      <c-tooltip :tooltip="nextCopied ? 'Copied !' : 'Copy next OTP'" position="bottom" flex-1>
+        <c-button data-test-id="next-otp" w-full important:h-12 important:rounded-l-none @click.prevent="copyNext(tokens.next)">
+          {{ tokens.next }}
+        </c-button>
+      </c-tooltip>
+    </div>
  </div>
 </template>
-
-<style scoped lang="less">
-.current-otp {
-  font-size: 22px;
-  flex: 1 0 35% !important;
-}
-
-.n-button {
-  height: 45px;
-}
-
-.labels {
-  div {
-    padding: 0 2px 6px 2px;
-    line-height: 1.25;
-  }
-}
-
-.n-input-group > * {
-  flex: 1 0 0;
-}
-</style>
--- a/src/tools/password-strength-analyser/password-strength-analyser.e2e.spec.ts
+++ b/src/tools/password-strength-analyser/password-strength-analyser.e2e.spec.ts
@@ -14,6 +14,6 @@ test.describe('Tool - Password strength analyser', () => {

    const crackDuration = await page.getByTestId('crack-duration').textContent();

-    expect(crackDuration).toEqual('15,091 milleniums, 3 centurys');
+    expect(crackDuration).toEqual('15,091 millennia, 3 centuries');
  });
 });
--- a/src/tools/password-strength-analyser/password-strength-analyser.service.ts
+++ b/src/tools/password-strength-analyser/password-strength-analyser.service.ts
@@ -4,7 +4,7 @@ export { getPasswordCrackTimeEstimation, getCharsetLength };

 function prettifyExponentialNotation(exponentialNotation: number) {
  const [base, exponent] = exponentialNotation.toString().split('e');
-  const baseAsNumber = parseFloat(base);
+  const baseAsNumber = Number.parseFloat(base);
  const prettyBase = baseAsNumber % 1 === 0 ? baseAsNumber.toLocaleString() : baseAsNumber.toFixed(2);
  return exponent ? `${prettyBase}e${exponent}` : prettyBase;
 }
@@ -19,20 +19,20 @@ function getHumanFriendlyDuration({ seconds }: { seconds: number }) {
  }

  const timeUnits = [
-    { unit: 'millenium', secondsInUnit: 31536000000, format: prettifyExponentialNotation },
-    { unit: 'century', secondsInUnit: 3153600000 },
-    { unit: 'decade', secondsInUnit: 315360000 },
-    { unit: 'year', secondsInUnit: 31536000 },
-    { unit: 'month', secondsInUnit: 2592000 },
-    { unit: 'week', secondsInUnit: 604800 },
-    { unit: 'day', secondsInUnit: 86400 },
-    { unit: 'hour', secondsInUnit: 3600 },
-    { unit: 'minute', secondsInUnit: 60 },
-    { unit: 'second', secondsInUnit: 1 },
+    { unit: 'millenium', secondsInUnit: 31536000000, format: prettifyExponentialNotation, plural: 'millennia' },
+    { unit: 'century', secondsInUnit: 3153600000, plural: 'centuries' },
+    { unit: 'decade', secondsInUnit: 315360000, plural: 'decades' },
+    { unit: 'year', secondsInUnit: 31536000, plural: 'years' },
+    { unit: 'month', secondsInUnit: 2592000, plural: 'months' },
+    { unit: 'week', secondsInUnit: 604800, plural: 'weeks' },
+    { unit: 'day', secondsInUnit: 86400, plural: 'days' },
+    { unit: 'hour', secondsInUnit: 3600, plural: 'hours' },
+    { unit: 'minute', secondsInUnit: 60, plural: 'minutes' },
+    { unit: 'second', secondsInUnit: 1, plural: 'seconds' },
  ];

  return _.chain(timeUnits)
-    .map(({ unit, secondsInUnit, format = _.identity }) => {
+    .map(({ unit, secondsInUnit, plural, format = _.identity }) => {
      const quantity = Math.floor(seconds / secondsInUnit);
      seconds %= secondsInUnit;

@@ -41,7 +41,7 @@ function getHumanFriendlyDuration({ seconds }: { seconds: number }) {
      }

      const formattedQuantity = format(quantity);
-      return `${formattedQuantity} ${unit}${quantity > 1 ? 's' : ''}`;
+      return `${formattedQuantity} ${quantity > 1 ? plural : unit}`;
    })
    .compact()
    .take(2)
--- a/src/tools/pdf-signature-checker/components/pdf-signature-details.vue
+++ b/src/tools/pdf-signature-checker/components/pdf-signature-details.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import type { SignatureInfo } from '../pdf-signature-checker.types';
+
+const props = defineProps<{ signature: SignatureInfo }>();
+const { signature } = toRefs(props);
+
+const tableHeaders = {
+  validityPeriod: 'Validity period',
+  issuedBy: 'Issued by',
+  issuedTo: 'Issued to',
+  pemCertificate: 'PEM certificate',
+};
+
+const certs = computed(() => signature.value.meta.certs.map((certificate, index) => ({
+  ...certificate,
+  validityPeriod: {
+    notBefore: new Date(certificate.validityPeriod.notBefore).toLocaleString(),
+    notAfter: new Date(certificate.validityPeriod.notAfter).toLocaleString(),
+  },
+  certificateName: `Certificate ${index + 1}`,
+})),
+);
+</script>
+
+<template>
+  <div flex flex-col gap-2>
+    <c-table :data="certs" :headers="tableHeaders">
+      <template #validityPeriod="{ value }">
+        <c-key-value-list
+          :items="[{
+            label: 'Not before',
+            value: value.notBefore,
+          }, {
+            label: 'Not after',
+            value: value.notAfter,
+          }]"
+        />
+      </template>
+
+      <template #issuedBy="{ value }">
+        <c-key-value-list
+          :items="[{
+            label: 'Common name',
+            value: value.commonName,
+          }, {
+            label: 'Organization name',
+            value: value.organizationName,
+          }, {
+            label: 'Country name',
+            value: value.countryName,
+          }, {
+            label: 'Locality name',
+            value: value.localityName,
+          }, {
+            label: 'Organizational unit name',
+            value: value.organizationalUnitName,
+          }, {
+            label: 'State or province name',
+            value: value.stateOrProvinceName,
+          }]"
+        />
+      </template>
+
+      <template #issuedTo="{ value }">
+        <c-key-value-list
+          :items="[{
+            label: 'Common name',
+            value: value.commonName,
+          }, {
+            label: 'Organization name',
+            value: value.organizationName,
+          }, {
+            label: 'Country name',
+            value: value.countryName,
+          }, {
+            label: 'Locality name',
+            value: value.localityName,
+          }, {
+            label: 'Organizational unit name',
+            value: value.organizationalUnitName,
+          }, {
+            label: 'State or province name',
+            value: value.stateOrProvinceName,
+          }]"
+        />
+      </template>
+
+      <template #pemCertificate="{ value }">
+        <c-modal-value :value="value" label="View PEM cert">
+          <template #value>
+            <div break-all text-xs>
+              {{ value }}
+            </div>
+          </template>
+        </c-modal-value>
+      </template>
+    </c-table>
+  </div>
+</template>
--- a/src/tools/pdf-signature-checker/index.ts
+++ b/src/tools/pdf-signature-checker/index.ts
@@ -0,0 +1,12 @@
+import { defineTool } from '../tool';
+import FileCertIcon from '~icons/mdi/file-certificate-outline';
+
+export const tool = defineTool({
+  name: 'PDF signature checker',
+  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.',
+  keywords: ['pdf', 'signature', 'checker', 'verify', 'validate', 'sign'],
+  component: () => import('./pdf-signature-checker.vue'),
+  icon: FileCertIcon,
+  createdAt: new Date('2023-12-09'),
+});
--- a/src/tools/pdf-signature-checker/pdf-signature-checker.e2e.spec.ts
+++ b/src/tools/pdf-signature-checker/pdf-signature-checker.e2e.spec.ts
@@ -0,0 +1,11 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('Tool - Pdf signature checker', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/pdf-signature-checker');
+  });
+
+  test('Has correct title', async ({ page }) => {
+    await expect(page).toHaveTitle('PDF signature checker - IT Tools');
+  });
+});
--- a/src/tools/pdf-signature-checker/pdf-signature-checker.types.ts
+++ b/src/tools/pdf-signature-checker/pdf-signature-checker.types.ts
@@ -0,0 +1,39 @@
+export interface SignatureInfo {
+  verified: boolean
+  authenticity: boolean
+  integrity: boolean
+  expired: boolean
+  meta: {
+    certs: {
+      clientCertificate?: boolean
+      issuedBy: {
+        commonName: string
+        organizationalUnitName?: string
+        organizationName: string
+        countryName?: string
+        localityName?: string
+        stateOrProvinceName?: string
+      }
+      issuedTo: {
+        commonName: string
+        serialNumber?: string
+        organizationalUnitName?: string
+        organizationName: string
+        countryName?: string
+        localityName?: string
+        stateOrProvinceName?: string
+      }
+      validityPeriod: {
+        notBefore: string
+        notAfter: string
+      }
+      pemCertificate: string
+    }[]
+    signatureMeta: {
+      reason: string
+      contactInfo: string | null
+      location: string
+      name: string | null
+    }
+  }
+}
--- a/src/tools/pdf-signature-checker/pdf-signature-checker.vue
+++ b/src/tools/pdf-signature-checker/pdf-signature-checker.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import verifyPDF from 'pdf-signature-reader';
+import type { SignatureInfo } from './pdf-signature-checker.types';
+import { formatBytes } from '@/utils/convert';
+
+const signatures = ref<SignatureInfo[]>([]);
+const status = ref<'idle' | 'parsed' | 'error' | 'loading'>('idle');
+const file = ref<File | null>(null);
+
+async function onVerifyClicked(uploadedFile: File) {
+  file.value = uploadedFile;
+  const fileBuffer = await uploadedFile.arrayBuffer();
+
+  status.value = 'loading';
+  try {
+    const { signatures: parsedSignatures } = verifyPDF(fileBuffer);
+    signatures.value = parsedSignatures;
+    status.value = 'parsed';
+  }
+  catch (e) {
+    signatures.value = [];
+    status.value = 'error';
+  }
+}
+</script>
+
+<template>
+  <div style="flex: 0 0 100%">
+    <div mx-auto max-w-600px>
+      <c-file-upload title="Drag and drop a PDF file here, or click to select a file" accept=".pdf" @file-upload="onVerifyClicked" />
+
+      <c-card v-if="file" mt-4 flex gap-2>
+        <div font-bold>
+          {{ file.name }}
+        </div>
+
+        <div>
+          {{ formatBytes(file.size) }}
+        </div>
+      </c-card>
+
+      <div v-if="status === 'error'">
+        <c-alert mt-4>
+          No signatures found in the provided file.
+        </c-alert>
+      </div>
+    </div>
+  </div>
+
+  <div v-if="status === 'parsed' && signatures.length" style="flex: 0 0 100%" mt-5 flex flex-col gap-4>
+    <div v-for="(signature, index) of signatures" :key="index">
+      <div mb-2 font-bold>
+        Signature {{ index + 1 }} certificates :
+      </div>
+
+      <pdf-signature-details :signature="signature" />
+    </div>
+  </div>
+</template>
--- a/src/tools/roman-numeral-converter/roman-numeral-converter.vue
+++ b/src/tools/roman-numeral-converter/roman-numeral-converter.vue
@@ -36,7 +36,7 @@ const validationRoman = useValidation({
 });

 const { copy: copyRoman } = useCopy({ source: outputRoman, text: 'Roman number copied to the clipboard' });
-const { copy: copyArabic } = useCopy({ source: outputNumeral, text: 'Arabic number copied to the clipboard' });
+const { copy: copyArabic } = useCopy({ source: () => String(outputNumeral), text: 'Arabic number copied to the clipboard' });
 </script>

 <template>
--- a/src/tools/sql-prettify/sql-prettify.vue
+++ b/src/tools/sql-prettify/sql-prettify.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { type FormatFnOptions, format as formatSQL } from 'sql-formatter';
+import { type FormatOptionsWithLanguage, format as formatSQL } from 'sql-formatter';
 import TextareaCopyable from '@/components/TextareaCopyable.vue';
 import { useStyleStore } from '@/stores/style.store';

 const inputElement = ref<HTMLElement>();
 const styleStore = useStyleStore();
-const config = reactive<Partial<FormatFnOptions>>({
+const config = reactive<FormatOptionsWithLanguage>({
  keywordCase: 'upper',
  useTabs: false,
  language: 'sql',
--- a/src/tools/string-obfuscator/index.ts
+++ b/src/tools/string-obfuscator/index.ts
@@ -0,0 +1,12 @@
+import { EyeOff } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'String obfuscator',
+  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.',
+  keywords: ['string', 'obfuscator', 'secret', 'token', 'hide', 'obscure', 'mask', 'masking'],
+  component: () => import('./string-obfuscator.vue'),
+  icon: EyeOff,
+  createdAt: new Date('2023-08-16'),
+});
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Corentin Thomasset	670f735501	chore(version): release 2023.12.21-5ed3693	2023-12-21 08:45:28 +01:00
Corentin Thomasset	a29ad66809	docs(changelog): update changelog for 2023.12.21-5ed3693	2023-12-21 08:45:27 +01:00
Markus Blaschke	5ed36935c7	fix(jwt-parser): jwt claim array support (#799 ) fixes support of claim array values (was shown "[Object]" before) Signed-off-by: Markus Blaschke <mblaschke82@gmail.com>	2023-12-12 14:04:19 +01:00
Isaiah	80e46c9292	fix(camera-recorder): stop camera on navigation (#782 ) * Stopping camera when user switches to another page * Missing ;	2023-11-29 13:58:07 +01:00
Richard "EpicKitty" Bowey	7a70dbbe0c	fix(doc): updated create new tool command in readme (#762 )	2023-11-22 20:27:46 +01:00
lzb16	2e56641398	feat(i18n): improve chinese i18n (#757 )	2023-11-16 18:27:51 +01:00
lzb16	a1037cf8f1	feat(i18n): add tooltip and favoriteButton i18n (#756 )	2023-11-16 08:20:42 +00:00
renovate[bot]	0fe9a20329	chore(deps): switched from oui to oui-data for mac address lookup (#693 ) * fix(deps): update dependency oui to v13 * chore(deps): switched from oui to oui-data for mac address lookup --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Corentin Thomasset <corentin.thomasset74@gmail.com>	2023-11-14 23:44:23 +00:00
renovate[bot]	2e396d8776	chore(deps): update unocss monorepo to ^0.57.0 (#638 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2023-11-15 00:19:09 +01:00
Corentin THOMASSET	bd3edcb528	refactor(about, i18n): improved i18n dx with markdown (#753 )	2023-11-14 23:15:41 +00:00
Corentin THOMASSET	de1ee69ef9	refactor(token, i18n): complete fr translation (#752 )	2023-11-14 23:14:05 +00:00
Gary	8f99eb6017	feat(i18n): add Chinese translation base (#718 ) * Create zh_CN.yml * rename * Update zh.yml * Update zh.yml * Update zh.yml * Update zh.yml * Update zh.yml	2023-11-15 00:09:36 +01:00
Corentin THOMASSET	38586caab7	refactor(uuid generator): uuid version picker (#751 )	2023-11-13 21:38:01 +00:00
Corentin THOMASSET	043e4f0a08	fix(base64-file-converter): fix downloading of index.html content without data preambula (#750 ) * fix(base64-file-converter): fix downloading of index.html content without data preambula * feat(base64-file-converter): infer mime type from base64 signature --------- Co-authored-by: akharlov <harl_aa@skbkontur.ru>	2023-11-13 10:44:23 +00:00
Corentin THOMASSET	ca43a25569	refactor(case converter): no split on lowercase, uppercase and mocking case (#748 )	2023-11-13 00:00:55 +00:00
Corentin THOMASSET	7fe47b3be4	refactor(ui): replaced legacy n-upload with c-file-upload (#747 )	2023-11-13 00:56:51 +01:00
Corentin THOMASSET	16ffe6b5c9	refactor(token): added password in token generator keywords (#746 )	2023-11-12 22:54:13 +00:00
Corentin THOMASSET	478192065e	feat(new tool): pdf signature checker (#745 )	2023-11-12 22:22:41 +00:00
Corentin THOMASSET	205e360400	fix(docker): rollback armv7 in docker releases (#741 )	2023-11-09 13:33:19 +00:00
Steltek	821cbea2bf	fix(eta): corrected example (#737 )	2023-11-08 19:56:58 +01:00
Oceansdeep7	093ff311fd	refactor(bcrypt): fix input label align (#721 ) Co-authored-by: robin.li <robin.li@webeye.com>	2023-11-07 09:10:52 +01:00
Corentin THOMASSET	e07e2ae5bc	feat(new tool): numeronym generator (#729 )	2023-11-05 21:59:31 +00:00
Corentin THOMASSET	fe1de8c5c9	chore(docker): added armv7 plateform for docker releases (#722 )	2023-11-03 08:06:11 +00:00
Corentin Thomasset	b2614990e3	chore(version): release 2023.11.02-7d94e11	2023-11-02 09:11:26 +01:00
Corentin Thomasset	79646375f3	docs(changelog): update changelog for 2023.11.02-7d94e11	2023-11-02 09:11:26 +01:00
Andrii Bratanin	7d94e11cee	fix(dockerfile): revert replacement of nginx image with non-privileged one (#716 ) Fixes https://github.com/CorentinTh/it-tools/issues/714	2023-11-02 09:10:13 +01:00
swishkin	e87f4b1837	refactor(math-evaluator): improved description Improved description.	2023-11-01 23:07:51 +01:00
Corentin THOMASSET	e86fd96ae3	feat(i18n): language selector (#710 )	2023-11-01 15:38:19 +01:00
Corentin THOMASSET	58de8970f5	refactor(math-evaluator): improved search and UX (#713 ) * refactor(math-evaluator): added keywords for search * refactor(math-evaluator): improved input	2023-11-01 14:23:46 +00:00
Corentin THOMASSET	02b0d0d1a1	fix(encryption): alert on decryption error (#711 ) * update(c-alert): Add variant 'error' * fix(encryption): Alert decryption error (#652) * feat(c-alert): added title * refactor(composable): mutualized computedCatch --------- Co-authored-by: code2933 <code2933@outlook.com>	2023-11-01 10:11:51 +00:00
Corentin Thomasset	4d5a67d96d	chore(version): release 2023.11.01-e164afb	2023-11-01 10:02:22 +01:00
Corentin Thomasset	8174db9cf3	docs(changelog): update changelog for 2023.11.01-e164afb	2023-11-01 10:02:22 +01:00
Corentin THOMASSET	e164afb664	chore(deps): clean unused dependencies (#709 ) * chore(deps): removed unused dep randombytes * chore(deps): removed unused dep c8 * chore(deps): updated dep naive-ui	2023-10-31 21:00:23 +00:00
Corentin THOMASSET	d0136962b9	feat(command-palette): clear prompt on palette close (#708 )	2023-10-31 19:27:21 +00:00
Corentin THOMASSET	015c673e09	refactor(ui): better ui demo preview menu (#664 )	2023-10-31 17:49:36 +00:00
Corentin Thomasset	99b1eb944d	feat(command-palette): added about page in command palette	2023-10-31 18:26:16 +01:00
Istvan Olah	cc3425dc77	feat(new tool): random MAC address generator (#657 ) * #521 Random MAC address generator * refactor(mac-address-generator): improved ux * refactor(mac-address-generator): improved ux --------- Co-authored-by: Corentin THOMASSET <corentin.thomasset74@gmail.com>	2023-10-31 11:34:24 +00:00
Corentin THOMASSET	681f7bf644	feat(case-converter): added mocking case (#705 )	2023-10-31 09:52:01 +00:00
Corentin THOMASSET	f5eb7a8c49	feat(date-converter): added excel date time format (#704 )	2023-10-31 08:59:35 +00:00
Corentin THOMASSET	abb8335041	refactor(color-converter): improved color-converter UX (#701 )	2023-10-31 07:32:44 +00:00
Corentin THOMASSET	020e9cbe41	refactor(docker): improved docker config (#700 )	2023-10-30 17:11:16 +00:00
莫颓	02e68d3f56	feat(i18n): token generator (#688 )	2023-10-23 09:17:08 +02:00
莫颓	00562ed5e8	feat(i18n): home page (#687 ) (cherry picked from commit 9d39826078ceb929a5ca3b577f9f39449303c289)	2023-10-23 09:14:34 +02:00
renovate[bot]	4365226d01	chore(deps): update docker/setup-qemu-action action to v3 (#627 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2023-10-22 10:30:26 +02:00
renovate[bot]	57ecda1623	chore(deps): update docker/setup-buildx-action action to v3 (#626 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2023-10-22 10:30:16 +02:00
renovate[bot]	d8d7a3b9ab	chore(deps): update docker/login-action action to v3 (#625 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2023-10-22 10:30:04 +02:00
renovate[bot]	d36b18f193	chore(deps): update docker/build-push-action action to v5 (#624 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2023-10-22 10:29:05 +02:00
renovate[bot]	eea9f91276	chore(deps): update dependency node to v18.18.2 (#674 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2023-10-22 10:26:05 +02:00
莫颓	ebb4ec4165	feat(i18n): support for i18n in .ts files (#683 ) (cherry picked from commit 732313bfc32a514ef064ca0f90304ff05e2e7ef3)	2023-10-22 10:23:00 +02:00
莫颓	84a4a646f6	feat(i18n): tool card (#682 ) (cherry picked from commit 1d0a3904f72ab24364beda034d17cf6de9b5e959)	2023-10-22 08:21:10 +00:00
莫颓	a2b53c2e38	feat(i18n): about page (#680 ) (cherry picked from commit 605b84c16e0eec1a16e6133203e7810a68447607) Co-authored-by: Corentin THOMASSET <corentin.thomasset74@gmail.com>	2023-10-22 08:15:39 +00:00
莫颓	35563b8457	feat(i18n): 404 page (#679 )	2023-10-22 10:07:43 +02:00
Sellar	720201aa7b	fix(deps): fix issue on slugify (#593 ) (#673 )	2023-10-18 09:23:34 +02:00
Corentin THOMASSET	b2ad4f7a27	feat(new tool): text to ascii converter (#669 )	2023-10-15 22:57:47 +00:00
Corentin Thomasset	b408df82c1	refactor(c-table): added description on c-table for accessibility	2023-10-15 23:41:55 +02:00
Corentin THOMASSET	88b881880c	refactor(ci): reduced timeout in e2e (#666 )	2023-10-14 22:48:18 +00:00
Corentin THOMASSET	ee4c853b9f	refactor(ui): new c-table ui component (#665 )	2023-10-14 22:45:14 +00:00
Corentin THOMASSET	cbf58fdd28	refactor(ui): removed n-page-header component in user-agent parser (#663 )	2023-10-14 23:01:32 +02:00
Corentin THOMASSET	a757a5155a	refactor(ui): removed n-p components in about page (#662 )	2023-10-14 18:37:26 +02:00
Corentin THOMASSET	025f556023	refactor(ui): switched naive tooltip components to custom ones (#661 )	2023-10-14 16:24:54 +00:00
renovate[bot]	2d2dffb14a	chore(deps): update dependency node to v18.18.0 (#636 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2023-10-04 11:46:33 +02:00
Corentin THOMASSET	5c4d775e2d	feat(new tool): ULID generator (#623 )	2023-09-11 22:57:42 +00:00
Corentin THOMASSET	557b30426f	doc(readme): added contributors list (#622 )	2023-09-11 20:59:07 +00:00
renovate[bot]	4972159aa7	chore(deps): update actions/checkout action to v4 (#613 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2023-09-11 22:42:33 +02:00
renovate[bot]	e371ef702e	fix(deps): update dependency monaco-editor to ^0.43.0 (#620 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2023-09-11 22:40:42 +02:00
Simon Bordeyne	0eedce69a6	feat(new tool): add wifi qr code generator (#599 ) * (feat: new tool): add wifi qr code generator * Update src/tools/wifi-qr-code-generator/wifi-qr-code-generator.vue Co-authored-by: Corentin THOMASSET <corentin.thomasset74@gmail.com> * Update src/tools/wifi-qr-code-generator/index.ts Co-authored-by: Corentin THOMASSET <corentin.thomasset74@gmail.com> * remove naive UI grid * Update src/tools/wifi-qr-code-generator/index.ts --------- Co-authored-by: Corentin THOMASSET <corentin.thomasset74@gmail.com>	2023-09-06 07:46:40 +00:00
Mark Townsend	8a30b6bdb3	refactor(spelling): minor corrections to phrasing/spelling (#596 ) * Minor corrections to phrasing/spelling. * Corrected 'millennia'. * Corrected tests. --------- Co-authored-by: Corentin THOMASSET <corentin.thomasset74@gmail.com>	2023-09-04 14:51:04 +02:00
Corentin THOMASSET	233d5565f6	refactor(i18n): merge tools scoped locales with global ones (#612 )	2023-09-03 20:07:45 +00:00
Corentin THOMASSET	7ab9204e96	refactor(c-key-value-list): got rid of table for layout (#611 )	2023-09-03 16:12:22 +00:00
renovate[bot]	c7d4562d3b	fix(deps): update dependency sql-formatter to v13 (#606 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2023-09-03 16:51:12 +02:00
Corentin THOMASSET	18dd1400bd	refactor(CI): run e2e against built app and no longer vercel (#610 )	2023-09-03 14:28:19 +00:00
renovate[bot]	f035f485c0	chore(deps): update dependency unplugin-icons to ^0.17.0 (#609 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2023-09-03 16:16:01 +02:00
Anton Mosich	e18bae1fca	refactor(bcrypt): fix typo (#604 )	2023-09-01 16:30:51 +02:00
renovate[bot]	d1dff428d8	chore(deps): update dependency @intlify/unplugin-vue-i18n to ^0.13.0 (#597 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2023-09-01 10:14:50 +02:00
Corentin THOMASSET	3a63837d3d	feat(new tool): iban validation and parser (#591 )	2023-08-27 18:12:31 +00:00
Corentin THOMASSET	81bfe57cb8	feat(new tool): text diff and comparator (#588 ) * feat(new tool): text diff and comparator * chore(ci): increased memory in CI	2023-08-26 16:43:47 +02:00
renovate[bot]	a9cd91ca9c	chore(deps): update dependency @antfu/eslint-config to ^0.41.0 (#585 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2023-08-26 16:28:31 +02:00
Corentin THOMASSET	06c35472d3	doc(hosting): added cloudron in the other hosting solutions section (#589 )	2023-08-26 14:18:12 +00:00
renovate[bot]	f3e14fc18f	chore(deps): update dependency typescript to ~5.2.0 (#587 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2023-08-26 16:17:19 +02:00
Corentin Thomasset	2274766a8f	chore(version): release 2023.08.21-6f93cba	2023-08-22 01:02:24 +02:00
Corentin Thomasset	a346175d24	docs(changelog): update changelog for 2023.08.21-6f93cba	2023-08-22 01:02:24 +02:00
Corentin THOMASSET	6f93cba3da	feat(copy): support legacy copy to clipboard for older browser (#581 )	2023-08-21 23:00:20 +00:00
renovate[bot]	76b2761d62	chore(deps): switched to fucking typescript v5 (#501 ) * chore(deps): update dependency typescript to v5 * chore(deps): switched to fucking typescript v5 --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Corentin Thomasset <corentin.thomasset74@gmail.com>	2023-08-21 19:57:59 +00:00
renovate[bot]	6ff9a01cc8	chore(deps): update dependency @antfu/eslint-config to ^0.40.0 (#552 ) * chore(deps): update dependency @antfu/eslint-config to ^0.40.0 * chore(deps): updated eslint --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Corentin Thomasset <corentin.thomasset74@gmail.com>	2023-08-21 18:27:08 +00:00
renovate[bot]	a2b9b157e5	chore(deps): update dependency prettier to v3 (#564 ) * chore(deps): update dependency prettier to v3 * chore(deps): updated prettier --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Corentin Thomasset <corentin.thomasset74@gmail.com>	2023-08-21 18:02:54 +00:00
renovate[bot]	144f86e2dc	chore(deps): removed @typescript-eslint/parser (#563 ) * chore(deps): update dependency @typescript-eslint/parser to v6 * chore(deps): removed @typescript-eslint/parser --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Corentin Thomasset <corentin.thomasset74@gmail.com>	2023-08-21 17:18:04 +00:00
renovate[bot]	0f1f6590c5	chore(deps): removed ts-pattern (#565 ) * fix(deps): update dependency ts-pattern to v5 * chore(deps): removed ts-pattern --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Corentin Thomasset <corentin.thomasset74@gmail.com>	2023-08-21 17:06:09 +00:00
renovate[bot]	2bcb77a9f9	fix(deps): update dependency sql-formatter to v12 (#520 ) * fix(deps): update dependency sql-formatter to v12 * fix(sql-prettify): corrected types --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Corentin Thomasset <corentin.thomasset74@gmail.com>	2023-08-21 18:34:15 +02:00
Corentin THOMASSET	c58d6e3423	feat(new tool): string obfuscator (#575 )	2023-08-16 21:43:45 +00:00
@@ -1 +1 @@
 .17.1
 .18.2