chore(deps): updated minor deps version

.dockerignore

@@ -1,5 +0,0 @@
-node_modules
-playwright-report
-coverage
-dist
-test-results

.github/workflows/ci.yml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac # v4
+      - uses: actions/checkout@v3
       - run: corepack enable
       - uses: actions/setup-node@v3
         with:
@@ -31,4 +31,6 @@ jobs:
         run: pnpm typecheck
 
       - name: Build the app
+        env:
+          NODE_OPTIONS: --max-old-space-size=4096
         run: pnpm build

.github/workflows/codeql-analysis.yml

@@ -37,7 +37,7 @@ jobs:
 
     steps:
     - name: Checkout repository
-      uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac # v4
+      uses: actions/checkout@v3
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL

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

@@ -12,7 +12,7 @@ jobs:
     outputs:
       should_run: ${{ steps.should_run.outputs.should_run }}
     steps:
-      - uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac # v4
+      - uses: actions/checkout@v3
       - 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@3df4ab11eba7bda6032a0b82a6bb43b11571feac # v4
+      - uses: actions/checkout@v3
       - run: corepack enable
       - uses: actions/setup-node@v3
         with:
@@ -54,29 +54,29 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac # v4
+        uses: actions/checkout@v3
 
       - name: Login to GitHub Container Registry
