lint

added switch to toggle display of parsed values
show human readable values
2025-11-07 23:43:26 +00:00 · 2022-11-19 16:24:10 +01:00 · 2022-11-19 11:22:06 +01:00 · 2022-11-19 11:22:00 +01:00 · 2022-11-19 11:21:56 +01:00 · 2022-11-18 18:39:47 +01:00
345 changed files with 24801 additions and 20655 deletions
--- a/.eslintrc-auto-import.json
+++ b/.eslintrc-auto-import.json
@@ -1,291 +0,0 @@
 {
  "globals": {
    "Component": true,
    "ComponentPublicInstance": true,
    "ComputedRef": true,
    "EffectScope": true,
    "InjectionKey": true,
    "PropType": true,
    "Ref": true,
    "VNode": true,
    "asyncComputed": true,
    "autoResetRef": true,
    "computed": true,
    "computedAsync": true,
    "computedEager": true,
    "computedInject": true,
    "computedWithControl": true,
    "controlledComputed": true,
    "controlledRef": true,
    "createApp": true,
    "createEventHook": true,
    "createGlobalState": true,
    "createInjectionState": true,
    "createReactiveFn": true,
    "createReusableTemplate": true,
    "createSharedComposable": true,
    "createTemplatePromise": true,
    "createUnrefFn": true,
    "customRef": true,
    "debouncedRef": true,
    "debouncedWatch": true,
    "defineAsyncComponent": true,
    "defineComponent": true,
    "eagerComputed": true,
    "effectScope": true,
    "extendRef": true,
    "getCurrentInstance": true,
    "getCurrentScope": true,
    "h": true,
    "ignorableWatch": true,
    "inject": true,
    "isDefined": true,
    "isProxy": true,
    "isReactive": true,
    "isReadonly": true,
    "isRef": true,
    "makeDestructurable": true,
    "markRaw": true,
    "nextTick": true,
    "onActivated": true,
    "onBeforeMount": true,
    "onBeforeRouteLeave": true,
    "onBeforeRouteUpdate": true,
    "onBeforeUnmount": true,
    "onBeforeUpdate": true,
    "onClickOutside": true,
    "onDeactivated": true,
    "onErrorCaptured": true,
    "onKeyStroke": true,
    "onLongPress": true,
    "onMounted": true,
    "onRenderTracked": true,
    "onRenderTriggered": true,
    "onScopeDispose": true,
    "onServerPrefetch": true,
    "onStartTyping": true,
    "onUnmounted": true,
    "onUpdated": true,
    "pausableWatch": true,
    "provide": true,
    "reactify": true,
    "reactifyObject": true,
    "reactive": true,
    "reactiveComputed": true,
    "reactiveOmit": true,
    "reactivePick": true,
    "readonly": true,
    "ref": true,
    "refAutoReset": true,
    "refDebounced": true,
    "refDefault": true,
    "refThrottled": true,
    "refWithControl": true,
    "resolveComponent": true,
    "resolveRef": true,
    "resolveUnref": true,
    "shallowReactive": true,
    "shallowReadonly": true,
    "shallowRef": true,
    "syncRef": true,
    "syncRefs": true,
    "templateRef": true,
    "throttledRef": true,
    "throttledWatch": true,
    "toRaw": true,
    "toReactive": true,
    "toRef": true,
    "toRefs": true,
    "triggerRef": true,
    "tryOnBeforeMount": true,
    "tryOnBeforeUnmount": true,
    "tryOnMounted": true,
    "tryOnScopeDispose": true,
    "tryOnUnmounted": true,
    "unref": true,
    "unrefElement": true,
    "until": true,
    "useActiveElement": true,
    "useAnimate": true,
    "useArrayDifference": true,
    "useArrayEvery": true,
    "useArrayFilter": true,
    "useArrayFind": true,
    "useArrayFindIndex": true,
    "useArrayFindLast": true,
    "useArrayIncludes": true,
    "useArrayJoin": true,
    "useArrayMap": true,
    "useArrayReduce": true,
    "useArraySome": true,
    "useArrayUnique": true,
    "useAsyncQueue": true,
    "useAsyncState": true,
    "useAttrs": true,
    "useBase64": true,
    "useBattery": true,
    "useBluetooth": true,
    "useBreakpoints": true,
    "useBroadcastChannel": true,
    "useBrowserLocation": true,
    "useCached": true,
    "useClipboard": true,
    "useCloned": true,
    "useColorMode": true,
    "useConfirmDialog": true,
    "useCounter": true,
    "useCssModule": true,
    "useCssVar": true,
    "useCssVars": true,
    "useCurrentElement": true,
    "useCycleList": true,
    "useDark": true,
    "useDateFormat": true,
    "useDebounce": true,
    "useDebounceFn": true,
    "useDebouncedRefHistory": true,
    "useDeviceMotion": true,
    "useDeviceOrientation": true,
    "useDevicePixelRatio": true,
    "useDevicesList": true,
    "useDialog": true,
    "useDisplayMedia": true,
    "useDocumentVisibility": true,
    "useDraggable": true,
    "useDropZone": true,
    "useElementBounding": true,
    "useElementByPoint": true,
    "useElementHover": true,
    "useElementSize": true,
    "useElementVisibility": true,
    "useEventBus": true,
    "useEventListener": true,
    "useEventSource": true,
    "useEyeDropper": true,
    "useFavicon": true,
    "useFetch": true,
    "useFileDialog": true,
    "useFileSystemAccess": true,
    "useFocus": true,
    "useFocusWithin": true,
    "useFps": true,
    "useFullscreen": true,
    "useGamepad": true,
    "useGeolocation": true,
    "useI18n": true,
    "useIdle": true,
    "useImage": true,
    "useInfiniteScroll": true,
    "useIntersectionObserver": true,
    "useInterval": true,
    "useIntervalFn": true,
    "useKeyModifier": true,
    "useLastChanged": true,
    "useLink": true,
    "useLoadingBar": true,
    "useLocalStorage": true,
    "useMagicKeys": true,
    "useManualRefHistory": true,
    "useMediaControls": true,
    "useMediaQuery": true,
    "useMemoize": true,
    "useMemory": true,
    "useMessage": true,
    "useMounted": true,
    "useMouse": true,
    "useMouseInElement": true,
    "useMousePressed": true,
    "useMutationObserver": true,
    "useNavigatorLanguage": true,
    "useNetwork": true,
    "useNotification": true,
    "useNow": true,
    "useObjectUrl": true,
    "useOffsetPagination": true,
    "useOnline": true,
    "usePageLeave": true,
    "useParallax": true,
    "useParentElement": true,
    "usePerformanceObserver": true,
    "usePermission": true,
    "usePointer": true,
    "usePointerLock": true,
    "usePointerSwipe": true,
    "usePreferredColorScheme": true,
    "usePreferredContrast": true,
    "usePreferredDark": true,
    "usePreferredLanguages": true,
    "usePreferredReducedMotion": true,
    "usePrevious": true,
    "useRafFn": true,
    "useRefHistory": true,
    "useResizeObserver": true,
    "useRoute": true,
    "useRouter": true,
    "useScreenOrientation": true,
    "useScreenSafeArea": true,
    "useScriptTag": true,
    "useScroll": true,
    "useScrollLock": true,
    "useSessionStorage": true,
    "useShare": true,
    "useSlots": true,
    "useSorted": true,
    "useSpeechRecognition": true,
    "useSpeechSynthesis": true,
    "useStepper": true,
    "useStorage": true,
    "useStorageAsync": true,
    "useStyleTag": true,
    "useSupported": true,
    "useSwipe": true,
    "useTemplateRefsList": true,
    "useTextDirection": true,
    "useTextSelection": true,
    "useTextareaAutosize": true,
    "useThrottle": true,
    "useThrottleFn": true,
    "useThrottledRefHistory": true,
    "useTimeAgo": true,
    "useTimeout": true,
    "useTimeoutFn": true,
    "useTimeoutPoll": true,
    "useTimestamp": true,
    "useTitle": true,
    "useToNumber": true,
    "useToString": true,
    "useToggle": true,
    "useTransition": true,
    "useUrlSearchParams": true,
    "useUserMedia": true,
    "useVModel": true,
    "useVModels": true,
    "useVibrate": true,
    "useVirtualList": true,
    "useWakeLock": true,
    "useWebNotification": true,
    "useWebSocket": true,
    "useWebWorker": true,
    "useWebWorkerFn": true,
    "useWindowFocus": true,
    "useWindowScroll": true,
    "useWindowSize": true,
    "watch": true,
    "watchArray": true,
    "watchAtMost": true,
    "watchDebounced": true,
    "watchDeep": true,
    "watchEffect": true,
    "watchIgnorable": true,
    "watchImmediate": true,
    "watchOnce": true,
    "watchPausable": true,
    "watchPostEffect": true,
    "watchSyncEffect": true,
    "watchThrottled": true,
    "watchTriggerable": true,
    "watchWithFilter": true,
    "whenever": true,
    "toValue": true
  }
 }
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -1,21 +1,36 @@
-/**
+/* eslint-env node */
- * @type {import('eslint').Linter.Config}
+require('@rushstack/eslint-patch/modern-module-resolution');
- */
+
 module.exports = {
  root: true,
-  extends: ['@antfu', './.eslintrc-auto-import.json', '@unocss'],
+  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    '@vue/eslint-config-typescript/recommended',
    '@vue/eslint-config-prettier',
    'plugin:import/recommended',
  ],
  settings: {
    'import/resolver': { typescript: { project: './tsconfig.app.json' } },
  },
  env: {
    'vue/setup-compiler-macros': true,
  },
  rules: {
-    'curly': ['error', 'all'],
+    'vue/multi-word-component-names': ['off'],
-    '@typescript-eslint/semi': ['error', 'always'],
+    'prettier/prettier': ['error'],
-    '@typescript-eslint/no-use-before-define': ['error', { allowNamedExports: true, functions: false }],
+    'import/no-duplicates': ['error', { considerQueryString: true }],
-    'vue/no-empty-component-block': ['error'],
+    'import/order': ['error', { groups: [['builtin', 'external', 'internal']] }],
-    'no-restricted-imports': ['error', {
+    'import/extensions': [
-      paths: [{
+      'error',
-        name: '@vueuse/core',
+      'ignorePackages',
-        importNames: ['useClipboard'],
+      {
-        message: 'Please use local useCopy from src/composable/copy.ts instead of useClipboard.',
+        js: 'never',
-      }],
+        ts: 'never',
-    }],
+        tsx: 'never',
      },
    ],
  },
 };
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -1,17 +1,17 @@
 ---
 name: Bug report
-about: Create a report to help us improve our tools
+about: Create a report to help us improve
-title: '[BUG] '
+title: "[BUG] "
 labels: bug
 assignees: CorentinTh
 ---
-**Which tool is impacted?**
+**Describe the bug**
-Example: the token generator
+A clear and concise description of what the bug is.
 **To Reproduce**
 Steps to reproduce the behavior:
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
@@ -24,11 +24,10 @@ A clear and concise description of what you expected to happen.
 If applicable, add screenshots to help explain your problem.
 **Configuration (please complete the following information):**
-
+ - Device: [e.g. iPhone6, ]
- Device: [e.g. iPhone6, ]
+ - OS: [e.g. iOS]
- OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
- Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
 - Version [e.g. 22]
 **Additional context**
 Add any other context about the problem here.
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -0,0 +1,20 @@
 ---
 name: Feature request
 about: Suggest an idea for this project
 title: "[FEAT]"
 labels: enhancement
 assignees: CorentinTh
 ---
 **Is your feature request related to a problem? Please describe.**
 A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
 **Describe the solution you'd like**
 A clear and concise description of what you want to happen.
 **Describe alternatives you've considered**
 A clear and concise description of any alternative solutions or features you've considered.
 **Additional context**
 Add any other context or screenshots about the feature request here.
--- a/.github/ISSUE_TEMPLATE/new-tool-request.md
+++ b/.github/ISSUE_TEMPLATE/new-tool-request.md
@@ -1,19 +0,0 @@
 ---
 name: New tool request
 about: Suggest a new tool idea
 title: '[NEW TOOL]'
 labels: new tool
 assignees: CorentinTh
 ---
 **What tool do you want?**
 Example: a token generator
 **Describe the solution you'd like**
 A clear and concise description of what you want to happen.
 **Is their example of this tool in the wild?**
 Provide link to already existing tool or npm packages if any exists
 **Additional context**
 Add any other context about the feature request here.
--- a/.github/ISSUE_TEMPLATE/other-request.md
+++ b/.github/ISSUE_TEMPLATE/other-request.md
@@ -1,13 +0,0 @@
 ---
 name: Other request
 about: Any request that does not concern a tool creation, a new feature request on a tool or a bug
 title: '[OTHER] '
 labels:
 assignees: CorentinTh
 ---
 **Describe the solution you'd like**
 A clear and concise description of what you want.
 **Additional context**
 Add any other context about the feature request here.
--- a/.github/ISSUE_TEMPLATE/tool-improvement.md
+++ b/.github/ISSUE_TEMPLATE/tool-improvement.md
@@ -1,13 +0,0 @@
 ---
 name: Tool improvement
 about: Improvement on an existing tool
 title: '[TOOL IMPROVEMENT]'
 labels: enhancement
 assignees: CorentinTh
 ---
 **Describe the solution you'd like**
 A clear and concise description of what you want to happen.
 **Additional context**
 Add any other context about the feature request here.
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -1,10 +1,6 @@
 name: ci
-on:
+on: [push, pull_request]
  pull_request:
  push:
    branches:
      - main
 jobs:
  ci:
@@ -27,8 +23,5 @@ jobs:
      - name: Run unit test
        run: pnpm test
      - name: Type check
        run: pnpm typecheck
      - name: Build the app
        run: pnpm build
--- a/.github/workflows/codeql-analysis.yml
+++ b/.github/workflows/codeql-analysis.yml
@@ -37,11 +37,11 @@ jobs:
    steps:
    - name: Checkout repository
-      uses: actions/checkout@v3
+      uses: actions/checkout@v2
    # Initializes the CodeQL tools for scanning.
    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v2
+      uses: github/codeql-action/init@v1
      with:
        languages: ${{ matrix.language }}
        # If you wish to specify custom queries, you can do so here or in a config file.
@@ -52,7 +52,7 @@ jobs:
    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
    # If this step fails, then you should remove it and run the build manually (see below)
    - name: Autobuild
-      uses: github/codeql-action/autobuild@v2
+      uses: github/codeql-action/autobuild@v1
    # ℹ️ Command-line programs to run using the OS shell.
    # 📚 https://git.io/JvXDl
@@ -66,4 +66,4 @@ jobs:
    #   make release
    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v2
+      uses: github/codeql-action/analyze@v1
--- a/.github/workflows/docker-nightly-release.yml
+++ b/.github/workflows/docker-nightly-release.yml
@@ -1,87 +0,0 @@
 name: Docker nightly release
 on:
  workflow_dispatch:
  schedule:
    - cron: '0 0 * * *'
 jobs:
  check_date:
    runs-on: ubuntu-latest
    name: Check latest commit
    outputs:
      should_run: ${{ steps.should_run.outputs.should_run }}
    steps:
      - uses: actions/checkout@v3
      - name: print latest_commit
        run: echo ${{ github.sha }}
      - id: should_run
        continue-on-error: true
        name: check latest commit is less than a day
        if: ${{ github.event_name == 'schedule' }}
        run: test -z $(git rev-list  --after="24 hours"  ${{ github.sha }}) && echo "::set-output name=should_run::false"
  ci:
    runs-on: ubuntu-latest
    needs: check_date
    if: ${{ needs.check_date.outputs.should_run != 'false' }}
    steps:
      - uses: actions/checkout@v3
      - run: corepack enable
      - uses: actions/setup-node@v3
        with:
          node-version: 16
          cache: 'pnpm'
      - name: Install dependencies
        run: pnpm i
      - name: Run linters
        run: pnpm lint
      - name: Run unit test
        run: pnpm test
      - name: Build the app
        run: pnpm build
  build:
    runs-on: ubuntu-latest
    needs:
      - ci
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      - name: Login to GitHub Container Registry
        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@v2
        with:
          username: ${{ secrets.DOCKERHUB_USERNAME }}
          password: ${{ secrets.DOCKERHUB_TOKEN }}
      - name: Set up QEMU
        uses: docker/setup-qemu-action@v2
      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v2
      - name: Build and push
        uses: docker/build-push-action@v4
        with:
          context: .
          file: ./Dockerfile
          platforms: linux/amd64,linux/arm64
          push: true
          tags: |
            corentinth/it-tools:nightly
            ghcr.io/corentinth/it-tools:nightly
--- a/.github/workflows/e2e-tests.yml
+++ b/.github/workflows/e2e-tests.yml
@@ -1,47 +0,0 @@
 name: E2E tests
 on:
  pull_request:
  push:
    branches:
      - main
 jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    strategy:
      matrix:
        shard: [1/3, 2/3, 3/3]
    steps:
      - uses: actions/checkout@v3
      - run: corepack enable
      - uses: actions/setup-node@v3
        with:
          node-version: 16
          cache: 'pnpm'
      - name: Get Playwright version
        id: playwright-version
        run: echo "PLAYWRIGHT_VERSION=$(jq -r .dependencies.playwright package.json)" >> "$GITHUB_OUTPUT"
      - name: Install dependencies
        run: pnpm install
      - name: Build app
        run: pnpm build
      - name: Restore Playwright browsers from cache
        uses: actions/cache@v3
        with:
          path: ~/.cache/ms-playwright
          key: ${{ runner.os }}-playwright-${{ steps.playwright-version.outputs.PLAYWRIGHT_VERSION }}-${{ hashFiles('**/playwright.config.ts') }}
          restore-keys: |
            ${{ runner.os }}-playwright-${{ steps.playwright-version.outputs.PLAYWRIGHT_VERSION }}-
            ${{ runner.os }}-playwright-
      - name: Install Playwright Browsers
        run: pnpm exec playwright install --with-deps
      - name: Run Playwright tests
        run: pnpm run test:e2e --shard=${{ matrix.shard }}
