chore(version): release v2023.04.13-dce9ff9

feat(cd): git version tag pushed to docker
refactor(404): simplified 404 page
2025-11-02 21:13:19 +00:00 · 2023-04-13 01:09:14 +02:00 · 2023-04-13 01:04:48 +02:00 · 2023-04-13 00:03:08 +02:00 · 2023-04-12 23:41:09 +02:00 · 2023-04-12 20:35:44 +02:00
105 changed files with 6155 additions and 2362 deletions
--- a/.eslintrc-auto-import.json
+++ b/.eslintrc-auto-import.json
@@ -0,0 +1,264 @@
+{
+  "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,
+    "createSharedComposable": 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,
+    "logicAnd": true,
+    "logicNot": true,
+    "logicOr": 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,
+    "useAsyncQueue": true,
+    "useAsyncState": true,
+    "useAttrs": true,
+    "useBase64": true,
+    "useBattery": true,
+    "useBluetooth": true,
+    "useBreakpoints": true,
+    "useBroadcastChannel": true,
+    "useBrowserLocation": true,
+    "useCached": true,
+    "useClamp": true,
+    "useClipboard": 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,
+    "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,
+    "usePermission": true,
+    "usePointer": true,
+    "usePointerSwipe": true,
+    "usePreferredColorScheme": true,
+    "usePreferredDark": true,
+    "usePreferredLanguages": 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,
+    "useSpeechRecognition": true,
+    "useSpeechSynthesis": true,
+    "useStepper": true,
+    "useStorage": true,
+    "useStorageAsync": true,
+    "useStyleTag": true,
+    "useSwipe": true,
+    "useTemplateRefsList": true,
+    "useTextSelection": true,
+    "useTextareaAutosize": true,
+    "useThrottle": true,
+    "useThrottleFn": true,
+    "useThrottledRefHistory": true,
+    "useTimeAgo": true,
+    "useTimeout": true,
+    "useTimeoutFn": true,
+    "useTimeoutPoll": true,
+    "useTimestamp": true,
+    "useTitle": 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,
+    "watchEffect": true,
+    "watchIgnorable": true,
+    "watchOnce": true,
+    "watchPausable": true,
+    "watchPostEffect": true,
+    "watchSyncEffect": true,
+    "watchThrottled": true,
+    "watchTriggerable": true,
+    "watchWithFilter": true,
+    "whenever": true
+  }
+}
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -10,6 +10,8 @@ module.exports = {
    '@vue/eslint-config-typescript/recommended',
    '@vue/eslint-config-prettier',
    'plugin:import/recommended',
+    './.eslintrc-auto-import.json',
+    '@unocss',
  ],

  settings: {
--- a/.github/ISSUE_TEMPLATE/bug-report.md
+++ b/.github/ISSUE_TEMPLATE/bug-report.md
@@ -1,17 +1,17 @@
 ---
 name: Bug report
-about: Create a report to help us improve
-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.
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ b/.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.
--- a/.github/ISSUE_TEMPLATE/new-tool-request.md
+++ b/.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
+---
+
+**Which tool is impacted?**
+Example: the token generator
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Is their example of this tool in the wild?**
+Provide link to already existing tool or npm packages if any exists
+
+**Additional context**
+Add any other context about the feature request here.
--- a/.github/ISSUE_TEMPLATE/other-request.md
+++ b/.github/ISSUE_TEMPLATE/other-request.md
@@ -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.
--- a/.github/ISSUE_TEMPLATE/tool-improvement.md
+++ b/.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.
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -1,6 +1,10 @@
 name: ci

-on: [push, pull_request]
+on:
+  pull_request:
+  push:
+    branches:
+      - main

 jobs:
  ci:
--- a/.github/workflows/docker-nightly-release.yml
+++ b/.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@v2
+      - 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@v1
+        with:
+          registry: ghcr.io
+          username: ${{ github.repository_owner }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Build and push
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          file: ./Dockerfile
+          platforms: linux/amd64,linux/arm64
+          push: true
+          tags: |
+            corentinth/it-tools:nightly
+            ghcr.io/corentinth/it-tools:nightly
--- a/.github/workflows/playwright.yml
+++ b/.github/workflows/playwright.yml
@@ -0,0 +1,23 @@
+name: E2E tests
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - run: corepack enable
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install
+      - name: Install Playwright Browsers
+        run: pnpm exec playwright install --with-deps
+      - name: Run Playwright tests
+        run: pnpm exec playwright test
--- a/.github/workflows/docker-release.yml
+++ b/.github/workflows/docker-release.yml
@@ -1,43 +1,27 @@
-name: docker-release
+name: Release new versions

 on:
  push:
-    branches:
-      - 'main'
+    tags:
+      - 'v*.*.*'

 jobs:
-  ci:
+  docker-release:
    runs-on: ubuntu-latest
-
    steps:
-      - uses: actions/checkout@v3
-      - run: corepack enable
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16
-          cache: 'pnpm'
+      - name: Get release version
+        run: echo "RELEASE_VERSION=${GITHUB_REF#refs/tags/v}" >> $GITHUB_ENV

-      - 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@v1
+        with:
+          registry: ghcr.io
+          username: ${{ github.repository_owner }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
      - name: Login to Docker Hub
        uses: docker/login-action@v2
        with:
@@ -57,4 +41,8 @@ jobs:
          file: ./Dockerfile
          platforms: linux/amd64,linux/arm64
          push: true
-          tags: corentinth/it-tools:latest
+          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}}
--- a/.gitignore
+++ b/.gitignore
@@ -27,4 +27,7 @@ coverage
 *.sln
 *.sw?

-.env
+.env
+/test-results/
+/playwright-report/
+/playwright/.cache/
--- a/5
+++ b/5
@@ -1,5 +1,5 @@
 # build stage
-FROM node:lts-alpine as build-stage
+FROM node:lts-alpine AS build-stage
 WORKDIR /app
 COPY . .
 RUN npm install -g pnpm
@@ -7,7 +7,8 @@ RUN pnpm i --frozen-lockfile
 RUN pnpm build

 # production stage
-FROM nginx:stable-alpine as production-stage
+FROM nginx:stable-alpine AS production-stage
 COPY --from=build-stage /app/dist /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/conf.d/default.conf
 EXPOSE 80
 CMD ["nginx", "-g", "daemon off;"]
--- a/README.md
+++ b/README.md
@@ -10,13 +10,25 @@ You have an idea of a tool? Submit a [feature request](https://github.com/Corent

 ## Self host

-Self host your own version of it-tools in your homelab with docker:
+Self host solutions for your homelab
+
+**From docker hub:**

 ```sh
-docker run -d -p 8080:80 --name it-tools -it corentinth/it-tools
-
+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
@@ -69,7 +81,7 @@ pnpm 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.
--- a/auto-imports.d.ts
+++ b/auto-imports.d.ts
@@ -0,0 +1,524 @@
+/* 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 createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
+  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 logicAnd: typeof import('@vueuse/core')['logicAnd']
+  const logicNot: typeof import('@vueuse/core')['logicNot']
+  const logicOr: typeof import('@vueuse/core')['logicOr']
+  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 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 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 useClamp: typeof import('@vueuse/core')['useClamp']
+  const useClipboard: typeof import('@vueuse/core')['useClipboard']
+  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 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 usePermission: typeof import('@vueuse/core')['usePermission']
+  const usePointer: typeof import('@vueuse/core')['usePointer']
+  const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe']
+  const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme']
+  const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
+  const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
+  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 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 useSwipe: typeof import('@vueuse/core')['useSwipe']
+  const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
+  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 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 watchEffect: typeof import('vue')['watchEffect']
+  const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable']
+  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 createSharedComposable: UnwrapRef<typeof import('@vueuse/core')['createSharedComposable']>
+    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 logicAnd: UnwrapRef<typeof import('@vueuse/core')['logicAnd']>
+    readonly logicNot: UnwrapRef<typeof import('@vueuse/core')['logicNot']>
+    readonly logicOr: UnwrapRef<typeof import('@vueuse/core')['logicOr']>
+    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 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 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 useClamp: UnwrapRef<typeof import('@vueuse/core')['useClamp']>
+    readonly useClipboard: UnwrapRef<typeof import('@vueuse/core')['useClipboard']>
+    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 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 usePermission: UnwrapRef<typeof import('@vueuse/core')['usePermission']>
+    readonly usePointer: UnwrapRef<typeof import('@vueuse/core')['usePointer']>
+    readonly usePointerSwipe: UnwrapRef<typeof import('@vueuse/core')['usePointerSwipe']>
+    readonly usePreferredColorScheme: UnwrapRef<typeof import('@vueuse/core')['usePreferredColorScheme']>
+    readonly usePreferredDark: UnwrapRef<typeof import('@vueuse/core')['usePreferredDark']>
+    readonly usePreferredLanguages: UnwrapRef<typeof import('@vueuse/core')['usePreferredLanguages']>
+    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 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 useSwipe: UnwrapRef<typeof import('@vueuse/core')['useSwipe']>
+    readonly useTemplateRefsList: UnwrapRef<typeof import('@vueuse/core')['useTemplateRefsList']>
+    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 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 watchEffect: UnwrapRef<typeof import('vue')['watchEffect']>
+    readonly watchIgnorable: UnwrapRef<typeof import('@vueuse/core')['watchIgnorable']>
+    readonly watchOnce: UnwrapRef<typeof import('@vueuse/core')['watchOnce']>
+    readonly watchPausable: UnwrapRef<typeof import('@vueuse/core')['watchPausable']>
+    readonly watchPostEffect: UnwrapRef<typeof import('vue')['watchPostEffect']>
+    readonly watchSyncEffect: UnwrapRef<typeof import('vue')['watchSyncEffect']>
+    readonly watchThrottled: UnwrapRef<typeof import('@vueuse/core')['watchThrottled']>
+    readonly watchTriggerable: UnwrapRef<typeof import('@vueuse/core')['watchTriggerable']>
+    readonly watchWithFilter: UnwrapRef<typeof import('@vueuse/core')['watchWithFilter']>
+    readonly whenever: UnwrapRef<typeof import('@vueuse/core')['whenever']>
+  }
+}
--- a/components.d.ts
+++ b/components.d.ts
@@ -0,0 +1,72 @@
+/* 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 {
+    CollapsibleToolMenu: typeof import('./src/components/CollapsibleToolMenu.vue')['default']
+    ColoredCard: typeof import('./src/components/ColoredCard.vue')['default']
+    FavoriteButton: typeof import('./src/components/FavoriteButton.vue')['default']
+    FormatTransformer: typeof import('./src/components/FormatTransformer.vue')['default']
+    InputCopyable: typeof import('./src/components/InputCopyable.vue')['default']
+    MenuIconItem: typeof import('./src/components/MenuIconItem.vue')['default']
+    MenuLayout: typeof import('./src/components/MenuLayout.vue')['default']
+    NAlert: typeof import('naive-ui')['NAlert']
+    NAutoComplete: typeof import('naive-ui')['NAutoComplete']
+    NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
+    NButton: typeof import('naive-ui')['NButton']
+    NCard: typeof import('naive-ui')['NCard']
+    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']
+    NResult: typeof import('naive-ui')['NResult']
+    NScrollbar: typeof import('naive-ui')['NScrollbar']
+    NSelect: typeof import('naive-ui')['NSelect']
+    NSlider: typeof import('naive-ui')['NSlider']
+    NSpace: typeof import('naive-ui')['NSpace']
+    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']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    SearchBar: typeof import('./src/components/SearchBar.vue')['default']
+    SearchBarItem: typeof import('./src/components/SearchBarItem.vue')['default']
+    TextareaCopyable: typeof import('./src/components/TextareaCopyable.vue')['default']
+    ToolCard: typeof import('./src/components/ToolCard.vue')['default']
+  }
+}
--- a/nginx.conf
+++ b/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;
+    }
+}
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "it-tools",
-  "version": "2.19.0",
+  "version": "2023.4.13-dce9ff9",
  "description": "Collection of handy online tools for developers, with great UX. ",
  "keywords": [
    "productivity",
@@ -25,9 +25,11 @@
    "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",
+    "script:create-new-tool": "node scripts/create-tool.mjs",
    "release": "standard-version"
  },
  "dependencies": {
@@ -45,8 +47,9 @@
    "bcryptjs": "^2.4.3",
    "change-case": "^4.1.2",
    "colord": "^2.9.3",
+    "composerize-ts": "^0.6.2",
    "cron-validator": "^1.3.1",
-    "cronstrue": "^2.23.0",
+    "cronstrue": "^2.26.0",
    "crypto-js": "^4.1.1",
    "date-fns": "^2.29.3",
    "figue": "^1.2.0",
@@ -58,49 +61,60 @@
    "mathjs": "^10.6.4",
    "mime-types": "^2.1.35",
    "naive-ui": "^2.34.3",
+    "netmask": "^2.0.2",
    "node-forge": "^1.3.1",
-    "pinia": "^2.0.33",
+    "oui": "^12.0.52",
+    "pinia": "^2.0.34",
    "plausible-tracker": "^0.3.8",
    "qrcode": "^1.5.1",
    "randombytes": "^2.1.0",
    "sql-formatter": "^8.2.0",
-    "ts-pattern": "^4.2.1",
+    "ts-pattern": "^4.2.2",
+    "ua-parser-js": "^1.0.35",
    "uuid": "^8.3.2",
    "vue": "^3.2.47",
-    "vue-router": "^4.1.6"
+    "vue-router": "^4.1.6",
+    "yaml": "^2.2.1"
  },
  "devDependencies": {
+    "@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.15",
-    "@types/lodash": "^4.14.191",
+    "@types/lodash": "^4.14.192",
    "@types/mime-types": "^2.1.1",
-    "@types/node": "^16.18.16",
-    "@types/node-forge": "^1.3.1",
+    "@types/netmask": "^2.0.0",
+    "@types/node": "^16.18.23",
+    "@types/node-forge": "^1.3.2",
    "@types/prettier": "^2.7.2",
    "@types/qrcode": "^1.5.0",
    "@types/randombytes": "^2.0.0",
+    "@types/ua-parser-js": "^0.7.36",
    "@types/uuid": "^8.3.4",
-    "@typescript-eslint/parser": "^5.55.0",
+    "@typescript-eslint/parser": "^5.58.0",
+    "@unocss/eslint-config": "^0.50.8",
    "@vitejs/plugin-vue": "^2.3.4",
    "@vitejs/plugin-vue-jsx": "^1.3.10",
    "@vue/eslint-config-prettier": "^7.1.0",
    "@vue/eslint-config-typescript": "^10.0.0",
-    "@vue/test-utils": "^2.3.1",
+    "@vue/test-utils": "^2.3.2",
    "@vue/tsconfig": "^0.1.3",
    "c8": "^7.13.0",
-    "eslint": "^8.36.0",
-    "eslint-config-prettier": "^8.7.0",
-    "eslint-import-resolver-typescript": "^3.5.3",
+    "eslint": "^8.38.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-import-resolver-typescript": "^3.5.5",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-vue": "^8.7.1",
    "jsdom": "^19.0.0",
    "less": "^4.1.3",
-    "prettier": "^2.8.4",
+    "prettier": "^2.8.7",
    "standard-version": "^9.5.0",
    "start-server-and-test": "^1.15.4",
    "typescript": "~4.5.5",
+    "unocss": "^0.50.8",
+    "unplugin-auto-import": "^0.15.2",
+    "unplugin-vue-components": "^0.24.1",
    "vite": "^2.9.15",
    "vite-plugin-md": "^0.12.4",
    "vite-plugin-pwa": "^0.11.13",
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -0,0 +1,82 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * 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: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 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: 'http://127.0.0.1:3000',
+
+    /* 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'] },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ..devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'npm run dev',
+    url: 'http://127.0.0.1:3000',
+    reuseExistingServer: !process.env.CI,
+  },
+});
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/scripts/create-tool.mjs
+++ b/scripts/create-tool.mjs
@@ -5,6 +5,7 @@ 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) {
@@ -55,6 +56,7 @@ export const tool = defineTool({
  keywords: ['${toolName.split('-').join("', '")}'],
  component: () => import('./${toolName}.vue'),
  icon: ArrowsShuffle,
+  createdAt: new Date('${new Date().toISOString().split('T')[0]}'),
 });
 `,
 );
@@ -72,6 +74,28 @@ import { expect, describe, it } from 'vitest';
 `,
 );

+createToolFile(
+  `${toolName}.e2e.spec.ts`,
+  `
+import { test, expect } from '@playwright/test';
+
+test.describe('Tool - ${toolNameTitleCase}', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/${toolName}');
+  });
+
+  test('Has correct title', async ({ page }) => {
+    await expect(page).toHaveTitle('${toolNameTitleCase} - IT Tools');
+  });
+
+  test('', async ({ page }) => {
+
+  });
+});
+  
+`,
+);
+
 const toolsIndex = join(toolsDir, 'index.ts');
 const indexContent = await readFile(toolsIndex, { encoding: 'utf-8' }).then((r) => r.split('\n'));

--- a/src/components/CollapsibleToolMenu.vue
+++ b/src/components/CollapsibleToolMenu.vue
@@ -0,0 +1,134 @@
+<template>
+  <div v-for="{ name, tools, isCollapsed } of menuOptions" :key="name">
+    <n-text tag="div" depth="3" class="category-name" @click="toggleCategoryCollapse({ name })">
+      <n-icon :component="ChevronRight" :class="{ rotated: isCollapsed }" size="16" />
+
+      <span>
+        {{ name }}
+      </span>
+    </n-text>
+
+    <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>
+
+<script setup lang="ts">
+import type { Tool, ToolCategory } from '@/tools/tools.types';
+import { ChevronRight } from '@vicons/tabler';
+import { useStorage } from '@vueuse/core';
+import { useThemeVars } from 'naive-ui';
+import { toRefs, computed, h } from 'vue';
+import { RouterLink, useRoute } from 'vue-router';
+import MenuIconItem from './MenuIconItem.vue';
+
+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: name,
+    isCollapsed: collapsedCategories.value[name],
+    tools: components.map((tool) => ({
+      label: makeLabel(tool),
+      icon: makeIcon(tool),
+      key: tool.name,
+    })),
+  })),
+);
+
+const themeVars = useThemeVars();
+</script>
+
+<style scoped lang="less">
+.category-name {
+  font-size: 0.93em;
+  padding: 12px 0 0px 0;
+  cursor: pointer;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  .n-icon {
+    transition: transform ease 0.5s;
+    transform: rotate(90deg);
+    margin: 0 10px 0 7px;
+    opacity: 0.5;
+
+    &.rotated {
+      transform: rotate(0deg);
+    }
+  }
+}
+
+.menu-wrapper {
+  display: flex;
+  flex-direction: row;
+  .menu {
+    flex: 1;
+    margin-bottom: 5px;
+
+    ::v-deep(.n-menu-item-content::before) {
+      left: 0;
+      right: 13px;
+    }
+  }
+
+  .toggle-bar {
+    width: 24px;
+    opacity: 0.1;
+    transition: opacity ease 0.2s;
+    position: relative;
+    cursor: pointer;
+
+    &::before {
+      width: 2px;
+      height: 100%;
+      content: ' ';
+      background-color: v-bind('themeVars.textColor3');
+      border-radius: 2px;
+      position: absolute;
+      top: 0;
+      left: 14px;
+    }
+
+    &:hover {
+      opacity: 0.5;
+    }
+  }
+}
+</style>
--- a/src/components/FormatTransformer.vue
+++ b/src/components/FormatTransformer.vue
@@ -0,0 +1,57 @@
+<template>
+  <n-form-item :label="inputLabel" v-bind="validationAttrs">
+    <n-input
+      ref="inputElement"
+      v-model:value="input"
+      :placeholder="inputPlaceholder"
+      type="textarea"
+      rows="20"
+      autocomplete="off"
+      autocorrect="off"
+      autocapitalize="off"
+      spellcheck="false"
+      :input-props="{ 'data-test-id': 'input' }"
+    />
+  </n-form-item>
+  <n-form-item :label="outputLabel">
+    <textarea-copyable :value="output" :language="outputLanguage" :follow-height-of="inputElement" />
+  </n-form-item>
+</template>
+
+<script setup lang="ts">
+import { useValidation, type UseValidationRule } from '@/composable/validation';
+import _ from 'lodash';
+
+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();
+
+const input = ref(inputDefault.value);
+const output = computed(() => transformer.value(input.value));
+
+const { attrs: validationAttrs } = useValidation({ source: input, rules: inputValidationRules.value });
+</script>
+
+<style scoped></style>
--- a/src/components/TextareaCopyable.vue
+++ b/src/components/TextareaCopyable.vue
@@ -7,13 +7,13 @@
        :style="height ? `min-height: ${height - 40 /* card padding */ + 10 /* negative margin compensation */}px` : ''"
      >
        <n-config-provider :hljs="hljs">
-          <n-code :code="value" :language="language" :trim="false" />
+          <n-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]">
-            <n-button secondary circle size="large" @click="onCopyClicked">
+            <n-button circle secondary size="large" @click="onCopyClicked">
              <n-icon size="22" :component="Copy" />
            </n-button>
          </div>
@@ -21,7 +21,7 @@
        <span>{{ tooltipText }}</span>
      </n-tooltip>
    </n-card>
-    <n-space v-if="copyPlacement === 'outside'" justify="center" style="margin-top: 15px">
+    <n-space v-if="copyPlacement === 'outside'" justify="center" mt-4>
      <n-button secondary @click="onCopyClicked"> {{ tooltipText }} </n-button>
    </n-space>
  </div>
@@ -34,11 +34,13 @@ import hljs from 'highlight.js/lib/core';
 import jsonHljs from 'highlight.js/lib/languages/json';
 import sqlHljs from 'highlight.js/lib/languages/sql';
 import xmlHljs from 'highlight.js/lib/languages/xml';
+import yamlHljs from 'highlight.js/lib/languages/yaml';
 import { ref, toRefs } from 'vue';

 hljs.registerLanguage('sql', sqlHljs);
 hljs.registerLanguage('json', jsonHljs);
 hljs.registerLanguage('html', xmlHljs);
+hljs.registerLanguage('yaml', yamlHljs);

 const props = withDefaults(
  defineProps<{
--- a/src/composable/computedRefreshable.ts
+++ b/src/composable/computedRefreshable.ts
@@ -0,0 +1,46 @@
+import { computedAsync, watchThrottled } from '@vueuse/core';
+import { computed, ref, watch } from 'vue';
+
+export { computedRefreshable, computedRefreshableAsync };
+
+function computedRefreshable<T>(getter: () => T, { throttle }: { throttle?: number } = {}) {
+  const dirty = ref(true);
+  let value: T;
+
+  const update = () => (dirty.value = true);
+
+  if (throttle) {
+    watchThrottled(getter, update, { throttle });
+  } else {
+    watch(getter, update);
+  }
+
+  const computedValue = computed(() => {
+    if (dirty.value) {
+      value = getter();
+      dirty.value = false;
+    }
+    return value;
+  });
+
+  return [computedValue, update] as const;
+}
+
+function computedRefreshableAsync<T>(getter: () => Promise<T>, defaultValue?: T) {
+  const dirty = ref(true);
+  let value: T;
+
+  const update = () => (dirty.value = true);
+
+  watch(getter, update);
+
+  const computedValue = computedAsync(async () => {
+    if (dirty.value) {
+      value = await getter();
+      dirty.value = false;
+    }
+    return value;
+  }, defaultValue);
+
+  return [computedValue, update] as const;
+}
--- a/src/composable/validation.ts
+++ b/src/composable/validation.ts
@@ -3,7 +3,7 @@ import { reactive, watch, type Ref } from 'vue';

 type ValidatorReturnType = unknown;

-interface UseValidationRule<T> {
+export interface UseValidationRule<T> {
  validator: (value: T) => ValidatorReturnType;
  message: string;
 }
@@ -20,12 +20,20 @@ export function isFalsyOrHasThrown(cb: () => ValidatorReturnType): boolean {
  }
 }

-type ValidationAttrs = {
+export type ValidationAttrs = {
  feedback: string;
  validationStatus: string | undefined;
 };

-export function useValidation<T>({ source, rules }: { source: Ref<T>; rules: UseValidationRule<T>[] }) {
+export function useValidation<T>({
+  source,
+  rules,
+  watch: watchRefs = [],
+}: {
+  source: Ref<T>;
+  rules: UseValidationRule<T>[];
+  watch?: Ref<unknown>[];
+}) {
  const state = reactive<{
    message: string;
    status: undefined | 'error';
@@ -42,7 +50,7 @@ export function useValidation<T>({ source, rules }: { source: Ref<T>; rules: Use
  });

  watch(
-    [source],
+    [source, ...watchRefs],
    () => {
      state.message = '';
      state.status = undefined;
--- a/src/config.ts
+++ b/src/config.ts
@@ -29,6 +29,12 @@ export const config = figue({
    },
  },
  plausible: {
+    isTrackerEnabled: {
+      doc: 'Is the tracker enabled',
+      format: 'boolean',
+      default: false,
+      env: 'VITE_TRACKER_ENABLED',
+    },
    domain: {
      doc: 'Plausible current domain',
      format: 'string',
@@ -47,13 +53,11 @@ export const config = figue({
      default: false,
    },
  },
-  tools: {
-    newTools: {
-      doc: 'Tool names for tools flagged a as new',
-      format: 'array',
-      default: [],
-      env: 'VITE_NEW_TOOLS',
-    },
+  showBanner: {
+    doc: 'Show the banner',
+    format: 'boolean',
+    default: false,
+    env: 'VITE_SHOW_BANNER',
  },
 })
  .loadEnv({
--- a/src/layouts/base.layout.vue
+++ b/src/layouts/base.layout.vue
@@ -1,50 +1,33 @@
 <script lang="ts" setup>
-import { NIcon, useThemeVars, type MenuGroupOption } from 'naive-ui';
-import { computed, h } from 'vue';
-import { RouterLink, useRoute } from 'vue-router';
+import { NIcon, useThemeVars } from 'naive-ui';
+import { computed } from 'vue';
+import { RouterLink } from 'vue-router';
 import { Heart, Menu2, Home2 } from '@vicons/tabler';
 import { toolsByCategory } from '@/tools';
 import { useStyleStore } from '@/stores/style.store';
 import { config } from '@/config';
-import MenuIconItem from '@/components/MenuIconItem.vue';
-import type { Tool } from '@/tools/tools.types';
+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';
 import SearchBar from '../components/SearchBar.vue';
 import HeroGradient from '../assets/hero-gradient.svg?component';
 import MenuLayout from '../components/MenuLayout.vue';
 import NavbarButtons from '../components/NavbarButtons.vue';

 const themeVars = useThemeVars();
-const route = useRoute();
 const styleStore = useStyleStore();
 const version = config.app.version;
 const commitSha = config.app.lastCommitSha.slice(0, 7);

-const makeLabel = (tool: Tool) => () => h(RouterLink, { to: tool.path }, { default: () => tool.name });
-const makeIcon = (tool: Tool) => () => h(MenuIconItem, { tool });
-
 const { tracker } = useTracker();

 const toolStore = useToolStore();

-const menuOptions = computed<MenuGroupOption[]>(() =>
-  [
-    ...(toolStore.favoriteTools.length > 0
-      ? [{ name: 'Your favorite tools', components: toolStore.favoriteTools }]
-      : []),
-    ...toolsByCategory,
-  ].map((category) => ({
-    label: category.name,
-    key: category.name,
-    type: 'group',
-    children: category.components.map((tool) => ({
-      label: makeLabel(tool),
-      icon: makeIcon(tool),
-      key: tool.name,
-    })),
-  })),
-);
+const tools = computed<ToolCategory[]>(() => [
+  ...(toolStore.favoriteTools.length > 0 ? [{ name: 'Your favorite tools', components: toolStore.favoriteTools }] : []),
+  ...toolsByCategory,
+]);
 </script>

 <template>
@@ -64,14 +47,7 @@ const menuOptions = computed<MenuGroupOption[]>(() =>
          <navbar-buttons />
        </n-space>

-        <n-menu
-          class="menu"
-          :value="(route.name as string)"
-          :collapsed-width="64"
-          :collapsed-icon-size="22"
-          :options="menuOptions"
-          :indent="20"
-        />
+        <collapsible-tool-menu :tools-by-category="tools" />

        <div class="footer">
          <div>
@@ -163,7 +139,7 @@ const menuOptions = computed<MenuGroupOption[]>(() =>
              @click="() => tracker.trackEvent({ eventName: 'Support button clicked' })"
            >
              Buy me a coffee
-              <n-icon v-if="!styleStore.isSmallScreen" :component="Heart" style="margin-left: 5px" />
+              <n-icon v-if="!styleStore.isSmallScreen" :component="Heart" ml-2 />
            </n-button>
          </template>
          ❤ Support IT Tools development !
--- a/src/main.ts
+++ b/src/main.ts
@@ -5,6 +5,8 @@ import { createHead } from '@vueuse/head';
 import { registerSW } from 'virtual:pwa-register';
 import { plausible } from './plugins/plausible.plugin';

+import 'virtual:uno.css';
+
 registerSW();

 import { naive } from './plugins/naive.plugin';
--- a/src/pages/404.page.vue
+++ b/src/pages/404.page.vue
@@ -1,23 +1,20 @@
 <script setup lang="ts">
+import { Coffee } from '@vicons/tabler';
 import { useHead } from '@vueuse/head';

 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 exist">
-      <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>
+    <n-icon :component="Coffee" size="100" depth="3" />
+
+    <n-h1 m-0 mt-3>404 Not Found</n-h1>
+    <n-text mt-4 block depth="3">Sorry, this page does not seem to exist</n-text>
+    <n-text mb-8 block depth="3">Maybe the cache is doing tricky things, try force-refreshing?</n-text>
+
+    <router-link to="/" #="{ navigate, href }" custom>
+      <n-button tag="a" :href="href" secondary @click="navigate"> Back home </n-button>
+    </router-link>
  </div>
 </template>
-
-<style scoped>
-.e404-wrapper {
-  padding-top: 150px;
-}
-</style>
--- a/src/pages/Home.page.vue
+++ b/src/pages/Home.page.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { config } from '@/config';
 import { useToolStore } from '@/tools/tools.store';
 import { Heart } from '@vicons/tabler';
 import { useHead } from '@vueuse/head';
@@ -13,7 +14,7 @@ useHead({ title: 'IT Tools - Handy online tools for developers' });
 <template>
  <div class="home-page">
    <div class="grid-wrapper">
-      <n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
+      <n-grid v-if="config.showBanner" x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
        <n-gi>
          <colored-card title="You like it-tools?" :icon="Heart">
            Give us a star on
--- a/src/plugins/naive.plugin.ts
+++ b/src/plugins/naive.plugin.ts
@@ -1,118 +1,3 @@
-import {
-  create,
-  NAlert,
-  NAutoComplete,
-  NButton,
-  NCard,
-  NCode,
-  NCollapse,
-  NCollapseItem,
-  NCollapseTransition,
-  NColorPicker,
-  NConfigProvider,
-  NDatePicker,
-  NDivider,
-  NDropdown,
-  NDynamicInput,
-  NEllipsis,
-  NEmpty,
-  NForm,
-  NFormItem,
-  NGradientText,
-  NGrid,
-  NGridItem,
-  NH1,
-  NH2,
-  NH3,
-  NIcon,
-  NImage,
-  NInput,
-  NInputGroup,
-  NInputGroupLabel,
-  NInputNumber,
-  NLayout,
-  NLayoutSider,
-  NMenu,
-  NMessageProvider,
-  NModal,
-  NP,
-  NPageHeader,
-  NPopconfirm,
-  NProgress,
-  NResult,
-  NScrollbar,
-  NSelect,
-  NSlider,
-  NSpace,
-  NStatistic,
-  NSwitch,
-  NTable,
-  NTag,
-  NText,
-  NTimePicker,
-  NTooltip,
-  NUpload,
-  NUploadDragger,
-  NPopover,
-  NCheckbox,
-} from 'naive-ui';
+import { create } from 'naive-ui';

-const components = [
-  NCheckbox,
-  NDynamicInput,
-  NDatePicker,
-  NCode,
-  NGradientText,
-  NScrollbar,
-  NImage,
-  NUploadDragger,
-  NTable,
-  NStatistic,
-  NDivider,
-  NInputGroup,
-  NInputGroupLabel,
-  NTag,
-  NResult,
-  NEllipsis,
-  NPageHeader,
-  NMessageProvider,
-  NLayout,
-  NLayoutSider,
-  NMenu,
-  NDropdown,
-  NH2,
-  NH3,
-  NP,
-  NAlert,
-  NTooltip,
-  NModal,
-  NEmpty,
-  NUpload,
-  NSelect,
-  NAutoComplete,
-  NProgress,
-  NCollapse,
-  NCollapseItem,
-  NSlider,
-  NPopconfirm,
-  NGrid,
-  NGridItem,
-  NButton,
-  NConfigProvider,
-  NCard,
-  NInput,
-  NColorPicker,
-  NInputNumber,
-  NSpace,
-  NH1,
-  NForm,
-  NFormItem,
-  NTimePicker,
-  NText,
-  NIcon,
-  NSwitch,
-  NCollapseTransition,
-  NPopover,
-];
-
-export const naive = create({ components });
+export const naive = create();
--- a/src/plugins/plausible.plugin.ts
+++ b/src/plugins/plausible.plugin.ts
@@ -1,11 +1,36 @@
 import { config } from '@/config';
+import { noop } from 'lodash';

 import Plausible from 'plausible-tracker';
 import type { App } from 'vue';

+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(config.plausible);
+    const plausible = createPlausibleInstance({ config: config.plausible });
    plausible.enableAutoPageviews();

    app.provide('plausible', plausible);
--- a/src/tools/base64-file-converter/base64-file-converter.vue
+++ b/src/tools/base64-file-converter/base64-file-converter.vue
@@ -17,7 +17,7 @@
  <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">
+        <div mb-2>
          <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>
--- a/src/tools/bcrypt/bcrypt.vue
+++ b/src/tools/bcrypt/bcrypt.vue
@@ -12,7 +12,7 @@
        />
      </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-input-number v-model:value="saltCount" placeholder="Salt rounds..." :max="10" :min="0" w-full />
      </n-form-item>
      <n-input :value="hashed" readonly style="text-align: center" />
    </n-form>
--- a/src/tools/benchmark-builder/benchmark-builder.models.ts
+++ b/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) => Math.pow(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}`;
+}
--- a/src/tools/benchmark-builder/benchmark-builder.vue
+++ b/src/tools/benchmark-builder/benchmark-builder.vue
@@ -0,0 +1,162 @@
+<template>
+  <n-scrollbar style="flex: 1" x-scrollable>
+    <n-space :wrap="false" style="flex: 1" justify="center" :size="0">
+      <div v-for="(suite, index) of suites" :key="index">
+        <n-card style="width: 292px; margin: 0 8px 5px">
+          <n-form-item label="Suite name:" :show-feedback="false" label-placement="left">
+            <n-input v-model:value="suite.title" placeholder="Suite name..." />
+          </n-form-item>
+
+          <n-divider></n-divider>
+          <n-form-item label="Suite values" :show-feedback="false">
+            <dynamic-values v-model:values="suite.data" />
+          </n-form-item>
+        </n-card>
+
+        <n-space justify="center">
+          <n-button v-if="suites.length > 1" quaternary @click="suites.splice(index, 1)">
+            <template #icon>
+              <n-icon :component="Trash" depth="3" />
+            </template>
+            Delete suite
+          </n-button>
+          <n-button quaternary @click="suites.splice(index + 1, 0, { data: [0], title: `Suite ${suites.length + 1}` })">
+            <template #icon>
+              <n-icon :component="Plus" depth="3" />
+            </template>
+            Add suite
+          </n-button>
+        </n-space>
+      </div>
+    </n-space>
+    <br />
+  </n-scrollbar>
+
+  <div style="flex: 0 0 100%">
+    <div style="max-width: 600px; margin: 0 auto">
+      <n-space justify="center">
+        <n-form-item label="Unit:" label-placement="left">
+          <n-input v-model:value="unit" placeholder="Unit (eg: ms)" />
+        </n-form-item>
+
+        <n-button
+          tertiary
+          @click="
+            suites = [
+              { title: 'Suite 1', data: [] },
+              { title: 'Suite 2', data: [] },
+            ]
+          "
+          >Reset suites</n-button
+        >
+      </n-space>
+
+      <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>
+      <br />
+      <n-space justify="center">
+        <n-button tertiary @click="copyAsMarkdown">Copy as markdown table</n-button>
+        <n-button tertiary @click="copyAsBulletList">Copy as bullet list</n-button>
+      </n-space>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Trash, Plus } from '@vicons/tabler';
+import { useClipboard, useStorage } from '@vueuse/core';
+import _ from 'lodash';
+import { computed } from 'vue';
+import { computeAverage, computeVariance, arrayToMarkdownTable } 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>
+
+<style lang="less" scoped></style>
--- a/src/tools/benchmark-builder/dynamic-values.vue
+++ b/src/tools/benchmark-builder/dynamic-values.vue
@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <n-space v-for="(value, index) of values" :key="index" :wrap="false" style="margin-bottom: 5px" :size="5">
+      <n-input-number
+        :ref="refs.set"
+        v-model:value="values[index]"
+        :show-button="false"
+        placeholder="Set your measure..."
+        autofocus
+        @keydown.enter="onInputEnter(index)"
+      />
+      <n-tooltip>
+        <template #trigger>
+          <n-button circle quaternary @click="values.splice(index, 1)">
+            <template #icon>
+              <n-icon :component="Trash" depth="3" />
+            </template>
+          </n-button>
+        </template>
+        Delete value
+      </n-tooltip>
+    </n-space>
+
+    <n-button tertiary @click="addValue">
+      <template #icon>
+        <n-icon :component="Plus" />
+      </template>
+      Add a measure
+    </n-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Trash, Plus } from '@vicons/tabler';
+import { useTemplateRefsList, useVModel } from '@vueuse/core';
+import { NInputNumber } from 'naive-ui';
+import { nextTick } from 'vue';
+
+const refs = useTemplateRefsList<typeof NInputNumber>();
+
+const props = defineProps<{ values: (number | null)[] }>();
+const emit = defineEmits(['update:values']);
+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>
+
+<style scoped></style>
--- a/src/tools/benchmark-builder/index.ts
+++ b/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'),
+});
--- a/src/tools/chmod-calculator/chmod-calculator.vue
+++ b/src/tools/chmod-calculator/chmod-calculator.vue
@@ -24,7 +24,7 @@
      {{ octal }}
    </div>