-        uses: docker/login-action@v3
+        uses: docker/login-action@v2
         with:
           registry: ghcr.io
           username: ${{ github.repository_owner }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Login to Docker Hub
-        uses: docker/login-action@v3
+        uses: docker/login-action@v2
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
 
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
+        uses: docker/setup-qemu-action@v2
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
+        uses: docker/setup-buildx-action@v2
 
       - name: Build and push
-        uses: docker/build-push-action@v5
+        uses: docker/build-push-action@v4
         with:
           context: .
           file: ./Dockerfile

.github/workflows/e2e-tests.yml

@@ -1,18 +1,18 @@
 name: E2E tests
-on:
-  pull_request:
-  push:
-    branches:
-      - main
+on: [deployment_status]
+
 jobs:
   test:
-    timeout-minutes: 10
+    if: github.event.deployment_status.state == 'success'
+    timeout-minutes: 60
     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@3df4ab11eba7bda6032a0b82a6bb43b11571feac # v4
+      - uses: actions/checkout@v3
 
       - run: corepack enable
 
@@ -28,9 +28,6 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
-      - name: Build app
-        run: pnpm build
-
       - name: Restore Playwright browsers from cache
         uses: actions/cache@v3
         with:

.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@3df4ab11eba7bda6032a0b82a6bb43b11571feac # v4
+        uses: actions/checkout@v3
 
       - name: Login to GitHub Container Registry
-        uses: docker/login-action@v3
+        uses: docker/login-action@v2
         with:
           registry: ghcr.io
           username: ${{ github.repository_owner }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Login to Docker Hub
-        uses: docker/login-action@v3
+        uses: docker/login-action@v2
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
 
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
+        uses: docker/setup-qemu-action@v2
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
+        uses: docker/setup-buildx-action@v2
 
       - name: Build and push
-        uses: docker/build-push-action@v5
+        uses: docker/build-push-action@v4
         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@3df4ab11eba7bda6032a0b82a6bb43b11571feac # v4
+        uses: actions/checkout@v3
 
       - run: corepack enable
 

.nvmrc

@@ -1 +1 @@
-18.18.2
+18.17.1

CHANGELOG.md

@@ -2,109 +2,6 @@
 
 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

Dockerfile

@@ -1,12 +1,9 @@
 # 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
@@ -14,4 +11,4 @@ FROM nginx:stable-alpine AS production-stage
 COPY --from=build-stage /app/dist /usr/share/nginx/html
 COPY nginx.conf /etc/nginx/conf.d/default.conf
 EXPOSE 80
-CMD ["nginx", "-g", "daemon off;"]
+CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -100,25 +100,17 @@ 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:tool my-tool-name
+pnpm run script:create-new-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>
 

_templates/generator/ui-component/component.demo.ejs.t

@@ -1,6 +0,0 @@
----
-to: src/ui/<%= h.changeCase.param(name) %>/<%= h.changeCase.param(name) %>.demo.vue
----
-<template>
-  <<%= h.changeCase.param(name) %> />
-</template>

_templates/generator/ui-component/component.ejs.t

@@ -1,13 +0,0 @@
----
-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>

components.d.ts

@@ -25,30 +25,18 @@ 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']
@@ -57,12 +45,6 @@ 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']
     'DemoHome.page': typeof import('./src/ui/demo/demo-home.page.vue')['default']
     DemoWrapper: typeof import('./src/ui/demo/demo-wrapper.vue')['default']
@@ -86,12 +68,9 @@ 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']
     IconMdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
@@ -102,14 +81,11 @@ 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']
-    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']
-    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']
@@ -126,9 +102,7 @@ declare module '@vue/runtime-core' {
     JwtParser: typeof import('./src/tools/jwt-parser/jwt-parser.vue')['default']
     KeycodeInfo: typeof import('./src/tools/keycode-info/keycode-info.vue')['default']
     ListConverter: typeof import('./src/tools/list-converter/list-converter.vue')['default']
-    LocaleSelector: typeof import('./src/modules/i18n/components/locale-selector.vue')['default']
     LoremIpsumGenerator: typeof import('./src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue')['default']
-    MacAddressGenerator: typeof import('./src/tools/mac-address-generator/mac-address-generator.vue')['default']
     MacAddressLookup: typeof import('./src/tools/mac-address-lookup/mac-address-lookup.vue')['default']
     MathEvaluator: typeof import('./src/tools/math-evaluator/math-evaluator.vue')['default']
     MenuBar: typeof import('./src/tools/html-wysiwyg-editor/editor/menu-bar.vue')['default']
@@ -163,6 +137,8 @@ declare module '@vue/runtime-core' {
     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']
     NSlider: typeof import('naive-ui')['NSlider']
@@ -170,13 +146,11 @@ declare module '@vue/runtime-core' {
     NSwitch: typeof import('naive-ui')['NSwitch']
     NTable: typeof import('naive-ui')['NTable']
     NTag: typeof import('naive-ui')['NTag']
-    NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
+    NTooltip: typeof import('naive-ui')['NTooltip']
     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']
@@ -195,7 +169,6 @@ declare module '@vue/runtime-core' {
     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']
@@ -203,13 +176,11 @@ 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']

locales/en.yml

@@ -1,71 +1,4 @@
 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

locales/fr.yml

@@ -1,65 +1,3 @@
 home:
   categories:
-    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
+    newestTools: "Nouveaux outils"

locales/zh.yml

@@ -1,71 +0,0 @@
-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: '数据'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "it-tools",
-  "version": "2023.12.21-5ed3693",
+  "version": "2023.8.21-6f93cba",
   "description": "Collection of handy online tools for developers, with great UX. ",
   "keywords": [
     "productivity",
@@ -21,119 +21,113 @@
   },
   "scripts": {
     "dev": "vite",
-    "build": "vue-tsc --noEmit && NODE_OPTIONS=--max_old_space_size=4096 vite build",
+    "build": "vue-tsc --noEmit && 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:tool": "node scripts/create-tool.mjs",
-    "script:create:ui": "hygen generator ui-component",
+    "script:create-new-tool": "node scripts/create-tool.mjs",
     "release": "node ./scripts/release.mjs"
   },
   "dependencies": {
     "@it-tools/bip39": "^0.0.4",
     "@it-tools/oggen": "^1.3.0",
     "@sindresorhus/slugify": "^2.2.1",
-    "@tiptap/pm": "2.1.6",
-    "@tiptap/starter-kit": "2.1.6",
-    "@tiptap/vue-3": "2.0.3",
+    "@tiptap/pm": "^2.1.7",
+    "@tiptap/starter-kit": "^2.1.7",
+    "@tiptap/vue-3": "^2.1.7",
     "@vicons/material": "^0.12.0",
     "@vicons/tabler": "^0.12.0",
-    "@vueuse/core": "^10.3.0",
-    "@vueuse/head": "^1.0.0",
-    "@vueuse/router": "^10.0.0",
+    "@vueuse/core": "^10.4.0",
+    "@vueuse/head": "^1.3.1",
+    "@vueuse/router": "^10.4.0",
     "bcryptjs": "^2.4.3",
     "change-case": "^4.1.2",
     "colord": "^2.9.3",
     "composerize-ts": "^0.6.2",
     "country-code-lookup": "^0.1.0",
     "cron-validator": "^1.3.1",
-    "cronstrue": "^2.26.0",
+    "cronstrue": "^2.31.0",
     "crypto-js": "^4.1.1",
-    "date-fns": "^2.29.3",
-    "dompurify": "^3.0.6",
+    "date-fns": "^2.30.0",
     "emojilib": "^3.0.10",
     "figue": "^1.2.0",
     "fuse.js": "^6.6.2",
-    "highlight.js": "^11.7.0",
+    "highlight.js": "^11.8.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",
+    "libphonenumber-js": "^1.10.41",
     "lodash": "^4.17.21",
-    "marked": "^10.0.0",
-    "mathjs": "^11.9.1",
+    "mathjs": "^11.10.0",
     "mime-types": "^2.1.35",
-    "monaco-editor": "^0.43.0",
-    "naive-ui": "^2.35.0",
+    "monaco-editor": "^0.41.0",
+    "naive-ui": "^2.34.4",
     "netmask": "^2.0.2",
     "node-forge": "^1.3.1",
-    "oui-data": "^1.0.10",
-    "pdf-signature-reader": "^1.4.2",
-    "pinia": "^2.0.34",
+    "oui": "^12.0.71",
+    "pinia": "^2.1.6",
     "plausible-tracker": "^0.3.8",
-    "qrcode": "^1.5.1",
-    "sql-formatter": "^13.0.0",
+    "qrcode": "^1.5.3",
+    "randombytes": "^2.1.0",
+    "sql-formatter": "^12.2.4",
     "ua-parser-js": "^1.0.35",
-    "ulid": "^2.3.0",
     "unicode-emoji-json": "^0.4.0",
-    "unplugin-auto-import": "^0.16.4",
+    "unplugin-auto-import": "^0.16.6",
     "uuid": "^9.0.0",
     "vue": "^3.3.4",
     "vue-i18n": "^9.2.2",
-    "vue-router": "^4.1.6",
-    "vue-tsc": "^1.8.1",
-    "xml-formatter": "^3.3.2",
-    "yaml": "^2.2.1"
+    "vue-router": "^4.2.4",
+    "vue-tsc": "^1.8.8",
+    "xml-formatter": "^3.5.0",
+    "yaml": "^2.3.1"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.41.0",
-    "@iconify-json/mdi": "^1.1.50",
-    "@intlify/unplugin-vue-i18n": "^0.13.0",
-    "@playwright/test": "^1.32.3",
-    "@rushstack/eslint-patch": "^1.2.0",
-    "@tsconfig/node18": "^18.2.0",
+    "@iconify-json/mdi": "^1.1.54",
+    "@intlify/unplugin-vue-i18n": "^0.12.3",
+    "@playwright/test": "^1.37.1",
+    "@rushstack/eslint-patch": "^1.3.3",
+    "@tsconfig/node18": "^18.2.1",
     "@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/jsdom": "^21.1.2",
+    "@types/lodash": "^4.14.197",
     "@types/mime-types": "^2.1.1",
-    "@types/netmask": "^2.0.0",
-    "@types/node": "^18.15.11",
-    "@types/node-forge": "^1.3.2",
-    "@types/qrcode": "^1.5.0",
+    "@types/netmask": "^2.0.2",
+    "@types/node": "^18.17.11",
+    "@types/node-forge": "^1.3.4",
+    "@types/qrcode": "^1.5.1",
+    "@types/randombytes": "^2.0.0",
     "@types/ua-parser-js": "^0.7.36",
-    "@types/uuid": "^9.0.0",
-    "@unocss/eslint-config": "^0.57.0",
-    "@vitejs/plugin-vue": "^4.3.2",
+    "@types/uuid": "^9.0.2",
+    "@unocss/eslint-config": "^0.55.3",
+    "@vitejs/plugin-vue": "^4.3.3",
     "@vitejs/plugin-vue-jsx": "^3.0.2",
-    "@vue/compiler-sfc": "^3.2.47",
+    "@vue/compiler-sfc": "^3.3.4",
     "@vue/runtime-dom": "^3.3.4",
-    "@vue/test-utils": "^2.3.2",
+    "@vue/test-utils": "^2.4.1",
     "@vue/tsconfig": "^0.4.0",
-    "consola": "^3.0.2",
-    "eslint": "^8.47.0",
-    "hygen": "^6.2.11",
-    "jsdom": "^22.0.0",
-    "less": "^4.1.3",
-    "prettier": "^3.0.0",
-    "typescript": "~5.2.0",
-    "unocss": "^0.57.0",
+    "c8": "^8.0.1",
+    "consola": "^3.2.3",
+    "eslint": "^8.48.0",
+    "jsdom": "^22.1.0",
+    "less": "^4.2.0",
+    "prettier": "^3.0.2",
+    "typescript": "~5.2.2",
+    "unocss": "^0.55.3",
     "unocss-preset-scrollbar": "^0.2.1",
-    "unplugin-icons": "^0.17.0",
-    "unplugin-vue-components": "^0.25.0",
+    "unplugin-icons": "^0.16.5",
+    "unplugin-vue-components": "^0.25.1",
     "vite": "^4.4.9",
-    "vite-plugin-pwa": "^0.16.0",
-    "vite-plugin-vue-markdown": "^0.23.5",
+    "vite-plugin-pwa": "^0.16.4",
+    "vite-plugin-vue-markdown": "^0.23.8",
     "vite-svg-loader": "^4.0.0",
-    "vitest": "^0.34.0",
+    "vitest": "^0.34.3",
     "workbox-window": "^7.0.0",
-    "zx": "^7.2.1"
+    "zx": "^7.2.3"
   }
 }

playwright.config.ts

@@ -2,7 +2,6 @@ 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.
@@ -53,13 +52,13 @@ export default defineConfig({
 
   /* Run your local dev server before starting the tests */
 
-  ...(useWebServer
-    && {
-      webServer: {
-        command: 'npm run preview',
-        url: 'http://127.0.0.1:5050',
-        reuseExistingServer: !isCI,
-      },
-    }
-  ),
+  ...(isCI
+    ? {}
+    : {
+        webServer: {
+          command: 'npm run preview',
+          url: 'http://127.0.0.1:5050',
+          reuseExistingServer: true,
+        },
+      }),
 });

src/App.vue

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

src/components/CollapsibleToolMenu.vue

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

src/components/FavoriteButton.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { FavoriteFilled } from '@vicons/material';
+
 import { useToolStore } from '@/tools/tools.store';
 import type { Tool } from '@/tools/tools.types';
 
@@ -24,15 +26,18 @@ function toggleFavorite(event: MouseEvent) {
 </script>
 
 <template>
-  <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>
+  <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>
 </template>

src/components/InputCopyable.vue

@@ -13,11 +13,14 @@ const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : 'Copy to cli
 <template>
   <c-input-text v-model:value="value">
     <template #suffix>
-      <c-tooltip :tooltip="tooltipText">
-        <c-button circle variant="text" size="small" @click="copy()">
-          <icon-mdi-content-copy />
-        </c-button>
-      </c-tooltip>
+      <n-tooltip trigger="hover">
+        <template #trigger>
+          <c-button circle variant="text" size="small" @click="copy()">
+            <icon-mdi-content-copy />
+          </c-button>
+        </template>
+        {{ tooltipText }}
+      </n-tooltip>
     </template>
   </c-input-text>
 </template>

src/components/NavbarButtons.vue

@@ -7,43 +7,56 @@ const { isDarkTheme } = toRefs(styleStore);
 </script>
 
 <template>
-  <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://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.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"
+        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.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>
+  <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>
 </template>
 
 <style lang="less" scoped>

src/components/SpanCopyable.vue

@@ -11,7 +11,17 @@ const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : initialText)
 </script>
 
 <template>
-  <c-tooltip :tooltip="tooltipText">
-    <span cursor-pointer font-mono @click="copy()">{{ value }}</span>
-  </c-tooltip>
+  <n-tooltip trigger="hover">
+    <template #trigger>
+      <span class="value" @click="copy()">{{ value }}</span>
+    </template>
+    {{ tooltipText }}
+  </n-tooltip>
 </template>
+
+<style scoped lang="less">
+.value {
+  cursor: pointer;
+  font-family: monospace;
+}
+</style>

src/components/TextareaCopyable.vue

@@ -40,7 +40,7 @@ const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : copyMessage.
 
 <template>
   <div style="overflow-x: hidden; width: 100%">
-    <c-card relative>
+    <c-card class="result-card">
       <n-scrollbar
         x-scrollable
         trigger="none"
@@ -50,13 +50,16 @@ const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : copyMessage.
           <n-code :code="value" :language="language" :trim="false" data-test-id="area-content" />
         </n-config-provider>
       </n-scrollbar>
-      <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>
+      <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="copy()">
+              <n-icon size="22" :component="Copy" />
+            </c-button>
+          </div>
+        </template>
+        <span>{{ tooltipText }}</span>
+      </n-tooltip>
     </c-card>
     <div v-if="copyPlacement === 'outside'" mt-4 flex justify-center>
       <c-button @click="copy()">
@@ -71,4 +74,25 @@ const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : copyMessage.
   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>

src/components/ToolCard.vue

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

src/composable/computed/catchedComputed.ts

@@ -1,22 +0,0 @@
-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;
-}

src/composable/downloadBase64.test.ts

@@ -1,32 +0,0 @@
-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 });
-    });
-  });
-});