--- a/.github/workflows/releases.yml
+++ b/.github/workflows/releases.yml
@@ -1,104 +0,0 @@
 name: Release new versions
 on:
  push:
    tags:
      - 'v*.*.*'
 jobs:
  docker-release:
    runs-on: ubuntu-latest
    steps:
      - name: Get release version
        run: echo "RELEASE_VERSION=${GITHUB_REF#refs/tags/v}" >> $GITHUB_ENV
      - name: Checkout
        uses: actions/checkout@v3
      - name: Login to GitHub Container Registry
        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@v2
        with:
          username: ${{ secrets.DOCKERHUB_USERNAME }}
          password: ${{ secrets.DOCKERHUB_TOKEN }}
      - name: Set up QEMU
        uses: docker/setup-qemu-action@v2
      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v2
      - name: Build and push
        uses: docker/build-push-action@v4
        with:
          context: .
          file: ./Dockerfile
          platforms: linux/amd64,linux/arm64
          push: true
          tags: |
            corentinth/it-tools:latest
            corentinth/it-tools:${{ env.RELEASE_VERSION }}
            ghcr.io/corentinth/it-tools:latest
            ghcr.io/corentinth/it-tools:${{ env.RELEASE_VERSION}}
  github-release:
    runs-on: ubuntu-latest
    needs: docker-release
    steps:
      - name: Get release version
        run: echo "RELEASE_VERSION=${GITHUB_REF#refs/tags/v}" >> $GITHUB_ENV
      - name: Checkout
        uses: actions/checkout@v3
      - run: corepack enable
      - uses: actions/setup-node@v3
        with:
          node-version: 16
          cache: 'pnpm'
      - name: Install dependencies
        run: pnpm i
      - name: Build the app
        run: pnpm build
      - name: Zip the app
        run: zip -r it-tools-${{ env.RELEASE_VERSION }}.zip dist/*
      - name: Get changelog
        id: changelog
        run: |
          EOF=$(openssl rand -hex 8)
          echo "changelog<<$EOF" >> $GITHUB_OUTPUT
          node ./scripts/getLatestChangelog.mjs >> $GITHUB_OUTPUT
          echo "$EOF" >> $GITHUB_OUTPUT
      - name: Create Release
        uses: softprops/action-gh-release@v1
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          files: it-tools-${{ env.RELEASE_VERSION }}.zip
          tag_name: v${{ env.RELEASE_VERSION }}
          draft: true
          prerelease: false
          body: |
            ## Docker images
            - Docker Hub
              - `corentinth/it-tools:latest`
              - `corentinth/it-tools:${{ env.RELEASE_VERSION }}`
            - GitHub Container Registry
              - `ghcr.io/corentinth/it-tools:latest`
              - `ghcr.io/corentinth/it-tools:${{ env.RELEASE_VERSION}}`
            ## Changelog
            ${{ steps.changelog.outputs.changelog }}
--- a/.gitignore
+++ b/.gitignore
@@ -26,10 +26,3 @@ coverage
 *.njsproj
 *.sln
 *.sw?
 .env
 /test-results/
 /playwright-report/
 /playwright/.cache/
 # Webkit with playwright creates a salt file
 salt
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-18.17.1
+16.14.2
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -1,3 +1,3 @@
 {
-  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin", "dbaeumer.vscode-eslint", "lokalise.i18n-ally"]
+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin", "dbaeumer.vscode-eslint"]
 }
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,211 +2,500 @@
 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.08.21-6f93cba
+## [2.13.0](https://github.com/CorentinTh/it-tools/compare/v2.11.0...v2.13.0) (2022-11-14)
 ### Features
 - **copy**: support legacy copy to clipboard for older browser (#581) (6f93cba)
 - **new tool**: string obfuscator (#575) (c58d6e3)
-### Bug fixes
+* **config:** added tsx to allowed extension ([ea5e7a7](https://github.com/CorentinTh/it-tools/commit/ea5e7a7fc7df1a3a912193912a6ab80a8a36a256))
- **deps**: update dependency sql-formatter to v12 (#520) (2bcb77a)
+* **date-converter:** added mongodb objectID format ([4ef2588](https://github.com/CorentinTh/it-tools/commit/4ef25887b9d874b8789bf8dbabd8aab92b4b1b03))
 * **new-tool:** added otp generator ([5f16885](https://github.com/CorentinTh/it-tools/commit/5f168859238e9c3a8b8bbaf6b550c4b9bd163e00))
 * **new-tool:** mime type to extension converter ([7c9b8ac](https://github.com/CorentinTh/it-tools/commit/7c9b8ac178967151a4f921ac26e8c2fe8d23b886))
 ### Chores
 - **deps**: switched to fucking typescript v5 (#501) (76b2761)
 - **deps**: update dependency @antfu/eslint-config to ^0.40.0 (#552) (6ff9a01)
 - **deps**: update dependency prettier to v3 (#564) (a2b9b15)
 - **deps**: removed @typescript-eslint/parser (#563) (144f86e)
 - **deps**: removed ts-pattern (#565) (0f1f659)
-## Version 2023.08.16-9bd4ad4
+### Bug Fixes
 * **ui:** remove icon transparency overlap ([35a3760](https://github.com/CorentinTh/it-tools/commit/35a376077116dd65b21f9a0786d2ecfc14db6051))
 ### Refactors
 * **otp-generator:** changed url ([7f22995](https://github.com/CorentinTh/it-tools/commit/7f229959d64b7a932f32753e3838d87a819a9192))
 * token generator can use a custom alphabet ([83da6b7](https://github.com/CorentinTh/it-tools/commit/83da6b7ee9db29e40faf288f9627257aa7124038))
 * **ui:** change sponsor button location and caption ([5d8f46a](https://github.com/CorentinTh/it-tools/commit/5d8f46abf8d5a10cc4650efc87b12a9a6c537fe5))
 * **useQRCode:** switched args to MaybeRef ([7de6c86](https://github.com/CorentinTh/it-tools/commit/7de6c86f9ead8d7315614cc508dfee4fed90e9c2))
 ## [2.12.0](https://github.com/CorentinTh/it-tools/compare/v2.10.3...v2.12.0) (2022-08-23)
 ### Features
 - **Case Converter**: Add lowercase and uppercase (#534) (7b6232a)
 - **new tool**: emoji picker (#551) (93f7cf0)
 - **ui**: added c-select in the ui lib (#550) (dfa1ba8)
 - **new-tool**: password strength analyzer (#502) (a9c7b89)
 - **new-tool**: yaml to toml (e29b258)
 - **new-tool**: json to toml (ea50a3f)
 - **new-tool**: toml to yaml (746e5bd)
 - **new-tool**: toml to json (c7d4f11)
 - **command-palette**: random tool action (ec4c533)
 - **config**: allow app to run in a subfolder via BASE_URL (#461) (6304595)
 - **new-tool**: percentage calculator (#456) (b9406a4)
 - **new-tool**: json to csv converter (69f0bd0)
 - **new tool**: xml formatter (#457) (a6bbeae)
 - **chmod-calculator**: added symbolic representation (#455) (f771e7a)
 - **enhancement**: use system dark mode (#458) (cf7b1f0)
 - **phone-parser**: searchable country code select (d2956b6)
 - **new tool**: camera screenshot and recorder (34d8e5c)
 - **base64-string-converter**: switch to encode and decode url safe base64 strings (#392) (0b20f1c)
-### Bug fixes
+* added colored share card ([ab7483b](https://github.com/CorentinTh/it-tools/commit/ab7483b5c2bd5aee1b8b609597c22b7b7b55606d))
- **deps**: update dependency uuid to v9 (#566) (5e12991)
+* **config:** added tsx to allowed extension ([741a3c2](https://github.com/CorentinTh/it-tools/commit/741a3c25a915d8296987b23bda03f2b664d51ba6))
- **deps**: update dependency mathjs to v11 (#519) (7924456)
+* **new-tool:** added otp generator ([cc6070a](https://github.com/CorentinTh/it-tools/commit/cc6070a16655bce9de90517bdda3bf6224ba139d))
- **deps**: update dependency @vueuse/router to v10 (#516) (ea0f27c)
+* **new-tool:** meta tag generator ([164e32b](https://github.com/CorentinTh/it-tools/commit/164e32b4428b8dfaaddcefa06b767a8af94573a9))
 - **copy**: prevent shorthand copy if source is present in useCopy (#559) (86e964a)
 - **c-lib**: hide component library shortcut link in non-dev (#557) (56d74d0)
 - **emoji picker**: fix copy button (#556) (e5d0ba7)
 - **deps**: update dependency @vueuse/head to v1 (#515) (d12dd40)
 - **deps**: update dependency country-code-lookup to ^0.1.0 (#493) (8c72e69)
 - **deps**: update dependency @vueuse/head to ^0.9.0 (#492) (cec9dea)
 - **i18n**: fallback for demo i18n (12d9e5d)
 - **typos**: fixed more typos & uppercase JSON (#475) (9526ed8)
 - **about**: typos and wording (#474) (7068610)
 - **mime-types**: typos (#470) (c4cec9e)
 - **sonar**: took down minor sonar warning (4cbd7ac)
 - **readme**: typo (105b21b)
 - **ipv4-range-expander**: calculate correct for ip addresses where the first octet is lower than 128 (#405) (8c92d56)
 - **ipv4-converter**: removed readonly on input (7aed9c5)
 ### Refactoring
 - **navbar**: consistent spacing in navbar buttons (#507) (30f88fc)
 - **ui**: remove n-text (#506) (72c98a3)
 - **ui**: replaced some n-input to c-input (#505) (05ea545)
 - **json-viewer**: input monospace font (#485) (9125dcf)
 - **search**: command palette design (#463) (bcb98b3)
 - **c-input-text**: force usage of props with default (1e2a35b)
 - **naming**: prevent auto import conflicts for git memo (45c2474)
 - **imports**: removed unnecessary imports to vue (fe61f0f)
 - **ui**: removed all n-space (4d2b037)
 - **ui**: replaced some n-input with c-input-text (f7fc779)
-### Chores
+### Bug Fixes
- **deps**: update dependency vitest to ^0.34.0 (#562) (9bd4ad4)
+
- **deps**: update dependency node to v18.17.1 (#560) (65a9474)
+* **deps:** added missing optional deps ([4975590](https://github.com/CorentinTh/it-tools/commit/49755909bdaea9399e51b67fbd1a6d071acd3182))
- **deps**: update dependency unocss to ^0.55.0 (#561) (85cc7a8)
+* removed colored card border ([7c449f4](https://github.com/CorentinTh/it-tools/commit/7c449f4f2d491ce58726c5419a74dc295fa92905))
- **deps**: update dependency @unocss/eslint-config to ^0.55.0 (#553) (4268e25)
+
- **deps**: update dependency @intlify/unplugin-vue-i18n to ^0.12.0 (#526) (d1c8880)
+
- **deps**: update docker/login-action action to v2 (#512) (99bc84c)
+### Refactors
- **deps**: update dependency jsdom to v22 (#499) (cd5a503)
+
- **deps**: update dependency @vitejs/plugin-vue-jsx to v3 (#497) (1a60236)
+* **colored-card:** added transition on like hover ([da17696](https://github.com/CorentinTh/it-tools/commit/da17696293270005b1b7ec4aafc0df7496f602c7))
- **deps**: update dependency @vitejs/plugin-vue to v4 (#496) (a249421)
+* **share:** updated share meta ([5222bd5](https://github.com/CorentinTh/it-tools/commit/5222bd5d04ad089ba4cbade399dada55e29dcde5))
- **deps**: update dependency vite-plugin-pwa to ^0.16.0 (#488) (6498c9b)
+* token generator can use a custom alphabet ([59ec629](https://github.com/CorentinTh/it-tools/commit/59ec6293b65526fe8dc527ac596d0e5af29b1e32))
- **deps**: update dependency vite to v4 (#503) (f40d7ec)
+* **useQRCode:** switched args to MaybeRef ([a89c9be](https://github.com/CorentinTh/it-tools/commit/a89c9bea42d598f4caba10800becd66a07bbcdc9))
- **ci**: e2e against vercel deployement (#518) (2e28c50)
+
- **e2e**: execute e2e against built app (#511) (cf382b5)
+## [2.11.0](https://github.com/CorentinTh/it-tools/compare/v2.10.3...v2.11.0) (2022-08-19)
- **deps**: update github/codeql-action action to v2 (#513) (0152583)
+
- **deps**: update node.js to v18 (#514) (38cb61d)
+
- **deps**: switched from vite-plugin-md to vite-plugin-vue-markdown (#510) (354aed6)
+### Features
- **deps**: update dependency workbox-window to v7 (#509) (6b8682f)
+
- **deps**: update dependency vite-svg-loader to v4 (#508) (9e8349d)
+* added colored share card ([ab7483b](https://github.com/CorentinTh/it-tools/commit/ab7483b5c2bd5aee1b8b609597c22b7b7b55606d))
- **deps**: update dependency typescript to ~4.9.0 (#481) (f440507)
+* **new-tool:** meta tag generator ([164e32b](https://github.com/CorentinTh/it-tools/commit/164e32b4428b8dfaaddcefa06b767a8af94573a9))
- **deps**: update dependency vue-tsc to ^0.40.0 (#490) (b0d9a3e)
+
- **deps**: updated unplugin-auto-import (#504) (5c3bebf)
+
- **deps**: removed start-server-and-test dependency (8df7cd0)
+### Bug Fixes
- **deps**: update dependency c8 to v8 (#498) (6bda2ca)
+
- **deps**: update dependency @types/jsdom to v21 (#495) (994a1c3)
+* **deps:** added missing optional deps ([4975590](https://github.com/CorentinTh/it-tools/commit/49755909bdaea9399e51b67fbd1a6d071acd3182))
- **deps**: update node.js to v16.20.1 (#491) (05edaf4)
+* removed colored card border ([7c449f4](https://github.com/CorentinTh/it-tools/commit/7c449f4f2d491ce58726c5419a74dc295fa92905))
- **deps**: update dependency vitest to ^0.32.0 (#489) (49eacea)
+
- **deps**: update actions/checkout action to v3 (#494) (3f7d469)
+
- **deps**: update dependency unplugin-vue-components to ^0.25.0 (#484) (5f21908)
+### Refactors
- **deps**: update dependency unplugin-auto-import to ^0.16.0 (#483) (6cb0845)
+
- **deps**: update dependency unocss to ^0.53.0 (#482) (38710dc)
+* **colored-card:** added transition on like hover ([da17696](https://github.com/CorentinTh/it-tools/commit/da17696293270005b1b7ec4aafc0df7496f602c7))
- **deps**: update dependency @unocss/eslint-config to ^0.53.0 (#478) (282cfc4)
+* **share:** updated share meta ([5222bd5](https://github.com/CorentinTh/it-tools/commit/5222bd5d04ad089ba4cbade399dada55e29dcde5))
- **deps**: added renovate.json (#477) (363c2e4)
+
- **i18n**: tool scoped locales (#471) (1b038c7)
+### [2.10.3](https://github.com/CorentinTh/it-tools/compare/v2.10.2...v2.10.3) (2022-08-14)
- **wysiwyg-editor**: update tiptap dependencies (732da08)
+
- **i18n**: setup i18n plugin config (ebfb872)
+
- **config**: netlify deployment support (#443) (93799af)
+### Refactors
- **ci**: shard e2e tests (962a6d6)
+
- **lint**: switched to a better lint config (33c9b66)
+* **share:** new share banner ([fcf4cfe](https://github.com/CorentinTh/it-tools/commit/fcf4cfe64d4c1c3814137c8ff23b83a1ca0d502d))
 * **share:** updated twitter meta tags ([992f96b](https://github.com/CorentinTh/it-tools/commit/992f96b48a89e2793ccf75fb9e28b2ec7b7f62b6))
 * **validation:** simplified validation management with helpers ([f54223f](https://github.com/CorentinTh/it-tools/commit/f54223fb0aaedbd101b5d3dc4176053533bb936a))
 ### [2.10.2](https://github.com/CorentinTh/it-tools/compare/v2.10.1...v2.10.2) (2022-08-04)
 ### Refactors
 * **dry:** mutualised duplicated code with withDefaultOnError ([f6cd9b7](https://github.com/CorentinTh/it-tools/commit/f6cd9b76d38800e1a1f63d07152fc96cda562795))
 * **home:** removed new tool first sort ([d30cd8a](https://github.com/CorentinTh/it-tools/commit/d30cd8a9abc3298c0a0b05f249e54318bb4537f2))
 * **json-prettifier:** more permissive json parser ([8089c60](https://github.com/CorentinTh/it-tools/commit/8089c60000000c42c821c6586c128d3d2b248885))
 * **lint:** added import rules ([208a373](https://github.com/CorentinTh/it-tools/commit/208a373fd08ac550778745eb6e4536bf02537da7))
 ### [2.10.1](https://github.com/CorentinTh/it-tools/compare/v2.10.0...v2.10.1) (2022-08-04)
 ### Bug Fixes
 * **bip39-generator:** cleared an issue with the mnemonic validation ([ca7cb44](https://github.com/CorentinTh/it-tools/commit/ca7cb4438972ca09f28a6a40332ec94ceaa4aab4))
 * **import:** removed auto added weird .js extension ([fda0b0c](https://github.com/CorentinTh/it-tools/commit/fda0b0ca25c1733542a4e797ac1a2150c546a660))
 ### Refactors
 * **base64:** mutualized base64 functions into global utilities ([447bdf2](https://github.com/CorentinTh/it-tools/commit/447bdf2148098d70ba309e13d9b1e846b5064da1))
 * **chronometer:** improved chronometer precision ([e48d60b](https://github.com/CorentinTh/it-tools/commit/e48d60b1ed19279f48441743f7ed69e8fd915011))
 ## [2.10.0](https://github.com/CorentinTh/it-tools/compare/v2.9.2...v2.10.0) (2022-08-03)
 ### Features
 * **hash-text:** digest base selector ([#254](https://github.com/CorentinTh/it-tools/issues/254)) ([422b6eb](https://github.com/CorentinTh/it-tools/commit/422b6eb05a2fb5e7eec816a6bd2d37b53e4a6bdc))
 * **new-tool:** an svg placeholder image generator ([129f74c](https://github.com/CorentinTh/it-tools/commit/129f74c371eaf09fdc3a19afb709cee40b7aaf7f))
 * **new-tool:** hmac generator ([1bc6380](https://github.com/CorentinTh/it-tools/commit/1bc6380c6fdd7a9b500422a54bc508ab5557eb46))
 ### Bug Fixes
 * **base64-to-string:** prevent validation error ([8a9e788](https://github.com/CorentinTh/it-tools/commit/8a9e7888dec41364c8c17b1234adcdc0616612b0))
 * **bip39-generator:** typo in validation message ([7570ad9](https://github.com/CorentinTh/it-tools/commit/7570ad965602233f860b9e03177a5b9dacf1b034))
 * **eta-calculator:** clamp inputs ([#249](https://github.com/CorentinTh/it-tools/issues/249)) ([531a25c](https://github.com/CorentinTh/it-tools/commit/531a25c1c4892835633ba5635c6ee48e1fbef31c))
 * **wording:** removed spaces before ponctuation ([#252](https://github.com/CorentinTh/it-tools/issues/252)) ([5f03619](https://github.com/CorentinTh/it-tools/commit/5f03619ab44c0b35455c46698ec37d79e87555b5))
 ### Refactors
 * **base64-to-file:** clean validation to convert base64 to file ([750a76b](https://github.com/CorentinTh/it-tools/commit/750a76b00fb79c0e9c2851c112141158ee0ffab1))
 * **display:** mutualized code display ([0be33fb](https://github.com/CorentinTh/it-tools/commit/0be33fb337e8d82474922c0fdf9555aa328cd729))
 * **lint:** externalization of prettier for simpler IDE support ([02c4963](https://github.com/CorentinTh/it-tools/commit/02c49635315661ca08deb0859c5ba33113368b9b))
 * **validation:** simplified validation system ([77b5b0c](https://github.com/CorentinTh/it-tools/commit/77b5b0cab50a05dcb419ce87d74517d82e7cd2c0))
 ### [2.9.2](https://github.com/CorentinTh/it-tools/compare/v2.9.1...v2.9.2) (2022-07-28)
 ### Bug Fixes
 * **base64-file:** fixed url slug ([412de23](https://github.com/CorentinTh/it-tools/commit/412de23796babbc080b0768a75029ff2ddf2acfc))
 * **device-information:** handle of unknown values ([4f599b6](https://github.com/CorentinTh/it-tools/commit/4f599b699901a93444bcc67cbb3b3556a0561ae4))
 * **device-information:** prevent unwanted y-truncature of text  ([138149e](https://github.com/CorentinTh/it-tools/commit/138149e6f0be91255907a6083887898e5c68882e))
 ### Refactors
 * **base64-file:** fixed typo ([1a22d55](https://github.com/CorentinTh/it-tools/commit/1a22d55b3c48f58b05b5a50de4fea260e781fbef))
 ### [2.9.1](https://github.com/CorentinTh/it-tools/compare/v2.9.0...v2.9.1) (2022-07-25)
 ### Refactors
 * **base64:** split base64 text and file conversion in two tools + base64 to file ([e6953d1](https://github.com/CorentinTh/it-tools/commit/e6953d1b67b81a6d3c19973b706f29637c421f98))
 ## [2.9.0](https://github.com/CorentinTh/it-tools/compare/v2.8.0...v2.9.0) (2022-07-25)
 ### Features
 * **new-tool:** added a basic auth generator ([bdee93a](https://github.com/CorentinTh/it-tools/commit/bdee93a9e45c6b46e7f75cdcbe1907f138722dca))
 ## [2.8.0](https://github.com/CorentinTh/it-tools/compare/v2.7.0...v2.8.0) (2022-07-24)
 ### Features
 * **new-tool:** added an ETA calculator ([125a502](https://github.com/CorentinTh/it-tools/commit/125a50215a7abb9e0b59dbbc62aee49007b05ffe))
 ### Bug Fixes
 * **sql-prettifier:** better responsiveness ([560fcf3](https://github.com/CorentinTh/it-tools/commit/560fcf3f783c66b9197e4a015420c43a729518bc))
 ### Refactors
 * **json-prettify:** improved layout for the json prettifier ([328fda6](https://github.com/CorentinTh/it-tools/commit/328fda65b3490869328467c5e2d5f538c689d9b6))
 * **sql-prettifier:** remove unused service files ([ba87097](https://github.com/CorentinTh/it-tools/commit/ba87097e3d834b6ea3212d28c2c33badb95f85e1))
 ## [2.7.0](https://github.com/CorentinTh/it-tools/compare/v2.6.0...v2.7.0) (2022-07-24)
 ### Features
 * **new-tool:** added an SQL prettifier and formatter ([d1f95f5](https://github.com/CorentinTh/it-tools/commit/d1f95f5b34a4570f1033a5289f0bd009d1aefb0c))
 ### Bug Fixes
 * **typo:** fix few typos ([6cd25a7](https://github.com/CorentinTh/it-tools/commit/6cd25a743e32fceeaec8c1f8b94927a9c5d901f1))
 ## [2.6.0](https://github.com/CorentinTh/it-tools/compare/v2.5.3...v2.6.0) (2022-07-23)
 ### Features
 * **new-tool:** added chronometer ([130031c](https://github.com/CorentinTh/it-tools/commit/130031c2256f3d4d46948974b9de85ee6e92bf8b))
 * **search:** focus the search bar using Ctrl+K ([ab53048](https://github.com/CorentinTh/it-tools/commit/ab53048d5f6fdca7d00edbb79dee1a5409e6b11e))
 ### Bug Fixes
 * **deps:** run dependencie audit auto fix ([a16161c](https://github.com/CorentinTh/it-tools/commit/a16161cdb48c064882b9dc91ec3d091d286f5c63))
 * **lint:** cleanned index.html ([c3a302b](https://github.com/CorentinTh/it-tools/commit/c3a302bc389a0e13aef4b14d5a9d3ec3a0d32729))
 * **text-statistics:** empty text mean 0 words and 0 lines ([92ce419](https://github.com/CorentinTh/it-tools/commit/92ce419f45e110509ab202485a36bf175ce345da))
 ### Refactors
 * added accessibility labels on icon buttons ([394d085](https://github.com/CorentinTh/it-tools/commit/394d085846d976219ea775c21cd7e77f0f72a12b))
 * **import:** auto reordered imports ([2140842](https://github.com/CorentinTh/it-tools/commit/214084262cec7fb881fd397626356b080ea1a5cc))
 ### [2.5.3](https://github.com/CorentinTh/it-tools/compare/v2.5.2...v2.5.3) (2022-07-21)
 ### Bug Fixes
 * updated license in README ([e371e8f](https://github.com/CorentinTh/it-tools/commit/e371e8fedfd68f3cf6ecd3fbc9e2da8849f7d5bd))
 ### [2.5.2](https://github.com/CorentinTh/it-tools/compare/v2.5.1...v2.5.2) (2022-07-21)
 ### [2.5.1](https://github.com/CorentinTh/it-tools/compare/v2.5.0...v2.5.1) (2022-06-01)
 ### Bug Fixes
 * **lint:** missing dangling comma ([f05c8e1](https://github.com/CorentinTh/it-tools/commit/f05c8e1dc69275e529f4c8771ad55ba211e7fb5e))
 * menu label key value was undefined ([f48cd05](https://github.com/CorentinTh/it-tools/commit/f48cd058cf3381f3bc92ea8fe37b565327707d1e))
 * **title:** trully reactive tool title ([c2e1d59](https://github.com/CorentinTh/it-tools/commit/c2e1d59cb9d8dbb1bb072a46100192cb8c59f59b))
 * tool sorting inconsistencies in home page ([5ab4dd3](https://github.com/CorentinTh/it-tools/commit/5ab4dd3d4a42c3609d72597c7ba91764170e6e96))
 ## [2.5.0](https://github.com/CorentinTh/it-tools/compare/v2.4.2...v2.5.0) (2022-06-01)
 ### Features
 * **new-tool:** math evaluator ([433ba2a](https://github.com/CorentinTh/it-tools/commit/433ba2a3e5419eed0c96304b37693082224a1c73))
 * **tools:** new badge for recently created tools ([11720e6](https://github.com/CorentinTh/it-tools/commit/11720e6cdefc1da4bdd638415813b609840f8462))
 ### Bug Fixes
 * **config:** updated env values loading ([2f61c74](https://github.com/CorentinTh/it-tools/commit/2f61c745f57962cf3bb9e2c1db4a3176df042808))
 ### Refactors
 * removed unused import ([8fb0e6a](https://github.com/CorentinTh/it-tools/commit/8fb0e6af9c3be708d3f1777a1661e1b38f197a3f))
 * renammed Tool.ts to tool.ts ([ac89490](https://github.com/CorentinTh/it-tools/commit/ac89490794ee3c1c033859ffea31a962a13cc96d))
 ### [2.4.2](https://github.com/CorentinTh/it-tools/compare/v2.4.1...v2.4.2) (2022-06-01)
 ### Refactors
 * **config:** added config management with figue ([6becdbb](https://github.com/CorentinTh/it-tools/commit/6becdbb42329e1bdecf158707e37ba9f13ba1d2c))
 * **imports:** removed useless defineProps import ([5ce1262](https://github.com/CorentinTh/it-tools/commit/5ce1262fb44864b829dac09d5c0b9b68d522ceb7))
 * set coerent head title for home page ([a46d125](https://github.com/CorentinTh/it-tools/commit/a46d125c19902c2f41f37c62c07bb7b548d9f6f0))
 ### [2.4.1](https://github.com/CorentinTh/it-tools/compare/v2.4.0...v2.4.1) (2022-05-15)
 ### Bug Fixes
 * **seo:** wrong url in share metas ([a88e4a9](https://github.com/CorentinTh/it-tools/commit/a88e4a9289e7d8cc80190f60f2fe08fe2ba08ee6))
 ### Refactors
 * **json-viewer:** add clear button ([048bc4a](https://github.com/CorentinTh/it-tools/commit/048bc4ae943509dea2946764efaa69f845b6c478))
 * **seo:** changed title string ([d4ea393](https://github.com/CorentinTh/it-tools/commit/d4ea393c1df87ae958a06ed66a11e36b081282d4))
 ## [2.4.0](https://github.com/CorentinTh/it-tools/compare/v2.3.2...v2.4.0) (2022-05-14)
 ### Features
 * catch throw on validation ([a60f64f](https://github.com/CorentinTh/it-tools/commit/a60f64f74417f811204121f97c16cdb4754afc3b))
 * **hash-text:** compute all hashes at the same time ([#242](https://github.com/CorentinTh/it-tools/issues/242)) ([e9cc499](https://github.com/CorentinTh/it-tools/commit/e9cc499ed87ba926086323223c7eca4f6658b3f0))
 * **new-tool:**  json viewer ([d356b14](https://github.com/CorentinTh/it-tools/commit/d356b1488fc640a4f5b65d62e0f2f368f5941996))
 * **seo:** added cannonical meta ([34bc6a5](https://github.com/CorentinTh/it-tools/commit/34bc6a57a7bab98ff2a630d02034c342084e0af9))
 ### Bug Fixes
 * **lint:** missing new lines ([3cfc5f8](https://github.com/CorentinTh/it-tools/commit/3cfc5f8bc27b66e6fbb6054f3c909818083ebc37))
 * update recommended extension ids ([#244](https://github.com/CorentinTh/it-tools/issues/244)) ([1d7032d](https://github.com/CorentinTh/it-tools/commit/1d7032d0268220f594de6d837a303fc1e63cbd9f))
 ### Refacor
 - **transformers**: use monospace font for JSON and SQL text areas (#476) (ba4876d)
 ### Documentation
 - **ide**: updated vscode extensions settings (#472) (847323c)
-### Chors
+* added producthunt banners ([4c4da16](https://github.com/CorentinTh/it-tools/commit/4c4da16970e1dbb13705d8b6c020cd40cd2b5e0d))
- **deps**: updated vueuse dependency version (8515c24)
+
 ### Refactors
 * **base-layout:** renammed one letter variable ([383d975](https://github.com/CorentinTh/it-tools/commit/383d97569580c4f31448c07cb97e3778bc97a8af))
 * **date-converter:** mutualised and dry-ed code ([d2c767f](https://github.com/CorentinTh/it-tools/commit/d2c767f0922e9b93172c3167226ad3db5499b9f6))
 * **seo:** changed title string ([c3b6132](https://github.com/CorentinTh/it-tools/commit/c3b6132c261bd5952bafb1ff1e576eb13d2d0a7d))
 * updated description ([b89db3c](https://github.com/CorentinTh/it-tools/commit/b89db3c8d0de601fecbd2f9f79492dff1b461bd8))
 ### [2.3.2](https://github.com/CorentinTh/it-tools/compare/v2.3.1...v2.3.2) (2022-05-09)
 ### Bug Fixes
 * **base-converter:** responsive input ([0b0cbd5](https://github.com/CorentinTh/it-tools/commit/0b0cbd55c3809ded2eedfa0b2238bc950b01516a))
 * **base64-converter:** async onUpload callback ([84cf1bb](https://github.com/CorentinTh/it-tools/commit/84cf1bb9645c5ae31579098df59471f7d99f6f0c))
 * **typo:** misspelings ([9755e51](https://github.com/CorentinTh/it-tools/commit/9755e51fe216e5e25c56417152e70cb5bce26b11))
 ### Refactors
 * **responsive:** row layout for multicards on big screens ([e21230b](https://github.com/CorentinTh/it-tools/commit/e21230bbd9550ba3315607b021a60a4f9f9e1b61))
 ### [2.3.1](https://github.com/CorentinTh/it-tools/compare/v2.3.0...v2.3.1) (2022-04-24)
 ### Refactors
 * changed twitter account handler ([608ec3a](https://github.com/CorentinTh/it-tools/commit/608ec3a81db6583c8a2bf126b3868afd043c6981))
 ## [2.3.0](https://github.com/CorentinTh/it-tools/compare/v2.2.0...v2.3.0) (2022-04-22)
 ## Version 2023.05.14-77f2efc
 ### Features
 - **list-converter**: a small converter who deals with column based data and do some stuff with it (#387) (83a7b3b)
 - **new tool**: phone parser and normalizer (ce3150c)
-### Bug fixes
+* **new-tool:** html entities escape/unescape ([8e29a97](https://github.com/CorentinTh/it-tools/commit/8e29a97404ea0aa9b9b576656358c8c276b6f992))
 - **phone-parser**: use default country code (a43c546)
 - **home**: prevent weird blue border on card (3f6c8f0)
 ### Refactoring
 - **ui**: replaced some n-input with c-input-text (77f2efc)
-### Chores
+### Bug Fixes
 - **issues**: updated new tool request issue template (edae4c6)
-### Ui-lib
+* **head:** added titles for non-tool pages ([0a15892](https://github.com/CorentinTh/it-tools/commit/0a15892dde9852ff158a8fcb72d0ad6bae8bad02))
- **new-component**: added text input component in the c-lib (aad8d84)
+* **sider:** default collapsed value ([b22aa94](https://github.com/CorentinTh/it-tools/commit/b22aa941f52009118d4d3cc98277cc4c402a4c77))
- **button**: size variants (401f13f)
+* **sider:** missing href for link in footer ([c4dabcc](https://github.com/CorentinTh/it-tools/commit/c4dabccdaeac9d03163ac2588599b000e4e74562))
 * **style:** hard width for group labels ([ebf6695](https://github.com/CorentinTh/it-tools/commit/ebf6695d2533db6f37b24dc7d338f422c551c8cb))
 * **url-parser:** cleaned weird margins on dark mode ([005ebfb](https://github.com/CorentinTh/it-tools/commit/005ebfba318ece1a9c04aefb737baed5d7aafb91))
 ### Refactors
 * **lint:** linter auto fix ([086d31e](https://github.com/CorentinTh/it-tools/commit/086d31eab5b3b1a927803eab5e650585f61abe19))
 * removed useless ref and value ([b12cbe4](https://github.com/CorentinTh/it-tools/commit/b12cbe412407389186a58e4ceaa94f5b441c11ea))
 ### [2.2.1](https://github.com/CorentinTh/it-tools/compare/v2.2.0...v2.2.1) (2022-04-21)
 ### Bug Fixes
 * **head:** added titles for non-tool pages ([0a15892](https://github.com/CorentinTh/it-tools/commit/0a15892dde9852ff158a8fcb72d0ad6bae8bad02))
 * **sider:** missing href for link in footer ([c4dabcc](https://github.com/CorentinTh/it-tools/commit/c4dabccdaeac9d03163ac2588599b000e4e74562))
 * **style:** hard width for group labels ([ebf6695](https://github.com/CorentinTh/it-tools/commit/ebf6695d2533db6f37b24dc7d338f422c551c8cb))
 * **url-parser:** cleaned weird margins on dark mode ([005ebfb](https://github.com/CorentinTh/it-tools/commit/005ebfba318ece1a9c04aefb737baed5d7aafb91))
 ## [2.2.0](https://github.com/CorentinTh/it-tools/compare/v2.1.0...v2.2.0) (2022-04-18)
 ## Version 2023.04.23-92bd835
 ### Features
 - **ui-lib**: demo pages for c-lib components (92bd835)
 - **new-tool**: diff of two json objects (362f2fa)
 - **ipv4-range-expander**: expands a given IPv4 start and end address to a valid IPv4 subnet (#366) (df989e2)
 - **date converter**: auto focus main input (6d22025)
-### Bug fixes
+* **new-tool:** url parser ([2b38d6f](https://github.com/CorentinTh/it-tools/commit/2b38d6f81e34845f896b858513e35209cba29f98))
 - **ts**: cleaned legacy typechecking warning (e88c1d5)
 - **mac-address-lookup**: added copy handler on button click (c311e38)
 ### Refactoring
 - **ui-lib**: prevent c-button to shrink (61ece23)
 - **ui**: replaced naive ui cards with custom ones (f080933)
 - **clean**: removed unused lodash import (bb32513)
 - **clean**: removed useless br tags (74073f5)
 - **ui**: getting ride of naive ui buttons (c45bce3)
-## Version 2023.04.14-dbad773
+### Bug Fixes
 * **sider-footer:** fixed commit sha url ([ed9046d](https://github.com/CorentinTh/it-tools/commit/ed9046d3e1f5a7dc01c722ed139a2ae477a2d48f))
 ## [2.1.0](https://github.com/CorentinTh/it-tools/compare/v2.0.2...v2.1.0) (2022-04-18)
 ### Features
 - **new-tool**: http status codes (8355bd2)
-### Refactoring
+* **new-tool:** bcrypt ([6d5856f](https://github.com/CorentinTh/it-tools/commit/6d5856fa93d1ffbf71856c75adc24ad87dc4b49b))
- **uuid-generator**: prevent NaN in quantity (6fb4994)
+* **new-tool:** device information ([277bd5f](https://github.com/CorentinTh/it-tools/commit/277bd5f0da359fd54c5164b376007d182a9fabde))
 ### Chores
 - **release**: create a github release on new version (dbad773)
 - **version**: reset CHANGELOG content to support new format (85cb0ff)
-## Version 2023.04.14-f9b77b7
+### Refactors
 * **menu:** removed burger menu icon tooltip ([09abffb](https://github.com/CorentinTh/it-tools/commit/09abffbcf9b09cb5adc34f8754b019d0c8b60854))
 ### [2.0.2](https://github.com/CorentinTh/it-tools/compare/v2.0.1...v2.0.2) (2022-04-18)
 ### Bug Fixes
 * **git-memo:** pre scroll on overflow ([4fc303e](https://github.com/CorentinTh/it-tools/commit/4fc303e5e3f0bef9201cc002963e244a5d3be7b5))
 * **menu:** menu auto closed on mobile ([71f79a5](https://github.com/CorentinTh/it-tools/commit/71f79a5bbfe0dd5451a435c0a55e8b77ee7d3848))
 * **qr-code:** responsive layout ([cbf0b3d](https://github.com/CorentinTh/it-tools/commit/cbf0b3d6995e47d371a8fbcfccd65ba304fb08dc))
 ### Refactors
 * **crontab:** list instead of table on small screen ([6b11de2](https://github.com/CorentinTh/it-tools/commit/6b11de258a8039fe7729130ede35d47592be7cbe))
 * removed empty sources ([a14cac6](https://github.com/CorentinTh/it-tools/commit/a14cac6d5c5967a47ca76a1d1a420115114c3bbf))
 * throw an error object instead of string ([4112fa5](https://github.com/CorentinTh/it-tools/commit/4112fa532e3d4be190d52bf3b11e0d4c3625a402))
 ### [2.0.1](https://github.com/CorentinTh/it-tools/compare/v2.0.0...v2.0.1) (2022-04-16)
 ### Features
 - **new-tool**: http status codes (8355bd2)
-### Refactoring
+* **config:** added vercel.json ([2e046ad](https://github.com/CorentinTh/it-tools/commit/2e046ad09fed4a55bbf4449e3683a4150839c461))
 - **uuid-generator**: prevent NaN in quantity (6fb4994)
 ### Chores
 - **release**: create a github release on new version (f9b77b7)
 - **version**: reset CHANGELOG content to support new format (85cb0ff)
-## Version 2023.04.14-2f0d239
+### Bug Fixes
 * remove duplicate property ([d066319](https://github.com/CorentinTh/it-tools/commit/d066319b45dee35df0212c7ff407013bd7449ae3))
 * **style:** url encode/decode layout ([34480b4](https://github.com/CorentinTh/it-tools/commit/34480b4e25ffc33536b03a0ba711c480219ad553))
 ### Documentation
 * updated description ([70a3df0](https://github.com/CorentinTh/it-tools/commit/70a3df044ea86ac35c1839ac5ab624f694fdd845))
 ### Refactors
 * clean imports ([724e142](https://github.com/CorentinTh/it-tools/commit/724e142222202798ea3df7d0fb34da1e7a5216a1))
 * lint fix ([a58ae24](https://github.com/CorentinTh/it-tools/commit/a58ae24d9409728ac12fb780f2c64643087de5be))
 * ref name ([5828085](https://github.com/CorentinTh/it-tools/commit/582808597c6aadf0feb48f6aae0a29b839e0dd54))
 ## 2.0.0 (2022-04-16)
 ### Features
 - **new-tool**: http status codes (8355bd2)
-### Refactoring
+* **a11y:** aria-label on icon button ([5f50275](https://github.com/CorentinTh/it-tools/commit/5f502755d69ab21a78d9256db8a1c64f1ab82c2a))
- **uuid-generator**: prevent NaN in quantity (6fb4994)
+* added commit short sha ([668625c](https://github.com/CorentinTh/it-tools/commit/668625c6dab6e8b98f363df6c0aa3bf00a3afaa4))
 * added plausible tracker ([0808920](https://github.com/CorentinTh/it-tools/commit/0808920951b55c938537f33353a37ece96b04084))
 * added twitter link ([d126abc](https://github.com/CorentinTh/it-tools/commit/d126abc7b12a9fce778fe9883e44dca581509778))
 * footer in sider ([3f03850](https://github.com/CorentinTh/it-tools/commit/3f038503dd705ba3a5562a1e8f85a3b0e7d0be5b))
 * **layout:** menu category ([9c9be9e](https://github.com/CorentinTh/it-tools/commit/9c9be9e2e2e2c856d1af1df9d9d37a64460cd82b))
 * mobile friendly menu ([1e67fa6](https://github.com/CorentinTh/it-tools/commit/1e67fa6e0bede8c055d9e4cb9bf7f97423bc9bdf))
 * **navbar:** added github link ([d4e226e](https://github.com/CorentinTh/it-tools/commit/d4e226e09face78da794fa7e676eef85d05dde75))
 * **nav:** navigation tooltips ([b892f50](https://github.com/CorentinTh/it-tools/commit/b892f50cd633d42e6261be208bd077d92d336afb))
 * **page:** added 404 page ([3db4f91](https://github.com/CorentinTh/it-tools/commit/3db4f91c27a2ab37bb23d8feb77b6dffa9a92977))
 * **page:** home page layout ([57fd14a](https://github.com/CorentinTh/it-tools/commit/57fd14a199a253f49f3c53810490e5d31512b261))
 * persistent theme selection fallback to prefered theme ([40e9af0](https://github.com/CorentinTh/it-tools/commit/40e9af06cf28b7348152f8ec3898fa2b27ec0b21))
 * **router:** added legacy routes redirections ([dbce46b](https://github.com/CorentinTh/it-tools/commit/dbce46b470b0187a395cdd350a023641c6319582))
 * search-bar ([e8594de](https://github.com/CorentinTh/it-tools/commit/e8594de7b45102b8bc1cfb82d0839e3722d9c4c2))
 * **search:** round and clearable searchbar ([b112f5f](https://github.com/CorentinTh/it-tools/commit/b112f5f226c6b03151bbeb4fc607e449c444e667))
 * **seo:** added robots.txt and humans.txt ([cd9a3bc](https://github.com/CorentinTh/it-tools/commit/cd9a3bc9b10cf7363301e9a0d0b17f38ea640e0c))
 * **seo:** added title + description ([5f74037](https://github.com/CorentinTh/it-tools/commit/5f74037105c5e8efc5bdad2261597458cfcf26d3))
 * **seo:** pwa and icons ([b7193e8](https://github.com/CorentinTh/it-tools/commit/b7193e838ba83d0548211cff922e107a1f11f90f))
 * **share:** social image ([39746e0](https://github.com/CorentinTh/it-tools/commit/39746e07c53c22ac132ad2aaf25dd71bb6458cde))
 * **style:** dark mode ([3e92b7f](https://github.com/CorentinTh/it-tools/commit/3e92b7f1e04a709df231fce22801b55619e8faab))
 * **style:** theme overrides ([d542688](https://github.com/CorentinTh/it-tools/commit/d542688664cc9c675d1d26f4278a25f1b9e3f28d))
 * **tool:** add lch in color converter ([b5243c4](https://github.com/CorentinTh/it-tools/commit/b5243c43638f37a2d727b015bba61fab0d1b9fe9))
 * **tool:** added token generator ([40dec52](https://github.com/CorentinTh/it-tools/commit/40dec52c8467fd27eb8f3857ed72746ebaa4f509))
 * **tool:** base converter ([034c686](https://github.com/CorentinTh/it-tools/commit/034c686896d0443ea587cd152535b2227234c011))
 * **tool:** base64 string converter ([203b6a9](https://github.com/CorentinTh/it-tools/commit/203b6a9d73dcb30182b130de59920534e18b76b4))
 * **tool:** bip39-generator ([d55329f](https://github.com/CorentinTh/it-tools/commit/d55329f3abc3d3f8ad48def7d7f63b44cd768e27))
 * **tool:** bip39-generator ([765c010](https://github.com/CorentinTh/it-tools/commit/765c010700c07b2809daef0e7c694ac265ce9ddc))
 * **tool:** case converter ([7a7372d](https://github.com/CorentinTh/it-tools/commit/7a7372df191abc7ecd3fee7234d4de7aaaba03f6))
 * **tool:** color converter ([4e50b7a](https://github.com/CorentinTh/it-tools/commit/4e50b7a973e950819a52c127db2a754838cbbf8e))
 * **tool:** crontab generator ([358ff45](https://github.com/CorentinTh/it-tools/commit/358ff45ae1d9822b8a7c342515f668d25b7128b5))
 * **tool:** date-time converter ([2d9cb20](https://github.com/CorentinTh/it-tools/commit/2d9cb209b377326f4bf62067db7d5ad0c7eb7bde))
 * **tool:** encryption ([888ab2c](https://github.com/CorentinTh/it-tools/commit/888ab2cf378597e2880b6dd6a013f3bc192f2b1a))
 * **tool:** git memo ([5cd9997](https://github.com/CorentinTh/it-tools/commit/5cd9997a845f6d5f82d3ae74d3ec12603224517d))
 * **tool:** lorem ipsum generator ([5dcb2ed](https://github.com/CorentinTh/it-tools/commit/5dcb2ed95c318ea1c4134da207c844672d0fbbd8))
 * **tool:** qr-code generator ([5582d75](https://github.com/CorentinTh/it-tools/commit/5582d75927b560d9259929c787c0809634d1f8ae))
 * **tool:** random port generator ([7c540f1](https://github.com/CorentinTh/it-tools/commit/7c540f1208da749c3932aab8f2c392048c4546ae))
 * **tool:** roman-arabic numbers converter ([655019c](https://github.com/CorentinTh/it-tools/commit/655019cf23babcec2a2f1e03cac87744e3139304))
 * **tool:** text hash ([0f3b744](https://github.com/CorentinTh/it-tools/commit/0f3b7445ad1f945d9b364476147bf824ac309a6c))
 * **tool:** text statistics ([0a7c325](https://github.com/CorentinTh/it-tools/commit/0a7c3252e36a4769eedaaec4524b4ee2ae2b19c7))
 * **tool:** url encode/decode ([afac566](https://github.com/CorentinTh/it-tools/commit/afac5664c802c8480fe2c457bcfb7f5e26829cdf))
 * **tool:** uuid v4 generator ([3ae6114](https://github.com/CorentinTh/it-tools/commit/3ae61147a94791987e9e326b19063579976d8dc0))
 * **ux:** copyable input ([1859a9a](https://github.com/CorentinTh/it-tools/commit/1859a9a174010789dcd7ecefb2451e1de7b60b4c))
 ### Chores
 - **release**: create a github release on new version (2f0d239)
 - **version**: reset CHANGELOG content to support new format (85cb0ff)
-## Version 2023.04.14-474cae4
+### Bug Fixes
-### Features
+* **hash-text:** added missing toString() ([4ca5fce](https://github.com/CorentinTh/it-tools/commit/4ca5fce911c3312d56bca1ffba863b2f37841c9e))
- **new-tool**: http status codes (8355bd2)
+* **hash-text:** correct copy message ([bab92ef](https://github.com/CorentinTh/it-tools/commit/bab92ef84f66372df40ce385c2949518ed158427))
 * removed global define ([889d594](https://github.com/CorentinTh/it-tools/commit/889d59499212a449ee460c68c480648e337a7ecb))
 * **style:** working dark mode persistence ([3ae8728](https://github.com/CorentinTh/it-tools/commit/3ae872847b00d65e4e2e629775d479a3333450f1))
 * **validation:** proper rules ([11d8110](https://github.com/CorentinTh/it-tools/commit/11d8110226e22e30ae16d297628c1d252a93be9e))
 ### Refactoring
 - **uuid-generator**: prevent NaN in quantity (6fb4994)
-### Chores
+### Refactors
 - **release**: create a github release on new version (474cae4)
 - **version**: reset CHANGELOG content to support new format (85cb0ff)
-## Version v2023.4.13-dce9ff9
+* better icon ([0af7d81](https://github.com/CorentinTh/it-tools/commit/0af7d81abd987aa5d1b0321c25a65131d978e929))
 * **clean:** removed extra console.log ([82606f6](https://github.com/CorentinTh/it-tools/commit/82606f6a477fce2041ab33adc7e95bcba4343e2b))
 * embeded sider scrollbar ([f872972](https://github.com/CorentinTh/it-tools/commit/f872972e69aeb4fde4c17f0c122ca3fd4aa1c56c))
 * icon sizes ([9bb7fc4](https://github.com/CorentinTh/it-tools/commit/9bb7fc47aa70bdc5083d0883f1496fac63f812ea))
 * menu option key ([390ef93](https://github.com/CorentinTh/it-tools/commit/390ef93232dc1b448022a0c09d36367adad9d221))
 * **page:** removed unused import ([f70fce6](https://github.com/CorentinTh/it-tools/commit/f70fce65e20989eb19b0f0976e756a43edf02e9d))
 * removed theme editor ([8559fbd](https://github.com/CorentinTh/it-tools/commit/8559fbd7744fe82b7702a5c0eb77a8d627c5a73d))
 * removed unused files ([c1e7669](https://github.com/CorentinTh/it-tools/commit/c1e76695e4a16b8312ab6031a1bdfb6368946677))
 * removed unused files ([8d9f924](https://github.com/CorentinTh/it-tools/commit/8d9f92417744a5fbd9b4108e851005f23de18b53))
 * **style:** cleaner layout ([1d09a01](https://github.com/CorentinTh/it-tools/commit/1d09a01bb25088493cc9b7f2cb7f8a8aa69ac9e9))
 * **style:** improve style for tool-card ([65a6896](https://github.com/CorentinTh/it-tools/commit/65a6896563d16f30420424e274bd306e3e9182c8))
 * **style:** label width ([fd4426d](https://github.com/CorentinTh/it-tools/commit/fd4426d246ada553528759f761c8192df85c0d44))
 * **style:** menu item height ([8951e87](https://github.com/CorentinTh/it-tools/commit/8951e87c143fda74be32bae5b28e009556d7086e))
 * **style:** menu scrollbar ([483cf66](https://github.com/CorentinTh/it-tools/commit/483cf66db992169d361487c8461938810793b978))
 * **style:** port display ([2632f24](https://github.com/CorentinTh/it-tools/commit/2632f24cc89af7dd12f7a0c1a8b58983a1bb78d8))
 * **style:** removed extra br ([b44539c](https://github.com/CorentinTh/it-tools/commit/b44539c1820defbaaa6dfe83a76c72982a641971))
 * **style:** replaced scss style block to less ([655d9d2](https://github.com/CorentinTh/it-tools/commit/655d9d22e3136bdf1dee29310ab04cf38596bdc8))
 * **style:** responsive layout ([2df3f53](https://github.com/CorentinTh/it-tools/commit/2df3f53b78bbe419763fd359788a4b0b5710e4b7))
 * **style:** updated linter config ([6b58ec5](https://github.com/CorentinTh/it-tools/commit/6b58ec554a0de91139f16d67cec42536d093d5fb))
-_Diff not available_
+
 ### Documentation
 * added new tool creation procedure ([8177883](https://github.com/CorentinTh/it-tools/commit/81778834e6a79725c42eae1772935682ce7580c6))
 * updated readme ([1134e0b](https://github.com/CorentinTh/it-tools/commit/1134e0b822edbc25ce9ff83007bf5d331a1becbd))
--- a/14
+++ b/14
@@ -1,14 +0,0 @@
 # build stage
 FROM node:lts-alpine AS build-stage
 WORKDIR /app
 COPY . .
 RUN npm install -g pnpm
 RUN pnpm i --frozen-lockfile
 RUN pnpm build
 # production stage
 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;"]
--- a/README.md
+++ b/README.md
@@ -6,93 +6,50 @@ Useful tools for developer and people working in IT. [Have a look !](https://it-
 Please check the [issues](https://github.com/CorentinTh/it-tools/issues) to see if some feature listed to be implemented.
-You have an idea of a tool? Submit a [feature request](https://github.com/CorentinTh/it-tools/issues/new/choose)!
+You have an idea of a tool? Submit a [feature request](https://github.com/CorentinTh/it-tools/issues/new?assignees=corentinth&labels=&template=feature_request.md&title=)!
 ## Self host
 Self host solutions for your homelab
 **From docker hub:**
 ```sh
 docker run -d --name it-tools --restart unless-stopped -p 8080:80 corentinth/it-tools:latest
 ```
 **From github packages:**
 ```sh
 docker run -d --name it-tools --restart unless-stopped -p 8080:80 ghcr.io/corentinth/it-tools:latest
 ```
 **Other solutions:**
 - [Cloudron](https://www.cloudron.io/store/tech.ittools.cloudron.html)
 - [Tipi](https://www.runtipi.io/docs/apps-available)
 - [Unraid](https://unraid.net/community/apps?q=it-tools)
 ## Contribute
 ### Recommended IDE Setup
-[VSCode](https://code.visualstudio.com/) with the following extensions:
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.vscode-typescript-vue-plugin).
- [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur)
+### Node version
 - [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
 - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
 - [i18n Ally](https://marketplace.visualstudio.com/items?itemName=lokalise.i18n-ally)
-with the following settings:
+Ensure you have the correct node/npm version
-```json
+```sh
-{
+nvm use
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "i18n-ally.localesPaths": ["locales", "src/tools/*/locales"],
  "i18n-ally.keystyle": "nested"
 }
 ```
 ### Type Support for `.vue` Imports in TS
 TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
 If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
 1. Disable the built-in TypeScript Extension
   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
 2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
 ### Project Setup
 ```sh
-pnpm install
+npm install
 ```
-### Compile and Hot-Reload for Development
+#### Compile and Hot-Reload for Development
 ```sh
-pnpm dev
+npm run dev
 ```
-### Type-Check, Compile and Minify for Production
+#### Type-Check, Compile and Minify for Production
 ```sh
-pnpm build
+npm run build
 ```
-### Run Unit Tests with [Vitest](https://vitest.dev/)
+#### Run Unit Tests with [Vitest](https://vitest.dev/)
 ```sh
-pnpm test
+npm run test
 ```
-### Lint with [ESLint](https://eslint.org/)
+#### Lint with [ESLint](https://eslint.org/)
 ```sh
-pnpm lint
+npm run lint
 ```
 ### Create a new tool
@@ -100,10 +57,10 @@ pnpm lint
 To create a new tool, there is a script that generate the boilerplate of the new tool, simply run:
 ```sh
-pnpm run script:create-new-tool my-tool-name
+node scripts/create-tool.mjs 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.
+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 inported tool in the proper category and develop the tool.
 ## Credits