-    <input-copyable :value="`chmod ${octal} path`" readonly style="margin-bottom: 5px" />
+    <input-copyable :value="`chmod ${octal} path`" readonly />
  </div>
 </template>

--- a/src/tools/date-time-converter/date-time-converter.e2e.spec.ts
+++ b/src/tools/date-time-converter/date-time-converter.e2e.spec.ts
@@ -0,0 +1,33 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Date time converter - json to yaml', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/date-converter');
+  });
+
+  test('Has correct title', async ({ page }) => {
+    await expect(page).toHaveTitle('Date-time converter - IT Tools');
+  });
+
+  test('Format is auto detected from a date and the date is correctly converted', async ({ page }) => {
+    const initialFormat = await page.getByTestId('date-time-converter-format-select').innerText();
+    expect(initialFormat.trim()).toEqual('Timestamp');
+
+    await page.getByTestId('date-time-converter-input').fill('2023-04-12T23:10:24+02:00');
+
+    const detectedFormat = await page.getByTestId('date-time-converter-format-select').innerText();
+    expect(detectedFormat.trim()).toEqual('ISO 8601');
+
+    expect((await page.getByTestId('JS locale date string').inputValue()).trim()).toEqual(
+      'Wed Apr 12 2023 23:10:24 GMT+0200 (Central European Summer Time)',
+    );
+    expect((await page.getByTestId('ISO 8601').inputValue()).trim()).toEqual('2023-04-12T23:10:24+02:00');
+    expect((await page.getByTestId('ISO 9075').inputValue()).trim()).toEqual('2023-04-12 23:10:24');
+    expect((await page.getByTestId('Unix timestamp').inputValue()).trim()).toEqual('1681333824');
+    expect((await page.getByTestId('RFC 7231').inputValue()).trim()).toEqual('Wed, 12 Apr 2023 21:10:24 GMT');
+    expect((await page.getByTestId('RFC 3339').inputValue()).trim()).toEqual('2023-04-12T23:10:24+02:00');
+    expect((await page.getByTestId('Timestamp').inputValue()).trim()).toEqual('1681333824000');
+    expect((await page.getByTestId('UTC format').inputValue()).trim()).toEqual('Wed, 12 Apr 2023 21:10:24 GMT');
+    expect((await page.getByTestId('Mongo ObjectID').inputValue()).trim()).toEqual('64371e400000000000000000');
+  });
+});
--- a/src/tools/date-time-converter/date-time-converter.models.test.ts
+++ b/src/tools/date-time-converter/date-time-converter.models.test.ts
@@ -0,0 +1,142 @@
+import { describe, test, expect } from 'vitest';
+import {
+  isISO8601DateTimeString,
+  isISO9075DateString,
+  isRFC3339DateString,
+  isRFC7231DateString,
+  isUnixTimestamp,
+  isTimestamp,
+  isUTCDateString,
+  isMongoObjectId,
+} from './date-time-converter.models';
+
+describe('date-time-converter models', () => {
+  describe('isISO8601DateTimeString', () => {
+    test('should return true for valid ISO 8601 date strings', () => {
+      expect(isISO8601DateTimeString('2021-01-01T00:00:00.000Z')).toBe(true);
+      expect(isISO8601DateTimeString('2023-04-12T14:56:00+01:00')).toBe(true);
+      expect(isISO8601DateTimeString('20230412T145600+0100')).toBe(true);
+      expect(isISO8601DateTimeString('20230412T145600Z')).toBe(true);
+      expect(isISO8601DateTimeString('2016-02-01')).toBe(true);
+      expect(isISO8601DateTimeString('2016')).toBe(true);
+    });
+
+    test('should return false for invalid ISO 8601 date strings', () => {
+      expect(isISO8601DateTimeString()).toBe(false);
+      expect(isISO8601DateTimeString('')).toBe(false);
+      expect(isISO8601DateTimeString('qsdqsd')).toBe(false);
+      expect(isISO8601DateTimeString('2016-02-01-')).toBe(false);
+      expect(isISO8601DateTimeString('2021-01-01T00:00:00.')).toBe(false);
+    });
+  });
+
+  describe('isISO9075DateString', () => {
+    test('should return true for valid ISO 9075 date strings', () => {
+      expect(isISO9075DateString('2022-01-01 12:00:00Z')).toBe(true);
+      expect(isISO9075DateString('2022-01-01 12:00:00.123456Z')).toBe(true);
+      expect(isISO9075DateString('2022-01-01 12:00:00+01:00')).toBe(true);
+      expect(isISO9075DateString('2022-01-01 12:00:00-05:00')).toBe(true);
+    });
+
+    test('should return false for invalid ISO 9075 date strings', () => {
+      expect(isISO9075DateString('2022/01/01T12:00:00Z')).toBe(false);
+      expect(isISO9075DateString('2022-01-01 12:00:00.123456789Z')).toBe(false);
+      expect(isISO9075DateString('2022-01-01 12:00:00+1:00')).toBe(false);
+      expect(isISO9075DateString('2022-01-01 12:00:00-05:')).toBe(false);
+      expect(isISO9075DateString('2022-01-01 12:00:00-05:00:00')).toBe(false);
+      expect(isISO9075DateString('2022-01-01')).toBe(false);
+      expect(isISO9075DateString('12:00:00Z')).toBe(false);
+      expect(isISO9075DateString('2022-01-01T12:00:00Zfoo')).toBe(false);
+    });
+  });
+
+  describe('isRFC3339DateString', () => {
+    test('should return true for valid RFC 3339 date strings', () => {
+      expect(isRFC3339DateString('2022-01-01T12:00:00Z')).toBe(true);
+      expect(isRFC3339DateString('2022-01-01T12:00:00.123456789Z')).toBe(true);
+      expect(isRFC3339DateString('2022-01-01T12:00:00.123456789+01:00')).toBe(true);
+      expect(isRFC3339DateString('2022-01-01T12:00:00-05:00')).toBe(true);
+    });
+
+    test('should return false for invalid RFC 3339 date strings', () => {
+      expect(isRFC3339DateString('2022/01/01T12:00:00Z')).toBe(false);
+      expect(isRFC3339DateString('2022-01-01T12:00:00.123456789+1:00')).toBe(false);
+      expect(isRFC3339DateString('2022-01-01T12:00:00-05:')).toBe(false);
+      expect(isRFC3339DateString('2022-01-01T12:00:00-05:00:00')).toBe(false);
+      expect(isRFC3339DateString('2022-01-01')).toBe(false);
+      expect(isRFC3339DateString('12:00:00Z')).toBe(false);
+      expect(isRFC3339DateString('2022-01-01T12:00:00Zfoo')).toBe(false);
+    });
+  });
+
+  describe('isRFC7231DateString', () => {
+    test('should return true for valid RFC 7231 date strings', () => {
+      expect(isRFC7231DateString('Sun, 06 Nov 1994 08:49:37 GMT')).toBe(true);
+      expect(isRFC7231DateString('Tue, 22 Apr 2014 07:00:00 GMT')).toBe(true);
+    });
+
+    test('should return false for invalid RFC 7231 date strings', () => {
+      expect(isRFC7231DateString('06 Nov 1994 08:49:37 GMT')).toBe(false);
+      expect(isRFC7231DateString('Sun, 06 Nov 94 08:49:37 GMT')).toBe(false);
+      expect(isRFC7231DateString('Sun, 06 Nov 1994 8:49:37 GMT')).toBe(false);
+      expect(isRFC7231DateString('Sun, 06 Nov 1994 08:49:37 GMT-0500')).toBe(false);
+      expect(isRFC7231DateString('Sun, 06 November 1994 08:49:37 GMT')).toBe(false);
+      expect(isRFC7231DateString('Sunday, 06 Nov 1994 08:49:37 GMT')).toBe(false);
+      expect(isRFC7231DateString('06 Nov 1994')).toBe(false);
+    });
+  });
+
+  describe('isUnixTimestamp', () => {
+    test('should return true for valid Unix timestamps', () => {
+      expect(isUnixTimestamp('1649789394')).toBe(true);
+      expect(isUnixTimestamp('1234567890')).toBe(true);
+      expect(isUnixTimestamp('0')).toBe(true);
+    });
+
+    test('should return false for invalid Unix timestamps', () => {
+      expect(isUnixTimestamp('foo')).toBe(false);
+      expect(isUnixTimestamp('')).toBe(false);
+    });
+  });
+
+  describe('isTimestamp', () => {
+    test('should return true for valid Unix timestamps in milliseconds', () => {
+      expect(isTimestamp('1649792026123')).toBe(true);
+      expect(isTimestamp('1234567890000')).toBe(true);
+      expect(isTimestamp('0')).toBe(true);
+    });
+
+    test('should return false for invalid Unix timestamps in milliseconds', () => {
+      expect(isTimestamp('foo')).toBe(false);
+      expect(isTimestamp('')).toBe(false);
+    });
+  });
+
+  describe('isUTCDateString', () => {
+    test('should return true for valid UTC date strings', () => {
+      expect(isUTCDateString('Sun, 06 Nov 1994 08:49:37 GMT')).toBe(true);
+      expect(isUTCDateString('Tue, 22 Apr 2014 07:00:00 GMT')).toBe(true);
+    });
+
+    test('should return false for invalid UTC date strings', () => {
+      expect(isUTCDateString('06 Nov 1994 08:49:37 GMT')).toBe(false);
+      expect(isUTCDateString('16497920261')).toBe(false);
+      expect(isUTCDateString('foo')).toBe(false);
+      expect(isUTCDateString('')).toBe(false);
+    });
+  });
+
+  describe('isMongoObjectId', () => {
+    test('should return true for valid Mongo ObjectIds', () => {
+      expect(isMongoObjectId('507f1f77bcf86cd799439011')).toBe(true);
+      expect(isMongoObjectId('507f1f77bcf86cd799439012')).toBe(true);
+    });
+
+    test('should return false for invalid Mongo ObjectIds', () => {
+      expect(isMongoObjectId('507f1f77bcf86cd79943901')).toBe(false);
+      expect(isMongoObjectId('507f1f77bcf86cd79943901z')).toBe(false);
+      expect(isMongoObjectId('foo')).toBe(false);
+      expect(isMongoObjectId('')).toBe(false);
+    });
+  });
+});
--- a/src/tools/date-time-converter/date-time-converter.models.ts
+++ b/src/tools/date-time-converter/date-time-converter.models.ts
@@ -0,0 +1,46 @@
+import _ from 'lodash';
+
+export {
+  isISO8601DateTimeString,
+  isISO9075DateString,
+  isRFC3339DateString,
+  isRFC7231DateString,
+  isUnixTimestamp,
+  isTimestamp,
+  isUTCDateString,
+  isMongoObjectId,
+};
+
+const ISO8601_REGEX =
+  /^([+-]?\d{4}(?!\d{2}\b))((-?)((0[1-9]|1[0-2])(\3([12]\d|0[1-9]|3[01]))?|W([0-4]\d|5[0-2])(-?[1-7])?|(00[1-9]|0[1-9]\d|[12]\d{2}|3([0-5]\d|6[1-6])))([T\s]((([01]\d|2[0-3])((:?)[0-5]\d)?|24:?00)([.,]\d+(?!:))?)?(\17[0-5]\d([.,]\d+)?)?([zZ]|([+-])([01]\d|2[0-3]):?([0-5]\d)?)?)?)?$/;
+const ISO9075_REGEX =
+  /^([0-9]{4})-([0-9]{2})-([0-9]{2}) ([0-9]{2}):([0-9]{2}):([0-9]{2})(\.[0-9]{1,6})?(([+-])([0-9]{2}):([0-9]{2})|Z)?$/;
+
+const RFC3339_REGEX =
+  /^([0-9]{4})-([0-9]{2})-([0-9]{2})T([0-9]{2}):([0-9]{2}):([0-9]{2})(\.[0-9]{1,9})?(([+-])([0-9]{2}):([0-9]{2})|Z)$/;
+
+const RFC7231_REGEX = /^[A-Za-z]{3},\s[0-9]{2}\s[A-Za-z]{3}\s[0-9]{4}\s[0-9]{2}:[0-9]{2}:[0-9]{2}\sGMT$/;
+
+function createRegexMatcher(regex: RegExp) {
+  return (date?: string) => !_.isNil(date) && regex.test(date);
+}
+
+const isISO8601DateTimeString = createRegexMatcher(ISO8601_REGEX);
+const isISO9075DateString = createRegexMatcher(ISO9075_REGEX);
+const isRFC3339DateString = createRegexMatcher(RFC3339_REGEX);
+const isRFC7231DateString = createRegexMatcher(RFC7231_REGEX);
+const isUnixTimestamp = createRegexMatcher(/^[0-9]{1,10}$/);
+const isTimestamp = createRegexMatcher(/^[0-9]{1,13}$/);
+const isMongoObjectId = createRegexMatcher(/^[0-9a-fA-F]{24}$/);
+
+function isUTCDateString(date?: string) {
+  if (_.isNil(date)) {
+    return false;
+  }
+
+  try {
+    return new Date(date).toUTCString() === date;
+  } catch (_ignored) {
+    return false;
+  }
+}
--- a/src/tools/date-time-converter/date-time-converter.types.ts
+++ b/src/tools/date-time-converter/date-time-converter.types.ts
@@ -0,0 +1,8 @@
+export type ToDateMapper = (value: string) => Date;
+
+export type DateFormat = {
+  name: string;
+  fromDate: (date: Date) => string;
+  toDate: (value: string) => Date;
+  formatMatcher: (dateString: string) => boolean;
+};
--- a/src/tools/date-time-converter/date-time-converter.vue
+++ b/src/tools/date-time-converter/date-time-converter.vue
@@ -1,44 +1,38 @@
 <template>
  <div>