src/composable/downloadBase64.ts

@@ -1,60 +1,32 @@
 import { extension as getExtensionFromMime } from 'mime-types';
 import type { Ref } from 'vue';
-import _ from 'lodash';
 
-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,
+function getFileExtensionFromBase64({
+  base64String,
   defaultExtension = 'txt',
 }: {
-  mimeType: string | undefined
+  base64String: string
   defaultExtension?: string
 }) {
-  if (mimeType) {
-    return getExtensionFromMime(mimeType) ?? defaultExtension;
+  const hasMimeType = base64String.match(/data:(.*?);base64/i);
+
+  if (hasMimeType) {
+    return getExtensionFromMime(hasMimeType[1]) || defaultExtension;
   }
 
   return defaultExtension;
 }
 
-function useDownloadFileFromBase64({ source, filename }: { source: Ref<string>; filename?: string }) {
+export function useDownloadFileFromBase64({ source, filename }: { source: Ref<string>; filename?: string }) {
   return {
     download() {
-      if (source.value === '') {
+      const base64String = source.value;
+
+      if (base64String === '') {
         throw new Error('Base64 string is empty');
       }
 
-      const { mimeType } = getMimeTypeFromBase64({ base64String: source.value });
-      const base64String = mimeType
-        ? source.value
-        : `data:text/plain;base64,${source.value}`;
-
-      const cleanFileName = filename ?? `file.${getFileExtensionFromMimeType({ mimeType })}`;
+      const cleanFileName = filename ?? `file.${getFileExtensionFromBase64({ base64String })}`;
 
       const a = document.createElement('a');
       a.href = base64String;

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,14 +21,12 @@ 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[]>(() => [
-  ...(favoriteTools.value.length > 0 ? [{ name: t('tools.categories.favorite-tools'), components: favoriteTools.value }] : []),
-  ...toolsByCategory.value,
+  ...(toolStore.favoriteTools.length > 0 ? [{ name: 'Your favorite tools', components: toolStore.favoriteTools }] : []),
+  ...toolsByCategory,
 ]);
 </script>
 
@@ -43,18 +41,14 @@ const tools = computed<ToolCategory[]>(() => [
           </div>
           <div class="divider" />
           <div class="subtitle">
-            {{ $t('home.subtitle') }}
+            Handy tools for developers
           </div>
         </div>
       </RouterLink>
 
       <div class="sider-content">
-        <div v-if="styleStore.isSmallScreen" flex flex-col items-center>
-          <locale-selector w="90%" />
-
-          <div flex justify-center>
-            <NavbarButtons />
-          </div>
+        <div v-if="styleStore.isSmallScreen" flex justify-center>
+          <NavbarButtons />
         </div>
 
         <CollapsibleToolMenu :tools-by-category="tools" />
@@ -94,46 +88,48 @@ const tools = computed<ToolCategory[]>(() => [
         <c-button
           circle
           variant="text"
-          :aria-label="$t('home.toggleMenu')"
+          aria-label="Toggle menu"
           @click="styleStore.isMenuCollapsed = !styleStore.isMenuCollapsed"
         >
           <NIcon size="25" :component="Menu2" />
         </c-button>
 
-        <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>
+        <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.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>
+        <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>
 
         <command-palette />
 
-        <locale-selector v-if="!styleStore.isSmallScreen" />
-
         <div>
           <NavbarButtons v-if="!styleStore.isSmallScreen" />
         </div>
 
-        <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>
+        <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>
       </div>
       <slot />
     </template>

src/modules/command-palette/command-palette.store.ts

@@ -9,7 +9,6 @@ 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();
@@ -62,14 +61,6 @@ 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({

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

@@ -37,7 +37,6 @@ function open() {
 
 function close() {
   isModalOpen.value = false;
-  searchPrompt.value = '';
 }
 
 const selectedOptionIndex = ref(0);
@@ -116,7 +115,7 @@ function activateOption(option: PaletteOption) {
       <span flex items-center gap-3 op-40>
 
         <icon-mdi-search />
-        {{ $t('search.label') }}
+        Search...
 
         <span hidden flex-1 border border-current border-op-40 rounded border-solid px-5px py-3px sm:inline>
           {{ isMac ? 'Cmd' : 'Ctrl' }}&nbsp;+&nbsp;K

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

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

src/pages/404.page.vue

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

src/pages/About.vue

@@ -1,9 +1,85 @@
 <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>
-  <c-markdown :markdown="$t('about.content')" mx-auto mt-50px max-w-600px />
+  <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>
 </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>

src/pages/Home.page.vue

@@ -17,22 +17,21 @@ const { t } = useI18n();
     <div class="grid-wrapper">
       <n-grid v-if="config.showBanner" x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
         <n-gi>
-          <ColoredCard :title="$t('home.follow.title')" :icon="Heart">
-            {{ $t('home.follow.p1') }}
+          <ColoredCard title="You like it-tools?" :icon="Heart">
+            Give us a star on
             <a
               href="https://github.com/CorentinTh/it-tools"
               rel="noopener"
               target="_blank"
-              :aria-label="$t('home.follow.githubRepository')"
+              aria-label="IT-Tools' GitHub repository"
             >GitHub</a>
-            {{ $t('home.follow.p2') }}
+            or follow us on
             <a
               href="https://twitter.com/ittoolsdottech"
               rel="noopener"
               target="_blank"
-              :aria-label="$t('home.follow.twitterAccount')"
-            >Twitter</a>.
-            {{ $t('home.follow.thankYou') }}
+              aria-label="IT-Tools' Twitter account"
+            >Twitter</a>! Thank you
             <n-icon :component="Heart" />
           </ColoredCard>
         </n-gi>
@@ -40,7 +39,7 @@ const { t } = useI18n();
 
       <transition name="height">
         <div v-if="toolStore.favoriteTools.length > 0">
-          <n-h3>{{ $t('home.categories.favoriteTools') }}</n-h3>
+          <n-h3>Your favorite tools</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" />
@@ -50,7 +49,7 @@ const { t } = useI18n();
       </transition>
 
       <div v-if="toolStore.newTools.length > 0">
-        <n-h3>{{ t('home.categories.newestTools') }}</n-h3>
+        <n-h3>{{ t('home.categories.newestTools', 'Newest tools') }}</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" />
@@ -58,7 +57,7 @@ const { t } = useI18n();
         </n-grid>
       </div>
 
-      <n-h3>{{ $t('home.categories.allTools') }}</n-h3>
+      <n-h3>All the tools</n-h3>
       <n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
         <n-gi v-for="tool in toolStore.tools" :key="tool.name">
           <transition>

src/plugins/i18n.plugin.ts

@@ -1,22 +1,6 @@
-import type { Plugin } from 'vue';
+import type { App } from 'vue';
 import { createI18n } from 'vue-i18n';
-import baseMessages from '@intlify/unplugin-vue-i18n/messages';
-import _ from 'lodash';
-import { parse as parseYaml } from 'yaml';
-
-const i18nFiles = import.meta.glob('../tools/*/locales/**.yml', { as: 'raw' });
-
-const messagesByTools = await Promise.all(_.map(i18nFiles, async (fileDescriptor, path) => {
-  const [, locale] = path.match(/\.\/tools\/.*?\/locales\/(.*)\.ya?ml$/i) ?? [];
-  const content = parseYaml(await fileDescriptor());
-
-  return { [locale]: content };
-}));
-
-const messages = _.merge(
-  baseMessages,
-  _.merge({}, ...messagesByTools),
-);
+import messages from '@intlify/unplugin-vue-i18n/messages';
 
 const i18n = createI18n({
   legacy: false,
@@ -24,14 +8,8 @@ const i18n = createI18n({
   messages,
 });
 
-export const i18nPlugin: Plugin = {
-  install: (app) => {
+export const i18nPlugin = {
+  install: (app: 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;
-};

src/shims.d.ts

@@ -32,10 +32,4 @@ declare module 'unicode-emoji-json' {
   }>;
   
   export default emoji;
-}
-
-declare module 'pdf-signature-reader' {
-  const verifySignature: (pdf: ArrayBuffer) => ({signatures: SignatureInfo[]});
-
-  export default verifySignature;
 }

src/tools/base64-file-converter/base64-file-converter.vue

@@ -1,5 +1,7 @@
 <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';
@@ -31,12 +33,14 @@ 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) {
+async function onUpload({ file: { file } }: { file: UploadFileInfo }) {
   if (file) {
+    fileList.value = [];
     fileInput.value = file;
   }
 }
@@ -61,8 +65,18 @@ async function onUpload(file: File) {
   </c-card>
 
   <c-card title="File to base64">
-    <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 />
+    <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 />
 
     <div flex justify-center>
       <c-button @click="copyFileBase64()">

src/tools/bcrypt/bcrypt.vue

@@ -23,7 +23,6 @@ const compareMatch = computed(() => compareSync(compareString.value, compareHash
       raw-text
       label="Your string: "
       label-position="left"
-      label-align="right"
       label-width="120px"
       mb-2
     />
@@ -46,7 +45,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 hash to compare..." raw-text />
+        <c-input-text v-model:value="compareHash" placeholder="Your hahs 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 }">

src/tools/benchmark-builder/benchmark-builder.vue

@@ -51,11 +51,11 @@ const results = computed(() => {
 const { copy } = useCopy({ createToast: false });
 
 const header = {
-  position: 'Position',
   title: 'Suite',
   size: 'Samples',
   mean: 'Mean',
   variance: 'Variance',
+  position: 'Position',
 };
 
 function copyAsMarkdown() {
@@ -131,8 +131,26 @@ function copyAsBulletList() {
         </c-button>
       </div>
 
-      <c-table :data="results" :headers="header" />
-
+      <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>
       <div mt-5 flex justify-center gap-3>
         <c-button @click="copyAsMarkdown()">
           Copy as markdown table

src/tools/benchmark-builder/dynamic-values.vue

@@ -39,11 +39,14 @@ function onInputEnter(index: number) {
         autofocus
         @keydown.enter="onInputEnter(index)"
       />
-      <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>
+      <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>
     </div>
 
     <c-button @click="addValue">

src/tools/camera-recorder/camera-recorder.vue

@@ -28,7 +28,6 @@ const permissionCannotBePrompted = ref(false);
 const {
   stream,
   start,
-  stop,
   enabled: isMediaStreamAvailable,
 } = useUserMedia({
   constraints: computed(() => ({
@@ -84,8 +83,6 @@ watchEffect(() => {
   }
 });
 
-onBeforeUnmount(() => stop());
-
 async function requestPermissions() {
   try {
     await ensurePermissions();

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: input.value.toLocaleLowerCase(),
+    value: noCase(input.value, baseConfig).toLocaleLowerCase(),
   },
   {
     label: 'Uppercase:',
-    value: input.value.toLocaleUpperCase(),
+    value: noCase(input.value, baseConfig).toLocaleUpperCase(),
   },
   {
     label: 'Camelcase:',
@@ -73,13 +73,6 @@ 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 = {

src/tools/color-converter/color-converter.e2e.spec.ts

@@ -1,23 +0,0 @@
-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)');
-  });
-});

src/tools/color-converter/color-converter.models.test.ts

@@ -1,13 +0,0 @@
-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');
-    });
-  });
-});

src/tools/color-converter/color-converter.models.ts

@@ -1,52 +0,0 @@
-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),
-        },
-      ],
-    }),
-
-  };
-}

src/tools/color-converter/color-converter.vue

@@ -1,103 +1,87 @@
 <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 { buildColorFormat } from './color-converter.models';
+import InputCopyable from '../../components/InputCopyable.vue';
 
 extend([cmykPlugin, hwbPlugin, namesPlugin, lchPlugin]);
 
-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',
-  }),
-};
+const name = ref('');
+const hex = ref('#1ea54cff');
+const rgb = ref('');
+const hsl = ref('');
+const hwb = ref('');
+const cmyk = ref('');
+const lch = ref('');
 
-updateColorValue(colord('#1ea54c'));
+function onInputUpdated(value: string, omit: string) {
+  try {
+    const color = colord(value);
 
-function updateColorValue(value: Colord | undefined, omitLabel?: string) {
-  if (value === undefined) {
-    return;
-  }
-
-  if (!value.isValid()) {
-    return;
-  }
-
-  _.forEach(formats, ({ value: valueRef, format }, key) => {
-    if (key !== omitLabel) {
-      valueRef.value = format(value);
+    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();
+    }
+  }
+  catch {
+    //
+  }
 }
+
+onInputUpdated(hex.value, 'hex');
 </script>
 
 <template>
   <c-card>
-    <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-form label-width="100" label-placement="left">
+      <n-form-item label="color picker:">
         <n-color-picker
-          v-model:value="formats[key].value.value"
+          v-model:value="hex"
           placement="bottom-end"
-          @update:value="(v:string) => updateColorValue(parse(v), key)"
+          @update:value="(v: string) => onInputUpdated(v, 'hex')"
         />
       </n-form-item>
-    </template>
+      <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>
   </c-card>
 </template>

src/tools/crontab-generator/crontab-generator.vue

@@ -167,8 +167,34 @@ const cronValidationRules = [
         </div>
       </c-card>
     </div>
-
-    <c-table v-else :data="helpers" />
+    <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-card>
 </template>
 

src/tools/date-time-converter/date-time-converter.e2e.spec.ts

@@ -29,6 +29,5 @@ 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');
   });
 });

src/tools/date-time-converter/date-time-converter.models.test.ts

@@ -1,8 +1,5 @@
 import { describe, expect, test } from 'vitest';
 import {
-  dateToExcelFormat,
-  excelFormatToDate,
-  isExcelFormat,
   isISO8601DateTimeString,
   isISO9075DateString,
   isMongoObjectId,
@@ -142,39 +139,4 @@ 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'));
-    });
-  });
 });

src/tools/date-time-converter/date-time-converter.models.ts

@@ -9,9 +9,6 @@ export {
   isTimestamp,
   isUTCDateString,
   isMongoObjectId,
-  dateToExcelFormat,
-  excelFormatToDate,
-  isExcelFormat,
 };
 
 const ISO8601_REGEX
@@ -24,8 +21,6 @@ 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);
 }
@@ -38,8 +33,6 @@ 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;
@@ -52,11 +45,3 @@ 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);
-}

src/tools/date-time-converter/date-time-converter.vue

@@ -14,9 +14,6 @@ import {
 } from 'date-fns';
 import type { DateFormat, ToDateMapper } from './date-time-converter.types';
 import {
-  dateToExcelFormat,
-  excelFormatToDate,
-  isExcelFormat,
   isISO8601DateTimeString,
   isISO9075DateString,
   isMongoObjectId,
@@ -88,12 +85,6 @@ const formats: DateFormat[] = [
     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);
@@ -155,7 +146,7 @@ function formatDateUsingFormatter(formatter: (date: Date) => string, date?: Date
       <c-input-text
         v-model:value="inputDate"
         autofocus
-        placeholder="Put your date string here..."
+        placeholder="Put you date string here..."
         clearable
         test-id="date-time-converter-input"
         :validation="validation"

src/tools/encryption/encryption.vue

@@ -1,6 +1,5 @@
 <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 };
 
@@ -12,10 +11,9 @@ 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, decryptError] = computedCatch(() => algos[decryptAlgo.value].decrypt(decryptInput.value, decryptSecret.value).toString(enc.Utf8), {
-  defaultValue: '',
-  defaultErrorMessage: 'Unable to decrypt your text',
-});
+const decryptOutput = computed(() =>
+  algos[decryptAlgo.value].decrypt(decryptInput.value, decryptSecret.value).toString(enc.Utf8),
+);
 </script>
 
 <template>
@@ -65,11 +63,7 @@ const [decryptOutput, decryptError] = computedCatch(() => algos[decryptAlgo.valu
         />
       </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"

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 5 plates in 3 minutes and you have 500 plates to wash, it will take you 5
-      hours to wash them all.
+      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.
     </div>
     <n-divider />
     <div flex gap-2>

src/tools/html-wysiwyg-editor/editor/menu-bar-item.vue

@@ -6,9 +6,13 @@ const { icon, title, action, isActive } = toRefs(props);
 </script>
 
 <template>
-  <c-tooltip :tooltip="title">
-    <c-button circle variant="text" :type="isActive?.() ? 'primary' : 'default'" @click="action">
-      <n-icon :component="icon" />
-    </c-button>
-  </c-tooltip>
+  <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>
 </template>

src/tools/iban-validator-and-parser/iban-validator-and-parser.e2e.spec.ts

@@ -1,52 +0,0 @@
-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'],
-    ]);
-  });
-});