@@ -111,9 +68,12 @@ Coded with ❤️ by [Corentin Thomasset](//corentin-thomasset.fr).
 This project is continuously deployed using [vercel.com](https://vercel.com).
 <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>
 ## License
 This project is under the [GNU GPLv3](LICENSE).
--- a/auto-imports.d.ts
+++ b/auto-imports.d.ts
@@ -1,862 +0,0 @@
 /* eslint-disable */
 /* prettier-ignore */
 // @ts-nocheck
 // Generated by unplugin-auto-import
 export {}
 declare global {
  const EffectScope: typeof import('vue')['EffectScope']
  const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
  const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
  const computed: typeof import('vue')['computed']
  const computedAsync: typeof import('@vueuse/core')['computedAsync']
  const computedEager: typeof import('@vueuse/core')['computedEager']
  const computedInject: typeof import('@vueuse/core')['computedInject']
  const computedWithControl: typeof import('@vueuse/core')['computedWithControl']
  const controlledComputed: typeof import('@vueuse/core')['controlledComputed']
  const controlledRef: typeof import('@vueuse/core')['controlledRef']
  const createApp: typeof import('vue')['createApp']
  const createEventHook: typeof import('@vueuse/core')['createEventHook']
  const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
  const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
  const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
  const createReusableTemplate: typeof import('@vueuse/core')['createReusableTemplate']
  const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
  const createTemplatePromise: typeof import('@vueuse/core')['createTemplatePromise']
  const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
  const customRef: typeof import('vue')['customRef']
  const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
  const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
  const defineComponent: typeof import('vue')['defineComponent']
  const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
  const effectScope: typeof import('vue')['effectScope']
  const extendRef: typeof import('@vueuse/core')['extendRef']
  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
  const getCurrentScope: typeof import('vue')['getCurrentScope']
  const h: typeof import('vue')['h']
  const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
  const inject: typeof import('vue')['inject']
  const isDefined: typeof import('@vueuse/core')['isDefined']
  const isProxy: typeof import('vue')['isProxy']
  const isReactive: typeof import('vue')['isReactive']
  const isReadonly: typeof import('vue')['isReadonly']
  const isRef: typeof import('vue')['isRef']
  const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
  const markRaw: typeof import('vue')['markRaw']
  const nextTick: typeof import('vue')['nextTick']
  const onActivated: typeof import('vue')['onActivated']
  const onBeforeMount: typeof import('vue')['onBeforeMount']
  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
  const onClickOutside: typeof import('@vueuse/core')['onClickOutside']
  const onDeactivated: typeof import('vue')['onDeactivated']
  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
  const onKeyStroke: typeof import('@vueuse/core')['onKeyStroke']
  const onLongPress: typeof import('@vueuse/core')['onLongPress']
  const onMounted: typeof import('vue')['onMounted']
  const onRenderTracked: typeof import('vue')['onRenderTracked']
  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
  const onScopeDispose: typeof import('vue')['onScopeDispose']
  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
  const onStartTyping: typeof import('@vueuse/core')['onStartTyping']
  const onUnmounted: typeof import('vue')['onUnmounted']
  const onUpdated: typeof import('vue')['onUpdated']
  const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
  const provide: typeof import('vue')['provide']
  const reactify: typeof import('@vueuse/core')['reactify']
  const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
  const reactive: typeof import('vue')['reactive']
  const reactiveComputed: typeof import('@vueuse/core')['reactiveComputed']
  const reactiveOmit: typeof import('@vueuse/core')['reactiveOmit']
  const reactivePick: typeof import('@vueuse/core')['reactivePick']
  const readonly: typeof import('vue')['readonly']
  const ref: typeof import('vue')['ref']
  const refAutoReset: typeof import('@vueuse/core')['refAutoReset']
  const refDebounced: typeof import('@vueuse/core')['refDebounced']
  const refDefault: typeof import('@vueuse/core')['refDefault']
  const refThrottled: typeof import('@vueuse/core')['refThrottled']
  const refWithControl: typeof import('@vueuse/core')['refWithControl']
  const resolveComponent: typeof import('vue')['resolveComponent']
  const resolveRef: typeof import('@vueuse/core')['resolveRef']
  const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
  const shallowReactive: typeof import('vue')['shallowReactive']
  const shallowReadonly: typeof import('vue')['shallowReadonly']
  const shallowRef: typeof import('vue')['shallowRef']
  const syncRef: typeof import('@vueuse/core')['syncRef']
  const syncRefs: typeof import('@vueuse/core')['syncRefs']
  const templateRef: typeof import('@vueuse/core')['templateRef']
  const throttledRef: typeof import('@vueuse/core')['throttledRef']
  const throttledWatch: typeof import('@vueuse/core')['throttledWatch']
  const toRaw: typeof import('vue')['toRaw']
  const toReactive: typeof import('@vueuse/core')['toReactive']
  const toRef: typeof import('vue')['toRef']
  const toRefs: typeof import('vue')['toRefs']
  const toValue: typeof import('vue')['toValue']
  const triggerRef: typeof import('vue')['triggerRef']
  const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
  const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
  const tryOnMounted: typeof import('@vueuse/core')['tryOnMounted']
  const tryOnScopeDispose: typeof import('@vueuse/core')['tryOnScopeDispose']
  const tryOnUnmounted: typeof import('@vueuse/core')['tryOnUnmounted']
  const unref: typeof import('vue')['unref']
  const unrefElement: typeof import('@vueuse/core')['unrefElement']
  const until: typeof import('@vueuse/core')['until']
  const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
  const useAnimate: typeof import('@vueuse/core')['useAnimate']
  const useArrayDifference: typeof import('@vueuse/core')['useArrayDifference']
  const useArrayEvery: typeof import('@vueuse/core')['useArrayEvery']
  const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter']
  const useArrayFind: typeof import('@vueuse/core')['useArrayFind']
  const useArrayFindIndex: typeof import('@vueuse/core')['useArrayFindIndex']
  const useArrayFindLast: typeof import('@vueuse/core')['useArrayFindLast']
  const useArrayIncludes: typeof import('@vueuse/core')['useArrayIncludes']
  const useArrayJoin: typeof import('@vueuse/core')['useArrayJoin']
  const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
  const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
  const useArraySome: typeof import('@vueuse/core')['useArraySome']
  const useArrayUnique: typeof import('@vueuse/core')['useArrayUnique']
  const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
  const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
  const useAttrs: typeof import('vue')['useAttrs']
  const useBase64: typeof import('@vueuse/core')['useBase64']
  const useBattery: typeof import('@vueuse/core')['useBattery']
  const useBluetooth: typeof import('@vueuse/core')['useBluetooth']
  const useBreakpoints: typeof import('@vueuse/core')['useBreakpoints']
  const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel']
  const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
  const useCached: typeof import('@vueuse/core')['useCached']
  const useClipboard: typeof import('@vueuse/core')['useClipboard']
  const useCloned: typeof import('@vueuse/core')['useCloned']
  const useColorMode: typeof import('@vueuse/core')['useColorMode']
  const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
  const useCounter: typeof import('@vueuse/core')['useCounter']
  const useCssModule: typeof import('vue')['useCssModule']
  const useCssVar: typeof import('@vueuse/core')['useCssVar']
  const useCssVars: typeof import('vue')['useCssVars']
  const useCurrentElement: typeof import('@vueuse/core')['useCurrentElement']
  const useCycleList: typeof import('@vueuse/core')['useCycleList']
  const useDark: typeof import('@vueuse/core')['useDark']
  const useDateFormat: typeof import('@vueuse/core')['useDateFormat']
  const useDebounce: typeof import('@vueuse/core')['useDebounce']
  const useDebounceFn: typeof import('@vueuse/core')['useDebounceFn']
  const useDebouncedRefHistory: typeof import('@vueuse/core')['useDebouncedRefHistory']
  const useDeviceMotion: typeof import('@vueuse/core')['useDeviceMotion']
  const useDeviceOrientation: typeof import('@vueuse/core')['useDeviceOrientation']
  const useDevicePixelRatio: typeof import('@vueuse/core')['useDevicePixelRatio']
  const useDevicesList: typeof import('@vueuse/core')['useDevicesList']
  const useDialog: typeof import('naive-ui')['useDialog']
  const useDisplayMedia: typeof import('@vueuse/core')['useDisplayMedia']
  const useDocumentVisibility: typeof import('@vueuse/core')['useDocumentVisibility']
  const useDraggable: typeof import('@vueuse/core')['useDraggable']
  const useDropZone: typeof import('@vueuse/core')['useDropZone']
  const useElementBounding: typeof import('@vueuse/core')['useElementBounding']
  const useElementByPoint: typeof import('@vueuse/core')['useElementByPoint']
  const useElementHover: typeof import('@vueuse/core')['useElementHover']
  const useElementSize: typeof import('@vueuse/core')['useElementSize']
  const useElementVisibility: typeof import('@vueuse/core')['useElementVisibility']
  const useEventBus: typeof import('@vueuse/core')['useEventBus']
  const useEventListener: typeof import('@vueuse/core')['useEventListener']
  const useEventSource: typeof import('@vueuse/core')['useEventSource']
  const useEyeDropper: typeof import('@vueuse/core')['useEyeDropper']
  const useFavicon: typeof import('@vueuse/core')['useFavicon']
  const useFetch: typeof import('@vueuse/core')['useFetch']
  const useFileDialog: typeof import('@vueuse/core')['useFileDialog']
  const useFileSystemAccess: typeof import('@vueuse/core')['useFileSystemAccess']
  const useFocus: typeof import('@vueuse/core')['useFocus']
  const useFocusWithin: typeof import('@vueuse/core')['useFocusWithin']
  const useFps: typeof import('@vueuse/core')['useFps']
  const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
  const useGamepad: typeof import('@vueuse/core')['useGamepad']
  const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
  const useI18n: typeof import('vue-i18n')['useI18n']
  const useIdle: typeof import('@vueuse/core')['useIdle']
  const useImage: typeof import('@vueuse/core')['useImage']
  const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
  const useIntersectionObserver: typeof import('@vueuse/core')['useIntersectionObserver']
  const useInterval: typeof import('@vueuse/core')['useInterval']
  const useIntervalFn: typeof import('@vueuse/core')['useIntervalFn']
  const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier']
  const useLastChanged: typeof import('@vueuse/core')['useLastChanged']
  const useLink: typeof import('vue-router')['useLink']
  const useLoadingBar: typeof import('naive-ui')['useLoadingBar']
  const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
  const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys']
  const useManualRefHistory: typeof import('@vueuse/core')['useManualRefHistory']
  const useMediaControls: typeof import('@vueuse/core')['useMediaControls']
  const useMediaQuery: typeof import('@vueuse/core')['useMediaQuery']
  const useMemoize: typeof import('@vueuse/core')['useMemoize']
  const useMemory: typeof import('@vueuse/core')['useMemory']
  const useMessage: typeof import('naive-ui')['useMessage']
  const useMounted: typeof import('@vueuse/core')['useMounted']
  const useMouse: typeof import('@vueuse/core')['useMouse']
  const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
  const useMousePressed: typeof import('@vueuse/core')['useMousePressed']
  const useMutationObserver: typeof import('@vueuse/core')['useMutationObserver']
  const useNavigatorLanguage: typeof import('@vueuse/core')['useNavigatorLanguage']
  const useNetwork: typeof import('@vueuse/core')['useNetwork']
  const useNotification: typeof import('naive-ui')['useNotification']
  const useNow: typeof import('@vueuse/core')['useNow']
  const useObjectUrl: typeof import('@vueuse/core')['useObjectUrl']
  const useOffsetPagination: typeof import('@vueuse/core')['useOffsetPagination']
  const useOnline: typeof import('@vueuse/core')['useOnline']
  const usePageLeave: typeof import('@vueuse/core')['usePageLeave']
  const useParallax: typeof import('@vueuse/core')['useParallax']
  const useParentElement: typeof import('@vueuse/core')['useParentElement']
  const usePerformanceObserver: typeof import('@vueuse/core')['usePerformanceObserver']
  const usePermission: typeof import('@vueuse/core')['usePermission']
  const usePointer: typeof import('@vueuse/core')['usePointer']
  const usePointerLock: typeof import('@vueuse/core')['usePointerLock']
  const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe']
  const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme']
  const usePreferredContrast: typeof import('@vueuse/core')['usePreferredContrast']
  const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
  const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
  const usePreferredReducedMotion: typeof import('@vueuse/core')['usePreferredReducedMotion']
  const usePrevious: typeof import('@vueuse/core')['usePrevious']
  const useRafFn: typeof import('@vueuse/core')['useRafFn']
  const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
  const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
  const useRoute: typeof import('vue-router')['useRoute']
  const useRouter: typeof import('vue-router')['useRouter']
  const useScreenOrientation: typeof import('@vueuse/core')['useScreenOrientation']
  const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
  const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
  const useScroll: typeof import('@vueuse/core')['useScroll']
  const useScrollLock: typeof import('@vueuse/core')['useScrollLock']
  const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
  const useShare: typeof import('@vueuse/core')['useShare']
  const useSlots: typeof import('vue')['useSlots']
  const useSorted: typeof import('@vueuse/core')['useSorted']
  const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
  const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
  const useStepper: typeof import('@vueuse/core')['useStepper']
  const useStorage: typeof import('@vueuse/core')['useStorage']
  const useStorageAsync: typeof import('@vueuse/core')['useStorageAsync']
  const useStyleTag: typeof import('@vueuse/core')['useStyleTag']
  const useSupported: typeof import('@vueuse/core')['useSupported']
  const useSwipe: typeof import('@vueuse/core')['useSwipe']
  const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
  const useTextDirection: typeof import('@vueuse/core')['useTextDirection']
  const useTextSelection: typeof import('@vueuse/core')['useTextSelection']
  const useTextareaAutosize: typeof import('@vueuse/core')['useTextareaAutosize']
  const useThrottle: typeof import('@vueuse/core')['useThrottle']
  const useThrottleFn: typeof import('@vueuse/core')['useThrottleFn']
  const useThrottledRefHistory: typeof import('@vueuse/core')['useThrottledRefHistory']
  const useTimeAgo: typeof import('@vueuse/core')['useTimeAgo']
  const useTimeout: typeof import('@vueuse/core')['useTimeout']
  const useTimeoutFn: typeof import('@vueuse/core')['useTimeoutFn']
  const useTimeoutPoll: typeof import('@vueuse/core')['useTimeoutPoll']
  const useTimestamp: typeof import('@vueuse/core')['useTimestamp']
  const useTitle: typeof import('@vueuse/core')['useTitle']
  const useToNumber: typeof import('@vueuse/core')['useToNumber']
  const useToString: typeof import('@vueuse/core')['useToString']
  const useToggle: typeof import('@vueuse/core')['useToggle']
  const useTransition: typeof import('@vueuse/core')['useTransition']
  const useUrlSearchParams: typeof import('@vueuse/core')['useUrlSearchParams']
  const useUserMedia: typeof import('@vueuse/core')['useUserMedia']
  const useVModel: typeof import('@vueuse/core')['useVModel']
  const useVModels: typeof import('@vueuse/core')['useVModels']
  const useVibrate: typeof import('@vueuse/core')['useVibrate']
  const useVirtualList: typeof import('@vueuse/core')['useVirtualList']
  const useWakeLock: typeof import('@vueuse/core')['useWakeLock']
  const useWebNotification: typeof import('@vueuse/core')['useWebNotification']
  const useWebSocket: typeof import('@vueuse/core')['useWebSocket']
  const useWebWorker: typeof import('@vueuse/core')['useWebWorker']
  const useWebWorkerFn: typeof import('@vueuse/core')['useWebWorkerFn']
  const useWindowFocus: typeof import('@vueuse/core')['useWindowFocus']
  const useWindowScroll: typeof import('@vueuse/core')['useWindowScroll']
  const useWindowSize: typeof import('@vueuse/core')['useWindowSize']
  const watch: typeof import('vue')['watch']
  const watchArray: typeof import('@vueuse/core')['watchArray']
  const watchAtMost: typeof import('@vueuse/core')['watchAtMost']
  const watchDebounced: typeof import('@vueuse/core')['watchDebounced']
  const watchDeep: typeof import('@vueuse/core')['watchDeep']
  const watchEffect: typeof import('vue')['watchEffect']
  const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable']
  const watchImmediate: typeof import('@vueuse/core')['watchImmediate']
  const watchOnce: typeof import('@vueuse/core')['watchOnce']
  const watchPausable: typeof import('@vueuse/core')['watchPausable']
  const watchPostEffect: typeof import('vue')['watchPostEffect']
  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
  const watchThrottled: typeof import('@vueuse/core')['watchThrottled']
  const watchTriggerable: typeof import('@vueuse/core')['watchTriggerable']
  const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter']
  const whenever: typeof import('@vueuse/core')['whenever']
 }
 // for type re-export
 declare global {
  // @ts-ignore
  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from 'vue'
 }
 // for vue template auto import
 import { UnwrapRef } from 'vue'
 declare module 'vue' {
  interface ComponentCustomProperties {
    readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
    readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
    readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
    readonly computed: UnwrapRef<typeof import('vue')['computed']>
    readonly computedAsync: UnwrapRef<typeof import('@vueuse/core')['computedAsync']>
    readonly computedEager: UnwrapRef<typeof import('@vueuse/core')['computedEager']>
    readonly computedInject: UnwrapRef<typeof import('@vueuse/core')['computedInject']>
    readonly computedWithControl: UnwrapRef<typeof import('@vueuse/core')['computedWithControl']>
    readonly controlledComputed: UnwrapRef<typeof import('@vueuse/core')['controlledComputed']>
    readonly controlledRef: UnwrapRef<typeof import('@vueuse/core')['controlledRef']>
    readonly createApp: UnwrapRef<typeof import('vue')['createApp']>
    readonly createEventHook: UnwrapRef<typeof import('@vueuse/core')['createEventHook']>
    readonly createGlobalState: UnwrapRef<typeof import('@vueuse/core')['createGlobalState']>
    readonly createInjectionState: UnwrapRef<typeof import('@vueuse/core')['createInjectionState']>
    readonly createReactiveFn: UnwrapRef<typeof import('@vueuse/core')['createReactiveFn']>
    readonly createReusableTemplate: UnwrapRef<typeof import('@vueuse/core')['createReusableTemplate']>
    readonly createSharedComposable: UnwrapRef<typeof import('@vueuse/core')['createSharedComposable']>
    readonly createTemplatePromise: UnwrapRef<typeof import('@vueuse/core')['createTemplatePromise']>
    readonly createUnrefFn: UnwrapRef<typeof import('@vueuse/core')['createUnrefFn']>
    readonly customRef: UnwrapRef<typeof import('vue')['customRef']>
    readonly debouncedRef: UnwrapRef<typeof import('@vueuse/core')['debouncedRef']>
    readonly debouncedWatch: UnwrapRef<typeof import('@vueuse/core')['debouncedWatch']>
    readonly defineAsyncComponent: UnwrapRef<typeof import('vue')['defineAsyncComponent']>
    readonly defineComponent: UnwrapRef<typeof import('vue')['defineComponent']>
    readonly eagerComputed: UnwrapRef<typeof import('@vueuse/core')['eagerComputed']>
    readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
    readonly extendRef: UnwrapRef<typeof import('@vueuse/core')['extendRef']>
    readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
    readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
    readonly h: UnwrapRef<typeof import('vue')['h']>
    readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
    readonly inject: UnwrapRef<typeof import('vue')['inject']>
    readonly isDefined: UnwrapRef<typeof import('@vueuse/core')['isDefined']>
    readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
    readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
    readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']>
    readonly isRef: UnwrapRef<typeof import('vue')['isRef']>
    readonly makeDestructurable: UnwrapRef<typeof import('@vueuse/core')['makeDestructurable']>
    readonly markRaw: UnwrapRef<typeof import('vue')['markRaw']>
    readonly nextTick: UnwrapRef<typeof import('vue')['nextTick']>
    readonly onActivated: UnwrapRef<typeof import('vue')['onActivated']>
    readonly onBeforeMount: UnwrapRef<typeof import('vue')['onBeforeMount']>
    readonly onBeforeRouteLeave: UnwrapRef<typeof import('vue-router')['onBeforeRouteLeave']>
    readonly onBeforeRouteUpdate: UnwrapRef<typeof import('vue-router')['onBeforeRouteUpdate']>
    readonly onBeforeUnmount: UnwrapRef<typeof import('vue')['onBeforeUnmount']>
    readonly onBeforeUpdate: UnwrapRef<typeof import('vue')['onBeforeUpdate']>
    readonly onClickOutside: UnwrapRef<typeof import('@vueuse/core')['onClickOutside']>
    readonly onDeactivated: UnwrapRef<typeof import('vue')['onDeactivated']>
    readonly onErrorCaptured: UnwrapRef<typeof import('vue')['onErrorCaptured']>
    readonly onKeyStroke: UnwrapRef<typeof import('@vueuse/core')['onKeyStroke']>
    readonly onLongPress: UnwrapRef<typeof import('@vueuse/core')['onLongPress']>
    readonly onMounted: UnwrapRef<typeof import('vue')['onMounted']>
    readonly onRenderTracked: UnwrapRef<typeof import('vue')['onRenderTracked']>
    readonly onRenderTriggered: UnwrapRef<typeof import('vue')['onRenderTriggered']>
    readonly onScopeDispose: UnwrapRef<typeof import('vue')['onScopeDispose']>
    readonly onServerPrefetch: UnwrapRef<typeof import('vue')['onServerPrefetch']>
    readonly onStartTyping: UnwrapRef<typeof import('@vueuse/core')['onStartTyping']>
    readonly onUnmounted: UnwrapRef<typeof import('vue')['onUnmounted']>
    readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
    readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']>
    readonly provide: UnwrapRef<typeof import('vue')['provide']>
    readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
    readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']>
    readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
    readonly reactiveComputed: UnwrapRef<typeof import('@vueuse/core')['reactiveComputed']>
    readonly reactiveOmit: UnwrapRef<typeof import('@vueuse/core')['reactiveOmit']>
    readonly reactivePick: UnwrapRef<typeof import('@vueuse/core')['reactivePick']>
    readonly readonly: UnwrapRef<typeof import('vue')['readonly']>
    readonly ref: UnwrapRef<typeof import('vue')['ref']>
    readonly refAutoReset: UnwrapRef<typeof import('@vueuse/core')['refAutoReset']>
    readonly refDebounced: UnwrapRef<typeof import('@vueuse/core')['refDebounced']>
    readonly refDefault: UnwrapRef<typeof import('@vueuse/core')['refDefault']>
    readonly refThrottled: UnwrapRef<typeof import('@vueuse/core')['refThrottled']>
    readonly refWithControl: UnwrapRef<typeof import('@vueuse/core')['refWithControl']>
    readonly resolveComponent: UnwrapRef<typeof import('vue')['resolveComponent']>
    readonly resolveRef: UnwrapRef<typeof import('@vueuse/core')['resolveRef']>
    readonly resolveUnref: UnwrapRef<typeof import('@vueuse/core')['resolveUnref']>
    readonly shallowReactive: UnwrapRef<typeof import('vue')['shallowReactive']>
    readonly shallowReadonly: UnwrapRef<typeof import('vue')['shallowReadonly']>
    readonly shallowRef: UnwrapRef<typeof import('vue')['shallowRef']>
    readonly syncRef: UnwrapRef<typeof import('@vueuse/core')['syncRef']>
    readonly syncRefs: UnwrapRef<typeof import('@vueuse/core')['syncRefs']>
    readonly templateRef: UnwrapRef<typeof import('@vueuse/core')['templateRef']>
    readonly throttledRef: UnwrapRef<typeof import('@vueuse/core')['throttledRef']>
    readonly throttledWatch: UnwrapRef<typeof import('@vueuse/core')['throttledWatch']>
    readonly toRaw: UnwrapRef<typeof import('vue')['toRaw']>
    readonly toReactive: UnwrapRef<typeof import('@vueuse/core')['toReactive']>
    readonly toRef: UnwrapRef<typeof import('vue')['toRef']>
    readonly toRefs: UnwrapRef<typeof import('vue')['toRefs']>
    readonly toValue: UnwrapRef<typeof import('vue')['toValue']>
    readonly triggerRef: UnwrapRef<typeof import('vue')['triggerRef']>
    readonly tryOnBeforeMount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeMount']>
    readonly tryOnBeforeUnmount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeUnmount']>
    readonly tryOnMounted: UnwrapRef<typeof import('@vueuse/core')['tryOnMounted']>
    readonly tryOnScopeDispose: UnwrapRef<typeof import('@vueuse/core')['tryOnScopeDispose']>
    readonly tryOnUnmounted: UnwrapRef<typeof import('@vueuse/core')['tryOnUnmounted']>
    readonly unref: UnwrapRef<typeof import('vue')['unref']>
    readonly unrefElement: UnwrapRef<typeof import('@vueuse/core')['unrefElement']>
    readonly until: UnwrapRef<typeof import('@vueuse/core')['until']>
    readonly useActiveElement: UnwrapRef<typeof import('@vueuse/core')['useActiveElement']>
    readonly useAnimate: UnwrapRef<typeof import('@vueuse/core')['useAnimate']>
    readonly useArrayDifference: UnwrapRef<typeof import('@vueuse/core')['useArrayDifference']>
    readonly useArrayEvery: UnwrapRef<typeof import('@vueuse/core')['useArrayEvery']>
    readonly useArrayFilter: UnwrapRef<typeof import('@vueuse/core')['useArrayFilter']>
    readonly useArrayFind: UnwrapRef<typeof import('@vueuse/core')['useArrayFind']>
    readonly useArrayFindIndex: UnwrapRef<typeof import('@vueuse/core')['useArrayFindIndex']>
    readonly useArrayFindLast: UnwrapRef<typeof import('@vueuse/core')['useArrayFindLast']>
    readonly useArrayIncludes: UnwrapRef<typeof import('@vueuse/core')['useArrayIncludes']>
    readonly useArrayJoin: UnwrapRef<typeof import('@vueuse/core')['useArrayJoin']>
    readonly useArrayMap: UnwrapRef<typeof import('@vueuse/core')['useArrayMap']>
    readonly useArrayReduce: UnwrapRef<typeof import('@vueuse/core')['useArrayReduce']>
    readonly useArraySome: UnwrapRef<typeof import('@vueuse/core')['useArraySome']>
    readonly useArrayUnique: UnwrapRef<typeof import('@vueuse/core')['useArrayUnique']>
    readonly useAsyncQueue: UnwrapRef<typeof import('@vueuse/core')['useAsyncQueue']>
    readonly useAsyncState: UnwrapRef<typeof import('@vueuse/core')['useAsyncState']>
    readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>
    readonly useBase64: UnwrapRef<typeof import('@vueuse/core')['useBase64']>
    readonly useBattery: UnwrapRef<typeof import('@vueuse/core')['useBattery']>
    readonly useBluetooth: UnwrapRef<typeof import('@vueuse/core')['useBluetooth']>
    readonly useBreakpoints: UnwrapRef<typeof import('@vueuse/core')['useBreakpoints']>
    readonly useBroadcastChannel: UnwrapRef<typeof import('@vueuse/core')['useBroadcastChannel']>
    readonly useBrowserLocation: UnwrapRef<typeof import('@vueuse/core')['useBrowserLocation']>
    readonly useCached: UnwrapRef<typeof import('@vueuse/core')['useCached']>
    readonly useClipboard: UnwrapRef<typeof import('@vueuse/core')['useClipboard']>
    readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']>
    readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']>
    readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']>
    readonly useCounter: UnwrapRef<typeof import('@vueuse/core')['useCounter']>
    readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>
    readonly useCssVar: UnwrapRef<typeof import('@vueuse/core')['useCssVar']>
    readonly useCssVars: UnwrapRef<typeof import('vue')['useCssVars']>
    readonly useCurrentElement: UnwrapRef<typeof import('@vueuse/core')['useCurrentElement']>
    readonly useCycleList: UnwrapRef<typeof import('@vueuse/core')['useCycleList']>
    readonly useDark: UnwrapRef<typeof import('@vueuse/core')['useDark']>
    readonly useDateFormat: UnwrapRef<typeof import('@vueuse/core')['useDateFormat']>
    readonly useDebounce: UnwrapRef<typeof import('@vueuse/core')['useDebounce']>
    readonly useDebounceFn: UnwrapRef<typeof import('@vueuse/core')['useDebounceFn']>
    readonly useDebouncedRefHistory: UnwrapRef<typeof import('@vueuse/core')['useDebouncedRefHistory']>
    readonly useDeviceMotion: UnwrapRef<typeof import('@vueuse/core')['useDeviceMotion']>
    readonly useDeviceOrientation: UnwrapRef<typeof import('@vueuse/core')['useDeviceOrientation']>
    readonly useDevicePixelRatio: UnwrapRef<typeof import('@vueuse/core')['useDevicePixelRatio']>
    readonly useDevicesList: UnwrapRef<typeof import('@vueuse/core')['useDevicesList']>
    readonly useDialog: UnwrapRef<typeof import('naive-ui')['useDialog']>
    readonly useDisplayMedia: UnwrapRef<typeof import('@vueuse/core')['useDisplayMedia']>
    readonly useDocumentVisibility: UnwrapRef<typeof import('@vueuse/core')['useDocumentVisibility']>
    readonly useDraggable: UnwrapRef<typeof import('@vueuse/core')['useDraggable']>
    readonly useDropZone: UnwrapRef<typeof import('@vueuse/core')['useDropZone']>
    readonly useElementBounding: UnwrapRef<typeof import('@vueuse/core')['useElementBounding']>
    readonly useElementByPoint: UnwrapRef<typeof import('@vueuse/core')['useElementByPoint']>
    readonly useElementHover: UnwrapRef<typeof import('@vueuse/core')['useElementHover']>
    readonly useElementSize: UnwrapRef<typeof import('@vueuse/core')['useElementSize']>
    readonly useElementVisibility: UnwrapRef<typeof import('@vueuse/core')['useElementVisibility']>
    readonly useEventBus: UnwrapRef<typeof import('@vueuse/core')['useEventBus']>
    readonly useEventListener: UnwrapRef<typeof import('@vueuse/core')['useEventListener']>
    readonly useEventSource: UnwrapRef<typeof import('@vueuse/core')['useEventSource']>
    readonly useEyeDropper: UnwrapRef<typeof import('@vueuse/core')['useEyeDropper']>
    readonly useFavicon: UnwrapRef<typeof import('@vueuse/core')['useFavicon']>
    readonly useFetch: UnwrapRef<typeof import('@vueuse/core')['useFetch']>
    readonly useFileDialog: UnwrapRef<typeof import('@vueuse/core')['useFileDialog']>
    readonly useFileSystemAccess: UnwrapRef<typeof import('@vueuse/core')['useFileSystemAccess']>
    readonly useFocus: UnwrapRef<typeof import('@vueuse/core')['useFocus']>
    readonly useFocusWithin: UnwrapRef<typeof import('@vueuse/core')['useFocusWithin']>
    readonly useFps: UnwrapRef<typeof import('@vueuse/core')['useFps']>
    readonly useFullscreen: UnwrapRef<typeof import('@vueuse/core')['useFullscreen']>
    readonly useGamepad: UnwrapRef<typeof import('@vueuse/core')['useGamepad']>
    readonly useGeolocation: UnwrapRef<typeof import('@vueuse/core')['useGeolocation']>
    readonly useI18n: UnwrapRef<typeof import('vue-i18n')['useI18n']>
    readonly useIdle: UnwrapRef<typeof import('@vueuse/core')['useIdle']>
    readonly useImage: UnwrapRef<typeof import('@vueuse/core')['useImage']>
    readonly useInfiniteScroll: UnwrapRef<typeof import('@vueuse/core')['useInfiniteScroll']>
    readonly useIntersectionObserver: UnwrapRef<typeof import('@vueuse/core')['useIntersectionObserver']>
    readonly useInterval: UnwrapRef<typeof import('@vueuse/core')['useInterval']>
    readonly useIntervalFn: UnwrapRef<typeof import('@vueuse/core')['useIntervalFn']>
    readonly useKeyModifier: UnwrapRef<typeof import('@vueuse/core')['useKeyModifier']>
    readonly useLastChanged: UnwrapRef<typeof import('@vueuse/core')['useLastChanged']>
    readonly useLink: UnwrapRef<typeof import('vue-router')['useLink']>
    readonly useLoadingBar: UnwrapRef<typeof import('naive-ui')['useLoadingBar']>
    readonly useLocalStorage: UnwrapRef<typeof import('@vueuse/core')['useLocalStorage']>
    readonly useMagicKeys: UnwrapRef<typeof import('@vueuse/core')['useMagicKeys']>
    readonly useManualRefHistory: UnwrapRef<typeof import('@vueuse/core')['useManualRefHistory']>
    readonly useMediaControls: UnwrapRef<typeof import('@vueuse/core')['useMediaControls']>
    readonly useMediaQuery: UnwrapRef<typeof import('@vueuse/core')['useMediaQuery']>
    readonly useMemoize: UnwrapRef<typeof import('@vueuse/core')['useMemoize']>
    readonly useMemory: UnwrapRef<typeof import('@vueuse/core')['useMemory']>
    readonly useMessage: UnwrapRef<typeof import('naive-ui')['useMessage']>
    readonly useMounted: UnwrapRef<typeof import('@vueuse/core')['useMounted']>
    readonly useMouse: UnwrapRef<typeof import('@vueuse/core')['useMouse']>
    readonly useMouseInElement: UnwrapRef<typeof import('@vueuse/core')['useMouseInElement']>
    readonly useMousePressed: UnwrapRef<typeof import('@vueuse/core')['useMousePressed']>
    readonly useMutationObserver: UnwrapRef<typeof import('@vueuse/core')['useMutationObserver']>
    readonly useNavigatorLanguage: UnwrapRef<typeof import('@vueuse/core')['useNavigatorLanguage']>
    readonly useNetwork: UnwrapRef<typeof import('@vueuse/core')['useNetwork']>
    readonly useNotification: UnwrapRef<typeof import('naive-ui')['useNotification']>
    readonly useNow: UnwrapRef<typeof import('@vueuse/core')['useNow']>
    readonly useObjectUrl: UnwrapRef<typeof import('@vueuse/core')['useObjectUrl']>
    readonly useOffsetPagination: UnwrapRef<typeof import('@vueuse/core')['useOffsetPagination']>
    readonly useOnline: UnwrapRef<typeof import('@vueuse/core')['useOnline']>
    readonly usePageLeave: UnwrapRef<typeof import('@vueuse/core')['usePageLeave']>
    readonly useParallax: UnwrapRef<typeof import('@vueuse/core')['useParallax']>
    readonly useParentElement: UnwrapRef<typeof import('@vueuse/core')['useParentElement']>
    readonly usePerformanceObserver: UnwrapRef<typeof import('@vueuse/core')['usePerformanceObserver']>
    readonly usePermission: UnwrapRef<typeof import('@vueuse/core')['usePermission']>
    readonly usePointer: UnwrapRef<typeof import('@vueuse/core')['usePointer']>
    readonly usePointerLock: UnwrapRef<typeof import('@vueuse/core')['usePointerLock']>
    readonly usePointerSwipe: UnwrapRef<typeof import('@vueuse/core')['usePointerSwipe']>
    readonly usePreferredColorScheme: UnwrapRef<typeof import('@vueuse/core')['usePreferredColorScheme']>
    readonly usePreferredContrast: UnwrapRef<typeof import('@vueuse/core')['usePreferredContrast']>
    readonly usePreferredDark: UnwrapRef<typeof import('@vueuse/core')['usePreferredDark']>
    readonly usePreferredLanguages: UnwrapRef<typeof import('@vueuse/core')['usePreferredLanguages']>
    readonly usePreferredReducedMotion: UnwrapRef<typeof import('@vueuse/core')['usePreferredReducedMotion']>
    readonly usePrevious: UnwrapRef<typeof import('@vueuse/core')['usePrevious']>
    readonly useRafFn: UnwrapRef<typeof import('@vueuse/core')['useRafFn']>
    readonly useRefHistory: UnwrapRef<typeof import('@vueuse/core')['useRefHistory']>
    readonly useResizeObserver: UnwrapRef<typeof import('@vueuse/core')['useResizeObserver']>
    readonly useRoute: UnwrapRef<typeof import('vue-router')['useRoute']>
    readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
    readonly useScreenOrientation: UnwrapRef<typeof import('@vueuse/core')['useScreenOrientation']>
    readonly useScreenSafeArea: UnwrapRef<typeof import('@vueuse/core')['useScreenSafeArea']>
    readonly useScriptTag: UnwrapRef<typeof import('@vueuse/core')['useScriptTag']>
    readonly useScroll: UnwrapRef<typeof import('@vueuse/core')['useScroll']>
    readonly useScrollLock: UnwrapRef<typeof import('@vueuse/core')['useScrollLock']>
    readonly useSessionStorage: UnwrapRef<typeof import('@vueuse/core')['useSessionStorage']>
    readonly useShare: UnwrapRef<typeof import('@vueuse/core')['useShare']>
    readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
    readonly useSorted: UnwrapRef<typeof import('@vueuse/core')['useSorted']>
    readonly useSpeechRecognition: UnwrapRef<typeof import('@vueuse/core')['useSpeechRecognition']>
    readonly useSpeechSynthesis: UnwrapRef<typeof import('@vueuse/core')['useSpeechSynthesis']>
    readonly useStepper: UnwrapRef<typeof import('@vueuse/core')['useStepper']>
    readonly useStorage: UnwrapRef<typeof import('@vueuse/core')['useStorage']>
    readonly useStorageAsync: UnwrapRef<typeof import('@vueuse/core')['useStorageAsync']>
    readonly useStyleTag: UnwrapRef<typeof import('@vueuse/core')['useStyleTag']>
    readonly useSupported: UnwrapRef<typeof import('@vueuse/core')['useSupported']>
    readonly useSwipe: UnwrapRef<typeof import('@vueuse/core')['useSwipe']>
    readonly useTemplateRefsList: UnwrapRef<typeof import('@vueuse/core')['useTemplateRefsList']>
    readonly useTextDirection: UnwrapRef<typeof import('@vueuse/core')['useTextDirection']>
    readonly useTextSelection: UnwrapRef<typeof import('@vueuse/core')['useTextSelection']>
    readonly useTextareaAutosize: UnwrapRef<typeof import('@vueuse/core')['useTextareaAutosize']>
    readonly useThrottle: UnwrapRef<typeof import('@vueuse/core')['useThrottle']>
    readonly useThrottleFn: UnwrapRef<typeof import('@vueuse/core')['useThrottleFn']>
    readonly useThrottledRefHistory: UnwrapRef<typeof import('@vueuse/core')['useThrottledRefHistory']>
    readonly useTimeAgo: UnwrapRef<typeof import('@vueuse/core')['useTimeAgo']>
    readonly useTimeout: UnwrapRef<typeof import('@vueuse/core')['useTimeout']>
    readonly useTimeoutFn: UnwrapRef<typeof import('@vueuse/core')['useTimeoutFn']>
    readonly useTimeoutPoll: UnwrapRef<typeof import('@vueuse/core')['useTimeoutPoll']>
    readonly useTimestamp: UnwrapRef<typeof import('@vueuse/core')['useTimestamp']>
    readonly useTitle: UnwrapRef<typeof import('@vueuse/core')['useTitle']>
    readonly useToNumber: UnwrapRef<typeof import('@vueuse/core')['useToNumber']>
    readonly useToString: UnwrapRef<typeof import('@vueuse/core')['useToString']>
    readonly useToggle: UnwrapRef<typeof import('@vueuse/core')['useToggle']>
    readonly useTransition: UnwrapRef<typeof import('@vueuse/core')['useTransition']>
    readonly useUrlSearchParams: UnwrapRef<typeof import('@vueuse/core')['useUrlSearchParams']>
    readonly useUserMedia: UnwrapRef<typeof import('@vueuse/core')['useUserMedia']>
    readonly useVModel: UnwrapRef<typeof import('@vueuse/core')['useVModel']>
    readonly useVModels: UnwrapRef<typeof import('@vueuse/core')['useVModels']>
    readonly useVibrate: UnwrapRef<typeof import('@vueuse/core')['useVibrate']>
    readonly useVirtualList: UnwrapRef<typeof import('@vueuse/core')['useVirtualList']>
    readonly useWakeLock: UnwrapRef<typeof import('@vueuse/core')['useWakeLock']>
    readonly useWebNotification: UnwrapRef<typeof import('@vueuse/core')['useWebNotification']>
    readonly useWebSocket: UnwrapRef<typeof import('@vueuse/core')['useWebSocket']>
    readonly useWebWorker: UnwrapRef<typeof import('@vueuse/core')['useWebWorker']>
    readonly useWebWorkerFn: UnwrapRef<typeof import('@vueuse/core')['useWebWorkerFn']>
    readonly useWindowFocus: UnwrapRef<typeof import('@vueuse/core')['useWindowFocus']>
    readonly useWindowScroll: UnwrapRef<typeof import('@vueuse/core')['useWindowScroll']>
    readonly useWindowSize: UnwrapRef<typeof import('@vueuse/core')['useWindowSize']>
    readonly watch: UnwrapRef<typeof import('vue')['watch']>
    readonly watchArray: UnwrapRef<typeof import('@vueuse/core')['watchArray']>
    readonly watchAtMost: UnwrapRef<typeof import('@vueuse/core')['watchAtMost']>
    readonly watchDebounced: UnwrapRef<typeof import('@vueuse/core')['watchDebounced']>
    readonly watchDeep: UnwrapRef<typeof import('@vueuse/core')['watchDeep']>
    readonly watchEffect: UnwrapRef<typeof import('vue')['watchEffect']>
    readonly watchIgnorable: UnwrapRef<typeof import('@vueuse/core')['watchIgnorable']>
    readonly watchImmediate: UnwrapRef<typeof import('@vueuse/core')['watchImmediate']>
    readonly watchOnce: UnwrapRef<typeof import('@vueuse/core')['watchOnce']>
    readonly watchPausable: UnwrapRef<typeof import('@vueuse/core')['watchPausable']>
    readonly watchPostEffect: UnwrapRef<typeof import('vue')['watchPostEffect']>
    readonly watchSyncEffect: UnwrapRef<typeof import('vue')['watchSyncEffect']>
    readonly watchThrottled: UnwrapRef<typeof import('@vueuse/core')['watchThrottled']>
    readonly watchTriggerable: UnwrapRef<typeof import('@vueuse/core')['watchTriggerable']>
    readonly watchWithFilter: UnwrapRef<typeof import('@vueuse/core')['watchWithFilter']>
    readonly whenever: UnwrapRef<typeof import('@vueuse/core')['whenever']>
  }
 }
 declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
    readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
    readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
    readonly computed: UnwrapRef<typeof import('vue')['computed']>
    readonly computedAsync: UnwrapRef<typeof import('@vueuse/core')['computedAsync']>
    readonly computedEager: UnwrapRef<typeof import('@vueuse/core')['computedEager']>
    readonly computedInject: UnwrapRef<typeof import('@vueuse/core')['computedInject']>
    readonly computedWithControl: UnwrapRef<typeof import('@vueuse/core')['computedWithControl']>
    readonly controlledComputed: UnwrapRef<typeof import('@vueuse/core')['controlledComputed']>
    readonly controlledRef: UnwrapRef<typeof import('@vueuse/core')['controlledRef']>
    readonly createApp: UnwrapRef<typeof import('vue')['createApp']>
    readonly createEventHook: UnwrapRef<typeof import('@vueuse/core')['createEventHook']>
    readonly createGlobalState: UnwrapRef<typeof import('@vueuse/core')['createGlobalState']>
    readonly createInjectionState: UnwrapRef<typeof import('@vueuse/core')['createInjectionState']>
    readonly createReactiveFn: UnwrapRef<typeof import('@vueuse/core')['createReactiveFn']>
    readonly createReusableTemplate: UnwrapRef<typeof import('@vueuse/core')['createReusableTemplate']>
    readonly createSharedComposable: UnwrapRef<typeof import('@vueuse/core')['createSharedComposable']>
    readonly createTemplatePromise: UnwrapRef<typeof import('@vueuse/core')['createTemplatePromise']>
    readonly createUnrefFn: UnwrapRef<typeof import('@vueuse/core')['createUnrefFn']>
    readonly customRef: UnwrapRef<typeof import('vue')['customRef']>
    readonly debouncedRef: UnwrapRef<typeof import('@vueuse/core')['debouncedRef']>
    readonly debouncedWatch: UnwrapRef<typeof import('@vueuse/core')['debouncedWatch']>
    readonly defineAsyncComponent: UnwrapRef<typeof import('vue')['defineAsyncComponent']>
    readonly defineComponent: UnwrapRef<typeof import('vue')['defineComponent']>
    readonly eagerComputed: UnwrapRef<typeof import('@vueuse/core')['eagerComputed']>
    readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
    readonly extendRef: UnwrapRef<typeof import('@vueuse/core')['extendRef']>
    readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
    readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
    readonly h: UnwrapRef<typeof import('vue')['h']>
    readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
    readonly inject: UnwrapRef<typeof import('vue')['inject']>
    readonly isDefined: UnwrapRef<typeof import('@vueuse/core')['isDefined']>
    readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
    readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
    readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']>
    readonly isRef: UnwrapRef<typeof import('vue')['isRef']>
    readonly makeDestructurable: UnwrapRef<typeof import('@vueuse/core')['makeDestructurable']>
    readonly markRaw: UnwrapRef<typeof import('vue')['markRaw']>
    readonly nextTick: UnwrapRef<typeof import('vue')['nextTick']>
    readonly onActivated: UnwrapRef<typeof import('vue')['onActivated']>
    readonly onBeforeMount: UnwrapRef<typeof import('vue')['onBeforeMount']>
    readonly onBeforeRouteLeave: UnwrapRef<typeof import('vue-router')['onBeforeRouteLeave']>
    readonly onBeforeRouteUpdate: UnwrapRef<typeof import('vue-router')['onBeforeRouteUpdate']>
    readonly onBeforeUnmount: UnwrapRef<typeof import('vue')['onBeforeUnmount']>
    readonly onBeforeUpdate: UnwrapRef<typeof import('vue')['onBeforeUpdate']>
    readonly onClickOutside: UnwrapRef<typeof import('@vueuse/core')['onClickOutside']>
    readonly onDeactivated: UnwrapRef<typeof import('vue')['onDeactivated']>
    readonly onErrorCaptured: UnwrapRef<typeof import('vue')['onErrorCaptured']>
    readonly onKeyStroke: UnwrapRef<typeof import('@vueuse/core')['onKeyStroke']>
    readonly onLongPress: UnwrapRef<typeof import('@vueuse/core')['onLongPress']>
    readonly onMounted: UnwrapRef<typeof import('vue')['onMounted']>
    readonly onRenderTracked: UnwrapRef<typeof import('vue')['onRenderTracked']>
    readonly onRenderTriggered: UnwrapRef<typeof import('vue')['onRenderTriggered']>
    readonly onScopeDispose: UnwrapRef<typeof import('vue')['onScopeDispose']>
    readonly onServerPrefetch: UnwrapRef<typeof import('vue')['onServerPrefetch']>
    readonly onStartTyping: UnwrapRef<typeof import('@vueuse/core')['onStartTyping']>
    readonly onUnmounted: UnwrapRef<typeof import('vue')['onUnmounted']>
    readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
    readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']>
    readonly provide: UnwrapRef<typeof import('vue')['provide']>
    readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
    readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']>
    readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
    readonly reactiveComputed: UnwrapRef<typeof import('@vueuse/core')['reactiveComputed']>
    readonly reactiveOmit: UnwrapRef<typeof import('@vueuse/core')['reactiveOmit']>
    readonly reactivePick: UnwrapRef<typeof import('@vueuse/core')['reactivePick']>
    readonly readonly: UnwrapRef<typeof import('vue')['readonly']>
    readonly ref: UnwrapRef<typeof import('vue')['ref']>
    readonly refAutoReset: UnwrapRef<typeof import('@vueuse/core')['refAutoReset']>
    readonly refDebounced: UnwrapRef<typeof import('@vueuse/core')['refDebounced']>
    readonly refDefault: UnwrapRef<typeof import('@vueuse/core')['refDefault']>
    readonly refThrottled: UnwrapRef<typeof import('@vueuse/core')['refThrottled']>
    readonly refWithControl: UnwrapRef<typeof import('@vueuse/core')['refWithControl']>
    readonly resolveComponent: UnwrapRef<typeof import('vue')['resolveComponent']>
    readonly resolveRef: UnwrapRef<typeof import('@vueuse/core')['resolveRef']>
    readonly resolveUnref: UnwrapRef<typeof import('@vueuse/core')['resolveUnref']>
    readonly shallowReactive: UnwrapRef<typeof import('vue')['shallowReactive']>
    readonly shallowReadonly: UnwrapRef<typeof import('vue')['shallowReadonly']>
    readonly shallowRef: UnwrapRef<typeof import('vue')['shallowRef']>
    readonly syncRef: UnwrapRef<typeof import('@vueuse/core')['syncRef']>
    readonly syncRefs: UnwrapRef<typeof import('@vueuse/core')['syncRefs']>
    readonly templateRef: UnwrapRef<typeof import('@vueuse/core')['templateRef']>
    readonly throttledRef: UnwrapRef<typeof import('@vueuse/core')['throttledRef']>
    readonly throttledWatch: UnwrapRef<typeof import('@vueuse/core')['throttledWatch']>
    readonly toRaw: UnwrapRef<typeof import('vue')['toRaw']>
    readonly toReactive: UnwrapRef<typeof import('@vueuse/core')['toReactive']>
    readonly toRef: UnwrapRef<typeof import('vue')['toRef']>
    readonly toRefs: UnwrapRef<typeof import('vue')['toRefs']>
    readonly toValue: UnwrapRef<typeof import('vue')['toValue']>
    readonly triggerRef: UnwrapRef<typeof import('vue')['triggerRef']>
    readonly tryOnBeforeMount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeMount']>
    readonly tryOnBeforeUnmount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeUnmount']>
    readonly tryOnMounted: UnwrapRef<typeof import('@vueuse/core')['tryOnMounted']>
    readonly tryOnScopeDispose: UnwrapRef<typeof import('@vueuse/core')['tryOnScopeDispose']>
    readonly tryOnUnmounted: UnwrapRef<typeof import('@vueuse/core')['tryOnUnmounted']>
    readonly unref: UnwrapRef<typeof import('vue')['unref']>
    readonly unrefElement: UnwrapRef<typeof import('@vueuse/core')['unrefElement']>
    readonly until: UnwrapRef<typeof import('@vueuse/core')['until']>
    readonly useActiveElement: UnwrapRef<typeof import('@vueuse/core')['useActiveElement']>
    readonly useAnimate: UnwrapRef<typeof import('@vueuse/core')['useAnimate']>
    readonly useArrayDifference: UnwrapRef<typeof import('@vueuse/core')['useArrayDifference']>
    readonly useArrayEvery: UnwrapRef<typeof import('@vueuse/core')['useArrayEvery']>
    readonly useArrayFilter: UnwrapRef<typeof import('@vueuse/core')['useArrayFilter']>
    readonly useArrayFind: UnwrapRef<typeof import('@vueuse/core')['useArrayFind']>
    readonly useArrayFindIndex: UnwrapRef<typeof import('@vueuse/core')['useArrayFindIndex']>
    readonly useArrayFindLast: UnwrapRef<typeof import('@vueuse/core')['useArrayFindLast']>
    readonly useArrayIncludes: UnwrapRef<typeof import('@vueuse/core')['useArrayIncludes']>
    readonly useArrayJoin: UnwrapRef<typeof import('@vueuse/core')['useArrayJoin']>
    readonly useArrayMap: UnwrapRef<typeof import('@vueuse/core')['useArrayMap']>
    readonly useArrayReduce: UnwrapRef<typeof import('@vueuse/core')['useArrayReduce']>
    readonly useArraySome: UnwrapRef<typeof import('@vueuse/core')['useArraySome']>
    readonly useArrayUnique: UnwrapRef<typeof import('@vueuse/core')['useArrayUnique']>
    readonly useAsyncQueue: UnwrapRef<typeof import('@vueuse/core')['useAsyncQueue']>
    readonly useAsyncState: UnwrapRef<typeof import('@vueuse/core')['useAsyncState']>
    readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>
    readonly useBase64: UnwrapRef<typeof import('@vueuse/core')['useBase64']>
    readonly useBattery: UnwrapRef<typeof import('@vueuse/core')['useBattery']>
    readonly useBluetooth: UnwrapRef<typeof import('@vueuse/core')['useBluetooth']>
    readonly useBreakpoints: UnwrapRef<typeof import('@vueuse/core')['useBreakpoints']>
    readonly useBroadcastChannel: UnwrapRef<typeof import('@vueuse/core')['useBroadcastChannel']>
    readonly useBrowserLocation: UnwrapRef<typeof import('@vueuse/core')['useBrowserLocation']>
    readonly useCached: UnwrapRef<typeof import('@vueuse/core')['useCached']>
    readonly useClipboard: UnwrapRef<typeof import('@vueuse/core')['useClipboard']>
    readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']>
    readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']>
    readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']>
    readonly useCounter: UnwrapRef<typeof import('@vueuse/core')['useCounter']>
    readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>
    readonly useCssVar: UnwrapRef<typeof import('@vueuse/core')['useCssVar']>
    readonly useCssVars: UnwrapRef<typeof import('vue')['useCssVars']>
    readonly useCurrentElement: UnwrapRef<typeof import('@vueuse/core')['useCurrentElement']>
    readonly useCycleList: UnwrapRef<typeof import('@vueuse/core')['useCycleList']>
    readonly useDark: UnwrapRef<typeof import('@vueuse/core')['useDark']>
    readonly useDateFormat: UnwrapRef<typeof import('@vueuse/core')['useDateFormat']>
    readonly useDebounce: UnwrapRef<typeof import('@vueuse/core')['useDebounce']>
    readonly useDebounceFn: UnwrapRef<typeof import('@vueuse/core')['useDebounceFn']>
    readonly useDebouncedRefHistory: UnwrapRef<typeof import('@vueuse/core')['useDebouncedRefHistory']>
    readonly useDeviceMotion: UnwrapRef<typeof import('@vueuse/core')['useDeviceMotion']>
    readonly useDeviceOrientation: UnwrapRef<typeof import('@vueuse/core')['useDeviceOrientation']>
    readonly useDevicePixelRatio: UnwrapRef<typeof import('@vueuse/core')['useDevicePixelRatio']>
    readonly useDevicesList: UnwrapRef<typeof import('@vueuse/core')['useDevicesList']>
    readonly useDialog: UnwrapRef<typeof import('naive-ui')['useDialog']>
    readonly useDisplayMedia: UnwrapRef<typeof import('@vueuse/core')['useDisplayMedia']>
    readonly useDocumentVisibility: UnwrapRef<typeof import('@vueuse/core')['useDocumentVisibility']>
    readonly useDraggable: UnwrapRef<typeof import('@vueuse/core')['useDraggable']>
    readonly useDropZone: UnwrapRef<typeof import('@vueuse/core')['useDropZone']>
    readonly useElementBounding: UnwrapRef<typeof import('@vueuse/core')['useElementBounding']>
    readonly useElementByPoint: UnwrapRef<typeof import('@vueuse/core')['useElementByPoint']>
    readonly useElementHover: UnwrapRef<typeof import('@vueuse/core')['useElementHover']>
    readonly useElementSize: UnwrapRef<typeof import('@vueuse/core')['useElementSize']>
    readonly useElementVisibility: UnwrapRef<typeof import('@vueuse/core')['useElementVisibility']>
    readonly useEventBus: UnwrapRef<typeof import('@vueuse/core')['useEventBus']>
    readonly useEventListener: UnwrapRef<typeof import('@vueuse/core')['useEventListener']>
    readonly useEventSource: UnwrapRef<typeof import('@vueuse/core')['useEventSource']>
    readonly useEyeDropper: UnwrapRef<typeof import('@vueuse/core')['useEyeDropper']>
    readonly useFavicon: UnwrapRef<typeof import('@vueuse/core')['useFavicon']>
    readonly useFetch: UnwrapRef<typeof import('@vueuse/core')['useFetch']>
    readonly useFileDialog: UnwrapRef<typeof import('@vueuse/core')['useFileDialog']>
    readonly useFileSystemAccess: UnwrapRef<typeof import('@vueuse/core')['useFileSystemAccess']>
    readonly useFocus: UnwrapRef<typeof import('@vueuse/core')['useFocus']>
    readonly useFocusWithin: UnwrapRef<typeof import('@vueuse/core')['useFocusWithin']>
    readonly useFps: UnwrapRef<typeof import('@vueuse/core')['useFps']>
    readonly useFullscreen: UnwrapRef<typeof import('@vueuse/core')['useFullscreen']>
    readonly useGamepad: UnwrapRef<typeof import('@vueuse/core')['useGamepad']>
    readonly useGeolocation: UnwrapRef<typeof import('@vueuse/core')['useGeolocation']>
    readonly useI18n: UnwrapRef<typeof import('vue-i18n')['useI18n']>
    readonly useIdle: UnwrapRef<typeof import('@vueuse/core')['useIdle']>
    readonly useImage: UnwrapRef<typeof import('@vueuse/core')['useImage']>
    readonly useInfiniteScroll: UnwrapRef<typeof import('@vueuse/core')['useInfiniteScroll']>
    readonly useIntersectionObserver: UnwrapRef<typeof import('@vueuse/core')['useIntersectionObserver']>
    readonly useInterval: UnwrapRef<typeof import('@vueuse/core')['useInterval']>
    readonly useIntervalFn: UnwrapRef<typeof import('@vueuse/core')['useIntervalFn']>
    readonly useKeyModifier: UnwrapRef<typeof import('@vueuse/core')['useKeyModifier']>
    readonly useLastChanged: UnwrapRef<typeof import('@vueuse/core')['useLastChanged']>
    readonly useLink: UnwrapRef<typeof import('vue-router')['useLink']>
    readonly useLoadingBar: UnwrapRef<typeof import('naive-ui')['useLoadingBar']>
    readonly useLocalStorage: UnwrapRef<typeof import('@vueuse/core')['useLocalStorage']>
    readonly useMagicKeys: UnwrapRef<typeof import('@vueuse/core')['useMagicKeys']>
    readonly useManualRefHistory: UnwrapRef<typeof import('@vueuse/core')['useManualRefHistory']>
    readonly useMediaControls: UnwrapRef<typeof import('@vueuse/core')['useMediaControls']>
    readonly useMediaQuery: UnwrapRef<typeof import('@vueuse/core')['useMediaQuery']>
    readonly useMemoize: UnwrapRef<typeof import('@vueuse/core')['useMemoize']>
    readonly useMemory: UnwrapRef<typeof import('@vueuse/core')['useMemory']>
    readonly useMessage: UnwrapRef<typeof import('naive-ui')['useMessage']>
    readonly useMounted: UnwrapRef<typeof import('@vueuse/core')['useMounted']>
    readonly useMouse: UnwrapRef<typeof import('@vueuse/core')['useMouse']>
    readonly useMouseInElement: UnwrapRef<typeof import('@vueuse/core')['useMouseInElement']>
    readonly useMousePressed: UnwrapRef<typeof import('@vueuse/core')['useMousePressed']>
    readonly useMutationObserver: UnwrapRef<typeof import('@vueuse/core')['useMutationObserver']>
    readonly useNavigatorLanguage: UnwrapRef<typeof import('@vueuse/core')['useNavigatorLanguage']>
    readonly useNetwork: UnwrapRef<typeof import('@vueuse/core')['useNetwork']>
    readonly useNotification: UnwrapRef<typeof import('naive-ui')['useNotification']>
    readonly useNow: UnwrapRef<typeof import('@vueuse/core')['useNow']>
    readonly useObjectUrl: UnwrapRef<typeof import('@vueuse/core')['useObjectUrl']>
    readonly useOffsetPagination: UnwrapRef<typeof import('@vueuse/core')['useOffsetPagination']>
    readonly useOnline: UnwrapRef<typeof import('@vueuse/core')['useOnline']>
    readonly usePageLeave: UnwrapRef<typeof import('@vueuse/core')['usePageLeave']>
    readonly useParallax: UnwrapRef<typeof import('@vueuse/core')['useParallax']>
    readonly useParentElement: UnwrapRef<typeof import('@vueuse/core')['useParentElement']>
    readonly usePerformanceObserver: UnwrapRef<typeof import('@vueuse/core')['usePerformanceObserver']>
    readonly usePermission: UnwrapRef<typeof import('@vueuse/core')['usePermission']>
    readonly usePointer: UnwrapRef<typeof import('@vueuse/core')['usePointer']>
    readonly usePointerLock: UnwrapRef<typeof import('@vueuse/core')['usePointerLock']>
    readonly usePointerSwipe: UnwrapRef<typeof import('@vueuse/core')['usePointerSwipe']>
    readonly usePreferredColorScheme: UnwrapRef<typeof import('@vueuse/core')['usePreferredColorScheme']>
    readonly usePreferredContrast: UnwrapRef<typeof import('@vueuse/core')['usePreferredContrast']>
    readonly usePreferredDark: UnwrapRef<typeof import('@vueuse/core')['usePreferredDark']>
    readonly usePreferredLanguages: UnwrapRef<typeof import('@vueuse/core')['usePreferredLanguages']>
    readonly usePreferredReducedMotion: UnwrapRef<typeof import('@vueuse/core')['usePreferredReducedMotion']>
    readonly usePrevious: UnwrapRef<typeof import('@vueuse/core')['usePrevious']>
    readonly useRafFn: UnwrapRef<typeof import('@vueuse/core')['useRafFn']>
    readonly useRefHistory: UnwrapRef<typeof import('@vueuse/core')['useRefHistory']>
    readonly useResizeObserver: UnwrapRef<typeof import('@vueuse/core')['useResizeObserver']>
    readonly useRoute: UnwrapRef<typeof import('vue-router')['useRoute']>
    readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
    readonly useScreenOrientation: UnwrapRef<typeof import('@vueuse/core')['useScreenOrientation']>
    readonly useScreenSafeArea: UnwrapRef<typeof import('@vueuse/core')['useScreenSafeArea']>
    readonly useScriptTag: UnwrapRef<typeof import('@vueuse/core')['useScriptTag']>
    readonly useScroll: UnwrapRef<typeof import('@vueuse/core')['useScroll']>
    readonly useScrollLock: UnwrapRef<typeof import('@vueuse/core')['useScrollLock']>
    readonly useSessionStorage: UnwrapRef<typeof import('@vueuse/core')['useSessionStorage']>
    readonly useShare: UnwrapRef<typeof import('@vueuse/core')['useShare']>
    readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
    readonly useSorted: UnwrapRef<typeof import('@vueuse/core')['useSorted']>
    readonly useSpeechRecognition: UnwrapRef<typeof import('@vueuse/core')['useSpeechRecognition']>
    readonly useSpeechSynthesis: UnwrapRef<typeof import('@vueuse/core')['useSpeechSynthesis']>
    readonly useStepper: UnwrapRef<typeof import('@vueuse/core')['useStepper']>
    readonly useStorage: UnwrapRef<typeof import('@vueuse/core')['useStorage']>
    readonly useStorageAsync: UnwrapRef<typeof import('@vueuse/core')['useStorageAsync']>
    readonly useStyleTag: UnwrapRef<typeof import('@vueuse/core')['useStyleTag']>
    readonly useSupported: UnwrapRef<typeof import('@vueuse/core')['useSupported']>
    readonly useSwipe: UnwrapRef<typeof import('@vueuse/core')['useSwipe']>
    readonly useTemplateRefsList: UnwrapRef<typeof import('@vueuse/core')['useTemplateRefsList']>
    readonly useTextDirection: UnwrapRef<typeof import('@vueuse/core')['useTextDirection']>
    readonly useTextSelection: UnwrapRef<typeof import('@vueuse/core')['useTextSelection']>
    readonly useTextareaAutosize: UnwrapRef<typeof import('@vueuse/core')['useTextareaAutosize']>
    readonly useThrottle: UnwrapRef<typeof import('@vueuse/core')['useThrottle']>
    readonly useThrottleFn: UnwrapRef<typeof import('@vueuse/core')['useThrottleFn']>
    readonly useThrottledRefHistory: UnwrapRef<typeof import('@vueuse/core')['useThrottledRefHistory']>
    readonly useTimeAgo: UnwrapRef<typeof import('@vueuse/core')['useTimeAgo']>
    readonly useTimeout: UnwrapRef<typeof import('@vueuse/core')['useTimeout']>
    readonly useTimeoutFn: UnwrapRef<typeof import('@vueuse/core')['useTimeoutFn']>
    readonly useTimeoutPoll: UnwrapRef<typeof import('@vueuse/core')['useTimeoutPoll']>
    readonly useTimestamp: UnwrapRef<typeof import('@vueuse/core')['useTimestamp']>
    readonly useTitle: UnwrapRef<typeof import('@vueuse/core')['useTitle']>
    readonly useToNumber: UnwrapRef<typeof import('@vueuse/core')['useToNumber']>
    readonly useToString: UnwrapRef<typeof import('@vueuse/core')['useToString']>
    readonly useToggle: UnwrapRef<typeof import('@vueuse/core')['useToggle']>
    readonly useTransition: UnwrapRef<typeof import('@vueuse/core')['useTransition']>
    readonly useUrlSearchParams: UnwrapRef<typeof import('@vueuse/core')['useUrlSearchParams']>
    readonly useUserMedia: UnwrapRef<typeof import('@vueuse/core')['useUserMedia']>
    readonly useVModel: UnwrapRef<typeof import('@vueuse/core')['useVModel']>
    readonly useVModels: UnwrapRef<typeof import('@vueuse/core')['useVModels']>
    readonly useVibrate: UnwrapRef<typeof import('@vueuse/core')['useVibrate']>
    readonly useVirtualList: UnwrapRef<typeof import('@vueuse/core')['useVirtualList']>
    readonly useWakeLock: UnwrapRef<typeof import('@vueuse/core')['useWakeLock']>
    readonly useWebNotification: UnwrapRef<typeof import('@vueuse/core')['useWebNotification']>
    readonly useWebSocket: UnwrapRef<typeof import('@vueuse/core')['useWebSocket']>
    readonly useWebWorker: UnwrapRef<typeof import('@vueuse/core')['useWebWorker']>
    readonly useWebWorkerFn: UnwrapRef<typeof import('@vueuse/core')['useWebWorkerFn']>
    readonly useWindowFocus: UnwrapRef<typeof import('@vueuse/core')['useWindowFocus']>
    readonly useWindowScroll: UnwrapRef<typeof import('@vueuse/core')['useWindowScroll']>
    readonly useWindowSize: UnwrapRef<typeof import('@vueuse/core')['useWindowSize']>
    readonly watch: UnwrapRef<typeof import('vue')['watch']>
    readonly watchArray: UnwrapRef<typeof import('@vueuse/core')['watchArray']>
    readonly watchAtMost: UnwrapRef<typeof import('@vueuse/core')['watchAtMost']>
    readonly watchDebounced: UnwrapRef<typeof import('@vueuse/core')['watchDebounced']>
    readonly watchDeep: UnwrapRef<typeof import('@vueuse/core')['watchDeep']>
    readonly watchEffect: UnwrapRef<typeof import('vue')['watchEffect']>
    readonly watchIgnorable: UnwrapRef<typeof import('@vueuse/core')['watchIgnorable']>
    readonly watchImmediate: UnwrapRef<typeof import('@vueuse/core')['watchImmediate']>
    readonly watchOnce: UnwrapRef<typeof import('@vueuse/core')['watchOnce']>
    readonly watchPausable: UnwrapRef<typeof import('@vueuse/core')['watchPausable']>
    readonly watchPostEffect: UnwrapRef<typeof import('vue')['watchPostEffect']>
    readonly watchSyncEffect: UnwrapRef<typeof import('vue')['watchSyncEffect']>
    readonly watchThrottled: UnwrapRef<typeof import('@vueuse/core')['watchThrottled']>
    readonly watchTriggerable: UnwrapRef<typeof import('@vueuse/core')['watchTriggerable']>
    readonly watchWithFilter: UnwrapRef<typeof import('@vueuse/core')['watchWithFilter']>
    readonly whenever: UnwrapRef<typeof import('@vueuse/core')['whenever']>
  }
 }
