chore(version): release 2023.08.16-9bd4ad4

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.eslintrc-auto-import.json

@@ -0,0 +1,291 @@
+{
+  "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
+  }
+}

.eslintrc.cjs

@@ -1,30 +1,14 @@
-/* eslint-env node */
-require('@rushstack/eslint-patch/modern-module-resolution');
-
+/**
+ * @type {import('eslint').Linter.Config}
+ */
 module.exports = {
   root: true,
-  extends: [
-    'plugin:vue/vue3-essential',
-    'eslint:recommended',
-    'plugin:vue/vue3-recommended',
-    'plugin:vue/vue3-recommended',
-    '@vue/eslint-config-typescript/recommended',
-    '@vue/eslint-config-prettier',
-  ],
-  env: {
-    'vue/setup-compiler-macros': true,
-  },
+  extends: ['@antfu', './.eslintrc-auto-import.json', '@unocss'],
+
   rules: {
-    'vue/multi-word-component-names': ['off'],
-    'prettier/prettier': [
-      'error',
-      {
-        singleQuote: true,
-        semi: true,
-        tabWidth: 2,
-        trailingComma: 'all',
-        printWidth: 120,
-      },
-    ],
+    'curly': ['error', 'all'],
+    '@typescript-eslint/semi': ['error', 'always'],
+    '@typescript-eslint/no-use-before-define': ['error', { allowNamedExports: true, functions: false }],
+    'vue/no-empty-component-block': ['error'],
   },
 };

.github/ISSUE_TEMPLATE/bug-report.md

@@ -1,17 +1,17 @@
 ---
 name: Bug report
-about: Create a report to help us improve
-title: "[BUG] "
+about: Create a report to help us improve our tools
+title: '[BUG] '
 labels: bug
 assignees: CorentinTh
-
 ---
 
-**Describe the bug**
-A clear and concise description of what the bug is.
+**Which tool is impacted?**
+Example: the token generator
 
 **To Reproduce**
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
@@ -24,10 +24,11 @@ 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, ]
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
+
+- Device: [e.g. iPhone6, ]
+- OS: [e.g. iOS]
+- Browser [e.g. chrome, safari]
+- Version [e.g. 22]
 
 **Additional context**
 Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

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

.github/ISSUE_TEMPLATE/new-tool-request.md

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

.github/ISSUE_TEMPLATE/other-request.md

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

.github/ISSUE_TEMPLATE/tool-improvement.md

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

.github/workflows/ci.yml

@@ -1,38 +1,34 @@
 name: ci
 
-on: [push, pull_request]
+on:
+  pull_request:
+  push:
+    branches:
+      - main
 
 jobs:
   ci:
     runs-on: ubuntu-latest
 
     steps:
-      - name: Checkout
-        uses: actions/checkout@master
-        with:
-          fetch-depth: 0
-
-      - name: Setup node env
-        uses: actions/setup-node@v3.0.0
+      - uses: actions/checkout@v3
+      - run: corepack enable
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
-
-      - name: Cache node_modules
-        uses: actions/cache@v2
-        with:
-          path: ~/.npm
-          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: |
-            ${{ runner.os }}-node-
+          cache: 'pnpm'
 
       - name: Install dependencies
-        run: npm ci
+        run: pnpm i
 
       - name: Run linters
-        run: npm run lint
+        run: pnpm lint
 
       - name: Run unit test
-        run: npm run test
+        run: pnpm test
+
+      - name: Type check
+        run: pnpm typecheck
 
       - name: Build the app
-        run: npm run build
+        run: pnpm build

.github/workflows/codeql-analysis.yml

@@ -37,11 +37,11 @@ jobs:
 
     steps:
     - name: Checkout repository
-      uses: actions/checkout@v2
+      uses: actions/checkout@v3
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL
-      uses: github/codeql-action/init@v1
+      uses: github/codeql-action/init@v2
       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@v1
+      uses: github/codeql-action/autobuild@v2
 
     # ℹ️ 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@v1
+      uses: github/codeql-action/analyze@v2

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

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

.github/workflows/e2e-tests.yml

@@ -0,0 +1,44 @@
+name: E2E tests
+on: [deployment_status]
+
+jobs:
+  test:
+    if: github.event.deployment_status.state == 'success'
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    env:
+      BASE_URL: ${{ github.event.deployment_status.target_url }}
+    strategy:
+      matrix:
+        shard: [1/3, 2/3, 3/3]
+    steps:
+      - uses: actions/checkout@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: 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 }}

.github/workflows/releases.yml

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

.gitignore

@@ -26,3 +26,10 @@ coverage
 *.njsproj
 *.sln
 *.sw?
+
+.env
+/test-results/
+/playwright-report/
+/playwright/.cache/
+# Webkit with playwright creates a salt file
+salt

.nvmrc

@@ -1 +1 @@
-16.14.2
+18.17.1

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "singleQuote": true,
+  "semi": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "printWidth": 120
+}

.vscode/extensions.json

@@ -1,3 +1,3 @@
 {
-  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin", "dbaeumer.vscode-eslint"]
+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin", "dbaeumer.vscode-eslint", "lokalise.i18n-ally"]
 }

CHANGELOG.md

@@ -2,249 +2,195 @@
 
 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.
 
-### [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)
-
+## Version 2023.08.16-9bd4ad4
 
 ### 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)
 