src/tools/iban-validator-and-parser/iban-validator-and-parser.service.ts

@@ -1,18 +0,0 @@
-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);
-}

src/tools/iban-validator-and-parser/iban-validator-and-parser.vue

@@ -1,73 +0,0 @@
-<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>

src/tools/iban-validator-and-parser/index.ts

@@ -1,12 +0,0 @@
-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'),
-});

src/tools/index.ts

@@ -1,12 +1,6 @@
 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';
@@ -61,7 +55,6 @@ 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';
@@ -79,7 +72,7 @@ import { tool as xmlFormatter } from './xml-formatter';
 export const toolsByCategory: ToolCategory[] = [
   {
     name: 'Crypto',
-    components: [tokenGenerator, hashText, bcrypt, uuidGenerator, ulidGenerator, cypher, bip39, hmacGenerator, rsaKeyPairGenerator, passwordStrengthAnalyser, pdfSignatureChecker],
+    components: [tokenGenerator, hashText, bcrypt, uuidGenerator, cypher, bip39, hmacGenerator, rsaKeyPairGenerator, passwordStrengthAnalyser],
   },
   {
     name: 'Converter',
@@ -92,7 +85,6 @@ export const toolsByCategory: ToolCategory[] = [
       colorConverter,
       caseConverter,
       textToNatoAlphabet,
-      textToBinary,
       yamlToJson,
       yamlToToml,
       jsonToYaml,
@@ -124,7 +116,7 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Images and videos',
-    components: [qrCodeGenerator, wifiQrCodeGenerator, svgPlaceholderGenerator, cameraRecorder],
+    components: [qrCodeGenerator, svgPlaceholderGenerator, cameraRecorder],
   },
   {
     name: 'Development',
@@ -143,7 +135,7 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Network',
-    components: [ipv4SubnetCalculator, ipv4AddressConverter, ipv4RangeExpander, macAddressLookup, macAddressGenerator, ipv6UlaGenerator],
+    components: [ipv4SubnetCalculator, ipv4AddressConverter, ipv4RangeExpander, macAddressLookup, ipv6UlaGenerator],
   },
   {
     name: 'Math',
@@ -155,11 +147,11 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Text',
-    components: [loremIpsumGenerator, textStatistics, emojiPicker, stringObfuscator, textDiff, numeronymGenerator],
+    components: [loremIpsumGenerator, textStatistics, emojiPicker, stringObfuscator, textDiff],
   },
   {
     name: 'Data',
-    components: [phoneParserAndFormatter, ibanValidatorAndParser],
+    components: [phoneParserAndFormatter],
   },
 ];
 

src/tools/jwt-parser/jwt-parser.service.ts

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

src/tools/mac-address-generator/index.ts

@@ -1,12 +0,0 @@
-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'),
-});