-    <n-card>
-      <n-space justify="center">
-        <n-form-item label="Use current date-time ?" label-placement="left" :show-feedback="false">
-          <n-switch v-model:value="useCurrentDate" />
-        </n-form-item>
-      </n-space>
-      <n-form-item
-        :feedback="inputInvalid ? 'Invalid date for the current format' : ''"
-        :validation-status="inputInvalid ? 'error' : undefined"
-      >
-        <n-input-group style="flex-grow: 1">
-          <n-select
-            v-model:value="inputFormat"
-            style="width: 200px"
-            :options="formats.map(({ name }, i) => ({ label: name, value: i }))"
-            :disabled="useCurrentDate"
-          />
+    <n-form-item :show-label="false" v-bind="validation.attrs">
+      <n-input-group>
+        <n-input
+          v-model:value="inputDate"
+          :on-input="onDateInputChanged"
+          placeholder="Put you date string here..."
+          clearable
+          :input-props="{ 'data-test-id': 'date-time-converter-input' }"
+        />

-          <n-input
-            v-model:value="inputDate"
-            :on-input="onDateInputChanged"
-            :disabled="useCurrentDate"
-            placeholder="Your date string..."
-          />
-        </n-input-group>
-      </n-form-item>
-      <n-divider style="margin-top: 0" />
-      <div v-for="{ name, fromDate } in formats" :key="name" style="margin: 5px 0">
-        <n-input-group>
-          <n-input-group-label style="flex: 0 0 170px"> {{ name }}: </n-input-group-label>
-          <input-copyable :value="fromDate(baseDate)" />
-        </n-input-group>
-      </div>
-    </n-card>
+        <n-select
+          v-model:value="formatIndex"
+          style="flex: 0 0 170px"
+          :options="formats.map(({ name }, i) => ({ label: name, value: i }))"
+          data-test-id="date-time-converter-format-select"
+        />
+      </n-input-group>
+    </n-form-item>
+    <n-divider style="margin-top: 0" />
+    <div v-for="{ name, fromDate } in formats" :key="name" mt-1>
+      <n-input-group>
+        <n-input-group-label style="flex: 0 0 170px"> {{ name }}: </n-input-group-label>
+        <input-copyable
+          :value="formatDateUsingFormatter(fromDate, normalizedDate)"
+          placeholder="Invalid date..."
+          :input-props="{ 'data-test-id': name }"
+        />
+      </n-input-group>
+    </div>
  </div>
 </template>

 <script setup lang="ts">
