chore(version): release 2023.04.23-92bd835

* feat(ipv4-range-expander): expands a given IPv4 start and end address to a valid IPv4 subnet

* feat(ipv4-range-expander): remove old component copyable-ip-like.vue

* feat(ipv4-range-expander): fix sonar findings

* feat(ipv4-range-expander): changes due to review

* feat(ipv4-range-expander): only show n-alert if both ipv4 addresses are valid

.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
+  }
+}

.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: {
@@ -32,5 +34,6 @@ module.exports = {
         tsx: 'never',
       },
     ],
+    'import/no-unresolved': ['error', { ignore: ['^virtual:'] }],
   },
 };

.github/ISSUE_TEMPLATE/bug-report.md

@@ -1,17 +1,17 @@
 ---
 name: Bug report
-about: Create a report to help us improve
+about: Create a report to help us improve our tools
-title: "[BUG] "
+title: '[BUG] '
 labels: bug
 assignees: CorentinTh
-
 ---
 
-**Describe the bug**
+**Which tool is impacted?**
-A clear and concise description of what the bug is.
+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]
+- Device: [e.g. iPhone6, ]
- - Browser [e.g. chrome, safari]
+- OS: [e.g. iOS]
- - Version [e.g. 22]
+- Browser [e.g. chrome, safari]
+- Version [e.g. 22]
 
 **Additional context**
 Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,20 +0,0 @@
----
-name: Feature request
-about: Suggest an idea for this project
-title: "[FEAT]"
-labels: enhancement
-assignees: CorentinTh
-
----
-
-**Is your feature request related to a problem? Please describe.**
-A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
-
-**Describe the solution you'd like**
-A clear and concise description of what you want to happen.
-
-**Describe alternatives you've considered**
-A clear and concise description of any alternative solutions or features you've considered.
-
-**Additional context**
-Add any other context or screenshots about the feature request here.

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

@@ -0,0 +1,19 @@
+---
+name: New tool request
+about: Suggest a new tool idea
+title: '[NEW TOOL]'
+labels: new tool
+assignees: CorentinTh
+---
+
+**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.

.github/ISSUE_TEMPLATE/other-request.md

@@ -0,0 +1,13 @@
+---
+name: Other request
+about: Any request that does not concern a tool creation, a new feature request on a tool or a bug
+title: '[OTHER] '
+labels:
+assignees: CorentinTh
+---
+
+**Describe the solution you'd like**
+A clear and concise description of what you want.
+
+**Additional context**
+Add any other context about the feature request here.

.github/ISSUE_TEMPLATE/tool-improvement.md

@@ -0,0 +1,13 @@
+---
+name: Tool improvement
+about: Improvement on an existing tool
+title: '[TOOL IMPROVEMENT]'
+labels: enhancement
+assignees: CorentinTh
+---
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Additional context**
+Add any other context about the feature request here.

.github/workflows/ci.yml

@@ -1,6 +1,10 @@
 name: ci
 
-on: [push, pull_request]
+on:
+  pull_request:
+  push:
+    branches:
+      - main
 
 jobs:
   ci:
@@ -23,5 +27,8 @@ jobs:
       - name: Run unit test
         run: pnpm test
 
+      - name: Type check
+        run: pnpm typecheck
+
       - name: Build the app
         run: pnpm build

.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

.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

.github/workflows/releases.yml