src/tools/mac-address-generator/mac-address-generator.e2e.spec.ts

@@ -1,11 +0,0 @@
-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');
-  });
-});

src/tools/mac-address-generator/mac-address-generator.vue

@@ -1,103 +0,0 @@
-<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>

src/tools/mac-address-generator/mac-adress-generator.models.test.ts

@@ -1,43 +0,0 @@
-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');
-    });
-  });
-});

src/tools/mac-address-generator/mac-adress-generator.models.ts

@@ -1,18 +0,0 @@
-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);
-}

src/tools/mac-address-lookup/mac-address-lookup.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import db from 'oui-data';
+import db from 'oui/oui.json';
 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 as Record<string, string>)[getVendorValue(macAddress.value)]);
+const details = computed<string | undefined>(() => db[getVendorValue(macAddress.value)]);
 
 const { copy } = useCopy({ source: () => details.value ?? '', text: 'Vendor info copied to the clipboard' });
 </script>

src/tools/mac-address-lookup/oui.d.ts

@@ -0,0 +1,4 @@
+declare module 'oui/oui.json' {
+  const db: Record<string, string>;
+  export default db;
+}

src/tools/math-evaluator/index.ts

@@ -4,13 +4,10 @@ import { defineTool } from '../tool';
 export const tool = defineTool({
   name: 'Math evaluator',
   path: '/math-evaluator',
-  description: 'A calculator for evaluating mathematical expressions. You can use functions like sqrt, cos, sin, abs, etc.',
+  description: 'Evaluate math expression, like a calculator on steroid (you can use function like sqrt, cos, sin, abs, ...)',
   keywords: [
     'math',
     'evaluator',
-    'calculator',
-    'expression',
-    'abs',
     'acos',
     'acosh',
     'acot',
@@ -34,7 +31,6 @@ export const tool = defineTool({
     'sech',
     'sin',
     'sinh',
-    'sqrt',
     'tan',
     'tanh',
   ],

src/tools/math-evaluator/math-evaluator.vue

@@ -16,9 +16,6 @@ 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>

src/tools/numeronym-generator/index.ts

@@ -1,12 +0,0 @@
-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'),
-});

src/tools/numeronym-generator/n7m-icon.svg

@@ -1,3 +0,0 @@
-<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>

src/tools/numeronym-generator/numeronym-generator.e2e.spec.ts

@@ -1,25 +0,0 @@
-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');
-  });
-});