--- a/components.d.ts
+++ b/components.d.ts
@@ -1,196 +0,0 @@
 /* eslint-disable */
 /* prettier-ignore */
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
 import '@vue/runtime-core'
 export {}
 declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    '404.page': typeof import('./src/pages/404.page.vue')['default']
    About: typeof import('./src/pages/About.vue')['default']
    App: typeof import('./src/App.vue')['default']
    'Base.layout': typeof import('./src/layouts/base.layout.vue')['default']
    Base64FileConverter: typeof import('./src/tools/base64-file-converter/base64-file-converter.vue')['default']
    Base64StringConverter: typeof import('./src/tools/base64-string-converter/base64-string-converter.vue')['default']
    BasicAuthGenerator: typeof import('./src/tools/basic-auth-generator/basic-auth-generator.vue')['default']
    Bcrypt: typeof import('./src/tools/bcrypt/bcrypt.vue')['default']
    BenchmarkBuilder: typeof import('./src/tools/benchmark-builder/benchmark-builder.vue')['default']
    Bip39Generator: typeof import('./src/tools/bip39-generator/bip39-generator.vue')['default']
    CAlert: typeof import('./src/ui/c-alert/c-alert.vue')['default']
    'CAlert.demo': typeof import('./src/ui/c-alert/c-alert.demo.vue')['default']
    CameraRecorder: typeof import('./src/tools/camera-recorder/camera-recorder.vue')['default']
    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']
    CCard: typeof import('./src/ui/c-card/c-card.vue')['default']
    'CCard.demo': typeof import('./src/ui/c-card/c-card.demo.vue')['default']
    CDiffEditor: typeof import('./src/ui/c-diff-editor/c-diff-editor.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']
    CModal: typeof import('./src/ui/c-modal/c-modal.vue')['default']
    'CModal.demo': typeof import('./src/ui/c-modal/c-modal.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']
    CommandPalette: typeof import('./src/modules/command-palette/command-palette.vue')['default']
    CommandPaletteOption: typeof import('./src/modules/command-palette/components/command-palette-option.vue')['default']
    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']
    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']
    DeviceInformation: typeof import('./src/tools/device-information/device-information.vue')['default']
    DiffViewer: typeof import('./src/tools/json-diff/diff-viewer/diff-viewer.vue')['default']
    DockerRunToDockerComposeConverter: typeof import('./src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue')['default']
    DynamicValues: typeof import('./src/tools/benchmark-builder/dynamic-values.vue')['default']
    Editor: typeof import('./src/tools/html-wysiwyg-editor/editor/editor.vue')['default']
    EmojiCard: typeof import('./src/tools/emoji-picker/emoji-card.vue')['default']
    EmojiGrid: typeof import('./src/tools/emoji-picker/emoji-grid.vue')['default']
    EmojiPicker: typeof import('./src/tools/emoji-picker/emoji-picker.vue')['default']
    Encryption: typeof import('./src/tools/encryption/encryption.vue')['default']
    EtaCalculator: typeof import('./src/tools/eta-calculator/eta-calculator.vue')['default']
    FavoriteButton: typeof import('./src/components/FavoriteButton.vue')['default']
    FormatTransformer: typeof import('./src/components/FormatTransformer.vue')['default']
    GitMemo: typeof import('./src/tools/git-memo/git-memo.vue')['default']
    'GitMemo.content': typeof import('./src/tools/git-memo/git-memo.content.md')['default']
    HashText: typeof import('./src/tools/hash-text/hash-text.vue')['default']
    HmacGenerator: typeof import('./src/tools/hmac-generator/hmac-generator.vue')['default']
    'Home.page': typeof import('./src/pages/Home.page.vue')['default']
    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']
    IconMdiArrowRightBottom: typeof import('~icons/mdi/arrow-right-bottom')['default']
    IconMdiCamera: typeof import('~icons/mdi/camera')['default']
    IconMdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
    IconMdiChevronRight: typeof import('~icons/mdi/chevron-right')['default']
    IconMdiClose: typeof import('~icons/mdi/close')['default']
    IconMdiContentCopy: typeof import('~icons/mdi/content-copy')['default']
    IconMdiDeleteOutline: typeof import('~icons/mdi/delete-outline')['default']
    IconMdiDownload: typeof import('~icons/mdi/download')['default']
    IconMdiEye: typeof import('~icons/mdi/eye')['default']
    IconMdiEyeOff: typeof import('~icons/mdi/eye-off')['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']
    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']
    Ipv4AddressConverter: typeof import('./src/tools/ipv4-address-converter/ipv4-address-converter.vue')['default']
    Ipv4RangeExpander: typeof import('./src/tools/ipv4-range-expander/ipv4-range-expander.vue')['default']
    Ipv4SubnetCalculator: typeof import('./src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue')['default']
    Ipv6UlaGenerator: typeof import('./src/tools/ipv6-ula-generator/ipv6-ula-generator.vue')['default']
    JsonDiff: typeof import('./src/tools/json-diff/json-diff.vue')['default']
    JsonMinify: typeof import('./src/tools/json-minify/json-minify.vue')['default']
    JsonToCsv: typeof import('./src/tools/json-to-csv/json-to-csv.vue')['default']
    JsonToToml: typeof import('./src/tools/json-to-toml/json-to-toml.vue')['default']
    JsonToYaml: typeof import('./src/tools/json-to-yaml-converter/json-to-yaml.vue')['default']
    JsonViewer: typeof import('./src/tools/json-viewer/json-viewer.vue')['default']
    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']
    LoremIpsumGenerator: typeof import('./src/tools/lorem-ipsum-generator/lorem-ipsum-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']
    MenuBarItem: typeof import('./src/tools/html-wysiwyg-editor/editor/menu-bar-item.vue')['default']
    MenuIconItem: typeof import('./src/components/MenuIconItem.vue')['default']
    MenuLayout: typeof import('./src/components/MenuLayout.vue')['default']
    MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default']
    MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default']
    NAlert: typeof import('naive-ui')['NAlert']
    NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
    NCheckbox: typeof import('naive-ui')['NCheckbox']
    NCode: typeof import('naive-ui')['NCode']
    NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
    NColorPicker: typeof import('naive-ui')['NColorPicker']
    NConfigProvider: typeof import('naive-ui')['NConfigProvider']
    NDatePicker: typeof import('naive-ui')['NDatePicker']
    NDivider: typeof import('naive-ui')['NDivider']
    NDynamicInput: typeof import('naive-ui')['NDynamicInput']
    NEllipsis: typeof import('naive-ui')['NEllipsis']
    NForm: typeof import('naive-ui')['NForm']
    NFormItem: typeof import('naive-ui')['NFormItem']
    NGi: typeof import('naive-ui')['NGi']
    NGrid: typeof import('naive-ui')['NGrid']
    NH1: typeof import('naive-ui')['NH1']
    NH2: typeof import('naive-ui')['NH2']
    NH3: typeof import('naive-ui')['NH3']
    NIcon: typeof import('naive-ui')['NIcon']
    NImage: typeof import('naive-ui')['NImage']
    NInputGroup: typeof import('naive-ui')['NInputGroup']
    NInputGroupLabel: typeof import('naive-ui')['NInputGroupLabel']
    NInputNumber: typeof import('naive-ui')['NInputNumber']
    NLayout: typeof import('naive-ui')['NLayout']
    NLayoutSider: typeof import('naive-ui')['NLayoutSider']
    NMenu: typeof import('naive-ui')['NMenu']
    NP: typeof import('naive-ui')['NP']
    NPageHeader: typeof import('naive-ui')['NPageHeader']
    NProgress: typeof import('naive-ui')['NProgress']
    NScrollbar: typeof import('naive-ui')['NScrollbar']
    NSlider: typeof import('naive-ui')['NSlider']
    NStatistic: typeof import('naive-ui')['NStatistic']
    NSwitch: typeof import('naive-ui')['NSwitch']
    NTable: typeof import('naive-ui')['NTable']
    NTag: typeof import('naive-ui')['NTag']
    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']
    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']
    RandomPortGenerator: typeof import('./src/tools/random-port-generator/random-port-generator.vue')['default']
    ResultRow: typeof import('./src/tools/ipv4-range-expander/result-row.vue')['default']
    RomanNumeralConverter: typeof import('./src/tools/roman-numeral-converter/roman-numeral-converter.vue')['default']
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
    RsaKeyPairGenerator: typeof import('./src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue')['default']
    SlugifyString: typeof import('./src/tools/slugify-string/slugify-string.vue')['default']
    SpanCopyable: typeof import('./src/components/SpanCopyable.vue')['default']
    SqlPrettify: typeof import('./src/tools/sql-prettify/sql-prettify.vue')['default']
    StringObfuscator: typeof import('./src/tools/string-obfuscator/string-obfuscator.vue')['default']
    SvgPlaceholderGenerator: typeof import('./src/tools/svg-placeholder-generator/svg-placeholder-generator.vue')['default']
    TemperatureConverter: typeof import('./src/tools/temperature-converter/temperature-converter.vue')['default']
    TextareaCopyable: typeof import('./src/components/TextareaCopyable.vue')['default']
    TextDiff: typeof import('./src/tools/text-diff/text-diff.vue')['default']
    TextStatistics: typeof import('./src/tools/text-statistics/text-statistics.vue')['default']
    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']
    TomlToJson: typeof import('./src/tools/toml-to-json/toml-to-json.vue')['default']
    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']
    UrlEncoder: typeof import('./src/tools/url-encoder/url-encoder.vue')['default']
    UrlParser: typeof import('./src/tools/url-parser/url-parser.vue')['default']
    UserAgentParser: typeof import('./src/tools/user-agent-parser/user-agent-parser.vue')['default']
    UserAgentResultCards: typeof import('./src/tools/user-agent-parser/user-agent-result-cards.vue')['default']
    UuidGenerator: typeof import('./src/tools/uuid-generator/uuid-generator.vue')['default']
    WifiQrCodeGenerator: typeof import('./src/tools/wifi-qr-code-generator/wifi-qr-code-generator.vue')['default']
    XmlFormatter: typeof import('./src/tools/xml-formatter/xml-formatter.vue')['default']
    YamlToJson: typeof import('./src/tools/yaml-to-json-converter/yaml-to-json.vue')['default']
    YamlToToml: typeof import('./src/tools/yaml-to-toml/yaml-to-toml.vue')['default']
  }
 }
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" href="favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>IT Tools - Handy online tools for developers</title>
    <meta itemprop="name" content="IT Tools - Handy online tools for developers" />