@@ -0,0 +1,104 @@
+name: Release new versions
+
+on:
+  push:
+    tags:
+      - 'v*.*.*'
+
+jobs:
+  docker-release:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Get release version
+        run: echo "RELEASE_VERSION=${GITHUB_REF#refs/tags/v}" >> $GITHUB_ENV
+
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@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:latest
+            corentinth/it-tools:${{ env.RELEASE_VERSION }}
+            ghcr.io/corentinth/it-tools:latest
+            ghcr.io/corentinth/it-tools:${{ env.RELEASE_VERSION}}
+
+  github-release:
+    runs-on: ubuntu-latest
+    needs: docker-release
+    steps:
+      - name: Get release version
+        run: echo "RELEASE_VERSION=${GITHUB_REF#refs/tags/v}" >> $GITHUB_ENV
+
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - run: corepack enable
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm i
+
+      - name: Build the app
+        run: pnpm build
+
+      - name: Zip the app
+        run: zip -r it-tools-${{ env.RELEASE_VERSION }}.zip dist/*
+
+      - name: Get changelog
+        id: changelog
+        run: |
+          EOF=$(openssl rand -hex 8)
+          echo "changelog<<$EOF" >> $GITHUB_OUTPUT
+          node ./scripts/getLatestChangelog.mjs >> $GITHUB_OUTPUT
+          echo "$EOF" >> $GITHUB_OUTPUT
+
+      - name: Create Release
+        uses: softprops/action-gh-release@v1
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          files: it-tools-${{ env.RELEASE_VERSION }}.zip
+          tag_name: v${{ env.RELEASE_VERSION }}
+          draft: true
+          prerelease: false
+          body: |
+            ## Docker images
+
+            - Docker Hub
+              - `corentinth/it-tools:latest`
+              - `corentinth/it-tools:${{ env.RELEASE_VERSION }}`
+            - GitHub Container Registry
+              - `ghcr.io/corentinth/it-tools:latest`
+              - `ghcr.io/corentinth/it-tools:${{ env.RELEASE_VERSION}}`
+
+            ## Changelog
+
+            ${{ steps.changelog.outputs.changelog }}

.gitignore

@@ -27,4 +27,7 @@ coverage
 *.sln
 *.sw?
 
-.env
+.env
+/test-results/
+/playwright-report/
+/playwright/.cache/

CHANGELOG.md

@@ -2,545 +2,73 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
-## [2.16.0](https://github.com/CorentinTh/it-tools/compare/v2.15.0...v2.16.0) (2022-12-21)
+## Version 2023.04.23-92bd835
-
 
 ### Features
+- **ui-lib**: demo pages for c-lib components (92bd835)
+- **new-tool**: diff of two json objects (362f2fa)
+- **ipv4-range-expander**: expands a given IPv4 start and end address to a valid IPv4 subnet (#366) (df989e2)
+- **date converter**: auto focus main input (6d22025)
 
-* **search-bar:** use cmd + k to focus on mac ([bf88836](https://github.com/CorentinTh/it-tools/commit/bf88836dbe4037019e9545deaae1db06e5768cfb))
+### Bug fixes
-* **tool:** improved favorite tool management ([af075dc](https://github.com/CorentinTh/it-tools/commit/af075dccccec959a0863e6d11516206860bed91f))
+- **ts**: cleaned legacy typechecking warning (e88c1d5)
-* **tools:** added favorite tool handling ([4cd809b](https://github.com/CorentinTh/it-tools/commit/4cd809bd0c94836532f58a2ec6aa131694cce10d))
+- **mac-address-lookup**: added copy handler on button click (c311e38)
-* **tracker:** added actions monitoring ([bfc2e24](https://github.com/CorentinTh/it-tools/commit/bfc2e24bbfc08f67ed9c9b1d93474029bc01dc8b))
 
+### Refactoring
+- **ui-lib**: prevent c-button to shrink (61ece23)
+- **ui**: replaced naive ui cards with custom ones (f080933)
+- **clean**: removed unused lodash import (bb32513)
+- **clean**: removed useless br tags (74073f5)
+- **ui**: getting ride of naive ui buttons (c45bce3)
 
-### Refactors
+## Version 2023.04.14-dbad773
-
-* **clean:** removed empty style tag ([cf723f1](https://github.com/CorentinTh/it-tools/commit/cf723f144ee865b6de7323d3be58eb7a9586fa56))
-* **clean:** removed unused import ([4087285](https://github.com/CorentinTh/it-tools/commit/40872859a580a20bb838b79db2b3c88c00995e37))
-* **menu:** improve support button ([679dd1c](https://github.com/CorentinTh/it-tools/commit/679dd1c1f6265227cc9db60c55d83f8eaf8f72b4))
-* **tracker:** better tracker injection ([def60e7](https://github.com/CorentinTh/it-tools/commit/def60e7248003e74ed67e9ff116b438bab410a92))
-
-## [2.15.0](https://github.com/CorentinTh/it-tools/compare/v2.14.1...v2.15.0) (2022-12-16)
-
 
 ### Features
+- **new-tool**: http status codes (8355bd2)
 
-* **search-bar:** better search back result ([71e98e9](https://github.com/CorentinTh/it-tools/commit/71e98e93e5752cba934f67d679088524c4d3d2ad))
+### Refactoring
+- **uuid-generator**: prevent NaN in quantity (6fb4994)
 
+### Chores
+- **release**: create a github release on new version (dbad773)
+- **version**: reset CHANGELOG content to support new format (85cb0ff)
 
-### Bug Fixes
+## Version 2023.04.14-f9b77b7
-
-* **integer-base-converter:** handle non-decimal char and better error message ([8476cf3](https://github.com/CorentinTh/it-tools/commit/8476cf319b7ebae87c7928592604a54833ac56ef))
-* **tool-card:** correct text color on light mode for card description ([acf8bc1](https://github.com/CorentinTh/it-tools/commit/acf8bc11dbab85ab361edbe400ebbe5e52a11b89))
-
-
-### Refactors
-
-* **search-bar:** improved tool fuzzy search ([1b5d4e7](https://github.com/CorentinTh/it-tools/commit/1b5d4e72bdb222dd721a1e484c3e5d73bb62d2b1))
-
-### [2.14.1](https://github.com/CorentinTh/it-tools/compare/v2.14.0...v2.14.1) (2022-11-23)
-
-## [2.14.0](https://github.com/CorentinTh/it-tools/compare/v2.13.0...v2.14.0) (2022-11-23)
-
 
 ### Features
+- **new-tool**: http status codes (8355bd2)
 
-* **new-tool:** chmod calculator ([35b5187](https://github.com/CorentinTh/it-tools/commit/35b518711938c2bc88f35d104bb35d9956f0c267))
+### Refactoring
+- **uuid-generator**: prevent NaN in quantity (6fb4994)
 
-## [2.13.0](https://github.com/CorentinTh/it-tools/compare/v2.11.0...v2.13.0) (2022-11-14)
+### Chores
+- **release**: create a github release on new version (f9b77b7)
+- **version**: reset CHANGELOG content to support new format (85cb0ff)
 
+## Version 2023.04.14-2f0d239
 
 ### Features
+- **new-tool**: http status codes (8355bd2)
 
-* **config:** added tsx to allowed extension ([ea5e7a7](https://github.com/CorentinTh/it-tools/commit/ea5e7a7fc7df1a3a912193912a6ab80a8a36a256))
+### Refactoring
-* **date-converter:** added mongodb objectID format ([4ef2588](https://github.com/CorentinTh/it-tools/commit/4ef25887b9d874b8789bf8dbabd8aab92b4b1b03))
+- **uuid-generator**: prevent NaN in quantity (6fb4994)
-* **new-tool:** added otp generator ([5f16885](https://github.com/CorentinTh/it-tools/commit/5f168859238e9c3a8b8bbaf6b550c4b9bd163e00))
-* **new-tool:** mime type to extension converter ([7c9b8ac](https://github.com/CorentinTh/it-tools/commit/7c9b8ac178967151a4f921ac26e8c2fe8d23b886))
 
+### Chores
+- **release**: create a github release on new version (2f0d239)
+- **version**: reset CHANGELOG content to support new format (85cb0ff)
 
-### Bug Fixes
+## Version 2023.04.14-474cae4
-
-* **ui:** remove icon transparency overlap ([35a3760](https://github.com/CorentinTh/it-tools/commit/35a376077116dd65b21f9a0786d2ecfc14db6051))
-
-
-### Refactors
-
-* **otp-generator:** changed url ([7f22995](https://github.com/CorentinTh/it-tools/commit/7f229959d64b7a932f32753e3838d87a819a9192))
-* token generator can use a custom alphabet ([83da6b7](https://github.com/CorentinTh/it-tools/commit/83da6b7ee9db29e40faf288f9627257aa7124038))
-* **ui:** change sponsor button location and caption ([5d8f46a](https://github.com/CorentinTh/it-tools/commit/5d8f46abf8d5a10cc4650efc87b12a9a6c537fe5))
-* **useQRCode:** switched args to MaybeRef ([7de6c86](https://github.com/CorentinTh/it-tools/commit/7de6c86f9ead8d7315614cc508dfee4fed90e9c2))
-
-## [2.12.0](https://github.com/CorentinTh/it-tools/compare/v2.10.3...v2.12.0) (2022-08-23)
-
 
 ### Features
+- **new-tool**: http status codes (8355bd2)
 
-* added colored share card ([ab7483b](https://github.com/CorentinTh/it-tools/commit/ab7483b5c2bd5aee1b8b609597c22b7b7b55606d))
+### Refactoring
-* **config:** added tsx to allowed extension ([741a3c2](https://github.com/CorentinTh/it-tools/commit/741a3c25a915d8296987b23bda03f2b664d51ba6))
+- **uuid-generator**: prevent NaN in quantity (6fb4994)
-* **new-tool:** added otp generator ([cc6070a](https://github.com/CorentinTh/it-tools/commit/cc6070a16655bce9de90517bdda3bf6224ba139d))
-* **new-tool:** meta tag generator ([164e32b](https://github.com/CorentinTh/it-tools/commit/164e32b4428b8dfaaddcefa06b767a8af94573a9))
 
+### Chores
+- **release**: create a github release on new version (474cae4)
+- **version**: reset CHANGELOG content to support new format (85cb0ff)
 
-### Bug Fixes
+## Version v2023.4.13-dce9ff9
 
-* **deps:** added missing optional deps ([4975590](https://github.com/CorentinTh/it-tools/commit/49755909bdaea9399e51b67fbd1a6d071acd3182))
+_Diff not available_
-* removed colored card border ([7c449f4](https://github.com/CorentinTh/it-tools/commit/7c449f4f2d491ce58726c5419a74dc295fa92905))
-
-
-### Refactors
-
-* **colored-card:** added transition on like hover ([da17696](https://github.com/CorentinTh/it-tools/commit/da17696293270005b1b7ec4aafc0df7496f602c7))
-* **share:** updated share meta ([5222bd5](https://github.com/CorentinTh/it-tools/commit/5222bd5d04ad089ba4cbade399dada55e29dcde5))
-* token generator can use a custom alphabet ([59ec629](https://github.com/CorentinTh/it-tools/commit/59ec6293b65526fe8dc527ac596d0e5af29b1e32))
-* **useQRCode:** switched args to MaybeRef ([a89c9be](https://github.com/CorentinTh/it-tools/commit/a89c9bea42d598f4caba10800becd66a07bbcdc9))
-
-## [2.11.0](https://github.com/CorentinTh/it-tools/compare/v2.10.3...v2.11.0) (2022-08-19)
-
-
-### Features
-
-* added colored share card ([ab7483b](https://github.com/CorentinTh/it-tools/commit/ab7483b5c2bd5aee1b8b609597c22b7b7b55606d))
-* **new-tool:** meta tag generator ([164e32b](https://github.com/CorentinTh/it-tools/commit/164e32b4428b8dfaaddcefa06b767a8af94573a9))
-
-
-### Bug Fixes
-
-* **deps:** added missing optional deps ([4975590](https://github.com/CorentinTh/it-tools/commit/49755909bdaea9399e51b67fbd1a6d071acd3182))
-* removed colored card border ([7c449f4](https://github.com/CorentinTh/it-tools/commit/7c449f4f2d491ce58726c5419a74dc295fa92905))
-
-
-### Refactors
-
-* **colored-card:** added transition on like hover ([da17696](https://github.com/CorentinTh/it-tools/commit/da17696293270005b1b7ec4aafc0df7496f602c7))
-* **share:** updated share meta ([5222bd5](https://github.com/CorentinTh/it-tools/commit/5222bd5d04ad089ba4cbade399dada55e29dcde5))
-
-### [2.10.3](https://github.com/CorentinTh/it-tools/compare/v2.10.2...v2.10.3) (2022-08-14)
-
-
-### Refactors
-
-* **share:** new share banner ([fcf4cfe](https://github.com/CorentinTh/it-tools/commit/fcf4cfe64d4c1c3814137c8ff23b83a1ca0d502d))
-* **share:** updated twitter meta tags ([992f96b](https://github.com/CorentinTh/it-tools/commit/992f96b48a89e2793ccf75fb9e28b2ec7b7f62b6))
-* **validation:** simplified validation management with helpers ([f54223f](https://github.com/CorentinTh/it-tools/commit/f54223fb0aaedbd101b5d3dc4176053533bb936a))
-
-### [2.10.2](https://github.com/CorentinTh/it-tools/compare/v2.10.1...v2.10.2) (2022-08-04)
-
-
-### Refactors
-
-* **dry:** mutualised duplicated code with withDefaultOnError ([f6cd9b7](https://github.com/CorentinTh/it-tools/commit/f6cd9b76d38800e1a1f63d07152fc96cda562795))
-* **home:** removed new tool first sort ([d30cd8a](https://github.com/CorentinTh/it-tools/commit/d30cd8a9abc3298c0a0b05f249e54318bb4537f2))
-* **json-prettifier:** more permissive json parser ([8089c60](https://github.com/CorentinTh/it-tools/commit/8089c60000000c42c821c6586c128d3d2b248885))
-* **lint:** added import rules ([208a373](https://github.com/CorentinTh/it-tools/commit/208a373fd08ac550778745eb6e4536bf02537da7))
-
-### [2.10.1](https://github.com/CorentinTh/it-tools/compare/v2.10.0...v2.10.1) (2022-08-04)
-
-
-### Bug Fixes
-
-* **bip39-generator:** cleared an issue with the mnemonic validation ([ca7cb44](https://github.com/CorentinTh/it-tools/commit/ca7cb4438972ca09f28a6a40332ec94ceaa4aab4))
-* **import:** removed auto added weird .js extension ([fda0b0c](https://github.com/CorentinTh/it-tools/commit/fda0b0ca25c1733542a4e797ac1a2150c546a660))
-
-
-### Refactors
-
-* **base64:** mutualized base64 functions into global utilities ([447bdf2](https://github.com/CorentinTh/it-tools/commit/447bdf2148098d70ba309e13d9b1e846b5064da1))
-* **chronometer:** improved chronometer precision ([e48d60b](https://github.com/CorentinTh/it-tools/commit/e48d60b1ed19279f48441743f7ed69e8fd915011))
-
-## [2.10.0](https://github.com/CorentinTh/it-tools/compare/v2.9.2...v2.10.0) (2022-08-03)
-
-
-### Features
-
-* **hash-text:** digest base selector ([#254](https://github.com/CorentinTh/it-tools/issues/254)) ([422b6eb](https://github.com/CorentinTh/it-tools/commit/422b6eb05a2fb5e7eec816a6bd2d37b53e4a6bdc))
-* **new-tool:** an svg placeholder image generator ([129f74c](https://github.com/CorentinTh/it-tools/commit/129f74c371eaf09fdc3a19afb709cee40b7aaf7f))
-* **new-tool:** hmac generator ([1bc6380](https://github.com/CorentinTh/it-tools/commit/1bc6380c6fdd7a9b500422a54bc508ab5557eb46))
-
-
-### Bug Fixes
-
-* **base64-to-string:** prevent validation error ([8a9e788](https://github.com/CorentinTh/it-tools/commit/8a9e7888dec41364c8c17b1234adcdc0616612b0))
-* **bip39-generator:** typo in validation message ([7570ad9](https://github.com/CorentinTh/it-tools/commit/7570ad965602233f860b9e03177a5b9dacf1b034))
-* **eta-calculator:** clamp inputs ([#249](https://github.com/CorentinTh/it-tools/issues/249)) ([531a25c](https://github.com/CorentinTh/it-tools/commit/531a25c1c4892835633ba5635c6ee48e1fbef31c))
-* **wording:** removed spaces before ponctuation ([#252](https://github.com/CorentinTh/it-tools/issues/252)) ([5f03619](https://github.com/CorentinTh/it-tools/commit/5f03619ab44c0b35455c46698ec37d79e87555b5))
-
-
-### Refactors
-
-* **base64-to-file:** clean validation to convert base64 to file ([750a76b](https://github.com/CorentinTh/it-tools/commit/750a76b00fb79c0e9c2851c112141158ee0ffab1))
-* **display:** mutualized code display ([0be33fb](https://github.com/CorentinTh/it-tools/commit/0be33fb337e8d82474922c0fdf9555aa328cd729))
-* **lint:** externalization of prettier for simpler IDE support ([02c4963](https://github.com/CorentinTh/it-tools/commit/02c49635315661ca08deb0859c5ba33113368b9b))
-* **validation:** simplified validation system ([77b5b0c](https://github.com/CorentinTh/it-tools/commit/77b5b0cab50a05dcb419ce87d74517d82e7cd2c0))
-
-### [2.9.2](https://github.com/CorentinTh/it-tools/compare/v2.9.1...v2.9.2) (2022-07-28)
-
-
-### Bug Fixes
-
-* **base64-file:** fixed url slug ([412de23](https://github.com/CorentinTh/it-tools/commit/412de23796babbc080b0768a75029ff2ddf2acfc))
-* **device-information:** handle of unknown values ([4f599b6](https://github.com/CorentinTh/it-tools/commit/4f599b699901a93444bcc67cbb3b3556a0561ae4))
-* **device-information:** prevent unwanted y-truncature of text  ([138149e](https://github.com/CorentinTh/it-tools/commit/138149e6f0be91255907a6083887898e5c68882e))
-
-
-### Refactors
-
-* **base64-file:** fixed typo ([1a22d55](https://github.com/CorentinTh/it-tools/commit/1a22d55b3c48f58b05b5a50de4fea260e781fbef))
-
-### [2.9.1](https://github.com/CorentinTh/it-tools/compare/v2.9.0...v2.9.1) (2022-07-25)
-
-
-### Refactors
-
-* **base64:** split base64 text and file conversion in two tools + base64 to file ([e6953d1](https://github.com/CorentinTh/it-tools/commit/e6953d1b67b81a6d3c19973b706f29637c421f98))
-
-## [2.9.0](https://github.com/CorentinTh/it-tools/compare/v2.8.0...v2.9.0) (2022-07-25)
-
-
-### Features
-
-* **new-tool:** added a basic auth generator ([bdee93a](https://github.com/CorentinTh/it-tools/commit/bdee93a9e45c6b46e7f75cdcbe1907f138722dca))
-
-## [2.8.0](https://github.com/CorentinTh/it-tools/compare/v2.7.0...v2.8.0) (2022-07-24)
-
-
-### Features
-
-* **new-tool:** added an ETA calculator ([125a502](https://github.com/CorentinTh/it-tools/commit/125a50215a7abb9e0b59dbbc62aee49007b05ffe))
-
-
-### Bug Fixes
-
-* **sql-prettifier:** better responsiveness ([560fcf3](https://github.com/CorentinTh/it-tools/commit/560fcf3f783c66b9197e4a015420c43a729518bc))
-
-
-### Refactors
-
-* **json-prettify:** improved layout for the json prettifier ([328fda6](https://github.com/CorentinTh/it-tools/commit/328fda65b3490869328467c5e2d5f538c689d9b6))
-* **sql-prettifier:** remove unused service files ([ba87097](https://github.com/CorentinTh/it-tools/commit/ba87097e3d834b6ea3212d28c2c33badb95f85e1))
-
-## [2.7.0](https://github.com/CorentinTh/it-tools/compare/v2.6.0...v2.7.0) (2022-07-24)
-
-
-### Features
-
-* **new-tool:** added an SQL prettifier and formatter ([d1f95f5](https://github.com/CorentinTh/it-tools/commit/d1f95f5b34a4570f1033a5289f0bd009d1aefb0c))
-
-
-### Bug Fixes
-
-* **typo:** fix few typos ([6cd25a7](https://github.com/CorentinTh/it-tools/commit/6cd25a743e32fceeaec8c1f8b94927a9c5d901f1))
-
-## [2.6.0](https://github.com/CorentinTh/it-tools/compare/v2.5.3...v2.6.0) (2022-07-23)
-
-
-### Features
-
-* **new-tool:** added chronometer ([130031c](https://github.com/CorentinTh/it-tools/commit/130031c2256f3d4d46948974b9de85ee6e92bf8b))
-* **search:** focus the search bar using Ctrl+K ([ab53048](https://github.com/CorentinTh/it-tools/commit/ab53048d5f6fdca7d00edbb79dee1a5409e6b11e))
-
-
-### Bug Fixes
-
-* **deps:** run dependencie audit auto fix ([a16161c](https://github.com/CorentinTh/it-tools/commit/a16161cdb48c064882b9dc91ec3d091d286f5c63))
-* **lint:** cleanned index.html ([c3a302b](https://github.com/CorentinTh/it-tools/commit/c3a302bc389a0e13aef4b14d5a9d3ec3a0d32729))
-* **text-statistics:** empty text mean 0 words and 0 lines ([92ce419](https://github.com/CorentinTh/it-tools/commit/92ce419f45e110509ab202485a36bf175ce345da))
-
-
-### Refactors
-
-* added accessibility labels on icon buttons ([394d085](https://github.com/CorentinTh/it-tools/commit/394d085846d976219ea775c21cd7e77f0f72a12b))
-* **import:** auto reordered imports ([2140842](https://github.com/CorentinTh/it-tools/commit/214084262cec7fb881fd397626356b080ea1a5cc))
-
-### [2.5.3](https://github.com/CorentinTh/it-tools/compare/v2.5.2...v2.5.3) (2022-07-21)
-
-
-### Bug Fixes
-
-* updated license in README ([e371e8f](https://github.com/CorentinTh/it-tools/commit/e371e8fedfd68f3cf6ecd3fbc9e2da8849f7d5bd))
-
-### [2.5.2](https://github.com/CorentinTh/it-tools/compare/v2.5.1...v2.5.2) (2022-07-21)
-
-### [2.5.1](https://github.com/CorentinTh/it-tools/compare/v2.5.0...v2.5.1) (2022-06-01)
-
-
-### Bug Fixes
-
-* **lint:** missing dangling comma ([f05c8e1](https://github.com/CorentinTh/it-tools/commit/f05c8e1dc69275e529f4c8771ad55ba211e7fb5e))
-* menu label key value was undefined ([f48cd05](https://github.com/CorentinTh/it-tools/commit/f48cd058cf3381f3bc92ea8fe37b565327707d1e))
-* **title:** trully reactive tool title ([c2e1d59](https://github.com/CorentinTh/it-tools/commit/c2e1d59cb9d8dbb1bb072a46100192cb8c59f59b))
-* tool sorting inconsistencies in home page ([5ab4dd3](https://github.com/CorentinTh/it-tools/commit/5ab4dd3d4a42c3609d72597c7ba91764170e6e96))
-
-## [2.5.0](https://github.com/CorentinTh/it-tools/compare/v2.4.2...v2.5.0) (2022-06-01)
-
-
-### Features
-
-* **new-tool:** math evaluator ([433ba2a](https://github.com/CorentinTh/it-tools/commit/433ba2a3e5419eed0c96304b37693082224a1c73))
-* **tools:** new badge for recently created tools ([11720e6](https://github.com/CorentinTh/it-tools/commit/11720e6cdefc1da4bdd638415813b609840f8462))
-
-
-### Bug Fixes
-
-* **config:** updated env values loading ([2f61c74](https://github.com/CorentinTh/it-tools/commit/2f61c745f57962cf3bb9e2c1db4a3176df042808))
-
-
-### Refactors
-
-* removed unused import ([8fb0e6a](https://github.com/CorentinTh/it-tools/commit/8fb0e6af9c3be708d3f1777a1661e1b38f197a3f))
-* renammed Tool.ts to tool.ts ([ac89490](https://github.com/CorentinTh/it-tools/commit/ac89490794ee3c1c033859ffea31a962a13cc96d))
-
-### [2.4.2](https://github.com/CorentinTh/it-tools/compare/v2.4.1...v2.4.2) (2022-06-01)
-
-
-### Refactors
-
-* **config:** added config management with figue ([6becdbb](https://github.com/CorentinTh/it-tools/commit/6becdbb42329e1bdecf158707e37ba9f13ba1d2c))
-* **imports:** removed useless defineProps import ([5ce1262](https://github.com/CorentinTh/it-tools/commit/5ce1262fb44864b829dac09d5c0b9b68d522ceb7))
-* set coerent head title for home page ([a46d125](https://github.com/CorentinTh/it-tools/commit/a46d125c19902c2f41f37c62c07bb7b548d9f6f0))
-
-### [2.4.1](https://github.com/CorentinTh/it-tools/compare/v2.4.0...v2.4.1) (2022-05-15)
-
-
-### Bug Fixes
-
-* **seo:** wrong url in share metas ([a88e4a9](https://github.com/CorentinTh/it-tools/commit/a88e4a9289e7d8cc80190f60f2fe08fe2ba08ee6))
-
-
-### Refactors
-
-* **json-viewer:** add clear button ([048bc4a](https://github.com/CorentinTh/it-tools/commit/048bc4ae943509dea2946764efaa69f845b6c478))
-* **seo:** changed title string ([d4ea393](https://github.com/CorentinTh/it-tools/commit/d4ea393c1df87ae958a06ed66a11e36b081282d4))
-
-## [2.4.0](https://github.com/CorentinTh/it-tools/compare/v2.3.2...v2.4.0) (2022-05-14)
-
-
-### Features
-
-* catch throw on validation ([a60f64f](https://github.com/CorentinTh/it-tools/commit/a60f64f74417f811204121f97c16cdb4754afc3b))
-* **hash-text:** compute all hashes at the same time ([#242](https://github.com/CorentinTh/it-tools/issues/242)) ([e9cc499](https://github.com/CorentinTh/it-tools/commit/e9cc499ed87ba926086323223c7eca4f6658b3f0))
-* **new-tool:**  json viewer ([d356b14](https://github.com/CorentinTh/it-tools/commit/d356b1488fc640a4f5b65d62e0f2f368f5941996))
-* **seo:** added cannonical meta ([34bc6a5](https://github.com/CorentinTh/it-tools/commit/34bc6a57a7bab98ff2a630d02034c342084e0af9))
-
-
-### Bug Fixes
-
-* **lint:** missing new lines ([3cfc5f8](https://github.com/CorentinTh/it-tools/commit/3cfc5f8bc27b66e6fbb6054f3c909818083ebc37))
-* update recommended extension ids ([#244](https://github.com/CorentinTh/it-tools/issues/244)) ([1d7032d](https://github.com/CorentinTh/it-tools/commit/1d7032d0268220f594de6d837a303fc1e63cbd9f))
-
-
-### Documentation
-
-* added producthunt banners ([4c4da16](https://github.com/CorentinTh/it-tools/commit/4c4da16970e1dbb13705d8b6c020cd40cd2b5e0d))
-
-
-### Refactors
-
-* **base-layout:** renammed one letter variable ([383d975](https://github.com/CorentinTh/it-tools/commit/383d97569580c4f31448c07cb97e3778bc97a8af))
-* **date-converter:** mutualised and dry-ed code ([d2c767f](https://github.com/CorentinTh/it-tools/commit/d2c767f0922e9b93172c3167226ad3db5499b9f6))
-* **seo:** changed title string ([c3b6132](https://github.com/CorentinTh/it-tools/commit/c3b6132c261bd5952bafb1ff1e576eb13d2d0a7d))
-* updated description ([b89db3c](https://github.com/CorentinTh/it-tools/commit/b89db3c8d0de601fecbd2f9f79492dff1b461bd8))
-
-### [2.3.2](https://github.com/CorentinTh/it-tools/compare/v2.3.1...v2.3.2) (2022-05-09)
-
-
-### Bug Fixes
-
-* **base-converter:** responsive input ([0b0cbd5](https://github.com/CorentinTh/it-tools/commit/0b0cbd55c3809ded2eedfa0b2238bc950b01516a))
-* **base64-converter:** async onUpload callback ([84cf1bb](https://github.com/CorentinTh/it-tools/commit/84cf1bb9645c5ae31579098df59471f7d99f6f0c))
-* **typo:** misspelings ([9755e51](https://github.com/CorentinTh/it-tools/commit/9755e51fe216e5e25c56417152e70cb5bce26b11))
-
-
-### Refactors
-
-* **responsive:** row layout for multicards on big screens ([e21230b](https://github.com/CorentinTh/it-tools/commit/e21230bbd9550ba3315607b021a60a4f9f9e1b61))
-
-### [2.3.1](https://github.com/CorentinTh/it-tools/compare/v2.3.0...v2.3.1) (2022-04-24)
-
-
-### Refactors
-
-* changed twitter account handler ([608ec3a](https://github.com/CorentinTh/it-tools/commit/608ec3a81db6583c8a2bf126b3868afd043c6981))
-
-## [2.3.0](https://github.com/CorentinTh/it-tools/compare/v2.2.0...v2.3.0) (2022-04-22)
-
-
-### Features
-
-* **new-tool:** html entities escape/unescape ([8e29a97](https://github.com/CorentinTh/it-tools/commit/8e29a97404ea0aa9b9b576656358c8c276b6f992))
-
-
-### Bug Fixes
-
-* **head:** added titles for non-tool pages ([0a15892](https://github.com/CorentinTh/it-tools/commit/0a15892dde9852ff158a8fcb72d0ad6bae8bad02))
-* **sider:** default collapsed value ([b22aa94](https://github.com/CorentinTh/it-tools/commit/b22aa941f52009118d4d3cc98277cc4c402a4c77))
-* **sider:** missing href for link in footer ([c4dabcc](https://github.com/CorentinTh/it-tools/commit/c4dabccdaeac9d03163ac2588599b000e4e74562))
-* **style:** hard width for group labels ([ebf6695](https://github.com/CorentinTh/it-tools/commit/ebf6695d2533db6f37b24dc7d338f422c551c8cb))
-* **url-parser:** cleaned weird margins on dark mode ([005ebfb](https://github.com/CorentinTh/it-tools/commit/005ebfba318ece1a9c04aefb737baed5d7aafb91))
-
-
-### Refactors
-
-* **lint:** linter auto fix ([086d31e](https://github.com/CorentinTh/it-tools/commit/086d31eab5b3b1a927803eab5e650585f61abe19))
-* removed useless ref and value ([b12cbe4](https://github.com/CorentinTh/it-tools/commit/b12cbe412407389186a58e4ceaa94f5b441c11ea))
-
-### [2.2.1](https://github.com/CorentinTh/it-tools/compare/v2.2.0...v2.2.1) (2022-04-21)
-
-
-### Bug Fixes
-
-* **head:** added titles for non-tool pages ([0a15892](https://github.com/CorentinTh/it-tools/commit/0a15892dde9852ff158a8fcb72d0ad6bae8bad02))
-* **sider:** missing href for link in footer ([c4dabcc](https://github.com/CorentinTh/it-tools/commit/c4dabccdaeac9d03163ac2588599b000e4e74562))
-* **style:** hard width for group labels ([ebf6695](https://github.com/CorentinTh/it-tools/commit/ebf6695d2533db6f37b24dc7d338f422c551c8cb))
-* **url-parser:** cleaned weird margins on dark mode ([005ebfb](https://github.com/CorentinTh/it-tools/commit/005ebfba318ece1a9c04aefb737baed5d7aafb91))
-
-## [2.2.0](https://github.com/CorentinTh/it-tools/compare/v2.1.0...v2.2.0) (2022-04-18)
-
-
-### Features
-
-* **new-tool:** url parser ([2b38d6f](https://github.com/CorentinTh/it-tools/commit/2b38d6f81e34845f896b858513e35209cba29f98))
-
-
-### Bug Fixes
-
-* **sider-footer:** fixed commit sha url ([ed9046d](https://github.com/CorentinTh/it-tools/commit/ed9046d3e1f5a7dc01c722ed139a2ae477a2d48f))
-
-## [2.1.0](https://github.com/CorentinTh/it-tools/compare/v2.0.2...v2.1.0) (2022-04-18)
-
-
-### Features
-
-* **new-tool:** bcrypt ([6d5856f](https://github.com/CorentinTh/it-tools/commit/6d5856fa93d1ffbf71856c75adc24ad87dc4b49b))
-* **new-tool:** device information ([277bd5f](https://github.com/CorentinTh/it-tools/commit/277bd5f0da359fd54c5164b376007d182a9fabde))
-
-
-### Refactors
-
-* **menu:** removed burger menu icon tooltip ([09abffb](https://github.com/CorentinTh/it-tools/commit/09abffbcf9b09cb5adc34f8754b019d0c8b60854))
-
-### [2.0.2](https://github.com/CorentinTh/it-tools/compare/v2.0.1...v2.0.2) (2022-04-18)
-
-
-### Bug Fixes
-
-* **git-memo:** pre scroll on overflow ([4fc303e](https://github.com/CorentinTh/it-tools/commit/4fc303e5e3f0bef9201cc002963e244a5d3be7b5))
-* **menu:** menu auto closed on mobile ([71f79a5](https://github.com/CorentinTh/it-tools/commit/71f79a5bbfe0dd5451a435c0a55e8b77ee7d3848))
-* **qr-code:** responsive layout ([cbf0b3d](https://github.com/CorentinTh/it-tools/commit/cbf0b3d6995e47d371a8fbcfccd65ba304fb08dc))
-
-
-### Refactors
-
-* **crontab:** list instead of table on small screen ([6b11de2](https://github.com/CorentinTh/it-tools/commit/6b11de258a8039fe7729130ede35d47592be7cbe))
-* removed empty sources ([a14cac6](https://github.com/CorentinTh/it-tools/commit/a14cac6d5c5967a47ca76a1d1a420115114c3bbf))
-* throw an error object instead of string ([4112fa5](https://github.com/CorentinTh/it-tools/commit/4112fa532e3d4be190d52bf3b11e0d4c3625a402))
-
-### [2.0.1](https://github.com/CorentinTh/it-tools/compare/v2.0.0...v2.0.1) (2022-04-16)
-
-
-### Features
-
-* **config:** added vercel.json ([2e046ad](https://github.com/CorentinTh/it-tools/commit/2e046ad09fed4a55bbf4449e3683a4150839c461))
-
-
-### Bug Fixes
-
-* remove duplicate property ([d066319](https://github.com/CorentinTh/it-tools/commit/d066319b45dee35df0212c7ff407013bd7449ae3))
-* **style:** url encode/decode layout ([34480b4](https://github.com/CorentinTh/it-tools/commit/34480b4e25ffc33536b03a0ba711c480219ad553))
-
-
-### Documentation
-
-* updated description ([70a3df0](https://github.com/CorentinTh/it-tools/commit/70a3df044ea86ac35c1839ac5ab624f694fdd845))
-
-
-### Refactors
-
-* clean imports ([724e142](https://github.com/CorentinTh/it-tools/commit/724e142222202798ea3df7d0fb34da1e7a5216a1))
-* lint fix ([a58ae24](https://github.com/CorentinTh/it-tools/commit/a58ae24d9409728ac12fb780f2c64643087de5be))
-* ref name ([5828085](https://github.com/CorentinTh/it-tools/commit/582808597c6aadf0feb48f6aae0a29b839e0dd54))
-
-## 2.0.0 (2022-04-16)
-
-
-### Features
-
-* **a11y:** aria-label on icon button ([5f50275](https://github.com/CorentinTh/it-tools/commit/5f502755d69ab21a78d9256db8a1c64f1ab82c2a))
-* added commit short sha ([668625c](https://github.com/CorentinTh/it-tools/commit/668625c6dab6e8b98f363df6c0aa3bf00a3afaa4))
-* added plausible tracker ([0808920](https://github.com/CorentinTh/it-tools/commit/0808920951b55c938537f33353a37ece96b04084))
-* added twitter link ([d126abc](https://github.com/CorentinTh/it-tools/commit/d126abc7b12a9fce778fe9883e44dca581509778))
-* footer in sider ([3f03850](https://github.com/CorentinTh/it-tools/commit/3f038503dd705ba3a5562a1e8f85a3b0e7d0be5b))
-* **layout:** menu category ([9c9be9e](https://github.com/CorentinTh/it-tools/commit/9c9be9e2e2e2c856d1af1df9d9d37a64460cd82b))
-* mobile friendly menu ([1e67fa6](https://github.com/CorentinTh/it-tools/commit/1e67fa6e0bede8c055d9e4cb9bf7f97423bc9bdf))
-* **navbar:** added github link ([d4e226e](https://github.com/CorentinTh/it-tools/commit/d4e226e09face78da794fa7e676eef85d05dde75))
-* **nav:** navigation tooltips ([b892f50](https://github.com/CorentinTh/it-tools/commit/b892f50cd633d42e6261be208bd077d92d336afb))
-* **page:** added 404 page ([3db4f91](https://github.com/CorentinTh/it-tools/commit/3db4f91c27a2ab37bb23d8feb77b6dffa9a92977))
-* **page:** home page layout ([57fd14a](https://github.com/CorentinTh/it-tools/commit/57fd14a199a253f49f3c53810490e5d31512b261))
-* persistent theme selection fallback to prefered theme ([40e9af0](https://github.com/CorentinTh/it-tools/commit/40e9af06cf28b7348152f8ec3898fa2b27ec0b21))
-* **router:** added legacy routes redirections ([dbce46b](https://github.com/CorentinTh/it-tools/commit/dbce46b470b0187a395cdd350a023641c6319582))
-* search-bar ([e8594de](https://github.com/CorentinTh/it-tools/commit/e8594de7b45102b8bc1cfb82d0839e3722d9c4c2))
-* **search:** round and clearable searchbar ([b112f5f](https://github.com/CorentinTh/it-tools/commit/b112f5f226c6b03151bbeb4fc607e449c444e667))
-* **seo:** added robots.txt and humans.txt ([cd9a3bc](https://github.com/CorentinTh/it-tools/commit/cd9a3bc9b10cf7363301e9a0d0b17f38ea640e0c))
-* **seo:** added title + description ([5f74037](https://github.com/CorentinTh/it-tools/commit/5f74037105c5e8efc5bdad2261597458cfcf26d3))
-* **seo:** pwa and icons ([b7193e8](https://github.com/CorentinTh/it-tools/commit/b7193e838ba83d0548211cff922e107a1f11f90f))
-* **share:** social image ([39746e0](https://github.com/CorentinTh/it-tools/commit/39746e07c53c22ac132ad2aaf25dd71bb6458cde))
-* **style:** dark mode ([3e92b7f](https://github.com/CorentinTh/it-tools/commit/3e92b7f1e04a709df231fce22801b55619e8faab))
-* **style:** theme overrides ([d542688](https://github.com/CorentinTh/it-tools/commit/d542688664cc9c675d1d26f4278a25f1b9e3f28d))
-* **tool:** add lch in color converter ([b5243c4](https://github.com/CorentinTh/it-tools/commit/b5243c43638f37a2d727b015bba61fab0d1b9fe9))
-* **tool:** added token generator ([40dec52](https://github.com/CorentinTh/it-tools/commit/40dec52c8467fd27eb8f3857ed72746ebaa4f509))
-* **tool:** base converter ([034c686](https://github.com/CorentinTh/it-tools/commit/034c686896d0443ea587cd152535b2227234c011))
-* **tool:** base64 string converter ([203b6a9](https://github.com/CorentinTh/it-tools/commit/203b6a9d73dcb30182b130de59920534e18b76b4))
-* **tool:** bip39-generator ([d55329f](https://github.com/CorentinTh/it-tools/commit/d55329f3abc3d3f8ad48def7d7f63b44cd768e27))
-* **tool:** bip39-generator ([765c010](https://github.com/CorentinTh/it-tools/commit/765c010700c07b2809daef0e7c694ac265ce9ddc))
-* **tool:** case converter ([7a7372d](https://github.com/CorentinTh/it-tools/commit/7a7372df191abc7ecd3fee7234d4de7aaaba03f6))
-* **tool:** color converter ([4e50b7a](https://github.com/CorentinTh/it-tools/commit/4e50b7a973e950819a52c127db2a754838cbbf8e))
-* **tool:** crontab generator ([358ff45](https://github.com/CorentinTh/it-tools/commit/358ff45ae1d9822b8a7c342515f668d25b7128b5))
-* **tool:** date-time converter ([2d9cb20](https://github.com/CorentinTh/it-tools/commit/2d9cb209b377326f4bf62067db7d5ad0c7eb7bde))
-* **tool:** encryption ([888ab2c](https://github.com/CorentinTh/it-tools/commit/888ab2cf378597e2880b6dd6a013f3bc192f2b1a))
-* **tool:** git memo ([5cd9997](https://github.com/CorentinTh/it-tools/commit/5cd9997a845f6d5f82d3ae74d3ec12603224517d))
-* **tool:** lorem ipsum generator ([5dcb2ed](https://github.com/CorentinTh/it-tools/commit/5dcb2ed95c318ea1c4134da207c844672d0fbbd8))
-* **tool:** qr-code generator ([5582d75](https://github.com/CorentinTh/it-tools/commit/5582d75927b560d9259929c787c0809634d1f8ae))
-* **tool:** random port generator ([7c540f1](https://github.com/CorentinTh/it-tools/commit/7c540f1208da749c3932aab8f2c392048c4546ae))
-* **tool:** roman-arabic numbers converter ([655019c](https://github.com/CorentinTh/it-tools/commit/655019cf23babcec2a2f1e03cac87744e3139304))
-* **tool:** text hash ([0f3b744](https://github.com/CorentinTh/it-tools/commit/0f3b7445ad1f945d9b364476147bf824ac309a6c))
-* **tool:** text statistics ([0a7c325](https://github.com/CorentinTh/it-tools/commit/0a7c3252e36a4769eedaaec4524b4ee2ae2b19c7))
-* **tool:** url encode/decode ([afac566](https://github.com/CorentinTh/it-tools/commit/afac5664c802c8480fe2c457bcfb7f5e26829cdf))
-* **tool:** uuid v4 generator ([3ae6114](https://github.com/CorentinTh/it-tools/commit/3ae61147a94791987e9e326b19063579976d8dc0))
-* **ux:** copyable input ([1859a9a](https://github.com/CorentinTh/it-tools/commit/1859a9a174010789dcd7ecefb2451e1de7b60b4c))
-
-
-### Bug Fixes
-
-* **hash-text:** added missing toString() ([4ca5fce](https://github.com/CorentinTh/it-tools/commit/4ca5fce911c3312d56bca1ffba863b2f37841c9e))
-* **hash-text:** correct copy message ([bab92ef](https://github.com/CorentinTh/it-tools/commit/bab92ef84f66372df40ce385c2949518ed158427))
-* removed global define ([889d594](https://github.com/CorentinTh/it-tools/commit/889d59499212a449ee460c68c480648e337a7ecb))
-* **style:** working dark mode persistence ([3ae8728](https://github.com/CorentinTh/it-tools/commit/3ae872847b00d65e4e2e629775d479a3333450f1))
-* **validation:** proper rules ([11d8110](https://github.com/CorentinTh/it-tools/commit/11d8110226e22e30ae16d297628c1d252a93be9e))
-
-
-### Refactors
-
-* better icon ([0af7d81](https://github.com/CorentinTh/it-tools/commit/0af7d81abd987aa5d1b0321c25a65131d978e929))
-* **clean:** removed extra console.log ([82606f6](https://github.com/CorentinTh/it-tools/commit/82606f6a477fce2041ab33adc7e95bcba4343e2b))
-* embeded sider scrollbar ([f872972](https://github.com/CorentinTh/it-tools/commit/f872972e69aeb4fde4c17f0c122ca3fd4aa1c56c))
-* icon sizes ([9bb7fc4](https://github.com/CorentinTh/it-tools/commit/9bb7fc47aa70bdc5083d0883f1496fac63f812ea))
-* menu option key ([390ef93](https://github.com/CorentinTh/it-tools/commit/390ef93232dc1b448022a0c09d36367adad9d221))
-* **page:** removed unused import ([f70fce6](https://github.com/CorentinTh/it-tools/commit/f70fce65e20989eb19b0f0976e756a43edf02e9d))
-* removed theme editor ([8559fbd](https://github.com/CorentinTh/it-tools/commit/8559fbd7744fe82b7702a5c0eb77a8d627c5a73d))
-* removed unused files ([c1e7669](https://github.com/CorentinTh/it-tools/commit/c1e76695e4a16b8312ab6031a1bdfb6368946677))
-* removed unused files ([8d9f924](https://github.com/CorentinTh/it-tools/commit/8d9f92417744a5fbd9b4108e851005f23de18b53))
-* **style:** cleaner layout ([1d09a01](https://github.com/CorentinTh/it-tools/commit/1d09a01bb25088493cc9b7f2cb7f8a8aa69ac9e9))
-* **style:** improve style for tool-card ([65a6896](https://github.com/CorentinTh/it-tools/commit/65a6896563d16f30420424e274bd306e3e9182c8))
-* **style:** label width ([fd4426d](https://github.com/CorentinTh/it-tools/commit/fd4426d246ada553528759f761c8192df85c0d44))
-* **style:** menu item height ([8951e87](https://github.com/CorentinTh/it-tools/commit/8951e87c143fda74be32bae5b28e009556d7086e))
-* **style:** menu scrollbar ([483cf66](https://github.com/CorentinTh/it-tools/commit/483cf66db992169d361487c8461938810793b978))
-* **style:** port display ([2632f24](https://github.com/CorentinTh/it-tools/commit/2632f24cc89af7dd12f7a0c1a8b58983a1bb78d8))
-* **style:** removed extra br ([b44539c](https://github.com/CorentinTh/it-tools/commit/b44539c1820defbaaa6dfe83a76c72982a641971))
-* **style:** replaced scss style block to less ([655d9d2](https://github.com/CorentinTh/it-tools/commit/655d9d22e3136bdf1dee29310ab04cf38596bdc8))
-* **style:** responsive layout ([2df3f53](https://github.com/CorentinTh/it-tools/commit/2df3f53b78bbe419763fd359788a4b0b5710e4b7))
-* **style:** updated linter config ([6b58ec5](https://github.com/CorentinTh/it-tools/commit/6b58ec554a0de91139f16d67cec42536d093d5fb))
-
-
-### Documentation
-
-* added new tool creation procedure ([8177883](https://github.com/CorentinTh/it-tools/commit/81778834e6a79725c42eae1772935682ce7580c6))
-* updated readme ([1134e0b](https://github.com/CorentinTh/it-tools/commit/1134e0b822edbc25ce9ff83007bf5d331a1becbd))

Dockerfile

@@ -0,0 +1,14 @@
+# build stage
+FROM node:lts-alpine AS build-stage
+WORKDIR /app
+COPY . .
+RUN npm install -g pnpm
+RUN pnpm i --frozen-lockfile
+RUN pnpm build
+
+# production stage
+FROM nginx:stable-alpine AS production-stage
+COPY --from=build-stage /app/dist /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -8,13 +8,34 @@ Please check the [issues](https://github.com/CorentinTh/it-tools/issues) to see
 
 You have an idea of a tool? Submit a [feature request](https://github.com/CorentinTh/it-tools/issues/new?assignees=corentinth&labels=&template=feature_request.md&title=)!
 
+## Self host
+
+Self host solutions for your homelab
+
+**From docker hub:**
+
+```sh
+docker run -d --name it-tools --restart unless-stopped -p 8080:80 corentinth/it-tools:latest
+```
+
+**From github packages:**
+
+```sh
+docker run -d --name it-tools --restart unless-stopped -p 8080:80 ghcr.io/corentinth/it-tools:latest
+```
+
+**Other solutions:**
+
+- [Tipi](https://www.runtipi.io/docs/apps-available)
+- [Unraid](https://unraid.net/community/apps?q=it-tools)
+
 ## Contribute
 
-## Recommended IDE Setup
+### Recommended IDE Setup
 
 [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
 
-## Type Support for `.vue` Imports in TS
+### Type Support for `.vue` Imports in TS
 
 TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
 
@@ -25,11 +46,7 @@ If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has a
    2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
 2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
 
-## Customize configuration
+### Project Setup
-
-See [Vite Configuration Reference](https://vitejs.dev/config/).
-
-## Project Setup
 
 ```sh
 pnpm install
@@ -64,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.

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']>
+  }
+}

components.d.ts

@@ -0,0 +1,150 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+import '@vue/runtime-core'
+
+export {}
+
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    '404.page': typeof import('./src/pages/404.page.vue')['default']
+    About: typeof import('./src/pages/About.vue')['default']
+    App: typeof import('./src/App.vue')['default']
+    'Base.layout': typeof import('./src/layouts/base.layout.vue')['default']
+    Base64FileConverter: typeof import('./src/tools/base64-file-converter/base64-file-converter.vue')['default']
+    Base64StringConverter: typeof import('./src/tools/base64-string-converter/base64-string-converter.vue')['default']
+    BasicAuthGenerator: typeof import('./src/tools/basic-auth-generator/basic-auth-generator.vue')['default']
+    Bcrypt: typeof import('./src/tools/bcrypt/bcrypt.vue')['default']
+    BenchmarkBuilder: typeof import('./src/tools/benchmark-builder/benchmark-builder.vue')['default']
+    Bip39Generator: typeof import('./src/tools/bip39-generator/bip39-generator.vue')['default']
+    CaseConverter: typeof import('./src/tools/case-converter/case-converter.vue')['default']
+    CButton: typeof import('./src/ui/c-button/c-button.vue')['default']
+    'CButton.demo': typeof import('./src/ui/c-button/c-button.demo.vue')['default']
+    CCard: typeof import('./src/ui/c-card/c-card.vue')['default']
+    'CCard.demo': typeof import('./src/ui/c-card/c-card.demo.vue')['default']
+    ChmodCalculator: typeof import('./src/tools/chmod-calculator/chmod-calculator.vue')['default']
+    Chronometer: typeof import('./src/tools/chronometer/chronometer.vue')['default']
+    CLink: typeof import('./src/ui/c-link/c-link.vue')['default']
+    'CLink.demo': typeof import('./src/ui/c-link/c-link.demo.vue')['default']
+    CollapsibleToolMenu: typeof import('./src/components/CollapsibleToolMenu.vue')['default']
+    ColorConverter: typeof import('./src/tools/color-converter/color-converter.vue')['default']
+    ColoredCard: typeof import('./src/components/ColoredCard.vue')['default']
+    CopyableIpLike: typeof import('./src/tools/ipv4-subnet-calculator/copyable-ip-like.vue')['default']
+    CrontabGenerator: typeof import('./src/tools/crontab-generator/crontab-generator.vue')['default']
+    DateTimeConverter: typeof import('./src/tools/date-time-converter/date-time-converter.vue')['default']
+    'Demo.routes': typeof import('./src/ui/demo/demo.routes.vue')['default']
+    DemoWrapper: typeof import('./src/ui/demo/demo-wrapper.vue')['default']
+    DeviceInformation: typeof import('./src/tools/device-information/device-information.vue')['default']
+    DiffViewer: typeof import('./src/tools/json-diff/diff-viewer/diff-viewer.vue')['default']
+    DockerRunToDockerComposeConverter: typeof import('./src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue')['default']
+    DynamicValues: typeof import('./src/tools/benchmark-builder/dynamic-values.vue')['default']
+    Editor: typeof import('./src/tools/html-wysiwyg-editor/editor/editor.vue')['default']
+    Encryption: typeof import('./src/tools/encryption/encryption.vue')['default']
+    EtaCalculator: typeof import('./src/tools/eta-calculator/eta-calculator.vue')['default']
+    FavoriteButton: typeof import('./src/components/FavoriteButton.vue')['default']
+    FormatTransformer: typeof import('./src/components/FormatTransformer.vue')['default']
+    GitMemo: typeof import('./src/tools/git-memo/git-memo.md')['default']
+    HashText: typeof import('./src/tools/hash-text/hash-text.vue')['default']
+    HmacGenerator: typeof import('./src/tools/hmac-generator/hmac-generator.vue')['default']
+    'Home.page': typeof import('./src/pages/Home.page.vue')['default']
+    HtmlEntities: typeof import('./src/tools/html-entities/html-entities.vue')['default']
+    HtmlWysiwygEditor: typeof import('./src/tools/html-wysiwyg-editor/html-wysiwyg-editor.vue')['default']
+    HttpStatusCodes: typeof import('./src/tools/http-status-codes/http-status-codes.vue')['default']
+    InputCopyable: typeof import('./src/components/InputCopyable.vue')['default']
+    IntegerBaseConverter: typeof import('./src/tools/integer-base-converter/integer-base-converter.vue')['default']
+    Ipv4AddressConverter: typeof import('./src/tools/ipv4-address-converter/ipv4-address-converter.vue')['default']
+    Ipv4RangeExpander: typeof import('./src/tools/ipv4-range-expander/ipv4-range-expander.vue')['default']
+    Ipv4SubnetCalculator: typeof import('./src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue')['default']
+    Ipv6UlaGenerator: typeof import('./src/tools/ipv6-ula-generator/ipv6-ula-generator.vue')['default']
+    JsonDiff: typeof import('./src/tools/json-diff/json-diff.vue')['default']
+    JsonMinify: typeof import('./src/tools/json-minify/json-minify.vue')['default']
+    JsonToYaml: typeof import('./src/tools/json-to-yaml-converter/json-to-yaml.vue')['default']
+    JsonViewer: typeof import('./src/tools/json-viewer/json-viewer.vue')['default']
+    JwtParser: typeof import('./src/tools/jwt-parser/jwt-parser.vue')['default']
+    KeycodeInfo: typeof import('./src/tools/keycode-info/keycode-info.vue')['default']
+    LoremIpsumGenerator: typeof import('./src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue')['default']
+    MacAddressLookup: typeof import('./src/tools/mac-address-lookup/mac-address-lookup.vue')['default']
+    MathEvaluator: typeof import('./src/tools/math-evaluator/math-evaluator.vue')['default']
+    MenuBar: typeof import('./src/tools/html-wysiwyg-editor/editor/menu-bar.vue')['default']
+    MenuBarItem: typeof import('./src/tools/html-wysiwyg-editor/editor/menu-bar-item.vue')['default']
+    MenuIconItem: typeof import('./src/components/MenuIconItem.vue')['default']
+    MenuLayout: typeof import('./src/components/MenuLayout.vue')['default']
+    MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default']
+    MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default']
+    NAlert: typeof import('naive-ui')['NAlert']
+    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']
+    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']
+    OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']
+    QrCodeGenerator: typeof import('./src/tools/qr-code-generator/qr-code-generator.vue')['default']
+    RandomPortGenerator: typeof import('./src/tools/random-port-generator/random-port-generator.vue')['default']
+    ResultRow: typeof import('./src/tools/ipv4-range-expander/result-row.vue')['default']
+    RomanNumeralConverter: typeof import('./src/tools/roman-numeral-converter/roman-numeral-converter.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    RsaKeyPairGenerator: typeof import('./src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue')['default']
+    SearchBar: typeof import('./src/components/SearchBar.vue')['default']
+    SearchBarItem: typeof import('./src/components/SearchBarItem.vue')['default']
+    SlugifyString: typeof import('./src/tools/slugify-string/slugify-string.vue')['default']
+    SpanCopyable: typeof import('./src/components/SpanCopyable.vue')['default']
+    SqlPrettify: typeof import('./src/tools/sql-prettify/sql-prettify.vue')['default']
+    SvgPlaceholderGenerator: typeof import('./src/tools/svg-placeholder-generator/svg-placeholder-generator.vue')['default']
+    TemperatureConverter: typeof import('./src/tools/temperature-converter/temperature-converter.vue')['default']
+    TextareaCopyable: typeof import('./src/components/TextareaCopyable.vue')['default']
+    TextStatistics: typeof import('./src/tools/text-statistics/text-statistics.vue')['default']
+    TextToNatoAlphabet: typeof import('./src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue')['default']
+    TokenDisplay: typeof import('./src/tools/otp-code-generator-and-validator/token-display.vue')['default']
+    'TokenGenerator.tool': typeof import('./src/tools/token-generator/token-generator.tool.vue')['default']
+    'Tool.layout': typeof import('./src/layouts/tool.layout.vue')['default']
+    ToolCard: typeof import('./src/components/ToolCard.vue')['default']
+    UrlEncoder: typeof import('./src/tools/url-encoder/url-encoder.vue')['default']
+    UrlParser: typeof import('./src/tools/url-parser/url-parser.vue')['default']
+    UserAgentParser: typeof import('./src/tools/user-agent-parser/user-agent-parser.vue')['default']
+    UserAgentResultCards: typeof import('./src/tools/user-agent-parser/user-agent-result-cards.vue')['default']
+    UuidGenerator: typeof import('./src/tools/uuid-generator/uuid-generator.vue')['default']
+    YamlToJson: typeof import('./src/tools/yaml-to-json-converter/yaml-to-json.vue')['default']
+  }
+}

nginx.conf

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "it-tools",
-  "version": "2.16.0",
+  "version": "2023.4.23-92bd835",
   "description": "Collection of handy online tools for developers, with great UX. ",
   "keywords": [
     "productivity",
@@ -25,78 +25,103 @@
     "preview": "vite preview --port 5050",
     "test": "npm run test:unit",
     "test:unit": "vitest --environment jsdom",
+    "test:e2e": "playwright test",
     "coverage": "vitest run --coverage",
     "typecheck": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
     "lint": "eslint src --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --ignore-path .gitignore",
-    "release": "standard-version"
+    "script:create-new-tool": "node scripts/create-tool.mjs",
+    "release": "node ./scripts/release.mjs"
   },
   "dependencies": {
     "@it-tools/bip39": "^0.0.4",
     "@it-tools/oggen": "^1.3.0",
+    "@sindresorhus/slugify": "^2.2.0",
+    "@tiptap/pm": "2.0.0-beta.220",
+    "@tiptap/starter-kit": "2.0.0-beta.220",
+    "@tiptap/vue-3": "2.0.0-beta.220",
     "@vicons/material": "^0.12.0",
     "@vicons/tabler": "^0.12.0",
     "@vueuse/core": "^8.9.4",
     "@vueuse/head": "^0.7.13",
+    "@vueuse/router": "^9.13.0",
     "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.15.0",
+    "cronstrue": "^2.26.0",
     "crypto-js": "^4.1.1",
     "date-fns": "^2.29.3",
     "figue": "^1.2.0",
     "fuse.js": "^6.6.2",
-    "highlight.js": "^11.6.0",
+    "highlight.js": "^11.7.0",
-    "json5": "^2.2.1",
+    "json5": "^2.2.3",
+    "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",
     "mathjs": "^10.6.4",
     "mime-types": "^2.1.35",
-    "naive-ui": "^2.33.5",
+    "naive-ui": "^2.34.3",
-    "pinia": "^2.0.23",
+    "netmask": "^2.0.2",
+    "node-forge": "^1.3.1",
+    "oui": "^12.0.52",
+    "pinia": "^2.0.34",
     "plausible-tracker": "^0.3.8",
     "qrcode": "^1.5.1",
     "randombytes": "^2.1.0",
     "sql-formatter": "^8.2.0",
+    "ts-pattern": "^4.2.2",
+    "ua-parser-js": "^1.0.35",
     "uuid": "^8.3.2",
-    "vue": "^3.2.45",
+    "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.188",
+    "@types/lodash": "^4.14.192",
     "@types/mime-types": "^2.1.1",
-    "@types/node": "^16.18.3",
+    "@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.42.1",
+    "@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.0.0",
+    "@vue/eslint-config-prettier": "^7.1.0",
     "@vue/eslint-config-typescript": "^10.0.0",
-    "@vue/test-utils": "^2.2.2",
+    "@vue/test-utils": "^2.3.2",
     "@vue/tsconfig": "^0.1.3",
-    "c8": "^7.12.0",
+    "c8": "^7.13.0",
-    "eslint": "^8.27.0",
+    "consola": "^3.0.2",
-    "eslint-config-prettier": "^8.5.0",
+    "eslint": "^8.38.0",
-    "eslint-import-resolver-typescript": "^3.5.2",
+    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-import": "^2.26.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.7.1",
+    "prettier": "^2.8.7",
-    "standard-version": "^9.5.0",
+    "start-server-and-test": "^1.15.4",
-    "start-server-and-test": "^1.14.0",
     "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",
     "vite-svg-loader": "^3.6.0",
     "vitest": "^0.13.1",
     "vue-tsc": "^0.31.4",
-    "workbox-window": "^6.5.4"
+    "workbox-window": "^6.5.4",
+    "zx": "^7.2.1"
   }
 }

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,
+  },
+});

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) {
@@ -28,9 +29,9 @@ createToolFile(
   `${toolName}.vue`,
   `
 <template>
-  <n-card>
+  <div>
     Lorem ipsum
-  </n-card>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -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'));
 

scripts/getLatestChangelog.mjs

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

scripts/release.mjs

@@ -0,0 +1,57 @@
+import { $, argv } from 'zx';
+import { consola } from 'consola';
+import { rawCommitsToMarkdown } from './shared/commits.mjs';
+import { addToChangelog } from './shared/changelog.mjs';
+
+$.verbose = false;
+
+const isDryRun = argv['dry-run'] ?? false;
+
+const now = new Date();
+const currentShortSha = (await $`git rev-parse --short HEAD`).stdout.trim();
+
+const calver = now.toISOString().slice(0, 10).replace(/-/g, '.');
+const version = `${calver}-${currentShortSha}`;
+
+const { stdout: rawCommits } = await $`git log --pretty=oneline $(git describe --tags --abbrev=0)..HEAD`;
+
+const markdown = rawCommitsToMarkdown({ rawCommits });
+
+consola.info(`Changelog: \n\n${markdown}\n\n`);
+
+if (isDryRun) {
+  consola.info(`[dry-run] Not creating version nor tag`);
+  consola.info('Aborting');
+  process.exit(0);
+}
+
+const shouldContinue = await consola.prompt(
+  'This script will create a new version and tag, and update the changelog. Continue?',
+  {
+    type: 'confirm',
+  },
+);
+
+if (!shouldContinue) {
+  consola.info('Aborting');
+  process.exit(0);
+}
+
+consola.info('Updating changelog');
+await addToChangelog({ changelog: markdown, version });
+consola.success('Changelog updated');
+
+try {
+  consola.info('Committing changelog changes');
+  await $`git add CHANGELOG.md`;
+  await $`git commit -m "docs(changelog): update changelog for ${version}"`;
+  consola.success('Changelog changes committed');
+
+  consola.info('Creating version and tag');
+  await $`npm version ${version} -m "chore(version): release ${version}"`;
+  consola.info('Npm version released with tag');
+} catch (error) {
+  consola.error(error);
+  consola.info('Aborting');
+  process.exit(1);
+}

scripts/shared/changelog.mjs

@@ -0,0 +1,15 @@
+import { readFile, writeFile } from 'fs/promises';
+
+export { addToChangelog };
+
+async function addToChangelog({ changelog, version, changelogPath = './CHANGELOG.md' }) {
+  const changelogContent = await readFile(changelogPath, 'utf-8');
+  const versionTitle = `## Version ${version}`;
+
+  if (changelogContent.includes(versionTitle)) {
+    throw new Error(`Version ${version} already exists in the changelog`);
+  }
+
+  const newChangeLogContent = changelogContent.replace('## ', `${versionTitle}\n\n${changelog}\n\n## `);
+  await writeFile(changelogPath, newChangeLogContent, 'utf-8');
+}

scripts/shared/commits.mjs

@@ -0,0 +1,54 @@
+import _ from 'lodash';
+
+export { rawCommitsToMarkdown };
+
+const commitScopesToHumanReadable = {
+  build: 'Build system',
+  chore: 'Chores',
+  ci: 'Continuous integration',
+  docs: 'Documentation',
+  feat: 'Features',
+  fix: 'Bug fixes',
+  infra: 'Infrastucture',
+  perf: 'Performance',
+  refactor: 'Refactoring',
+  test: 'Tests',
+};
+
+const commitTypesOrder = ['feat', 'fix', 'perf', 'refactor', 'test', 'build', 'ci', 'chore', 'other'];
+
+const getCommitTypeSortIndex = (type) =>
+  commitTypesOrder.includes(type) ? commitTypesOrder.indexOf(type) : commitTypesOrder.length;
+
+function parseCommitLine(commit) {
+  const [sha, ...splittedRawMessage] = commit.trim().split(' ');
+  const rawMessage = splittedRawMessage.join(' ');
+  const { type, scope, subject } = /^(?<type>.*?)(\((?<scope>.*)\))?: ?(?<subject>.+)$/.exec(rawMessage)?.groups ?? {};
+
+  return {
+    sha: sha.slice(0, 7),
+    type: type ?? 'other',
+    scope,
+    subject: subject ?? rawMessage,
+  };
+}
+
+function commitSectionsToMarkdown({ type, commits }) {
+  return [
+    `### ${commitScopesToHumanReadable[type] ?? _.capitalize(type)}`,
+    ...commits.map(({ sha, scope, subject }) => ['-', scope ? `**${scope}**:` : '', subject, `(${sha})`].join(' ')),
+  ].join('\n');
+}
+
+function rawCommitsToMarkdown({ rawCommits }) {
+  return _.chain(rawCommits)
+    .trim()
+    .split('\n')
+    .map(parseCommitLine)
+    .groupBy('type')
+    .map((commits, type) => ({ type, commits }))
+    .sortBy(({ type }) => getCommitTypeSortIndex(type))
+    .map(commitSectionsToMarkdown)
+    .join('\n\n')
+    .value();
+}

src/App.vue

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

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>

src/components/ColoredCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-card class="colored-card">
+  <c-card class="colored-card">
     <n-space justify="space-between" align="center">
       <n-icon class="icon" size="40" :component="icon" />
     </n-space>
@@ -12,7 +12,7 @@
         <slot />
       </n-ellipsis>
     </div>
-  </n-card>
+  </c-card>
 </template>
 
 <script setup lang="ts">

src/components/FavoriteButton.vue

@@ -1,11 +1,15 @@
 <template>
   <n-tooltip trigger="hover">
     <template #trigger>
-      <n-button circle quaternary :type="buttonType" :style="{ opacity: isFavorite ? 1 : 0.2 }" @click="toggleFavorite">
+      <c-button
-        <template #icon>
+        variant="text"
-          <n-icon :component="FavoriteFilled" />
+        circle
-        </template>
+        :type="buttonType"
-      </n-button>
+        :style="{ opacity: isFavorite ? 1 : 0.2 }"
+        @click="toggleFavorite"
+      >
+        <n-icon :component="FavoriteFilled" />
+      </c-button>
     </template>
     {{ isFavorite ? 'Remove from favorites' : 'Add to favorites' }}
   </n-tooltip>

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>

src/components/InputCopyable.vue

@@ -3,9 +3,9 @@
     <template #suffix>
       <n-tooltip trigger="hover">
         <template #trigger>
-          <n-button quaternary circle @click="onCopyClicked">
+          <c-button circle variant="text" @click="onCopyClicked">
             <n-icon :component="ContentCopyFilled" />
-          </n-button>
+          </c-button>
         </template>
         {{ tooltipText }}
       </n-tooltip>

src/components/NavbarButtons.vue

@@ -1,56 +1,50 @@
 <template>
   <n-tooltip trigger="hover">
     <template #trigger>
-      <n-button
+      <c-button
-        size="large"
         circle
-        quaternary
+        variant="text"
-        tag="a"
         href="https://github.com/CorentinTh/it-tools"
-        rel="noopener"
         target="_blank"
-        aria-label="IT-Tools' github repository"
+        rel="noopener noreferrer"
+        aria-label="IT-Tools' GitHub repository"
       >
         <n-icon size="25" :component="BrandGithub" />
-      </n-button>
+      </c-button>
     </template>
     Github repository
   </n-tooltip>
 
   <n-tooltip trigger="hover">
     <template #trigger>
-      <n-button
+      <c-button
-        size="large"
         circle
-        quaternary
+        variant="text"
-        tag="a"
         href="https://twitter.com/ittoolsdottech"
         rel="noopener"
         target="_blank"
-        aria-label="IT Tools' twitter account"
+        aria-label="IT Tools' Twitter account"
       >
         <n-icon size="25" :component="BrandTwitter" />
-      </n-button>
+      </c-button>
     </template>
-    IT Tools' twitter account
+    IT Tools' Twitter account
   </n-tooltip>
 
-  <router-link to="/about" #="{ navigate, href }" custom>
-    <n-tooltip trigger="hover">
-      <template #trigger>
-        <n-button tag="a" :href="href" circle quaternary size="large" aria-label="About" @click="navigate">
-          <n-icon size="25" :component="InfoCircle" />
-        </n-button>
-      </template>
-      About
-    </n-tooltip>
-  </router-link>
   <n-tooltip trigger="hover">
     <template #trigger>
-      <n-button size="large" circle quaternary aria-label="Toggle dark/light mode" @click="isDarkTheme = !isDarkTheme">
+      <c-button circle variant="text" to="/about" aria-label="About">
+        <n-icon size="25" :component="InfoCircle" />
+      </c-button>
+    </template>
+    About
+  </n-tooltip>
+  <n-tooltip trigger="hover">
+    <template #trigger>
+      <c-button circle variant="text" aria-label="Toggle dark/light mode" @click="toggleDarkTheme">
         <n-icon v-if="isDarkTheme" size="25" :component="Sun" />
         <n-icon v-else size="25" :component="Moon" />
-      </n-button>
+      </c-button>
     </template>
     <span v-if="isDarkTheme">Light mode</span>
     <span v-else>Dark mode</span>
@@ -59,11 +53,20 @@
 
 <script setup lang="ts">
 import { useStyleStore } from '@/stores/style.store';
+import { useThemeStore } from '@/ui/theme/theme.store';
 import { BrandGithub, BrandTwitter, InfoCircle, Moon, Sun } from '@vicons/tabler';
 import { toRefs } from 'vue';
 
 const styleStore = useStyleStore();
 const { isDarkTheme } = toRefs(styleStore);
+
+const themeStore = useThemeStore();
+
+function toggleDarkTheme() {
+  isDarkTheme.value = !isDarkTheme.value;
+
+  themeStore.toggleTheme();
+}
 </script>
 
 <style lang="less" scoped>

src/components/SearchBar.vue

@@ -81,7 +81,7 @@ function onFocus() {
     <n-auto-complete
       v-model:value="queryString"
       :options="options"
-      :on-select="(value) => onSelect(String(value))"
+      :on-select="(value: string | number) => onSelect(String(value))"
       :render-label="renderOption"
       :default-value="'aa'"
       :get-show="() => displayDropDown"

src/components/SpanCopyable.vue

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

src/components/TextareaCopyable.vue

@@ -1,28 +1,28 @@
 <template>
   <div style="overflow-x: hidden; width: 100%">
-    <n-card class="result-card">
+    <c-card class="result-card">
       <n-scrollbar
         x-scrollable
         trigger="none"
         :style="height ? `min-height: ${height - 40 /* card padding */ + 10 /* negative margin compensation */}px` : ''"
       >
         <n-config-provider :hljs="hljs">
-          <n-code :code="value" :language="language" :trim="false" />
+          <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">
+            <c-button circle important:h-10 important:w-10 @click="onCopyClicked">
               <n-icon size="22" :component="Copy" />
-            </n-button>
+            </c-button>
           </div>
         </template>
         <span>{{ tooltipText }}</span>
       </n-tooltip>
-    </n-card>
+    </c-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>
+      <c-button @click="onCopyClicked"> {{ tooltipText }} </c-button>
     </n-space>
   </div>
 </template>
@@ -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<{

src/components/ToolCard.vue

@@ -1,6 +1,6 @@
 <template>
   <router-link :to="tool.path">
-    <n-card class="tool-card">
+    <c-card class="tool-card">
       <n-space justify="space-between" align="center">
         <n-icon class="icon" size="40" :component="tool.icon" />
         <n-space align="center">
@@ -24,11 +24,12 @@
       </n-h3>
 
       <div class="description">
-        <n-ellipsis :line-clamp="2" :tooltip="false">
+        <n-ellipsis :line-clamp="2" :tooltip="false" style="min-height: 44.78px">
           {{ tool.description }}
+          <br />&nbsp;
         </n-ellipsis>
       </div>
-    </n-card>
+    </c-card>
   </router-link>
 </template>
 
@@ -36,11 +37,14 @@
 import type { Tool } from '@/tools/tools.types';
 import { useThemeVars } from 'naive-ui';
 import { toRefs } from 'vue';
+import { useAppTheme } from '@/ui/theme/themes';
 import FavoriteButton from './FavoriteButton.vue';
 
 const props = defineProps<{ tool: Tool & { category: string } }>();
 const { tool } = toRefs(props);
 const theme = useThemeVars();
+
+const appTheme = useAppTheme();
 </script>
 
 <style lang="less" scoped>
@@ -49,8 +53,11 @@ a {
 }
 
 .tool-card {
+  transition: border-color ease 0.5s;
+  border-width: 2px !important;
+
   &:hover {
-    border-color: var(--n-color-target);
+    border-color: v-bind('appTheme.primary.colorHover');
   }
 
   .icon {

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;
+}

src/composable/copy.ts

@@ -1,9 +1,8 @@
-import { useClipboard } from '@vueuse/core';
+import { useClipboard, type MaybeRef, get } from '@vueuse/core';
 import { useMessage } from 'naive-ui';
-import type { Ref } from 'vue';
 
-export function useCopy({ source, text = 'Copied to the clipboard' }: { source: Ref; text?: string }) {
+export function useCopy({ source, text = 'Copied to the clipboard' }: { source: MaybeRef<unknown>; text?: string }) {
-  const { copy } = useClipboard({ source });
+  const { copy } = useClipboard({ source: computed(() => String(get(source))) });
   const message = useMessage();
 
   return {

src/composable/queryParams.ts

@@ -0,0 +1,35 @@
+import { useRouteQuery } from '@vueuse/router';
+import { computed } from 'vue';
+
+export { useQueryParam };
+
+const transformers = {
+  number: {
+    fromQuery: (value: string) => Number(value),
+    toQuery: (value: number) => String(value),
+  },
+  string: {
+    fromQuery: (value: string) => value,
+    toQuery: (value: string) => value,
+  },
+  boolean: {
+    fromQuery: (value: string) => value.toLowerCase() === 'true',
+    toQuery: (value: boolean) => (value ? 'true' : 'false'),
+  },
+};
+
+function useQueryParam<T>({ name, defaultValue }: { name: string; defaultValue: T }) {
+  const type = typeof defaultValue;
+  const transformer = transformers[type as keyof typeof transformers] ?? transformers.string;
+
+  const proxy = useRouteQuery(name, transformer.toQuery(defaultValue as never));
+
+  return computed<T>({
+    get() {
+      return transformer.fromQuery(proxy.value) as unknown as T;
+    },
+    set(value) {
+      proxy.value = transformer.toQuery(value as never);
+    },
+  });
+}

src/composable/validation.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;

src/config.ts

@@ -23,12 +23,18 @@ export const config = figue({
     env: {
       doc: 'Application current env',
       format: 'enum',
-      values: ['production', 'development', 'test'],
+      values: ['production', 'development', 'preview', 'test'],
       default: 'development',
-      env: 'MODE',
+      env: 'VITE_VERCEL_ENV',
     },
   },
   plausible: {
+    isTrackerEnabled: {
+      doc: 'Is the tracker enabled',
+      format: 'boolean',
+      default: false,
+      env: 'VITE_TRACKER_ENABLED',
+    },
     domain: {
       doc: 'Plausible current domain',
       format: 'string',
@@ -47,13 +53,11 @@ export const config = figue({
       default: false,
     },
   },
-  tools: {
+  showBanner: {
-    newTools: {
+    doc: 'Show the banner',
-      doc: 'Tool names for tools flagged a as new',
+    format: 'boolean',
-      format: 'array',
+    default: false,
-      default: [],
+    env: 'VITE_SHOW_BANNER',
-      env: 'VITE_NEW_TOOLS',
-    },
   },
 })
   .loadEnv({

src/layouts/base.layout.vue

@@ -1,50 +1,33 @@
 <script lang="ts" setup>
-import { NIcon, useThemeVars, type MenuGroupOption } from 'naive-ui';
+import { NIcon, useThemeVars } from 'naive-ui';
-import { computed, h } from 'vue';
+import { computed } from 'vue';
-import { RouterLink, useRoute } from 'vue-router';
+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 { ToolCategory } from '@/tools/tools.types';
-import type { Tool } 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[]>(() =>
+const tools = computed<ToolCategory[]>(() => [
-  [
+  ...(toolStore.favoriteTools.length > 0 ? [{ name: 'Your favorite tools', components: toolStore.favoriteTools }] : []),
-    ...(toolStore.favoriteTools.length > 0
+  ...toolsByCategory,
-      ? [{ 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,
-    })),
-  })),
-);
 </script>
 
 <template>
@@ -64,51 +47,31 @@ const menuOptions = computed<MenuGroupOption[]>(() =>
           <navbar-buttons />
         </n-space>
 
-        <n-menu
+        <collapsible-tool-menu :tools-by-category="tools" />
-          class="menu"
-          :value="(route.name as string)"
-          :collapsed-width="64"
-          :collapsed-icon-size="22"
-          :options="menuOptions"
-          :indent="20"
-        />
 
         <div class="footer">
           <div>
             IT-Tools
 
-            <n-button
+            <c-link target="_blank" rel="noopener" :href="`https://github.com/CorentinTh/it-tools/tree/v${version}`">
-              text
-              tag="a"
-              target="_blank"
-              rel="noopener"
-              type="primary"
-              depth="3"
-              :href="`https://github.com/CorentinTh/it-tools/tree/v${version}`"
-            >
               v{{ version }}