src/tools/numeronym-generator/numeronym-generator.service.test.ts

@@ -1,15 +0,0 @@
-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');
-    });
-  });
-});

src/tools/numeronym-generator/numeronym-generator.service.ts

@@ -1,11 +0,0 @@
-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)}`;
-}

src/tools/numeronym-generator/numeronym-generator.vue

@@ -1,17 +0,0 @@
-<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>

src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue

@@ -61,16 +61,19 @@ const secretValidationRules = [
       :validation-rules="secretValidationRules"
     >
       <template #suffix>
-        <c-tooltip tooltip="Generate a new random secret">
-          <c-button circle variant="text" size="small" @click="refreshSecret">
-            <icon-mdi-refresh />
-          </c-button>
-        </c-tooltip>
+        <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>
       </template>
     </c-input-text>
 
     <div>
-      <TokenDisplay :tokens="tokens" />
+      <TokenDisplay :tokens="tokens" style="margin-top: 2px" />
 
       <n-progress :percentage="(100 * interval) / 30" :color="theme.primaryColor" :show-indicator="false" />
       <div style="text-align: center">

src/tools/otp-code-generator-and-validator/token-display.vue

@@ -11,7 +11,7 @@ const { tokens } = toRefs(props);
 
 <template>
   <div>
-    <div mb-5px w-full flex items-center>
+    <div class="labels" w-full flex items-center>
       <div flex-1 text-left>
         Previous
       </div>
@@ -22,24 +22,60 @@ const { tokens } = toRefs(props);
         Next
       </div>
     </div>
-    <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>
+    <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>
 </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>

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 millennia, 3 centuries');
+    expect(crackDuration).toEqual('15,091 milleniums, 3 centurys');
   });
 });

src/tools/password-strength-analyser/password-strength-analyser.service.ts

@@ -19,20 +19,20 @@ function getHumanFriendlyDuration({ seconds }: { seconds: number }) {
   }
 
   const timeUnits = [
-    { 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' },
+    { 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 },
   ];
 
   return _.chain(timeUnits)
-    .map(({ unit, secondsInUnit, plural, format = _.identity }) => {
+    .map(({ unit, secondsInUnit, 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} ${quantity > 1 ? plural : unit}`;
+      return `${formattedQuantity} ${unit}${quantity > 1 ? 's' : ''}`;
     })
     .compact()
     .take(2)