@@ -14,13 +14,13 @@
      itemprop="description"
      content="Collection of handy online tools for developers, with great UX. IT Tools is a free and open-source collection of handy online tools for developers & people working in IT."
    />
-    <link rel="author" href="humans.txt" />
+    <link rel="author" href="/humans.txt" />
    <link rel="canonical" href="https://it-tools.tech" />
-    <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
-    <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
-    <link rel="mask-icon" href="safari-pinned-tab.svg" color="#18a058" />
+    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#18a058" />
    <meta name="msapplication-TileColor" content="#da532c" />
    <meta name="theme-color" content="#ffffff" />
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -1,5 +0,0 @@
 home:
  categories:
    newestTools: Newest tools
    allTheTools: All the tools
    yourFavoriteTools: Your favorite tools
--- a/locales/fr.yml
+++ b/locales/fr.yml
@@ -1,3 +0,0 @@
 home:
  categories:
    newestTools: "Nouveaux outils"
--- a/netlify.toml
+++ b/netlify.toml
@@ -1,4 +0,0 @@
 [[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200
--- a/nginx.conf
+++ b/nginx.conf
@@ -1,10 +0,0 @@
 server {
    listen 80;
    server_name localhost;
    root /usr/share/nginx/html;
    index index.html;
    location / {
        try_files $uri $uri/ /index.html;
    }
 }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "it-tools",
-  "version": "2023.8.21-6f93cba",
+  "version": "2.13.0",
  "description": "Collection of handy online tools for developers, with great UX. ",
  "keywords": [
    "productivity",
@@ -21,115 +21,82 @@
  },
  "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-new-tool": "node scripts/create-tool.mjs",
+    "release": "standard-version"
    "release": "node ./scripts/release.mjs"
  },
  "dependencies": {
    "@it-tools/bip39": "^0.0.4",
    "@it-tools/oggen": "^1.3.0",
    "@sindresorhus/slugify": "^2.2.0",
    "@tiptap/pm": "^2.1.6",
    "@tiptap/starter-kit": "^2.1.6",
    "@tiptap/vue-3": "^2.0.3",
    "@vicons/material": "^0.12.0",
    "@vicons/tabler": "^0.12.0",
-    "@vueuse/core": "^10.3.0",
+    "@vueuse/core": "^8.9.4",
-    "@vueuse/head": "^1.0.0",
+    "@vueuse/head": "^0.7.13",
    "@vueuse/router": "^10.0.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.15.0",
    "crypto-js": "^4.1.1",
    "date-fns": "^2.29.3",
    "emojilib": "^3.0.10",
    "figue": "^1.2.0",
-    "fuse.js": "^6.6.2",
+    "highlight.js": "^11.6.0",
-    "highlight.js": "^11.7.0",
+    "json5": "^2.2.1",
    "iarna-toml-esm": "^3.0.5",
    "ibantools": "^4.3.3",
    "json5": "^2.2.3",
    "jwt-decode": "^3.1.2",
    "libphonenumber-js": "^1.10.28",
    "lodash": "^4.17.21",
-    "mathjs": "^11.9.1",
+    "mathjs": "^10.6.4",
    "mime-types": "^2.1.35",
-    "monaco-editor": "^0.41.0",
+    "naive-ui": "^2.33.5",
-    "naive-ui": "^2.34.3",
+    "pinia": "^2.0.23",
    "netmask": "^2.0.2",
    "node-forge": "^1.3.1",
    "oui": "^12.0.52",
    "pinia": "^2.0.34",
    "plausible-tracker": "^0.3.8",
    "qrcode": "^1.5.1",
    "randombytes": "^2.1.0",
-    "sql-formatter": "^13.0.0",
+    "sql-formatter": "^8.2.0",
-    "ua-parser-js": "^1.0.35",
+    "uuid": "^8.3.2",
-    "unicode-emoji-json": "^0.4.0",
+    "vue": "^3.2.45",
-    "unplugin-auto-import": "^0.16.4",
+    "vue-router": "^4.1.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"
  },
  "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",
    "@types/bcryptjs": "^2.4.2",
    "@types/crypto-js": "^4.1.1",
-    "@types/jsdom": "^21.0.0",
+    "@types/jsdom": "^16.2.15",
-    "@types/lodash": "^4.14.192",
+    "@types/lodash": "^4.14.188",
    "@types/mime-types": "^2.1.1",
-    "@types/netmask": "^2.0.0",
+    "@types/node": "^16.18.3",
    "@types/node": "^18.15.11",
    "@types/node-forge": "^1.3.2",
    "@types/qrcode": "^1.5.0",
    "@types/randombytes": "^2.0.0",
-    "@types/ua-parser-js": "^0.7.36",
+    "@types/uuid": "^8.3.4",
-    "@types/uuid": "^9.0.0",
+    "@typescript-eslint/parser": "^5.42.1",
-    "@unocss/eslint-config": "^0.55.0",
+    "@vitejs/plugin-vue": "^2.3.4",
-    "@vitejs/plugin-vue": "^4.3.2",
+    "@vitejs/plugin-vue-jsx": "^1.3.10",
-    "@vitejs/plugin-vue-jsx": "^3.0.2",
+    "@vue/eslint-config-prettier": "^7.0.0",
-    "@vue/compiler-sfc": "^3.2.47",
+    "@vue/eslint-config-typescript": "^10.0.0",
-    "@vue/runtime-dom": "^3.3.4",
+    "@vue/test-utils": "^2.2.2",
-    "@vue/test-utils": "^2.3.2",
+    "@vue/tsconfig": "^0.1.3",
-    "@vue/tsconfig": "^0.4.0",
+    "c8": "^7.12.0",
-    "c8": "^8.0.0",
+    "eslint": "^8.27.0",
-    "consola": "^3.0.2",
+    "eslint-config-prettier": "^8.5.0",
-    "eslint": "^8.47.0",
+    "eslint-import-resolver-typescript": "^3.5.2",
-    "jsdom": "^22.0.0",
+    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-vue": "^8.7.1",
    "jsdom": "^19.0.0",
    "less": "^4.1.3",
-    "prettier": "^3.0.0",
+    "prettier": "^2.7.1",
-    "typescript": "~5.2.0",
+    "standard-version": "^9.5.0",
-    "unocss": "^0.55.0",
+    "start-server-and-test": "^1.14.0",
-    "unocss-preset-scrollbar": "^0.2.1",
+    "typescript": "~4.5.5",
-    "unplugin-icons": "^0.17.0",
+    "vite": "^2.9.15",
-    "unplugin-vue-components": "^0.25.0",
+    "vite-plugin-md": "^0.12.4",
-    "vite": "^4.4.9",
+    "vite-plugin-pwa": "^0.11.13",
-    "vite-plugin-pwa": "^0.16.0",
+    "vite-svg-loader": "^3.6.0",
-    "vite-plugin-vue-markdown": "^0.23.5",
+    "vitest": "^0.13.1",
-    "vite-svg-loader": "^4.0.0",
+    "vue-tsc": "^0.31.4",
-    "vitest": "^0.34.0",
+    "workbox-window": "^6.5.4"
    "workbox-window": "^7.0.0",
    "zx": "^7.2.1"
  }
 }
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -1,65 +0,0 @@
 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.
 */
 export default defineConfig({
  testDir: './src',
  testMatch: /.*\.e2e\.(spec\.)?ts/,
  /* Run tests in files in parallel */
  fullyParallel: true,
  /* Fail the build on CI if you accidentally left test.only in the source code. */
  forbidOnly: isCI,
  /* Retry on CI only */
  retries: isCI ? 2 : 0,
  /* Opt out of parallel tests on CI. */
  workers: isCI ? 1 : undefined,
  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
  reporter: 'html',
  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
  use: {
    /* Base URL to use in actions like `await page.goto('/')`. */
    baseURL: baseUrl,
    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
    trace: 'on-first-retry',
    testIdAttribute: 'data-test-id',
    locale: 'en-GB',
    timezoneId: 'Europe/Paris',
  },
  /* Configure projects for major browsers */
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
  ],
  /* Run your local dev server before starting the tests */
  ...(useWebServer
    && {
      webServer: {
        command: 'npm run preview',
        url: 'http://127.0.0.1:5050',
        reuseExistingServer: !isCI,
      },
    }
  ),
 });
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/renovate.json
+++ b/renovate.json
@@ -1,6 +0,0 @@
 {
  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
  "extends": [
    "config:base"
  ]
 }
--- a/scripts/create-tool.mjs
+++ b/scripts/create-tool.mjs
@@ -5,7 +5,6 @@ import { fileURLToPath } from 'url';
 const currentDirname = dirname(fileURLToPath(import.meta.url));
 const toolsDir = join(currentDirname, '..', 'src', 'tools');
 // eslint-disable-next-line no-undef
 const toolName = process.argv[2];
 if (!toolName) {
@@ -29,9 +28,9 @@ createToolFile(
  `${toolName}.vue`,
  `
 <template>
-  <div>
+  <n-card>
    Lorem ipsum
-  </div>
+  </n-card>
 </template>
 <script setup lang="ts">
@@ -56,7 +55,6 @@ export const tool = defineTool({
  keywords: ['${toolName.split('-').join("', '")}'],
  component: () => import('./${toolName}.vue'),
  icon: ArrowsShuffle,
  createdAt: new Date('${new Date().toISOString().split('T')[0]}'),
 });
 `,
 );
@@ -74,28 +72,6 @@ import { expect, describe, it } from 'vitest';
 `,
 );
 createToolFile(
  `${toolName}.e2e.spec.ts`,
  `
 import { test, expect } from '@playwright/test';
 test.describe('Tool - ${toolNameTitleCase}', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/${toolName}');
  });
  test('Has correct title', async ({ page }) => {
    await expect(page).toHaveTitle('${toolNameTitleCase} - IT Tools');
  });
  test('', async ({ page }) => {
  });
 });
 `,
 );
 const toolsIndex = join(toolsDir, 'index.ts');
 const indexContent = await readFile(toolsIndex, { encoding: 'utf-8' }).then((r) => r.split('\n'));
--- a/scripts/getLatestChangelog.mjs
+++ b/scripts/getLatestChangelog.mjs
@@ -1,6 +0,0 @@
 import { readFile } from 'fs/promises';
 const changelogContent = await readFile('./CHANGELOG.md', 'utf-8');
 const [, lastChangelog] = changelogContent.split(/^## .*$/gm);
 console.log(lastChangelog.trim());
--- a/scripts/release.mjs
+++ b/scripts/release.mjs
@@ -1,57 +0,0 @@
 import { $, argv } from 'zx';
 import { consola } from 'consola';
 import { rawCommitsToMarkdown } from './shared/commits.mjs';
 import { addToChangelog } from './shared/changelog.mjs';
 $.verbose = false;
 const isDryRun = argv['dry-run'] ?? false;
 const now = new Date();
 const currentShortSha = (await $`git rev-parse --short HEAD`).stdout.trim();
 const calver = now.toISOString().slice(0, 10).replace(/-/g, '.');
 const version = `${calver}-${currentShortSha}`;
 const { stdout: rawCommits } = await $`git log --pretty=oneline $(git describe --tags --abbrev=0)..HEAD`;
 const markdown = rawCommitsToMarkdown({ rawCommits });
 consola.info(`Changelog: \n\n${markdown}\n\n`);
 if (isDryRun) {
  consola.info(`[dry-run] Not creating version nor tag`);
  consola.info('Aborting');
  process.exit(0);
 }
 const shouldContinue = await consola.prompt(
  'This script will create a new version and tag, and update the changelog. Continue?',
  {
    type: 'confirm',
  },
 );
 if (!shouldContinue) {
  consola.info('Aborting');
  process.exit(0);
 }
 consola.info('Updating changelog');
 await addToChangelog({ changelog: markdown, version });
 consola.success('Changelog updated');
 try {
  consola.info('Committing changelog changes');
  await $`git add CHANGELOG.md`;
  await $`git commit -m "docs(changelog): update changelog for ${version}"`;
  consola.success('Changelog changes committed');
  consola.info('Creating version and tag');
  await $`npm version ${version} -m "chore(version): release ${version}"`;
  consola.info('Npm version released with tag');
 } catch (error) {
  consola.error(error);
  consola.info('Aborting');
  process.exit(1);
 }
--- a/scripts/shared/changelog.mjs
+++ b/scripts/shared/changelog.mjs
@@ -1,15 +0,0 @@
 import { readFile, writeFile } from 'fs/promises';
 export { addToChangelog };
 async function addToChangelog({ changelog, version, changelogPath = './CHANGELOG.md' }) {
  const changelogContent = await readFile(changelogPath, 'utf-8');
  const versionTitle = `## Version ${version}`;
  if (changelogContent.includes(versionTitle)) {
    throw new Error(`Version ${version} already exists in the changelog`);
  }
  const newChangeLogContent = changelogContent.replace('## ', `${versionTitle}\n\n${changelog}\n\n## `);
  await writeFile(changelogPath, newChangeLogContent, 'utf-8');
 }
--- a/scripts/shared/commits.mjs
+++ b/scripts/shared/commits.mjs
@@ -1,54 +0,0 @@
 import _ from 'lodash';
 export { rawCommitsToMarkdown };
 const commitScopesToHumanReadable = {
  build: 'Build system',
  chore: 'Chores',
  ci: 'Continuous integration',
  docs: 'Documentation',
  feat: 'Features',
  fix: 'Bug fixes',
  infra: 'Infrastucture',
  perf: 'Performance',
  refactor: 'Refactoring',
  test: 'Tests',
 };
 const commitTypesOrder = ['feat', 'fix', 'perf', 'refactor', 'test', 'build', 'ci', 'chore', 'other'];
 const getCommitTypeSortIndex = (type) =>
  commitTypesOrder.includes(type) ? commitTypesOrder.indexOf(type) : commitTypesOrder.length;
 function parseCommitLine(commit) {
  const [sha, ...splittedRawMessage] = commit.trim().split(' ');
  const rawMessage = splittedRawMessage.join(' ');
  const { type, scope, subject } = /^(?<type>.*?)(\((?<scope>.*)\))?: ?(?<subject>.+)$/.exec(rawMessage)?.groups ?? {};
  return {
    sha: sha.slice(0, 7),
    type: type ?? 'other',
    scope,
    subject: subject ?? rawMessage,
  };
 }
 function commitSectionsToMarkdown({ type, commits }) {
  return [
    `### ${commitScopesToHumanReadable[type] ?? _.capitalize(type)}`,
    ...commits.map(({ sha, scope, subject }) => ['-', scope ? `**${scope}**:` : '', subject, `(${sha})`].join(' ')),
  ].join('\n');
 }
 function rawCommitsToMarkdown({ rawCommits }) {
  return _.chain(rawCommits)
    .trim()
    .split('\n')
    .map(parseCommitLine)
    .groupBy('type')
    .map((commits, type) => ({ type, commits }))
    .sortBy(({ type }) => getCommitTypeSortIndex(type))
    .map(commitSectionsToMarkdown)
    .join('\n\n')
    .value();
 }
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { RouterView, useRoute } from 'vue-router';
+import { computed } from 'vue';
-import { NGlobalStyle, NMessageProvider, NNotificationProvider, darkTheme } from 'naive-ui';
+import { useRoute, RouterView } from 'vue-router';
 import { darkTheme, NGlobalStyle, NMessageProvider } from 'naive-ui';
 import { darkThemeOverrides, lightThemeOverrides } from './themes';
 import { layouts } from './layouts';
 import { useStyleStore } from './stores/style.store';