-import { useRafFn } from '@vueuse/core';
 import {
  formatISO,
  formatISO9075,
@@ -47,95 +41,132 @@ import {
  fromUnixTime,
  getTime,
  getUnixTime,
-  isDate,
  parseISO,
  parseJSON,
+  isDate,
+  isValid,
 } from 'date-fns';
-import { ref } from 'vue';
-import InputCopyable from '../../components/InputCopyable.vue';
+import { withDefaultOnError } from '@/utils/defaults';
+import { useValidation } from '@/composable/validation';
+import type { DateFormat, ToDateMapper } from './date-time-converter.types';
+import {
+  isISO8601DateTimeString,
+  isISO9075DateString,
+  isRFC3339DateString,
+  isRFC7231DateString,
+  isTimestamp,
+  isUTCDateString,
+  isUnixTimestamp,
+  isMongoObjectId,
+} from './date-time-converter.models';

-const useCurrentDate = ref(true);
 const inputDate = ref('');
-const inputFormat = ref(6);
-const inputInvalid = ref(false);
-const baseDate = ref(new Date());

-useRafFn(() => {
-  if (useCurrentDate.value) {
-    baseDate.value = new Date();
+const toDate: ToDateMapper = (date) => new Date(date);
+
+function formatDateUsingFormatter(formatter: (date: Date) => string, date?: Date) {
+  if (!date || !validation.isValid) {
+    return '';
  }
-});

-function onDateInputChanged(value: string) {
-  const { toDate } = formats[inputFormat.value];
-  inputInvalid.value = false;
-
-  try {
-    const formatted: Date | string = toDate(value);
-
-    if (!isDate(formatted) || isNaN(formatted.getTime())) {
-      throw new Error('Invalid date');
-    }
-
-    baseDate.value = formatted;
-  } catch (_) {
-    inputInvalid.value = true;
-  }
+  return withDefaultOnError(() => formatter(date), '');
 }

-type Format = {
-  name: string;
-  fromDate: (date: Date) => string;
-  toDate: (value: string) => Date;
-};
-
-const toDate: Format['toDate'] = (date) => new Date(date);
-
-const formats: Format[] = [
+const formats: DateFormat[] = [
  {
    name: 'JS locale date string',
    fromDate: (date) => date.toString(),
    toDate,
+    formatMatcher: () => false,
  },
  {
    name: 'ISO 8601',
    fromDate: formatISO,
    toDate: parseISO,
+    formatMatcher: (date) => isISO8601DateTimeString(date),
  },
  {
    name: 'ISO 9075',
    fromDate: formatISO9075,
    toDate: parseISO,
+    formatMatcher: (date) => isISO9075DateString(date),
  },
  {
    name: 'RFC 3339',
    fromDate: formatRFC3339,
    toDate,
+    formatMatcher: (date) => isRFC3339DateString(date),
  },
  {
    name: 'RFC 7231',
    fromDate: formatRFC7231,
    toDate,
-  },
-  {
-    name: 'Timestamp',
-    fromDate: (date) => String(getTime(date)),
-    toDate: (ms) => parseJSON(+ms),
+    formatMatcher: (date) => isRFC7231DateString(date),
  },
  {
    name: 'Unix timestamp',
    fromDate: (date) => String(getUnixTime(date)),
    toDate: (sec) => fromUnixTime(+sec),
+    formatMatcher: (date) => isUnixTimestamp(date),
+  },
+  {
+    name: 'Timestamp',
+    fromDate: (date) => String(getTime(date)),
+    toDate: (ms) => parseJSON(+ms),
+    formatMatcher: (date) => isTimestamp(date),
  },
  {
    name: 'UTC format',
    fromDate: (date) => date.toUTCString(),
    toDate,
+    formatMatcher: (date) => isUTCDateString(date),
  },
  {
    name: 'Mongo ObjectID',
    fromDate: (date) => Math.floor(date.getTime() / 1000).toString(16) + '0000000000000000',
    toDate: (objectId) => new Date(parseInt(objectId.substring(0, 8), 16) * 1000),
+    formatMatcher: (date) => isMongoObjectId(date),
  },
 ];
+
+const formatIndex = ref(6);
+const now = useNow();
+
+const normalizedDate = computed(() => {
+  if (!inputDate.value) {
+    return now.value;
+  }
+
+  const { toDate } = formats[formatIndex.value];
+
+  try {
+    return toDate(inputDate.value);
+  } catch (_ignored) {
+    return undefined;
+  }
+});
+
+function onDateInputChanged(value: string) {
+  const matchingIndex = formats.findIndex(({ formatMatcher }) => formatMatcher(value));
+  if (matchingIndex !== -1) {
+    formatIndex.value = matchingIndex;
+  }
+}
+
+const validation = useValidation({
+  source: inputDate,
+  watch: [formatIndex],
+  rules: [
+    {
+      message: 'This date is invalid for this format',
+      validator: (value) =>
+        withDefaultOnError(() => {
+          if (value === '') return true;
+
+          const maybeDate = formats[formatIndex.value].toDate(value);
+          return isDate(maybeDate) && isValid(maybeDate);
+        }, false),
+    },
+  ],
+});
 </script>
--- a/src/tools/docker-run-to-docker-compose-converter/composerize.d.ts
+++ b/src/tools/docker-run-to-docker-compose-converter/composerize.d.ts
@@ -0,0 +1,4 @@
+declare module 'composerize' {
+  const composerize: (arg: string) => string;
+  export default composerize;
+}
--- a/src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue
+++ b/src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue
@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <n-form-item label="Your docker run command:" :show-feedback="false">
+      <n-input
+        v-model:value="dockerRun"
+        style="font-family: monospace"
+        type="textarea"
+        placeholder="Your docker run command to convert..."
+        rows="3"
+      />
+    </n-form-item>
+
+    <n-divider />
+
+    <textarea-copyable :value="dockerCompose" language="yaml" />
+    <br />
+    <br />
+    <n-space justify="center">
+      <n-button :disabled="dockerCompose === ''" secondary @click="download"> Download docker-compose.yml </n-button>
+    </n-space>
+
+    <div v-if="notComposable.length > 0">
+      <br />
+      <n-alert title="This options are not translatable to docker-compose" type="info">
+        <ul>
+          <li v-for="(message, index) of notComposable" :key="index">{{ message }}</li>
+        </ul>
+      </n-alert>
+    </div>
+
+    <div v-if="notImplemented.length > 0">
+      <br />
+      <n-alert
+        title="This options are not yet implemented and therefore haven't been translated to docker-compose"
+        type="warning"
+      >
+        <ul>
+          <li v-for="(message, index) of notImplemented" :key="index">{{ message }}</li>
+        </ul>
+      </n-alert>
+    </div>
+
+    <div v-if="errors.length > 0">
+      <br />
+      <n-alert title="The following errors occured" type="error">
+        <ul>
+          <li v-for="(message, index) of errors" :key="index">{{ message }}</li>
+        </ul>
+      </n-alert>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { withDefaultOnError } from '@/utils/defaults';
+import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
+import { textToBase64 } from '@/utils/base64';
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
+
+import { composerize, MessageType } from 'composerize-ts';
+
+const dockerRun = ref(
+  'docker run -p 80:80 -v /var/run/docker.sock:/tmp/docker.sock:ro --restart always --log-opt max-size=1g nginx',
+);
+
+const conversionResult = computed(() =>
+  withDefaultOnError(() => composerize(dockerRun.value), { yaml: '', messages: [] }),
+);
+const dockerCompose = computed(() => conversionResult.value.yaml);
+const notImplemented = computed(() =>
+  conversionResult.value.messages.filter((msg) => msg.type === MessageType.notImplemented).map((msg) => msg.value),
+);
+const notComposable = computed(() =>
+  conversionResult.value.messages.filter((msg) => msg.type === MessageType.notTranslatable).map((msg) => msg.value),
+);
+const errors = computed(() =>
+  conversionResult.value.messages
+    .filter((msg) => msg.type === MessageType.errorDuringConversion)
+    .map((msg) => msg.value),
+);
+const dockerComposeBase64 = computed(() => 'data:application/yaml;base64,' + textToBase64(dockerCompose.value));
+const { download } = useDownloadFileFromBase64({ source: dockerComposeBase64, filename: 'docker-compose.yml' });
+</script>
--- a/src/tools/docker-run-to-docker-compose-converter/index.ts
+++ b/src/tools/docker-run-to-docker-compose-converter/index.ts
@@ -0,0 +1,11 @@
+import { BrandDocker } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Docker run to Docker compose converter',
+  path: '/docker-run-to-docker-compose-converter',
+  description: 'Turns docker run commands into docker-compose files!',
+  keywords: ['docker', 'run', 'compose', 'yaml', 'yml', 'convert', 'deamon'],
+  component: () => import('./docker-run-to-docker-compose-converter.vue'),
+  icon: BrandDocker,
+});
--- a/src/tools/ed25519-key-pair-generator/ed25519-key-pair-generator.service.ts
+++ b/src/tools/ed25519-key-pair-generator/ed25519-key-pair-generator.service.ts
@@ -1,14 +0,0 @@
-import { pki } from 'node-forge';
-
-export { generateKeyPair };
-
-function generateKeyPair() {
-  const { privateKey, publicKey } = pki.ed25519.generateKeyPair();
-
-  console.log({ privateKey, publicKey });
-
-  return {
-    publicKeyPem: pki.publicKeyToPem(publicKey),
-    privateKeyPem: pki.privateKeyToPem(privateKey),
-  };
-}
--- a/src/tools/ed25519-key-pair-generator/ed25519-key-pair-generator.vue
+++ b/src/tools/ed25519-key-pair-generator/ed25519-key-pair-generator.vue
@@ -1,24 +0,0 @@
-<template>
-  <div>
-    <h3>Public key</h3>
-    <textarea-copyable :value="certs.publicKeyPem" />
-  </div>
-
-  <div>
-    <h3>Private key</h3>
-    <textarea-copyable :value="certs.privateKeyPem" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import TextareaCopyable from '@/components/TextareaCopyable.vue';
-import { withDefaultOnErrorAsync } from '@/utils/defaults';
-import { computed } from 'vue';
-import { generateKeyPair } from './ed25519-key-pair-generator.service';
-
-const emptyCerts = { publicKeyPem: '', privateKeyPem: '' };
-
-const certs = computed(() => generateKeyPair());
-</script>
-
-<style lang="less" scoped></style>
--- a/src/tools/ed25519-key-pair-generator/index.ts
+++ b/src/tools/ed25519-key-pair-generator/index.ts
@@ -1,11 +0,0 @@
-import { ArrowsShuffle } from '@vicons/tabler';
-import { defineTool } from '../tool';
-
-export const tool = defineTool({
-  name: 'Ed25519 key pair generator',
-  path: '/ed25519-key-pair-generator',
-  description: '',
-  keywords: ['ed25519', 'key', 'pair', 'generator'],
-  component: () => import('./ed25519-key-pair-generator.vue'),
-  icon: ArrowsShuffle,
-});
--- a/src/tools/html-wysiwyg-editor/editor/menu-bar.vue
+++ b/src/tools/html-wysiwyg-editor/editor/menu-bar.vue
@@ -22,10 +22,8 @@ import {
  H3,
  H4,
  Italic,
-  Link,
  List,
  ListNumbers,
-  Separator,
  Strikethrough,
  TextWrap,
 } from '@vicons/tabler';
--- a/src/tools/html-wysiwyg-editor/html-wysiwyg-editor.vue
+++ b/src/tools/html-wysiwyg-editor/html-wysiwyg-editor.vue
@@ -5,7 +5,6 @@

 <script setup lang="ts">
 import TextareaCopyable from '@/components/TextareaCopyable.vue';
-import { ref } from 'vue';
 import { format } from 'prettier';
 import htmlParser from 'prettier/parser-html';
 import { useStorage } from '@vueuse/core';
--- a/src/tools/html-wysiwyg-editor/index.ts
+++ b/src/tools/html-wysiwyg-editor/index.ts
@@ -2,7 +2,7 @@ import { Edit } from '@vicons/tabler';
 import { defineTool } from '../tool';

 export const tool = defineTool({
-  name: 'Html wysiwyg editor',
+  name: 'HTML WYSIWYG editor',
  path: '/html-wysiwyg-editor',
  description: 'Online HTML editor with feature-rich WYSIWYG editor, get the source code of the content immediately.',
  keywords: ['html', 'wysiwyg', 'editor', 'p', 'ul', 'ol', 'converter', 'live'],
--- a/src/tools/index.ts
+++ b/src/tools/index.ts
@@ -1,6 +1,14 @@
 import { tool as base64FileConverter } from './base64-file-converter';
 import { tool as base64StringConverter } from './base64-string-converter';
 import { tool as basicAuthGenerator } from './basic-auth-generator';
+import { tool as yamlToJson } from './yaml-to-json-converter';
+import { tool as jsonToYaml } from './json-to-yaml-converter';
+import { tool as ipv6UlaGenerator } from './ipv6-ula-generator';
+import { tool as ipv4AddressConverter } from './ipv4-address-converter';
+import { tool as benchmarkBuilder } from './benchmark-builder';
+import { tool as userAgentParser } from './user-agent-parser';
+import { tool as ipv4SubnetCalculator } from './ipv4-subnet-calculator';
+import { tool as dockerRunToDockerComposeConverter } from './docker-run-to-docker-compose-converter';
 import { tool as htmlWysiwygEditor } from './html-wysiwyg-editor';
 import { tool as rsaKeyPairGenerator } from './rsa-key-pair-generator';
 import { tool as textToNatoAlphabet } from './text-to-nato-alphabet';
@@ -42,6 +50,7 @@ import type { ToolCategory } from './tools.types';
 import { tool as urlEncoder } from './url-encoder';
 import { tool as urlParser } from './url-parser';
 import { tool as uuidGenerator } from './uuid-generator';
+import { tool as macAddressLookup } from './mac-address-lookup';

 export const toolsByCategory: ToolCategory[] = [
  {
@@ -59,6 +68,8 @@ export const toolsByCategory: ToolCategory[] = [
      colorConverter,
      caseConverter,
      textToNatoAlphabet,
+      yamlToJson,
+      jsonToYaml,
    ],
  },
  {
@@ -76,6 +87,7 @@ export const toolsByCategory: ToolCategory[] = [
      keycodeInfo,
      slugifyString,
      htmlWysiwygEditor,
+      userAgentParser,
    ],
  },
  {
@@ -84,7 +96,20 @@ export const toolsByCategory: ToolCategory[] = [
  },
  {
    name: 'Development',
-    components: [gitMemo, randomPortGenerator, crontabGenerator, jsonViewer, jsonMinify, sqlPrettify, chmodCalculator],
+    components: [
+      gitMemo,
+      randomPortGenerator,
+      crontabGenerator,
+      jsonViewer,
+      jsonMinify,
+      sqlPrettify,
+      chmodCalculator,
+      dockerRunToDockerComposeConverter,
+    ],
+  },
+  {
+    name: 'Network',
+    components: [ipv4SubnetCalculator, ipv4AddressConverter, macAddressLookup, ipv6UlaGenerator],
  },
  {
    name: 'Math',
@@ -92,7 +117,7 @@ export const toolsByCategory: ToolCategory[] = [
  },
  {
    name: 'Measurement',
-    components: [chronometer, temperatureConverter],
+    components: [chronometer, temperatureConverter, benchmarkBuilder],
  },
  {
    name: 'Text',
--- a/src/tools/integer-base-converter/integer-base-converter.vue
+++ b/src/tools/integer-base-converter/integer-base-converter.vue
@@ -4,11 +4,11 @@
      <div v-if="styleStore.isSmallScreen">
        <n-input-group>
          <n-input-group-label style="flex: 0 0 120px"> Input number: </n-input-group-label>
-          <n-input v-model:value="input" style="width: 100%" :status="error ? 'error' : undefined" />
+          <n-input v-model:value="input" w-full :status="error ? 'error' : undefined" />
        </n-input-group>
        <n-input-group>
          <n-input-group-label style="flex: 0 0 120px"> Input base: </n-input-group-label>
-          <n-input-number v-model:value="inputBase" max="64" min="2" style="width: 100%" />
+          <n-input-number v-model:value="inputBase" max="64" min="2" w-full />
        </n-input-group>
      </div>

--- a/src/tools/ipv4-address-converter/index.ts
+++ b/src/tools/ipv4-address-converter/index.ts
@@ -0,0 +1,12 @@
+import { Binary } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Ipv4 address converter',
+  path: '/ipv4-address-converter',
+  description: 'Convert an ip address into decimal, binary, hexadecimal or event in ipv6',
+  keywords: ['ipv4', 'address', 'converter', 'decimal', 'hexadecimal', 'binary', 'ipv6'],
+  component: () => import('./ipv4-address-converter.vue'),
+  icon: Binary,
+  createdAt: new Date('2023-04-08'),
+});
--- a/src/tools/ipv4-address-converter/ipv4-address-converter.service.test.ts
+++ b/src/tools/ipv4-address-converter/ipv4-address-converter.service.test.ts
@@ -0,0 +1,36 @@
+import { expect, describe, it } from 'vitest';
+import { isValidIpv4, ipv4ToInt } from './ipv4-address-converter.service';
+
+describe('ipv4-address-converter', () => {
+  describe('ipv4ToInt', () => {
+    it('should convert an IPv4 address to an integer', () => {
+      expect(ipv4ToInt({ ip: '192.168.0.1' })).toBe(3232235521);
+      expect(ipv4ToInt({ ip: '10.0.0.1' })).toBe(167772161);
+      expect(ipv4ToInt({ ip: '255.255.255.255' })).toBe(4294967295);
+    });
+  });
+
+  describe('isValidIpv4', () => {
+    it('should return true for a valid IP address', () => {
+      expect(isValidIpv4({ ip: '192.168.0.1' })).to.equal(true);
+      expect(isValidIpv4({ ip: '10.0.0.1' })).to.equal(true);
+    });
+
+    it('should return false for an invalid IP address', () => {
+      expect(isValidIpv4({ ip: '256.168.0.1' })).to.equal(false);
+      expect(isValidIpv4({ ip: '192.168.0' })).to.equal(false);
+      expect(isValidIpv4({ ip: '192.168.0.1.2' })).to.equal(false);
+      expect(isValidIpv4({ ip: '192.168.0.1.' })).to.equal(false);
+      expect(isValidIpv4({ ip: '.192.168.0.1' })).to.equal(false);
+      expect(isValidIpv4({ ip: '192.168.0.a' })).to.equal(false);
+    });
+
+    it('should return false for crap as input', () => {
+      expect(isValidIpv4({ ip: '' })).to.equal(false);
+      expect(isValidIpv4({ ip: ' ' })).to.equal(false);
+      expect(isValidIpv4({ ip: 'foo' })).to.equal(false);
+      expect(isValidIpv4({ ip: '-1' })).to.equal(false);
+      expect(isValidIpv4({ ip: '0' })).to.equal(false);
+    });
+  });
+});
--- a/src/tools/ipv4-address-converter/ipv4-address-converter.service.ts
+++ b/src/tools/ipv4-address-converter/ipv4-address-converter.service.ts
@@ -0,0 +1,38 @@
+import _ from 'lodash';
+
+export { ipv4ToInt, ipv4ToIpv6, isValidIpv4 };
+
+function ipv4ToInt({ ip }: { ip: string }) {
+  if (!isValidIpv4({ ip })) {
+    return 0;
+  }
+
+  return ip
+    .trim()
+    .split('.')
+    .reduce((acc, part, index) => acc + Number(part) * Math.pow(256, 3 - index), 0);
+}
+
+function ipv4ToIpv6({ ip, prefix = '0000:0000:0000:0000:0000:ffff:' }: { ip: string; prefix?: string }) {
+  if (!isValidIpv4({ ip })) {
+    return '';
+  }
+
+  return (
+    prefix +
+    _.chain(ip)
+      .trim()
+      .split('.')
+      .map((part) => parseInt(part).toString(16).padStart(2, '0'))
+      .chunk(2)
+      .map((blocks) => blocks.join(''))
+      .join(':')
+      .value()
+  );
+}
+
+function isValidIpv4({ ip }: { ip: string }) {
+  const cleanIp = ip.trim();
+
+  return /^((25[0-5]|(2[0-4]|1\d|[1-9]|)\d)\.?\b){4}$/.test(cleanIp);
+}
--- a/src/tools/ipv4-address-converter/ipv4-address-converter.vue
+++ b/src/tools/ipv4-address-converter/ipv4-address-converter.vue
@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <n-form-item label="An ipv4 address:" v-bind="validationAttrs">
+      <n-input v-model:value="rawIpAddress" placeholder="An ipv4 address..." />
+    </n-form-item>
+
+    <n-divider style="margin-top: 0" mt-0 />
+
+    <n-form-item
+      v-for="{ label, value } of convertedSections"
+      :key="label"
+      :label="label"
+      label-placement="left"
+      label-width="100"
+    >
+      <input-copyable
+        :value="validationAttrs.validationStatus === 'error' ? '' : value"
+        placeholder="Set a correct ipv4 address"
+      />
+    </n-form-item>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useValidation } from '@/composable/validation';
+import { convertBase } from '../integer-base-converter/integer-base-converter.model';
+import { ipv4ToInt, ipv4ToIpv6, isValidIpv4 } from './ipv4-address-converter.service';
+
+const rawIpAddress = useStorage('ipv4-converter:ip', '192.168.1.1');
+
+const convertedSections = computed(() => {
+  const ipInDecimal = ipv4ToInt({ ip: rawIpAddress.value });
+
+  return [
+    {
+      label: 'Decimal : ',
+      value: String(ipInDecimal),
+    },
+    {
+      label: 'Hexadecimal: ',
+      value: convertBase({ fromBase: 10, toBase: 16, value: String(ipInDecimal) }).toUpperCase(),
+    },
+    {
+      label: 'Binary: ',
+      value: convertBase({ fromBase: 10, toBase: 2, value: String(ipInDecimal) }),
+    },
+    {
+      label: 'Ipv6: ',
+      value: ipv4ToIpv6({ ip: rawIpAddress.value }),
+    },
+    {
+      label: 'Ipv6 (short): ',
+      value: ipv4ToIpv6({ ip: rawIpAddress.value, prefix: '::ffff:' }),
+    },
+  ];
+});
+
+const { attrs: validationAttrs } = useValidation({
+  source: rawIpAddress,
+  rules: [{ message: 'Invalid ipv4 address', validator: (ip) => isValidIpv4({ ip }) }],
+});
+</script>
+
+<style lang="less" scoped></style>
--- a/src/tools/ipv4-subnet-calculator/copyable-ip-like.vue
+++ b/src/tools/ipv4-subnet-calculator/copyable-ip-like.vue
@@ -0,0 +1,35 @@
+<template>
+  <n-tooltip trigger="hover">
+    <template #trigger>
+      <span class="ip" @click="handleClick">{{ ip }}</span>
+    </template>
+    {{ tooltipText }}
+  </n-tooltip>
+</template>
+
+<script setup lang="ts">
+import { useClipboard } from '@vueuse/core';
+import { ref, toRefs } from 'vue';
+
+const props = withDefaults(defineProps<{ ip?: string }>(), { ip: '' });
+const { ip } = toRefs(props);
+
+const initialText = 'Copy to clipboard';
+const tooltipText = ref(initialText);
+
+const { copy } = useClipboard({ source: ip });
+
+function handleClick() {
+  copy();
+  tooltipText.value = 'Copied!';
+
+  setTimeout(() => (tooltipText.value = initialText), 1000);
+}
+</script>
+
+<style scoped lang="less">
+.ip {
+  font-family: monospace;
+  cursor: pointer;
+}
+</style>
--- a/src/tools/ipv4-subnet-calculator/index.ts
+++ b/src/tools/ipv4-subnet-calculator/index.ts
@@ -0,0 +1,11 @@
+import { RouterOutlined } from '@vicons/material';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'IPv4 subnet calculator',
+  path: '/ipv4-subnet-calculator',
+  description: 'Parse your IPv4 CIDR blocks and get all the info you need about your sub network.',
+  keywords: ['ipv4', 'subnet', 'calculator', 'mask', 'network', 'cidr', 'netmask', 'bitmask', 'broadcast', 'address'],
+  component: () => import('./ipv4-subnet-calculator.vue'),
+  icon: RouterOutlined,
+});
--- a/src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.models.ts
+++ b/src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.models.ts
@@ -0,0 +1,23 @@
+export { getIPClass };
+
+function getIPClass({ ip }: { ip: string }) {
+  const [firstOctet] = ip.split('.').map(Number);
+
+  if (firstOctet < 128) {
+    return 'A';
+  }
+  if (firstOctet > 127 && firstOctet < 192) {
+    return 'B';
+  }
+  if (firstOctet > 191 && firstOctet < 224) {
+    return 'C';
+  }
+  if (firstOctet > 223 && firstOctet < 240) {
+    return 'D';
+  }
+  if (firstOctet > 239 && firstOctet < 256) {
+    return 'E';
+  }
+
+  return undefined;
+}
--- a/src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue
+++ b/src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue
@@ -0,0 +1,125 @@
+<template>
+  <div>
+    <n-form-item label="An IPv4 address with or without mask" v-bind="validationAttrs">
+      <n-input v-model:value="ip" />
+    </n-form-item>
+
+    <div v-if="networkInfo">
+      <n-table>
+        <tbody>
+          <tr v-for="{ getValue, label, undefinedFallback } in sections" :key="label">
+            <td>
+              <n-text strong>{{ label }}</n-text>
+            </td>
+            <td>
+              <copyable-ip-like v-if="getValue(networkInfo)" :ip="getValue(networkInfo)"></copyable-ip-like>
+              <n-text v-else depth="3">{{ undefinedFallback }}</n-text>
+            </td>
+          </tr>
+        </tbody>
+      </n-table>
+
+      <n-space style="margin-top: 14px" justify="space-between">
+        <n-button tertiary @click="switchToBlock({ count: -1 })">
+          <n-icon :component="ArrowLeft" />
+          Previous block
+        </n-button>
+        <n-button tertiary @click="switchToBlock({ count: 1 })">
+          Next block
+          <n-icon :component="ArrowRight" />
+        </n-button>
+      </n-space>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Netmask } from 'netmask';
+import { withDefaultOnError } from '@/utils/defaults';
+import { useValidation } from '@/composable/validation';
+import { isNotThrowing } from '@/utils/boolean';
+import { useStorage } from '@vueuse/core';
+import { ArrowLeft, ArrowRight } from '@vicons/tabler';
+import { getIPClass } from './ipv4-subnet-calculator.models';
+import CopyableIpLike from './copyable-ip-like.vue';
+
+const ip = useStorage('ipv4-subnet-calculator:ip', '192.168.0.1/24');
+
+const getNetworkInfo = (address: string) => new Netmask(address.trim());
+
+const networkInfo = computed(() => withDefaultOnError(() => getNetworkInfo(ip.value), undefined));
+
+const { attrs: validationAttrs } = useValidation({
+  source: ip,
+  rules: [
+    {
+      message: 'We cannot parse this address, check the format',
+      validator: (value) => isNotThrowing(() => getNetworkInfo(value.trim())),
+    },
+  ],
+});
+
+const sections: {
+  label: string;
+  getValue: (blocks: Netmask) => string | undefined;
+  undefinedFallback?: string;
+}[] = [
+  {
+    label: 'Netmask',
+    getValue: (block) => block.toString(),
+  },
+  {
+    label: 'Network address',
+    getValue: ({ base }) => base,
+  },
+  {
+    label: 'Network mask',
+    getValue: ({ mask }) => mask,
+  },
+  {
+    label: 'Network mask in binary',
+    getValue: ({ bitmask }) => ('1'.repeat(bitmask) + '0'.repeat(32 - bitmask)).match(/.{8}/g)?.join('.') ?? '',
+  },
+  {
+    label: 'CIDR notation',
+    getValue: ({ bitmask }) => `/${bitmask}`,
+  },
+  {
+    label: 'Wildcard mask',
+    getValue: ({ hostmask }) => hostmask,
+  },
+  {
+    label: 'Network size',
+    getValue: ({ size }) => String(size),
+  },
+  {
+    label: 'First address',
+    getValue: ({ first }) => first,
+  },
+  {
+    label: 'Last address',
+    getValue: ({ last }) => last,
+  },
+  {
+    label: 'Broadcast address',
+    getValue: ({ broadcast }) => broadcast,
+    undefinedFallback: 'No broadcast address with this mask',
+  },
+  {
+    label: 'IP class',
+    getValue: ({ base: ip }) => getIPClass({ ip }),
+    undefinedFallback: 'Unknown class type',
+  },
+];
+
+function switchToBlock({ count = 1 }: { count?: number }) {
+  const next = networkInfo.value?.next(count);
+
+  if (next) {
+    ip.value = next.toString();
+  }
+}
+</script>
+
+<style lang="less" scoped></style>
--- a/src/tools/ipv6-ula-generator/index.ts
+++ b/src/tools/ipv6-ula-generator/index.ts
@@ -0,0 +1,12 @@
+import { BuildingFactory } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'IPv6 ULA generator',
+  path: '/ipv6-ula-generator',
+  description: 'Generate your own local, non-routable IP addresses on your network according to RFC4193.',
+  keywords: ['ipv6', 'ula', 'generator', 'rfc4193', 'network', 'private'],
+  component: () => import('./ipv6-ula-generator.vue'),
+  icon: BuildingFactory,
+  createdAt: new Date('2023-04-09'),
+});
--- a/src/tools/ipv6-ula-generator/ipv6-ula-generator.vue
+++ b/src/tools/ipv6-ula-generator/ipv6-ula-generator.vue
@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <n-space vertical :size="50">
+      <n-alert title="Info" type="info">
+        This tool uses the first method suggested by IETF using the current timestamp plus the mac address, sha1 hashed,
+        and the lower 40 bits to generate your random ULA.
+      </n-alert>
+
+      <n-form-item label="MAC address:" v-bind="validationAttrs">
+        <n-input
+          v-model:value="macAddress"
+          size="large"
+          placeholder="Type a MAC address"
+          clearable
+          autocomplete="off"
+          autocorrect="off"
+          autocapitalize="off"
+          spellcheck="false"
+        />
+      </n-form-item>
+    </n-space>
+
+    <div v-if="validationAttrs.validationStatus !== 'error'">
+      <n-input-group v-for="{ label, value } in calculatedSections" :key="label" style="margin: 5px 0">
+        <n-input-group-label style="flex: 0 0 160px"> {{ label }} </n-input-group-label>
+        <input-copyable :value="value" readonly />
+      </n-input-group>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { SHA1 } from 'crypto-js';
+import InputCopyable from '@/components/InputCopyable.vue';
+import { macAddressValidation } from '@/utils/macAddress';
+
+const macAddress = ref('20:37:06:12:34:56');
+const calculatedSections = computed(() => {
+  const timestamp = new Date().getTime();
+  const hex40bit = SHA1(timestamp + macAddress.value)
+    .toString()
+    .substring(30);
+
+  const ula = 'fd' + hex40bit.substring(0, 2) + ':' + hex40bit.substring(2, 6) + ':' + hex40bit.substring(6);
+
+  return [
+    {
+      label: 'IPv6 ULA:',
+      value: `${ula}::/48`,
+    },
+    {
+      label: 'First routable block:',
+      value: `${ula}:0::/64`,
+    },
+    {
+      label: 'Last routable block:',
+      value: `${ula}:ffff::/64`,
+    },
+  ];
+});
+
+const { attrs: validationAttrs } = macAddressValidation(macAddress);
+</script>
+
+<style lang="less" scoped></style>
--- a/src/tools/json-minify/json-minify.vue
+++ b/src/tools/json-minify/json-minify.vue
@@ -1,57 +1,27 @@
 <template>