src/tools/pdf-signature-checker/components/pdf-signature-details.vue

@@ -1,99 +0,0 @@
-<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>

src/tools/pdf-signature-checker/index.ts

@@ -1,12 +0,0 @@
-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'),
-});

src/tools/pdf-signature-checker/pdf-signature-checker.e2e.spec.ts

@@ -1,11 +0,0 @@
-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');
-  });
-});

src/tools/pdf-signature-checker/pdf-signature-checker.types.ts

@@ -1,39 +0,0 @@
-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
-    }
-  }
-}

src/tools/pdf-signature-checker/pdf-signature-checker.vue

@@ -1,59 +0,0 @@
-<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>

src/tools/text-to-binary/index.ts

@@ -1,12 +0,0 @@
-import { Binary } from '@vicons/tabler';
-import { defineTool } from '../tool';
-
-export const tool = defineTool({
-  name: 'Text to ASCII binary',
-  path: '/text-to-binary',
-  description: 'Convert text to its ASCII binary representation and vice versa.',
-  keywords: ['text', 'to', 'binary', 'converter', 'encode', 'decode', 'ascii'],
-  component: () => import('./text-to-binary.vue'),
-  icon: Binary,
-  createdAt: new Date('2023-10-15'),
-});

src/tools/text-to-binary/text-to-binary.e2e.spec.ts

@@ -1,25 +0,0 @@
-import { expect, test } from '@playwright/test';
-
-test.describe('Tool - Text to ASCII binary', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto('/text-to-binary');
-  });
-
-  test('Has correct title', async ({ page }) => {
-    await expect(page).toHaveTitle('Text to ASCII binary - IT Tools');
-  });
-
-  test('Text to binary conversion', async ({ page }) => {
-    await page.getByTestId('text-to-binary-input').fill('it-tools');
-    const binary = await page.getByTestId('text-to-binary-output').inputValue();
-
-    expect(binary).toEqual('01101001 01110100 00101101 01110100 01101111 01101111 01101100 01110011');
-  });
-
-  test('Binary to text conversion', async ({ page }) => {
-    await page.getByTestId('binary-to-text-input').fill('01101001 01110100 00101101 01110100 01101111 01101111 01101100 01110011');
-    const text = await page.getByTestId('binary-to-text-output').inputValue();
-
-    expect(text).toEqual('it-tools');
-  });
-});

src/tools/text-to-binary/text-to-binary.models.test.ts

@@ -1,32 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { convertAsciiBinaryToText, convertTextToAsciiBinary } from './text-to-binary.models';
-
-describe('text-to-binary', () => {
-  describe('convertTextToAsciiBinary', () => {
-    it('a text string is converted to its ascii binary representation', () => {
-      expect(convertTextToAsciiBinary('A')).toBe('01000001');
-      expect(convertTextToAsciiBinary('hello')).toBe('01101000 01100101 01101100 01101100 01101111');
-      expect(convertTextToAsciiBinary('')).toBe('');
-    });
-    it('the separator between octets can be changed', () => {
-      expect(convertTextToAsciiBinary('hello', { separator: '' })).toBe('0110100001100101011011000110110001101111');
-    });
-  });
-
-  describe('convertAsciiBinaryToText', () => {
-    it('an ascii binary string is converted to its text representation', () => {
-      expect(convertAsciiBinaryToText('01101000 01100101 01101100 01101100 01101111')).toBe('hello');
-      expect(convertAsciiBinaryToText('01000001')).toBe('A');
-      expect(convertTextToAsciiBinary('')).toBe('');
-    });
-
-    it('the given binary string is cleaned before conversion', () => {
-      expect(convertAsciiBinaryToText('  01000 001garbage')).toBe('A');
-    });
-
-    it('throws an error if the given binary string as no complete octet', () => {
-      expect(() => convertAsciiBinaryToText('010000011')).toThrow('Invalid binary string');
-      expect(() => convertAsciiBinaryToText('1')).toThrow('Invalid binary string');
-    });
-  });
-});

src/tools/text-to-binary/text-to-binary.models.ts

@@ -1,22 +0,0 @@
-export { convertTextToAsciiBinary, convertAsciiBinaryToText };
-
-function convertTextToAsciiBinary(text: string, { separator = ' ' }: { separator?: string } = {}): string {
-  return text
-    .split('')
-    .map(char => char.charCodeAt(0).toString(2).padStart(8, '0'))
-    .join(separator);
-}
-
-function convertAsciiBinaryToText(binary: string): string {
-  const cleanBinary = binary.replace(/[^01]/g, '');
-
-  if (cleanBinary.length % 8) {
-    throw new Error('Invalid binary string');
-  }
-
-  return cleanBinary
-    .split(/(\d{8})/)
-    .filter(Boolean)
-    .map(binary => String.fromCharCode(Number.parseInt(binary, 2)))
-    .join('');
-}