-* 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
+- **deps**: update dependency uuid to v9 (#566) (5e12991)
+- **deps**: update dependency mathjs to v11 (#519) (7924456)
+- **deps**: update dependency @vueuse/router to v10 (#516) (ea0f27c)
+- **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)
 
-### 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))
+### Chores
+- **deps**: update dependency vitest to ^0.34.0 (#562) (9bd4ad4)
+- **deps**: update dependency node to v18.17.1 (#560) (65a9474)
+- **deps**: update dependency unocss to ^0.55.0 (#561) (85cc7a8)
+- **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)
+- **deps**: update dependency jsdom to v22 (#499) (cd5a503)
+- **deps**: update dependency @vitejs/plugin-vue-jsx to v3 (#497) (1a60236)
+- **deps**: update dependency @vitejs/plugin-vue to v4 (#496) (a249421)
+- **deps**: update dependency vite-plugin-pwa to ^0.16.0 (#488) (6498c9b)
+- **deps**: update dependency vite to v4 (#503) (f40d7ec)
+- **ci**: e2e against vercel deployement (#518) (2e28c50)
+- **e2e**: execute e2e against built app (#511) (cf382b5)
+- **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)
+- **deps**: update dependency workbox-window to v7 (#509) (6b8682f)
+- **deps**: update dependency vite-svg-loader to v4 (#508) (9e8349d)
+- **deps**: update dependency typescript to ~4.9.0 (#481) (f440507)
+- **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)
+- **deps**: update dependency c8 to v8 (#498) (6bda2ca)
+- **deps**: update dependency @types/jsdom to v21 (#495) (994a1c3)
+- **deps**: update node.js to v16.20.1 (#491) (05edaf4)
+- **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)
+- **deps**: update dependency unplugin-auto-import to ^0.16.0 (#483) (6cb0845)
+- **deps**: update dependency unocss to ^0.53.0 (#482) (38710dc)
+- **deps**: update dependency @unocss/eslint-config to ^0.53.0 (#478) (282cfc4)
+- **deps**: added renovate.json (#477) (363c2e4)
+- **i18n**: tool scoped locales (#471) (1b038c7)
+- **wysiwyg-editor**: update tiptap dependencies (732da08)
+- **i18n**: setup i18n plugin config (ebfb872)
+- **config**: netlify deployment support (#443) (93799af)
+- **ci**: shard e2e tests (962a6d6)
+- **lint**: switched to a better lint config (33c9b66)
 
+### Refacor
+- **transformers**: use monospace font for JSON and SQL text areas (#476) (ba4876d)
 
 ### Documentation
+- **ide**: updated vscode extensions settings (#472) (847323c)
 
-* added producthunt banners ([4c4da16](https://github.com/CorentinTh/it-tools/commit/4c4da16970e1dbb13705d8b6c020cd40cd2b5e0d))
-
-
-### 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)
+### Chors
+- **deps**: updated vueuse dependency version (8515c24)
 
+## 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)
 
-* **new-tool:** html entities escape/unescape ([8e29a97](https://github.com/CorentinTh/it-tools/commit/8e29a97404ea0aa9b9b576656358c8c276b6f992))
+### Bug fixes
+- **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)
 
-### Bug Fixes
+### Chores
+- **issues**: updated new tool request issue template (edae4c6)
 
-* **head:** added titles for non-tool pages ([0a15892](https://github.com/CorentinTh/it-tools/commit/0a15892dde9852ff158a8fcb72d0ad6bae8bad02))
-* **sider:** default collapsed value ([b22aa94](https://github.com/CorentinTh/it-tools/commit/b22aa941f52009118d4d3cc98277cc4c402a4c77))
-* **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)
+### Ui-lib
+- **new-component**: added text input component in the c-lib (aad8d84)
+- **button**: size variants (401f13f)
 
+## 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)
 
-* **new-tool:** url parser ([2b38d6f](https://github.com/CorentinTh/it-tools/commit/2b38d6f81e34845f896b858513e35209cba29f98))
+### Bug fixes
+- **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)
 
-### 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)
-
+## Version 2023.04.14-dbad773
 
 ### Features
+- **new-tool**: http status codes (8355bd2)
 
-* **new-tool:** bcrypt ([6d5856f](https://github.com/CorentinTh/it-tools/commit/6d5856fa93d1ffbf71856c75adc24ad87dc4b49b))
-* **new-tool:** device information ([277bd5f](https://github.com/CorentinTh/it-tools/commit/277bd5f0da359fd54c5164b376007d182a9fabde))
+### Refactoring
+- **uuid-generator**: prevent NaN in quantity (6fb4994)
 
+### Chores
+- **release**: create a github release on new version (dbad773)
+- **version**: reset CHANGELOG content to support new format (85cb0ff)
 
-### 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)
-
+## Version 2023.04.14-f9b77b7
 
 ### Features
+- **new-tool**: http status codes (8355bd2)
 
-* **config:** added vercel.json ([2e046ad](https://github.com/CorentinTh/it-tools/commit/2e046ad09fed4a55bbf4449e3683a4150839c461))
+### Refactoring
+- **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)
 
-### 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)
-
+## Version 2023.04.14-2f0d239
 
 ### Features
+- **new-tool**: http status codes (8355bd2)
 
-* **a11y:** aria-label on icon button ([5f50275](https://github.com/CorentinTh/it-tools/commit/5f502755d69ab21a78d9256db8a1c64f1ab82c2a))
-* 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))
+### Refactoring
+- **uuid-generator**: prevent NaN in quantity (6fb4994)
 
+### Chores
+- **release**: create a github release on new version (2f0d239)
+- **version**: reset CHANGELOG content to support new format (85cb0ff)
 
-### Bug Fixes
+## Version 2023.04.14-474cae4
 
-* **hash-text:** added missing toString() ([4ca5fce](https://github.com/CorentinTh/it-tools/commit/4ca5fce911c3312d56bca1ffba863b2f37841c9e))
-* **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))
+### Features
+- **new-tool**: http status codes (8355bd2)
 
+### Refactoring
+- **uuid-generator**: prevent NaN in quantity (6fb4994)
 
-### Refactors
+### Chores
+- **release**: create a github release on new version (474cae4)
+- **version**: reset CHANGELOG content to support new format (85cb0ff)
 
-* 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))
+## Version v2023.4.13-dce9ff9
 
-
-### 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))
+_Diff not available_

Dockerfile

@@ -0,0 +1,14 @@
+# 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;"]

LICENSE

@@ -0,0 +1,674 @@
+                    GNU GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+                            Preamble
+
+  The GNU General Public License is a free, copyleft license for
+software and other kinds of works.
+
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+the GNU General Public License is intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.  We, the Free Software Foundation, use the
+GNU General Public License for most of our software; it applies also to
+any other work released this way by its authors.  You can apply it to
+your programs, too.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+  To protect your rights, we need to prevent others from denying you
+these rights or asking you to surrender the rights.  Therefore, you have
+certain responsibilities if you distribute copies of the software, or if
+you modify it: responsibilities to respect the freedom of others.
+
+  For example, if you distribute copies of such a program, whether
+gratis or for a fee, you must pass on to the recipients the same
+freedoms that you received.  You must make sure that they, too, receive
+or can get the source code.  And you must show them these terms so they
+know their rights.
+
+  Developers that use the GNU GPL protect your rights with two steps:
+(1) assert copyright on the software, and (2) offer you this License
+giving you legal permission to copy, distribute and/or modify it.
+
+  For the developers' and authors' protection, the GPL clearly explains
+that there is no warranty for this free software.  For both users' and
+authors' sake, the GPL requires that modified versions be marked as
+changed, so that their problems will not be attributed erroneously to
+authors of previous versions.
+
+  Some devices are designed to deny users access to install or run
+modified versions of the software inside them, although the manufacturer
+can do so.  This is fundamentally incompatible with the aim of
+protecting users' freedom to change the software.  The systematic
+pattern of such abuse occurs in the area of products for individuals to
+use, which is precisely where it is most unacceptable.  Therefore, we
+have designed this version of the GPL to prohibit the practice for those
+products.  If such problems arise substantially in other domains, we
+stand ready to extend this provision to those domains in future versions
+of the GPL, as needed to protect the freedom of users.
+
+  Finally, every program is threatened constantly by software patents.
+States should not allow patents to restrict development and use of
+software on general-purpose computers, but in those that do, we wish to
+avoid the special danger that patents applied to a free program could
+make it effectively proprietary.  To prevent this, the GPL assures that
+patents cannot be used to render the program non-free.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                       TERMS AND CONDITIONS
+
+  0. Definitions.
+
+  "This License" refers to version 3 of the GNU General Public License.
+
+  "Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+  "The Program" refers to any copyrightable work licensed under this
+License.  Each licensee is addressed as "you".  "Licensees" and
+"recipients" may be individuals or organizations.
+
+  To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy.  The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+  A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+  To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy.  Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+  To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies.  Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+  An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License.  If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+  1. Source Code.
+
+  The "source code" for a work means the preferred form of the work
+for making modifications to it.  "Object code" means any non-source
+form of a work.
+
+  A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+  The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form.  A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+  The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities.  However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work.  For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+  The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+  The Corresponding Source for a work in source code form is that
+same work.
+
+  2. Basic Permissions.
+
+  All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met.  This License explicitly affirms your unlimited
+permission to run the unmodified Program.  The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work.  This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+  You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force.  You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright.  Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+  Conveying under any other circumstances is permitted solely under
+the conditions stated below.  Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+  No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+  When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+  4. Conveying Verbatim Copies.
+
+  You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+  You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+  5. Conveying Modified Source Versions.
+
+  You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+
+    b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under section
+    7.  This requirement modifies the requirement in section 4 to
+    "keep intact all notices".
+
+    c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy.  This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged.  This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+
+    d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+  A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit.  Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+  6. Conveying Non-Source Forms.
+
+  You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+
+    b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the
+    Corresponding Source from a network server at no charge.
+
+    c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source.  This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+
+    d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge.  You need not require recipients to copy the
+    Corresponding Source along with the object code.  If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source.  Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+
+    e) Convey the object code using peer-to-peer transmission, provided
+    you inform other peers where the object code and Corresponding
+    Source of the work are being offered to the general public at no
+    charge under subsection 6d.
+
+  A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+  A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling.  In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage.  For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product.  A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+  "Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source.  The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+  If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information.  But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+  The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed.  Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+  Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+  7. Additional Terms.
+
+  "Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law.  If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+  When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it.  (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.)  You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+  Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+
+    b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+
+    c) Prohibiting misrepresentation of the origin of that material, or
+    requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+
+    d) Limiting the use for publicity purposes of names of licensors or
+    authors of the material; or
+
+    e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+
+    f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions of
+    it) with contractual assumptions of liability to the recipient, for
+    any liability that these contractual assumptions directly impose on
+    those licensors and authors.
+
+  All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10.  If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term.  If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+  If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+  Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+  8. Termination.
+
+  You may not propagate or modify a covered work except as expressly
+provided under this License.  Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+  However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+  Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+  Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License.  If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+  9. Acceptance Not Required for Having Copies.
+
+  You are not required to accept this License in order to receive or
+run a copy of the Program.  Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance.  However,
+nothing other than this License grants you permission to propagate or
+modify any covered work.  These actions infringe copyright if you do
+not accept this License.  Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+  10. Automatic Licensing of Downstream Recipients.
+
+  Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License.  You are not responsible
+for enforcing compliance by third parties with this License.
+
+  An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations.  If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+  You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License.  For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+  11. Patents.
+
+  A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based.  The
+work thus licensed is called the contributor's "contributor version".
+
+  A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version.  For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+  Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+  In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement).  To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+  If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients.  "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+  If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+  A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License.  You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+  Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+  12. No Surrender of Others' Freedom.
+
+  If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all.  For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+  13. Use with the GNU Affero General Public License.
+
+  Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU Affero General Public License into a single
+combined work, and to convey the resulting work.  The terms of this
+License will continue to apply to the part which is the covered work,
+but the special requirements of the GNU Affero General Public License,
+section 13, concerning interaction through a network will apply to the
+combination as such.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU General Public License from time to time.  Such new versions will
+be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+  Each version is given a distinguishing version number.  If the
+Program specifies that a certain numbered version of the GNU General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation.  If the Program does not specify a version number of the
+GNU General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+  If the Program specifies that a proxy can decide which future
+versions of the GNU General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+  Later license versions may give you additional or different
+permissions.  However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+  15. Disclaimer of Warranty.
+
+  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. Limitation of Liability.
+
+  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+  17. Interpretation of Sections 15 and 16.
+
+  If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+state the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+  If the program does terminal interaction, make it output a short
+notice like this when it starts in an interactive mode:
+
+    <program>  Copyright (C) <year>  <name of author>
+    This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
+    This is free software, and you are welcome to redistribute it
+    under certain conditions; type `show c' for details.
+
+The hypothetical commands `show w' and `show c' should show the appropriate
+parts of the General Public License.  Of course, your program's commands
+might be different; for a GUI interface, you would use an "about box".
+
+  You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU GPL, see
+<https://www.gnu.org/licenses/>.
+
+  The GNU General Public License does not permit incorporating your program
+into proprietary programs.  If your program is a subroutine library, you
+may consider it more useful to permit linking proprietary applications with
+the library.  If this is what you want to do, use the GNU Lesser General
+Public License instead of this License.  But first, please read
+<https://www.gnu.org/licenses/why-not-lgpl.html>.

README.md

@@ -6,50 +6,94 @@ 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?assignees=corentinth&labels=&template=feature_request.md&title=)!
+You have an idea of a tool? Submit a [feature request](https://github.com/CorentinTh/it-tools/issues/new/choose)!
+
+## 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:**
+
+- [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/) + [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).
+[VSCode](https://code.visualstudio.com/) with the following extensions:
+- [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) 
+- [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
+- [i18n Ally](https://marketplace.visualstudio.com/items?itemName=lokalise.i18n-ally)
 
-### Node version
+with the following settings:
 
-Ensure you have the correct node/npm version
-
-```sh
-nvm use
+```json5
+{
+  "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
-npm install
+pnpm install
 ```
 
-#### Compile and Hot-Reload for Development
+### Compile and Hot-Reload for Development
 
 ```sh
-npm run dev
+pnpm dev
 ```
 
-#### Type-Check, Compile and Minify for Production
+### Type-Check, Compile and Minify for Production
 
 ```sh
-npm run build
+pnpm build
 ```
 
-#### Run Unit Tests with [Vitest](https://vitest.dev/)
+### Run Unit Tests with [Vitest](https://vitest.dev/)
 
 ```sh
-npm run test
+pnpm test
 ```
 
-#### Lint with [ESLint](https://eslint.org/)
+### Lint with [ESLint](https://eslint.org/)
 
 ```sh
-npm run lint
+pnpm lint
 ```
 
 ### Create a new tool
@@ -57,10 +101,10 @@ npm run lint
 To create a new tool, there is a script that generate the boilerplate of the new tool, simply run:
 
 ```sh
-node scripts/create-tool.mjs my-tool-name
+pnpm run script:create-new-tool my-tool-name
 ```
 
-It will create a directory in `src/tools` with the correct files, and a the import in `src/tools/index.ts`. You will just need to add the inported 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 imported tool in the proper category and develop the tool.
 
 ## Credits
 
@@ -68,12 +112,9 @@ 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 [MIT license](LICENSE).
+This project is under the [GNU GPLv3](LICENSE).

auto-imports.d.ts

@@ -0,0 +1,862 @@
+/* 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']>
+  }
+}

components.d.ts

@@ -0,0 +1,193 @@
+/* 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']
+    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']
+    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']
+    DateTimeConverter: typeof import('./src/tools/date-time-converter/date-time-converter.vue')['default']
+    'Demo.routes': typeof import('./src/ui/demo/demo.routes.vue')['default']
+    'DemoHome.page': typeof import('./src/ui/demo/demo-home.page.vue')['default']
+    DemoWrapper: typeof import('./src/ui/demo/demo-wrapper.vue')['default']
+    DeviceInformation: typeof import('./src/tools/device-information/device-information.vue')['default']
+    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']
+    'IconMdi:brushVariant': typeof import('~icons/mdi/brush-variant')['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']
+    IconMdiCameraOutline: typeof import('~icons/mdi/camera-outline')['default']
+    IconMdiCameraVideoOff: typeof import('~icons/mdi/camera-video-off')['default']
+    IconMdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
+    IconMdiChevronRight: typeof import('~icons/mdi/chevron-right')['default']
+    IconMdiClose: typeof import('~icons/mdi/close')['default']
+    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']
+    IconMdiMagnify: typeof import('~icons/mdi/magnify')['default']
+    IconMdiPause: typeof import('~icons/mdi/pause')['default']
+    IconMdiPlay: typeof import('~icons/mdi/play')['default']
+    IconMdiRecord: typeof import('~icons/mdi/record')['default']
+    IconMdiRefresh: typeof import('~icons/mdi/refresh')['default']
+    IconMdiSearch: typeof import('~icons/mdi/search')['default']
+    IconMdiSearchRound: typeof import('~icons/mdi/search-round')['default']
+    IconMdiTea: typeof import('~icons/mdi/tea')['default']
+    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']
+    NInput: typeof import('naive-ui')['NInput']
+    NInputGroup: typeof import('naive-ui')['NInputGroup']
+    NInputGroupLabel: typeof import('naive-ui')['NInputGroupLabel']
+    NInputNumber: typeof import('naive-ui')['NInputNumber']
+    NLayout: typeof import('naive-ui')['NLayout']
+    NLayoutSider: typeof import('naive-ui')['NLayoutSider']
+    NMenu: typeof import('naive-ui')['NMenu']
+    NP: typeof import('naive-ui')['NP']
+    NPageHeader: typeof import('naive-ui')['NPageHeader']
+    NProgress: typeof import('naive-ui')['NProgress']
+    NScrollbar: typeof import('naive-ui')['NScrollbar']
+    NSelect: typeof import('naive-ui')['NSelect']
+    NSlider: typeof import('naive-ui')['NSlider']
+    NStatistic: typeof import('naive-ui')['NStatistic']
+    NSwitch: typeof import('naive-ui')['NSwitch']
+    NTable: typeof import('naive-ui')['NTable']
+    NTag: typeof import('naive-ui')['NTag']
+    NText: typeof import('naive-ui')['NText']
+    NTooltip: typeof import('naive-ui')['NTooltip']
+    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']
+    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']
+    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']
+    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']
+  }
+}

index.html

@@ -2,34 +2,48 @@
 <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" />
-    <meta name="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." />
-    <meta 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=canonical href="https://it-tools.tech">
+    <meta
+      name="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."
+    />
+    <meta
+      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="canonical" href="https://it-tools.tech" />
 
-    <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="16x16" href="/favicon-16x16.png" />
-    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#18a058" />
+    <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="16x16" href="favicon-16x16.png" />
+    <link rel="mask-icon" href="safari-pinned-tab.svg" color="#18a058" />
     <meta name="msapplication-TileColor" content="#da532c" />
     <meta name="theme-color" content="#ffffff" />
 
     <meta property="og:url" content="https://it-tools.tech/" />
     <meta property="og:type" content="website" />
     <meta property="og:title" content="IT Tools - Handy online tools for developers" />
-    <meta property="og: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." />
-    <meta property="og:image" content="/banner.png" />
+    <meta
+      property="og: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."
+    />
+    <meta property="og:image" content="https://it-tools.tech/banner.png?v=2" />
 
     <meta name="twitter:card" content="summary_large_image" />
-    <meta property="twitter:domain" content="it-tools.tech" />
-    <meta property="twitter:url" content="https://it-tools.tech/" />
+    <meta name="twitter:site" content="@ittoolsdottech" />
+    <meta name="twitter:creator" content="@cthmsst" />
+
     <meta name="twitter:title" content="IT Tools - Handy online tools for developers" />
-    <meta name="twitter: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." />
-    <meta name="twitter:image" content="/banner.png" />
+    <meta
+      name="twitter: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."
+    />
+    <meta name="twitter:image" content="https://it-tools.tech/banner.png?v=2" />
+    <meta name="twitter:image:alt" content="IT Tools - Handy online tools for developers" />
   </head>
   <body>
     <div id="app"></div>

locales/en.yml

@@ -0,0 +1,4 @@
+home:
+  categories:
+    newestTools: Newest tools
+

locales/fr.yml

@@ -0,0 +1,3 @@
+home:
+  categories:
+    newestTools: "Nouveaux outils"

netlify.toml

@@ -0,0 +1,4 @@
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200

nginx.conf

@@ -0,0 +1,10 @@
+server {
+    listen 80;
+    server_name localhost;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+}

package.json

@@ -1,70 +1,134 @@
 {
   "name": "it-tools",
-  "version": "2.4.1",
+  "version": "2023.8.16-9bd4ad4",
+  "description": "Collection of handy online tools for developers, with great UX. ",
+  "keywords": [
+    "productivity",
+    "converter",
+    "website",
+    "vuejs",
+    "tools",
+    "frontend",
+    "tool",
+    "developer-tools",
+    "developer-productivity"
+  ],
+  "author": "Corentin Th <corentin.thomasset74+it-tools@gmail.com> (https://github.com/CorentinTh)",
+  "license": "GNU GPLv3",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/CorentinTh/it-tools"
+  },
   "scripts": {
     "dev": "vite",
     "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",
     "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",
-    "release": "standard-version"
+    "script:create-new-tool": "node scripts/create-tool.mjs",
+    "release": "node ./scripts/release.mjs"
   },
   "dependencies": {
     "@it-tools/bip39": "^0.0.4",
+    "@it-tools/oggen": "^1.3.0",
+    "@sindresorhus/slugify": "^2.2.0",
+    "@tiptap/pm": "^2.0.3",
+    "@tiptap/starter-kit": "^2.0.3",
+    "@tiptap/vue-3": "^2.0.3",
     "@vicons/material": "^0.12.0",
     "@vicons/tabler": "^0.12.0",
-    "@vueuse/core": "^8.2.1",
-    "@vueuse/head": "^0.7.5",
+    "@vueuse/core": "^10.1.2",
+    "@vueuse/head": "^1.0.0",
+    "@vueuse/router": "^10.0.0",
     "bcryptjs": "^2.4.3",
     "change-case": "^4.1.2",
-    "colord": "^2.9.2",
+    "colord": "^2.9.3",
+    "composerize-ts": "^0.6.2",
+    "country-code-lookup": "^0.1.0",
     "cron-validator": "^1.3.1",
-    "cronstrue": "^2.2.0",
+    "cronstrue": "^2.26.0",
     "crypto-js": "^4.1.1",
-    "date-fns": "^2.28.0",
-    "highlight.js": "^11.5.1",
+    "date-fns": "^2.29.3",
+    "emojilib": "^3.0.10",
+    "figue": "^1.2.0",
+    "fuse.js": "^6.6.2",
+    "highlight.js": "^11.7.0",
+    "iarna-toml-esm": "^3.0.5",
+    "json5": "^2.2.3",
+    "jwt-decode": "^3.1.2",
+    "libphonenumber-js": "^1.10.28",
     "lodash": "^4.17.21",
-    "naive-ui": "^2.28.0",
-    "pinia": "^2.0.11",
-    "plausible-tracker": "^0.3.5",
-    "qrcode": "^1.5.0",
+    "mathjs": "^11.0.0",
+    "mime-types": "^2.1.35",
+    "naive-ui": "^2.34.3",
+    "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",
-    "uuid": "^8.3.2",
-    "vue": "^3.2.31",
-    "vue-router": "^4.0.12"
+    "sql-formatter": "^8.2.0",
+    "ts-pattern": "^4.2.2",
+    "ua-parser-js": "^1.0.35",
+    "unicode-emoji-json": "^0.4.0",
+    "unplugin-auto-import": "^0.16.4",
+    "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": {
-    "@rushstack/eslint-patch": "^1.1.0",
+    "@antfu/eslint-config": "^0.39.3",
+    "@iconify-json/mdi": "^1.1.50",
+    "@intlify/unplugin-vue-i18n": "^0.12.0",
+    "@playwright/test": "^1.32.3",
+    "@rushstack/eslint-patch": "^1.2.0",
     "@types/bcryptjs": "^2.4.2",
     "@types/crypto-js": "^4.1.1",
-    "@types/jsdom": "^16.2.14",
-    "@types/node": "^16.11.25",
-    "@types/qrcode": "^1.4.2",
+    "@types/jsdom": "^21.0.0",
+    "@types/lodash": "^4.14.192",
+    "@types/mime-types": "^2.1.1",
+    "@types/netmask": "^2.0.0",
+    "@types/node": "^18.0.0",
+    "@types/node-forge": "^1.3.2",
+    "@types/prettier": "^2.7.2",
+    "@types/qrcode": "^1.5.0",
     "@types/randombytes": "^2.0.0",
-    "@types/uuid": "^8.3.4",
-    "@vitejs/plugin-vue": "^2.2.2",
-    "@vitejs/plugin-vue-jsx": "^1.3.7",
-    "@vue/eslint-config-prettier": "^7.0.0",
-    "@vue/eslint-config-typescript": "^10.0.0",
-    "@vue/test-utils": "^2.0.0-rc.18",
+    "@types/ua-parser-js": "^0.7.36",
+    "@types/uuid": "^9.0.0",
+    "@typescript-eslint/parser": "^5.58.0",
+    "@unocss/eslint-config": "^0.55.0",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "@vitejs/plugin-vue-jsx": "^3.0.0",
+    "@vue/compiler-sfc": "^3.2.47",
+    "@vue/runtime-dom": "^3.3.4",
+    "@vue/test-utils": "^2.3.2",
     "@vue/tsconfig": "^0.1.3",
-    "c8": "^7.11.0",
-    "eslint": "^8.5.0",
-    "eslint-plugin-vue": "^8.2.0",
-    "jsdom": "^19.0.0",
-    "less": "^4.1.2",
-    "prettier": "^2.6.2",
-    "standard-version": "^9.3.2",
-    "start-server-and-test": "^1.14.0",
-    "typescript": "~4.5.5",
-    "vite": "^2.9.1",
-    "vite-plugin-md": "^0.12.4",
-    "vite-plugin-pwa": "^0.11.13",
-    "vite-svg-loader": "^3.2.0",
-    "vitest": "^0.5.0",
-    "vue-tsc": "^0.31.4"
+    "c8": "^8.0.0",
+    "consola": "^3.0.2",
+    "eslint": "^8.38.0",
+    "jsdom": "^22.0.0",
+    "less": "^4.1.3",
+    "prettier": "^2.8.7",
+    "typescript": "~4.9.0",
+    "unocss": "^0.55.0",
+    "unocss-preset-scrollbar": "^0.2.1",
+    "unplugin-icons": "^0.16.1",
+    "unplugin-vue-components": "^0.25.0",
+    "vite": "^4.0.0",
+    "vite-plugin-pwa": "^0.16.0",
+    "vite-plugin-vue-markdown": "^0.23.5",
+    "vite-svg-loader": "^4.0.0",
+    "vitest": "^0.34.0",
+    "workbox-window": "^7.0.0",
+    "zx": "^7.2.1"
   }
 }

playwright.config.ts

@@ -0,0 +1,64 @@
+import { defineConfig, devices } from '@playwright/test';
+
+const isCI = !!process.env.CI;
+const baseUrl = process.env.BASE_URL || 'http://localhost:5050';
+
+/**
+ * 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 */
+
+  ...(isCI
+    ? {}
+    : {
+        webServer: {
+          command: 'npm run preview',
+          url: 'http://127.0.0.1:5050',
+          reuseExistingServer: true,
+        },
+      }),
+});

renovate.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": [
+    "config:base"
+  ]
+}

scripts/create-tool.mjs

@@ -1,10 +1,11 @@
-import { join, dirname } from 'path';
-import { fileURLToPath } from 'url';
 import { mkdir, readFile, writeFile } from 'fs/promises';
+import { dirname, join } from 'path';
+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) {
@@ -28,9 +29,9 @@ createToolFile(
   `${toolName}.vue`,
   `
 <template>
-  <n-card>
+  <div>
     Lorem ipsum
-  </n-card>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -39,24 +40,25 @@ createToolFile(
 
 <style lang="less" scoped>
 </style>
-`
+`,
 );
 
 createToolFile(
   `index.ts`,
   `
 import { ArrowsShuffle } from '@vicons/tabler';
-import type { ITool } from './../Tool';
+import { defineTool } from '../tool';
 
-export const tool: ITool = {
+export const tool = defineTool({
   name: '${toolNameTitleCase}',
   path: '/${toolName}',
   description: '',
   keywords: ['${toolName.split('-').join("', '")}'],
   component: () => import('./${toolName}.vue'),
   icon: ArrowsShuffle,
-};
-`
+  createdAt: new Date('${new Date().toISOString().split('T')[0]}'),
+});
+`,
 );
 
 createToolFile(`${toolName}.service.ts`, ``);
@@ -69,7 +71,29 @@ import { expect, describe, it } from 'vitest';
 // describe('${toolName}', () => {
 //
 // })
-`
+`,
+);
+
+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');

scripts/getLatestChangelog.mjs

@@ -0,0 +1,6 @@
+import { readFile } from 'fs/promises';
+
+const changelogContent = await readFile('./CHANGELOG.md', 'utf-8');
+const [, lastChangelog] = changelogContent.split(/^## .*$/gm);
+
+console.log(lastChangelog.trim());

scripts/release.mjs

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

scripts/shared/changelog.mjs

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

scripts/shared/commits.mjs

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

src/App.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import { layouts } from './layouts';
-import { computed } from 'vue';
-import { useRoute, RouterView } from 'vue-router';
+import { RouterView, useRoute } from 'vue-router';
+import { NGlobalStyle, NMessageProvider, NNotificationProvider, darkTheme } from 'naive-ui';
 import { darkThemeOverrides, lightThemeOverrides } from './themes';
-import { darkTheme, NGlobalStyle, NMessageProvider } from 'naive-ui';
+import { layouts } from './layouts';
 import { useStyleStore } from './stores/style.store';
 
 const route = useRoute();
@@ -16,12 +15,14 @@ const themeOverrides = computed(() => (styleStore.isDarkTheme ? darkThemeOverrid
 
 <template>
   <n-config-provider :theme="theme" :theme-overrides="themeOverrides">
-    <n-global-style />
-    <n-message-provider placement="bottom">
+    <NGlobalStyle />
+    <NMessageProvider placement="bottom">
+      <NNotificationProvider placement="bottom-right">
         <component :is="layout">
-        <router-view />
+          <RouterView />
         </component>
-    </n-message-provider>
+      </NNotificationProvider>
+    </NMessageProvider>
   </n-config-provider>
 </template>
 

src/components/CollapsibleToolMenu.vue

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

src/components/ColoredCard.vue

@@ -0,0 +1,57 @@
+<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-icon class="icon" size="40" :component="icon" />
+    <n-h3 class="title">
+      <n-ellipsis>{{ title }}</n-ellipsis>
+    </n-h3>
+
+    <div class="description">
+      <n-ellipsis :line-clamp="2" :tooltip="false">
+        <slot />
+      </n-ellipsis>
+    </div>
+  </c-card>
+</template>
+
+<style lang="less" scoped>
+.colored-card {
+  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;
+  border: none;
+
+  .icon {
+    opacity: 0.7;
+  }
+
+  .title {
+    color: #fff;
+
+    margin: 5px 0;
+  }
+
+  .description {
+    opacity: 0.8;
+
+    margin: 5px 0;
+
+    ::v-deep(a) {
+      color: inherit;
+      text-decoration: underline;
+      font-weight: bold;
+      transition: color ease 0.2s;
+
+      &:hover {
+        color: rgb(20, 20, 20);
+      }
+    }
+  }
+}
+</style>

src/components/FavoriteButton.vue

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

src/components/FormatTransformer.vue

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

src/components/InputCopyable.vue

@@ -1,22 +1,5 @@
-<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, useClipboard } from '@vueuse/core';
-import { ContentCopyFilled } from '@vicons/material';
-import { ref } from 'vue';
+import { useClipboard, useVModel } from '@vueuse/core';
 
 const props = defineProps<{ value: string }>();
 const emit = defineEmits(['update:value']);
@@ -28,7 +11,7 @@ const { copy } = useClipboard({ source: value });
 
 function onCopyClicked() {
   copy();
-  tooltipText.value = 'Copied !';
+  tooltipText.value = 'Copied!';
 
   setTimeout(() => {
     tooltipText.value = 'Copy to clipboard';
@@ -36,8 +19,17 @@ function onCopyClicked() {
 }
 </script>
 
-<style scoped>
-::v-deep(.n-input-wrapper) {
-  padding-right: 5px;
-}
-</style>
+<template>
+  <c-input-text v-model:value="value">
+    <template #suffix>
+      <n-tooltip trigger="hover">
+        <template #trigger>
+          <c-button circle variant="text" size="small" @click="onCopyClicked">
+            <icon-mdi-content-copy />
+          </c-button>
+        </template>
+        {{ tooltipText }}
+      </n-tooltip>
+    </template>
+  </c-input-text>
+</template>

src/components/MenuIconItem.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { useThemeVars } from 'naive-ui';
+import type { Tool } from '@/tools/tools.types';
+
+const props = defineProps<{ tool: Tool }>();
+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;
+
+  .badge {
+    position: absolute;
+    background-color: v-bind('theme.primaryColor');
+    border-radius: 10px;
+    line-height: 1;
+    top: 3px;
+    left: -6px;
+    font-size: 10px;
+
+    height: 6px;
+    width: 6px;
+  }
+}
+</style>

src/components/MenuLayout.vue

@@ -1,3 +1,11 @@
+<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
@@ -19,15 +27,6 @@
   </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;

src/components/NavbarButtons.vue

@@ -1,69 +1,64 @@
+<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>
-      <n-button
-        size="large"
+      <c-button
         circle
-        quaternary
-        tag="a"
+        variant="text"
         href="https://github.com/CorentinTh/it-tools"
-        rel="noopener"
         target="_blank"
+        rel="noopener noreferrer"
+        aria-label="IT-Tools' GitHub repository"
       >
         <n-icon size="25" :component="BrandGithub" />
-      </n-button>
+      </c-button>
     </template>
     Github repository
   </n-tooltip>
 
   <n-tooltip trigger="hover">
     <template #trigger>
-      <n-button
-        size="large"
+      <c-button
         circle
-        quaternary
-        tag="a"
+        variant="text"
         href="https://twitter.com/ittoolsdottech"
         rel="noopener"
         target="_blank"
+        aria-label="IT Tools' Twitter account"
       >
         <n-icon size="25" :component="BrandTwitter" />
-      </n-button>
+      </c-button>
     </template>
-    Creator twitter
+    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="Home" @click="navigate">
+      <c-button circle variant="text" to="/about" aria-label="About">
         <n-icon size="25" :component="InfoCircle" />
-        </n-button>
+      </c-button>
     </template>
     About
   </n-tooltip>
-  </router-link>
   <n-tooltip trigger="hover">
     <template #trigger>
-      <n-button size="large" circle quaternary @click="isDarkTheme = !isDarkTheme">
+      <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" />
-      </n-button>
+      </c-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 { toRefs } from 'vue';
-import { BrandGithub, BrandTwitter, Moon, Sun, InfoCircle } from '@vicons/tabler';
-
-const styleStore = useStyleStore();
-const { isDarkTheme } = toRefs(styleStore);
-</script>
-
 <style lang="less" scoped>
 .n-button {
   &:not(:last-child) {

src/components/SearchBar.vue

@@ -1,64 +0,0 @@
-<script lang="ts" setup>
-import { SearchRound } from '@vicons/material';
-import { computed, ref } from 'vue';
-import { deburr } from 'lodash';
-import { tools } from '@/tools';
-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 = '';
-}
-</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
-          round
-          clearable
-          placeholder="Search a tool..."
-          :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>

src/components/SpanCopyable.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { useClipboard } from '@vueuse/core';
+
+const props = withDefaults(defineProps<{ value?: string }>(), { value: '' });
+const { value } = toRefs(props);
+
+const initialText = 'Copy to clipboard';
+const tooltipText = ref(initialText);
+
+const { copy } = useClipboard({ source: value });
+
+function handleClick() {
+  copy();
+  tooltipText.value = 'Copied!';
+
+  setTimeout(() => (tooltipText.value = initialText), 1000);
+}
+</script>
+
+<template>
+  <n-tooltip trigger="hover">
+    <template #trigger>
+      <span class="value" @click="handleClick">{{ value }}</span>
+    </template>
+    {{ tooltipText }}
+  </n-tooltip>
+</template>
+
+<style scoped lang="less">
+.value {
+  cursor: pointer;
+  font-family: monospace;
+}
+</style>

src/components/TextareaCopyable.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { Copy } from '@vicons/tabler';
+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 iniHljs from 'highlight.js/lib/languages/ini';
+
+const props = withDefaults(
+  defineProps<{
+    value: string
+    followHeightOf?: HTMLElement | null
+    language?: string
+    copyPlacement?: 'top-right' | 'bottom-right' | 'outside' | 'none'
+    copyMessage?: string
+  }>(),
+  {
+    followHeightOf: null,
+    language: 'txt',
+    copyPlacement: 'top-right',
+    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 { copy } = useClipboard({ source: 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="onCopyClicked">
+              <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="onCopyClicked">
+        {{ tooltipText }}
+      </c-button>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+::v-deep(.n-scrollbar) {
+  padding-bottom: 10px;
+  margin-bottom: -10px;
+}
+.result-card {
+  position: relative;
+  .copy-button {
+    position: absolute;
+    opacity: 1;
+
+    &.top-right {
+      top: 10px;
+      right: 10px;
+    }
+
+    &.bottom-right {
+      bottom: 10px;
+      right: 10px;
+    }
+    &.outside,
+    &.none {
+      display: none;
+    }
+  }
+}
+</style>

src/components/ToolCard.vue

@@ -1,39 +1,68 @@
+<script setup lang="ts">
+import { useThemeVars } from 'naive-ui';
+import FavoriteButton from './FavoriteButton.vue';
+import { useAppTheme } from '@/ui/theme/themes';
+import type { Tool } from '@/tools/tools.types';
+
+const props = defineProps<{ tool: Tool & { category: string } }>();
+const { tool } = toRefs(props);
+const theme = useThemeVars();
+
+const appTheme = useAppTheme();
+</script>
+
 <template>
   <router-link :to="tool.path">
-    <n-card class="tool-card">
+    <c-card class="tool-card">
+      <div flex items-center justify-between>
         <n-icon class="icon" size="40" :component="tool.icon" />
+        <div flex items-center gap-8px>
+          <n-tag
+            v-if="tool.isNew"
+            size="small"
+            class="badge-new"
+            round
+            type="success"
+            :bordered="false"
+            :color="{ color: theme.primaryColor, textColor: theme.tagColor }"
+          >
+            New
+          </n-tag>
+
+          <FavoriteButton :tool="tool" />
+        </div>
+      </div>
       <n-h3 class="title">
         <n-ellipsis>{{ tool.name }}</n-ellipsis>
       </n-h3>
+
       <div class="description">
-        <n-ellipsis :line-clamp="2" :tooltip="false">
+        <n-ellipsis :line-clamp="2" :tooltip="false" style="min-height: 44.78px">
           {{ tool.description }}
+          <br>&nbsp;
         </n-ellipsis>
       </div>
-    </n-card>
+    </c-card>
   </router-link>
 </template>
 
-<script setup lang="ts">
-import type { ITool } from '@/tools/Tool';
-import { toRefs, defineProps } from 'vue';
-
-const props = defineProps<{ tool: ITool & { category: string } }>();
-const { tool } = toRefs(props);
-</script>
-
 <style lang="less" scoped>
 a {
   text-decoration: none;
 }
 
 .tool-card {
+  transition: border-color ease 0.5s;
+  border-width: 2px !important;
+  color: transparent;
+
   &:hover {
-    border-color: var(--n-color-target);
+    border-color: v-bind('appTheme.primary.colorHover');
   }
 
   .icon {
-    opacity: 0.7;
+    opacity: 0.6;
+    color: v-bind('theme.textColorBase');
   }
 
   .title {
@@ -41,7 +70,8 @@ a {
   }
 
   .description {
-    opacity: 0.7;
+    opacity: 0.6;
+    color: v-bind('theme.textColorBase');
     margin: 5px 0;
   }
 }

src/composable/computedRefreshable.ts

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

src/composable/copy.ts

@@ -1,15 +1,20 @@
-import { useClipboard } from '@vueuse/core';
+import { type MaybeRef, get, useClipboard } from '@vueuse/core';
 import { useMessage } from 'naive-ui';
-import type { Ref } from 'vue';
 
-export function useCopy({ source, text = 'Copied to the clipboard' }: { source: Ref; text?: string }) {
-  const { copy } = useClipboard({ source });
+export function useCopy({ source, text = 'Copied to the clipboard' }: { source?: MaybeRef<unknown>; text?: string } = {}) {
+  const { copy } = useClipboard(source ? { source: computed(() => String(get(source))) } : {});
   const message = useMessage();
 
   return {
-    async copy() {
+    async copy(content?: string, { notificationMessage }: { notificationMessage?: string } = {}) {
+      if (source) {
         await copy();
-      message.success(text);
+      }
+      else {
+        await copy(content);
+      }
+
+      message.success(notificationMessage ?? text);
     },
   };
 }

src/composable/downloadBase64.ts

@@ -1,11 +1,36 @@
+import { extension as getExtensionFromMime } from 'mime-types';
 import type { Ref } from 'vue';
 
-export function useDownloadFileFromBase64({ source, filename = 'file' }: { source: Ref<string>; filename?: string }) {
+function getFileExtensionFromBase64({
+  base64String,
+  defaultExtension = 'txt',
+}: {
+  base64String: string
+  defaultExtension?: string
+}) {
+  const hasMimeType = base64String.match(/data:(.*?);base64/i);
+
+  if (hasMimeType) {
+    return getExtensionFromMime(hasMimeType[1]) || defaultExtension;
+  }
+
+  return defaultExtension;
+}
+
+export function useDownloadFileFromBase64({ source, filename }: { source: Ref<string>; filename?: string }) {
   return {
     download() {
+      const base64String = source.value;
+
+      if (base64String === '') {
+        throw new Error('Base64 string is empty');
+      }
+
+      const cleanFileName = filename ?? `file.${getFileExtensionFromBase64({ base64String })}`;
+
       const a = document.createElement('a');
-      a.href = source.value;
-      a.download = filename;
+      a.href = base64String;
+      a.download = cleanFileName;
       a.click();
     },
   };

src/composable/fuzzySearch.ts

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

src/composable/queryParams.ts

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

src/composable/validation.test.ts

@@ -0,0 +1,28 @@
+import { describe, expect, it } from 'vitest';
+import { isFalsyOrHasThrown } from './validation';
+
+describe('useValidation', () => {
+  describe('isFalsyOrHasThrown', () => {
+    it('should return true if the callback return nil, false or throw', () => {
+      expect(isFalsyOrHasThrown(() => false)).toBe(true);
+      expect(isFalsyOrHasThrown(() => null)).toBe(true);
+      expect(isFalsyOrHasThrown(() => undefined)).toBe(true);
+      expect(isFalsyOrHasThrown(() => {})).toBe(true);
+      expect(
+        isFalsyOrHasThrown(() => {
+          throw new Error('message');
+        }),
+      ).toBe(true);
+    });
+
+    it('should return true for any truthy values and empty string and 0 values', () => {
+      expect(isFalsyOrHasThrown(() => true)).toBe(false);
+      expect(isFalsyOrHasThrown(() => 'string')).toBe(false);
+      expect(isFalsyOrHasThrown(() => 1)).toBe(false);
+      expect(isFalsyOrHasThrown(() => 0)).toBe(false);
+      expect(isFalsyOrHasThrown(() => '')).toBe(false);
+      expect(isFalsyOrHasThrown(() => [])).toBe(false);
+      expect(isFalsyOrHasThrown(() => ({}))).toBe(false);
+    });
+  });
+});

src/composable/validation.ts

@@ -1,38 +1,77 @@
-import { reactive, watch, type Ref } from 'vue';
+import { type MaybeRef, get } from '@vueuse/core';
+import _ from 'lodash';
+import { type Ref, reactive, watch } from 'vue';
 
-type UseValidationRule<T> = {
-  validator: (value: T) => boolean;
-  message: string;
-};
+type ValidatorReturnType = unknown;
 
-function isFalsyOrHasThrown(cb: () => boolean) {
+export interface UseValidationRule<T> {
+  validator: (value: T) => ValidatorReturnType
+  message: string
+}
+
+export function isFalsyOrHasThrown(cb: () => ValidatorReturnType): boolean {
   try {
-    return !cb();
-  } catch (_) {
+    const returnValue = cb();
+
+    if (_.isNil(returnValue)) {
+      return true;
+    }
+
+    return returnValue === false;
+  }
+  catch (_) {
     return true;
   }
 }
 
-export function useValidation<T>({ source, rules }: { source: Ref<T>; rules: UseValidationRule<T>[] }) {
+export interface ValidationAttrs {
+  feedback: string
+  validationStatus: string | undefined
+}
+
+export function useValidation<T>({
+  source,
+  rules,
+  watch: watchRefs = [],
+}: {
+  source: Ref<T>
+  rules: MaybeRef<UseValidationRule<T>[]>
+  watch?: Ref<unknown>[]
+}) {
   const state = reactive<{
-    message: string;
-    status: undefined | 'error';
+    message: string
+    status: undefined | 'error'
+    isValid: boolean
+    attrs: ValidationAttrs
   }>({
     message: '',
     status: undefined,
+    isValid: false,
+    attrs: {
+      validationStatus: undefined,
+      feedback: '',
+    },
   });
 
-  watch([source], () => {
+  watch(
+    [source, ...watchRefs],
+    () => {
       state.message = '';
       state.status = undefined;
 
-    for (const rule of rules) {
+      for (const rule of get(rules)) {
         if (isFalsyOrHasThrown(() => rule.validator(source.value))) {
           state.message = rule.message;
           state.status = 'error';
         }
       }
-  });
+
+      state.isValid = state.status !== 'error';
+      state.attrs.feedback = state.message;
+      state.attrs.validationStatus = state.status;
+    },
+    { immediate: true },
+  );
 
   return state;
 }

src/config.ts

@@ -0,0 +1,69 @@
+import { figue } from 'figue';
+
+export const config = figue({
+  app: {
+    version: {
+      doc: 'Application current version',
+      format: 'string',
+      default: '0.0.0',
+      env: 'PACKAGE_VERSION',
+    },
+    lastCommitSha: {
+      doc: 'Application last commit SHA version',
+      format: 'string',
+      default: '',
+      env: 'VITE_VERCEL_GIT_COMMIT_SHA',
+    },
+    baseUrl: {
+      doc: 'Application base url',
+      format: 'string',
+      default: '/',
+      env: 'BASE_URL',
+    },
+    env: {
+      doc: 'Application current env',
+      format: 'enum',
+      values: ['production', 'development', 'preview', 'test'],
+      default: 'development',
+      env: 'VITE_VERCEL_ENV',
+    },
+  },
+  plausible: {
+    isTrackerEnabled: {
+      doc: 'Is the tracker enabled',
+      format: 'boolean',
+      default: false,
+      env: 'VITE_TRACKER_ENABLED',
+    },
+    domain: {
+      doc: 'Plausible current domain',
+      format: 'string',
+      default: '',
+      env: 'VITE_PLAUSIBLE_DOMAIN',
+    },
+    apiHost: {
+      doc: 'Plausible remote api host',
+      format: 'string',
+      default: '',
+      env: 'VITE_PLAUSIBLE_API_HOST',
+    },
+    trackLocalhost: {
+      doc: 'Enable or disable localhost tracking by plausible',
+      format: 'boolean',
+      default: false,
+    },
+  },
+  showBanner: {
+    doc: 'Show the banner',
+    format: 'boolean',
+    default: false,
+    env: 'VITE_SHOW_BANNER',
+  },
+})
+  .loadEnv({
+    ...import.meta.env,
+    // Because the string 'import.meta.env.PACKAGE_VERSION' is statically replaced during build time (see 'define' in vite.config.ts)
+    PACKAGE_VERSION: import.meta.env.PACKAGE_VERSION,
+  })
+  .validate()
+  .getConfig();

src/layouts/base.layout.vue

@@ -1,157 +1,139 @@
 <script lang="ts" setup>
 import { NIcon, useThemeVars } from 'naive-ui';
-import { h, type Component } from 'vue';
-import { RouterLink, useRoute } from 'vue-router';
-import { Heart, Menu2, Home2 } from '@vicons/tabler';
-import { toolsByCategory } from '@/tools';
-import SearchBar from '../components/SearchBar.vue';
-import { useStyleStore } from '@/stores/style.store';
+
+import { RouterLink } from 'vue-router';
+import { Heart, Home2, Menu2 } 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 { useToolStore } from '@/tools/tools.store';
+import { useTracker } from '@/modules/tracker/tracker.services';
+import CollapsibleToolMenu from '@/components/CollapsibleToolMenu.vue';
 
 const themeVars = useThemeVars();
-const route = useRoute();
 const styleStore = useStyleStore();
-const version = import.meta.env.PACKAGE_VERSION;
-const commitSha = import.meta.env.GIT_SHORT_SHA;
+const version = config.app.version;
+const commitSha = config.app.lastCommitSha.slice(0, 7);
 
-const makeLabel = (text: string, to: string) => () => h(RouterLink, { to }, { default: () => text });
-const makeIcon = (icon: Component) => () => h(NIcon, null, { default: () => h(icon) });
+const { tracker } = useTracker();
 
-const menuOptions = toolsByCategory.map((category) => ({
-  label: category.name,
-  key: category.name,
-  type: 'group',
-  children: category.components.map(({ name, path, icon }) => ({
-    label: makeLabel(name, path),
-    icon: makeIcon(icon),
-    key: name,
-  })),
-}));
+const toolStore = useToolStore();
+
+const tools = computed<ToolCategory[]>(() => [
+  ...(toolStore.favoriteTools.length > 0 ? [{ name: 'Your favorite tools', components: toolStore.favoriteTools }] : []),
+  ...toolsByCategory,
+]);
 </script>
 
 <template>
-  <menu-layout class="menu-layout" :class="{ isSmallScreen: styleStore.isSmallScreen }">
+  <MenuLayout class="menu-layout" :class="{ isSmallScreen: styleStore.isSmallScreen }">
     <template #sider>
-      <router-link to="/" class="hero-wrapper">
-        <hero-gradient class="gradient" />
+      <RouterLink to="/" class="hero-wrapper">
+        <HeroGradient class="gradient" />
         <div class="text-wrapper">
-          <div class="title">IT - TOOLS</div>
-          <div class="divider" />
-          <div class="subtitle">Handy tools for developers</div>
+          <div class="title">
+            IT - TOOLS
           </div>
-      </router-link>
+          <div class="divider" />
+          <div class="subtitle">
+            Handy tools for developers
+          </div>
+        </div>
+      </RouterLink>
 
       <div class="sider-content">
-        <n-space v-if="styleStore.isSmallScreen" justify="center">
-          <navbar-buttons />
-        </n-space>
+        <div v-if="styleStore.isSmallScreen" flex justify-center>
+          <NavbarButtons />
+        </div>
 
-        <n-menu
-          class="menu"
-          :value="(route.name as string)"
-          :collapsed-width="64"
-          :collapsed-icon-size="22"
-          :options="menuOptions"
-          :indent="20"
-        />
+        <CollapsibleToolMenu :tools-by-category="tools" />
 
         <div class="footer">
           <div>
             IT-Tools
 
-            <n-button
-              text
-              tag="a"
-              target="_blank"
-              rel="noopener"
-              type="primary"
-              depth="3"
-              :href="`https://github.com/CorentinTh/it-tools/tree/v${version}`"
-            >
+            <c-link target="_blank" rel="noopener" :href="`https://github.com/CorentinTh/it-tools/tree/v${version}`">
               v{{ version }}
-            </n-button>
+            </c-link>
 
             <template v-if="commitSha && commitSha.length > 0">
               -
-              <n-button
-                text
-                tag="a"
+              <c-link
                 target="_blank"
                 rel="noopener"
                 type="primary"
-                depth="3"
                 :href="`https://github.com/CorentinTh/it-tools/tree/${commitSha}`"
               >
                 {{ commitSha }}
-              </n-button>
+              </c-link>
             </template>
           </div>
           <div>
             © {{ new Date().getFullYear() }}
-            <n-button text tag="a" target="_blank" rel="noopener" type="primary" href="https://github.com/CorentinTh">
+            <c-link target="_blank" rel="noopener" href="https://github.com/CorentinTh">
               Corentin Thomasset
-            </n-button>
+            </c-link>
           </div>
         </div>
       </div>
     </template>
 
     <template #content>
-      <div class="navigation">
-        <n-button
-          :size="styleStore.isSmallScreen ? 'medium' : 'large'"
+      <div flex items-center justify-center gap-2>
+        <c-button
           circle
-          quaternary
-          aria-label="Toogle menu"
+          variant="text"
+          aria-label="Toggle menu"
           @click="styleStore.isMenuCollapsed = !styleStore.isMenuCollapsed"
         >
-          <n-icon size="25" :component="Menu2" />
-        </n-button>
+          <NIcon size="25" :component="Menu2" />
+        </c-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>
+            <c-button to="/" circle variant="text" aria-label="Home">
+              <NIcon size="25" :component="Home2" />
+            </c-button>
           </template>
           Home
         </n-tooltip>
-        </router-link>
 
-        <search-bar />
+        <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>
-            <n-button
-              type="primary"
-              tag="a"
-              href="https://github.com/sponsors/CorentinTh"
+            <c-button
+              round
+              href="https://www.buymeacoffee.com/cthmsst"
               rel="noopener"
               target="_blank"
+              class="support-button"
+              :bordered="false"
+              @click="() => tracker.trackEvent({ eventName: 'Support button clicked' })"
             >
-              <n-icon v-if="!styleStore.isSmallScreen" :component="Heart" style="margin-right: 5px" />
-              Sponsor
-            </n-button>
+              Buy me a coffee
+              <NIcon v-if="!styleStore.isSmallScreen" :component="Heart" ml-2 />
+            </c-button>
           </template>
-          ❤ Support IT Tools developement !
+          ❤ Support IT Tools development !
         </n-tooltip>
-
-        <navbar-buttons v-if="!styleStore.isSmallScreen" />
       </div>
       <slot />
     </template>
-  </menu-layout>
+  </MenuLayout>
 </template>
 
 <style lang="less" scoped>
@@ -166,6 +148,19 @@ const menuOptions = toolsByCategory.map((category) => ({
 //     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;
@@ -216,20 +211,4 @@ const menuOptions = toolsByCategory.map((category) => ({
     }
   }
 }
-
-.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>

src/layouts/tool.layout.vue

@@ -1,36 +1,53 @@
 <script lang="ts" setup>
 import { useRoute } from 'vue-router';
-import BaseLayout from './base.layout.vue';
 import { useHead } from '@vueuse/head';
 import type { HeadObject } from '@vueuse/head';
-import { reactive } from 'vue';
+
+import BaseLayout from './base.layout.vue';
+import FavoriteButton from '@/components/FavoriteButton.vue';
+import type { Tool } from '@/tools/tools.types';
 
 const route = useRoute();
 
-const head = reactive<HeadObject>({
+const head = computed<HeadObject>(() => ({
   title: `${route.meta.name} - IT Tools`,
   meta: [
     {
       name: 'description',
-      content: route.meta.description,
+      content: route.meta?.description as string,
     },
     {
       name: 'keywords',
-      content: route.meta.keywords,
+      content: ((route.meta.keywords ?? []) as string[]).join(','),
     },
   ],
-});
+}));
 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>
-  <base-layout>
+  <BaseLayout>
     <div class="tool-layout">
       <div class="tool-header">
-        <n-h1>{{ route.meta.name }}</n-h1>
+        <div flex flex-nowrap items-center justify-between>
+          <n-h1>
+            {{ toolTitle }}
+          </n-h1>
+
+          <div>
+            <FavoriteButton :tool="{ name: route.meta.name } as Tool" />
+          </div>
+        </div>
+
         <div class="separator" />
+
         <div class="description">
-          {{ route.meta.description }}
+          {{ toolDescription }}
         </div>
       </div>
     </div>
@@ -38,7 +55,7 @@ useHead(head);
     <div class="tool-content">
       <slot />
     </div>
-  </base-layout>
+  </BaseLayout>
 </template>
 
 <style lang="less" scoped>
@@ -76,6 +93,7 @@ useHead(head);
       width: 200px;
       height: 2px;
       background: rgb(161, 161, 161);
+      opacity: 0.2;
 
       margin: 10px 0;
     }

src/main.ts

@@ -1,20 +1,25 @@
 import { createApp } from 'vue';
 import { createPinia } from 'pinia';
 import { createHead } from '@vueuse/head';
+
 import { registerSW } from 'virtual:pwa-register';
 import { plausible } from './plugins/plausible.plugin';
 
-registerSW();
+import 'virtual:uno.css';
 
 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);

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

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

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

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

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

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

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

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

src/modules/shared/date.models.ts

@@ -0,0 +1,7 @@
+import { format } from 'date-fns';
+
+export { getUrlFriendlyDateTime };
+
+function getUrlFriendlyDateTime({ date = new Date() }: { date?: Date } = {}) {
+  return format(date, 'yyyy-MM-dd-HH-mm-ss');
+}

src/modules/shared/number.models.ts

@@ -0,0 +1,5 @@
+function clamp({ value, min = 0, max = 100 }: { value: number; min?: number; max?: number }) {
+  return Math.min(Math.max(value, min), max);
+}
+
+export { clamp };

src/modules/tracker/tracker.services.ts

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

src/modules/tracker/tracker.types.ts

@@ -0,0 +1,3 @@
+import type { createTrackerService } from './tracker.services';
+
+export type TrackerService = ReturnType<typeof createTrackerService>;

src/pages/404.page.vue

@@ -5,19 +5,23 @@ useHead({ title: 'Page not found - IT Tools' });
 </script>
 
 <template>
-  <div class="e404-wrapper">
-    <n-result status="404" title="404 Not Found" description="Sorry, this page does not seem to extist">
-      <template #footer>
-        <router-link to="/" #="{ navigate, href }" custom>
-          <n-button tag="a" :href="href" secondary type="success" @click="navigate"> Back home </n-button>
-        </router-link>
-      </template>
-    </n-result>
+  <div mt-20 flex flex-col items-center>
+    <span text-90px lh-1 op-50>
+      <icon-mdi:kettle-steam-outline />
+    </span>
+
+    <h1 m-0 mt-3>
+      404 Not Found
+    </h1>
+    <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>

src/pages/About.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { useHead } from '@vueuse/head';
+import { useTracker } from '@/modules/tracker/tracker.services';
 
 useHead({ title: 'About - IT Tools' });
+const { tracker } = useTracker();
 </script>
 
 <template>
@@ -9,73 +11,59 @@ useHead({ title: 'About - IT Tools' });
     <n-h1>About</n-h1>
     <n-p>
       This wonderful website, made with ❤ by
-      <n-button text tag="a" href="https://github.com/CorentinTh" target="_blank" rel="noopener" type="primary">
-        Corentin Thomasset </n-button
-      >, aggregates useful tools for developer and people working in IT. If you find it usefull, please fell free to
-      share it to people you think may find it usefull too and dont forget to pin it in your shortcut bar !
+      <c-link href="https://github.com/CorentinTh" target="_blank" rel="noopener">
+        Corentin Thomasset
+      </c-link>,
+      aggregates useful tools for developer and people working in IT. If you find it useful, please feel free to share
+      it to people you think may find it useful too and don't forget to bookmark it in your shortcut bar!
     </n-p>
     <n-p>
-      IT Tools is opensource (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
+      IT Tools is open-source (under the MIT license) and free, and will always be, but it costs me money to host and
+      renew the domain name. If you want to support my work, and encourage me to add more tools, please consider
       supporting by
-      <n-button
-        type="primary"
-        tag="a"
-        text
-        href="https://github.com/sponsors/CorentinTh"
+      <c-link
+        href="https://www.buymeacoffee.com/cthmsst"
         rel="noopener"
         target="_blank"
+        @click="() => tracker.trackEvent({ eventName: 'Support button clicked' })"
       >
-        sponsoring me </n-button
-      >.
+        sponsoring me
+      </c-link>.
     </n-p>
 
     <n-h2>Technologies</n-h2>
     <n-p>
-      IT Tools is made in Vue JS (vue 3) with the the naive-ui component library and is hosted and continuously deployed
-      by Vercel. Third party opensource libraries are used in some tools, you may find the complete list in the
-      <n-button
-        type="primary"
-        tag="a"
-        text
-        href="https://github.com/CorentinTh/it-tools/blob/master/package.json"
-        rel="noopener"
-        target="_blank"
-      >
+      IT Tools is made in Vue.js (Vue 3) with the the Naive UI component library and is hosted and continuously deployed
+      by Vercel. Third-party open-source libraries are used in some tools, you may find the complete list in the
+      <c-link href="https://github.com/CorentinTh/it-tools/blob/main/package.json" rel="noopener" target="_blank">
         package.json
-      </n-button>
+      </c-link>
       file of the repository.
     </n-p>
 
-    <n-h2>Found a bug ? A tool is missing ?</n-h2>
+    <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 relevant, you are welcome to submit a
+      If you need a tool that is currently not present here, and you think can be useful, you are welcome to submit a
       feature request in the
-      <n-button
-        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"
+      <c-link
+        href="https://github.com/CorentinTh/it-tools/issues/new/choose"
         rel="noopener"
         target="_blank"
       >
         issues section
-      </n-button>
-      in the github repository.
+      </c-link>
+      in the GitHub repository.
     </n-p>
     <n-p>
-      And if you found a bug, or something broken that doesn't work as expected, please fill a bug report in the
-      <n-button
-        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"
+      And if you found a bug, or something doesn't work as expected, please file a bug report in the
+      <c-link
+        href="https://github.com/CorentinTh/it-tools/issues/new/choose"
         rel="noopener"
         target="_blank"
       >
         issues section
-      </n-button>
-      in the github repository.
+      </c-link>
+      in the GitHub repository.
     </n-p>
   </div>
 </template>

src/pages/Home.page.vue

@@ -1,18 +1,71 @@
 <script setup lang="ts">
-import { toolsWithCategory } from '@/tools';
-import ToolCard from '../components/ToolCard.vue';
+import { Heart } from '@vicons/tabler';
 import { useHead } from '@vueuse/head';
+import ColoredCard from '../components/ColoredCard.vue';
+import ToolCard from '../components/ToolCard.vue';
+import { useToolStore } from '@/tools/tools.store';
+import { config } from '@/config';
 
-useHead({ title: 'IT Tools' });
+const toolStore = useToolStore();
+
+useHead({ title: 'IT Tools - Handy online tools for developers' });
+const { t } = useI18n();
 </script>
 
 <template>
   <div class="home-page">
-    <n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
-      <n-gi v-for="tool in toolsWithCategory" :key="tool.name">
-        <tool-card :tool="tool" />
+    <div class="grid-wrapper">
+      <n-grid v-if="config.showBanner" x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
+        <n-gi>
+          <ColoredCard title="You like it-tools?" :icon="Heart">
+            Give us a star on
+            <a
+              href="https://github.com/CorentinTh/it-tools"
+              rel="noopener"
+              target="_blank"
+              aria-label="IT-Tools' GitHub repository"
+            >GitHub</a>
+            or follow us on
+            <a
+              href="https://twitter.com/ittoolsdottech"
+              rel="noopener"
+              target="_blank"
+              aria-label="IT-Tools' Twitter account"
+            >Twitter</a>! Thank you
+            <n-icon :component="Heart" />
+          </ColoredCard>
         </n-gi>
       </n-grid>
+
+      <transition name="height">
+        <div v-if="toolStore.favoriteTools.length > 0">
+          <n-h3>Your favorite tools</n-h3>
+          <n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
+            <n-gi v-for="tool in toolStore.favoriteTools" :key="tool.name">
+              <ToolCard :tool="tool" />
+            </n-gi>
+          </n-grid>
+        </div>
+      </transition>
+
+      <div v-if="toolStore.newTools.length > 0">
+        <n-h3>{{ t('home.categories.newestTools', 'Newest tools') }}</n-h3>
+        <n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
+          <n-gi v-for="tool in toolStore.newTools" :key="tool.name">
+            <ToolCard :tool="tool" />
+          </n-gi>
+        </n-grid>
+      </div>
+
+      <n-h3>All the tools</n-h3>
+      <n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
+        <n-gi v-for="tool in toolStore.tools" :key="tool.name">
+          <transition>
+            <ToolCard :tool="tool" />
+          </transition>
+        </n-gi>
+      </n-grid>
+    </div>
   </div>
 </template>
 
@@ -20,4 +73,27 @@ useHead({ title: 'IT Tools' });
 .home-page {
   padding-top: 50px;
 }
+
+.n-h3 {
+  margin-bottom: 10px;
+}
+
+::v-deep(.n-grid) {
+  margin-bottom: 30px;
+}
+
+.height-enter-active,
+.height-leave-active {
+  transition: all 0.5s ease-in-out;
+  overflow: hidden;
+  max-height: 500px;
+}
+
+.height-enter-from,
+.height-leave-to {
+  max-height: 42px;
+  overflow: hidden;
+  opacity: 0;
+  margin-bottom: 0;
+}
 </style>

src/plugins/i18n.plugin.ts

@@ -0,0 +1,15 @@
+import type { App } from 'vue';
+import { createI18n } from 'vue-i18n';
+import messages from '@intlify/unplugin-vue-i18n/messages';
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages,
+});
+
+export const i18nPlugin = {
+  install: (app: App) => {
+    app.use(i18n);
+  },
+};

src/plugins/naive.plugin.ts

@@ -1,110 +1,3 @@
-import {
-  create,
-  NButton,
-  NConfigProvider,
-  NCard,
-  NInput,
-  NColorPicker,
-  NInputNumber,
-  NSpace,
-  NH1,
-  NForm,
-  NFormItem,
-  NTimePicker,
-  NText,
-  NIcon,
-  NSwitch,
-  NCollapseTransition,
-  NGrid,
-  NGridItem,
-  NPopconfirm,
-  NSlider,
-  NCollapse,
-  NCollapseItem,
-  NProgress,
-  NAutoComplete,
-  NSelect,
-  NUpload,
-  NEmpty,
-  NModal,
-  NTooltip,
-  NAlert,
-  NP,
-  NH2,
-  NDropdown,
-  NLayout,
-  NLayoutSider,
-  NMenu,
-  NMessageProvider,
-  NPageHeader,
-  NResult,
-  NH3,
-  NEllipsis,
-  NTag,
-  NInputGroup,
-  NInputGroupLabel,
-  NDivider,
-  NStatistic,
-  NTable,
-  NUploadDragger,
-  NImage,
-  NScrollbar,
-  NGradientText,
-  NCode,
-} from 'naive-ui';
+import { create } from 'naive-ui';
 
-const components = [
-  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,
-];
-
-export const naive = create({ components });
+export const naive = create();

src/plugins/plausible.plugin.ts

@@ -1,17 +1,38 @@
-import Plausible, { type PlausibleOptions } from 'plausible-tracker';
-import type { App } from 'vue';
+import { noop } from 'lodash';
 
-const options: PlausibleOptions = {
-  domain: import.meta.env.VITE_PLAUSIBLE_DOMAIN,
-  apiHost: import.meta.env.VITE_PLAUSIBLE_API_HOST,
-  trackLocalhost: false,
-};
+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 = Plausible(options);
+    const plausible = createPlausibleInstance({ config: config.plausible });
     plausible.enableAutoPageviews();
 
-    app.config.globalProperties.$plausible = plausible;
+    app.provide('plausible', plausible);
   },
 };

src/router.ts

@@ -1,8 +1,10 @@
-import { layouts } from './layouts/index';
 import { createRouter, createWebHistory } from 'vue-router';
+import { layouts } from './layouts/index';
 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,
@@ -13,11 +15,11 @@ 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({
-  history: createWebHistory(import.meta.env.BASE_URL),
+  history: createWebHistory(config.app.baseUrl),
   routes: [
     {
       path: '/',
@@ -31,6 +33,7 @@ const router = createRouter({
     },
     ...toolsRoutes,
     ...toolsRedirectRoutes,
+    ...(config.app.env === 'development' ? demoRoutes : []),
     { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
   ],
 });

src/shims.d.ts

@@ -8,3 +8,14 @@ declare module '*.md' {
   const Component: ComponentOptions;
   export default Component;
 }
+
+declare module '~icons/*' {
+  import { FunctionalComponent, SVGAttributes } from 'vue';
+  const component: FunctionalComponent<SVGAttributes>;
+  export default component;
+}
+
+declare module 'iarna-toml-esm' {
+  export const parse: (toml: string) => any;
+  export const stringify: (obj: any) => string;
+}

src/stores/style.store.ts

@@ -1,17 +1,19 @@
-import { useMediaQuery, useStorage } from '@vueuse/core';
+import { useDark, useMediaQuery, useStorage, useToggle } from '@vueuse/core';
 import { defineStore } from 'pinia';
-import { watch, type Ref } from 'vue';
+import { type Ref, watch } from 'vue';
 
 export const useStyleStore = defineStore('style', {
   state: () => {
-    const isDarkTheme = useStorage('isDarkTheme', true) as Ref<boolean>;
+    const isDarkTheme = useDark();
+    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,
     };

src/themes.ts

@@ -6,6 +6,12 @@ export const lightThemeOverrides: GlobalThemeOverrides = {
   },
 
   Layout: { color: '#f1f5f9' },
+
+  AutoComplete: {
+    peers: {
+      InternalSelectMenu: { height: '500px' },
+    },
+  },
 };
 
 export const darkThemeOverrides: GlobalThemeOverrides = {
@@ -16,18 +22,33 @@ export const darkThemeOverrides: GlobalThemeOverrides = {
     primaryColorSuppl: '#36AD6AFF',
   },
 
+  Notification: {
+    color: '#333333',
+  },
+
+  AutoComplete: {
+    peers: {
+      InternalSelectMenu: { height: '500px', color: '#1e1e1e' },
+    },
+  },
+
   Menu: {
     itemHeight: '32px',
   },
 
   Layout: {
-    color: '#121212',
-    siderColor: '#1e1e1e',
+    color: '#1c1c1c',
+    siderColor: '#232323',
     siderBorderColor: 'transparent',
   },
 
   Card: {
-    color: '#1e1e1e',
-    borderColor: 'transparent',
+    color: '#232323',
+    borderColor: '#282828',
+  },
+
+  Table: {
+    tdColor: '#232323',
+    thColor: '#353535',
   },
 };

src/tools/Tool.ts

@@ -1,17 +0,0 @@
-import type { Component } from 'vue';
-
-export interface ITool {
-  name: string;
-  path: string;
-  description: string;
-  keywords: string[];
-  component: () => Promise<Component>;
-  icon: Component;
-  redirectFrom?: string[];
-}
-
-export interface ToolCategory {
-  name: string;
-  icon: Component;
-  components: ITool[];
-}

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

@@ -1,60 +0,0 @@
-<template>
-  <n-card title="Text to base64">
-    <n-input v-model:value="textInput" type="textarea" placeholder="Put your string here..." />
-    <n-input :value="textBase64" type="textarea" readonly />
-    <n-space justify="center">
-      <n-button secondary @click="copyTextBase64()"> Copy </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 />
-    <n-space justify="center">
-      <n-button secondary @click="copyFileBase64()"> Copy </n-button>
-    </n-space>
-  </n-card>
-</template>
-
-<script setup lang="ts">
-import { useCopy } from '@/composable/copy';
-import { useBase64 } from '@vueuse/core';
-import { Upload } from '@vicons/tabler';
-import { ref, type Ref } from 'vue';
-import type { UploadFileInfo } from 'naive-ui';
-
-const textInput = ref('');
-const { base64: textBase64 } = useBase64(textInput);
-const { copy: copyTextBase64 } = useCopy({ source: textBase64, text: 'Base64 string copied to the clipboard' });
-
-const fileList = ref();
-const fileInput = ref() as Ref<File>;
-const { base64: fileBase64 } = useBase64(fileInput);
-const { copy: copyFileBase64 } = useCopy({ source: fileBase64, text: 'Base64 string copied to the clipboard' });
-
-async function onUpload({ file: { file } }: { file: UploadFileInfo }) {
-  if (file) {
-    fileList.value = [];
-    fileInput.value = file;
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.n-input,
-.n-upload {
-  margin-bottom: 15px;
-}
-
-::v-deep(.n-upload-trigger) {
-  width: 100%;
-}
-</style>

src/tools/base64-converter/index.ts

@@ -1,12 +0,0 @@
-import { FileDigit } from '@vicons/tabler';
-import type { ITool } from './../Tool';
-
-export const tool: ITool = {
-  name: 'Base64 converter',
-  path: '/base64-converter',
-  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-converter.vue'),
-  icon: FileDigit,
-  redirectFrom: ['/file-to-base64', '/base64-string-converter'],
-};

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

@@ -0,0 +1,93 @@
+<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';
+
+const base64Input = ref('');
+const { download } = useDownloadFileFromBase64({ source: base64Input });
+const base64InputValidation = useValidation({
+  source: base64Input,
+  rules: [
+    {
+      message: 'Invalid base 64 string',
+      validator: value => isValidBase64(value.trim()),
+    },
+  ],
+});
+
+function downloadFile() {
+  if (!base64InputValidation.isValid) {
+    return;
+  }
+
+  try {
+    download();
+  }
+  catch (_) {
+    //
+  }
+}
+
+const fileList = ref();
+const fileInput = ref() as Ref<File>;
+const { base64: fileBase64 } = useBase64(fileInput);
+const { copy: copyFileBase64 } = useCopy({ source: fileBase64, text: 'Base64 string copied to the clipboard' });
+
+async function onUpload({ file: { file } }: { file: UploadFileInfo }) {
+  if (file) {
+    fileList.value = [];
+    fileInput.value = file;
+  }
+}
+</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>
+::v-deep(.n-upload-trigger) {
+  width: 100%;
+}
+</style>

src/tools/base64-file-converter/index.ts

@@ -0,0 +1,11 @@
+import { FileDigit } from '@vicons/tabler';
+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.',
+  keywords: ['base64', 'converter', 'upload', 'image', 'file', 'conversion', 'web', 'data', 'format'],
+  component: () => import('./base64-file-converter.vue'),
+  icon: FileDigit,
+});

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

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { useCopy } from '@/composable/copy';
+import { base64ToText, isValidBase64, textToBase64 } from '@/utils/base64';
+import { withDefaultOnError } from '@/utils/defaults';
+
+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 { copy: copyTextBase64 } = useCopy({ source: base64Output, text: 'Base64 string copied to the clipboard' });
+
+const base64Input = ref('');
+const textOutput = computed(() =>
+  withDefaultOnError(() => base64ToText(base64Input.value.trim(), { makeUrlSafe: decodeUrlSafe.value }), ''),
+);
+const { copy: copyText } = useCopy({ source: textOutput, text: 'String copied to the clipboard' });
+const b64ValidationRules = [
+  {
+    message: 'Invalid base64 string',
+    validator: (value: string) => isValidBase64(value.trim(), { makeUrlSafe: decodeUrlSafe.value }),
+  },
+];
+const b64ValidationWatch = [decodeUrlSafe];
+</script>
+
+<template>
+  <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>

src/tools/base64-string-converter/index.ts

@@ -0,0 +1,12 @@
+import { FileDigit } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Base64 string encoder/decoder',
+  path: '/base64-string-converter',
+  description: 'Simply encode and decode string into a their base64 representation.',
+  keywords: ['base64', 'converter', 'conversion', 'web', 'data', 'format', 'atob', 'btoa'],
+  component: () => import('./base64-string-converter.vue'),
+  icon: FileDigit,
+  redirectFrom: ['/file-to-base64', '/base64-converter'],
+});

src/tools/basic-auth-generator/basic-auth-generator.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { useCopy } from '@/composable/copy';
+import { textToBase64 } from '@/utils/base64';
+
+const username = ref('');
+const password = ref('');
+const header = computed(() => `Authorization: Basic ${textToBase64(`${username.value}:${password.value}`)}`);
+
+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;
+  font-size: 17px !important;
+  white-space: nowrap;
+}
+</style>

src/tools/basic-auth-generator/index.ts

@@ -0,0 +1,21 @@
+import { PasswordRound } from '@vicons/material';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Basic auth generator',
+  path: '/basic-auth-generator',
+  description: 'Generate a base64 basic auth header from an username and a password.',
+  keywords: [
+    'basic',
+    'auth',
+    'generator',
+    'username',
+    'password',
+    'base64',
+    'authentication',
+    'header',
+    'authorization',
+  ],
+  component: () => import('./basic-auth-generator.vue'),
+  icon: PasswordRound,
+});

src/tools/bcrypt/bcrypt.vue

@@ -1,63 +1,7 @@
-<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 { computed, ref } from 'vue';
-import { hashSync, compareSync } from 'bcryptjs';
-import { useCopy } from '@/composable/copy';
+import { compareSync, hashSync } from 'bcryptjs';
 import { useThemeVars } from 'naive-ui';
+import { useCopy } from '@/composable/copy';
 
 const themeVars = useThemeVars();
 
@@ -71,6 +15,47 @@ 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 hahs to compare..." raw-text />
+      </n-form-item>
+      <n-form-item label="Do they match ? " label-placement="left" :show-feedback="false">
+        <div class="compare-result" :class="{ positive: compareMatch }">
+          {{ compareMatch ? 'Yes' : 'No' }}
+        </div>
+      </n-form-item>
+    </n-form>
+  </c-card>
+</template>
+
 <style lang="less" scoped>
 .compare-result {
   color: v-bind('themeVars.errorColor');

src/tools/bcrypt/index.ts

@@ -1,7 +1,7 @@
 import { LockSquare } from '@vicons/tabler';
-import type { ITool } from './../Tool';
+import { defineTool } from '../tool';
 
-export const tool: ITool = {
+export const tool = defineTool({
   name: 'Bcrypt',
   path: '/bcrypt',
   description:
@@ -9,4 +9,4 @@ export const tool: ITool = {
   keywords: ['bcrypt', 'hash', 'compare', 'password', 'salt', 'round', 'storage', 'crypto'],
   component: () => import('./bcrypt.vue'),
   icon: LockSquare,
-};
+});

src/tools/benchmark-builder/benchmark-builder.models.ts

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

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

@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import { Plus, Trash } from '@vicons/tabler';
+import { useClipboard, useStorage } from '@vueuse/core';
+import _ from 'lodash';
+
+import { arrayToMarkdownTable, computeAverage, computeVariance } from './benchmark-builder.models';
+import DynamicValues from './dynamic-values.vue';
+
+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 } = useClipboard();
+
+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>

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

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

src/tools/benchmark-builder/index.ts

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

src/tools/bip39-generator/bip39-generator.vue

@@ -1,94 +1,37 @@
-<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 { ref, computed } from 'vue';
 import {
-  entropyToMnemonic,
-  englishWordList,
   chineseSimplifiedWordList,
   chineseTraditionalWordList,
   czechWordList,
+  englishWordList,
+  entropyToMnemonic,
   frenchWordList,
+  generateEntropy,
   italianWordList,
   japaneseWordList,
   koreanWordList,
+  mnemonicToEntropy,
   portugueseWordList,
   spanishWordList,
-  generateEntropy,
-  mnemonicToEntropy,
 } from '@it-tools/bip39';
 import { Copy, Refresh } from '@vicons/tabler';
+
+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,
-  French: frenchWordList,
-  Italian: italianWordList,
-  Japanese: japaneseWordList,
-  Korean: koreanWordList,
-  Portuguese: portugueseWordList,
-  Spanish: spanishWordList,
+  'Czech': czechWordList,
+  'French': frenchWordList,
+  'Italian': italianWordList,
+  'Japanese': japaneseWordList,
+  'Korean': koreanWordList,
+  'Portuguese': portugueseWordList,
+  'Spanish': spanishWordList,
 };
 
 const entropy = ref(generateEntropy());
@@ -97,20 +40,11 @@ const passphraseInput = ref('');
 const language = ref<keyof typeof languages>('English');
 const passphrase = computed({
   get() {
-    try {
-      return entropyToMnemonic(entropy.value, languages[language.value]);
-    } catch (_) {
-      return passphraseInput.value;
-    }
+    return withDefaultOnError(() => entropyToMnemonic(entropy.value, languages[language.value]), passphraseInput.value);
   },
   set(value: string) {
     passphraseInput.value = value;
-
-    try {
-      entropy.value = mnemonicToEntropy(value, languages[language.value]);
-    } catch (_) {
-      entropy.value = '';
-    }
+    entropy.value = withDefaultOnError(() => mnemonicToEntropy(value, languages[language.value]), '');
   },
 });
 
@@ -118,12 +52,12 @@ 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),
-      message: 'Entropy should an hexadecimal number',
+      validator: value => /^[a-fA-F0-9]*$/.test(value),
+      message: 'Entropy should be an hexadecimal string',
     },
   ],
 });
@@ -132,14 +66,7 @@ const mnemonicValidation = useValidation({
   source: passphrase,
   rules: [
     {
-      validator: (value) => {
-        try {
-          mnemonicToEntropy(value);
-          return true;
-        } catch (_) {
-          return false;
-        }
-      },
+      validator: value => isNotThrowing(() => mnemonicToEntropy(value, languages[language.value])),
       message: 'Invalid mnemonic',
     },
   ],
@@ -152,3 +79,53 @@ 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>

src/tools/bip39-generator/index.ts

@@ -1,11 +1,11 @@
 import { AlignJustified } from '@vicons/tabler';
-import type { ITool } from '../Tool';
+import { defineTool } from '../tool';
 
-export const tool: ITool = {
+export const tool = defineTool({
   name: 'BIP39 passphrase generator',
   path: '/bip39-generator',
   description: 'Generate BIP39 passphrase from existing or random mnemonic, or get the mnemonic from the passphrase.',
   keywords: ['BIP39', 'passphrase', 'generator', 'mnemonic', 'entropy'],
   component: () => import('./bip39-generator.vue'),
   icon: AlignJustified,
-};
+});

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

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

src/tools/camera-recorder/index.ts

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

src/tools/camera-recorder/useMediaRecorder.ts

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