-  <n-form-item
-    label="Your raw json"
-    :feedback="rawJsonValidation.message"
-    :validation-status="rawJsonValidation.status"
-  >
-    <n-input
-      ref="inputElement"
-      v-model:value="rawJson"
-      placeholder="Paste your raw json here..."
-      type="textarea"
-      rows="20"
-      autocomplete="off"
-      autocorrect="off"
-      autocapitalize="off"
-      spellcheck="false"
-    />
-  </n-form-item>
-  <n-form-item label="Minify version of your JSON">
-    <textarea-copyable :value="cleanJson" language="json" :follow-height-of="inputElement" />
-  </n-form-item>
+  <format-transformer
+    input-label="Your raw json"
+    :input-default="defaultValue"
+    input-placeholder="Paste your raw json here..."
+    output-label="Minify version of your JSON"
+    output-language="json"
+    :input-validation-rules="rules"
+    :transformer="transformer"
+  />
 </template>

 <script setup lang="ts">
-import TextareaCopyable from '@/components/TextareaCopyable.vue';
-import { useValidation } from '@/composable/validation';
+import type { UseValidationRule } from '@/composable/validation';
 import { withDefaultOnError } from '@/utils/defaults';
 import JSON5 from 'json5';
-import { computed, ref } from 'vue';