src/tools/text-to-binary/text-to-binary.vue

@@ -1,42 +0,0 @@
-<script setup lang="ts">
-import { convertAsciiBinaryToText, convertTextToAsciiBinary } from './text-to-binary.models';
-import { withDefaultOnError } from '@/utils/defaults';
-import { useCopy } from '@/composable/copy';
-import { isNotThrowing } from '@/utils/boolean';
-
-const inputText = ref('');
-const binaryFromText = computed(() => convertTextToAsciiBinary(inputText.value));
-const { copy: copyBinary } = useCopy({ source: binaryFromText });
-
-const inputBinary = ref('');
-const textFromBinary = computed(() => withDefaultOnError(() => convertAsciiBinaryToText(inputBinary.value), ''));
-const inputBinaryValidationRules = [
-  {
-    validator: (value: string) => isNotThrowing(() => convertAsciiBinaryToText(value)),
-    message: 'Binary should be a valid ASCII binary string with multiples of 8 bits',
-  },
-];
-const { copy: copyText } = useCopy({ source: textFromBinary });
-</script>
-
-<template>
-  <c-card title="Text to ASCII binary">
-    <c-input-text v-model:value="inputText" multiline placeholder="e.g. 'Hello world'" label="Enter text to convert to binary" autosize autofocus raw-text test-id="text-to-binary-input" />
-    <c-input-text v-model:value="binaryFromText" label="Binary from your text" multiline raw-text readonly mt-2 placeholder="The binary representation of your text will be here" test-id="text-to-binary-output" />
-    <div mt-2 flex justify-center>
-      <c-button :disabled="!binaryFromText" @click="copyBinary()">
-        Copy binary to clipboard
-      </c-button>
-    </div>
-  </c-card>
-
-  <c-card title="ASCII binary to text">
-    <c-input-text v-model:value="inputBinary" multiline placeholder="e.g. '01001000 01100101 01101100 01101100 01101111'" label="Enter binary to convert to text" autosize raw-text :validation-rules="inputBinaryValidationRules" test-id="binary-to-text-input" />
-    <c-input-text v-model:value="textFromBinary" label="Text from your binary" multiline raw-text readonly mt-2 placeholder="The text representation of your binary will be here" test-id="binary-to-text-output" />
-    <div mt-2 flex justify-center>
-      <c-button :disabled="!textFromBinary" @click="copyText()">
-        Copy text to clipboard
-      </c-button>
-    </div>
-  </c-card>
-</template>

src/tools/token-generator/index.ts

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

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

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

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

@@ -1,16 +1,9 @@
 tools:
   token-generator:
     title: Générateur de token
-    description: >-
-      Génère une chaîne aléatoire avec les caractères que vous voulez, lettres
-      majuscules ou minuscules, chiffres et/ou symboles.
+    description: Génère une chaîne aléatoire avec les caractères que vous voulez, lettres majuscules ou minuscules, chiffres et/ou symboles.
+
     uppercase: Majuscules (ABC...)
     lowercase: Minuscules (abc...)
     numbers: Chiffres (123...)
     symbols: Symboles (!-;...)
-    button:
-      copy: Copier
-      refresh: Rafraichir
-    copied: Le token a été copié
-    length: Longueur
-    tokenPlaceholder: Le token...

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

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

src/tools/tools.store.ts

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

src/tools/ulid-generator/index.ts

@@ -1,12 +0,0 @@
-import { SortDescendingNumbers } from '@vicons/tabler';
-import { defineTool } from '../tool';
-
-export const tool = defineTool({
-  name: 'ULID generator',
-  path: '/ulid-generator',
-  description: 'Generate random Universally Unique Lexicographically Sortable Identifier (ULID).',
-  keywords: ['ulid', 'generator', 'random', 'id', 'alphanumeric', 'identity', 'token', 'string', 'identifier', 'unique'],
-  component: () => import('./ulid-generator.vue'),
-  icon: SortDescendingNumbers,
-  createdAt: new Date('2023-09-11'),
-});

src/tools/ulid-generator/ulid-generator.e2e.spec.ts

@@ -1,23 +0,0 @@
-import { expect, test } from '@playwright/test';
-
-const ULID_REGEX = /[0-9A-Z]{26}/;
-
-test.describe('Tool - ULID generator', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto('/ulid-generator');
-  });
-
-  test('Has correct title', async ({ page }) => {
-    await expect(page).toHaveTitle('ULID generator - IT Tools');
-  });
-
-  test('the refresh button generates a new ulid', async ({ page }) => {
-    const ulid = await page.getByTestId('ulids').textContent();
-    expect(ulid?.trim()).toMatch(ULID_REGEX);
-
-    await page.getByTestId('refresh').click();
-    const newUlid = await page.getByTestId('ulids').textContent();
-    expect(ulid?.trim()).not.toBe(newUlid?.trim());
-    expect(newUlid?.trim()).toMatch(ULID_REGEX);
-  });
-});

src/tools/ulid-generator/ulid-generator.vue

@@ -1,46 +0,0 @@
-<script setup lang="ts">
-import { ulid } from 'ulid';
-import _ from 'lodash';
-import { computedRefreshable } from '@/composable/computedRefreshable';
-import { useCopy } from '@/composable/copy';
-
-const amount = useStorage('ulid-generator-amount', 1);
-const formats = [{ label: 'Raw', value: 'raw' }, { label: 'JSON', value: 'json' }] as const;
-const format = useStorage<typeof formats[number]['value']>('ulid-generator-format', formats[0].value);
-
-const [ulids, refreshUlids] = computedRefreshable(() => {
-  const ids = _.times(amount.value, () => ulid());
-
-  if (format.value === 'json') {
-    return JSON.stringify(ids, null, 2);
-  }
-
-  return ids.join('\n');
-});
-
-const { copy } = useCopy({ source: ulids, text: 'ULIDs copied to the clipboard' });
-</script>
-
-<template>
-  <div flex flex-col justify-center gap-2>
-    <div flex items-center>
-      <label w-75px> Quantity:</label>
-      <n-input-number v-model:value="amount" min="1" max="100" flex-1 />
-    </div>
-
-    <c-buttons-select v-model:value="format" :options="formats" label="Format: " label-width="75px" />
-
-    <c-card mt-5 flex data-test-id="ulids">
-      <pre m-0 m-x-auto>{{ ulids }}</pre>
-    </c-card>
-
-    <div flex justify-center gap-2>
-      <c-button data-test-id="refresh" @click="refreshUlids()">
-        Refresh
-      </c-button>
-      <c-button @click="copy()">
-        Copy
-      </c-button>
-    </div>
-  </div>
-</template>