@@ -15,14 +16,12 @@ const themeOverrides = computed(() => (styleStore.isDarkTheme ? darkThemeOverrid
 <template>
  <n-config-provider :theme="theme" :theme-overrides="themeOverrides">
-    <NGlobalStyle />
+    <n-global-style />
-    <NMessageProvider placement="bottom">
+    <n-message-provider placement="bottom">
-      <NNotificationProvider placement="bottom-right">
+      <component :is="layout">
-        <component :is="layout">
+        <router-view />
-          <RouterView />
+      </component>
-        </component>
+    </n-message-provider>
      </NNotificationProvider>
    </NMessageProvider>
  </n-config-provider>
 </template>
--- a/src/components/CollapsibleToolMenu.vue
+++ b/src/components/CollapsibleToolMenu.vue
@@ -1,114 +0,0 @@
 <script setup lang="ts">
 import { useStorage } from '@vueuse/core';
 import { useThemeVars } from 'naive-ui';
 import { RouterLink, useRoute } from 'vue-router';
 import MenuIconItem from './MenuIconItem.vue';
 import type { Tool, ToolCategory } from '@/tools/tools.types';
 const props = withDefaults(defineProps<{ toolsByCategory?: ToolCategory[] }>(), { toolsByCategory: () => [] });
 const { toolsByCategory } = toRefs(props);
 const route = useRoute();
 const makeLabel = (tool: Tool) => () => h(RouterLink, { to: tool.path }, { default: () => tool.name });
 const makeIcon = (tool: Tool) => () => h(MenuIconItem, { tool });
 const collapsedCategories = useStorage<Record<string, boolean>>(
  'menu-tool-option:collapsed-categories',
  {},
  undefined,
  {
    deep: true,
    serializer: {
      read: v => (v ? JSON.parse(v) : null),
      write: v => JSON.stringify(v),
    },
  },
 );
 function toggleCategoryCollapse({ name }: { name: string }) {
  collapsedCategories.value[name] = !collapsedCategories.value[name];
 }
 const menuOptions = computed(() =>
  toolsByCategory.value.map(({ name, components }) => ({
    name,
    isCollapsed: collapsedCategories.value[name],
    tools: components.map(tool => ({
      label: makeLabel(tool),
      icon: makeIcon(tool),
      key: tool.name,
    })),
  })),
 );
 const themeVars = useThemeVars();
 </script>
 <template>
  <div v-for="{ name, tools, isCollapsed } of menuOptions" :key="name">
    <div ml-6px mt-12px flex cursor-pointer items-center op-60 @click="toggleCategoryCollapse({ name })">
      <span :class="{ 'rotate-0': isCollapsed, 'rotate-90': !isCollapsed }" text-16px lh-1 op-50 transition-transform>
        <icon-mdi-chevron-right />
      </span>
      <span ml-8px text-13px>
        {{ name }}
      </span>
    </div>
    <n-collapse-transition :show="!isCollapsed">
      <div class="menu-wrapper">
        <div class="toggle-bar" @click="toggleCategoryCollapse({ name })" />
        <n-menu
          class="menu"
          :value="route.name as string"
          :collapsed-width="64"
          :collapsed-icon-size="22"
          :options="tools"
          :indent="8"
          :default-expand-all="true"
        />
      </div>
    </n-collapse-transition>
  </div>
 </template>
 <style scoped lang="less">
 .menu-wrapper {
  display: flex;
  flex-direction: row;
  .menu {
    flex: 1;
    margin-bottom: 5px;
    ::v-deep(.n-menu-item-content::before) {
      left: 0;
      right: 13px;
    }
  }
  .toggle-bar {
    width: 24px;
    opacity: 0.1;
    transition: opacity ease 0.2s;
    position: relative;
    cursor: pointer;
    &::before {
      width: 2px;
      height: 100%;
      content: ' ';
      background-color: v-bind('themeVars.textColor3');
      border-radius: 2px;
      position: absolute;
      top: 0;
      left: 14px;
    }
    &:hover {
      opacity: 0.5;
    }
  }
 }
 </style>
--- a/src/components/ColoredCard.vue
+++ b/src/components/ColoredCard.vue
@@ -1,13 +1,8 @@
 <script setup lang="ts">
 import type { Component } from 'vue';
 const props = defineProps<{ icon: Component; title: string }>();
 const { icon, title } = toRefs(props);
 </script>
 <template>
-  <c-card class="colored-card">
+  <n-card class="colored-card">
-    <n-icon class="icon" size="40" :component="icon" />
+    <n-space justify="space-between" align="center">
      <n-icon class="icon" size="40" :component="icon" />
    </n-space>
    <n-h3 class="title">
      <n-ellipsis>{{ title }}</n-ellipsis>
    </n-h3>
@@ -17,9 +12,16 @@ const { icon, title } = toRefs(props);
        <slot />
      </n-ellipsis>
    </div>
-  </c-card>
+  </n-card>
 </template>
 <script setup lang="ts">
 import { toRefs, type Component } from 'vue';
 const props = defineProps<{ icon: Component; title: string }>();
 const { icon, title } = toRefs(props);
 </script>
 <style lang="less" scoped>
 .colored-card {
  background: rgb(37, 99, 108);
--- a/src/components/FavoriteButton.vue
+++ b/src/components/FavoriteButton.vue
@@ -1,43 +0,0 @@
 <script setup lang="ts">
 import { FavoriteFilled } from '@vicons/material';
 import { useToolStore } from '@/tools/tools.store';
 import type { Tool } from '@/tools/tools.types';
 const props = defineProps<{ tool: Tool }>();
 const toolStore = useToolStore();
 const { tool } = toRefs(props);
 const isFavorite = computed(() => toolStore.isToolFavorite({ tool }));
 const buttonType = computed(() => (isFavorite.value ? 'primary' : 'default'));
 function toggleFavorite(event: MouseEvent) {
  event.preventDefault();
  if (toolStore.isToolFavorite({ tool })) {
    toolStore.removeToolFromFavorites({ tool });
    return;
  }
  toolStore.addToolToFavorites({ tool });
 }
 </script>
 <template>
  <n-tooltip trigger="hover">
    <template #trigger>
      <c-button
        variant="text"
        circle
        :type="buttonType"
        :style="{ opacity: isFavorite ? 1 : 0.2 }"
        @click="toggleFavorite"
      >
        <n-icon :component="FavoriteFilled" />
      </c-button>
    </template>
    {{ isFavorite ? 'Remove from favorites' : 'Add to favorites' }}
  </n-tooltip>
 </template>
--- a/src/components/FormatTransformer.vue
+++ b/src/components/FormatTransformer.vue
@@ -1,57 +0,0 @@
 <script setup lang="ts">
 import _ from 'lodash';
 import type { UseValidationRule } from '@/composable/validation';
 import CInputText from '@/ui/c-input-text/c-input-text.vue';
 const props = withDefaults(
  defineProps<{
    transformer?: (v: string) => string
    inputValidationRules?: UseValidationRule<string>[]
    inputLabel?: string
    inputPlaceholder?: string
    inputDefault?: string
    outputLabel?: string
    outputLanguage?: string
  }>(),
  {
    transformer: _.identity,
    inputValidationRules: () => [],
    inputLabel: 'Input',
    inputDefault: '',
    inputPlaceholder: 'Input...',
    outputLabel: 'Output',
    outputLanguage: '',
  },
 );
 const { transformer, inputValidationRules, inputLabel, outputLabel, outputLanguage, inputPlaceholder, inputDefault }
  = toRefs(props);
 const inputElement = ref<typeof CInputText>();
 const input = ref(inputDefault.value);
 const output = computed(() => transformer.value(input.value));
 </script>
 <template>
  <CInputText
    ref="inputElement"
    v-model:value="input"
    :placeholder="inputPlaceholder"
    :label="inputLabel"
    rows="20"
    autosize
    raw-text
    multiline
    test-id="input"
    :validation-rules="inputValidationRules"
    monospace
  />
  <div>
    <div mb-5px>
      {{ outputLabel }}
    </div>
    <textarea-copyable :value="output" :language="outputLanguage" :follow-height-of="inputElement?.inputWrapperRef" />
  </div>
 </template>
--- a/src/components/InputCopyable.vue
+++ b/src/components/InputCopyable.vue
@@ -1,26 +1,43 @@
 <template>
  <n-input v-model:value="value">
    <template #suffix>
      <n-tooltip trigger="hover">
        <template #trigger>
          <n-button quaternary circle @click="onCopyClicked">
            <n-icon :component="ContentCopyFilled" />
          </n-button>
        </template>
        {{ tooltipText }}
      </n-tooltip>
    </template>
  </n-input>
 </template>
 <script setup lang="ts">
-import { useVModel } from '@vueuse/core';
+import { useVModel, useClipboard } from '@vueuse/core';
-import { useCopy } from '@/composable/copy';
+import { ContentCopyFilled } from '@vicons/material';
 import { ref } from 'vue';
 const props = defineProps<{ value: string }>();
 const emit = defineEmits(['update:value']);
 const value = useVModel(props, 'value', emit);
-const { copy, isJustCopied } = useCopy({ source: value, createToast: false });
+const tooltipText = ref('Copy to clipboard');
-const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : 'Copy to clipboard');
+
 const { copy } = useClipboard({ source: value });
 function onCopyClicked() {
  copy();
  tooltipText.value = 'Copied !';
  setTimeout(() => {
    tooltipText.value = 'Copy to clipboard';
  }, 2000);
 }
 </script>
-<template>
+<style scoped>
-  <c-input-text v-model:value="value">
+::v-deep(.n-input-wrapper) {
-    <template #suffix>
+  padding-right: 5px;
-      <n-tooltip trigger="hover">
+}
-        <template #trigger>
+</style>
          <c-button circle variant="text" size="small" @click="copy()">
            <icon-mdi-content-copy />
          </c-button>
        </template>
        {{ tooltipText }}
      </n-tooltip>
    </template>
  </c-input-text>
 </template>
--- a/src/components/MenuIconItem.vue
+++ b/src/components/MenuIconItem.vue
@@ -1,20 +1,21 @@
-<script setup lang="ts">
+<template>
-import { useThemeVars } from 'naive-ui';
+  <div class="menu-icon-item">
-import type { Tool } from '@/tools/tools.types';
+    <n-icon :component="tool.icon" />
    <div v-if="tool.isNew" class="badge"></div>
  </div>
 </template>
-const props = defineProps<{ tool: Tool }>();
+<script setup lang="ts">
 import type { ITool } from '@/tools/tool';
 import { useThemeVars } from 'naive-ui';
 import { toRefs } from 'vue';
 const props = defineProps<{ tool: ITool }>();
 const { tool } = toRefs(props);
 const theme = useThemeVars();
 </script>
 <template>
  <div class="menu-icon-item">
    <n-icon :component="tool.icon" />
    <div v-if="tool.isNew" class="badge" />
  </div>
 </template>
 <style lang="less" scoped>
 .menu-icon-item {
  position: relative;
--- a/src/components/MenuLayout.vue
+++ b/src/components/MenuLayout.vue
@@ -1,11 +1,3 @@
 <script setup lang="ts">
 import { useStyleStore } from '@/stores/style.store';
 const styleStore = useStyleStore();
 const { isMenuCollapsed, isSmallScreen } = toRefs(styleStore);
 const siderPosition = computed(() => (isSmallScreen.value ? 'absolute' : 'static'));
 </script>
 <template>
  <n-layout has-sider>
    <n-layout-sider
@@ -27,6 +19,15 @@ const siderPosition = computed(() => (isSmallScreen.value ? 'absolute' : 'static
  </n-layout>
 </template>
 <script setup lang="ts">
 import { useStyleStore } from '@/stores/style.store';
 import { toRefs, computed } from 'vue';
 const styleStore = useStyleStore();
 const { isMenuCollapsed, isSmallScreen } = toRefs(styleStore);
 const siderPosition = computed(() => (isSmallScreen.value ? 'absolute' : 'static'));
 </script>
 <style lang="less" scoped>
 .overlay {
  position: absolute;
--- a/src/components/NavbarButtons.vue
+++ b/src/components/NavbarButtons.vue
@@ -1,64 +1,71 @@
 <script setup lang="ts">
 import { BrandGithub, BrandTwitter, InfoCircle, Moon, Sun } from '@vicons/tabler';
 import { useStyleStore } from '@/stores/style.store';
 const styleStore = useStyleStore();
 const { isDarkTheme } = toRefs(styleStore);
 </script>
 <template>
  <n-tooltip trigger="hover">
    <template #trigger>
-      <c-button
+      <n-button
        size="large"
        circle
-        variant="text"
+        quaternary
        tag="a"
        href="https://github.com/CorentinTh/it-tools"
        rel="noopener"
        target="_blank"
-        rel="noopener noreferrer"
+        aria-label="IT-Tools' github repository"
        aria-label="IT-Tools' GitHub repository"
      >
        <n-icon size="25" :component="BrandGithub" />
-      </c-button>
+      </n-button>
    </template>
    Github repository
  </n-tooltip>
  <n-tooltip trigger="hover">
    <template #trigger>
-      <c-button
+      <n-button
        size="large"
        circle
-        variant="text"
+        quaternary
        tag="a"
        href="https://twitter.com/ittoolsdottech"
        rel="noopener"
        target="_blank"
-        aria-label="IT Tools' Twitter account"
+        aria-label="IT Tools' twitter account"
      >
        <n-icon size="25" :component="BrandTwitter" />
-      </c-button>
+      </n-button>
    </template>
-    IT Tools' Twitter account
+    IT Tools' twitter account
  </n-tooltip>
  <router-link to="/about" #="{ navigate, href }" custom>
    <n-tooltip trigger="hover">
      <template #trigger>
        <n-button tag="a" :href="href" circle quaternary size="large" aria-label="About" @click="navigate">
          <n-icon size="25" :component="InfoCircle" />
        </n-button>
      </template>
      About
    </n-tooltip>
  </router-link>
  <n-tooltip trigger="hover">
    <template #trigger>
-      <c-button circle variant="text" to="/about" aria-label="About">
+      <n-button size="large" circle quaternary aria-label="Toggle dark/light mode" @click="isDarkTheme = !isDarkTheme">
        <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>
+      </n-button>
    </template>
    <span v-if="isDarkTheme">Light mode</span>
    <span v-else>Dark mode</span>
  </n-tooltip>
 </template>
 <script setup lang="ts">
 import { useStyleStore } from '@/stores/style.store';
 import { BrandGithub, BrandTwitter, InfoCircle, Moon, Sun } from '@vicons/tabler';
 import { toRefs } from 'vue';
 const styleStore = useStyleStore();
 const { isDarkTheme } = toRefs(styleStore);
 </script>
 <style lang="less" scoped>
 .n-button {
  &:not(:last-child) {
--- a/src/components/SearchBar.vue
+++ b/src/components/SearchBar.vue
@@ -0,0 +1,81 @@
 <script lang="ts" setup>
 import { tools } from '@/tools';
 import { SearchRound } from '@vicons/material';
 import { useMagicKeys, whenever } from '@vueuse/core';
 import { deburr } from 'lodash';
 import { computed, ref } from 'vue';
 import { useRouter } from 'vue-router';
 const router = useRouter();
 const queryString = ref('');
 const cleanString = (s: string) => deburr(s.trim().toLowerCase());
 const searchableTools = tools.map(({ name, description, keywords, path }) => ({
  searchableText: [name, description, ...keywords].map(cleanString).join(' '),
  path,
  name,
 }));
 const options = computed(() => {
  const query = cleanString(queryString.value);
  return searchableTools
    .filter(({ searchableText }) => searchableText.includes(query))
    .map(({ name, path }) => ({ label: name, value: path }));
 });
 function onSelect(path: string) {
  router.push(path);
  queryString.value = '';
 }
 const focusTarget = ref();
 const keys = useMagicKeys({
  passive: false,
  onEventFired(e) {
    if (e.ctrlKey && e.key === 'k' && e.type === 'keydown') {
      e.preventDefault();
    }
  },
 });
 whenever(keys.ctrl_k, () => {
  focusTarget.value.focus();
 });
 </script>
 <template>
  <div class="search-bar">
    <n-auto-complete
      v-model:value="queryString"
      :options="options"
      :input-props="{ autocomplete: 'disabled' }"
      :on-select="onSelect"
    >
      <template #default="{ handleInput, handleBlur, handleFocus, value: slotValue }">
        <n-input
          ref="focusTarget"
          round
          clearable
          placeholder="Search a tool... [Ctrl + K]"
          :value="slotValue"
          @input="handleInput"
          @focus="handleFocus"
          @blur="handleBlur"
        >
          <template #prefix>
            <n-icon :component="SearchRound" />
          </template>
        </n-input>
      </template>
    </n-auto-complete>
  </div>
 </template>
 <style lang="less" scoped>
 // ::v-deep(.n-input__border) {
 //     border: none;
 // }
 </style>
--- a/src/components/SpanCopyable.vue
+++ b/src/components/SpanCopyable.vue
@@ -1,27 +0,0 @@
 <script setup lang="ts">
 import { useCopy } from '@/composable/copy';
 const props = withDefaults(defineProps<{ value?: string }>(), { value: '' });
 const { value } = toRefs(props);
 const initialText = 'Copy to clipboard';
 const { copy, isJustCopied } = useCopy({ source: value, createToast: false });
 const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : initialText);
 </script>
 <template>
  <n-tooltip trigger="hover">
    <template #trigger>
      <span class="value" @click="copy()">{{ value }}</span>
    </template>
    {{ tooltipText }}
  </n-tooltip>
 </template>
 <style scoped lang="less">
 .value {
  cursor: pointer;
  font-family: monospace;
 }
 </style>
--- a/src/components/TextareaCopyable.vue
+++ b/src/components/TextareaCopyable.vue
@@ -1,21 +1,52 @@
 <template>
  <div style="overflow-x: hidden; width: 100%">
    <n-card class="result-card">
      <n-scrollbar
        x-scrollable
        trigger="none"
        :style="height ? `min-height: ${height - 40 /* card padding */ + 10 /* negative margin compensation */}px` : ''"
      >
        <n-config-provider :hljs="hljs">
          <n-code :code="value" :language="language" :trim="false" />
        </n-config-provider>
      </n-scrollbar>
      <n-tooltip v-if="value" trigger="hover">
        <template #trigger>
          <div class="copy-button" :class="[copyPlacement]">
            <n-button secondary circle size="large" @click="onCopyClicked">
              <n-icon size="22" :component="Copy" />
            </n-button>
          </div>
        </template>
        <span>{{ tooltipText }}</span>
      </n-tooltip>
    </n-card>
    <n-space v-if="copyPlacement === 'outside'" justify="center" style="margin-top: 15px">
      <n-button secondary @click="onCopyClicked"> {{ tooltipText }} </n-button>
    </n-space>
  </div>
 </template>
 <script setup lang="ts">
 import { Copy } from '@vicons/tabler';
-import { useElementSize } from '@vueuse/core';
+import { useClipboard, useElementSize } from '@vueuse/core';
 import hljs from 'highlight.js/lib/core';
 import jsonHljs from 'highlight.js/lib/languages/json';
 import sqlHljs from 'highlight.js/lib/languages/sql';
 import xmlHljs from 'highlight.js/lib/languages/xml';
-import yamlHljs from 'highlight.js/lib/languages/yaml';
+import { ref, toRefs } from 'vue';
-import iniHljs from 'highlight.js/lib/languages/ini';
+
-import { useCopy } from '@/composable/copy';
+hljs.registerLanguage('sql', sqlHljs);
 hljs.registerLanguage('json', jsonHljs);
 hljs.registerLanguage('html', xmlHljs);
 const props = withDefaults(
  defineProps<{
-    value: string
+    value: string;
-    followHeightOf?: HTMLElement | null
+    followHeightOf?: HTMLElement | null;
-    language?: string
+    language?: string;
-    copyPlacement?: 'top-right' | 'bottom-right' | 'outside' | 'none'
+    copyPlacement?: 'top-right' | 'bottom-right' | 'outside' | 'none';
-    copyMessage?: string
+    copyMessage?: string;
  }>(),
  {
    followHeightOf: null,
@@ -24,51 +55,22 @@ const props = withDefaults(
    copyMessage: 'Copy to clipboard',
  },
 );
 hljs.registerLanguage('sql', sqlHljs);
 hljs.registerLanguage('json', jsonHljs);
 hljs.registerLanguage('html', xmlHljs);
 hljs.registerLanguage('xml', xmlHljs);
 hljs.registerLanguage('yaml', yamlHljs);
 hljs.registerLanguage('toml', iniHljs);
 const { value, language, followHeightOf, copyPlacement, copyMessage } = toRefs(props);
-const { height } = followHeightOf.value ? useElementSize(followHeightOf) : { height: ref(null) };
+const { height } = followHeightOf ? useElementSize(followHeightOf) : { height: ref(null) };
-const { copy, isJustCopied } = useCopy({ source: value, createToast: false });
+const { copy } = useClipboard({ source: value });
-const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : copyMessage.value);
+const tooltipText = ref(copyMessage.value);
 function onCopyClicked() {
  copy();
  tooltipText.value = 'Copied !';
  setTimeout(() => {
    tooltipText.value = copyMessage.value;
  }, 2000);
 }
 </script>
 <template>
  <div style="overflow-x: hidden; width: 100%">
    <c-card class="result-card">
      <n-scrollbar
        x-scrollable
        trigger="none"
        :style="height ? `min-height: ${height - 40 /* card padding */ + 10 /* negative margin compensation */}px` : ''"
      >
        <n-config-provider :hljs="hljs">
          <n-code :code="value" :language="language" :trim="false" data-test-id="area-content" />
        </n-config-provider>
      </n-scrollbar>
      <n-tooltip v-if="value" trigger="hover">
        <template #trigger>
          <div class="copy-button" :class="[copyPlacement]">
            <c-button circle important:h-10 important:w-10 @click="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()">
        {{ tooltipText }}
      </c-button>
    </div>
  </div>
 </template>
 <style lang="less" scoped>
 ::v-deep(.n-scrollbar) {
  padding-bottom: 10px;
--- a/src/components/ToolCard.vue
+++ b/src/components/ToolCard.vue
@@ -1,62 +1,56 @@
 <script setup lang="ts">
 import { useThemeVars } from 'naive-ui';
 import FavoriteButton from './FavoriteButton.vue';
 import type { Tool } from '@/tools/tools.types';
 const props = defineProps<{ tool: Tool & { category: string } }>();
 const { tool } = toRefs(props);
 const theme = useThemeVars();
 </script>
 <template>
  <router-link :to="tool.path">
-    <c-card class="tool-card" shadow>
+    <n-card class="tool-card">
-      <div flex items-center justify-between>
+      <n-space justify="space-between" align="center">
        <n-icon class="icon" size="40" :component="tool.icon" />
-        <div flex items-center gap-8px>
+        <n-tag
-          <n-tag
+          v-if="tool.isNew"
-            v-if="tool.isNew"
+          size="small"
-            size="small"
+          class="badge-new"
-            class="badge-new"
+          round
-            round
+          type="success"
-            type="success"
+          :bordered="false"
-            :bordered="false"
+          :color="{ color: theme.primaryColor, textColor: theme.tagColor }"
-            :color="{ color: theme.primaryColor, textColor: theme.tagColor }"
+        >
-          >
+          New
-            New
+        </n-tag>
-          </n-tag>
+      </n-space>
-
+      <n-h3 class="title">
-          <FavoriteButton :tool="tool" />
+        <n-ellipsis>{{ tool.name }}</n-ellipsis>
        </div>
      </div>
      <n-h3 class="title" truncate>
        {{ tool.name }}
      </n-h3>
      <div class="description">
-        <div line-clamp-2 style="min-height: 44.78px">
+        <n-ellipsis :line-clamp="2" :tooltip="false">
          {{ tool.description }}
-        </div>
+        </n-ellipsis>
      </div>
-    </c-card>
+    </n-card>
  </router-link>
 </template>
 <script setup lang="ts">
 import type { ITool } from '@/tools/tool';
 import { useThemeVars } from 'naive-ui';
 import { toRefs } from 'vue';
 const props = defineProps<{ tool: ITool & { category: string } }>();
 const { tool } = toRefs(props);
 const theme = useThemeVars();
 </script>
 <style lang="less" scoped>
 a {
  text-decoration: none;
 }
 .tool-card {
-  border-width: 2px !important;
+  &:hover {
-  color: transparent;
+    border-color: var(--n-color-target);
-  position: relative;
+  }
  border-radius: 15px;
  border: none;
  .icon {
-    opacity: 0.4;
+    opacity: 0.6;
-    color: v-bind('theme.textColorBase');
+    color: #ffffff;
  }
  .title {
@@ -65,49 +59,8 @@ a {
  .description {
    opacity: 0.6;
-    color: v-bind('theme.textColorBase');
+    color: #ffffff;
    margin: 5px 0;
  }
  &::after {
    --mask-radius: 20em;
    border-radius: 15px;
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    user-select: none;
    display: block;
    height: calc(100% - 4px) ;
    width:  calc(100% - 4px) ;
    background: #18a05818;
    top: 0;
    left: 0;
    opacity: 1;
    border: 2px solid transparent;
    transition: all 0.2s ease-in-out;
    -webkit-mask: radial-gradient(
      var(--mask-radius) var(--mask-radius) at 45px 45px,
      #000 1%,
      transparent 50%
    );
    mask: radial-gradient(
      var(--mask-radius) var(--mask-radius) at 45px 45px,
      #000 1%,
      transparent 50%
    );
    will-change: mask;
  }
  &:hover {
    &::after {
      --mask-radius: 50em;
      border: 2px solid #18a058;
    }
  }
 }
 </style>
--- a/src/composable/computedRefreshable.ts
+++ b/src/composable/computedRefreshable.ts
@@ -1,47 +0,0 @@
 import { computedAsync, watchThrottled } from '@vueuse/core';
 import { computed, ref, watch } from 'vue';
 export { computedRefreshable, computedRefreshableAsync };
 function computedRefreshable<T>(getter: () => T, { throttle }: { throttle?: number } = {}) {
  const dirty = ref(true);
  let value: T;
  const update = () => (dirty.value = true);
  if (throttle) {
    watchThrottled(getter, update, { throttle });
  }
  else {
    watch(getter, update);
  }
  const computedValue = computed(() => {
    if (dirty.value) {
      value = getter();
      dirty.value = false;
    }
    return value;
  });
  return [computedValue, update] as const;
 }
 function computedRefreshableAsync<T>(getter: () => Promise<T>, defaultValue?: T) {
  const dirty = ref(true);
  let value: T;
  const update = () => (dirty.value = true);
  watch(getter, update);
  const computedValue = computedAsync(async () => {
    if (dirty.value) {
      value = await getter();
      dirty.value = false;
    }
    return value;
  }, defaultValue);
  return [computedValue, update] as const;
 }
--- a/src/composable/copy.ts
+++ b/src/composable/copy.ts
@@ -1,30 +1,15 @@
 // eslint-disable-next-line no-restricted-imports
 import { useClipboard } from '@vueuse/core';
 import { useMessage } from 'naive-ui';
-import type { MaybeRefOrGetter } from 'vue';
+import type { Ref } from 'vue';
 export function useCopy({ source, text = 'Copied to the clipboard', createToast = true }: { source?: MaybeRefOrGetter<string>; text?: string; createToast?: boolean } = {}) {
  const { copy, copied, ...rest } = useClipboard({
    source,
    legacy: true,
  });
 export function useCopy({ source, text = 'Copied to the clipboard' }: { source: Ref; text?: string }) {
  const { copy } = useClipboard({ source });
  const message = useMessage();
  return {
-    ...rest,
+    async copy() {
-    isJustCopied: copied,
+      await copy();
-    async copy(content?: string, { notificationMessage }: { notificationMessage?: string } = {}) {
+      message.success(text);
      if (source) {
        await copy();
      }
      else {
        await copy(content);
      }
      if (createToast) {
        message.success(notificationMessage ?? text);
      }
    },
  };
 }
--- a/src/composable/downloadBase64.ts
+++ b/src/composable/downloadBase64.ts
@@ -5,8 +5,8 @@ function getFileExtensionFromBase64({
  base64String,
  defaultExtension = 'txt',
 }: {
-  base64String: string
+  base64String: string;
-  defaultExtension?: string
+  defaultExtension?: string;
 }) {
  const hasMimeType = base64String.match(/data:(.*?);base64/i);
--- a/src/composable/fuzzySearch.ts
+++ b/src/composable/fuzzySearch.ts
@@ -1,30 +0,0 @@
 import { type MaybeRef, get } from '@vueuse/core';
 import Fuse from 'fuse.js';
 import { computed } from 'vue';
 export { useFuzzySearch };
 function useFuzzySearch<Data>({
  search,
  data,
  options = {},
 }: {
  search: MaybeRef<string>
  data: Data[]
  options?: Fuse.IFuseOptions<Data> & { filterEmpty?: boolean }
 }) {
  const fuse = new Fuse(data, options);
  const filterEmpty = options.filterEmpty ?? true;
  const searchResult = computed<Data[]>(() => {
    const query = get(search);
    if (!filterEmpty && query === '') {
      return data;
    }
    return fuse.search(query).map(({ item }) => item);
  });
  return { searchResult };
 }
--- a/src/composable/queryParams.ts
+++ b/src/composable/queryParams.ts
@@ -1,35 +0,0 @@
 import { useRouteQuery } from '@vueuse/router';
 import { computed } from 'vue';
 export { useQueryParam };
 const transformers = {
  number: {
    fromQuery: (value: string) => Number(value),
    toQuery: (value: number) => String(value),
  },
  string: {
    fromQuery: (value: string) => value,
    toQuery: (value: string) => value,
  },
  boolean: {
    fromQuery: (value: string) => value.toLowerCase() === 'true',
    toQuery: (value: boolean) => (value ? 'true' : 'false'),
  },
 };
 function useQueryParam<T>({ name, defaultValue }: { name: string; defaultValue: T }) {
  const type = typeof defaultValue;
  const transformer = transformers[type as keyof typeof transformers] ?? transformers.string;
  const proxy = useRouteQuery(name, transformer.toQuery(defaultValue as never));
  return computed<T>({
    get() {
      return transformer.fromQuery(proxy.value) as unknown as T;
    },
    set(value) {
      proxy.value = transformer.toQuery(value as never);
    },
  });
 }
--- a/src/composable/validation.test.ts
+++ b/src/composable/validation.test.ts
@@ -1,3 +1,4 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
 import { describe, expect, it } from 'vitest';
 import { isFalsyOrHasThrown } from './validation';
@@ -10,7 +11,7 @@ describe('useValidation', () => {
      expect(isFalsyOrHasThrown(() => {})).toBe(true);
      expect(
        isFalsyOrHasThrown(() => {
-          throw new Error('message');
+          throw new Error();
        }),
      ).toBe(true);
    });
--- a/src/composable/validation.ts
+++ b/src/composable/validation.ts
@@ -1,48 +1,36 @@
 import { type MaybeRef, get } from '@vueuse/core';
 import _ from 'lodash';
-import { type Ref, reactive, watch } from 'vue';
+import { reactive, watch, type Ref } from 'vue';
 type ValidatorReturnType = unknown;
-export interface UseValidationRule<T> {
+interface UseValidationRule<T> {
-  validator: (value: T) => ValidatorReturnType
+  validator: (value: T) => ValidatorReturnType;
-  message: string
+  message: string;
 }
 export function isFalsyOrHasThrown(cb: () => ValidatorReturnType): boolean {
  try {
    const returnValue = cb();
-    if (_.isNil(returnValue)) {
+    if (_.isNil(returnValue)) return true;
      return true;
    }
    return returnValue === false;
-  }
+  } catch (_) {
  catch (_) {
    return true;
  }
 }
-export interface ValidationAttrs {
+type ValidationAttrs = {
-  feedback: string
+  feedback: string;
-  validationStatus: string | undefined
+  validationStatus: string | undefined;
-}
+};
-export function useValidation<T>({
+export function useValidation<T>({ source, rules }: { source: Ref<T>; rules: UseValidationRule<T>[] }) {
  source,
  rules,
  watch: watchRefs = [],
 }: {
  source: Ref<T>
  rules: MaybeRef<UseValidationRule<T>[]>
  watch?: Ref<unknown>[]
 }) {
  const state = reactive<{
-    message: string
+    message: string;
-    status: undefined | 'error'
+    status: undefined | 'error';
-    isValid: boolean
+    isValid: boolean;
-    attrs: ValidationAttrs
+    attrs: ValidationAttrs;
  }>({
    message: '',
    status: undefined,
@@ -54,12 +42,12 @@ export function useValidation<T>({
  });
  watch(
-    [source, ...watchRefs],
+    [source],
    () => {
      state.message = '';
      state.status = undefined;
-      for (const rule of get(rules)) {
+      for (const rule of rules) {
        if (isFalsyOrHasThrown(() => rule.validator(source.value))) {
          state.message = rule.message;
          state.status = 'error';
--- a/src/config.ts
+++ b/src/config.ts
@@ -23,18 +23,12 @@ export const config = figue({
    env: {
      doc: 'Application current env',
      format: 'enum',
-      values: ['production', 'development', 'preview', 'test'],
+      values: ['production', 'development', 'test'],
      default: 'development',
-      env: 'VITE_VERCEL_ENV',
+      env: 'MODE',
    },
  },
  plausible: {
    isTrackerEnabled: {
      doc: 'Is the tracker enabled',
      format: 'boolean',
      default: false,
      env: 'VITE_TRACKER_ENABLED',
    },
    domain: {
      doc: 'Plausible current domain',
      format: 'string',
@@ -53,11 +47,13 @@ export const config = figue({
      default: false,
    },
  },
-  showBanner: {
+  tools: {
-    doc: 'Show the banner',
+    newTools: {
-    format: 'boolean',
+      doc: 'Tool names for tools flagged a as new',
-    default: false,
+      format: 'array',
-    env: 'VITE_SHOW_BANNER',
+      default: [],
      env: 'VITE_NEW_TOOLS',
    },
  },
 })
  .loadEnv({
--- a/src/layouts/base.layout.vue
+++ b/src/layouts/base.layout.vue
@@ -1,139 +1,161 @@
 <script lang="ts" setup>
-import { NIcon, useThemeVars } from 'naive-ui';
+import { NIcon, useThemeVars, type MenuGroupOption } from 'naive-ui';
-
+import { h } from 'vue';
-import { RouterLink } from 'vue-router';
+import { RouterLink, useRoute } from 'vue-router';
-import { Heart, Home2, Menu2 } from '@vicons/tabler';
+import { Heart, Menu2, Home2 } from '@vicons/tabler';
 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';
+import MenuIconItem from '@/components/MenuIconItem.vue';
-import { useToolStore } from '@/tools/tools.store';
+import type { ITool } from '@/tools/tool';
-import { useTracker } from '@/modules/tracker/tracker.services';
+import SearchBar from '../components/SearchBar.vue';
-import CollapsibleToolMenu from '@/components/CollapsibleToolMenu.vue';
+import HeroGradient from '../assets/hero-gradient.svg?component';
 import MenuLayout from '../components/MenuLayout.vue';
 import NavbarButtons from '../components/NavbarButtons.vue';
 const themeVars = useThemeVars();
 const route = useRoute();
 const styleStore = useStyleStore();
 const version = config.app.version;
 const commitSha = config.app.lastCommitSha.slice(0, 7);
-const { tracker } = useTracker();
+const makeLabel = (tool: ITool) => () => h(RouterLink, { to: tool.path }, { default: () => tool.name });
 const makeIcon = (tool: ITool) => () => h(MenuIconItem, { tool });
-const toolStore = useToolStore();
+const menuOptions: MenuGroupOption[] = toolsByCategory.map((category) => ({
-
+  label: category.name,
-const tools = computed<ToolCategory[]>(() => [
+  key: category.name,
-  ...(toolStore.favoriteTools.length > 0 ? [{ name: 'Your favorite tools', components: toolStore.favoriteTools }] : []),
+  type: 'group',
-  ...toolsByCategory,
+  children: category.components.map((tool) => ({
-]);
+    label: makeLabel(tool),
    icon: makeIcon(tool),
    key: tool.name,
  })),
 }));
 </script>
 <template>
-  <MenuLayout class="menu-layout" :class="{ isSmallScreen: styleStore.isSmallScreen }">
+  <menu-layout class="menu-layout" :class="{ isSmallScreen: styleStore.isSmallScreen }">
    <template #sider>
-      <RouterLink to="/" class="hero-wrapper">
+      <router-link to="/" class="hero-wrapper">
-        <HeroGradient class="gradient" />
+        <hero-gradient class="gradient" />
        <div class="text-wrapper">
-          <div class="title">
+          <div class="title">IT - TOOLS</div>
            IT - TOOLS
          </div>
          <div class="divider" />
-          <div class="subtitle">
+          <div class="subtitle">Handy tools for developers</div>
            Handy tools for developers
          </div>
        </div>
-      </RouterLink>
+      </router-link>
      <div class="sider-content">
-        <div v-if="styleStore.isSmallScreen" flex justify-center>
+        <n-space v-if="styleStore.isSmallScreen" justify="center">
-          <NavbarButtons />
+          <navbar-buttons />
-        </div>
+        </n-space>
-        <CollapsibleToolMenu :tools-by-category="tools" />
+        <n-menu
          class="menu"
          :value="(route.name as string)"
          :collapsed-width="64"
          :collapsed-icon-size="22"
          :options="menuOptions"
          :indent="20"
        />
        <div class="footer">
          <div>
            IT-Tools
-            <c-link target="_blank" rel="noopener" :href="`https://github.com/CorentinTh/it-tools/tree/v${version}`">
+            <n-button
              text
              tag="a"
              target="_blank"
              rel="noopener"
              type="primary"
              depth="3"
              :href="`https://github.com/CorentinTh/it-tools/tree/v${version}`"
            >
              v{{ version }}
-            </c-link>
+            </n-button>
            <template v-if="commitSha && commitSha.length > 0">
              -
-              <c-link
+              <n-button
                text
                tag="a"
                target="_blank"
                rel="noopener"
                type="primary"
                depth="3"
                :href="`https://github.com/CorentinTh/it-tools/tree/${commitSha}`"
              >
                {{ commitSha }}
-              </c-link>
+              </n-button>
            </template>
          </div>
          <div>
            © {{ new Date().getFullYear() }}
-            <c-link target="_blank" rel="noopener" href="https://github.com/CorentinTh">
+            <n-button text tag="a" target="_blank" rel="noopener" type="primary" href="https://github.com/CorentinTh">
              Corentin Thomasset
-            </c-link>
+            </n-button>
          </div>
        </div>
      </div>
    </template>
    <template #content>
-      <div flex items-center justify-center gap-2>
+      <div class="navigation">
-        <c-button
+        <n-button
          :size="styleStore.isSmallScreen ? 'medium' : 'large'"
          circle
-          variant="text"
+          quaternary
          aria-label="Toggle menu"
          @click="styleStore.isMenuCollapsed = !styleStore.isMenuCollapsed"
        >
-          <NIcon size="25" :component="Menu2" />
+          <n-icon size="25" :component="Menu2" />
-        </c-button>
+        </n-button>
        <router-link to="/" #="{ navigate, href }" custom>
          <n-tooltip trigger="hover">
            <template #trigger>
              <n-button
                tag="a"
                :href="href"
                :size="styleStore.isSmallScreen ? 'medium' : 'large'"
                circle
                quaternary
                aria-label="Home"
                @click="navigate"
              >
                <n-icon size="25" :component="Home2" />
              </n-button>
            </template>
            Home
          </n-tooltip>
        </router-link>
        <search-bar />
        <navbar-buttons v-if="!styleStore.isSmallScreen" />
        <n-tooltip trigger="hover">
          <template #trigger>
-            <c-button to="/" circle variant="text" aria-label="Home">
+            <n-button
              <NIcon size="25" :component="Home2" />
            </c-button>
          </template>
          Home
        </n-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 />
        <div>
          <NavbarButtons v-if="!styleStore.isSmallScreen" />
        </div>
        <n-tooltip trigger="hover">
          <template #trigger>
            <c-button
              round
-              href="https://www.buymeacoffee.com/cthmsst"
+              type="primary"
              tag="a"
              href="https://github.com/sponsors/CorentinTh"
              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 />
+              <n-icon v-if="!styleStore.isSmallScreen" :component="Heart" style="margin-left: 5px" />
-            </c-button>
+            </n-button>
          </template>
          ❤ Support IT Tools development !
        </n-tooltip>
      </div>
      <slot />
    </template>
-  </MenuLayout>
+  </menu-layout>
 </template>
 <style lang="less" scoped>
@@ -148,19 +170,6 @@ const tools = computed<ToolCategory[]>(() => [
 //     background-size: @size @size;
 // }
 .support-button {
  background: rgb(37, 99, 108);
  background: linear-gradient(48deg, rgba(37, 99, 108, 1) 0%, rgba(59, 149, 111, 1) 60%, rgba(20, 160, 88, 1) 100%);
  color: #fff !important;
  transition: padding ease 0.2s !important;
  &:hover {
    color: #fff;
    padding-left: 30px;
    padding-right: 30px;
  }
 }
 .footer {
  text-align: center;
  color: #838587;
@@ -211,4 +220,25 @@ const tools = computed<ToolCategory[]>(() => [
    }
  }
 }
 // ::v-deep(.n-menu-item-content-header) {
 //   overflow: visible !important;
 //   // overflow-x: hidden !important;
 // }
 .navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  & > *:not(:last-child) {
    margin-right: 5px;
  }
  .search-bar {
    // width: 100%;
    flex-grow: 1;
  }
 }
 </style>
--- a/src/layouts/tool.layout.vue
+++ b/src/layouts/tool.layout.vue
@@ -2,52 +2,51 @@
 import { useRoute } from 'vue-router';
 import { useHead } from '@vueuse/head';
 import type { HeadObject } from '@vueuse/head';
-
+import { computed } from 'vue';
 import { useThemeVars } from 'naive-ui';
 import BaseLayout from './base.layout.vue';
 import FavoriteButton from '@/components/FavoriteButton.vue';
 import type { Tool } from '@/tools/tools.types';
 const route = useRoute();
 const theme = useThemeVars();
 const head = computed<HeadObject>(() => ({
  title: `${route.meta.name} - IT Tools`,
  meta: [
    {
      name: 'description',
-      content: route.meta?.description as string,
+      content: route.meta.description,
    },
    {
      name: 'keywords',
-      content: ((route.meta.keywords ?? []) as string[]).join(','),
+      content: route.meta.keywords,
    },
  ],
 }));
 useHead(head);
 const { t } = useI18n();
 const i18nKey = computed<string>(() => route.path.trim().replace('/', ''));
 const toolTitle = computed<string>(() => t(`tools.${i18nKey.value}.title`, String(route.meta.name)));
 const toolDescription = computed<string>(() => t(`tools.${i18nKey.value}.description`, String(route.meta.description)));
 </script>
 <template>
-  <BaseLayout>
+  <base-layout>
    <div class="tool-layout">
      <div class="tool-header">
-        <div flex flex-nowrap items-center justify-between>
+        <n-h1>
-          <n-h1>
+          {{ route.meta.name }}
            {{ toolTitle }}
          </n-h1>
-          <div>
+          <n-tag
-            <FavoriteButton :tool="{ name: route.meta.name } as Tool" />
+            v-if="route.meta.isNew"
-          </div>
+            round
-        </div>
+            type="success"
            :bordered="false"
            :color="{ color: theme.primaryColor, textColor: theme.tagColor }"
          >
            New tool
          </n-tag>
          <!-- <span class="new-tool-badge">New !</span> -->
        </n-h1>
        <div class="separator" />
        <div class="description">
-          {{ toolDescription }}
+          {{ route.meta.description }}
        </div>
      </div>
    </div>
@@ -55,7 +54,7 @@ const toolDescription = computed<string>(() => t(`tools.${i18nKey.value}.descrip
    <div class="tool-content">
      <slot />
    </div>
-  </BaseLayout>
+  </base-layout>
 </template>
 <style lang="less" scoped>
@@ -93,7 +92,6 @@ const toolDescription = computed<string>(() => t(`tools.${i18nKey.value}.descrip
      width: 200px;
      height: 2px;
      background: rgb(161, 161, 161);
      opacity: 0.2;
      margin: 10px 0;
    }
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,25 +1,21 @@
 import { createApp } from 'vue';
 import { createPinia } from 'pinia';
 import { createHead } from '@vueuse/head';
-
+// eslint-disable-next-line import/no-unresolved
 import { registerSW } from 'virtual:pwa-register';
 import { plausible } from './plugins/plausible.plugin';
-import 'virtual:uno.css';
+registerSW();
 import { naive } from './plugins/naive.plugin';
 import App from './App.vue';
 import router from './router';
 import { i18nPlugin } from './plugins/i18n.plugin';
 registerSW();
 const app = createApp(App);
 app.use(createPinia());
 app.use(createHead());
 app.use(i18nPlugin);
 app.use(router);
 app.use(naive);
 app.use(plausible);
--- a/src/modules/command-palette/command-palette.store.ts
+++ b/src/modules/command-palette/command-palette.store.ts
@@ -1,82 +0,0 @@
 import { defineStore } from 'pinia';
 import _ from 'lodash';
 import type { PaletteOption } from './command-palette.types';
 import { useToolStore } from '@/tools/tools.store';
 import { useFuzzySearch } from '@/composable/fuzzySearch';
 import { useStyleStore } from '@/stores/style.store';
 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';
 export const useCommandPaletteStore = defineStore('command-palette', () => {
  const toolStore = useToolStore();
  const styleStore = useStyleStore();
  const router = useRouter();
  const searchPrompt = ref('');
  const toolsOptions = toolStore.tools.map(tool => ({
    ...tool,
    to: tool.path,
    toolCategory: tool.category,
    category: 'Tools',
  }));
  const searchOptions: PaletteOption[] = [
    ...toolsOptions,
    {
      name: 'Random tool',
      description: 'Get a random tool from the list.',
      action: () => {
        const { path } = _.sample(toolStore.tools)!;
        router.push(path);
      },
      icon: DiceIcon,
      category: 'Tools',
      keywords: ['random', 'tool', 'pick', 'choose', 'select'],
      closeOnSelect: true,
    },
    {
      name: 'Toggle dark mode',
      description: 'Toggle dark mode on or off.',
      action: () => styleStore.toggleDark(),
      icon: SunIcon,
      category: 'Actions',
      keywords: ['dark', 'theme', 'toggle', 'mode', 'light', 'system'],
    },
    {
      name: 'Github repository',
      href: 'https://github.com/CorentinTh/it-tools',
      category: 'External',
      description: 'View the source code of it-tools on Github.',
      keywords: ['github', 'repo', 'repository', 'source', 'code'],
      icon: GithubIcon,
    },
    {
      name: 'Report a bug or an issue',
      description: 'Report a bug or an issue to help improve it-tools.',
      href: 'https://github.com/CorentinTh/it-tools/issues/new/choose',
      category: 'Actions',
      keywords: ['report', 'issue', 'bug', 'problem', 'error'],
      icon: BugIcon,
    },
  ];
  const { searchResult } = useFuzzySearch({
    search: searchPrompt,
    data: searchOptions,
    options: {
      keys: [{ name: 'name', weight: 2 }, 'description', 'keywords', 'category'],
      threshold: 0.3,
    },
  });
  const filteredSearchResult = computed(() =>
    _.chain(searchResult.value).groupBy('category').mapValues(categoryOptions => _.take(categoryOptions, 5)).value());
  return {
    filteredSearchResult,
    searchPrompt,
  };
 });
--- a/src/modules/command-palette/command-palette.types.ts
+++ b/src/modules/command-palette/command-palette.types.ts
@@ -1,14 +0,0 @@
 import type { Component } from 'vue';
 import type { RouteLocationRaw } from 'vue-router';
 export interface PaletteOption {
  name: string
  description?: string
  icon?: Component
  action?: () => void
  to?: RouteLocationRaw
  category: string
  keywords?: string[]
  href?: string
  closeOnSelect?: boolean
 }
--- a/src/modules/command-palette/command-palette.vue
+++ b/src/modules/command-palette/command-palette.vue
@@ -1,153 +0,0 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia';
 import _ from 'lodash';
 import { useCommandPaletteStore } from './command-palette.store';
 import type { PaletteOption } from './command-palette.types';
 const isModalOpen = ref(false);
 const inputRef = ref();
 const router = useRouter();
 const isMac = computed(() => window.navigator.userAgent.toLowerCase().includes('mac'));
 const commandPaletteStore = useCommandPaletteStore();
 const { searchPrompt, filteredSearchResult } = storeToRefs(commandPaletteStore);
 const keys = useMagicKeys({
  passive: false,
  onEventFired(e) {
    if (e.ctrlKey && e.key === 'k' && e.type === 'keydown') {
      e.preventDefault();
    }
    if (e.metaKey && e.key === 'k' && e.type === 'keydown') {
      e.preventDefault();
    }
  },
 });
 whenever(isModalOpen, () => inputRef.value?.focus());
 whenever(keys.ctrl_k, open);
 whenever(keys.meta_k, open);
 whenever(keys.escape, close);
 function open() {
  return isModalOpen.value = true;
 }
 function close() {
  isModalOpen.value = false;
 }
 const selectedOptionIndex = ref(0);
 function handleKeydown(event: KeyboardEvent) {
  const { key } = event;
  const isEnterPressed = key === 'Enter';
  const isArrowUpOrDown = ['ArrowUp', 'ArrowDown'].includes(key);
  const isArrowDown = key === 'ArrowDown';
  if (isArrowUpOrDown) {
    const increment = isArrowDown ? 1 : -1;
    const maxIndex = Math.max(_.chain(filteredSearchResult.value).values().flatten().size().value() - 1, 0);
    selectedOptionIndex.value = Math.min(Math.max(selectedOptionIndex.value + increment, 0), maxIndex);
    return;
  }
  if (isEnterPressed) {
    const option = _.chain(filteredSearchResult.value)
      .values()
      .flatten()
      .nth(selectedOptionIndex.value)
      .value();
    activateOption(option);
  }
 }
 function getOptionIndex(option: PaletteOption) {
  return _.chain(filteredSearchResult.value)
    .values()
    .flatten()
    .findIndex(o => o === option)
    .value();
 }
 function activateOption(option: PaletteOption) {
  const { closeOnSelect } = option;
  if (option.action) {
    option.action();
    if (closeOnSelect) {
      close();
    }
    return;
  }
  const closeAfterNavigation = closeOnSelect || _.isUndefined(closeOnSelect);
  if (option.to) {
    router.push(option.to);
    if (closeAfterNavigation) {
      close();
    }
    return;
  }
  if (option.href) {
    window.open(option.href, '_blank');
    if (closeAfterNavigation) {
      close();
    }
  }
 }
 </script>
 <template>
  <div flex-1>
    <c-button w-full important:justify-start @click="isModalOpen = true">
      <span flex items-center gap-3 op-40>
        <icon-mdi-search />
        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
        </span>
      </span>
    </c-button>
    <c-modal v-model:open="isModalOpen" class="palette-modal" shadow-xl important:max-w-650px important:pa-12px @keydown="handleKeydown">
      <c-input-text ref="inputRef" v-model:value="searchPrompt" raw-text placeholder="Type to search a tool or a command..." autofocus clearable />
      <div v-for="(options, category) in filteredSearchResult" :key="category">
        <div ml-3 mt-3 text-sm font-bold text-primary op-60>
          {{ category }}
        </div>
        <command-palette-option v-for="option in options" :key="option.name" :option="option" :selected="selectedOptionIndex === getOptionIndex(option)" @activated="activateOption" />
      </div>
    </c-modal>
  </div>
 </template>
 <style scoped lang="less">
 .c-input-text {
  font-size: 18px;
  ::v-deep(.input-wrapper) {
      padding: 4px;
      padding-left: 18px;
  }
 }
 .c-modal--overlay {
  align-items: flex-start !important;
  padding-top: 80px;
 }
 </style>
--- a/src/modules/command-palette/components/command-palette-option.vue
+++ b/src/modules/command-palette/components/command-palette-option.vue
@@ -1,36 +0,0 @@
 <script setup lang="ts">
 import type { PaletteOption } from '../command-palette.types';
 const props = withDefaults(defineProps<{ option: PaletteOption; selected?: boolean }>(), {
  selected: false,
 });
 const emit = defineEmits(['activated']);
 const { option } = toRefs(props);
 const { selected } = toRefs(props);
 </script>
 <template>
  <div
    role="option"
    :aria-selected="selected"
    :class="{
      'text-white': selected,
      'bg-primary': selected,
    }"
    w-full flex cursor-pointer items-center overflow-hidden rounded pa-3 transition hover:bg-primary hover:text-white
    @click="() => emit('activated', option)"
  >
    <component :is="option.icon" v-if="option.icon" mr-3 h-30px w-30px shrink-0 op-50 />
    <div flex-1 overflow-hidden>
      <div truncate font-bold lh-tight op-90>
        {{ option.name }}
      </div>
      <div v-if="option.description" truncate lh-tight op-60>
        {{ option.description }}
      </div>
    </div>
  </div>
 </template>
--- a/src/modules/shared/date.models.ts
+++ b/src/modules/shared/date.models.ts
@@ -1,7 +0,0 @@
 import { format } from 'date-fns';
 export { getUrlFriendlyDateTime };
 function getUrlFriendlyDateTime({ date = new Date() }: { date?: Date } = {}) {
  return format(date, 'yyyy-MM-dd-HH-mm-ss');
 }
--- a/src/modules/shared/number.models.ts
+++ b/src/modules/shared/number.models.ts
@@ -1,5 +0,0 @@
 function clamp({ value, min = 0, max = 100 }: { value: number; min?: number; max?: number }) {
  return Math.min(Math.max(value, min), max);
 }
 export { clamp };
--- a/src/modules/tracker/tracker.services.ts
+++ b/src/modules/tracker/tracker.services.ts
@@ -1,27 +0,0 @@
 import _ from 'lodash';
 import type Plausible from 'plausible-tracker';
 import { inject } from 'vue';
 export { createTrackerService, useTracker };
 function createTrackerService({ plausible }: { plausible: ReturnType<typeof Plausible> }) {
  return {
    trackEvent({ eventName }: { eventName: string }) {
      plausible.trackEvent(eventName);
    },
  };
 }
 function useTracker() {
  const plausible: ReturnType<typeof Plausible> | undefined = inject('plausible');
  if (_.isNil(plausible)) {
    throw new TypeError('Plausible must be instantiated');
  }
  const tracker = createTrackerService({ plausible });
  return {
    tracker,
  };
 }
--- a/src/modules/tracker/tracker.types.ts
+++ b/src/modules/tracker/tracker.types.ts
@@ -1,3 +0,0 @@
 import type { createTrackerService } from './tracker.services';
 export type TrackerService = ReturnType<typeof createTrackerService>;
--- a/src/pages/404.page.vue
+++ b/src/pages/404.page.vue
@@ -5,23 +5,19 @@ useHead({ title: 'Page not found - IT Tools' });
 </script>
 <template>
-  <div mt-20 flex flex-col items-center>
+  <div class="e404-wrapper">
-    <span text-90px lh-1 op-50>
+    <n-result status="404" title="404 Not Found" description="Sorry, this page does not seem to exist">
-      <icon-mdi:kettle-steam-outline />
+      <template #footer>
-    </span>
+        <router-link to="/" #="{ navigate, href }" custom>
-
+          <n-button tag="a" :href="href" secondary type="success" @click="navigate"> Back home </n-button>
-    <h1 m-0 mt-3>
+        </router-link>
-      404 Not Found
+      </template>
-    </h1>
+    </n-result>
    <div mt-4 op-60>
      Sorry, this page does not seem to exist
    </div>
    <div mb-8 op-60>
      Maybe the cache is doing tricky things, try force-refreshing?
    </div>
    <c-button to="/">
      Back home
    </c-button>
  </div>
 </template>
 <style scoped>
 .e404-wrapper {
  padding-top: 150px;
 }
 </style>
--- a/src/pages/About.vue
+++ b/src/pages/About.vue
@@ -1,9 +1,7 @@
 <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>
@@ -11,59 +9,73 @@ const { tracker } = useTracker();
    <n-h1>About</n-h1>
    <n-p>
      This wonderful website, made with ❤ by
-      <c-link href="https://github.com/CorentinTh" target="_blank" rel="noopener">
+      <n-button text tag="a" href="https://github.com/CorentinTh" target="_blank" rel="noopener" type="primary">
-        Corentin Thomasset
+        Corentin Thomasset </n-button
-      </c-link>,
+      >, aggregates useful tools for developer and people working in IT. If you find it useful, please fell free to
-      aggregates useful tools for developer and people working in IT. If you find it useful, please feel free to share
+      share it to people you think may find it useful too and don't forget to pin it in your shortcut bar !
      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
+      IT Tools is open-source (under the MIT license) and free, and will always be, but it cost 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
+      renew the domain name, if you want to support my work, and encourage me to add more tools, please consider
      supporting by
-      <c-link
+      <n-button
-        href="https://www.buymeacoffee.com/cthmsst"
+        type="primary"
        tag="a"
        text
        href="https://github.com/sponsors/CorentinTh"
        rel="noopener"
        target="_blank"
        @click="() => tracker.trackEvent({ eventName: 'Support button clicked' })"
      >
-        sponsoring me
+        sponsoring me </n-button
-      </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
+      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
+      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">
+      <n-button
        type="primary"
        tag="a"
        text
        href="https://github.com/CorentinTh/it-tools/blob/master/package.json"
        rel="noopener"
        target="_blank"
      >
        package.json
-      </c-link>
+      </n-button>
      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
+      If you need a tool that is currently not present here, and you think can be relevant, you are welcome to submit a
      feature request in the
-      <c-link
+      <n-button
-        href="https://github.com/CorentinTh/it-tools/issues/new/choose"
+        type="primary"
        tag="a"
        text
        href="https://github.com/CorentinTh/it-tools/issues/new?assignees=CorentinTh&labels=enhancement&template=feature_request.md&title=%5BFEAT%5D%20My%20feature"
        rel="noopener"
        target="_blank"
      >
        issues section
-      </c-link>
+      </n-button>
-      in the GitHub repository.
+      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
+      And if you found a bug, or something broken that doesn't work as expected, please fill a bug report in the
-      <c-link
+      <n-button
-        href="https://github.com/CorentinTh/it-tools/issues/new/choose"
+        type="primary"
        tag="a"
        text
        href="https://github.com/CorentinTh/it-tools/issues/new?assignees=CorentinTh&labels=bug&template=bug_report.md&title=%5BBUG%5D%20My%20bug"
        rel="noopener"
        target="_blank"
      >
        issues section
-      </c-link>
+      </n-button>
-      in the GitHub repository.
+      in the github repository.
    </n-p>
  </div>
 </template>
--- a/src/pages/Home.page.vue
+++ b/src/pages/Home.page.vue
@@ -1,39 +1,46 @@
 <script setup lang="ts">
 import { toolsWithCategory } from '@/tools';
 import { Heart } from '@vicons/tabler';
 import { useHead } from '@vueuse/head';
-import { useToolStore } from '@/tools/tools.store';
+import ColoredCard from '../components/ColoredCard.vue';
-
+import ToolCard from '../components/ToolCard.vue';
 const toolStore = useToolStore();
 useHead({ title: 'IT Tools - Handy online tools for developers' });
 </script>
 <template>
-  <div class="home-page" m-auto mt-50px max-w-1800px>
+  <div class="home-page">
-    <div my-8 />
+    <n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
-
+      <n-gi>
-    <div v-if="toolStore.favoriteTools.length > 0">
+        <colored-card title="You like it-tools?" :icon="Heart">
-      <div mb-2 mt-6 text-lg font-semibold>
+          Give us a star on
-        {{ $t('home.categories.yourFavoriteTools') }}
+          <a
-      </div>
+            href="https://github.com/CorentinTh/it-tools"
-      <div grid-cols="1 sm:2 md:2 lg:3 xl:4" grid gap-12px>
+            rel="noopener"
-        <tool-card v-for="tool in toolStore.favoriteTools" :key="tool.name" :tool="tool" />
+            target="_blank"
-      </div>
+            aria-label="IT-Tools' github repository"
-    </div>
+            >github</a
-
+          >
-    <div v-if="toolStore.newTools.length > 0">
+          or follow us on
-      <div mb-2 mt-6 text-lg font-semibold>
+          <a
-        {{ $t('home.categories.newestTools') }}
+            href="https://twitter.com/ittoolsdottech"
-      </div>
+            rel="noopener"
-      <div grid-cols="1 sm:2 md:2 lg:3 xl:4" grid gap-12px>
+            target="_blank"
-        <tool-card v-for="tool in toolStore.newTools" :key="tool.name" :tool="tool" />
+            aria-label="IT-Tools' twitter account"
-      </div>
+            >twitter</a
-    </div>
+          >! Thank you
-
+          <n-icon :component="Heart" />
-    <div mb-2 mt-6 text-lg font-semibold>
+        </colored-card>
-      {{ $t('home.categories.allTheTools') }}
+      </n-gi>
-    </div>
+      <n-gi v-for="tool in toolsWithCategory" :key="tool.name">
-    <div grid-cols="1 sm:2 md:2 lg:3 xl:4" grid gap-12px>
+        <tool-card :tool="tool" />
-      <tool-card v-for="tool in toolStore.tools" :key="tool.name" :tool="tool" />
+      </n-gi>
-    </div>
+    </n-grid>
  </div>
 </template>
 <style scoped lang="less">
 .home-page {
  padding-top: 50px;
 }
 </style>
--- a/src/plugins/i18n.plugin.ts
+++ b/src/plugins/i18n.plugin.ts
@@ -1,31 +0,0 @@
 import type { Plugin } from 'vue';
 import { createI18n } from 'vue-i18n';
 import baseMessages from '@intlify/unplugin-vue-i18n/messages';
 import _ from 'lodash';
 import { parse as parseYaml } from 'yaml';
 const i18nFiles = import.meta.glob('../tools/*/locales/**.yml', { as: 'raw' });
 const messagesByTools = await Promise.all(_.map(i18nFiles, async (fileDescriptor, path) => {
  const [, locale] = path.match(/\.\/tools\/.*?\/locales\/(.*)\.ya?ml$/i) ?? [];
  const content = parseYaml(await fileDescriptor());
  return { [locale]: content };
 }));
 const messages = _.merge(
  baseMessages,
  _.merge({}, ...messagesByTools),
 );
 const i18n = createI18n({
  legacy: false,
  locale: 'en',
  messages,
 });
 export const i18nPlugin: Plugin = {
  install: (app) => {
    app.use(i18n);
  },
 };
--- a/src/plugins/naive.plugin.ts
+++ b/src/plugins/naive.plugin.ts
@@ -1,3 +1,116 @@
-import { create } from 'naive-ui';
+import {
  create,
  NAlert,
  NAutoComplete,
  NButton,
  NCard,
  NCode,
  NCollapse,
  NCollapseItem,
  NCollapseTransition,
  NColorPicker,
  NConfigProvider,
  NDatePicker,
  NDivider,
  NDropdown,
  NDynamicInput,
  NEllipsis,
  NEmpty,
  NForm,
  NFormItem,
  NGradientText,
  NGrid,
  NGridItem,
  NH1,
  NH2,
  NH3,
  NIcon,
  NImage,
  NInput,
  NInputGroup,
  NInputGroupLabel,
  NInputNumber,
  NLayout,
  NLayoutSider,
  NMenu,
  NMessageProvider,
  NModal,
  NP,
  NPageHeader,
  NPopconfirm,
  NProgress,
  NResult,
  NScrollbar,
  NSelect,
  NSlider,
  NSpace,
  NStatistic,
  NSwitch,
  NTable,
  NTag,
  NText,
  NTimePicker,
  NTooltip,
  NUpload,
  NUploadDragger,
  NPopover,
 } from 'naive-ui';
-export const naive = create();
+const components = [
  NDynamicInput,
  NDatePicker,
  NCode,
  NGradientText,
  NScrollbar,
  NImage,
  NUploadDragger,
  NTable,
  NStatistic,
  NDivider,
  NInputGroup,
  NInputGroupLabel,
  NTag,
  NResult,
  NEllipsis,
  NPageHeader,
  NMessageProvider,
  NLayout,
  NLayoutSider,
  NMenu,
  NDropdown,
  NH2,
  NH3,
  NP,
  NAlert,
  NTooltip,
  NModal,
  NEmpty,
  NUpload,
  NSelect,
  NAutoComplete,
  NProgress,
  NCollapse,
  NCollapseItem,
  NSlider,
  NPopconfirm,
  NGrid,
  NGridItem,
  NButton,
  NConfigProvider,
  NCard,
  NInput,
  NColorPicker,
  NInputNumber,
  NSpace,
  NH1,
  NForm,
  NFormItem,
  NTimePicker,
  NText,
  NIcon,
  NSwitch,
  NCollapseTransition,
  NPopover,
 ];
 export const naive = create({ components });
--- a/src/plugins/plausible.plugin.ts
+++ b/src/plugins/plausible.plugin.ts
@@ -1,38 +1,12 @@
-import { noop } from 'lodash';
+import { config } from '@/config';
 import Plausible from 'plausible-tracker';
 import type { App } from 'vue';
 import { config } from '@/config';
 function createFakePlausibleInstance(): Pick<ReturnType<typeof Plausible>, 'trackEvent' | 'enableAutoPageviews'> {
  return {
    trackEvent: noop,
    enableAutoPageviews: () => noop,
  };
 }
 function createPlausibleInstance({
  config,
 }: {
  config: {
    isTrackerEnabled: boolean
    domain: string
    apiHost: string
    trackLocalhost: boolean
  }
 }) {
  if (config.isTrackerEnabled) {
    return Plausible(config);
  }
  return createFakePlausibleInstance();
 }
 export const plausible = {
  install: (app: App) => {
-    const plausible = createPlausibleInstance({ config: config.plausible });
+    const plausible = Plausible(config.plausible);
    plausible.enableAutoPageviews();
-    app.provide('plausible', plausible);
+    app.config.globalProperties.$plausible = plausible;
  },
 };
--- a/src/router.ts
+++ b/src/router.ts
@@ -4,7 +4,6 @@ import HomePage from './pages/Home.page.vue';
 import NotFound from './pages/404.page.vue';
 import { tools } from './tools';
 import { config } from './config';
 import { routes as demoRoutes } from './ui/demo/demo.routes';
 const toolsRoutes = tools.map(({ path, name, component, ...config }) => ({
  path,
@@ -15,7 +14,7 @@ const toolsRoutes = tools.map(({ path, name, component, ...config }) => ({
 const toolsRedirectRoutes = tools
  .filter(({ redirectFrom }) => redirectFrom && redirectFrom.length > 0)
  .flatMap(
-    ({ path, redirectFrom }) => redirectFrom?.map(redirectSource => ({ path: redirectSource, redirect: path })) ?? [],
+    ({ path, redirectFrom }) => redirectFrom?.map((redirectSource) => ({ path: redirectSource, redirect: path })) ?? [],
  );
 const router = createRouter({
@@ -33,7 +32,6 @@ const router = createRouter({
    },
    ...toolsRoutes,
    ...toolsRedirectRoutes,
    ...(config.app.env === 'development' ? demoRoutes : []),
    { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
  ],
 });
--- a/src/shims.d.ts
+++ b/src/shims.d.ts
@@ -1,35 +1,10 @@
 declare module '*.vue' {
-  import type {  ComponentOptions } from 'vue';
+  import type { ComponentOptions, ComponentOptions } from 'vue';
  const Component: ComponentOptions;
  export default Component;
 }
 declare module '*.md' {
  import type {  ComponentOptions } from 'vue';
  const Component: ComponentOptions;
  export default Component;
 }
 declare module 'iarna-toml-esm' {
  export const parse: (toml: string) => any;
  export const stringify: (obj: any) => string;
 }
 declare module 'emojilib' {
  const lib: Record<string, string[]>;
  export default lib;
 }
 declare module 'unicode-emoji-json' {
  const emoji: Record<string, {
    name: string;
    slug: string;
    group: string;
    emoji_version: string;
    unicode_version: string;
    skin_tone_support: boolean;
    skin_tone_support_unicode_version: string;
  }>;
  export default emoji;
 }
--- a/src/stores/style.store.ts
+++ b/src/stores/style.store.ts
@@ -1,19 +1,17 @@
-import { useDark, useMediaQuery, useStorage, useToggle } from '@vueuse/core';
+import { useMediaQuery, useStorage } from '@vueuse/core';
 import { defineStore } from 'pinia';
-import { type Ref, watch } from 'vue';
+import { watch, type Ref } from 'vue';
 export const useStyleStore = defineStore('style', {
  state: () => {
-    const isDarkTheme = useDark();
+    const isDarkTheme = useStorage('isDarkTheme', true) as Ref<boolean>;
    const toggleDark = useToggle(isDarkTheme);
    const isSmallScreen = useMediaQuery('(max-width: 700px)');
    const isMenuCollapsed = useStorage('isMenuCollapsed', isSmallScreen.value) as Ref<boolean>;
-    watch(isSmallScreen, v => (isMenuCollapsed.value = v));
+    watch(isSmallScreen, (v) => (isMenuCollapsed.value = v));
    return {
      isDarkTheme,
      toggleDark,
      isMenuCollapsed,
      isSmallScreen,
    };
--- a/src/themes.ts
+++ b/src/themes.ts
@@ -6,12 +6,6 @@ export const lightThemeOverrides: GlobalThemeOverrides = {
  },
  Layout: { color: '#f1f5f9' },
  AutoComplete: {
    peers: {
      InternalSelectMenu: { height: '500px' },
    },
  },
 };
 export const darkThemeOverrides: GlobalThemeOverrides = {
@@ -22,33 +16,23 @@ export const darkThemeOverrides: GlobalThemeOverrides = {
    primaryColorSuppl: '#36AD6AFF',
  },
  Notification: {
    color: '#333333',
  },
  AutoComplete: {
    peers: {
      InternalSelectMenu: { height: '500px', color: '#1e1e1e' },
    },
  },
  Menu: {
    itemHeight: '32px',
  },
  Layout: {
-    color: '#1c1c1c',
+    color: '#121212',
-    siderColor: '#232323',
+    siderColor: '#1e1e1e',
    siderBorderColor: 'transparent',
  },
  Card: {
-    color: '#232323',
+    color: '#1e1e1e',
-    borderColor: '#282828',
+    borderColor: 'transparent',
  },
  Table: {
-    tdColor: '#232323',
+    tdColor: '#1e1e1e',
    thColor: '#353535',
  },
 };
--- a/src/tools/base64-file-converter/base64-file-converter.vue
+++ b/src/tools/base64-file-converter/base64-file-converter.vue
@@ -1,12 +1,45 @@
 <template>
  <n-card title="Base64 to file">
    <n-form-item
      :feedback="base64InputValidation.message"
      :validation-status="base64InputValidation.status"
      :show-label="false"
    >
      <n-input v-model:value="base64Input" type="textarea" placeholder="Put your base64 file string here..." rows="5" />
    </n-form-item>
    <n-space justify="center">
      <n-button :disabled="base64Input === '' || !base64InputValidation.isValid" secondary @click="downloadFile()">
        Download file
      </n-button>
    </n-space>
  </n-card>
  <n-card title="File to base64">
    <n-upload v-model:file-list="fileList" :show-file-list="true" :on-before-upload="onUpload" list-type="image">
      <n-upload-dragger>
        <div style="margin-bottom: 12px">
          <n-icon size="35" :depth="3" :component="Upload" />
        </div>
        <n-text style="font-size: 14px"> Click or drag a file to this area to upload </n-text>
      </n-upload-dragger>
    </n-upload>
    <n-input :value="fileBase64" type="textarea" readonly placeholder="File in base64 will be here" />
    <n-space justify="center">
      <n-button secondary @click="copyFileBase64()"> Copy </n-button>
    </n-space>
  </n-card>
 </template>
 <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';
 import { useValidation } from '@/composable/validation';
 import { isValidBase64 } from '@/utils/base64';
 import { Upload } from '@vicons/tabler';
 import { useBase64 } from '@vueuse/core';
 import type { UploadFileInfo } from 'naive-ui';
 import { ref, type Ref } from 'vue';
 const base64Input = ref('');
 const { download } = useDownloadFileFromBase64({ source: base64Input });
@@ -15,20 +48,17 @@ const base64InputValidation = useValidation({
  rules: [
    {
      message: 'Invalid base 64 string',
-      validator: value => isValidBase64(value.trim()),
+      validator: (value) => isValidBase64(value.trim()),
    },
  ],
 });
 function downloadFile() {
-  if (!base64InputValidation.isValid) {
+  if (!base64InputValidation.isValid) return;
    return;
  }
  try {
    download();
-  }
+  } catch (_) {
  catch (_) {
    //
  }
 }
@@ -46,47 +76,12 @@ async function onUpload({ file: { file } }: { file: UploadFileInfo }) {
 }
 </script>
 <template>
  <c-card title="Base64 to file">
    <c-input-text
      v-model:value="base64Input"
      multiline
      placeholder="Put your base64 file string here..."
      rows="5"
      :validation="base64InputValidation"
      mb-2
    />
    <div flex justify-center>
      <c-button :disabled="base64Input === '' || !base64InputValidation.isValid" @click="downloadFile()">
        Download file
      </c-button>
    </div>
  </c-card>
  <c-card title="File to base64">
    <n-upload v-model:file-list="fileList" :show-file-list="true" :on-before-upload="onUpload" list-type="image">
      <n-upload-dragger>
        <div mb-2>
          <n-icon size="35" :depth="3" :component="Upload" />
        </div>
        <div op-60>
          Click or drag a file to this area to upload
        </div>
      </n-upload-dragger>
    </n-upload>
    <c-input-text :value="fileBase64" multiline readonly placeholder="File in base64 will be here" rows="5" mb-2 />
    <div flex justify-center>
      <c-button @click="copyFileBase64()">
        Copy
      </c-button>
    </div>
  </c-card>
 </template>
 <style lang="less" scoped>
 .n-input,
 .n-upload {
  margin-bottom: 15px;
 }
 ::v-deep(.n-upload-trigger) {
  width: 100%;
 }
--- a/src/tools/base64-file-converter/index.ts
+++ b/src/tools/base64-file-converter/index.ts
@@ -4,7 +4,7 @@ import { defineTool } from '../tool';
 export const tool = defineTool({
  name: 'Base64 file converter',
  path: '/base64-file-converter',
-  description: 'Convert string, files or images into a it\'s base64 representation.',
+  description: "Convert string, files or images into a it's base64 representation.",
  keywords: ['base64', 'converter', 'upload', 'image', 'file', 'conversion', 'web', 'data', 'format'],
  component: () => import('./base64-file-converter.vue'),
  icon: FileDigit,
--- a/src/tools/base64-string-converter/base64-string-converter.vue
+++ b/src/tools/base64-string-converter/base64-string-converter.vue
@@ -1,90 +1,57 @@
 <template>
  <n-card title="String to base64">
    <n-form-item label="String to encode">
      <n-input v-model:value="textInput" type="textarea" placeholder="Put your string here..." rows="5" />
    </n-form-item>
    <n-form-item label="Base64 of string">
      <n-input
        :value="base64Output"
        type="textarea"
        readonly
        placeholder="The base64 encoding of your string will be here"
        rows="5"
      />
    </n-form-item>
    <n-space justify="center">
      <n-button secondary @click="copyTextBase64()"> Copy base64 </n-button>
    </n-space>
  </n-card>
  <n-card title="Base64 to string">
    <n-form-item label="Base64 string to decode" v-bind="b64Validation.attrs">
      <n-input v-model:value="base64Input" type="textarea" placeholder="Your base64 string..." rows="5" />
    </n-form-item>
    <n-form-item label="Decoded string">
      <n-input :value="textOutput" type="textarea" readonly placeholder="The decoded string will be here" rows="5" />
    </n-form-item>
    <n-space justify="center">
      <n-button secondary @click="copyText()"> Copy decoded string </n-button>
    </n-space>
  </n-card>
 </template>
 <script setup lang="ts">
 import { useCopy } from '@/composable/copy';
 import { useValidation } from '@/composable/validation';
 import { base64ToText, isValidBase64, textToBase64 } from '@/utils/base64';
 import { withDefaultOnError } from '@/utils/defaults';
-
+import { computed, ref } from 'vue';
 const encodeUrlSafe = useStorage('base64-string-converter--encode-url-safe', false);
 const decodeUrlSafe = useStorage('base64-string-converter--decode-url-safe', false);
 const textInput = ref('');
-const base64Output = computed(() => textToBase64(textInput.value, { makeUrlSafe: encodeUrlSafe.value }));
+const base64Output = computed(() => textToBase64(textInput.value));
 const { copy: copyTextBase64 } = useCopy({ source: base64Output, text: 'Base64 string copied to the clipboard' });
 const base64Input = ref('');
-const textOutput = computed(() =>
+const textOutput = computed(() => withDefaultOnError(() => base64ToText(base64Input.value.trim()), ''));
  withDefaultOnError(() => base64ToText(base64Input.value.trim(), { makeUrlSafe: decodeUrlSafe.value }), ''),
 );
 const { copy: copyText } = useCopy({ source: textOutput, text: 'String copied to the clipboard' });
-const b64ValidationRules = [
+const b64Validation = useValidation({
-  {
+  source: base64Input,
-    message: 'Invalid base64 string',
+  rules: [{ message: 'Invalid base64 string', validator: (value) => isValidBase64(value.trim()) }],
-    validator: (value: string) => isValidBase64(value.trim(), { makeUrlSafe: decodeUrlSafe.value }),
+});
  },
 ];
 const b64ValidationWatch = [decodeUrlSafe];
 </script>
-<template>
+<style lang="less" scoped></style>
  <c-card title="String to base64">
    <n-form-item label="Encode URL safe" label-placement="left">
      <n-switch v-model:value="encodeUrlSafe" />
    </n-form-item>
    <c-input-text
      v-model:value="textInput"
      multiline
      placeholder="Put your string here..."
      rows="5"
      label="String to encode"
      raw-text
      mb-5
    />
    <c-input-text
      label="Base64 of string"
      :value="base64Output"
      multiline
      readonly
      placeholder="The base64 encoding of your string will be here"
      rows="5"
      mb-5
    />
    <div flex justify-center>
      <c-button @click="copyTextBase64()">
        Copy base64
      </c-button>
    </div>
  </c-card>
  <c-card title="Base64 to string">
    <n-form-item label="Decode URL safe" label-placement="left">
      <n-switch v-model:value="decodeUrlSafe" />
    </n-form-item>
    <c-input-text
      v-model:value="base64Input"
      multiline
      placeholder="Your base64 string..."
      rows="5"
      :validation-rules="b64ValidationRules"
      :validation-watch="b64ValidationWatch"
      label="Base64 string to decode"
      mb-5
    />
    <c-input-text
      v-model:value="textOutput"
      label="Decoded string"
      placeholder="The decoded string will be here"
      multiline
      rows="5"
      readonly
      mb-5
    />
    <div flex justify-center>
      <c-button @click="copyText()">
        Copy decoded string
      </c-button>
    </div>
  </c-card>
 </template>
--- a/src/tools/basic-auth-generator/basic-auth-generator.vue
+++ b/src/tools/basic-auth-generator/basic-auth-generator.vue
@@ -1,6 +1,37 @@
 <template>
  <div>
    <n-form-item label="Username">
      <n-input v-model:value="username" placeholder="Your username..." clearable />
    </n-form-item>
    <n-form-item label="Password">
      <n-input
        v-model:value="password"
        placeholder="Your password..."
        type="password"
        show-password-on="click"
        clearable
      />
    </n-form-item>
    <br />
    <n-card>
      <n-statistic label="Authorization header:" class="header">
        <n-scrollbar x-scrollable style="max-width: 550px; margin-bottom: -10px; padding-bottom: 10px" trigger="none">
          {{ header }}
        </n-scrollbar>
      </n-statistic>
    </n-card>
    <br />
    <n-space justify="center">
      <n-button secondary @click="copy">Copy header</n-button>
    </n-space>
  </div>
 </template>
 <script setup lang="ts">
 import { useCopy } from '@/composable/copy';
 import { textToBase64 } from '@/utils/base64';
 import { computed, ref } from 'vue';
 const username = ref('');
 const password = ref('');
@@ -9,34 +40,6 @@ const header = computed(() => `Authorization: Basic ${textToBase64(`${username.v
 const { copy } = useCopy({ source: header, text: 'Header copied to the clipboard' });
 </script>
 <template>
  <div>
    <c-input-text v-model:value="username" label="Username" placeholder="Your username..." clearable raw-text mb-5 />
    <c-input-text
      v-model:value="password"
      label="Password"
      placeholder="Your password..."
      clearable
      raw-text
      mb-2
      type="password"
    />
    <c-card>
      <n-statistic label="Authorization header:" class="header">
        <n-scrollbar x-scrollable style="max-width: 550px; margin-bottom: -10px; padding-bottom: 10px" trigger="none">
          {{ header }}
        </n-scrollbar>
      </n-statistic>
    </c-card>
    <div mt-5 flex justify-center>
      <c-button @click="copy()">
        Copy header
      </c-button>
    </div>
  </div>
 </template>
 <style lang="less" scoped>
 ::v-deep(.n-statistic-value__content) {
  font-family: monospace;
--- a/src/tools/bcrypt/bcrypt.vue
+++ b/src/tools/bcrypt/bcrypt.vue
@@ -1,7 +1,63 @@
 <template>
  <n-card title="Hash">
    <n-form label-width="120">
      <n-form-item label="Your string: " label-placement="left">
        <n-input
          v-model:value="input"
          placeholder="Your string to bcrypt..."
          autocomplete="off"
          autocorrect="off"
          autocapitalize="off"
          spellcheck="false"
        />
      </n-form-item>
      <n-form-item label="Salt count: " label-placement="left">
        <n-input-number v-model:value="saltCount" placeholder="Salt rounds..." :max="10" :min="0" style="width: 100%" />
      </n-form-item>
      <n-input :value="hashed" readonly style="text-align: center" />
    </n-form>
    <br />
    <n-space justify="center">
      <n-button secondary @click="copy"> Copy hash </n-button>
    </n-space>
  </n-card>
  <n-card title="Compare string with hash">
    <n-form label-width="120">
      <n-form-item label="Your string: " label-placement="left">
        <n-input
          v-model:value="compareString"
          placeholder="Your string to compare..."
          autocomplete="off"
          autocorrect="off"
          autocapitalize="off"
          spellcheck="false"
        />
      </n-form-item>
      <n-form-item label="Your hash: " label-placement="left">
        <n-input
          v-model:value="compareHash"
          placeholder="Your hahs to compare..."
          autocomplete="off"
          autocorrect="off"
          autocapitalize="off"
          spellcheck="false"
        />
      </n-form-item>
      <n-form-item label="Do they match ? " label-placement="left" :show-feedback="false">
        <div class="compare-result" :class="{ positive: compareMatch }">
          {{ compareMatch ? 'Yes' : 'No' }}
        </div>
      </n-form-item>
    </n-form>
  </n-card>
 </template>
 <script setup lang="ts">
-import { compareSync, hashSync } from 'bcryptjs';
+import { computed, ref } from 'vue';
-import { useThemeVars } from 'naive-ui';
+import { hashSync, compareSync } from 'bcryptjs';
 import { useCopy } from '@/composable/copy';
 import { useThemeVars } from 'naive-ui';
 const themeVars = useThemeVars();
@@ -15,47 +71,6 @@ const compareHash = ref('');
 const compareMatch = computed(() => compareSync(compareString.value, compareHash.value));
 </script>
 <template>
  <c-card title="Hash">
    <c-input-text
      v-model:value="input"
      placeholder="Your string to bcrypt..."
      raw-text
      label="Your string: "
      label-position="left"
      label-width="120px"
      mb-2
    />
    <n-form-item label="Salt count: " label-placement="left" label-width="120">
      <n-input-number v-model:value="saltCount" placeholder="Salt rounds..." :max="10" :min="0" w-full />
    </n-form-item>
    <c-input-text :value="hashed" readonly text-center />
    <div mt-5 flex justify-center>
      <c-button @click="copy()">
        Copy hash
      </c-button>
    </div>
  </c-card>
  <c-card title="Compare string with hash">
    <n-form label-width="120">
      <n-form-item label="Your string: " label-placement="left">
        <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 />
      </n-form-item>
      <n-form-item label="Do they match ? " label-placement="left" :show-feedback="false">
        <div class="compare-result" :class="{ positive: compareMatch }">
          {{ compareMatch ? 'Yes' : 'No' }}
        </div>
      </n-form-item>
    </n-form>
  </c-card>
 </template>
 <style lang="less" scoped>
 .compare-result {
  color: v-bind('themeVars.errorColor');
--- a/src/tools/benchmark-builder/benchmark-builder.models.ts
+++ b/src/tools/benchmark-builder/benchmark-builder.models.ts
@@ -1,34 +0,0 @@
 import _ from 'lodash';
 export { computeAverage, computeVariance, arrayToMarkdownTable };
 function computeAverage({ data }: { data: number[] }) {
  if (data.length === 0) {
    return 0;
  }
  return _.sum(data) / data.length;
 }
 function computeVariance({ data }: { data: number[] }) {
  const mean = computeAverage({ data });
  const squaredDiffs = data.map(value => (value - mean) ** 2);
  return computeAverage({ data: squaredDiffs });
 }
 function arrayToMarkdownTable({ data, headerMap = {} }: { data: Record<string, unknown>[]; headerMap?: Record<string, string> }) {
  if (!Array.isArray(data) || data.length === 0) {
    return '';
  }
  const headers = Object.keys(data[0]);
  const rows = data.map(obj => Object.values(obj));
  const headerRow = `| ${headers.map(header => headerMap[header] ?? header).join(' | ')} |`;
  const separatorRow = `| ${headers.map(() => '---').join(' | ')} |`;
  const dataRows = rows.map(row => `| ${row.join(' | ')} |`).join('\n');
  return `${headerRow}\n${separatorRow}\n${dataRows}`;
 }
--- a/src/tools/benchmark-builder/benchmark-builder.vue
+++ b/src/tools/benchmark-builder/benchmark-builder.vue
@@ -1,164 +0,0 @@
 <script setup lang="ts">
 import { Plus, Trash } from '@vicons/tabler';
 import { useStorage } from '@vueuse/core';
 import _ from 'lodash';
 import { arrayToMarkdownTable, computeAverage, computeVariance } from './benchmark-builder.models';
 import DynamicValues from './dynamic-values.vue';
 import { useCopy } from '@/composable/copy';
 const suites = useStorage('benchmark-builder:suites', [
  { title: 'Suite 1', data: [5, 10] },
  { title: 'Suite 2', data: [8, 12] },
 ]);
 const unit = useStorage('benchmark-builder:unit', '');
 const round = (v: number) => Math.round(v * 1000) / 1000;
 const results = computed(() => {
  return suites.value
    .map(({ data: dirtyData, title }) => {
      const data = dirtyData.filter(_.isNumber);
      return {
        title,
        size: data.length,
        mean: computeAverage({ data }),
        variance: computeVariance({ data }),
      };
    })
    .sort((a, b) => a.mean - b.mean)
    .map(({ mean, variance, size, title }, index, suites) => {
      const cleanUnit = unit.value.trim();
      const bestMean: number = suites[0].mean;
      const deltaWithBestMean = mean - bestMean;
      const ratioWithBestMean = bestMean === 0 ? '∞' : round(mean / bestMean);
      const comparisonValues: string
        = (index !== 0 && bestMean !== mean) ? ` (+${round(deltaWithBestMean)}${cleanUnit} ; x${ratioWithBestMean})` : '';
      return {
        position: index + 1,
        title,
        mean: `${round(mean)}${cleanUnit}${comparisonValues}`,
        variance: `${round(variance)}${cleanUnit}${cleanUnit ? '²' : ''}`,
        size,
      };
    });
 });
 const { copy } = useCopy({ createToast: false });
 const header = {
  title: 'Suite',
  size: 'Samples',
  mean: 'Mean',
  variance: 'Variance',
  position: 'Position',
 };
 function copyAsMarkdown() {
  copy(arrayToMarkdownTable({ data: results.value, headerMap: header }));
 }
 function copyAsBulletList() {
  const bulletList = results.value
    .flatMap(({ title, ...sections }) => {
      return [
        ` - ${title}`,
        ...Object.entries(sections).map(
          ([key, value]) => `    - ${header[key as keyof typeof header] ?? key}: ${value}`,
        ),
      ];
    })
    .join('\n');
  copy(bulletList);
 }
 </script>
 <template>
  <n-scrollbar style="flex: 1" x-scrollable>
    <div mb-5 flex flex-1 flex-nowrap justify-center gap-12px>
      <div v-for="(suite, index) of suites" :key="index">
        <c-card style="width: 294px">
          <c-input-text
            v-model:value="suite.title"
            label-position="left"
            label="Suite name"
            placeholder="Suite name..."
            clearable
          />
          <n-divider />
          <n-form-item label="Suite values" :show-feedback="false">
            <DynamicValues v-model:values="suite.data" />
          </n-form-item>
        </c-card>
        <div flex justify-center>
          <c-button v-if="suites.length > 1" variant="text" @click="suites.splice(index, 1)">
            <n-icon :component="Trash" depth="3" mr-2 size="18" />
            Delete suite
          </c-button>
          <c-button
            variant="text"
            @click="suites.splice(index + 1, 0, { data: [0], title: `Suite ${suites.length + 1}` })"
          >
            <n-icon :component="Plus" depth="3" mr-2 size="18" />
            Add suite
          </c-button>
        </div>
      </div>
    </div>
  </n-scrollbar>
  <div style="flex: 0 0 100%">
    <div style="max-width: 600px; margin: 0 auto">
      <div mx-auto max-w-sm flex justify-center gap-3>
        <c-input-text v-model:value="unit" placeholder="Unit (eg: ms)" label="Unit" label-position="left" mb-4 />
        <c-button
          @click="
            suites = [
              { title: 'Suite 1', data: [] },
              { title: 'Suite 2', data: [] },
            ]
          "
        >
          Reset suites
        </c-button>
      </div>
      <n-table>
        <thead>
          <tr>
            <th>{{ header.position }}</th>
            <th>{{ header.title }}</th>
            <th>{{ header.size }}</th>
            <th>{{ header.mean }}</th>
            <th>{{ header.variance }}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="{ title, size, mean, variance, position } of results" :key="title">
            <td>{{ position }}</td>
            <td>{{ title }}</td>
            <td>{{ size }}</td>
            <td>{{ mean }}</td>
            <td>{{ variance }}</td>
          </tr>
        </tbody>
      </n-table>
      <div mt-5 flex justify-center gap-3>
        <c-button @click="copyAsMarkdown()">
          Copy as markdown table
        </c-button>
        <c-button @click="copyAsBulletList()">
          Copy as bullet list
        </c-button>
      </div>
    </div>
  </div>
 </template>
--- a/src/tools/benchmark-builder/dynamic-values.vue
+++ b/src/tools/benchmark-builder/dynamic-values.vue
@@ -1,57 +0,0 @@
 <script setup lang="ts">
 import { Plus, Trash } from '@vicons/tabler';
 import { useTemplateRefsList, useVModel } from '@vueuse/core';
 import { NInputNumber } from 'naive-ui';
 import { nextTick } from 'vue';
 const props = defineProps<{ values: (number | null)[] }>();
 const emit = defineEmits(['update:values']);
 const refs = useTemplateRefsList<typeof NInputNumber>();
 const values = useVModel(props, 'values', emit);
 async function addValue() {
  values.value.push(null);
  await nextTick();
  refs.value.at(-1)?.focus();
 }
 function onInputEnter(index: number) {
  if (index === values.value.length - 1) {
    addValue();
    return;
  }
  refs.value.at(index + 1)?.focus();
 }
 </script>
 <template>
  <div>
    <div v-for="(value, index) of values" :key="index" mb-2 flex flex-nowrap gap-2>
      <NInputNumber
        :ref="refs.set"
        v-model:value="values[index]"
        :show-button="false"
        placeholder="Set your measure..."
        autofocus
        @keydown.enter="onInputEnter(index)"
      />
      <n-tooltip>
        <template #trigger>
          <c-button circle variant="text" @click="values.splice(index, 1)">
            <n-icon :component="Trash" depth="3" size="18" />
          </c-button>
        </template>
        Delete value
      </n-tooltip>
    </div>
    <c-button @click="addValue">
      <n-icon :component="Plus" depth="3" mr-2 size="18" />
      Add a measure
    </c-button>
  </div>
 </template>
--- a/src/tools/benchmark-builder/index.ts
+++ b/src/tools/benchmark-builder/index.ts
@@ -1,12 +0,0 @@
 import { SpeedFilled } from '@vicons/material';
 import { defineTool } from '../tool';
 export const tool = defineTool({
  name: 'Benchmark builder',
  path: '/benchmark-builder',
  description: 'Easily compare execution time of tasks with this very simple online benchmark builder.',
  keywords: ['benchmark', 'builder', 'execution', 'duration', 'mean', 'variance'],
  component: () => import('./benchmark-builder.vue'),
  icon: SpeedFilled,
  createdAt: new Date('2023-04-05'),
 });
--- a/src/tools/bip39-generator/bip39-generator.vue
+++ b/src/tools/bip39-generator/bip39-generator.vue
@@ -1,4 +1,67 @@
 <template>
  <div>
    <n-card>
      <n-grid cols="3" x-gap="12">
        <n-gi span="1">
          <n-form-item label="Language:">
            <n-select
              v-model:value="language"
              :options="Object.keys(languages).map((label) => ({ label, value: label }))"
            />
          </n-form-item>
        </n-gi>
        <n-gi span="2">
          <n-form-item
            label="Entropy (seed):"
            :feedback="entropyValidation.message"
            :validation-status="entropyValidation.status"
          >
            <n-input-group>
              <n-input v-model:value="entropy" placeholder="Your string..." />
              <n-button @click="refreshEntropy">
                <n-icon size="22">
                  <Refresh />
                </n-icon>
              </n-button>
              <n-button @click="copyEntropy">
                <n-icon size="22">
                  <Copy />
                </n-icon>
              </n-button>
            </n-input-group>
          </n-form-item>
        </n-gi>
      </n-grid>
      <n-form-item
        label="Passphrase (mnemonic):"
        :feedback="mnemonicValidation.message"
        :validation-status="mnemonicValidation.status"
      >
        <n-input-group>
          <n-input
            v-model:value="passphrase"
            style="text-align: center; flex: 1"
            placeholder="Your mnemonic..."
            autocomplete="off"
            autocorrect="off"
            autocapitalize="off"
            spellcheck="false"
          />
          <n-button @click="copyPassphrase">
            <n-icon size="22" :component="Copy" />
          </n-button>
        </n-input-group>
      </n-form-item>
    </n-card>
  </div>
 </template>
 <script setup lang="ts">
 import { useCopy } from '@/composable/copy';
 import { useValidation } from '@/composable/validation';
 import { isNotThrowing } from '@/utils/boolean';
 import { withDefaultOnError } from '@/utils/defaults';
 import {
  chineseSimplifiedWordList,
  chineseTraditionalWordList,
@@ -15,23 +78,19 @@ import {
  spanishWordList,
 } from '@it-tools/bip39';
 import { Copy, Refresh } from '@vicons/tabler';
-
+import { computed, ref } from 'vue';
 import { useCopy } from '@/composable/copy';
 import { useValidation } from '@/composable/validation';
 import { isNotThrowing } from '@/utils/boolean';
 import { withDefaultOnError } from '@/utils/defaults';
 const languages = {
-  'English': englishWordList,
+  English: englishWordList,
  'Chinese simplified': chineseSimplifiedWordList,
  'Chinese traditional': chineseTraditionalWordList,
-  'Czech': czechWordList,
+  Czech: czechWordList,
-  'French': frenchWordList,
+  French: frenchWordList,
-  'Italian': italianWordList,
+  Italian: italianWordList,
-  'Japanese': japaneseWordList,
+  Japanese: japaneseWordList,
-  'Korean': koreanWordList,
+  Korean: koreanWordList,
-  'Portuguese': portugueseWordList,
+  Portuguese: portugueseWordList,
-  'Spanish': spanishWordList,
+  Spanish: spanishWordList,
 };
 const entropy = ref(generateEntropy());
@@ -52,11 +111,11 @@ const entropyValidation = useValidation({
  source: entropy,
  rules: [
    {
-      validator: value => value === '' || (value.length <= 32 && value.length >= 16 && value.length % 4 === 0),
+      validator: (value) => value === '' || (value.length <= 32 && value.length >= 16 && value.length % 4 === 0),
      message: 'Entropy length should be >= 16, <= 32 and be a multiple of 4',
    },
    {
-      validator: value => /^[a-fA-F0-9]*$/.test(value),
+      validator: (value) => /^[a-fA-F0-9]*$/.test(value),
      message: 'Entropy should be an hexadecimal string',
    },
  ],
@@ -66,7 +125,7 @@ const mnemonicValidation = useValidation({
  source: passphrase,
  rules: [
    {
-      validator: value => isNotThrowing(() => mnemonicToEntropy(value, languages[language.value])),
+      validator: (value) => isNotThrowing(() => mnemonicToEntropy(value, languages[language.value])),
      message: 'Invalid mnemonic',
    },
  ],
@@ -79,53 +138,3 @@ function refreshEntropy() {
 const { copy: copyEntropy } = useCopy({ source: entropy, text: 'Entropy copied to the clipboard' });
 const { copy: copyPassphrase } = useCopy({ source: passphrase, text: 'Passphrase copied to the clipboard' });
 </script>
 <template>
  <div>
    <n-grid cols="3" x-gap="12">
      <n-gi span="1">
        <c-select
          v-model:value="language"
          searchable
          label="Language:"
          :options="Object.keys(languages)"
        />
      </n-gi>
      <n-gi span="2">
        <n-form-item
          label="Entropy (seed):"
          :feedback="entropyValidation.message"
          :validation-status="entropyValidation.status"
        >
          <n-input-group>
            <c-input-text v-model:value="entropy" placeholder="Your string..." />
            <c-button @click="refreshEntropy()">
              <n-icon size="22">
                <Refresh />
              </n-icon>
            </c-button>
            <c-button @click="copyEntropy()">
              <n-icon size="22">
                <Copy />
              </n-icon>
            </c-button>
          </n-input-group>
        </n-form-item>
      </n-gi>
    </n-grid>
    <n-form-item
      label="Passphrase (mnemonic):"
      :feedback="mnemonicValidation.message"
      :validation-status="mnemonicValidation.status"
    >
      <n-input-group>
        <c-input-text v-model:value="passphrase" placeholder="Your mnemonic..." raw-text />
        <c-button @click="copyPassphrase()">
          <n-icon size="22" :component="Copy" />
        </c-button>
      </n-input-group>
    </n-form-item>
  </div>
 </template>
--- a/src/tools/camera-recorder/camera-recorder.vue
+++ b/src/tools/camera-recorder/camera-recorder.vue
@@ -1,214 +0,0 @@
 <script setup lang="ts">
 import _ from 'lodash';
 import { useMediaRecorder } from './useMediaRecorder';
 interface Media { type: 'image' | 'video'; value: string; createdAt: Date }
 const {
  videoInputs: cameras,
  audioInputs: microphones,
  permissionGranted,
  isSupported,
  ensurePermissions,
 } = useDevicesList({
  requestPermissions: true,
  constraints: { video: true, audio: true },
  onUpdated() {
    refreshCurrentDevices();
  },
 });
 const video = ref<HTMLVideoElement>();
 const medias = ref<Media[]>([]);
 const currentCamera = ref(cameras.value[0]?.deviceId);
 const currentMicrophone = ref(microphones.value[0]?.deviceId);
 const permissionCannotBePrompted = ref(false);
 const {
  stream,
  start,
  enabled: isMediaStreamAvailable,
 } = useUserMedia({
  constraints: computed(() => ({
    video: { deviceId: currentCamera.value },
    ...(currentMicrophone.value ? { audio: { deviceId: currentMicrophone.value } } : {}),
  })),
  autoSwitch: true,
 });
 const {
  isRecordingSupported,
  onRecordAvailable,
  startRecording,
  stopRecording,
  pauseRecording,
  recordingState,
  resumeRecording,
 } = useMediaRecorder({
  stream,
 });
 onRecordAvailable((value) => {
  medias.value.unshift({ type: 'video', value, createdAt: new Date() });
 });
 function refreshCurrentDevices() {
  if (_.isNil(currentCamera) || !cameras.value.find(i => i.deviceId === currentCamera.value)) {
    currentCamera.value = cameras.value[0]?.deviceId;
  }
  if (_.isNil(microphones) || !microphones.value.find(i => i.deviceId === currentMicrophone.value)) {
    currentMicrophone.value = microphones.value[0]?.deviceId;
  }
 }
 function takeScreenshot() {
  if (!video.value) {
    return;
  }
  const canvas = document.createElement('canvas');
  canvas.width = video.value.videoWidth;
  canvas.height = video.value.videoHeight;
  canvas.getContext('2d')?.drawImage(video.value, 0, 0);
  const image = canvas.toDataURL('image/png');
  medias.value.unshift({ type: 'image', value: image, createdAt: new Date() });
 }
 watchEffect(() => {
  if (video.value && stream.value) {
    video.value.srcObject = stream.value;
  }
 });
 async function requestPermissions() {
  try {
    await ensurePermissions();
  }
  catch (e) {
    permissionCannotBePrompted.value = true;
  }
 }
 function downloadMedia({ type, value, createdAt }: Media) {
  const link = document.createElement('a');
  link.href = value;
  link.download = `${type}-${createdAt.getTime()}.${type === 'image' ? 'png' : 'webm'}`;
  link.click();
 }
 </script>
 <template>
  <div>
    <c-card v-if="!isSupported">
      Your browser does not support recording video from camera
    </c-card>
    <c-card v-else-if="!permissionGranted" text-center>
      You need to grant permission to use your camera and microphone
      <c-alert v-if="permissionCannotBePrompted" mt-4 text-left>
        Your browser has blocked permission request or does not support it. You need to grant permission manually in
        your browser settings (usually the lock icon in the address bar).
      </c-alert>
      <div v-else mt-4 flex justify-center>
        <c-button @click="requestPermissions">
          Grant permission
        </c-button>
      </div>
    </c-card>
    <c-card v-else>
      <div flex flex-col gap-2>
        <c-select
          v-model:value="currentCamera"
          label-position="left"
          label-width="60px"
          label="Video:"
          :options="cameras.map(({ deviceId, label }) => ({ value: deviceId, label }))"
          placeholder="Select camera"
        />
        <c-select
          v-if="currentMicrophone && microphones.length > 0"
          v-model:value="currentMicrophone"
          label="Audio:"
          label-position="left"
          label-width="60px"
          :options="microphones.map(({ deviceId, label }) => ({ value: deviceId, label }))"
          placeholder="Select microphone"
        />
      </div>
      <div v-if="!isMediaStreamAvailable" mt-3 flex justify-center>
        <c-button type="primary" @click="start">
          Start webcam
        </c-button>
      </div>
      <div v-else>
        <div my-2>
          <video ref="video" autoplay controls playsinline max-h-full w-full />
        </div>
        <div flex items-center justify-between gap-2>
          <c-button :disabled="!isMediaStreamAvailable" @click="takeScreenshot">
            <span mr-2> <icon-mdi-camera /></span>
            Take screenshot
          </c-button>
          <div v-if="isRecordingSupported" flex justify-center gap-2>
            <c-button v-if="recordingState === 'stopped'" @click="startRecording">
              <span mr-2> <icon-mdi-video /></span>
              Start recording
            </c-button>
            <c-button v-if="recordingState === 'recording'" @click="pauseRecording">
              <span mr-2> <icon-mdi-pause /></span>
              Pause
            </c-button>
            <c-button v-if="recordingState === 'paused'" @click="resumeRecording">
              <span mr-2> <icon-mdi-play /></span>
              Resume
            </c-button>
            <c-button v-if="recordingState !== 'stopped'" type="error" @click="stopRecording">
              <span mr-2> <icon-mdi-record /></span>
              Stop
            </c-button>
          </div>
          <div v-else italic op-60>
            Video recording is not supported in your browser
          </div>
        </div>
      </div>
    </c-card>
    <div grid grid-cols-2 mt-5 gap-2>
      <c-card v-for="({ type, value, createdAt }, index) in medias" :key="index">
        <img v-if="type === 'image'" :src="value" max-h-full w-full alt="screenshot">
        <video v-else :src="value" controls max-h-full w-full />
        <div flex items-center justify-between>
          <div font-bold>
            {{ type === 'image' ? 'Screenshot' : 'Video' }}
          </div>
          <div flex gap-2>
            <c-button @click="downloadMedia({ type, value, createdAt })">
              <icon-mdi-download />
            </c-button>
            <c-button @click="medias = medias.filter((_ignored, i) => i !== index)">
              <icon-mdi-delete-outline />
            </c-button>
          </div>
        </div>
      </c-card>
    </div>
  </div>
 </template>
--- a/src/tools/camera-recorder/index.ts
+++ b/src/tools/camera-recorder/index.ts
@@ -1,12 +0,0 @@
 import { Camera } from '@vicons/tabler';
 import { defineTool } from '../tool';
 export const tool = defineTool({
  name: 'Camera recorder',
  path: '/camera-recorder',
  description: 'Take a picture or record a video from your webcam or camera.',
  keywords: ['camera', 'recoder'],
  component: () => import('./camera-recorder.vue'),
  icon: Camera,
  createdAt: new Date('2023-05-15'),
 });
--- a/src/tools/camera-recorder/useMediaRecorder.ts
+++ b/src/tools/camera-recorder/useMediaRecorder.ts
@@ -1,114 +0,0 @@
 import { type Ref, computed, ref } from 'vue';
 export { useMediaRecorder };
 function useMediaRecorder({ stream }: { stream: Ref<MediaStream | undefined> }): {
  isRecordingSupported: Ref<boolean>
  recordingState: Ref<'stopped' | 'recording' | 'paused'>
  startRecording: () => void
  stopRecording: () => void
  pauseRecording: () => void
  resumeRecording: () => void
  onRecordAvailable: (cb: (url: string) => void) => void
 } {
  const isRecordingSupported = computed(() => MediaRecorder.isTypeSupported('video/webm'));
  const mediaRecorder = ref<MediaRecorder | null>(null);
  const recordedChunks = ref<Blob[]>([]);
  const recordAvailable = createEventHook();
  const recordingState = ref<'stopped' | 'recording' | 'paused'>('stopped');
  const createVideo = () => {
    const blob = new Blob(recordedChunks.value, { type: 'video/webm' });
    const url = URL.createObjectURL(blob);
    recordedChunks.value = [];
    return url;
  };
  const startRecording = () => {
    if (!isRecordingSupported.value) {
      return;
    }
    if (!stream.value) {
      return;
    }
    if (recordingState.value !== 'stopped') {
      return;
    }
    mediaRecorder.value = new MediaRecorder(stream.value, { mimeType: 'video/webm' });
    mediaRecorder.value.ondataavailable = (e) => {
      if (e.data.size > 0) {
        recordedChunks.value.push(e.data);
      }
    };
    mediaRecorder.value.onstop = () => {
      recordAvailable.trigger(createVideo());
    };
    if (mediaRecorder.value.state !== 'inactive') {
      return;
    }
    mediaRecorder.value.start();
    recordingState.value = 'recording';
  };
  const stopRecording = () => {
    if (!isRecordingSupported.value) {
      return;
    }
    if (!mediaRecorder.value) {
      return;
    }
    if (recordingState.value === 'stopped') {
      return;
    }
    mediaRecorder.value.stop();
    recordingState.value = 'stopped';
  };
  const pauseRecording = () => {
    if (!isRecordingSupported.value) {
      return;
    }
    if (!mediaRecorder.value) {
      return;
    }
    if (recordingState.value !== 'recording') {
      return;
    }
    mediaRecorder.value.pause();
    recordingState.value = 'paused';
  };
  const resumeRecording = () => {
    if (!isRecordingSupported.value) {
      return;
    }
    if (!mediaRecorder.value) {
      return;
    }
    if (recordingState.value !== 'paused') {
      return;
    }
    mediaRecorder.value.resume();
    recordingState.value = 'recording';
  };
  return {
    isRecordingSupported,
    startRecording,
    stopRecording,
    pauseRecording,
    resumeRecording,
    recordingState,
    onRecordAvailable: recordAvailable.on,
  };
 }
--- a/src/tools/case-converter/case-converter.vue
+++ b/src/tools/case-converter/case-converter.vue
@@ -1,4 +1,51 @@
 <template>
  <n-card>
    <n-form label-width="120" label-placement="left" :show-feedback="false">
      <n-form-item label="Your string:">
        <n-input v-model:value="input" />
      </n-form-item>
      <n-divider />
      <n-form-item label="Camelcase:">
        <input-copyable :value="camelCase(input)" />
      </n-form-item>
      <n-form-item label="Capitalcase:">
        <input-copyable :value="capitalCase(input)" />
      </n-form-item>
      <n-form-item label="Constantcase:">
        <input-copyable :value="constantCase(input)" />
      </n-form-item>
      <n-form-item label="Dotcase:">
        <input-copyable :value="dotCase(input)" />
      </n-form-item>
      <n-form-item label="Headercase:">
        <input-copyable :value="headerCase(input)" />
      </n-form-item>
      <n-form-item label="Nocase:">
        <input-copyable :value="noCase(input)" />
      </n-form-item>
      <n-form-item label="Paramcase:">
        <input-copyable :value="paramCase(input)" />
      </n-form-item>
      <n-form-item label="Pascalcase:">
        <input-copyable :value="pascalCase(input)" />
      </n-form-item>
      <n-form-item label="Pathcase:">
        <input-copyable :value="pathCase(input)" />
      </n-form-item>
      <n-form-item label="Sentencecase:">
        <input-copyable :value="sentenceCase(input)" />
      </n-form-item>
      <n-form-item label="Snakecase:">
        <input-copyable :value="snakeCase(input)" />
      </n-form-item>
    </n-form>
  </n-card>
 </template>
 <script setup lang="ts">
 import { ref } from 'vue';
 import {
  camelCase,
  capitalCase,
@@ -14,93 +61,11 @@ import {
 } from 'change-case';
 import InputCopyable from '../../components/InputCopyable.vue';
 const baseConfig = {
  stripRegexp: /[^A-Za-zÀ-ÖØ-öø-ÿ]+/gi,
 };
 const input = ref('lorem ipsum dolor sit amet');
 const formats = computed(() => [
  {
    label: 'Lowercase:',
    value: noCase(input.value, baseConfig).toLocaleLowerCase(),
  },
  {
    label: 'Uppercase:',
    value: noCase(input.value, baseConfig).toLocaleUpperCase(),
  },
  {
    label: 'Camelcase:',
    value: camelCase(input.value, baseConfig),
  },
  {
    label: 'Capitalcase:',
    value: capitalCase(input.value, baseConfig),
  },
  {
    label: 'Constantcase:',
    value: constantCase(input.value, baseConfig),
  },
  {
    label: 'Dotcase:',
    value: dotCase(input.value, baseConfig),
  },
  {
    label: 'Headercase:',
    value: headerCase(input.value, baseConfig),
  },
  {
    label: 'Nocase:',
    value: noCase(input.value, baseConfig),
  },
  {
    label: 'Paramcase:',
    value: paramCase(input.value, baseConfig),
  },
  {
    label: 'Pascalcase:',
    value: pascalCase(input.value, baseConfig),
  },
  {
    label: 'Pathcase:',
    value: pathCase(input.value, baseConfig),
  },
  {
    label: 'Sentencecase:',
    value: sentenceCase(input.value, baseConfig),
  },
  {
    label: 'Snakecase:',
    value: snakeCase(input.value, baseConfig),
  },
 ]);
 const inputLabelAlignmentConfig = {
  labelPosition: 'left',
  labelWidth: '120px',
  labelAlign: 'right',
 };
 </script>
-<template>
+<style lang="less" scoped>
-  <c-card>
+.n-form-item {
-    <c-input-text
+  margin: 5px 0;
-      v-model:value="input"
+}
-      label="Your string:"
+</style>
      placeholder="Your string..."
      raw-text
      v-bind="inputLabelAlignmentConfig"
    />
    <div my-16px divider />
    <InputCopyable
      v-for="format in formats"
      :key="format.label"
      :value="format.value"
      :label="format.label"
      v-bind="inputLabelAlignmentConfig"
      mb-1
    />
  </c-card>
 </template>
--- a/src/tools/chmod-calculator/chmod-calculator.service.test.ts
+++ b/src/tools/chmod-calculator/chmod-calculator.service.test.ts
@@ -1,130 +0,0 @@
 import { describe, expect, it } from 'vitest';
 import { computeChmodOctalRepresentation, computeChmodSymbolicRepresentation } from './chmod-calculator.service';
 describe('chmod-calculator', () => {
  describe('computeChmodOctalRepresentation', () => {
    it('get the octal representation from permissions', () => {
      expect(
        computeChmodOctalRepresentation({
          permissions: {
            owner: { read: true, write: true, execute: true },
            group: { read: true, write: true, execute: true },
            public: { read: true, write: true, execute: true },
          },
        }),
      ).to.eql('777');
      expect(
        computeChmodOctalRepresentation({
          permissions: {
            owner: { read: false, write: false, execute: false },
            group: { read: false, write: false, execute: false },
            public: { read: false, write: false, execute: false },
          },
        }),
      ).to.eql('000');
      expect(
        computeChmodOctalRepresentation({
          permissions: {
            owner: { read: false, write: true, execute: false },
            group: { read: false, write: true, execute: true },
            public: { read: true, write: false, execute: true },
          },
        }),
      ).to.eql('235');
      expect(
        computeChmodOctalRepresentation({
          permissions: {
            owner: { read: true, write: false, execute: false },
            group: { read: false, write: true, execute: false },
            public: { read: false, write: false, execute: true },
          },
        }),
      ).to.eql('421');
      expect(
        computeChmodOctalRepresentation({
          permissions: {
            owner: { read: false, write: false, execute: true },
            group: { read: false, write: true, execute: false },
            public: { read: true, write: false, execute: false },
          },
        }),
      ).to.eql('124');
      expect(
        computeChmodOctalRepresentation({
          permissions: {
            owner: { read: false, write: true, execute: false },
            group: { read: false, write: true, execute: false },
            public: { read: false, write: true, execute: false },
          },
        }),
      ).to.eql('222');
    });
    it('get the symbolic representation from permissions', () => {
      expect(
        computeChmodSymbolicRepresentation({
          permissions: {
            owner: { read: true, write: true, execute: true },
            group: { read: true, write: true, execute: true },
            public: { read: true, write: true, execute: true },
          },
        }),
      ).to.eql('rwxrwxrwx');
      expect(
        computeChmodSymbolicRepresentation({
          permissions: {
            owner: { read: false, write: false, execute: false },
            group: { read: false, write: false, execute: false },
            public: { read: false, write: false, execute: false },
          },
        }),
      ).to.eql('---------');
      expect(
        computeChmodSymbolicRepresentation({
          permissions: {
            owner: { read: false, write: true, execute: false },
            group: { read: false, write: true, execute: true },
            public: { read: true, write: false, execute: true },
          },
        }),
      ).to.eql('-w--wxr-x');
      expect(
        computeChmodSymbolicRepresentation({
          permissions: {
            owner: { read: true, write: false, execute: false },
            group: { read: false, write: true, execute: false },
            public: { read: false, write: false, execute: true },
          },
        }),
      ).to.eql('r---w---x');
      expect(
        computeChmodSymbolicRepresentation({
          permissions: {
            owner: { read: false, write: false, execute: true },
            group: { read: false, write: true, execute: false },
            public: { read: true, write: false, execute: false },
          },
        }),
      ).to.eql('--x-w-r--');
      expect(
        computeChmodSymbolicRepresentation({
          permissions: {
            owner: { read: false, write: true, execute: false },
            group: { read: false, write: true, execute: false },
            public: { read: false, write: true, execute: false },
          },
        }),
      ).to.eql('-w--w--w-');
    });
  });
 });
--- a/src/tools/chmod-calculator/chmod-calculator.service.ts
+++ b/src/tools/chmod-calculator/chmod-calculator.service.ts
@@ -1,30 +0,0 @@
 import _ from 'lodash';
 import type { GroupPermissions, Permissions } from './chmod-calculator.types';
 export { computeChmodOctalRepresentation, computeChmodSymbolicRepresentation };
 function computeChmodOctalRepresentation({ permissions }: { permissions: Permissions }): string {
  const permissionValue = { read: 4, write: 2, execute: 1 };
  const getGroupPermissionValue = (permission: GroupPermissions) =>
    _.reduce(permission, (acc, isPermSet, key) => acc + (isPermSet ? _.get(permissionValue, key, 0) : 0), 0);
  return [
    getGroupPermissionValue(permissions.owner),
    getGroupPermissionValue(permissions.group),
    getGroupPermissionValue(permissions.public),
  ].join('');
 }
 function computeChmodSymbolicRepresentation({ permissions }: { permissions: Permissions }): string {
  const permissionValue = { read: 'r', write: 'w', execute: 'x' };
  const getGroupPermissionValue = (permission: GroupPermissions) =>
    _.reduce(permission, (acc, isPermSet, key) => acc + (isPermSet ? _.get(permissionValue, key, '') : '-'), '');
  return [
    getGroupPermissionValue(permissions.owner),
    getGroupPermissionValue(permissions.group),
    getGroupPermissionValue(permissions.public),
  ].join('');
 }
--- a/src/tools/chmod-calculator/chmod-calculator.types.ts
+++ b/src/tools/chmod-calculator/chmod-calculator.types.ts
@@ -1,10 +0,0 @@
 export type Scope = 'read' | 'write' | 'execute';
 export type Group = 'owner' | 'group' | 'public';
 export type GroupPermissions = {
  [k in Scope]: boolean;
 };
 export type Permissions = {
  [k in Group]: GroupPermissions;
 };
--- a/src/tools/chmod-calculator/chmod-calculator.vue
+++ b/src/tools/chmod-calculator/chmod-calculator.vue
@@ -1,95 +0,0 @@
 <script setup lang="ts">
 import { useThemeVars } from 'naive-ui';
 import InputCopyable from '../../components/InputCopyable.vue';
 import { computeChmodOctalRepresentation, computeChmodSymbolicRepresentation } from './chmod-calculator.service';
 import type { Group, Scope } from './chmod-calculator.types';
 const themeVars = useThemeVars();
 const scopes: { scope: Scope; title: string }[] = [
  { scope: 'read', title: 'Read (4)' },
  { scope: 'write', title: 'Write (2)' },
  { scope: 'execute', title: 'Execute (1)' },
 ];
 const groups: Group[] = ['owner', 'group', 'public'];
 const permissions = ref({
  owner: { read: false, write: false, execute: false },
  group: { read: false, write: false, execute: false },
  public: { read: false, write: false, execute: false },
 });
 const octal = computed(() => computeChmodOctalRepresentation({ permissions: permissions.value }));
 const symbolic = computed(() => computeChmodSymbolicRepresentation({ permissions: permissions.value }));
 </script>
 <template>
  <div>
    <n-table :bordered="false" :bottom-bordered="false" single-column class="permission-table">
      <thead>
        <tr>
          <th class="text-center" scope="col" />
          <th class="text-center" scope="col">
            Owner (u)
          </th>
          <th class="text-center" scope="col">
            Group (g)
          </th>
          <th class="text-center" scope="col">
            Public (o)
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="{ scope, title } of scopes" :key="scope">
          <td class="line-header">
            {{ title }}
          </td>
          <td v-for="group of groups" :key="group" class="text-center">
            <!-- <n-switch v-model:value="permissions[group][scope]" /> -->
            <n-checkbox v-model:checked="permissions[group][scope]" size="large" />
          </td>
        </tr>
      </tbody>
    </n-table>
    <div class="octal-result">
      {{ octal }}
    </div>
    <div class="octal-result">
      {{ symbolic }}
    </div>
    <InputCopyable :value="`chmod ${octal} path`" readonly />
  </div>
 </template>
 <style lang="less" scoped>
 .octal-result {
  text-align: center;
  font-size: 50px;
  font-family: monospace;
  color: v-bind('themeVars.primaryColor');
  margin: 20px 0;
 }
 .permission-table {
  td,
  th {
    padding: 15px;
    @media screen and (max-width: 600px) {
      padding: 5px;
    }
  }
 }
 .line-header {
  font-weight: bold;
  text-align: right;
  max-width: 80px;
 }
 .text-center {
  text-align: center;
 }
 </style>
--- a/src/tools/chmod-calculator/index.ts
+++ b/src/tools/chmod-calculator/index.ts
@@ -1,22 +0,0 @@
 import { FileInvoice } from '@vicons/tabler';
 import { defineTool } from '../tool';
 export const tool = defineTool({
  name: 'Chmod calculator',
  path: '/chmod-calculator',
  description: 'Compute your chmod permissions and commands with this online chmod calculator.',
  keywords: [
    'chmod',
    'calculator',
    'file',
    'permission',
    'files',
    'directory',
    'folder',
    'recursive',
    'generator',
    'octal',
  ],
  component: () => import('./chmod-calculator.vue'),
  icon: FileInvoice,
 });
--- a/src/tools/chronometer/chronometer.vue
+++ b/src/tools/chronometer/chronometer.vue
@@ -1,6 +1,21 @@
 <template>
  <div>
    <n-card>
      <div class="duration">{{ formatMs(counter) }}</div>
    </n-card>
    <br />
    <n-space justify="center">
      <n-button v-if="!isRunning" secondary type="primary" @click="resume">Start</n-button>
      <n-button v-else secondary type="warning" @click="pause">Stop</n-button>
      <n-button secondary @click="counter = 0">Reset</n-button>
    </n-space>
  </div>
 </template>
 <script setup lang="ts">
 import { useRafFn } from '@vueuse/core';
-
+import { ref } from 'vue';
 import { formatMs } from './chronometer.service';
 const isRunning = ref(false);
@@ -28,28 +43,6 @@ function pause() {
 }
 </script>
 <template>
  <div>
    <c-card>
      <div class="duration">
        {{ formatMs(counter) }}
      </div>
    </c-card>
    <div mt-5 flex justify-center gap-3>
      <c-button v-if="!isRunning" type="primary" @click="resume">
        Start
      </c-button>
      <c-button v-else type="warning" @click="pause">
        Stop
      </c-button>
      <c-button @click="counter = 0">
        Reset
      </c-button>
    </div>
  </div>
 </template>
 <style lang="less" scoped>
 .duration {
  text-align: center;
--- a/src/tools/color-converter/color-converter.vue
+++ b/src/tools/color-converter/color-converter.vue
@@ -1,4 +1,40 @@
 <template>
  <n-card>
    <n-form label-width="100" label-placement="left">
      <n-form-item label="color picker:">
        <n-color-picker
          v-model:value="hex"
          placement="bottom-end"
          @update:value="(v: string) => onInputUpdated(v, 'hex')"
        />
      </n-form-item>
      <n-form-item label="color name:">
        <input-copyable v-model:value="name" :on-input="(v: string) => onInputUpdated(v, 'name')" />
      </n-form-item>
      <n-form-item label="hex:">
        <input-copyable v-model:value="hex" :on-input="(v: string) => onInputUpdated(v, 'hex')" />
      </n-form-item>
      <n-form-item label="rgb:">
        <input-copyable v-model:value="rgb" :on-input="(v: string) => onInputUpdated(v, 'rgb')" />
      </n-form-item>
      <n-form-item label="hsl:">
        <input-copyable v-model:value="hsl" :on-input="(v: string) => onInputUpdated(v, 'hsl')" />
      </n-form-item>
      <n-form-item label="hwb:">
        <input-copyable v-model:value="hwb" :on-input="(v: string) => onInputUpdated(v, 'hwb')" />
      </n-form-item>
      <n-form-item label="lch:">
        <input-copyable v-model:value="lch" :on-input="(v: string) => onInputUpdated(v, 'lch')" />
      </n-form-item>
      <n-form-item label="cmyk:">
        <input-copyable v-model:value="cmyk" :on-input="(v: string) => onInputUpdated(v, 'cmyk')" />
      </n-form-item>
    </n-form>
  </n-card>
 </template>
 <script setup lang="ts">
 import { ref } from 'vue';
 import { colord, extend } from 'colord';
 import cmykPlugin from 'colord/plugins/cmyk';
@@ -18,70 +54,16 @@ const cmyk = ref('');
 const lch = ref('');
 function onInputUpdated(value: string, omit: string) {
-  try {
+  const color = colord(value);
    const color = colord(value);
-    if (omit !== 'name') {
+  if (omit !== 'name') name.value = color.toName({ closest: true }) ?? '';
-      name.value = color.toName({ closest: true }) ?? '';
+  if (omit !== 'hex') hex.value = color.toHex();
-    }
+  if (omit !== 'rgb') rgb.value = color.toRgbString();
-    if (omit !== 'hex') {
+  if (omit !== 'hsl') hsl.value = color.toHslString();
-      hex.value = color.toHex();
+  if (omit !== 'hwb') hwb.value = color.toHwbString();
-    }
+  if (omit !== 'cmyk') cmyk.value = color.toCmykString();
-    if (omit !== 'rgb') {
+  if (omit !== 'lch') lch.value = color.toLchString();
      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>
    <n-form label-width="100" label-placement="left">
      <n-form-item label="color picker:">
        <n-color-picker
          v-model:value="hex"
          placement="bottom-end"
          @update:value="(v: string) => onInputUpdated(v, 'hex')"
        />
      </n-form-item>
      <n-form-item label="color name:">
        <InputCopyable v-model:value="name" @update:value="(v: string) => onInputUpdated(v, 'name')" />
      </n-form-item>
      <n-form-item label="hex:">
        <InputCopyable v-model:value="hex" @update:value="(v: string) => onInputUpdated(v, 'hex')" />
      </n-form-item>
      <n-form-item label="rgb:">
        <InputCopyable v-model:value="rgb" @update:value="(v: string) => onInputUpdated(v, 'rgb')" />
      </n-form-item>
      <n-form-item label="hsl:">
        <InputCopyable v-model:value="hsl" @update:value="(v: string) => onInputUpdated(v, 'hsl')" />
      </n-form-item>
      <n-form-item label="hwb:">
        <InputCopyable v-model:value="hwb" @update:value="(v: string) => onInputUpdated(v, 'hwb')" />
      </n-form-item>
      <n-form-item label="lch:">
        <InputCopyable v-model:value="lch" @update:value="(v: string) => onInputUpdated(v, 'lch')" />
      </n-form-item>
      <n-form-item label="cmyk:">
        <InputCopyable v-model:value="cmyk" @update:value="(v: string) => onInputUpdated(v, 'cmyk')" />
      </n-form-item>
    </n-form>
  </c-card>
 </template>
--- a/src/tools/crontab-generator/crontab-generator.vue
+++ b/src/tools/crontab-generator/crontab-generator.vue
@@ -1,6 +1,92 @@
 <template>
  <n-card>
    <n-form-item
      class="cron"
      :show-label="false"
      :feedback="cronValidation.message"
      :validation-status="cronValidation.status"
    >
      <n-input v-model:value="cron" size="large" placeholder="* * * * *" />
    </n-form-item>
    <div class="cron-string">
      {{ cronString }}
    </div>
    <n-divider />
    <n-space justify="center">
      <n-form :show-feedback="false" label-width="170" label-placement="left">
        <n-form-item label="Verbose">
          <n-switch v-model:value="cronstrueConfig.verbose" />
        </n-form-item>
        <n-form-item label="Use 24 hour time format">
          <n-switch v-model:value="cronstrueConfig.use24HourTimeFormat" />
        </n-form-item>
        <n-form-item label="Days start at 0">
          <n-switch v-model:value="cronstrueConfig.dayOfWeekStartIndexZero" />
        </n-form-item>
      </n-form>
    </n-space>
  </n-card>
  <n-card>
    <pre>
 ┌──────────── [optional] seconds (0 - 59)
 | ┌────────── minute (0 - 59)
 | | ┌──────── hour (0 - 23)
 | | | ┌────── day of month (1 - 31)
 | | | | ┌──── month (1 - 12) OR jan,feb,mar,apr ...
 | | | | | ┌── day of week (0 - 6, sunday=0) OR sun,mon ...
 | | | | | |
 * * * * * * command</pre
    >
    <n-space v-if="styleStore.isSmallScreen" vertical>
      <n-card v-for="{ symbol, meaning, example, equivalent } in helpers" :key="symbol" embedded :bordered="false">
        <div>
          Symbol: <strong>{{ symbol }}</strong>
        </div>
        <div>
          Meaning: <strong>{{ meaning }}</strong>
        </div>
        <div>
          Example:
          <strong
            ><code>{{ example }}</code></strong
          >
        </div>
        <div>
          Equivalent: <strong>{{ equivalent }}</strong>
        </div>
      </n-card>
    </n-space>
    <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>
  </n-card>
 </template>
 <script setup lang="ts">
 import cronstrue from 'cronstrue';
 import { isValidCron } from 'cron-validator';
 import { computed, reactive, ref } from 'vue';
 import { useValidation } from '@/composable/validation';
 import { useStyleStore } from '@/stores/style.store';
 function isCronValid(v: string) {
@@ -99,111 +185,30 @@ const cronString = computed(() => {
  return ' ';
 });
-const cronValidationRules = [
+const cronValidation = useValidation({
-  {
+  source: cron,
-    validator: (value: string) => isCronValid(value),
+  rules: [
-    message: 'This cron is invalid',
+    {
-  },
+      validator: (value) => isCronValid(value),
-];
+      message: 'This cron is invalid',
    },
  ],
 });
 </script>
 <template>
  <c-card>
    <div mx-auto max-w-sm>
      <c-input-text
        v-model:value="cron"
        size="large"
        placeholder="* * * * *"
        :validation-rules="cronValidationRules"
        mb-3
      />
    </div>
    <div class="cron-string">
      {{ cronString }}
    </div>
    <n-divider />
    <div flex justify-center>
      <n-form :show-feedback="false" label-width="170" label-placement="left">
        <n-form-item label="Verbose">
          <n-switch v-model:value="cronstrueConfig.verbose" />
        </n-form-item>
        <n-form-item label="Use 24 hour time format">
          <n-switch v-model:value="cronstrueConfig.use24HourTimeFormat" />
        </n-form-item>
        <n-form-item label="Days start at 0">
          <n-switch v-model:value="cronstrueConfig.dayOfWeekStartIndexZero" />
        </n-form-item>
      </n-form>
    </div>
  </c-card>
  <c-card>
    <pre>
 ┌──────────── [optional] seconds (0 - 59)
 | ┌────────── minute (0 - 59)
 | | ┌──────── hour (0 - 23)
 | | | ┌────── day of month (1 - 31)
 | | | | ┌──── month (1 - 12) OR jan,feb,mar,apr ...
 | | | | | ┌── day of week (0 - 6, sunday=0) OR sun,mon ...
 | | | | | |
 * * * * * * command</pre>
    <div v-if="styleStore.isSmallScreen">
      <c-card v-for="{ symbol, meaning, example, equivalent } in helpers" :key="symbol" mb-3 important:border-none>
        <div>
          Symbol: <strong>{{ symbol }}</strong>
        </div>
        <div>
          Meaning: <strong>{{ meaning }}</strong>
        </div>
        <div>
          Example:
          <strong><code>{{ example }}</code></strong>
        </div>
        <div>
          Equivalent: <strong>{{ equivalent }}</strong>
        </div>
      </c-card>
    </div>
    <n-table v-else size="small">
      <thead>
        <tr>
          <th class="text-left" scope="col">
            Symbol
          </th>
          <th class="text-left" scope="col">
            Meaning
          </th>
          <th class="text-left" scope="col">
            Example
          </th>
          <th class="text-left" scope="col">
            Equivalent
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="{ symbol, meaning, example, equivalent } in helpers" :key="symbol">
          <td>{{ symbol }}</td>
          <td>{{ meaning }}</td>
          <td>
            <code>{{ example }}</code>
          </td>
          <td>{{ equivalent }}</td>
        </tr>
      </tbody>
    </n-table>
  </c-card>
 </template>
 <style lang="less" scoped>
-::v-deep(input) {
+.cron {
  font-size: 30px;
  font-family: monospace;
  padding: 5px;
  text-align: center;
  margin: auto;
  max-width: 400px;
  display: block;
  .n-input {
    font-size: 30px;
    font-family: monospace;
    padding: 5px;
  }
 }
 .cron-string {
--- a/src/tools/date-time-converter/date-time-converter.e2e.spec.ts
+++ b/src/tools/date-time-converter/date-time-converter.e2e.spec.ts
@@ -1,33 +0,0 @@
 import { expect, test } from '@playwright/test';
 test.describe('Date time converter - json to yaml', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/date-converter');
  });
  test('Has correct title', async ({ page }) => {
    await expect(page).toHaveTitle('Date-time converter - IT Tools');
  });
  test('Format is auto detected from a date and the date is correctly converted', async ({ page }) => {
    const initialFormat = await page.getByTestId('date-time-converter-format-select').innerText();
    expect(initialFormat.trim()).toEqual('Timestamp');
    await page.getByTestId('date-time-converter-input').fill('2023-04-12T23:10:24+02:00');
    const detectedFormat = await page.getByTestId('date-time-converter-format-select').innerText();
    expect(detectedFormat.trim()).toEqual('ISO 8601');
    expect((await page.getByTestId('JS locale date string').inputValue()).trim()).toEqual(
      'Wed Apr 12 2023 23:10:24 GMT+0200 (Central European Summer Time)',
    );
    expect((await page.getByTestId('ISO 8601').inputValue()).trim()).toEqual('2023-04-12T23:10:24+02:00');
    expect((await page.getByTestId('ISO 9075').inputValue()).trim()).toEqual('2023-04-12 23:10:24');
    expect((await page.getByTestId('Unix timestamp').inputValue()).trim()).toEqual('1681333824');
    expect((await page.getByTestId('RFC 7231').inputValue()).trim()).toEqual('Wed, 12 Apr 2023 21:10:24 GMT');
    expect((await page.getByTestId('RFC 3339').inputValue()).trim()).toEqual('2023-04-12T23:10:24+02:00');
    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');
  });
 });
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
bastantoine	98b226de42	lint	2022-11-19 16:24:10 +01:00
bastantoine	9f2874b23d	added switch to toggle display of parsed values	2022-11-19 11:22:06 +01:00
bastantoine	b0d9fbbbaf	show human readable values	2022-11-19 11:22:00 +01:00
bastantoine	7c100f4030	use a table to display the data	2022-11-19 11:21:56 +01:00
bastantoine	8d0a4273fb	added function to decode JWT and display header and payload	2022-11-18 18:39:47 +01:00
bastantoine	bb0eca80a7	added base tool structure	2022-11-18 18:38:50 +01:00
bastantoine	3e4a64551f	npm install jwt-decode	2022-11-18 15:58:19 +01:00
		`@@ -1,3 +0,0 @@`
			`import type { createTrackerService } from './tracker.services';`

			`export type TrackerService = ReturnType<typeof createTrackerService>;`