-            </n-button>
+            </c-link>
 
             <template v-if="commitSha && commitSha.length > 0">
               -
-              <n-button
+              <c-link
-                text
-                tag="a"
                 target="_blank"
                 rel="noopener"
                 type="primary"
-                depth="3"
                 :href="`https://github.com/CorentinTh/it-tools/tree/${commitSha}`"
               >
                 {{ commitSha }}
-              </n-button>
+              </c-link>
             </template>
           </div>
           <div>
             © {{ new Date().getFullYear() }}
-            <n-button text tag="a" target="_blank" rel="noopener" type="primary" href="https://github.com/CorentinTh">
+            <c-link target="_blank" rel="noopener" href="https://github.com/CorentinTh"> Corentin Thomasset </c-link>
-              Corentin Thomasset
-            </n-button>
           </div>
         </div>
       </div>
@@ -116,34 +79,24 @@ const menuOptions = computed<MenuGroupOption[]>(() =>
 
     <template #content>
       <div class="navigation">
-        <n-button
+        <c-button
           :size="styleStore.isSmallScreen ? 'medium' : 'large'"
           circle
-          quaternary
+          variant="text"
           aria-label="Toggle menu"
           @click="styleStore.isMenuCollapsed = !styleStore.isMenuCollapsed"
         >
           <n-icon size="25" :component="Menu2" />
-        </n-button>
+        </c-button>
 
-        <router-link to="/" #="{ navigate, href }" custom>
+        <n-tooltip trigger="hover">
-          <n-tooltip trigger="hover">
+          <template #trigger>
-            <template #trigger>
+            <c-button to="/" circle variant="text" aria-label="Home">
-              <n-button
+              <n-icon size="25" :component="Home2" />
-                tag="a"
+            </c-button>
-                :href="href"
+          </template>
-                :size="styleStore.isSmallScreen ? 'medium' : 'large'"
+          Home
-                circle
+        </n-tooltip>
-                quaternary
-                aria-label="Home"
-                @click="navigate"
-              >
-                <n-icon size="25" :component="Home2" />
-              </n-button>
-            </template>
-            Home
-          </n-tooltip>
-        </router-link>
 
         <search-bar />
 
@@ -151,11 +104,9 @@ const menuOptions = computed<MenuGroupOption[]>(() =>
 
         <n-tooltip trigger="hover">
           <template #trigger>
-            <n-button
+            <c-button
               round
-              type="primary"
+              href="https://www.buymeacoffee.com/cthmsst"
-              tag="a"
-              href="https://github.com/sponsors/CorentinTh"
               rel="noopener"
               target="_blank"
               class="support-button"
@@ -163,8 +114,8 @@ 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>
+            </c-button>
           </template>
           ❤ Support IT Tools development !
         </n-tooltip>
@@ -189,8 +140,8 @@ const menuOptions = computed<MenuGroupOption[]>(() =>
 .support-button {
   background: rgb(37, 99, 108);
   background: linear-gradient(48deg, rgba(37, 99, 108, 1) 0%, rgba(59, 149, 111, 1) 60%, rgba(20, 160, 88, 1) 100%);
-  color: #fff;
+  color: #fff !important;
-  transition: all ease 0.2s;
+  transition: padding ease 0.2s !important;
 
   &:hover {
     color: #fff;

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';

src/pages/404.page.vue

@@ -1,23 +1,18 @@
 <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">
+  <div mt-20 flex flex-col items-center>
-    <n-result status="404" title="404 Not Found" description="Sorry, this page does not seem to exist">
+    <n-icon :component="Coffee" size="100" depth="3" />
-      <template #footer>
+
-        <router-link to="/" #="{ navigate, href }" custom>
+    <n-h1 m-0 mt-3>404 Not Found</n-h1>
-          <n-button tag="a" :href="href" secondary type="success" @click="navigate"> Back home </n-button>
+    <n-text mt-4 block depth="3">Sorry, this page does not seem to exist</n-text>
-        </router-link>
+    <n-text mb-8 block depth="3">Maybe the cache is doing tricky things, try force-refreshing?</n-text>
-      </template>
+
-    </n-result>
+    <c-button to="/"> Back home </c-button>
   </div>
 </template>
-
-<style scoped>
-.e404-wrapper {
-  padding-top: 150px;
-}
-</style>

src/pages/About.vue

@@ -11,25 +11,21 @@ const { tracker } = useTracker();
     <n-h1>About</n-h1>
     <n-p>
       This wonderful website, made with ❤ by
-      <n-button text tag="a" href="https://github.com/CorentinTh" target="_blank" rel="noopener" type="primary">
+      <c-link href="https://github.com/CorentinTh" target="_blank" rel="noopener"> Corentin Thomasset </c-link>,
-        Corentin Thomasset </n-button
+      aggregates useful tools for developer and people working in IT. If you find it useful, please fell free to share
-      >, aggregates useful tools for developer and people working in IT. If you find it useful, please fell free to
+      it to people you think may find it useful too and don't forget to pin it in your shortcut bar !
-      share it to people you think may find it useful too and don't forget to pin it in your shortcut bar !
     </n-p>
     <n-p>
       IT Tools is open-source (under the MIT license) and free, and will always be, but it cost me money to host and
       renew the domain name, if you want to support my work, and encourage me to add more tools, please consider
       supporting by
-      <n-button
+      <c-link
-        type="primary"
+        href="https://www.buymeacoffee.com/cthmsst"
-        tag="a"
-        text
-        href="https://github.com/sponsors/CorentinTh"
         rel="noopener"
         target="_blank"
         @click="() => tracker.trackEvent({ eventName: 'Support button clicked' })"
       >
-        sponsoring me </n-button
+        sponsoring me </c-link
       >.
     </n-p>
 
@@ -37,16 +33,9 @@ const { tracker } = useTracker();
     <n-p>
       IT Tools is made in Vue JS (vue 3) with the the naive-ui component library and is hosted and continuously deployed
       by Vercel. Third party open-source libraries are used in some tools, you may find the complete list in the
-      <n-button
+      <c-link href="https://github.com/CorentinTh/it-tools/blob/main/package.json" rel="noopener" target="_blank">
-        type="primary"
-        tag="a"
-        text
-        href="https://github.com/CorentinTh/it-tools/blob/master/package.json"
-        rel="noopener"
-        target="_blank"
-      >
         package.json
-      </n-button>
+      </c-link>
       file of the repository.
     </n-p>
 
@@ -54,31 +43,25 @@ const { tracker } = useTracker();
     <n-p>
       If you need a tool that is currently not present here, and you think can be relevant, you are welcome to submit a
       feature request in the
-      <n-button
+      <c-link
-        type="primary"
-        tag="a"
-        text
         href="https://github.com/CorentinTh/it-tools/issues/new?assignees=CorentinTh&labels=enhancement&template=feature_request.md&title=%5BFEAT%5D%20My%20feature"
         rel="noopener"
         target="_blank"
       >
         issues section
-      </n-button>
+      </c-link>
-      in the github repository.
+      in the GitHub repository.
     </n-p>
     <n-p>
       And if you found a bug, or something broken that doesn't work as expected, please fill a bug report in the
-      <n-button
+      <c-link
-        type="primary"
-        tag="a"
-        text
         href="https://github.com/CorentinTh/it-tools/issues/new?assignees=CorentinTh&labels=bug&template=bug_report.md&title=%5BBUG%5D%20My%20bug"
         rel="noopener"
         target="_blank"
       >
         issues section
-      </n-button>
+      </c-link>
-      in the github repository.
+      in the GitHub repository.
     </n-p>
   </div>
 </template>

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
@@ -21,16 +22,16 @@ useHead({ title: 'IT Tools - Handy online tools for developers' });
               href="https://github.com/CorentinTh/it-tools"
               rel="noopener"
               target="_blank"
-              aria-label="IT-Tools' github repository"
+              aria-label="IT-Tools' GitHub repository"
-              >github</a
+              >GitHub</a
             >
             or follow us on
             <a
               href="https://twitter.com/ittoolsdottech"
               rel="noopener"
               target="_blank"
-              aria-label="IT-Tools' twitter account"
+              aria-label="IT-Tools' Twitter account"
-              >twitter</a
+              >Twitter</a
             >! Thank you
             <n-icon :component="Heart" />
           </colored-card>

src/plugins/naive.plugin.ts

@@ -1,116 +1,3 @@
-import {
+import { create } from 'naive-ui';
-  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,
-  NCheckbox,
-} from 'naive-ui';
 
-const components = [
+export const naive = create();
-  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,
-];
-
-export const naive = create({ components });

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);

src/router.ts

@@ -4,6 +4,7 @@ import HomePage from './pages/Home.page.vue';
 import NotFound from './pages/404.page.vue';
 import { tools } from './tools';
 import { config } from './config';
+import { routes as demoRoutes } from './ui/demo/demo.routes';
 
 const toolsRoutes = tools.map(({ path, name, component, ...config }) => ({
   path,
@@ -32,6 +33,7 @@ const router = createRouter({
     },
     ...toolsRoutes,
     ...toolsRedirectRoutes,
+    ...(config.app.env === 'development' ? demoRoutes : []),
     { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
   ],
 });

src/themes.ts

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

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

@@ -1,5 +1,5 @@
 <template>
-  <n-card title="Base64 to file">
+  <c-card title="Base64 to file">
     <n-form-item
       :feedback="base64InputValidation.message"
       :validation-status="base64InputValidation.status"
@@ -8,16 +8,16 @@
       <n-input v-model:value="base64Input" type="textarea" placeholder="Put your base64 file string here..." rows="5" />
     </n-form-item>
     <n-space justify="center">
-      <n-button :disabled="base64Input === '' || !base64InputValidation.isValid" secondary @click="downloadFile()">
+      <c-button :disabled="base64Input === '' || !base64InputValidation.isValid" @click="downloadFile()">
         Download file
-      </n-button>
+      </c-button>
     </n-space>
-  </n-card>
+  </c-card>
 
-  <n-card title="File to base64">
+  <c-card title="File to base64">
     <n-upload v-model:file-list="fileList" :show-file-list="true" :on-before-upload="onUpload" list-type="image">
       <n-upload-dragger>
-        <div 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>
@@ -26,9 +26,9 @@
 
     <n-input :value="fileBase64" type="textarea" readonly placeholder="File in base64 will be here" />
     <n-space justify="center">
-      <n-button secondary @click="copyFileBase64()"> Copy </n-button>
+      <c-button @click="copyFileBase64()"> Copy </c-button>
     </n-space>
-  </n-card>
+  </c-card>
 </template>
 
 <script setup lang="ts">

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

@@ -1,5 +1,5 @@
 <template>
-  <n-card title="String to base64">
+  <c-card title="String to base64">
     <n-form-item label="String to encode">
       <n-input v-model:value="textInput" type="textarea" placeholder="Put your string here..." rows="5" />
     </n-form-item>
@@ -15,11 +15,11 @@
     </n-form-item>
 
     <n-space justify="center">
-      <n-button secondary @click="copyTextBase64()"> Copy base64 </n-button>
+      <c-button @click="copyTextBase64()"> Copy base64 </c-button>
     </n-space>
-  </n-card>
+  </c-card>
 
-  <n-card title="Base64 to string">
+  <c-card title="Base64 to string">
     <n-form-item label="Base64 string to decode" v-bind="b64Validation.attrs">
       <n-input v-model:value="base64Input" type="textarea" placeholder="Your base64 string..." rows="5" />
     </n-form-item>
@@ -29,9 +29,9 @@
     </n-form-item>
 
     <n-space justify="center">
-      <n-button secondary @click="copyText()"> Copy decoded string </n-button>
+      <c-button @click="copyText()"> Copy decoded string </c-button>
     </n-space>
-  </n-card>
+  </c-card>
 </template>
 
 <script setup lang="ts">

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

@@ -13,17 +13,15 @@
       />
     </n-form-item>
 
-    <br />
+    <c-card>
-    <n-card>
       <n-statistic label="Authorization header:" class="header">
         <n-scrollbar x-scrollable style="max-width: 550px; margin-bottom: -10px; padding-bottom: 10px" trigger="none">
           {{ header }}
         </n-scrollbar>
       </n-statistic>
-    </n-card>
+    </c-card>
-    <br />
+    <n-space justify="center" mt-5>
-    <n-space justify="center">
+      <c-button @click="copy">Copy header</c-button>
-      <n-button secondary @click="copy">Copy header</n-button>
     </n-space>
   </div>
 </template>

src/tools/bcrypt/bcrypt.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-card title="Hash">
+  <c-card title="Hash">
     <n-form label-width="120">
       <n-form-item label="Your string: " label-placement="left">
         <n-input
@@ -12,17 +12,16 @@
         />
       </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>
-    <br />
+    <n-space justify="center" mt-5>
-    <n-space justify="center">
+      <c-button @click="copy"> Copy hash </c-button>
-      <n-button secondary @click="copy"> Copy hash </n-button>
     </n-space>
-  </n-card>
+  </c-card>
 
-  <n-card title="Compare string with hash">
+  <c-card title="Compare string with hash">
     <n-form label-width="120">
       <n-form-item label="Your string: " label-placement="left">
         <n-input
@@ -50,7 +49,7 @@
         </div>
       </n-form-item>
     </n-form>
-  </n-card>
+  </c-card>
 </template>
 
 <script setup lang="ts">

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}`;
+}

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

@@ -0,0 +1,158 @@
+<template>
+  <n-scrollbar style="flex: 1" x-scrollable>
+    <n-space :wrap="false" style="flex: 1" justify="center" :size="0" mb-5>
+      <div v-for="(suite, index) of suites" :key="index">
+        <c-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>
+        </c-card>
+
+        <n-space justify="center">
+          <c-button v-if="suites.length > 1" variant="text" @click="suites.splice(index, 1)">
+            <n-icon :component="Trash" depth="3" mr-2 size="18" />
+            Delete suite
+          </c-button>
+          <c-button
+            variant="text"
+            @click="suites.splice(index + 1, 0, { data: [0], title: `Suite ${suites.length + 1}` })"
+          >
+            <n-icon :component="Plus" depth="3" mr-2 size="18" />
+            Add suite
+          </c-button>
+        </n-space>
+      </div>
+    </n-space>
+  </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>
+
+        <c-button
+          @click="
+            suites = [
+              { title: 'Suite 1', data: [] },
+              { title: 'Suite 2', data: [] },
+            ]
+          "
+          >Reset suites</c-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>
+      <n-space justify="center" mt-5>
+        <c-button @click="copyAsMarkdown">Copy as markdown table</c-button>
+        <c-button @click="copyAsBulletList">Copy as bullet list</c-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>

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

@@ -0,0 +1,57 @@
+<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>
+          <c-button circle variant="text" @click="values.splice(index, 1)">
+            <n-icon :component="Trash" depth="3" size="18" />
+          </c-button>
+        </template>
+        Delete value
+      </n-tooltip>
+    </n-space>
+
+    <c-button @click="addValue">
+      <n-icon :component="Plus" depth="3" mr-2 size="18" />
+      Add a measure
+    </c-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>

src/tools/benchmark-builder/index.ts

@@ -0,0 +1,12 @@
+import { SpeedFilled } from '@vicons/material';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Benchmark builder',
+  path: '/benchmark-builder',
+  description: 'Easily compare execution time of tasks with this very simple online benchmark builder.',
+  keywords: ['benchmark', 'builder', 'execution', 'duration', 'mean', 'variance'],
+  component: () => import('./benchmark-builder.vue'),
+  icon: SpeedFilled,
+  createdAt: new Date('2023-04-05'),
+});

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

@@ -1,59 +1,57 @@
 <template>
   <div>
-    <n-card>
+    <n-grid cols="3" x-gap="12">
-      <n-grid cols="3" x-gap="12">
+      <n-gi span="1">
-        <n-gi span="1">
+        <n-form-item label="Language:">
-          <n-form-item label="Language:">
+          <n-select
-            <n-select
+            v-model:value="language"
-              v-model:value="language"
+            :options="Object.keys(languages).map((label) => ({ label, value: label }))"
-              :options="Object.keys(languages).map((label) => ({ label, value: label }))"
-            />
-          </n-form-item>
-        </n-gi>
-        <n-gi span="2">
-          <n-form-item
-            label="Entropy (seed):"
-            :feedback="entropyValidation.message"
-            :validation-status="entropyValidation.status"
-          >
-            <n-input-group>
-              <n-input v-model:value="entropy" placeholder="Your string..." />
-              <n-button @click="refreshEntropy">
-                <n-icon size="22">
-                  <Refresh />
-                </n-icon>
-              </n-button>
-              <n-button @click="copyEntropy">
-                <n-icon size="22">
-                  <Copy />
-                </n-icon>
-              </n-button>
-            </n-input-group>
-          </n-form-item>
-        </n-gi>
-      </n-grid>
-      <n-form-item
-        label="Passphrase (mnemonic):"
-        :feedback="mnemonicValidation.message"
-        :validation-status="mnemonicValidation.status"
-      >
-        <n-input-group>
-          <n-input
-            v-model:value="passphrase"
-            style="text-align: center; flex: 1"
-            placeholder="Your mnemonic..."
-            autocomplete="off"
-            autocorrect="off"
-            autocapitalize="off"
-            spellcheck="false"
           />
+        </n-form-item>
+      </n-gi>
+      <n-gi span="2">
+        <n-form-item
+          label="Entropy (seed):"
+          :feedback="entropyValidation.message"
+          :validation-status="entropyValidation.status"
+        >
+          <n-input-group>
+            <n-input v-model:value="entropy" placeholder="Your string..." />
+            <c-button @click="refreshEntropy">
+              <n-icon size="22">
+                <Refresh />
+              </n-icon>
+            </c-button>
+            <c-button @click="copyEntropy">
+              <n-icon size="22">
+                <Copy />
+              </n-icon>
+            </c-button>
+          </n-input-group>
+        </n-form-item>
+      </n-gi>
+    </n-grid>
+    <n-form-item
+      label="Passphrase (mnemonic):"
+      :feedback="mnemonicValidation.message"
+      :validation-status="mnemonicValidation.status"
+    >
+      <n-input-group>
+        <n-input
+          v-model:value="passphrase"
+          style="text-align: center; flex: 1"
+          placeholder="Your mnemonic..."
+          autocomplete="off"
+          autocorrect="off"
+          autocapitalize="off"
+          spellcheck="false"
+        />
 
-          <n-button @click="copyPassphrase">
+        <c-button @click="copyPassphrase">
-            <n-icon size="22" :component="Copy" />
+          <n-icon size="22" :component="Copy" />
-          </n-button>
+        </c-button>
-        </n-input-group>
+      </n-input-group>
-      </n-form-item>
+    </n-form-item>
-    </n-card>
   </div>
 </template>
 

src/tools/case-converter/case-converter.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-card>
+  <c-card>
     <n-form label-width="120" label-placement="left" :show-feedback="false">
       <n-form-item label="Your string:">
         <n-input v-model:value="input" />
@@ -8,40 +8,40 @@
       <n-divider />
 
       <n-form-item label="Camelcase:">
-        <input-copyable :value="camelCase(input)" />
+        <input-copyable :value="camelCase(input, baseConfig)" />
       </n-form-item>
       <n-form-item label="Capitalcase:">
-        <input-copyable :value="capitalCase(input)" />
+        <input-copyable :value="capitalCase(input, baseConfig)" />
       </n-form-item>
       <n-form-item label="Constantcase:">
-        <input-copyable :value="constantCase(input)" />
+        <input-copyable :value="constantCase(input, baseConfig)" />
       </n-form-item>
       <n-form-item label="Dotcase:">
-        <input-copyable :value="dotCase(input)" />
+        <input-copyable :value="dotCase(input, baseConfig)" />
       </n-form-item>
       <n-form-item label="Headercase:">
-        <input-copyable :value="headerCase(input)" />
+        <input-copyable :value="headerCase(input, baseConfig)" />
       </n-form-item>
       <n-form-item label="Nocase:">
-        <input-copyable :value="noCase(input)" />
+        <input-copyable :value="noCase(input, baseConfig)" />
       </n-form-item>
       <n-form-item label="Paramcase:">
-        <input-copyable :value="paramCase(input)" />
+        <input-copyable :value="paramCase(input, baseConfig)" />
       </n-form-item>
       <n-form-item label="Pascalcase:">
-        <input-copyable :value="pascalCase(input)" />
+        <input-copyable :value="pascalCase(input, baseConfig)" />
       </n-form-item>
       <n-form-item label="Pathcase:">
-        <input-copyable :value="pathCase(input)" />
+        <input-copyable :value="pathCase(input, baseConfig)" />
       </n-form-item>
       <n-form-item label="Sentencecase:">
-        <input-copyable :value="sentenceCase(input)" />
+        <input-copyable :value="sentenceCase(input, baseConfig)" />
       </n-form-item>
       <n-form-item label="Snakecase:">
-        <input-copyable :value="snakeCase(input)" />
+        <input-copyable :value="snakeCase(input, baseConfig)" />
       </n-form-item>
     </n-form>
-  </n-card>
+  </c-card>
 </template>
 
 <script setup lang="ts">
@@ -61,6 +61,10 @@ import {
 } from 'change-case';
 import InputCopyable from '../../components/InputCopyable.vue';
 
+const baseConfig = {
+  stripRegexp: /[^A-Za-zÀ-ÖØ-öø-ÿ]+/gi,
+};
+
 const input = ref('lorem ipsum dolor sit amet');
 </script>
 

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>
 

src/tools/chronometer/chronometer.vue

@@ -1,14 +1,13 @@
 <template>
   <div>
-    <n-card>
+    <c-card>
       <div class="duration">{{ formatMs(counter) }}</div>
-    </n-card>
+    </c-card>
-    <br />
+    <n-space justify="center" mt-5>
-    <n-space justify="center">
+      <c-button v-if="!isRunning" secondary type="primary" @click="resume">Start</c-button>
-      <n-button v-if="!isRunning" secondary type="primary" @click="resume">Start</n-button>
+      <c-button v-else secondary type="warning" @click="pause">Stop</c-button>
-      <n-button v-else secondary type="warning" @click="pause">Stop</n-button>
 
-      <n-button secondary @click="counter = 0">Reset</n-button>
+      <c-button @click="counter = 0">Reset</c-button>
     </n-space>
   </div>
 </template>

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

@@ -1,5 +1,5 @@
 <template>
-  <n-card>
+  <c-card>
     <n-form label-width="100" label-placement="left">
       <n-form-item label="color picker:">
         <n-color-picker
@@ -30,7 +30,7 @@
         <input-copyable v-model:value="cmyk" :on-input="(v: string) => onInputUpdated(v, 'cmyk')" />
       </n-form-item>
     </n-form>
-  </n-card>
+  </c-card>
 </template>
 
 <script setup lang="ts">

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

@@ -1,5 +1,5 @@
 <template>
-  <n-card>
+  <c-card>
     <n-form-item
       class="cron"
       :show-label="false"
@@ -27,8 +27,8 @@
         </n-form-item>
       </n-form>
     </n-space>
-  </n-card>
+  </c-card>
-  <n-card>
+  <c-card>
     <pre>
 ┌──────────── [optional] seconds (0 - 59)
 | ┌────────── minute (0 - 59)
@@ -41,7 +41,7 @@
     >
 
     <n-space v-if="styleStore.isSmallScreen" vertical>
-      <n-card v-for="{ symbol, meaning, example, equivalent } in helpers" :key="symbol" embedded :bordered="false">
+      <c-card v-for="{ symbol, meaning, example, equivalent } in helpers" :key="symbol" important:border-none>
         <div>
           Symbol: <strong>{{ symbol }}</strong>
         </div>
@@ -57,7 +57,7 @@
         <div>
           Equivalent: <strong>{{ equivalent }}</strong>
         </div>
-      </n-card>
+      </c-card>
     </n-space>
     <n-table v-else size="small">
       <thead>
@@ -79,7 +79,7 @@
         </tr>
       </tbody>
     </n-table>
-  </n-card>
+  </c-card>
 </template>
 
 <script setup lang="ts">

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');
+  });
+});

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);
+    });
+  });
+});

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;
+  }
+}

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;
+};

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

@@ -1,44 +1,39 @@
 <template>
   <div>
-    <n-card>
+    <n-form-item :show-label="false" v-bind="validation.attrs">
-      <n-space justify="center">
+      <n-input-group>
-        <n-form-item label="Use current date-time ?" label-placement="left" :show-feedback="false">
+        <n-input
-          <n-switch v-model:value="useCurrentDate" />
+          v-model:value="inputDate"
-        </n-form-item>
+          autofocus
-      </n-space>
+          :on-input="onDateInputChanged"
-      <n-form-item
+          placeholder="Put you date string here..."
-        :feedback="inputInvalid ? 'Invalid date for the current format' : ''"
+          clearable
-        :validation-status="inputInvalid ? 'error' : undefined"
+          :input-props="{ 'data-test-id': 'date-time-converter-input' }"
-      >
+        />
-        <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-input
+        <n-select
-            v-model:value="inputDate"
+          v-model:value="formatIndex"
-            :on-input="onDateInputChanged"
+          style="flex: 0 0 170px"
-            :disabled="useCurrentDate"
+          :options="formats.map(({ name }, i) => ({ label: name, value: i }))"
-            placeholder="Your date string..."
+          data-test-id="date-time-converter-format-select"
-          />
+        />
-        </n-input-group>
+      </n-input-group>
-      </n-form-item>
+    </n-form-item>
-      <n-divider style="margin-top: 0" />
+    <n-divider style="margin-top: 0" />
-      <div v-for="{ name, fromDate } in formats" :key="name" style="margin: 5px 0">
+    <div v-for="{ name, fromDate } in formats" :key="name" mt-1>
-        <n-input-group>
+      <n-input-group>
-          <n-input-group-label style="flex: 0 0 170px"> {{ name }}: </n-input-group-label>
+        <n-input-group-label style="flex: 0 0 170px"> {{ name }}: </n-input-group-label>
-          <input-copyable :value="fromDate(baseDate)" />
+        <input-copyable
-        </n-input-group>
+          :value="formatDateUsingFormatter(fromDate, normalizedDate)"
-      </div>
+          placeholder="Invalid date..."
-    </n-card>
+          :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 +42,132 @@ import {
   fromUnixTime,
   getTime,
   getUnixTime,
-  isDate,
   parseISO,
   parseJSON,
+  isDate,
+  isValid,
 } from 'date-fns';
-import { ref } from 'vue';
+import { withDefaultOnError } from '@/utils/defaults';
-import InputCopyable from '../../components/InputCopyable.vue';
+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(() => {
+const toDate: ToDateMapper = (date) => new Date(date);
-  if (useCurrentDate.value) {
+
-    baseDate.value = new Date();
+function formatDateUsingFormatter(formatter: (date: Date) => string, date?: Date) {
+  if (!date || !validation.isValid) {
+    return '';
   }
-});
 
-function onDateInputChanged(value: string) {
+  return withDefaultOnError(() => formatter(date), '');
-  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;
-  }
 }
 
-type Format = {
+const formats: DateFormat[] = [
-  name: string;
-  fromDate: (date: Date) => string;
-  toDate: (value: string) => Date;
-};
-
-const toDate: Format['toDate'] = (date) => new Date(date);
-
-const formats: Format[] = [
   {
     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,
-  },
+    formatMatcher: (date) => isRFC7231DateString(date),
-  {
-    name: 'Timestamp',
-    fromDate: (date) => String(getTime(date)),
-    toDate: (ms) => parseJSON(+ms),
   },
   {
     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>

src/tools/device-information/device-information.vue

@@ -1,22 +1,20 @@
 <template>
-  <n-card v-for="{ name, information } in sections" :key="name" :title="name">
+  <c-card v-for="{ name, information } in sections" :key="name" :title="name">
     <n-grid cols="1 400:2" x-gap="12" y-gap="12">
       <n-gi v-for="{ label, value: { value } } in information" :key="label" class="information">
-        <n-card :bordered="false" embedded>
+        <div class="label">
-          <div class="label">
+          {{ label }}
-            {{ label }}
+        </div>
-          </div>
 
-          <div class="value">
+        <div class="value">
-            <n-ellipsis v-if="value">
+          <n-ellipsis v-if="value">
-              {{ value }}
+            {{ value }}
-            </n-ellipsis>
+          </n-ellipsis>
-            <div v-else class="undefined-value">unknown</div>
+          <div v-else class="undefined-value">unknown</div>
-          </div>
+        </div>
-        </n-card>
       </n-gi>
     </n-grid>
-  </n-card>
+  </c-card>
 </template>
 
 <script setup lang="ts">
@@ -81,6 +79,10 @@ const sections = [
 
 <style lang="less" scoped>
 .information {
+  padding: 14px 16px;
+  border-radius: 4px;
+  background-color: #aaaaaa11;
+
   .label {
     font-size: 14px;
     opacity: 0.8;

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;
+}

src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue

@@ -0,0 +1,81 @@
+<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" />
+
+    <n-space justify="center" mt-5>
+      <c-button :disabled="dockerCompose === ''" secondary @click="download"> Download docker-compose.yml </c-button>
+    </n-space>
+
+    <div v-if="notComposable.length > 0">
+      <n-alert title="This options are not translatable to docker-compose" type="info" mt-5>
+        <ul>
+          <li v-for="(message, index) of notComposable" :key="index">{{ message }}</li>
+        </ul>
+      </n-alert>
+    </div>
+
+    <div v-if="notImplemented.length > 0">
+      <n-alert
+        title="This options are not yet implemented and therefore haven't been translated to docker-compose"
+        type="warning"
+        mt-5
+      >
+        <ul>
+          <li v-for="(message, index) of notImplemented" :key="index">{{ message }}</li>
+        </ul>
+      </n-alert>
+    </div>
+
+    <div v-if="errors.length > 0">
+      <n-alert title="The following errors occured" type="error" mt-5>
+        <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>

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,
+});

src/tools/encryption/encryption.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-card title="Encrypt">
+  <c-card title="Encrypt">
     <n-space item-style="flex: 1 1 0">
       <n-form-item label="Your text:" :show-feedback="false">
         <n-input
@@ -21,8 +21,7 @@
         </n-form-item>
       </n-space>
     </n-space>
-    <br />
+    <n-form-item label="Your text encrypted:" :show-feedback="false" mt-5>
-    <n-form-item label="Your text encrypted:" :show-feedback="false">
       <n-input
         :value="cypherOutput"
         type="textarea"
@@ -35,8 +34,8 @@
         spellcheck="false"
       />
     </n-form-item>
-  </n-card>
+  </c-card>
-  <n-card title="Decrypt">
+  <c-card title="Decrypt">
     <n-space item-style="flex: 1 1 0">
       <n-form-item label="Your encrypted text:" :show-feedback="false">
         <n-input
@@ -58,8 +57,7 @@
         </n-form-item>
       </n-space>
     </n-space>
-    <br />
+    <n-form-item label="Your decrypted text:" :show-feedback="false" mt-5>
-    <n-form-item label="Your decrypted text:" :show-feedback="false">
       <n-input
         :value="decryptOutput"
         type="textarea"
@@ -72,7 +70,7 @@
         spellcheck="false"
       />
     </n-form-item>
-  </n-card>
+  </c-card>
 </template>
 
 <script setup lang="ts">

src/tools/eta-calculator/eta-calculator.vue

@@ -5,7 +5,6 @@
       hours and 10 minutes to wash them all, and if you start now, you'll end
       {{ endAt }}.
     </n-text>
-    <br />
     <n-divider />
     <n-space item-style="flex:1 1 0">
       <div>
@@ -38,12 +37,12 @@
 
         <n-divider />
         <n-space vertical>
-          <n-card>
+          <c-card>
             <n-statistic label="Total duration">{{ formatMsDuration(durationMs) }}</n-statistic>
-          </n-card>
+          </c-card>
-          <n-card>
+          <c-card>
             <n-statistic label="It will end ">{{ endAt }}</n-statistic>
-          </n-card>
+          </c-card>
         </n-space>
       </div>
     </n-space>

src/tools/hash-text/hash-text.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <n-card>
+    <c-card>
       <n-input v-model:value="clearText" type="textarea" placeholder="Your string to hash..." rows="3" />
 
       <n-divider />
@@ -35,11 +35,12 @@
           <input-copyable :value="hashText(algo, clearText)" readonly />
         </n-input-group>
       </div>
-    </n-card>
+    </c-card>
   </div>
 </template>
 
 <script setup lang="ts">
+import { useQueryParam } from '@/composable/queryParams';
 import { enc, lib, MD5, RIPEMD160, SHA1, SHA224, SHA256, SHA3, SHA384, SHA512 } from 'crypto-js';
 import { ref } from 'vue';
 import InputCopyable from '../../components/InputCopyable.vue';
@@ -59,7 +60,7 @@ const algos = {
 type AlgoNames = keyof typeof algos;
 type Encoding = keyof typeof enc | 'Bin';
 const algoNames = Object.keys(algos) as AlgoNames[];
-const encoding = ref<Encoding>('Hex');
+const encoding = useQueryParam<Encoding>({ defaultValue: 'Hex', name: 'encoding' });
 const clearText = ref('');
 
 function formatWithEncoding(words: lib.WordArray, encoding: Encoding) {

src/tools/hmac-generator/hmac-generator.vue

@@ -43,7 +43,7 @@
       <n-input readonly :value="hmac" type="textarea" placeholder="The result of the HMAC..." />
     </n-form-item>
     <n-space justify="center">
-      <n-button secondary @click="copy()">Copy HMAC</n-button>
+      <c-button @click="copy()">Copy HMAC</c-button>
     </n-space>
   </div>
 </template>

src/tools/html-entities/html-entities.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-card title="Escape html entities">
+  <c-card title="Escape html entities">
     <n-form-item label="Your string :">
       <n-input
         v-model:value="escapeInput"
@@ -20,10 +20,10 @@
     </n-form-item>
 
     <n-space justify="center">
-      <n-button secondary @click="copyEscaped"> Copy </n-button>
+      <c-button @click="copyEscaped"> Copy </c-button>
     </n-space>
-  </n-card>
+  </c-card>
-  <n-card title="Unescape html entities">
+  <c-card title="Unescape html entities">
     <n-form-item label="Your escaped string :">
       <n-input
         v-model:value="unescapeInput"
@@ -44,9 +44,9 @@
     </n-form-item>
 
     <n-space justify="center">
-      <n-button secondary @click="copyUnescaped"> Copy </n-button>
+      <c-button @click="copyUnescaped"> Copy </c-button>
     </n-space>
-  </n-card>
+  </c-card>
 </template>
 
 <script setup lang="ts">

src/tools/html-wysiwyg-editor/editor/editor.vue

@@ -0,0 +1,131 @@
+<template>
+  <c-card v-if="editor" important:p0>
+    <menu-bar class="editor-header" :editor="editor" />
+    <n-divider style="margin-top: 0" />
+
+    <div px8 pb6>
+      <editor-content class="editor-content" :editor="editor" />
+    </div>
+  </c-card>
+</template>
+
+<script setup lang="ts">
+import { tryOnBeforeUnmount, useVModel } from '@vueuse/core';
+import { Editor, EditorContent } from '@tiptap/vue-3';
+import StarterKit from '@tiptap/starter-kit';
+import { useThemeVars } from 'naive-ui';
+import MenuBar from './menu-bar.vue';
+
+const themeVars = useThemeVars();
+const props = defineProps<{ html: string }>();
+const emit = defineEmits(['update:html']);
+const html = useVModel(props, 'html', emit);
+
+const editor = new Editor({
+  content: html.value,
+  extensions: [StarterKit],
+});
+
+editor.on('update', ({ editor }) => emit('update:html', editor.getHTML()));
+
+tryOnBeforeUnmount(() => {
+  editor.destroy();
+});
+</script>
+
+<style scoped lang="less">
+::v-deep(.ProseMirror-focused) {
+  outline: none;
+}
+</style>
+
+<style scoped lang="less">
+::v-deep(.ProseMirror) {
+  > * + * {
+    margin-top: 0.75em;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  ul,
+  ol {
+    padding: 0 1rem;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+  }
+
+  code {
+    background-color: v-bind('themeVars.codeColor');
+    padding: 2px 4px;
+    border-radius: 5px;
+    font-size: 85%;
+  }
+
+  pre {
+    background: v-bind('themeVars.codeColor');
+    font-family: monospace;
+    padding: 0.75rem 1rem;
+    border-radius: 0.5rem;
+
+    code {
+      color: inherit;
+      padding: 0;
+      background: none;
+      font-size: 0.8rem;
+    }
+  }
+
+  mark {
+    background-color: #faf594;
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+
+  hr {
+    margin: 1rem 0;
+  }
+
+  blockquote {
+    padding-left: 1rem;
+    border-left: 2px solid rgba(#0d0d0d, 0.1);
+  }
+
+  hr {
+    border: none;
+    border-top: 2px solid rgba(#0d0d0d, 0.1);
+    margin: 2rem 0;
+  }
+
+  ul[data-type='taskList'] {
+    list-style: none;
+    padding: 0;
+
+    li {
+      display: flex;
+      align-items: center;
+
+      > label {
+        flex: 0 0 auto;
+        margin-right: 0.5rem;
+        user-select: none;
+      }
+
+      > div {
+        flex: 1 1 auto;
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,20 @@
+<template>
+  <n-tooltip trigger="hover">
+    <template #trigger>
+      <c-button circle variant="text" :type="isActive?.() ? 'primary' : 'default'" @click="action">
+        <n-icon :component="icon" />
+      </c-button>
+    </template>
+
+    {{ title }}
+  </n-tooltip>
+</template>
+
+<script setup lang="ts">
+import { toRefs, type Component } from 'vue';
+
+const props = defineProps<{ icon: Component; title: string; action: () => void; isActive?: () => boolean }>();
+const { icon, title, action, isActive } = toRefs(props);
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,169 @@
+<template>
+  <n-space align="center" :size="0">
+    <template v-for="(item, index) in items">
+      <n-divider v-if="item.type === 'divider'" :key="`divider${index}`" vertical />
+      <menu-bar-item v-else-if="item.type === 'button'" :key="index" v-bind="item" />
+    </template>
+  </n-space>
+</template>
+
+<script setup lang="ts">
+import type { Editor } from '@tiptap/vue-3';
+import {
+  ArrowBack,
+  ArrowForwardUp,
+  Blockquote,
+  Bold,
+  ClearFormatting,
+  Code,
+  CodePlus,
+  H1,
+  H2,
+  H3,
+  H4,
+  Italic,
+  List,
+  ListNumbers,
+  Strikethrough,
+  TextWrap,
+} from '@vicons/tabler';
+import { toRefs, type Component } from 'vue';
+import MenuBarItem from './menu-bar-item.vue';
+
+const props = defineProps<{ editor: Editor }>();
+const { editor } = toRefs(props);
+
+type MenuItem =
+  | {
+      icon: Component;
+      title: string;
+      action: () => void;
+      isActive?: () => boolean;
+      type: 'button';
+    }
+  | { type: 'divider' };
+
+const items: MenuItem[] = [
+  {
+    type: 'button',
+    icon: Bold,
+    title: 'Bold',
+    action: () => editor.value.chain().focus().toggleBold().run(),
+    isActive: () => editor.value.isActive('bold'),
+  },
+  {
+    type: 'button',
+    icon: Italic,
+    title: 'Italic',
+    action: () => editor.value.chain().focus().toggleItalic().run(),
+    isActive: () => editor.value.isActive('italic'),
+  },
+  {
+    type: 'button',
+    icon: Strikethrough,
+    title: 'Strike',
+    action: () => editor.value.chain().focus().toggleStrike().run(),
+    isActive: () => editor.value.isActive('strike'),
+  },
+  {
+    type: 'button',
+    icon: Code,
+    title: 'Inline code',
+    action: () => editor.value.chain().focus().toggleCode().run(),
+    isActive: () => editor.value.isActive('code'),
+  },
+  {
+    type: 'divider',
+  },
+  {
+    type: 'button',
+    icon: H1,
+    title: 'Heading 1',
+    action: () => editor.value.chain().focus().toggleHeading({ level: 1 }).run(),
+    isActive: () => editor.value.isActive('heading', { level: 1 }),
+  },
+  {
+    type: 'button',
+    icon: H2,
+    title: 'Heading 2',
+    action: () => editor.value.chain().focus().toggleHeading({ level: 2 }).run(),
+    isActive: () => editor.value.isActive('heading', { level: 2 }),
+  },
+  {
+    type: 'button',
+    icon: H3,
+    title: 'Heading 3',
+    action: () => editor.value.chain().focus().toggleHeading({ level: 4 }).run(),
+    isActive: () => editor.value.isActive('heading', { level: 4 }),
+  },
+  {
+    type: 'button',
+    icon: H4,
+    title: 'Heading 4',
+    action: () => editor.value.chain().focus().toggleHeading({ level: 4 }).run(),
+    isActive: () => editor.value.isActive('heading', { level: 4 }),
+  },
+  {
+    type: 'divider',
+  },
+  {
+    type: 'button',
+    icon: List,
+    title: 'Bullet list',
+    action: () => editor.value.chain().focus().toggleBulletList().run(),
+    isActive: () => editor.value.isActive('bulletList'),
+  },
+  {
+    type: 'button',
+    icon: ListNumbers,
+    title: 'Ordered list',
+    action: () => editor.value.chain().focus().toggleOrderedList().run(),
+    isActive: () => editor.value.isActive('orderedList'),
+  },
+  {
+    type: 'button',
+    icon: CodePlus,
+    title: 'Code block',
+    action: () => editor.value.chain().focus().toggleCodeBlock().run(),
+    isActive: () => editor.value.isActive('codeBlock'),
+  },
+
+  {
+    type: 'button',
+    icon: Blockquote,
+    title: 'Blockquote',
+    action: () => editor.value.chain().focus().toggleBlockquote().run(),
+    isActive: () => editor.value.isActive('blockquote'),
+  },
+  {
+    type: 'divider',
+  },
+  {
+    type: 'button',
+    icon: TextWrap,
+    title: 'Hard break',
+    action: () => editor.value.chain().focus().setHardBreak().run(),
+  },
+  {
+    type: 'button',
+    icon: ClearFormatting,
+    title: 'Clear format',
+    action: () => editor.value.chain().focus().clearNodes().unsetAllMarks().run(),
+  },
+
+  {
+    type: 'button',
+    icon: ArrowBack,
+    title: 'Undo',
+    action: () => editor.value.chain().focus().undo().run(),
+  },
+  {
+    type: 'button',
+    icon: ArrowForwardUp,
+    title: 'Redo',
+    action: () => editor.value.chain().focus().redo().run(),
+  },
+];
+</script>
+
+<style scoped></style>

src/tools/html-wysiwyg-editor/html-wysiwyg-editor.vue

@@ -0,0 +1,16 @@
+<template>
+  <editor v-model:html="html" />
+  <textarea-copyable :value="format(html, { parser: 'html', plugins: [htmlParser] })" language="html" />
+</template>
+
+<script setup lang="ts">
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
+import { format } from 'prettier';
+import htmlParser from 'prettier/parser-html';
+import { useStorage } from '@vueuse/core';
+import Editor from './editor/editor.vue';
+
+const html = useStorage('html-wysiwyg-editor--html', '<h1>Hey!</h1><p>Welcome to this html wysiwyg editor</p>');
+</script>
+
+<style lang="less" scoped></style>

src/tools/html-wysiwyg-editor/index.ts

@@ -0,0 +1,11 @@
+import { Edit } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  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'],
+  component: () => import('./html-wysiwyg-editor.vue'),
+  icon: Edit,
+});

src/tools/http-status-codes/http-status-codes.constants.ts

@@ -0,0 +1,432 @@
+export const codesByCategories: {
+  category: string;
+  codes: {
+    code: number;
+    name: string;
+    description: string;
+    type: 'HTTP' | 'WebDav';
+  }[];
+}[] = [
+  {
+    category: '1xx informational response',
+    codes: [
+      {
+        code: 100,
+        name: 'Continue',
+        description: 'Waiting for the client to emit the body of the request.',
+        type: 'HTTP',
+      },
+      {
+        code: 101,
+        name: 'Switching Protocols',
+        description: 'The server has agreed to change protocol.',
+        type: 'HTTP',
+      },
+      {
+        code: 102,
+        name: 'Processing',
+        description: 'The server is processing the request, but no response is available yet.',
+        type: 'WebDav',
+      },
+      {
+        code: 103,
+        name: 'Early Hints',
+        description: 'The server returns some response headers before final HTTP message.',
+        type: 'HTTP',
+      },
+    ],
+  },
+  {
+    category: '2xx success',
+    codes: [
+      {
+        code: 200,
+        name: 'OK',
+        description: 'Standard response for successful HTTP requests.',
+        type: 'HTTP',
+      },
+      {
+        code: 201,
+        name: 'Created',
+        description: 'The request has been fulfilled, resulting in the creation of a new resource.',
+        type: 'HTTP',
+      },
+      {
+        code: 202,
+        name: 'Accepted',
+        description: 'The request has been accepted for processing, but the processing has not been completed.',
+        type: 'HTTP',
+      },
+      {
+        code: 203,
+        name: 'Non-Authoritative Information',
+        description:
+          'The request is successful but the content of the original request has been modified by a transforming proxy.',
+        type: 'HTTP',
+      },
+      {
+        code: 204,
+        name: 'No Content',
+        description: 'The server successfully processed the request and is not returning any content.',
+        type: 'HTTP',
+      },
+      {
+        code: 205,
+        name: 'Reset Content',
+        description: 'The server indicates to reinitialize the document view which sent this request.',
+        type: 'HTTP',
+      },
+      {
+        code: 206,
+        name: 'Partial Content',
+        description: 'The server is delivering only part of the resource due to a range header sent by the client.',
+        type: 'HTTP',
+      },
+      {
+        code: 207,
+        name: 'Multi-Status',
+        description:
+          'The message body that follows is an XML message and can contain a number of separate response codes.',
+        type: 'WebDav',
+      },
+      {
+        code: 208,
+        name: 'Already Reported',
+        description:
+          'The members of a DAV binding have already been enumerated in a preceding part of the (multistatus) response.',
+        type: 'WebDav',
+      },
+      {
+        code: 226,
+        name: 'IM Used',
+        description:
+          'The server has fulfilled a request for the resource, and the response is a representation of the result.',
+        type: 'HTTP',
+      },
+    ],
+  },
+  {
+    category: '3xx redirection',
+    codes: [
+      {
+        code: 300,
+        name: 'Multiple Choices',
+        description: 'Indicates multiple options for the resource that the client may follow.',
+        type: 'HTTP',
+      },
+      {
+        code: 301,
+        name: 'Moved Permanently',
+        description: 'This and all future requests should be directed to the given URI.',
+        type: 'HTTP',
+      },
+      {
+        code: 302,
+        name: 'Found',
+        description: 'Redirect to another URL. This is an example of industry practice contradicting the standard.',
+        type: 'HTTP',
+      },
+      {
+        code: 303,
+        name: 'See Other',
+        description: 'The response to the request can be found under another URI using a GET method.',
+        type: 'HTTP',
+      },
+      {
+        code: 304,
+        name: 'Not Modified',
+        description:
+          'Indicates that the resource has not been modified since the version specified by the request headers.',
+        type: 'HTTP',
+      },
+      {
+        code: 305,
+        name: 'Use Proxy',
+        description:
+          'The requested resource is available only through a proxy, the address for which is provided in the response.',
+        type: 'HTTP',
+      },
+      {
+        code: 306,
+        name: 'Switch Proxy',
+        description: 'No longer used. Originally meant "Subsequent requests should use the specified proxy."',
+        type: 'HTTP',
+      },
+      {
+        code: 307,
+        name: 'Temporary Redirect',
+        description:
+          'In this case, the request should be repeated with another URI; however, future requests should still use the original URI.',
+        type: 'HTTP',
+      },
+      {
+        code: 308,
+        name: 'Permanent Redirect',
+        description: 'The request and all future requests should be repeated using another URI.',
+        type: 'HTTP',
+      },
+    ],
+  },
+  {
+    category: '4xx client error',
+    codes: [
+      {
+        code: 400,
+        name: 'Bad Request',
+        description: 'The server cannot or will not process the request due to an apparent client error.',
+        type: 'HTTP',
+      },
+      {
+        code: 401,
+        name: 'Unauthorized',
+        description:
+          'Similar to 403 Forbidden, but specifically for use when authentication is required and has failed or has not yet been provided.',
+        type: 'HTTP',
+      },
+      {
+        code: 402,
+        name: 'Payment Required',
+        description:
+          'Reserved for future use. The original intention was that this code might be used as part of some form of digital cash or micropayment scheme.',
+        type: 'HTTP',
+      },
+      {
+        code: 403,
+        name: 'Forbidden',
+        description:
+          'The request was valid, but the server is refusing action. The user might not have the necessary permissions for a resource.',
+        type: 'HTTP',
+      },
+      {
+        code: 404,
+        name: 'Not Found',
+        description: 'The requested resource could not be found but may be available in the future.',
+        type: 'HTTP',
+      },
+      {
+        code: 405,
+        name: 'Method Not Allowed',
+        description: 'A request method is not supported for the requested resource.',
+        type: 'HTTP',
+      },
+      {
+        code: 406,
+        name: 'Not Acceptable',
+        description:
+          'The requested resource is capable of generating only content not acceptable according to the Accept headers sent in the request.',
+        type: 'HTTP',
+      },
+      {
+        code: 407,
+        name: 'Proxy Authentication Required',
+        description: 'The client must first authenticate itself with the proxy.',
+        type: 'HTTP',
+      },
+      {
+        code: 408,
+        name: 'Request Timeout',
+        description: 'The server timed out waiting for the request.',
+        type: 'HTTP',
+      },
+      {
+        code: 409,
+        name: 'Conflict',
+        description:
+          'Indicates that the request could not be processed because of conflict in the request, such as an edit conflict.',
+        type: 'HTTP',
+      },
+      {
+        code: 410,
+        name: 'Gone',
+        description: 'Indicates that the resource requested is no longer available and will not be available again.',
+        type: 'HTTP',
+      },
+      {
+        code: 411,
+        name: 'Length Required',
+        description:
+          'The request did not specify the length of its content, which is required by the requested resource.',
+        type: 'HTTP',
+      },
+      {
+        code: 412,
+        name: 'Precondition Failed',
+        description: 'The server does not meet one of the preconditions that the requester put on the request.',
+        type: 'HTTP',
+      },
+      {
+        code: 413,
+        name: 'Payload Too Large',
+        description: 'The request is larger than the server is willing or able to process.',
+        type: 'HTTP',
+      },
+      {
+        code: 414,
+        name: 'URI Too Long',
+        description: 'The URI provided was too long for the server to process.',
+        type: 'HTTP',
+      },
+      {
+        code: 415,
+        name: 'Unsupported Media Type',
+        description: 'The request entity has a media type which the server or resource does not support.',
+        type: 'HTTP',
+      },
+      {
+        code: 416,
+        name: 'Range Not Satisfiable',
+        description: 'The client has asked for a portion of the file, but the server cannot supply that portion.',
+        type: 'HTTP',
+      },
+      {
+        code: 417,
+        name: 'Expectation Failed',
+        description: 'The server cannot meet the requirements of the Expect request-header field.',
+        type: 'HTTP',
+      },
+      {
+        code: 418,
+        name: "I'm a teapot",
+        description: 'The server refuses the attempt to brew coffee with a teapot.',
+        type: 'HTTP',
+      },
+      {
+        code: 421,
+        name: 'Misdirected Request',
+        description: 'The request was directed at a server that is not able to produce a response.',
+        type: 'HTTP',
+      },
+      {
+        code: 422,
+        name: 'Unprocessable Entity',
+        description: 'The request was well-formed but was unable to be followed due to semantic errors.',
+        type: 'HTTP',
+      },
+      {
+        code: 423,
+        name: 'Locked',
+        description: 'The resource that is being accessed is locked.',
+        type: 'HTTP',
+      },
+      {
+        code: 424,
+        name: 'Failed Dependency',
+        description: 'The request failed due to failure of a previous request.',
+        type: 'HTTP',
+      },
+      {
+        code: 425,
+        name: 'Too Early',
+        description: 'Indicates that the server is unwilling to risk processing a request that might be replayed.',
+        type: 'HTTP',
+      },
+      {
+        code: 426,
+        name: 'Upgrade Required',
+        description: 'The client should switch to a different protocol such as TLS/1.0.',
+        type: 'HTTP',
+      },
+      {
+        code: 428,
+        name: 'Precondition Required',
+        description: 'The origin server requires the request to be conditional.',
+        type: 'HTTP',
+      },
+      {
+        code: 429,
+        name: 'Too Many Requests',
+        description: 'The user has sent too many requests in a given amount of time.',
+        type: 'HTTP',
+      },
+      {
+        code: 431,
+        name: 'Request Header Fields Too Large',
+        description:
+          'The server is unwilling to process the request because either an individual header field, or all the header fields collectively, are too large.',
+        type: 'HTTP',
+      },
+      {
+        code: 451,
+        name: 'Unavailable For Legal Reasons',
+        description:
+          'A server operator has received a legal demand to deny access to a resource or to a set of resources that includes the requested resource.',
+        type: 'HTTP',
+      },
+    ],
+  },
+  {
+    category: '5xx server error',
+    codes: [
+      {
+        code: 500,
+        name: 'Internal Server Error',
+        description:
+          'A generic error message, given when an unexpected condition was encountered and no more specific message is suitable.',
+        type: 'HTTP',
+      },
+      {
+        code: 501,
+        name: 'Not Implemented',
+        description:
+          'The server either does not recognize the request method, or it lacks the ability to fulfill the request.',
+        type: 'HTTP',
+      },
+      {
+        code: 502,
+        name: 'Bad Gateway',
+        description:
+          'The server was acting as a gateway or proxy and received an invalid response from the upstream server.',
+        type: 'HTTP',
+      },
+      {
+        code: 503,
+        name: 'Service Unavailable',
+        description: 'The server is currently unavailable (because it is overloaded or down for maintenance).',
+        type: 'HTTP',
+      },
+      {
+        code: 504,
+        name: 'Gateway Timeout',
+        description:
+          'The server was acting as a gateway or proxy and did not receive a timely response from the upstream server.',
+        type: 'HTTP',
+      },
+      {
+        code: 505,
+        name: 'HTTP Version Not Supported',
+        description: 'The server does not support the HTTP protocol version used in the request.',
+        type: 'HTTP',
+      },
+      {
+        code: 506,
+        name: 'Variant Also Negotiates',
+        description: 'Transparent content negotiation for the request results in a circular reference.',
+        type: 'HTTP',
+      },
+      {
+        code: 507,
+        name: 'Insufficient Storage',
+        description: 'The server is unable to store the representation needed to complete the request.',
+        type: 'HTTP',
+      },
+      {
+        code: 508,
+        name: 'Loop Detected',
+        description: 'The server detected an infinite loop while processing the request.',
+        type: 'HTTP',
+      },
+      {
+        code: 510,
+        name: 'Not Extended',
+        description: 'Further extensions to the request are required for the server to fulfill it.',
+        type: 'HTTP',
+      },
+      {
+        code: 511,
+        name: 'Network Authentication Required',
+        description: 'The client needs to authenticate to gain network access.',
+        type: 'HTTP',
+      },
+    ],
+  },
+];

src/tools/http-status-codes/http-status-codes.e2e.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Tool - Http status codes', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/http-status-codes');
+  });
+
+  test('Has correct title', async ({ page }) => {
+    await expect(page).toHaveTitle('HTTP status codes - IT Tools');
+  });
+});

src/tools/http-status-codes/http-status-codes.vue

@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <n-form-item :show-label="false">
+      <n-input
+        v-model:value="search"
+        placeholder="Search http status..."
+        size="large"
+        autofocus
+        mb-10
+        autocomplete="off"
+        autocorrect="off"
+        autocapitalize="off"
+      >
+        <template #prefix>
+          <n-icon :component="SearchRound" />
+        </template>
+      </n-input>
+    </n-form-item>
+
+    <div v-for="{ codes, category } of codesByCategoryFiltered" :key="category" mb-8>
+      <n-h2> {{ category }} </n-h2>
+
+      <c-card v-for="{ code, description, name, type } of codes" :key="code" mb-2>
+        <n-space align="center">
+          <n-text strong text-lg> {{ code }} {{ name }} </n-text>
+        </n-space>
+        <n-text depth="3">{{ description }} {{ type !== 'HTTP' ? `For ${type}.` : '' }}</n-text>
+      </c-card>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useFuzzySearch } from '@/composable/fuzzySearch';
+import { SearchRound } from '@vicons/material';
+import { codesByCategories } from './http-status-codes.constants';
+
+const search = ref('');
+
+const { searchResult } = useFuzzySearch({
+  search,
+  data: codesByCategories.flatMap(({ codes, category }) => codes.map((code) => ({ ...code, category }))),
+  options: {
+    keys: [{ name: 'code', weight: 3 }, { name: 'name', weight: 2 }, 'description', 'category'],
+  },
+});
+
+const codesByCategoryFiltered = computed(() => {
+  if (!search.value) {
+    return codesByCategories;
+  }
+
+  return [{ category: 'Search results', codes: searchResult.value }];
+});
+</script>
+
+<style lang="less" scoped></style>

src/tools/http-status-codes/index.ts

@@ -0,0 +1,19 @@
+import { HttpRound } from '@vicons/material';
+import { defineTool } from '../tool';
+
+import { codesByCategories } from './http-status-codes.constants';
+
+export const tool = defineTool({
+  name: 'HTTP status codes',
+  path: '/http-status-codes',
+  description: 'The list of all HTTP status codes their name and their meaning.',
+  keywords: [
+    'http',
+    'status',
+    'codes',
+    ...codesByCategories.flatMap(({ codes }) => codes.flatMap(({ code, name }) => [String(code), name])),
+  ],
+  component: () => import('./http-status-codes.vue'),
+  icon: HttpRound,
+  createdAt: new Date('2023-04-13'),
+});

src/tools/index.ts

@@ -1,12 +1,27 @@
-import { tool as chmodCalculator } from './chmod-calculator';
-import { tool as mimeTypes } from './mime-types';
-import { tool as otpCodeGeneratorAndValidator } from './otp-code-generator-and-validator';
 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 jsonDiff } from './json-diff';
+import { tool as ipv4RangeExpander } from './ipv4-range-expander';
+import { tool as httpStatusCodes } from './http-status-codes';
+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';
+import { tool as slugifyString } from './slugify-string';
+import { tool as keycodeInfo } from './keycode-info';
+import { tool as jsonMinify } from './json-minify';
 import { tool as bcrypt } from './bcrypt';
 import { tool as bip39 } from './bip39-generator';
 import { tool as caseConverter } from './case-converter';
+import { tool as chmodCalculator } from './chmod-calculator';
 import { tool as chronometer } from './chronometer';
 import { tool as colorConverter } from './color-converter';
 import { tool as crontabGenerator } from './crontab-generator';
@@ -20,25 +35,30 @@ import { tool as hmacGenerator } from './hmac-generator';
 import { tool as htmlEntities } from './html-entities';
 import { tool as baseConverter } from './integer-base-converter';
 import { tool as jsonViewer } from './json-viewer';
+import { tool as jwtParser } from './jwt-parser';
 import { tool as loremIpsumGenerator } from './lorem-ipsum-generator';
 import { tool as mathEvaluator } from './math-evaluator';
 import { tool as metaTagGenerator } from './meta-tag-generator';
+import { tool as mimeTypes } from './mime-types';
+import { tool as otpCodeGeneratorAndValidator } from './otp-code-generator-and-validator';
 import { tool as qrCodeGenerator } from './qr-code-generator';
 import { tool as randomPortGenerator } from './random-port-generator';
 import { tool as romanNumeralConverter } from './roman-numeral-converter';
 import { tool as sqlPrettify } from './sql-prettify';
 import { tool as svgPlaceholderGenerator } from './svg-placeholder-generator';
+import { tool as temperatureConverter } from './temperature-converter';
 import { tool as textStatistics } from './text-statistics';
 import { tool as tokenGenerator } from './token-generator';
+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 type { ToolCategory } from './tools.types';
+import { tool as macAddressLookup } from './mac-address-lookup';
 
 export const toolsByCategory: ToolCategory[] = [
   {
     name: 'Crypto',
-    components: [tokenGenerator, hashText, bcrypt, uuidGenerator, cypher, bip39, hmacGenerator],
+    components: [tokenGenerator, hashText, bcrypt, uuidGenerator, cypher, bip39, hmacGenerator, rsaKeyPairGenerator],
   },
   {
     name: 'Converter',
@@ -50,6 +70,9 @@ export const toolsByCategory: ToolCategory[] = [
       base64FileConverter,
       colorConverter,
       caseConverter,
+      textToNatoAlphabet,
+      yamlToJson,
+      jsonToYaml,
     ],
   },
   {
@@ -63,6 +86,13 @@ export const toolsByCategory: ToolCategory[] = [
       metaTagGenerator,
       otpCodeGeneratorAndValidator,
       mimeTypes,
+      jwtParser,
+      keycodeInfo,
+      slugifyString,
+      htmlWysiwygEditor,
+      userAgentParser,
+      httpStatusCodes,
+      jsonDiff,
     ],
   },
   {
@@ -71,7 +101,20 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Development',
-    components: [gitMemo, randomPortGenerator, crontabGenerator, jsonViewer, sqlPrettify, chmodCalculator],
+    components: [
+      gitMemo,
+      randomPortGenerator,
+      crontabGenerator,
+      jsonViewer,
+      jsonMinify,
+      sqlPrettify,
+      chmodCalculator,
+      dockerRunToDockerComposeConverter,
+    ],
+  },
+  {
+    name: 'Network',
+    components: [ipv4SubnetCalculator, ipv4AddressConverter, ipv4RangeExpander, macAddressLookup, ipv6UlaGenerator],
   },
   {
     name: 'Math',
@@ -79,7 +122,7 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Measurement',
-    components: [chronometer],
+    components: [chronometer, temperatureConverter, benchmarkBuilder],
   },
   {
     name: 'Text',

src/tools/integer-base-converter/integer-base-converter.vue

@@ -1,14 +1,14 @@
 <template>
   <div>
-    <n-card>
+    <c-card>
       <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>
 
@@ -75,7 +75,7 @@
           :placeholder="`Base ${outputBase} will be here...`"
         />
       </n-input-group>
-    </n-card>
+    </c-card>
   </div>
 </template>
 

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'),
+});

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);
+    });
+  });
+});

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);
+}

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>

src/tools/ipv4-range-expander/index.ts

@@ -0,0 +1,13 @@
+import { UnfoldMoreOutlined } from '@vicons/material';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'IPv4 range expander',
+  path: '/ipv4-range-expander',
+  description:
+    'Given a start and an end IPv4 address this tool calculates a valid IPv4 network with its CIDR notation.',
+  keywords: ['ipv4', 'range', 'expander', 'subnet', 'creator', 'cidr'],
+  component: () => import('./ipv4-range-expander.vue'),
+  icon: UnfoldMoreOutlined,
+  createdAt: new Date('2023-04-19'),
+});

src/tools/ipv4-range-expander/ipv4-range-expander.e2e.spec.ts

@@ -0,0 +1,32 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Tool - IPv4 range expander', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/ipv4-range-expander');
+  });
+
+  test('Has correct title', async ({ page }) => {
+    await expect(page).toHaveTitle('IPv4 range expander - IT Tools');
+  });
+
+  test('Calculates correct for valid input', async ({ page }) => {
+    await page.getByPlaceholder('Start IPv4 address...').fill('192.168.1.1');
+    await page.getByPlaceholder('End IPv4 address...').fill('192.168.7.255');
+
+    expect(await page.getByTestId('start-address.old').textContent()).toEqual('192.168.1.1');
+    expect(await page.getByTestId('start-address.new').textContent()).toEqual('192.168.0.0');
+    expect(await page.getByTestId('end-address.old').textContent()).toEqual('192.168.7.255');
+    expect(await page.getByTestId('end-address.new').textContent()).toEqual('192.168.7.255');
+    expect(await page.getByTestId('addresses-in-range.old').textContent()).toEqual('1,791');
+    expect(await page.getByTestId('addresses-in-range.new').textContent()).toEqual('2,048');
+    expect(await page.getByTestId('cidr.old').textContent()).toEqual('');
+    expect(await page.getByTestId('cidr.new').textContent()).toEqual('192.168.0.0/21');
+  });
+
+  test('Hides result for invalid input', async ({ page }) => {
+    await page.getByPlaceholder('Start IPv4 address...').fill('192.168.1.1');
+    await page.getByPlaceholder('End IPv4 address...').fill('192.168.0.255');
+
+    await expect(page.getByTestId('result')).not.toBeVisible();
+  });
+});

src/tools/ipv4-range-expander/ipv4-range-expander.service.test.ts

@@ -0,0 +1,21 @@
+import { expect, describe, it } from 'vitest';
+import { calculateCidr } from './ipv4-range-expander.service';
+
+describe('ipv4RangeExpander', () => {
+  describe('when there are two valid ipv4 addresses given', () => {
+    it('should calculate valid cidr for given addresses', () => {
+      const result = calculateCidr({ startIp: '192.168.1.1', endIp: '192.168.7.255' });
+
+      expect(result).toBeDefined();
+      expect(result?.oldSize).toEqual(1791);
+      expect(result?.newSize).toEqual(2048);
+      expect(result?.newStart).toEqual('192.168.0.0');
+      expect(result?.newEnd).toEqual('192.168.7.255');
+      expect(result?.newCidr).toEqual('192.168.0.0/21');
+    });
+
+    it('should return empty result for invalid input', () => {
+      expect(calculateCidr({ startIp: '192.168.7.1', endIp: '192.168.6.255' })).not.toBeDefined();
+    });
+  });
+});

src/tools/ipv4-range-expander/ipv4-range-expander.service.ts

@@ -0,0 +1,63 @@
+import type { Ipv4RangeExpanderResult } from './ipv4-range-expander.types';
+import { convertBase } from '../integer-base-converter/integer-base-converter.model';
+import { ipv4ToInt } from '../ipv4-address-converter/ipv4-address-converter.service';
+export { calculateCidr };
+
+function bits2ip(ipInt: number) {
+  return (ipInt >>> 24) + '.' + ((ipInt >> 16) & 255) + '.' + ((ipInt >> 8) & 255) + '.' + (ipInt & 255);
+}
+
+function getRangesize(start: string, end: string) {
+  if (start == null || end == null) return -1;
+
+  return 1 + parseInt(end, 2) - parseInt(start, 2);
+}
+
+function getCidr(start: string, end: string) {
+  if (start == null || end == null) return null;
+
+  const range = getRangesize(start, end);
+  if (range < 1) {
+    return null;
+  }
+
+  let mask = 32;
+  for (let i = 0; i < 32; i++) {
+    if (start[i] !== end[i]) {
+      mask = i;
+      break;
+    }
+  }
+
+  const newStart = start.substring(0, mask) + '0'.repeat(32 - mask);
+  const newEnd = end.substring(0, mask) + '1'.repeat(32 - mask);
+
+  return { start: newStart, end: newEnd, mask: mask };
+}
+
+function calculateCidr({ startIp, endIp }: { startIp: string; endIp: string }) {
+  const start = convertBase({
+    value: ipv4ToInt({ ip: startIp }).toString(),
+    fromBase: 10,
+    toBase: 2,
+  });
+  const end = convertBase({
+    value: ipv4ToInt({ ip: endIp }).toString(),
+    fromBase: 10,
+    toBase: 2,
+  });
+
+  const cidr = getCidr(start, end);
+  if (cidr != null) {
+    const result: Ipv4RangeExpanderResult = {};
+    result.newEnd = bits2ip(parseInt(cidr.end, 2));
+    result.newStart = bits2ip(parseInt(cidr.start, 2));
+    result.newCidr = result.newStart + '/' + cidr.mask;
+    result.newSize = getRangesize(cidr.start, cidr.end);
+
+    result.oldSize = getRangesize(start, end);
+    return result;
+  }
+
+  return undefined;
+}

src/tools/ipv4-range-expander/ipv4-range-expander.types.ts

@@ -0,0 +1,7 @@
+export type Ipv4RangeExpanderResult = {
+  oldSize?: number;
+  newStart?: string;
+  newEnd?: string;
+  newCidr?: string;
+  newSize?: number;
+};

src/tools/ipv4-range-expander/ipv4-range-expander.vue

@@ -0,0 +1,110 @@
+<template>
+  <div>
+    <n-space item-style="flex:1 1 0">
+      <div>
+        <n-space item-style="flex:1 1 0">
+          <n-form-item label="Start address" v-bind="startIpValidation.attrs">
+            <n-input v-model:value="rawStartAddress" placeholder="Start IPv4 address..." />
+          </n-form-item>
+          <n-form-item label="End address" v-bind="endIpValidation.attrs">
+            <n-input v-model:value="rawEndAddress" placeholder="End IPv4 address..." />
+          </n-form-item>
+        </n-space>
+
+        <n-table v-if="showResult" data-test-id="result">
+          <thead>
+            <tr>
+              <th scope="col">&nbsp;</th>
+              <th scope="col">old value</th>
+              <th scope="col">new value</th>
+            </tr>
+          </thead>
+          <tbody>
+            <result-row
+              v-for="{ label, getOldValue, getNewValue } in calculatedValues"
+              :key="label"
+              :label="label"
+              :old-value="getOldValue(result)"
+              :new-value="getNewValue(result)"
+            />
+          </tbody>
+        </n-table>
+        <n-alert
+          v-else-if="startIpValidation.isValid && endIpValidation.isValid"
+          title="Invalid combination of start and end IPv4 address"
+          type="error"
+        >
+          <n-space vertical>
+            <n-text depth="3">
+              The end IPv4 address is lower than the start IPv4 address. This is not valid and no result could be
+              calculated. In the most cases the solution to solve this problem is to change start and end address.
+            </n-text>
+            <c-button @click="onSwitchStartEndClicked">
+              <n-icon mr-2 :component="Exchange" depth="3" size="22" />
+              Switch start and end IPv4 address
+            </c-button>
+          </n-space>
+        </n-alert>
+      </div>
+    </n-space>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useValidation } from '@/composable/validation';
+import { Exchange } from '@vicons/tabler';
+import { isValidIpv4 } from '../ipv4-address-converter/ipv4-address-converter.service';
+import type { Ipv4RangeExpanderResult } from './ipv4-range-expander.types';
+import { calculateCidr } from './ipv4-range-expander.service';
+import ResultRow from './result-row.vue';
+
+const rawStartAddress = useStorage('ipv4-range-expander:startAddress', '192.168.1.1');
+const rawEndAddress = useStorage('ipv4-range-expander:endAddress', '192.168.6.255');
+
+const result = computed(() => calculateCidr({ startIp: rawStartAddress.value, endIp: rawEndAddress.value }));
+
+const calculatedValues: {
+  label: string;
+  getOldValue: (result: Ipv4RangeExpanderResult | undefined) => string | undefined;
+  getNewValue: (result: Ipv4RangeExpanderResult | undefined) => string | undefined;
+}[] = [
+  {
+    label: 'Start address',
+    getOldValue: () => rawStartAddress.value,
+    getNewValue: (result) => result?.newStart,
+  },
+  {
+    label: 'End address',
+    getOldValue: () => rawEndAddress.value,
+    getNewValue: (result) => result?.newEnd,
+  },
+  {
+    label: 'Addresses in range',
+    getOldValue: (result) => result?.oldSize?.toLocaleString(),
+    getNewValue: (result) => result?.newSize?.toLocaleString(),
+  },
+  {
+    label: 'CIDR',
+    getOldValue: () => '',
+    getNewValue: (result) => result?.newCidr,
+  },
+];
+
+const showResult = computed(() => endIpValidation.isValid && startIpValidation.isValid && result.value !== undefined);
+const startIpValidation = useValidation({
+  source: rawStartAddress,
+  rules: [{ message: 'Invalid ipv4 address', validator: (ip) => isValidIpv4({ ip }) }],
+});
+const endIpValidation = useValidation({
+  source: rawEndAddress,
+  rules: [{ message: 'Invalid ipv4 address', validator: (ip) => isValidIpv4({ ip }) }],
+});
+
+function onSwitchStartEndClicked() {
+  const tmpStart = rawStartAddress.value;
+  rawStartAddress.value = rawEndAddress.value;
+  rawEndAddress.value = tmpStart;
+}
+</script>
+
+<style lang="less" scoped></style>