-const inputElement = ref<HTMLElement>();
+const defaultValue = '{\n\t"hello": [\n\t\t"world"\n\t]\n}';
+const transformer = (value: string) => withDefaultOnError(() => JSON.stringify(JSON5.parse(value), null, 0), '');

-const rawJson = ref('{\n\t"hello": [\n\t\t"world"\n\t]\n}');
-const cleanJson = computed(() => withDefaultOnError(() => JSON.stringify(JSON5.parse(rawJson.value), null, 0), ''));
-
-const rawJsonValidation = useValidation({
-  source: rawJson,
-  rules: [
-    {
-      validator: (v) => v === '' || JSON5.parse(v),
-      message: 'Provided JSON is not valid.',
-    },
-  ],
-});
+const rules: UseValidationRule<string>[] = [
+  {
+    validator: (v: string) => v === '' || JSON5.parse(v),
+    message: 'Provided JSON is not valid.',
+  },
+];
 </script>
-
-<style lang="less" scoped>
-.result-card {
-  position: relative;
-
-  .copy-button {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-  }
-}
-</style>
--- a/src/tools/json-to-yaml-converter/index.ts
+++ b/src/tools/json-to-yaml-converter/index.ts
@@ -0,0 +1,12 @@
+import { Braces } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'JSON to YAML converter',
+  path: '/json-to-yaml-converter',
+  description: 'Simply convert JSON to YAML with this live online converter.',
+  keywords: ['yaml', 'to', 'json'],
+  component: () => import('./json-to-yaml.vue'),
+  icon: Braces,
+  createdAt: new Date('2023-04-10'),
+});
--- a/src/tools/json-to-yaml-converter/json-to-yaml.e2e.spec.ts
+++ b/src/tools/json-to-yaml-converter/json-to-yaml.e2e.spec.ts
@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Tool - json to yaml', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/json-to-yaml-converter');
+  });
+
+  test('Has correct title', async ({ page }) => {
+    await expect(page).toHaveTitle('JSON to YAML converter - IT Tools');
+  });
+
+  test('json is parsed and output clean yaml', async ({ page }) => {
+    await page.getByTestId('input').fill('{"foo":"bar","list":["item",{"key":"value"}]}');
+
+    const generatedJson = await page.getByTestId('area-content').innerText();
+
+    expect(generatedJson.trim()).toEqual(`foo: bar\nlist:\n  - item\n  - key: value`.trim());
+  });
+});
--- a/src/tools/json-to-yaml-converter/json-to-yaml.vue
+++ b/src/tools/json-to-yaml-converter/json-to-yaml.vue
@@ -0,0 +1,29 @@
+<template>
+  <format-transformer
+    input-label="Your JSON"
+    input-placeholder="Paste your JSON here..."
+    output-label="YAML from your JSON"
+    output-language="yaml"
+    :input-validation-rules="rules"
+    :transformer="transformer"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UseValidationRule } from '@/composable/validation';
+import { isNotThrowing } from '@/utils/boolean';
+import { withDefaultOnError } from '@/utils/defaults';
+import { stringify } from 'yaml';
+import JSON5 from 'json5';
+
+const transformer = (value: string) => withDefaultOnError(() => stringify(JSON5.parse(value)), '');
+
+const rules: UseValidationRule<string>[] = [
+  {
+    validator: (value: string) => value === '' || isNotThrowing(() => stringify(JSON5.parse(value))),
+    message: 'Provided JSON is not valid.',
+  },
+];
+</script>
+
+<style lang="less" scoped></style>
--- a/src/tools/json-viewer/json-viewer.vue
+++ b/src/tools/json-viewer/json-viewer.vue
@@ -1,4 +1,15 @@
 <template>
+  <div style="flex: 0 0 100%">
+    <n-space style="margin: 0 auto; max-width: 600px" justify="center">
+      <n-form-item label="Sort keys :" label-placement="left" label-width="100">
+        <n-switch v-model:value="sortKeys" />
+      </n-form-item>
+      <n-form-item label="Indent size :" label-placement="left" label-width="100" :show-feedback="false">
+        <n-input-number v-model:value="indentSize" min="0" max="10" style="width: 100px" />
+      </n-form-item>
+    </n-space>
+  </div>
+
  <n-form-item
    label="Your raw json"
    :feedback="rawJsonValidation.message"
@@ -25,13 +36,17 @@
 import TextareaCopyable from '@/components/TextareaCopyable.vue';
 import { useValidation } from '@/composable/validation';
 import { withDefaultOnError } from '@/utils/defaults';
-import JSON5 from 'json5';
 import { computed, ref } from 'vue';
+import JSON5 from 'json5';
+import { useStorage } from '@vueuse/core';
+import { formatJson } from './json.models';

 const inputElement = ref<HTMLElement>();

-const rawJson = ref('{"hello": "world"}');
-const cleanJson = computed(() => withDefaultOnError(() => JSON.stringify(JSON5.parse(rawJson.value), null, 3), ''));
+const rawJson = useStorage('json-prettify:raw-json', '{"hello": "world", "foo": "bar"}');
+const indentSize = useStorage('json-prettify:indent-size', 3);
+const sortKeys = useStorage('json-prettify:sort-keys', true);
+const cleanJson = computed(() => withDefaultOnError(() => formatJson({ rawJson, indentSize, sortKeys }), ''));

 const rawJsonValidation = useValidation({
  source: rawJson,
--- a/src/tools/json-viewer/json.models.test.ts
+++ b/src/tools/json-viewer/json.models.test.ts
@@ -0,0 +1,16 @@
+import { describe, expect, it } from 'vitest';
+import { sortObjectKeys } from './json.models';
+
+describe('json models', () => {
+  describe('sortObjectKeys', () => {
+    it('the object keys are recursively sorted alphabetically', () => {
+      expect(JSON.stringify(sortObjectKeys({ b: 2, a: 1 }))).to.deep.equal(JSON.stringify({ a: 1, b: 2 }));
+      // To unsure that this way of testing is working
+      expect(JSON.stringify(sortObjectKeys({ b: 2, a: 1 }))).to.not.deep.equal(JSON.stringify({ b: 2, a: 1 }));
+
+      expect(JSON.stringify(sortObjectKeys({ b: 2, a: 1, d: { j: 7, a: [{ z: 9, y: 8 }] }, c: 3 }))).to.deep.equal(
+        JSON.stringify({ a: 1, b: 2, c: 3, d: { a: [{ y: 8, z: 9 }], j: 7 } }),
+      );
+    });
+  });
+});
--- a/src/tools/json-viewer/json.models.ts
+++ b/src/tools/json-viewer/json.models.ts
@@ -0,0 +1,35 @@
+import { get, type MaybeRef } from '@vueuse/core';
+import JSON5 from 'json5';
+
+export { sortObjectKeys, formatJson };
+
+function sortObjectKeys<T>(obj: T): T {
+  if (typeof obj !== 'object' || obj === null) {
+    return obj;
+  }
+
+  if (Array.isArray(obj)) {
+    return obj.map(sortObjectKeys) as T;
+  }
+
+  return Object.keys(obj)
+    .sort()
+    .reduce((sortedObj, key) => {
+      sortedObj[key] = sortObjectKeys((obj as Record<string, unknown>)[key]);
+      return sortedObj;
+    }, {} as Record<string, unknown>) as T;
+}
+
+function formatJson({
+  rawJson,
+  sortKeys = true,
+  indentSize = 3,
+}: {
+  rawJson: MaybeRef<string>;
+  sortKeys?: MaybeRef<boolean>;
+  indentSize?: MaybeRef<number>;
+}) {
+  const parsedObject = JSON5.parse(get(rawJson));
+
+  return JSON.stringify(get(sortKeys) ? sortObjectKeys(parsedObject) : parsedObject, null, get(indentSize));
+}
--- a/src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue
+++ b/src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue
@@ -18,7 +18,7 @@

    <br />

-    <n-input :value="loremIpsumText" type="textarea" placeholder="Your lorem ipsum..." autosize readonly />
+    <n-input :value="loremIpsumText" type="textarea" placeholder="Your lorem ipsum..." readonly autosize />
    <br />
    <br />
    <n-space justify="center">
--- a/src/tools/mac-address-lookup/index.ts
+++ b/src/tools/mac-address-lookup/index.ts
@@ -0,0 +1,12 @@
+import { Devices } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'MAC address lookup',
+  path: '/mac-address-lookup',
+  description: 'Find the vendor and manufacturer of a device by its MAC address.',
+  keywords: ['mac', 'address', 'lookup', 'vendor', 'parser', 'manufacturer'],
+  component: () => import('./mac-address-lookup.vue'),
+  icon: Devices,
+  createdAt: new Date('2023-04-06'),
+});
--- a/src/tools/mac-address-lookup/mac-address-lookup.vue
+++ b/src/tools/mac-address-lookup/mac-address-lookup.vue
@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <n-form-item label="MAC address:" v-bind="validationAttrs">
+      <n-input
+        v-model:value="macAddress"
+        size="large"
+        placeholder="Type a MAC address"
+        clearable
+        autocomplete="off"
+        autocorrect="off"
+        autocapitalize="off"
+        spellcheck="false"
+      />
+    </n-form-item>
+
+    <n-form-item label="Vendor info:">
+      <n-card>
+        <n-text v-if="details">
+          <div v-for="(detail, index) of details.split('\n')" :key="index">{{ detail }}</div>
+        </n-text>
+
+        <n-text v-else depth="3" italic>Unknown vendor for this address</n-text>
+      </n-card>
+    </n-form-item>
+
+    <n-space justify="center">
+      <n-button :disabled="!details" tertiary> Copy vendor info </n-button>
+    </n-space>
+  </div>
+</template>
+
+<script setup lang="ts">
+import db from 'oui/oui.json';
+import { macAddressValidation } from '@/utils/macAddress';
+
+const getVendorValue = (address: string) => address.trim().replace(/[.:-]/g, '').toUpperCase().substring(0, 6);
+
+const macAddress = ref('20:37:06:12:34:56');
+const details = computed<string | undefined>(() => db[getVendorValue(macAddress.value)]);
+
+const { attrs: validationAttrs } = macAddressValidation(macAddress);
+</script>
+
+<style lang="less" scoped></style>
--- a/src/tools/mac-address-lookup/oui.d.ts
+++ b/src/tools/mac-address-lookup/oui.d.ts
@@ -0,0 +1,4 @@
+declare module 'oui/oui.json' {
+  const db: Record<string, string>;
+  export default db;
+}
--- a/src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue
+++ b/src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue
@@ -63,13 +63,14 @@
 </template>

 <script setup lang="ts">
-import { computed, ref, watch } from 'vue';
+import { computed, ref } from 'vue';
 import { Refresh } from '@vicons/tabler';
-import { useTimestamp, whenever } from '@vueuse/core';
+import { useTimestamp } from '@vueuse/core';
 import { useThemeVars } from 'naive-ui';
 import { useStyleStore } from '@/stores/style.store';
 import InputCopyable from '@/components/InputCopyable.vue';
 import { useValidation } from '@/composable/validation';
+import { computedRefreshable } from '@/composable/computedRefreshable';
 import { generateTOTP, buildKeyUri, generateSecret, base32toHex, getCounterFromTime } from './otp.service';
 import { useQRCode } from '../qr-code-generator/useQRCode';
 import TokenDisplay from './token-display.vue';
@@ -78,8 +79,22 @@ const now = useTimestamp();
 const interval = computed(() => (now.value / 1000) % 30);
 const theme = useThemeVars();
 const styleStore = useStyleStore();
+
 const secret = ref(generateSecret());
-const tokens = ref(buildTokens());
+
+function refreshSecret() {
+  secret.value = generateSecret();
+}
+
+const [tokens] = computedRefreshable(
+  () => ({
+    previous: generateTOTP({ key: secret.value, now: now.value - 30000 }),
+    current: generateTOTP({ key: secret.value, now: now.value }),
+    next: generateTOTP({ key: secret.value, now: now.value + 30000 }),
+  }),
+  { throttle: 500 },
+);
+
 const keyUri = computed(() => buildKeyUri({ secret: secret.value }));

 const { qrcode } = useQRCode({
@@ -104,26 +119,6 @@ const { attrs: secretValidationAttrs } = useValidation({
    },
  ],
 });
-
-// watch + whenever to prevent token to be refresh every raf
-watch([secret], refreshToken);
-whenever(() => Math.floor(interval.value) === 0, refreshToken);
-
-function refreshSecret() {
-  secret.value = generateSecret();
-}
-
-function refreshToken() {
-  tokens.value = buildTokens();
-}
-
-function buildTokens() {
-  return {
-    previous: generateTOTP({ key: secret.value, now: now.value - 30000 }),
-    current: generateTOTP({ key: secret.value, now: now.value }),
-    next: generateTOTP({ key: secret.value, now: now.value + 30000 }),
-  };
-}
 </script>

 <style lang="less" scoped>
--- a/src/tools/otp-code-generator-and-validator/otp-code-generator.e2e.spec.ts
+++ b/src/tools/otp-code-generator-and-validator/otp-code-generator.e2e.spec.ts
@@ -0,0 +1,48 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Tool - OTP code generator', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/otp-generator');
+  });
+
+  test('Has title', async ({ page }) => {
+    await expect(page).toHaveTitle('OTP code generator - IT Tools');
+  });
+
+  test('Secret hexa value is computed from provided secret', async ({ page }) => {
+    await page.getByPlaceholder('Paste your TOTP secret...').fill('ITTOOLS');
+
+    const secretInHex = await page.getByPlaceholder('Secret in hex will be displayed here').inputValue();
+
+    expect(secretInHex).toEqual('44e6e72e02');
+  });
+
+  test('OTP a generated from the provided secret', async ({ page }) => {
+    page.evaluate(() => {
+      Date.now = () => 1609477200000; //Jan 1, 2021
+    });
+
+    await page.getByPlaceholder('Paste your TOTP secret...').fill('ITTOOLS');
+
+    const previousOtp = await page.getByTestId('previous-otp').innerText();
+    const currentOtp = await page.getByTestId('current-otp').innerText();
+    const nextOtp = await page.getByTestId('next-otp').innerText();
+
+    expect(previousOtp.trim()).toEqual('028034');
+    expect(currentOtp.trim()).toEqual('162195');
+    expect(nextOtp.trim()).toEqual('452815');
+  });
+
+  test('You can generate a new random secret', async ({ page }) => {
+    const initialSecret = await page.getByPlaceholder('Paste your TOTP secret...').inputValue();
+    await page
+      .locator('div')
+      .filter({ hasText: /^Secret$/ })
+      .getByRole('button')
+      .click();
+
+    const newSecret = await page.getByPlaceholder('Paste your TOTP secret...').inputValue();
+
+    expect(newSecret).not.toEqual(initialSecret);
+  });
+});
--- a/src/tools/otp-code-generator-and-validator/token-display.vue
+++ b/src/tools/otp-code-generator-and-validator/token-display.vue
@@ -1,6 +1,6 @@
 <template>
  <div>
-    <n-space class="labels" item-style="flex: 1 1 0" style="width: 100%" align="center">
+    <n-space class="labels" item-style="flex: 1 1 0" w-full align="center">
      <div style="text-align: left">Previous</div>
      <div style="text-align: center">Current OTP</div>
      <div style="text-align: right">Next</div>
@@ -8,13 +8,21 @@
    <n-input-group>
      <n-tooltip trigger="hover" placement="bottom">
        <template #trigger>
-          <n-button secondary @click.prevent="copyPrevious(tokens.previous)">{{ tokens.previous }}</n-button>
+          <n-button data-test-id="previous-otp" secondary @click.prevent="copyPrevious(tokens.previous)">{{
+            tokens.previous
+          }}</n-button>
        </template>
        <div>{{ previousCopied ? 'Copied !' : 'Copy previous OTP' }}</div>
      </n-tooltip>
      <n-tooltip trigger="hover" placement="bottom">
        <template #trigger>
-          <n-button tertiary type="primary" class="current-otp" @click.prevent="copyCurrent(tokens.current)">
+          <n-button
+            tertiary
+            type="primary"
+            data-test-id="current-otp"
+            class="current-otp"
+            @click.prevent="copyCurrent(tokens.current)"
+          >
            {{ tokens.current }}
          </n-button>
        </template>
@@ -22,7 +30,9 @@
      </n-tooltip>
      <n-tooltip trigger="hover" placement="bottom">
        <template #trigger>
-          <n-button secondary @click.prevent="copyNext(tokens.next)">{{ tokens.next }}</n-button>
+          <n-button secondary data-test-id="next-otp" @click.prevent="copyNext(tokens.next)">{{
+            tokens.next
+          }}</n-button>
        </template>
        <div>{{ nextCopied ? 'Copied !' : 'Copy next OTP' }}</div>
      </n-tooltip>
--- a/src/tools/qr-code-generator/qr-code-generator.vue
+++ b/src/tools/qr-code-generator/qr-code-generator.vue
@@ -4,7 +4,12 @@
      <n-gi span="2">
        <n-form label-width="130" label-placement="left">
          <n-form-item label="Text:">
-            <n-input v-model:value="text" placeholder="Your link or text..." />
+            <n-input
+              v-model:value="text"
+              type="textarea"
+              :autosize="{ minRows: 1 }"
+              placeholder="Your link or text..."
+            />
          </n-form-item>
          <n-form-item label="Foreground color:">
            <n-color-picker v-model:value="foreground" :modes="['hex']" />
--- a/src/tools/qr-code-generator/useQRCode.ts
+++ b/src/tools/qr-code-generator/useQRCode.ts
@@ -19,7 +19,7 @@ export function useQRCode({
    [text, background, foreground, errorCorrectionLevel].filter(isRef),
    async () => {
      if (get(text))
-        qrcode.value = await QRCode.toDataURL(get(text), {
+        qrcode.value = await QRCode.toDataURL(get(text).trim(), {
          color: {
            dark: get(foreground),
            light: get(background),
--- a/src/tools/random-port-generator/random-port-generator.vue
+++ b/src/tools/random-port-generator/random-port-generator.vue
@@ -11,19 +11,13 @@
 </template>

 <script setup lang="ts">
+import { computedRefreshable } from '@/composable/computedRefreshable';
 import { useCopy } from '@/composable/copy';
-import { ref } from 'vue';
 import { generatePort } from './random-port-generator.model';

-const port = ref('');
+const [port, refreshPort] = computedRefreshable(() => String(generatePort()));

 const { copy } = useCopy({ source: port, text: 'Port copied to the clipboard' });
-
-function refreshPort() {
-  port.value = String(generatePort());
-}
-
-refreshPort();
 </script>

 <style lang="less" scoped>
--- a/src/tools/roman-numeral-converter/roman-numeral-converter.service.test.ts
+++ b/src/tools/roman-numeral-converter/roman-numeral-converter.service.test.ts
@@ -13,14 +13,17 @@ describe('roman-numeral-converter', () => {
      expect(arabicToRoman(0.9)).toEqual('');
    });

+    it('should convert numbers greater than 3999 to empty string', () => {
+      expect(arabicToRoman(3999.1)).toEqual('');
+      expect(arabicToRoman(4000)).toEqual('');
+      expect(arabicToRoman(10000)).toEqual('');
+    });
+
    it('should convert floating points number to the lower integer in roman version', () => {
-      expect(arabicToRoman(-100)).toEqual('');
-      expect(arabicToRoman(-42)).toEqual('');
-      expect(arabicToRoman(-26)).toEqual('');
-      expect(arabicToRoman(-10)).toEqual('');
-      expect(arabicToRoman(0)).toEqual('');
-      expect(arabicToRoman(0.5)).toEqual('');
-      expect(arabicToRoman(0.9)).toEqual('');
+      expect(arabicToRoman(1.1)).toEqual('I');
+      expect(arabicToRoman(1.9)).toEqual('I');
+      expect(arabicToRoman(17.6)).toEqual('XVII');
+      expect(arabicToRoman(29.999)).toEqual('XXIX');
    });

    it('should convert positive integers to roman numbers', () => {
@@ -67,7 +70,6 @@ describe('roman-numeral-converter', () => {
      expect(arabicToRoman(999)).toEqual('CMXCIX');
      expect(arabicToRoman(1000)).toEqual('M');
      expect(arabicToRoman(2000)).toEqual('MM');
-      expect(arabicToRoman(9000)).toEqual('MMMMMMMMM');
    });
  });
 });
--- a/src/tools/roman-numeral-converter/roman-numeral-converter.service.ts
+++ b/src/tools/roman-numeral-converter/roman-numeral-converter.service.ts
@@ -1,5 +1,7 @@
+export const MIN_ARABIC_TO_ROMAN = 1;
+export const MAX_ARABIC_TO_ROMAN = 3999;
 export function arabicToRoman(num: number) {
-  if (num < 1) return '';
+  if (num < MIN_ARABIC_TO_ROMAN || num > MAX_ARABIC_TO_ROMAN) return '';

  const lookup: { [key: string]: number } = {
    M: 1000,
@@ -26,7 +28,16 @@ export function arabicToRoman(num: number) {
  return roman;
 }

+const ROMAN_NUMBER_REGEX = new RegExp(/^M{0,3}(CM|CD|D?C{0,3})(XC|XL|L?X{0,3})(IX|IV|V?I{0,3})$/);
+
+export function isValidRomanNumber(romanNumber: string) {
+  return ROMAN_NUMBER_REGEX.test(romanNumber);
+}
+
 export function romanToArabic(s: string) {
+  if (!isValidRomanNumber(s)) {
+    return null;
+  }
  const map: { [key: string]: number } = { I: 1, V: 5, X: 10, L: 50, C: 100, D: 500, M: 1000 };
  return [...s].reduce((r, c, i, s) => (map[s[i + 1]] > map[c] ? r - map[c] : r + map[c]), 0);
 }
--- a/src/tools/roman-numeral-converter/roman-numeral-converter.vue
+++ b/src/tools/roman-numeral-converter/roman-numeral-converter.vue
@@ -2,21 +2,29 @@
  <div>
    <n-card title="Arabic to roman">
      <n-space align="center" justify="space-between">
-        <n-input-number v-model:value="inputNumeral" :min="1" style="width: 200px" :show-button="false" />
+        <n-form-item v-bind="validationNumeral">
+          <n-input-number v-model:value="inputNumeral" :min="1" style="width: 200px" :show-button="false" />
+        </n-form-item>
        <div class="result">
          {{ outputRoman }}
        </div>
-        <n-button secondary autofocus @click="copyRoman"> Copy </n-button>
+        <n-button secondary autofocus :disabled="validationNumeral.validationStatus === 'error'" @click="copyRoman">
+          Copy
+        </n-button>
      </n-space>
    </n-card>
    <br />
    <n-card title="Roman to arabic">
      <n-space align="center" justify="space-between">
-        <n-input v-model:value="inputRoman" style="width: 200px" />
+        <n-form-item v-bind="validationRoman">
+          <n-input v-model:value="inputRoman" style="width: 200px" />
+        </n-form-item>
        <div class="result">
          {{ outputNumeral }}
        </div>
-        <n-button secondary autofocus @click="copyArabic"> Copy </n-button>
+        <n-button secondary autofocus :disabled="validationRoman.validationStatus === 'error'" @click="copyArabic">
+          Copy
+        </n-button>
      </n-space>
    </n-card>
  </div>
@@ -25,14 +33,41 @@
 <script setup lang="ts">
 import { useCopy } from '@/composable/copy';
 import { ref, computed } from 'vue';
-import { arabicToRoman, romanToArabic } from './roman-numeral-converter.service';
+import { useValidation } from '@/composable/validation';
+import {
+  arabicToRoman,
+  romanToArabic,
+  MAX_ARABIC_TO_ROMAN,
+  MIN_ARABIC_TO_ROMAN,
+  isValidRomanNumber,
+} from './roman-numeral-converter.service';

 const inputNumeral = ref(42);
 const outputRoman = computed(() => arabicToRoman(inputNumeral.value));

+const { attrs: validationNumeral } = useValidation({
+  source: inputNumeral,
+  rules: [
+    {
+      validator: (value) => value >= MIN_ARABIC_TO_ROMAN && value <= MAX_ARABIC_TO_ROMAN,
+      message: `We can only convert numbers between ${MIN_ARABIC_TO_ROMAN.toLocaleString()} and ${MAX_ARABIC_TO_ROMAN.toLocaleString()}`,
+    },
+  ],
+});
+
 const inputRoman = ref('XLII');
 const outputNumeral = computed(() => romanToArabic(inputRoman.value));

+const { attrs: validationRoman } = useValidation({
+  source: inputRoman,
+  rules: [
+    {
+      validator: (value) => isValidRomanNumber(value),
+      message: `The input you entered is not a valid roman number`,
+    },
+  ],
+});
+
 const { copy: copyRoman } = useCopy({ source: outputRoman, text: 'Roman number copied to the clipboard' });
 const { copy: copyArabic } = useCopy({ source: outputNumeral, text: 'Arabic number copied to the clipboard' });
 </script>
--- a/src/tools/rsa-key-pair-generator/rsa-key-pair-generator.service.ts
+++ b/src/tools/rsa-key-pair-generator/rsa-key-pair-generator.service.ts
@@ -1,10 +1,11 @@
 import { pki } from 'node-forge';
+import workerScript from 'node-forge/dist/prime.worker.min?url';

 export { generateKeyPair };

 function generateRawPairs({ bits = 2048 }) {
  return new Promise<pki.rsa.KeyPair>((resolve, reject) =>
-    pki.rsa.generateKeyPair({ bits }, (err, keyPair) => {
+    pki.rsa.generateKeyPair({ bits, workerScript }, (err, keyPair) => {
      if (err) {
        reject(err);
        return;
--- a/src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue
+++ b/src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue
@@ -2,8 +2,10 @@
  <div style="flex: 0 0 100%">
    <n-space item-style="flex: 1 1 0" style="margin: 0 auto; max-width: 600px" justify="center">
      <n-form-item label="Bits :" v-bind="bitsValidationAttrs" label-placement="left" label-width="100">
-        <n-input-number v-model:value="bits" min="256" max="16384" step="8" style="width: 150px" />
+        <n-input-number v-model:value="bits" min="256" max="16384" step="8" />
      </n-form-item>
+
+      <n-button tertiary @click="refreshCerts">Refresh key-pair</n-button>
    </n-space>
  </div>

@@ -21,9 +23,9 @@
 <script setup lang="ts">
 import TextareaCopyable from '@/components/TextareaCopyable.vue';
 import { ref } from 'vue';
-import { computedAsync } from '@vueuse/core';
 import { withDefaultOnErrorAsync } from '@/utils/defaults';
 import { useValidation } from '@/composable/validation';
+import { computedRefreshableAsync } from '@/composable/computedRefreshable';
 import { generateKeyPair } from './rsa-key-pair-generator.service';

 const bits = ref(2048);
@@ -39,7 +41,7 @@ const { attrs: bitsValidationAttrs } = useValidation({
  ],
 });

-const certs = computedAsync(
+const [certs, refreshCerts] = computedRefreshableAsync(
  () => withDefaultOnErrorAsync(() => generateKeyPair({ bits: bits.value }), emptyCerts),
  emptyCerts,
 );
--- a/src/tools/temperature-converter/temperature-converter.vue
+++ b/src/tools/temperature-converter/temperature-converter.vue
@@ -1,10 +1,6 @@
 <template>
  <div>
-    <n-input-group
-      v-for="[key, { title, unit }] in Object.entries(units)"
-      :key="key"
-      style="width: 100%; margin-bottom: 15px"
-    >
+    <n-input-group v-for="[key, { title, unit }] in Object.entries(units)" :key="key" mb-3 w-full>
      <n-input-group-label style="width: 100px">
        {{ title }}
      </n-input-group-label>
--- a/src/tools/token-generator/token-generator.e2e.spec.ts
+++ b/src/tools/token-generator/token-generator.e2e.spec.ts
@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Tool - Token generator', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/token-generator');
+  });
+
+  test('Has title', async ({ page }) => {
+    await expect(page).toHaveTitle('Token generator - IT Tools');
+  });
+
+  test('New token on refresh', async ({ page }) => {
+    const initialToken = await page.getByPlaceholder('The token...').inputValue();
+    await page.getByRole('button', { name: 'Refresh' }).click();
+    const newToken = await page.getByPlaceholder('The token...').inputValue();
+
+    expect(newToken).not.toEqual(initialToken);
+  });
+});
--- a/src/tools/token-generator/token-generator.tool.vue
+++ b/src/tools/token-generator/token-generator.tool.vue
@@ -53,28 +53,25 @@

 <script setup lang="ts">
 import { useCopy } from '@/composable/copy';
-import { ref, watch } from 'vue';
 import { useQueryParam } from '@/composable/queryParams';
+import { computedRefreshable } from '@/composable/computedRefreshable';
 import { createToken } from './token-generator.service';

-const token = ref('');
 const length = useQueryParam({ name: 'length', defaultValue: 64 });
-const { copy } = useCopy({ source: token, text: 'Token copied to the clipboard' });
-
 const withUppercase = useQueryParam({ name: 'uppercase', defaultValue: true });
 const withLowercase = useQueryParam({ name: 'lowercase', defaultValue: true });
 const withNumbers = useQueryParam({ name: 'numbers', defaultValue: true });
 const withSymbols = useQueryParam({ name: 'symbols', defaultValue: false });

-watch([withUppercase, withLowercase, withNumbers, withSymbols, length], refreshToken, { immediate: true });
-
-function refreshToken() {
-  token.value = createToken({
+const [token, refreshToken] = computedRefreshable(() =>
+  createToken({
    length: length.value,
    withUppercase: withUppercase.value,
    withLowercase: withLowercase.value,
    withNumbers: withNumbers.value,
    withSymbols: withSymbols.value,
-  });
-}
+  }),
+);
+
+const { copy } = useCopy({ source: token, text: 'Token copied to the clipboard' });
 </script>
--- a/src/tools/tool.ts
+++ b/src/tools/tool.ts
@@ -1,13 +1,10 @@
-import { config } from '@/config';
+import { isAfter, subWeeks } from 'date-fns';
 import type { Tool } from './tools.types';

 type WithOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;

-export function defineTool(
-  tool: WithOptional<Tool, 'isNew'>,
-  { newTools }: { newTools: string[] } = { newTools: config.tools.newTools },
-) {
-  const isNew = newTools.includes(tool.name);
+export function defineTool(tool: WithOptional<Tool, 'isNew'>) {
+  const isNew = tool.createdAt ? isAfter(tool.createdAt, subWeeks(new Date(), 2)) : false;

  return {
    isNew,
--- a/src/tools/tools.types.ts
+++ b/src/tools/tools.types.ts
@@ -9,6 +9,7 @@ export type Tool = {
  icon: Component;
  redirectFrom?: string[];
  isNew: boolean;
+  createdAt?: Date;
 };

 export type ToolCategory = {
--- a/src/tools/user-agent-parser/index.ts
+++ b/src/tools/user-agent-parser/index.ts
@@ -0,0 +1,12 @@
+import { Browser } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'User-agent parser',
+  path: '/user-agent-parser',
+  description: 'Detect and parse Browser, Engine, OS, CPU, and Device type/model from an user-agent string.',
+  keywords: ['user', 'agent', 'parser', 'browser', 'engine', 'os', 'cpu', 'device', 'user-agent', 'client'],
+  component: () => import('./user-agent-parser.vue'),
+  icon: Browser,
+  createdAt: new Date('2023-04-06'),
+});
--- a/src/tools/user-agent-parser/user-agent-parser.types.ts
+++ b/src/tools/user-agent-parser/user-agent-parser.types.ts
@@ -0,0 +1,12 @@
+import type { Component } from 'vue';
+import { UAParser } from 'ua-parser-js';
+
+export type UserAgentResultSection = {
+  heading: string;
+  icon?: Component;
+  content: {
+    label: string;
+    getValue: (blocks: UAParser.IResult) => string | undefined;
+    undefinedFallback?: string;
+  }[];
+};
--- a/src/tools/user-agent-parser/user-agent-parser.vue
+++ b/src/tools/user-agent-parser/user-agent-parser.vue
@@ -0,0 +1,120 @@
+<template>
+  <div>
+    <n-form-item label="User agent string">
+      <n-input
+        v-model:value="ua"
+        type="textarea"
+        placeholder="Put your user-agent here..."
+        clearable
+        :autosize="{ minRows: 2 }"
+      />
+    </n-form-item>
+
+    <user-agent-result-cards :user-agent-info="userAgentInfo" :sections="sections" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { UAParser } from 'ua-parser-js';
+import { withDefaultOnError } from '@/utils/defaults';
+import { Adjustments, Browser, Cpu, Devices, Engine } from '@vicons/tabler';
+import UserAgentResultCards from './user-agent-result-cards.vue';
+import type { UserAgentResultSection } from './user-agent-parser.types';
+
+const ua = ref(navigator.userAgent as string);
+
+// If not input in the ua field is present return an empty object of type UAParser.IResult because otherwise
+// UAParser returns the values for the current Browser. This is confusing because results are shown for an empty
+// UA field value.
+const getUserAgentInfo = (userAgent: string) =>
+  userAgent.trim().length > 0
+    ? UAParser(userAgent.trim())
+    : ({ ua: '', browser: {}, cpu: {}, device: {}, engine: {}, os: {} } as UAParser.IResult);
+const userAgentInfo = computed(() => withDefaultOnError(() => getUserAgentInfo(ua.value), undefined));
+
+const sections: UserAgentResultSection[] = [
+  {
+    heading: 'Browser',
+    icon: Browser,
+    content: [
+      {
+        label: 'Name',
+        getValue: (block) => block.browser.name,
+        undefinedFallback: 'No browser name available',
+      },
+      {
+        label: 'Version',
+        getValue: (block) => block.browser.version,
+        undefinedFallback: 'No browser version available',
+      },
+    ],
+  },
+  {
+    heading: 'Engine',
+    icon: Engine,
+    content: [
+      {
+        label: 'Name',
+        getValue: (block) => block.engine.name,
+        undefinedFallback: 'No engine name available',
+      },
+      {
+        label: 'Version',
+        getValue: (block) => block.engine.version,
+        undefinedFallback: 'No engine version available',
+      },
+    ],
+  },
+  {
+    heading: 'OS',
+    icon: Adjustments,
+    content: [
+      {
+        label: 'Name',
+        getValue: (block) => block.os.name,
+        undefinedFallback: 'No OS name available',
+      },
+      {
+        label: 'Version',
+        getValue: (block) => block.os.version,
+        undefinedFallback: 'No OS version available',
+      },
+    ],
+  },
+  {
+    heading: 'Device',
+    icon: Devices,
+    content: [
+      {
+        label: 'Model',
+        getValue: (block) => block.device.model,
+        undefinedFallback: 'No device model available',
+      },
+      {
+        label: 'Type',
+        getValue: (block) => block.device.type,
+        undefinedFallback: 'No device type available',
+      },
+      {
+        label: 'Vendor',
+        getValue: (block) => block.device.vendor,
+        undefinedFallback: 'No device vendor available',
+      },
+    ],
+  },
+  {
+    heading: 'CPU',
+    icon: Cpu,
+    content: [
+      {
+        label: 'Architecture',
+        getValue: (block) => block.cpu.architecture,
+        undefinedFallback: 'No CPU architecture available',
+      },
+    ],
+  },
+];
+</script>
+
+<style lang="less" scoped></style>
--- a/src/tools/user-agent-parser/user-agent-result-cards.vue
+++ b/src/tools/user-agent-parser/user-agent-result-cards.vue
@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <n-grid :x-gap="12" :y-gap="8" cols="1 s:2" responsive="screen">
+      <n-gi v-for="{ heading, icon, content } in sections" :key="heading">
+        <n-card style="height: 100%">
+          <n-page-header>
+            <template #title>
+              {{ heading }}
+            </template>
+            <template v-if="icon" #avatar>
+              <n-icon size="30" :component="icon" :depth="3" />
+            </template>
+          </n-page-header>
+
+          <br />
+
+          <n-space>
+            <span v-for="{ label, getValue } in content" :key="label">
+              <n-tooltip v-if="getValue(userAgentInfo)" trigger="hover">
+                <template #trigger>
+                  <n-tag type="success" size="large" round :bordered="false">
+                    {{ getValue(userAgentInfo) }}
+                  </n-tag>
+                </template>
+                {{ label }}
+              </n-tooltip>
+            </span>
+          </n-space>
+          <n-space vertical>
+            <span v-for="{ label, getValue, undefinedFallback } in content" :key="label">
+              <n-text v-if="getValue(userAgentInfo) === undefined" depth="3">{{ undefinedFallback }}</n-text>
+            </span>
+          </n-space>
+        </n-card>
+      </n-gi>
+    </n-grid>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { toRefs } from 'vue';
+import { UAParser } from 'ua-parser-js';
+import type { UserAgentResultSection } from './user-agent-parser.types';
+
+const props = defineProps<{
+  userAgentInfo?: UAParser.IResult;
+  sections: UserAgentResultSection[];
+}>();
+const { userAgentInfo, sections } = toRefs(props);
+</script>
--- a/src/tools/uuid-generator/uuid-generator.vue
+++ b/src/tools/uuid-generator/uuid-generator.vue
@@ -30,21 +30,15 @@

 <script setup lang="ts">
 import { useCopy } from '@/composable/copy';
-import { ref, watch } from 'vue';
 import { v4 as generateUUID } from 'uuid';
 import { useQueryParam } from '@/composable/queryParams';
+import { computedRefreshable } from '@/composable/computedRefreshable';

 const count = useQueryParam({ defaultValue: 1, name: 'count' });

-const uuids = ref('');
-
-function refreshUUIDs() {
-  uuids.value = Array.from({ length: count.value }, () => generateUUID()).join('\n');
-}
-
-watch([count], refreshUUIDs);
+const [uuids, refreshUUIDs] = computedRefreshable(() =>
+  Array.from({ length: count.value }, () => generateUUID()).join('\n'),
+);

 const { copy } = useCopy({ source: uuids, text: 'UUIDs copied to the clipboard' });
-
-refreshUUIDs();
 </script>
--- a/src/tools/yaml-to-json-converter/index.ts
+++ b/src/tools/yaml-to-json-converter/index.ts
@@ -0,0 +1,12 @@
+import { AlignJustified } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'YAML to JSON converter',
+  path: '/yaml-to-json-converter',
+  description: 'Simply convert YAML to JSON with this live online converter.',
+  keywords: ['yaml', 'to', 'json'],
+  component: () => import('./yaml-to-json.vue'),
+  icon: AlignJustified,
+  createdAt: new Date('2023-04-10'),
+});
--- a/src/tools/yaml-to-json-converter/yaml-to-json.e2e.spec.ts
+++ b/src/tools/yaml-to-json-converter/yaml-to-json.e2e.spec.ts
@@ -0,0 +1,31 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Tool - Yaml to json', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/yaml-to-json-converter');
+  });
+
+  test('Has correct title', async ({ page }) => {
+    await expect(page).toHaveTitle('YAML to JSON converter - IT Tools');
+  });
+
+  test('Yaml is parsed and output clean json', async ({ page }) => {
+    await page.getByTestId('input').fill('foo: bar\nlist:\n  - item\n  - key: value');
+
+    const generatedJson = await page.getByTestId('area-content').innerText();
+
+    expect(generatedJson.trim()).toEqual(
+      `
+{
+   "foo": "bar",
+   "list": [
+      "item",
+      {
+         "key": "value"
+      }
+   ]
+}
+   `.trim(),
+    );
+  });
+});
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Corentin Thomasset	7d7cc99866	chore(version): release v2023.04.13-dce9ff9	2023-04-13 01:09:14 +02:00
Corentin Thomasset	dce9ff91e2	feat(cd): git version tag pushed to docker	2023-04-13 01:04:48 +02:00
Corentin Thomasset	80401b6405	refactor(404): simplified 404 page	2023-04-13 00:03:08 +02:00
Corentin Thomasset	fd9ab59172	refactor(date-converter): improved ux and layout	2023-04-12 23:41:09 +02:00
Corentin Thomasset	5fa811a583	chore(deps): updated dependencies	2023-04-12 20:35:44 +02:00
Corentin Thomasset	c0a89131dd	feat(new-tool): yaml and json converters	2023-04-10 22:38:35 +02:00
Corentin Thomasset	05f06f6a07	refactor(dx): generic data transformer	2023-04-10 16:42:06 +02:00
Corentin Thomasset	9fa4c26929	refactor(config): removed new tools env config	2023-04-10 13:11:10 +02:00
Corentin Thomasset	9d639edf2d	refactor(lint): auto fix lint	2023-04-10 13:01:40 +02:00
cgoIT	a1e983538c	feat(new-tool): generate ula based on timestamp and mac address (#344 ) * feat(ipv6-ula-generator): new tool: generate ula based on timestamp and mac address This new tool generates a random unique ula based on the current timestamp and the provided mac address. An ULA is your "secondary" IPV6-Address only for internal use. It can also be used as a backup address if your provider gets offline and your Prefix-IPs are not longer valid.Also you can create the most of your internal firewall rules based on your ULAs. * feat(ipv6-ula-generator): changes requested by review * Update src/tools/ipv6-ula-generator/index.ts * Update src/tools/ipv6-ula-generator/ipv6-ula-generator.vue --------- Co-authored-by: Corentin THOMASSET <corentin.thomasset74@gmail.com>	2023-04-09 21:05:26 +02:00
cgoIT	1d7f8b9a8c	feat(new-tool): generate ula based on timestamp and mac address (#344 ) * feat(ipv6-ula-generator): new tool: generate ula based on timestamp and mac address This new tool generates a random unique ula based on the current timestamp and the provided mac address. An ULA is your "secondary" IPV6-Address only for internal use. It can also be used as a backup address if your provider gets offline and your Prefix-IPs are not longer valid.Also you can create the most of your internal firewall rules based on your ULAs. * feat(ipv6-ula-generator): changes requested by review * Update src/tools/ipv6-ula-generator/index.ts * Update src/tools/ipv6-ula-generator/ipv6-ula-generator.vue --------- Co-authored-by: Corentin THOMASSET <corentin.thomasset74@gmail.com>	2023-04-09 20:58:27 +02:00
Corentin Thomasset	ec7cb9351c	feat(test): added e2e tests	2023-04-09 18:16:22 +02:00
Corentin Thomasset	ebfdb64fde	chore(cd): don't run nightly release if their is no new commits	2023-04-09 15:27:58 +02:00
cgoIT	d2a2686705	fix(mac-address-lookup): fix typo in mac-address-lookup tool (#345 )	2023-04-09 14:03:17 +02:00
Corentin Thomasset	d7a503b4ae	feat(new-tool): ipv4 address converter	2023-04-08 22:09:22 +02:00
Corentin Thomasset	28145e0ffe	feat(new-tool): ipv4 address converter	2023-04-08 21:13:14 +02:00
cgoIT	8930e139b2	fix(roman-numeral-converter): input validation and feedback (#332 ) * fix(roman-numeral-converter): checks for valid input and conversion enhancements Validates if numeral values are between 1 and 3999999. Validates if a roman number is valid. * fix(roman-numeral-converter): optimize logic for copy button * fix(roman-numeral-converter): changes due to review	2023-04-08 19:33:33 +02:00
Corentin Thomasset	076df11024	feat(new-tool): mac address lookup	2023-04-07 00:24:49 +02:00
Corentin Thomasset	1060652590	chore(cd): docker nightly releases	2023-04-06 21:44:11 +02:00
Corentin Thomasset	f5c865b278	chore(cd): docker nightly releases	2023-04-06 21:05:56 +02:00
Corentin Thomasset	001031b7b5	feat(css): added unocss with attributify preset	2023-04-06 20:35:37 +02:00
Corentin Thomasset	4ccd73c2d1	feat(dx): auto resolve vue components	2023-04-06 19:08:28 +02:00
Corentin Thomasset	2293f63a79	fix(ci): prevent ci from running twice in pr	2023-04-06 18:56:31 +02:00
Corentin Thomasset	0161395585	feat(dx): auto import vite plugin	2023-04-06 18:53:31 +02:00
Corentin Thomasset	4d011f15a1	feat(benchmark-builder): compute gap and export to bulet list	2023-04-06 14:00:54 +02:00
Corentin Thomasset	4a1afb2b69	feat(benchmark-builder): compute gap and export to bulet list	2023-04-06 13:33:51 +02:00
cgoIT	f350dc19aa	feat(new-tool): add new tool user agent parser (#329 ) * fix(docker-run-to-docker-compose-converter): use different version of converter which suppports more options and is mor failsafe * chore(docker-run-to-docker-compose-converter): add pnpm-lock.yaml again which was accidently removed in last commit * chore(docker-run-to-docker-compose-converter): add fixed version of composerize-ts * chore(user-agent-parser): changes requested by code review * chore(user-agent-parser): some more changes requested by code review	2023-04-06 10:28:12 +02:00
Corentin Thomasset	f3480fe560	refactor(qr-code): multiline input	2023-04-06 00:55:39 +02:00
Corentin Thomasset	f68e859c20	refactor(docker-run-converter): improve error handling	2023-04-06 00:16:32 +02:00
cgoIT	4872d71165	refactor(docker-run-converter): improved converter * fix(docker-run-to-docker-compose-converter): use different version of converter which suppports more options and is mor failsafe * chore(docker-run-to-docker-compose-converter): add pnpm-lock.yaml again which was accidently removed in last commit * chore(docker-run-to-docker-compose-converter): add fixed version of composerize-ts	2023-04-06 00:10:19 +02:00
Corentin Thomasset	fb8a3a0fee	refactor(tool): better new tool logic	2023-04-05 23:30:44 +02:00
Corentin Thomasset	20282987e3	feat(new-tool): simple benchmark calculator	2023-04-05 23:07:13 +02:00
Corentin Thomasset	ff5f38bec6	feat(new-tool): simple benchmark calculator	2023-04-05 23:06:05 +02:00
Corentin Thomasset	6e84ea4061	feat(new-tool): simple benchmark calculator	2023-04-05 22:57:58 +02:00
Corentin Thomasset	004cb83719	chore(clean): removed extra console.log	2023-04-05 08:47:54 +02:00
Corentin Thomasset	aa4dc0418e	feat(plausible): disable plausible instance for self hosted instance	2023-04-04 19:01:59 +02:00
Corentin Thomasset	a599528044	fix(otp-generator): editable secret	2023-04-04 12:55:02 +02:00
Radu Ursache	b3390f6ff7	chore(docker): fixed the docker-run command in README (#323 )	2023-03-31 16:53:32 +02:00
Corentin Thomasset	dee5586bf5	fix(docker): consistent casing in Dockerfile	2023-03-31 01:10:00 +02:00
Corentin Thomasset	5281824b5d	fix(otp-generator): better computation of token	2023-03-31 01:01:44 +02:00
Corentin Thomasset	15cb03347c	feat(menu): collapsible category	2023-03-30 23:51:23 +02:00
Corentin Thomasset	24ba0ff5fa	feat(menu): collapsible category	2023-03-30 23:48:47 +02:00
Corentin Thomasset	849981d1ec	refactor(issue): better issue template	2023-03-30 21:25:39 +02:00
Corentin Thomasset	3b625fd473	feat(json-prettify): sort keys	2023-03-29 23:33:30 +02:00
Corentin Thomasset	863c8d0f6a	refactor(new-tool-script): added new tool creation script in package.json	2023-03-29 22:43:51 +02:00
Corentin Thomasset	9b4f7727f2	refactor(uuid-generator): now using computedRefreshable	2023-03-29 21:13:49 +02:00
Corentin Thomasset	cf16cb195d	refactor(token-generator): now using computedRefreshable	2023-03-29 21:12:20 +02:00
Corentin Thomasset	f6237376e1	refactor(port-generator): now using computedRefreshable	2023-03-29 21:05:21 +02:00
Corentin Thomasset	165dc93f83	feat(rsa-key-pair-generator): refresh certs button	2023-03-29 20:54:11 +02:00
Corentin Thomasset	161a21f285	feat(config): hide the banner by default	2023-03-29 19:55:40 +02:00
Corentin Thomasset	972ffe6f69	fix(docker): nginx config to redirect to index.html	2023-03-29 00:15:56 +02:00
Corentin Thomasset	c339ab3551	feat(new-tool): IPv4 subnet calculator	2023-03-28 23:49:54 +02:00
Corentin Thomasset	47948dd343	refactor(import): removed unused imports	2023-03-28 23:49:54 +02:00
marvin-j97	91369cb238	refactor(html-editor): use correct letter casing (#292 )	2023-03-27 17:38:37 +02:00
cgoIT	ffb99579ba	feat(new-tool): add a docker run to docker compose converter (#291 ) * Integrate composerize (https://github.com/magicmark/composerize) into it-tools * Fix Prettier errors * Fix Prettier errors * Fix code according to suggestions * Added syntax highlighting to TextareaCopyable component, some ui adjustments in docker-run-to-docker-compose-converter.vue	2023-03-27 17:31:13 +02:00
Corentin Thomasset	f512d09227	fix(rsa-key-pair-generator): correct prime web worker url	2023-03-27 00:17:36 +02:00