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

.github/workflows/ci.yml

@@ -27,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/releases.yml

@@ -46,3 +46,59 @@ jobs:
             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 }}

CHANGELOG.md

@@ -2,577 +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.19.0](https://github.com/CorentinTh/it-tools/compare/v2.18.0...v2.19.0) (2023-02-06)
+## Version 2023.04.23-92bd835
-
 
 ### Features
+- **ui-lib**: demo pages for c-lib components (92bd835)
+- **new-tool**: diff of two json objects (362f2fa)
+- **ipv4-range-expander**: expands a given IPv4 start and end address to a valid IPv4 subnet (#366) (df989e2)
+- **date converter**: auto focus main input (6d22025)
 
-* **new-tool:** keycode info ([c934c4e](https://github.com/CorentinTh/it-tools/commit/c934c4e50ca1a129b80b786a5d9a7dbc33ad9ba3))
+### Bug fixes
+- **ts**: cleaned legacy typechecking warning (e88c1d5)
+- **mac-address-lookup**: added copy handler on button click (c311e38)
 
-## [2.18.0](https://github.com/CorentinTh/it-tools/compare/v2.17.0...v2.18.0) (2023-02-04)
+### Refactoring
+- **ui-lib**: prevent c-button to shrink (61ece23)
+- **ui**: replaced naive ui cards with custom ones (f080933)
+- **clean**: removed unused lodash import (bb32513)
+- **clean**: removed useless br tags (74073f5)
+- **ui**: getting ride of naive ui buttons (c45bce3)
 
+## Version 2023.04.14-dbad773
 
 ### Features
+- **new-tool**: http status codes (8355bd2)
 
-* **new-tool:** json minify ([#265](https://github.com/CorentinTh/it-tools/issues/265)) ([f708f50](https://github.com/CorentinTh/it-tools/commit/f708f5091e2182fc88e7cf3e7d23b3d05edc04da))
+### Refactoring
+- **uuid-generator**: prevent NaN in quantity (6fb4994)
 
+### Chores
+- **release**: create a github release on new version (dbad773)
+- **version**: reset CHANGELOG content to support new format (85cb0ff)
 
-### Refactors
+## Version 2023.04.14-f9b77b7
-
-* **tools:** config in query params ([db817a2](https://github.com/CorentinTh/it-tools/commit/db817a2459e23bd096274a7f91815d613d5f7ff4))
-
-## [2.17.0](https://github.com/CorentinTh/it-tools/compare/v2.16.0...v2.17.0) (2023-01-13)
-
 
 ### Features
+- **new-tool**: http status codes (8355bd2)
 
-* **new-tool:** jwt parser ([#262](https://github.com/CorentinTh/it-tools/issues/262)) ([acc7f0a](https://github.com/CorentinTh/it-tools/commit/acc7f0a586c64500c5f720e70cdbccf9bffe76d9))
+### Refactoring
-* **new-tool:** temperature converter ([4607837](https://github.com/CorentinTh/it-tools/commit/4607837f9a398440e0098f2ba862e8d7422ce94f))
+- **uuid-generator**: prevent NaN in quantity (6fb4994)
 
+### Chores
+- **release**: create a github release on new version (f9b77b7)
+- **version**: reset CHANGELOG content to support new format (85cb0ff)
 
-### Refactors
+## Version 2023.04.14-2f0d239
-
-* **jwt-parser:** simplified code ([f52f7a8](https://github.com/CorentinTh/it-tools/commit/f52f7a845c34ce7da57b11c17d261733be89554f))
-
-## [2.16.0](https://github.com/CorentinTh/it-tools/compare/v2.15.0...v2.16.0) (2022-12-21)
-
 
 ### Features
+- **new-tool**: http status codes (8355bd2)
 
-* **search-bar:** use cmd + k to focus on mac ([bf88836](https://github.com/CorentinTh/it-tools/commit/bf88836dbe4037019e9545deaae1db06e5768cfb))
+### Refactoring
-* **tool:** improved favorite tool management ([af075dc](https://github.com/CorentinTh/it-tools/commit/af075dccccec959a0863e6d11516206860bed91f))
+- **uuid-generator**: prevent NaN in quantity (6fb4994)
-* **tools:** added favorite tool handling ([4cd809b](https://github.com/CorentinTh/it-tools/commit/4cd809bd0c94836532f58a2ec6aa131694cce10d))
-* **tracker:** added actions monitoring ([bfc2e24](https://github.com/CorentinTh/it-tools/commit/bfc2e24bbfc08f67ed9c9b1d93474029bc01dc8b))
 
+### Chores
+- **release**: create a github release on new version (2f0d239)
+- **version**: reset CHANGELOG content to support new format (85cb0ff)
 
-### Refactors
+## Version 2023.04.14-474cae4
-
-* **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 (474cae4)
+- **version**: reset CHANGELOG content to support new format (85cb0ff)
 
-### Bug Fixes
+## Version v2023.4.13-dce9ff9
 
-* **integer-base-converter:** handle non-decimal char and better error message ([8476cf3](https://github.com/CorentinTh/it-tools/commit/8476cf319b7ebae87c7928592604a54833ac56ef))
+_Diff not available_
-* **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:** chmod calculator ([35b5187](https://github.com/CorentinTh/it-tools/commit/35b518711938c2bc88f35d104bb35d9956f0c267))
-
-## [2.13.0](https://github.com/CorentinTh/it-tools/compare/v2.11.0...v2.13.0) (2022-11-14)
-
-
-### Features
-
-* **config:** added tsx to allowed extension ([ea5e7a7](https://github.com/CorentinTh/it-tools/commit/ea5e7a7fc7df1a3a912193912a6ab80a8a36a256))
-* **date-converter:** added mongodb objectID format ([4ef2588](https://github.com/CorentinTh/it-tools/commit/4ef25887b9d874b8789bf8dbabd8aab92b4b1b03))
-* **new-tool:** added otp generator ([5f16885](https://github.com/CorentinTh/it-tools/commit/5f168859238e9c3a8b8bbaf6b550c4b9bd163e00))
-* **new-tool:** mime type to extension converter ([7c9b8ac](https://github.com/CorentinTh/it-tools/commit/7c9b8ac178967151a4f921ac26e8c2fe8d23b886))
-
-
-### Bug Fixes
-
-* **ui:** remove icon transparency overlap ([35a3760](https://github.com/CorentinTh/it-tools/commit/35a376077116dd65b21f9a0786d2ecfc14db6051))
-
-
-### Refactors
-
-* **otp-generator:** changed url ([7f22995](https://github.com/CorentinTh/it-tools/commit/7f229959d64b7a932f32753e3838d87a819a9192))
-* token generator can use a custom alphabet ([83da6b7](https://github.com/CorentinTh/it-tools/commit/83da6b7ee9db29e40faf288f9627257aa7124038))
-* **ui:** change sponsor button location and caption ([5d8f46a](https://github.com/CorentinTh/it-tools/commit/5d8f46abf8d5a10cc4650efc87b12a9a6c537fe5))
-* **useQRCode:** switched args to MaybeRef ([7de6c86](https://github.com/CorentinTh/it-tools/commit/7de6c86f9ead8d7315614cc508dfee4fed90e9c2))
-
-## [2.12.0](https://github.com/CorentinTh/it-tools/compare/v2.10.3...v2.12.0) (2022-08-23)
-
-
-### Features
-
-* added colored share card ([ab7483b](https://github.com/CorentinTh/it-tools/commit/ab7483b5c2bd5aee1b8b609597c22b7b7b55606d))
-* **config:** added tsx to allowed extension ([741a3c2](https://github.com/CorentinTh/it-tools/commit/741a3c25a915d8296987b23bda03f2b664d51ba6))
-* **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))
-
-
-### 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))
-* 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))

components.d.ts

@@ -9,13 +9,70 @@ 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']
@@ -49,7 +106,6 @@ declare module '@vue/runtime-core' {
     NP: typeof import('naive-ui')['NP']
     NPageHeader: typeof import('naive-ui')['NPageHeader']
     NProgress: typeof import('naive-ui')['NProgress']
-    NResult: typeof import('naive-ui')['NResult']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
     NSelect: typeof import('naive-ui')['NSelect']
     NSlider: typeof import('naive-ui')['NSlider']
@@ -62,11 +118,33 @@ declare module '@vue/runtime-core' {
     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']
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "it-tools",
-  "version": "2023.4.13-dce9ff9",
+  "version": "2023.4.23-92bd835",
   "description": "Collection of handy online tools for developers, with great UX. ",
   "keywords": [
     "productivity",
@@ -30,7 +30,7 @@
     "typecheck": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
     "lint": "eslint src --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --ignore-path .gitignore",
     "script:create-new-tool": "node scripts/create-tool.mjs",
-    "release": "standard-version"
+    "release": "node ./scripts/release.mjs"
   },
   "dependencies": {
     "@it-tools/bip39": "^0.0.4",
@@ -101,6 +101,7 @@
     "@vue/test-utils": "^2.3.2",
     "@vue/tsconfig": "^0.1.3",
     "c8": "^7.13.0",
+    "consola": "^3.0.2",
     "eslint": "^8.38.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-import-resolver-typescript": "^3.5.5",
@@ -109,7 +110,6 @@
     "jsdom": "^19.0.0",
     "less": "^4.1.3",
     "prettier": "^2.8.7",
-    "standard-version": "^9.5.0",
     "start-server-and-test": "^1.15.4",
     "typescript": "~4.5.5",
     "unocss": "^0.50.8",
@@ -121,6 +121,7 @@
     "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"
   }
 }

scripts/create-tool.mjs

@@ -29,9 +29,9 @@ createToolFile(
   `${toolName}.vue`,
   `
 <template>
-  <n-card>
+  <div>
     Lorem ipsum
-  </n-card>
+  </div>
 </template>
 
 <script setup lang="ts">

scripts/getLatestChangelog.mjs

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

scripts/release.mjs

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

scripts/shared/changelog.mjs

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

scripts/shared/commits.mjs

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

src/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"
+        circle
+        :type="buttonType"
+        :style="{ opacity: isFavorite ? 1 : 0.2 }"
+        @click="toggleFavorite"
+      >
         <n-icon :component="FavoriteFilled" />
-        </template>
+      </c-button>
-      </n-button>
     </template>
     {{ isFavorite ? 'Remove from favorites' : 'Add to favorites' }}
   </n-tooltip>

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"
+        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"
       >
         <n-icon size="25" :component="BrandTwitter" />
-      </n-button>
+      </c-button>
     </template>
     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">
+      <c-button circle variant="text" to="/about" aria-label="About">
         <n-icon size="25" :component="InfoCircle" />
-        </n-button>
+      </c-button>
     </template>
     About
   </n-tooltip>
-  </router-link>
   <n-tooltip trigger="hover">
     <template #trigger>
-      <n-button size="large" circle quaternary aria-label="Toggle dark/light mode" @click="isDarkTheme = !isDarkTheme">
+      <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

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

src/components/TextareaCopyable.vue

@@ -1,6 +1,6 @@
 <template>
   <div style="overflow-x: hidden; width: 100%">
-    <n-card class="result-card">
+    <c-card class="result-card">
       <n-scrollbar
         x-scrollable
         trigger="none"
@@ -13,16 +13,16 @@
       <n-tooltip v-if="value" trigger="hover">
         <template #trigger>
           <div class="copy-button" :class="[copyPlacement]">
-            <n-button circle secondary 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" mt-4>
-      <n-button secondary @click="onCopyClicked"> {{ tooltipText }} </n-button>
+      <c-button @click="onCopyClicked"> {{ tooltipText }} </c-button>
     </n-space>
   </div>
 </template>

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">
@@ -29,7 +29,7 @@
           <br />&nbsp;
         </n-ellipsis>
       </div>
-    </n-card>
+    </c-card>
   </router-link>
 </template>
 
@@ -37,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>
@@ -50,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/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

@@ -26,7 +26,7 @@ function useQueryParam<T>({ name, defaultValue }: { name: string; defaultValue:
 
   return computed<T>({
     get() {
-      return transformer.fromQuery(proxy.value) as T;
+      return transformer.fromQuery(proxy.value) as unknown as T;
     },
     set(value) {
       proxy.value = transformer.toQuery(value as never);

src/config.ts

@@ -23,9 +23,9 @@ 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: {

src/layouts/base.layout.vue

@@ -53,38 +53,25 @@ const tools = computed<ToolCategory[]>(() => [
           <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>
@@ -92,34 +79,24 @@ const tools = computed<ToolCategory[]>(() => [
 
     <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">
           <template #trigger>
-              <n-button
+            <c-button to="/" circle variant="text" aria-label="Home">
-                tag="a"
-                :href="href"
-                :size="styleStore.isSmallScreen ? 'medium' : 'large'"
-                circle
-                quaternary
-                aria-label="Home"
-                @click="navigate"
-              >
               <n-icon size="25" :component="Home2" />
-              </n-button>
+            </c-button>
           </template>
           Home
         </n-tooltip>
-        </router-link>
 
         <search-bar />
 
@@ -127,10 +104,8 @@ const tools = computed<ToolCategory[]>(() => [
 
         <n-tooltip trigger="hover">
           <template #trigger>
-            <n-button
+            <c-button
               round
-              type="primary"
-              tag="a"
               href="https://www.buymeacoffee.com/cthmsst"
               rel="noopener"
               target="_blank"
@@ -140,7 +115,7 @@ const tools = computed<ToolCategory[]>(() => [
             >
               Buy me a coffee
               <n-icon v-if="!styleStore.isSmallScreen" :component="Heart" ml-2 />
-            </n-button>
+            </c-button>
           </template>
           ❤ Support IT Tools development !
         </n-tooltip>
@@ -165,8 +140,8 @@ const tools = computed<ToolCategory[]>(() => [
 .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/pages/404.page.vue

@@ -13,8 +13,6 @@ useHead({ title: 'Page not found - IT Tools' });
     <n-text mt-4 block depth="3">Sorry, this page does not seem to exist</n-text>
     <n-text mb-8 block depth="3">Maybe the cache is doing tricky things, try force-refreshing?</n-text>
 
-    <router-link to="/" #="{ navigate, href }" custom>
+    <c-button to="/"> Back home </c-button>
-      <n-button tag="a" :href="href" secondary @click="navigate"> Back home </n-button>
-    </router-link>
   </div>
 </template>

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"
-        tag="a"
-        text
         href="https://www.buymeacoffee.com/cthmsst"
         rel="noopener"
         target="_blank"
         @click="() => tracker.trackEvent({ eventName: 'Support button clicked' })"
       >
-        sponsoring me </n-button
+        sponsoring me </c-link
       >.
     </n-p>
 
@@ -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/main/package.json"
-        rel="noopener"
-        target="_blank"
-      >
         package.json
-      </n-button>
+      </c-link>
       file of the repository.
     </n-p>
 
@@ -54,30 +43,24 @@ 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.
     </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.
     </n-p>
   </div>

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/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,13 +8,13 @@
       <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 mb-2>
@@ -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
@@ -16,13 +16,12 @@
       </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.vue

@@ -1,8 +1,8 @@
 <template>
   <n-scrollbar style="flex: 1" x-scrollable>
-    <n-space :wrap="false" style="flex: 1" justify="center" :size="0">
+    <n-space :wrap="false" style="flex: 1" justify="center" :size="0" mb-5>
       <div v-for="(suite, index) of suites" :key="index">
-        <n-card style="width: 292px; margin: 0 8px 5px">
+        <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>
@@ -11,25 +11,23 @@
           <n-form-item label="Suite values" :show-feedback="false">
             <dynamic-values v-model:values="suite.data" />
           </n-form-item>
-        </n-card>
+        </c-card>
 
         <n-space justify="center">
-          <n-button v-if="suites.length > 1" quaternary @click="suites.splice(index, 1)">
+          <c-button v-if="suites.length > 1" variant="text" @click="suites.splice(index, 1)">
-            <template #icon>
+            <n-icon :component="Trash" depth="3" mr-2 size="18" />
-              <n-icon :component="Trash" depth="3" />
-            </template>
             Delete suite
-          </n-button>
+          </c-button>
-          <n-button quaternary @click="suites.splice(index + 1, 0, { data: [0], title: `Suite ${suites.length + 1}` })">
+          <c-button
-            <template #icon>
+            variant="text"
-              <n-icon :component="Plus" depth="3" />
+            @click="suites.splice(index + 1, 0, { data: [0], title: `Suite ${suites.length + 1}` })"
-            </template>
+          >
+            <n-icon :component="Plus" depth="3" mr-2 size="18" />
             Add suite
-          </n-button>
+          </c-button>
         </n-space>
       </div>
     </n-space>
-    <br />
   </n-scrollbar>
 
   <div style="flex: 0 0 100%">
@@ -39,15 +37,14 @@
           <n-input v-model:value="unit" placeholder="Unit (eg: ms)" />
         </n-form-item>
 
-        <n-button
+        <c-button
-          tertiary
           @click="
             suites = [
               { title: 'Suite 1', data: [] },
               { title: 'Suite 2', data: [] },
             ]
           "
-          >Reset suites</n-button
+          >Reset suites</c-button
         >
       </n-space>
 
@@ -71,10 +68,9 @@
           </tr>
         </tbody>
       </n-table>
-      <br />
+      <n-space justify="center" mt-5>
-      <n-space justify="center">
+        <c-button @click="copyAsMarkdown">Copy as markdown table</c-button>
-        <n-button tertiary @click="copyAsMarkdown">Copy as markdown table</n-button>
+        <c-button @click="copyAsBulletList">Copy as bullet list</c-button>
-        <n-button tertiary @click="copyAsBulletList">Copy as bullet list</n-button>
       </n-space>
     </div>
   </div>

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

@@ -11,22 +11,18 @@
       />
       <n-tooltip>
         <template #trigger>
-          <n-button circle quaternary @click="values.splice(index, 1)">
+          <c-button circle variant="text" @click="values.splice(index, 1)">
-            <template #icon>
+            <n-icon :component="Trash" depth="3" size="18" />
-              <n-icon :component="Trash" depth="3" />
+          </c-button>
-            </template>
-          </n-button>
         </template>
         Delete value
       </n-tooltip>
     </n-space>
 
-    <n-button tertiary @click="addValue">
+    <c-button @click="addValue">
-      <template #icon>
+      <n-icon :component="Plus" depth="3" mr-2 size="18" />
-        <n-icon :component="Plus" />
-      </template>
       Add a measure
-    </n-button>
+    </c-button>
   </div>
 </template>
 

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

@@ -1,6 +1,5 @@
 <template>
   <div>
-    <n-card>
     <n-grid cols="3" x-gap="12">
       <n-gi span="1">
         <n-form-item label="Language:">
@@ -18,16 +17,16 @@
         >
           <n-input-group>
             <n-input v-model:value="entropy" placeholder="Your string..." />
-              <n-button @click="refreshEntropy">
+            <c-button @click="refreshEntropy">
               <n-icon size="22">
                 <Refresh />
               </n-icon>
-              </n-button>
+            </c-button>
-              <n-button @click="copyEntropy">
+            <c-button @click="copyEntropy">
               <n-icon size="22">
                 <Copy />
               </n-icon>
-              </n-button>
+            </c-button>
           </n-input-group>
         </n-form-item>
       </n-gi>
@@ -48,12 +47,11 @@
           spellcheck="false"
         />
 
-          <n-button @click="copyPassphrase">
+        <c-button @click="copyPassphrase">
           <n-icon size="22" :component="Copy" />
-          </n-button>
+        </c-button>
       </n-input-group>
     </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" />
@@ -41,7 +41,7 @@
         <input-copyable :value="snakeCase(input, baseConfig)" />
       </n-form-item>
     </n-form>
-  </n-card>
+  </c-card>
 </template>
 
 <script setup lang="ts">

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.vue

@@ -4,6 +4,7 @@
       <n-input-group>
         <n-input
           v-model:value="inputDate"
+          autofocus
           :on-input="onDateInputChanged"
           placeholder="Put you date string here..."
           clearable

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

@@ -1,8 +1,7 @@
 <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">
           {{ label }}
         </div>
@@ -13,10 +12,9 @@
           </n-ellipsis>
           <div v-else class="undefined-value">unknown</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/docker-run-to-docker-compose-converter.vue

@@ -13,15 +13,13 @@
     <n-divider />
 
     <textarea-copyable :value="dockerCompose" language="yaml" />
-    <br />
+
-    <br />
+    <n-space justify="center" mt-5>
-    <n-space justify="center">
+      <c-button :disabled="dockerCompose === ''" secondary @click="download"> Download docker-compose.yml </c-button>
-      <n-button :disabled="dockerCompose === ''" secondary @click="download"> Download docker-compose.yml </n-button>
     </n-space>
 
     <div v-if="notComposable.length > 0">
-      <br />
+      <n-alert title="This options are not translatable to docker-compose" type="info" mt-5>
-      <n-alert title="This options are not translatable to docker-compose" type="info">
         <ul>
           <li v-for="(message, index) of notComposable" :key="index">{{ message }}</li>
         </ul>
@@ -29,10 +27,10 @@
     </div>
 
     <div v-if="notImplemented.length > 0">
-      <br />
       <n-alert
         title="This options are not yet implemented and therefore haven't been translated to docker-compose"
         type="warning"
+        mt-5
       >
         <ul>
           <li v-for="(message, index) of notImplemented" :key="index">{{ message }}</li>
@@ -41,8 +39,7 @@
     </div>
 
     <div v-if="errors.length > 0">
-      <br />
+      <n-alert title="The following errors occured" type="error" mt-5>
-      <n-alert title="The following errors occured" type="error">
         <ul>
           <li v-for="(message, index) of errors" :key="index">{{ message }}</li>
         </ul>

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,7 +35,7 @@
           <input-copyable :value="hashText(algo, clearText)" readonly />
         </n-input-group>
       </div>
-    </n-card>
+    </c-card>
   </div>
 </template>
 

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

@@ -1,12 +1,12 @@
 <template>
-  <n-card v-if="editor" class="editor">
+  <c-card v-if="editor" important:p0>
-    <template #header>
     <menu-bar class="editor-header" :editor="editor" />
     <n-divider style="margin-top: 0" />
-    </template>
 
+    <div px8 pb6>
       <editor-content class="editor-content" :editor="editor" />
-  </n-card>
+    </div>
+  </c-card>
 </template>
 
 <script setup lang="ts">
@@ -34,10 +34,6 @@ tryOnBeforeUnmount(() => {
 </script>
 
 <style scoped lang="less">
-::v-deep(.n-card-header) {
-  padding: 0;
-}
-
 ::v-deep(.ProseMirror-focused) {
   outline: none;
 }

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

@@ -1,11 +1,9 @@
 <template>
   <n-tooltip trigger="hover">
     <template #trigger>
-      <n-button circle quaternary :type="isActive?.() ? 'primary' : 'default'" @click="action">
+      <c-button circle variant="text" :type="isActive?.() ? 'primary' : 'default'" @click="action">
-        <template #icon>
         <n-icon :component="icon" />
-        </template>
+      </c-button>
-      </n-button>
     </template>
 
     {{ title }}

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,6 +1,9 @@
 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';
@@ -88,6 +91,8 @@ export const toolsByCategory: ToolCategory[] = [
       slugifyString,
       htmlWysiwygEditor,
       userAgentParser,
+      httpStatusCodes,
+      jsonDiff,
     ],
   },
   {
@@ -109,7 +114,7 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Network',
-    components: [ipv4SubnetCalculator, ipv4AddressConverter, macAddressLookup, ipv6UlaGenerator],
+    components: [ipv4SubnetCalculator, ipv4AddressConverter, ipv4RangeExpander, macAddressLookup, ipv6UlaGenerator],
   },
   {
     name: 'Math',

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

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

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>

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

@@ -0,0 +1,27 @@
+<template>
+  <tr>
+    <td>
+      <n-text strong>{{ label }}</n-text>
+    </td>
+    <td :data-test-id="testId + '.old'"><span-copyable :value="oldValue" class="monospace" /></td>
+    <td :data-test-id="testId + '.new'">
+      <span-copyable :value="newValue"></span-copyable>
+    </td>
+  </tr>
+</template>
+
+<script setup lang="ts">
+import SpanCopyable from '@/components/SpanCopyable.vue';
+import _ from 'lodash';
+
+const props = withDefaults(defineProps<{ label: string; oldValue?: string; newValue?: string }>(), {
+  label: '',
+  oldValue: '',
+  newValue: '',
+});
+const { label, oldValue, newValue } = toRefs(props);
+
+const testId = computed(() => _.kebabCase(label.value));
+</script>
+
+<style scoped lang="less"></style>

src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue

@@ -12,7 +12,7 @@
               <n-text strong>{{ label }}</n-text>
             </td>
             <td>
-              <copyable-ip-like v-if="getValue(networkInfo)" :ip="getValue(networkInfo)"></copyable-ip-like>
+              <span-copyable v-if="getValue(networkInfo)" :value="getValue(networkInfo)"></span-copyable>
               <n-text v-else depth="3">{{ undefinedFallback }}</n-text>
             </td>
           </tr>
@@ -20,14 +20,14 @@
       </n-table>
 
       <n-space style="margin-top: 14px" justify="space-between">
-        <n-button tertiary @click="switchToBlock({ count: -1 })">
+        <c-button @click="switchToBlock({ count: -1 })">
           <n-icon :component="ArrowLeft" />
           Previous block
-        </n-button>
+        </c-button>
-        <n-button tertiary @click="switchToBlock({ count: 1 })">
+        <c-button @click="switchToBlock({ count: 1 })">
           Next block
           <n-icon :component="ArrowRight" />
-        </n-button>
+        </c-button>
       </n-space>
     </div>
   </div>
@@ -41,8 +41,8 @@ import { useValidation } from '@/composable/validation';
 import { isNotThrowing } from '@/utils/boolean';
 import { useStorage } from '@vueuse/core';
 import { ArrowLeft, ArrowRight } from '@vicons/tabler';
+import SpanCopyable from '@/components/SpanCopyable.vue';
 import { getIPClass } from './ipv4-subnet-calculator.models';
-import CopyableIpLike from './copyable-ip-like.vue';
 
 const ip = useStorage('ipv4-subnet-calculator:ip', '192.168.0.1/24');
 

src/tools/json-diff/diff-viewer/diff-viewer.models.tsx

@@ -0,0 +1,119 @@
+import _ from 'lodash';
+import { useCopy } from '@/composable/copy';
+import type { Difference, ArrayDifference, ObjectDifference } from '../json-diff.types';
+
+export const DiffRootViewer = ({ diff }: { diff: Difference }) => {
+  return (
+    <div class={'diffs-viewer'}>
+      <ul>{DiffViewer({ diff, showKeys: false })}</ul>
+    </div>
+  );
+};
+
+const DiffViewer = ({ diff, showKeys = true }: { diff: Difference; showKeys?: boolean }) => {
+  const { type, status } = diff;
+
+  if (status === 'updated') {
+    return ComparisonViewer({ diff, showKeys });
+  }
+
+  if (type === 'array') {
+    return ChildrenViewer({ diff, showKeys, showChildrenKeys: false, openTag: '[', closeTag: ']' });
+  }
+
+  if (type === 'object') {
+    return ChildrenViewer({ diff, showKeys, openTag: '{', closeTag: '}' });
+  }
+
+  return LineDiffViewer({ diff, showKeys });
+};
+
+const LineDiffViewer = ({ diff, showKeys }: { diff: Difference; showKeys?: boolean }) => {
+  const { value, key, status, oldValue } = diff;
+  const valueToDisplay = status === 'removed' ? oldValue : value;
+
+  return (
+    <li>
+      <span class={[status, 'result']}>
+        {showKeys && (
+          <>
+            <span class={'key'}>{key}</span>
+            {': '}
+          </>
+        )}
+        {Value({ value: valueToDisplay, status })}
+      </span>
+      ,
+    </li>
+  );
+};
+
+const ComparisonViewer = ({ diff, showKeys }: { diff: Difference; showKeys?: boolean }) => {
+  const { value, key, oldValue } = diff;
+
+  return (
+    <li class={'updated-line'}>
+      {showKeys && (
+        <>
+          <span class={'key'}>{key}</span>
+          {': '}
+        </>
+      )}
+      {Value({ value: oldValue, status: 'removed' })}
+      {Value({ value, status: 'added' })},
+    </li>
+  );
+};
+
+const ChildrenViewer = ({
+  diff,
+  openTag,
+  closeTag,
+  showKeys,
+  showChildrenKeys = true,
+}: {
+  diff: ArrayDifference | ObjectDifference;
+  showKeys: boolean;
+  showChildrenKeys?: boolean;
+  openTag: string;
+  closeTag: string;
+}) => {
+  const { children, key, status, type } = diff;
+
+  return (
+    <li>
+      <div class={[type, status]} style={{ display: 'inline-block' }}>
+        {showKeys && (
+          <>
+            <span class={'key'}>{key}</span>
+            {': '}
+          </>
+        )}
+
+        {openTag}
+        {children.length > 0 && <ul>{children.map((diff) => DiffViewer({ diff, showKeys: showChildrenKeys }))}</ul>}
+        {closeTag + ','}
+      </div>
+    </li>
+  );
+};
+
+function formatValue(value: unknown) {
+  if (_.isNull(value)) {
+    return 'null';
+  }
+
+  return JSON.stringify(value);
+}
+
+const Value = ({ value, status }: { value: unknown; status: string }) => {
+  const formatedValue = formatValue(value);
+
+  const { copy } = useCopy({ source: formatedValue });
+
+  return (
+    <span class={['value', status]} onClick={copy}>
+      {formatedValue}
+    </span>
+  );
+};

src/tools/json-diff/diff-viewer/diff-viewer.vue

@@ -0,0 +1,110 @@
+<template>
+  <div v-if="showResults">
+    <n-space justify="center">
+      <n-form-item label="Only show differences" label-placement="left">
+        <n-switch v-model:value="onlyShowDifferences" />
+      </n-form-item>
+    </n-space>
+
+    <c-card data-test-id="diff-result">
+      <n-text v-if="jsonAreTheSame" depth="3" block text-center italic> The provided JSONs are the same </n-text>
+      <diff-root-viewer v-else :diff="result" />
+    </c-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useAppTheme } from '@/ui/theme/themes';
+import _ from 'lodash';
+import { DiffRootViewer } from './diff-viewer.models';
+import { diff } from '../json-diff.models';
+
+const onlyShowDifferences = ref(false);
+const props = defineProps<{ leftJson: unknown; rightJson: unknown }>();
+const { leftJson, rightJson } = toRefs(props);
+const appTheme = useAppTheme();
+
+const result = computed(() =>
+  diff(leftJson.value, rightJson.value, { onlyShowDifferences: onlyShowDifferences.value }),
+);
+
+const jsonAreTheSame = computed(() => _.isEqual(leftJson.value, rightJson.value));
+const showResults = computed(() => !_.isUndefined(leftJson.value) && !_.isUndefined(rightJson.value));
+</script>
+
+<style lang="less" scoped>
+::v-deep(.diffs-viewer) {
+  color: v-bind('appTheme.text.mutedColor');
+
+  & > ul {
+    padding-left: 0 !important;
+  }
+
+  ul {
+    list-style: none;
+    padding-left: 20px;
+    margin: 0;
+
+    li {
+      .updated-line {
+        padding: 3px 0;
+      }
+
+      .result,
+      .array,
+      .object,
+      .value {
+        &:not(:last-child) {
+          margin-right: 4px;
+        }
+
+        &.added {
+          padding: 3px 5px;
+          border-radius: 4px;
+          background-color: v-bind('appTheme.success.colorFaded');
+          color: v-bind('appTheme.success.color');
+          .key {
+            color: inherit;
+          }
+        }
+
+        &.removed {
+          padding: 3px 5px;
+          border-radius: 4px;
+          background-color: v-bind('appTheme.error.colorFaded');
+          color: v-bind('appTheme.error.color');
+
+          .key {
+            color: inherit;
+          }
+        }
+      }
+
+      .value {
+        cursor: pointer;
+        border: 1px solid transparent;
+        transition: border-color 0.2s ease-in-out;
+
+        &.added:hover {
+          border-color: v-bind('appTheme.success.color');
+        }
+
+        &.removed:hover {
+          border-color: v-bind('appTheme.error.color');
+        }
+      }
+
+      .added .added,
+      .removed .removed {
+        background-color: transparent;
+        color: inherit;
+      }
+
+      .key {
+        font-weight: 500;
+        color: v-bind('appTheme.text.baseColor');
+      }
+    }
+  }
+}
+</style>

src/tools/json-diff/index.ts

@@ -0,0 +1,12 @@
+import { CompareArrowsRound } from '@vicons/material';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'JSON diff',
+  path: '/json-diff',
+  description: 'Compare two JSON objects and get the differences between them.',
+  keywords: ['json', 'diff', 'compare', 'difference', 'object', 'data'],
+  component: () => import('./json-diff.vue'),
+  icon: CompareArrowsRound,
+  createdAt: new Date('2023-04-20'),
+});

src/tools/json-diff/json-diff.e2e.spec.ts

@@ -0,0 +1,39 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Tool - JSON diff', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/json-diff');
+  });
+
+  test('Has correct title', async ({ page }) => {
+    await expect(page).toHaveTitle('JSON diff - IT Tools');
+  });
+
+  test('Identical JSONs have a custom result message', async ({ page }) => {
+    await page.getByTestId('leftJson').fill('{"foo":"bar"}');
+    await page.getByTestId('rightJson').fill('{   "foo":  "bar" }  ');
+
+    const result = await page.getByTestId('diff-result').innerText();
+
+    expect(result).toContain('The provided JSONs are the same');
+  });
+
+  test('Different JSONs have differences listed', async ({ page }) => {
+    await page.getByTestId('leftJson').fill('{"foo":"bar"}');
+    await page.getByTestId('rightJson').fill('{"foo":"buz","baz":"qux"}');
+
+    const result = await page.getByTestId('diff-result').innerText();
+
+    expect(result).toContain(`{\nfoo: "bar""buz",\nbaz: "qux",\n},`);
+  });
+
+  test('Different JSONs have only differences listed when "Only show differences" is checked', async ({ page }) => {
+    await page.getByTestId('leftJson').fill('{"foo":"bar"}');
+    await page.getByTestId('rightJson').fill('{"foo":"bar","baz":"qux"}');
+    await page.getByRole('switch').click();
+
+    const result = await page.getByTestId('diff-result').innerText();
+
+    expect(result).toContain(`{\nbaz: "qux",\n},`);
+  });
+});

src/tools/json-diff/json-diff.models.test.ts

@@ -0,0 +1,80 @@
+import { expect, describe, it } from 'vitest';
+import { diff } from './json-diff.models';
+
+describe('json-diff models', () => {
+  describe('diff', () => {
+    it('list object differences', () => {
+      const obj = { a: 1, b: 2 };
+      const newObj = { a: 1, b: 2, c: 3 };
+      const result = diff(obj, newObj);
+
+      expect(result).toEqual({
+        key: '',
+        type: 'object',
+        children: [
+          {
+            key: 'a',
+            type: 'value',
+            value: 1,
+            oldValue: 1,
+            status: 'unchanged',
+          },
+          {
+            key: 'b',
+            type: 'value',
+            value: 2,
+            oldValue: 2,
+            status: 'unchanged',
+          },
+          {
+            key: 'c',
+            type: 'value',
+            value: 3,
+            oldValue: undefined,
+            status: 'added',
+          },
+        ],
+        oldValue: { a: 1, b: 2 },
+        value: { a: 1, b: 2, c: 3 },
+        status: 'children-updated',
+      });
+    });
+
+    it('list array differences', () => {
+      const obj = [1, 2];
+      const newObj = [1, 2, 3];
+      const result = diff(obj, newObj);
+
+      expect(result).toEqual({
+        key: '',
+        type: 'array',
+        children: [
+          {
+            key: 0,
+            type: 'value',
+            value: 1,
+            oldValue: 1,
+            status: 'unchanged',
+          },
+          {
+            key: 1,
+            type: 'value',
+            value: 2,
+            oldValue: 2,
+            status: 'unchanged',
+          },
+          {
+            key: 2,
+            type: 'value',
+            value: 3,
+            oldValue: undefined,
+            status: 'added',
+          },
+        ],
+        oldValue: [1, 2],
+        value: [1, 2, 3],
+        status: 'children-updated',
+      });
+    });
+  });
+});

src/tools/json-diff/json-diff.models.ts

@@ -0,0 +1,140 @@
+import _ from 'lodash';
+import type { Difference, DifferenceStatus } from './json-diff.types';
+
+export { diff };
+
+function diff(
+  obj: unknown,
+  newObj: unknown,
+  { onlyShowDifferences = false }: { onlyShowDifferences?: boolean } = {},
+): Difference {
+  if (_.isArray(obj) && _.isArray(newObj)) {
+    return {
+      key: '',
+      type: 'array',
+      children: diffArrays(obj, newObj, { onlyShowDifferences }),
+      oldValue: obj,
+      value: newObj,
+      status: getStatus(obj, newObj),
+    };
+  }
+
+  if (_.isObject(obj) && _.isObject(newObj)) {
+    return {
+      key: '',
+      type: 'object',
+      children: diffObjects(obj as Record<string, unknown>, newObj as Record<string, unknown>, { onlyShowDifferences }),
+      oldValue: obj,
+      value: newObj,
+      status: getStatus(obj, newObj),
+    };
+  }
+
+  return {
+    key: '',
+    type: 'value',
+    oldValue: obj,
+    value: newObj,
+    status: getStatus(obj, newObj),
+  };
+}
+
+function diffObjects(
+  obj: Record<string, unknown>,
+  newObj: Record<string, unknown>,
+  { onlyShowDifferences = false }: { onlyShowDifferences?: boolean } = {},
+): Difference[] {
+  const keys = Object.keys({ ...obj, ...newObj });
+  return keys
+    .map((key) => createDifference(obj?.[key], newObj?.[key], key, { onlyShowDifferences }))
+    .filter((diff) => !onlyShowDifferences || diff.status !== 'unchanged');
+}
+
+function createDifference(
+  value: unknown,
+  newValue: unknown,
+  key: string | number,
+  { onlyShowDifferences = false }: { onlyShowDifferences?: boolean } = {},
+): Difference {
+  const type = getType(value);
+
+  if (type === 'object') {
+    return {
+      key,
+      type,
+      children: diffObjects(value as Record<string, unknown>, newValue as Record<string, unknown>, {
+        onlyShowDifferences,
+      }),
+      oldValue: value,
+      value: newValue,
+      status: getStatus(value, newValue),
+    };
+  }
+
+  if (type === 'array') {
+    return {
+      key,
+      type,
+      children: diffArrays(value as unknown[], newValue as unknown[], { onlyShowDifferences }),
+      value: newValue,
+      oldValue: value,
+      status: getStatus(value, newValue),
+    };
+  }
+
+  return {
+    key,
+    type,
+    value: newValue,
+    oldValue: value,
+    status: getStatus(value, newValue),
+  };
+}
+
+function diffArrays(
+  arr: unknown[],
+  newArr: unknown[],
+  { onlyShowDifferences = false }: { onlyShowDifferences?: boolean } = {},
+): Difference[] {
+  const maxLength = Math.max(0, arr?.length, newArr?.length);
+  return Array.from({ length: maxLength }, (_, i) =>
+    createDifference(arr?.[i], newArr?.[i], i, { onlyShowDifferences }),
+  ).filter((diff) => !onlyShowDifferences || diff.status !== 'unchanged');
+}
+
+function getType(value: unknown): 'object' | 'array' | 'value' {
+  if (value === null) {
+    return 'value';
+  }
+  if (Array.isArray(value)) {
+    return 'array';
+  }
+  if (typeof value === 'object') {
+    return 'object';
+  }
+  return 'value';
+}
+
+function getStatus(value: unknown, newValue: unknown): DifferenceStatus {
+  if (value === undefined) {
+    return 'added';
+  }
+
+  if (newValue === undefined) {
+    return 'removed';
+  }
+
+  const bothAreObjects = getType(value) === 'object' && getType(newValue) === 'object';
+  const bothAreArrays = getType(value) === 'array' && getType(newValue) === 'array';
+  const bothAreDeepEqual = _.isEqual(value, newValue);
+
+  if (bothAreDeepEqual) {
+    return 'unchanged';
+  }
+
+  if (bothAreObjects || bothAreArrays) {
+    return 'children-updated';
+  }
+
+  return 'updated';
+}

src/tools/json-diff/json-diff.types.ts

@@ -0,0 +1,29 @@
+export type DifferenceStatus = 'added' | 'removed' | 'updated' | 'unchanged' | 'children-updated';
+
+export type ObjectDifference = {
+  key: string | number;
+  type: 'object';
+  children: Difference[];
+  status: DifferenceStatus;
+  oldValue: unknown;
+  value: unknown;
+};
+
+export type ValueDifference = {
+  key: string | number;
+  type: 'value';
+  value: unknown;
+  oldValue: unknown;
+  status: DifferenceStatus;
+};
+
+export type ArrayDifference = {
+  key: number | string;
+  type: 'array';
+  children: Difference[];
+  status: DifferenceStatus;
+  oldValue: unknown;
+  value: unknown;
+};
+
+export type Difference = ObjectDifference | ValueDifference | ArrayDifference;

src/tools/json-diff/json-diff.vue

@@ -0,0 +1,59 @@
+<template>
+  <n-form-item label="Your first json" v-bind="leftJsonValidation.attrs">
+    <n-input
+      v-model:value="rawLeftJson"
+      placeholder="Paste your first json here..."
+      type="textarea"
+      rows="20"
+      autocomplete="off"
+      autocorrect="off"
+      autocapitalize="off"
+      spellcheck="false"
+      :input-props="{ 'data-test-id': 'leftJson' }"
+    />
+  </n-form-item>
+  <n-form-item label="Your json to compare" v-bind="rightJsonValidation.attrs">
+    <n-input
+      v-model:value="rawRightJson"
+      placeholder="Paste your json to compare here..."
+      type="textarea"
+      rows="20"
+      autocomplete="off"
+      autocorrect="off"
+      autocapitalize="off"
+      spellcheck="false"
+      :input-props="{ 'data-test-id': 'rightJson' }"
+    />
+  </n-form-item>
+
+  <DiffsViewer :left-json="leftJson" :right-json="rightJson" />
+</template>
+
+<script setup lang="ts">
+import JSON5 from 'json5';
+
+import { withDefaultOnError } from '@/utils/defaults';
+import { useValidation } from '@/composable/validation';
+import { isNotThrowing } from '@/utils/boolean';
+import DiffsViewer from './diff-viewer/diff-viewer.vue';
+
+const rawLeftJson = ref('');
+const rawRightJson = ref('');
+
+const leftJson = computed(() => withDefaultOnError(() => JSON5.parse(rawLeftJson.value), undefined));
+const rightJson = computed(() => withDefaultOnError(() => JSON5.parse(rawRightJson.value), undefined));
+
+const createJsonValidation = (json: Ref) =>
+  useValidation({
+    source: json,
+    rules: [
+      {
+        validator: (value) => value === '' || isNotThrowing(() => JSON5.parse(value)),
+        message: 'Invalid JSON',
+      },
+    ],
+  });
+
+const leftJsonValidation = createJsonValidation(rawLeftJson);
+const rightJsonValidation = createJsonValidation(rawRightJson);
+</script>

src/tools/json-viewer/json.models.ts

@@ -9,7 +9,7 @@ function sortObjectKeys<T>(obj: T): T {
   }
 
   if (Array.isArray(obj)) {
-    return obj.map(sortObjectKeys) as T;
+    return obj.map(sortObjectKeys) as unknown as T;
   }
 
   return Object.keys(obj)

src/tools/jwt-parser/jwt-parser.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-card>
+  <c-card>
     <n-form-item label="JWT to decode" :feedback="validation.message" :validation-status="validation.status">
       <n-input v-model:value="rawJwt" type="textarea" placeholder="Put your token here..." rows="5" />
     </n-form-item>
@@ -29,7 +29,7 @@
         </template>
       </tbody>
     </n-table>
-  </n-card>
+  </c-card>
 </template>
 
 <script setup lang="ts">

src/tools/keycode-info/keycode-info.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
-    <n-card style="text-align: center; padding: 40px 0; margin-bottom: 26px">
+    <c-card style="text-align: center; padding: 40px 0; margin-bottom: 26px">
       <n-h2 v-if="event">{{ event.key }}</n-h2>
       <n-text strong depth="3">Press the key on your keyboard you want to get info about this key</n-text>
-    </n-card>
+    </c-card>
 
     <n-input-group v-for="({ label, value, placeholder }, i) of fields" :key="i" style="margin-bottom: 5px">
       <n-input-group-label style="flex: 0 0 150px"> {{ label }} </n-input-group-label>

src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-card>
+  <c-card>
     <n-form-item label="Paragraphs" :show-feedback="false" label-width="200" label-placement="left">
       <n-slider v-model:value="paragraphs" :step="1" :min="1" :max="20" />
     </n-form-item>
@@ -16,15 +16,12 @@
       <n-switch v-model:value="asHTML" />
     </n-form-item>
 
-    <br />
+    <n-input :value="loremIpsumText" type="textarea" placeholder="Your lorem ipsum..." readonly autosize mt-5 />
 
-    <n-input :value="loremIpsumText" type="textarea" placeholder="Your lorem ipsum..." readonly autosize />
+    <n-space justify="center" mt-5>
-    <br />
+      <c-button autofocus @click="copy"> Copy </c-button>
-    <br />
-    <n-space justify="center">
-      <n-button secondary autofocus @click="copy"> Copy </n-button>
     </n-space>
-  </n-card>
+  </c-card>
 </template>
 
 <script setup lang="ts">

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

@@ -14,17 +14,17 @@
     </n-form-item>
 
     <n-form-item label="Vendor info:">
-      <n-card>
+      <c-card>
         <n-text v-if="details">
           <div v-for="(detail, index) of details.split('\n')" :key="index">{{ detail }}</div>
         </n-text>
 
         <n-text v-else depth="3" italic>Unknown vendor for this address</n-text>
-      </n-card>
+      </c-card>
     </n-form-item>
 
     <n-space justify="center">
-      <n-button :disabled="!details" tertiary> Copy vendor info </n-button>
+      <c-button :disabled="!details" @click="copy"> Copy vendor info </c-button>
     </n-space>
   </div>
 </template>
@@ -32,6 +32,7 @@
 <script setup lang="ts">
 import db from 'oui/oui.json';
 import { macAddressValidation } from '@/utils/macAddress';
+import { useCopy } from '@/composable/copy';
 
 const getVendorValue = (address: string) => address.trim().replace(/[.:-]/g, '').toUpperCase().substring(0, 6);
 
@@ -39,6 +40,8 @@ const macAddress = ref('20:37:06:12:34:56');
 const details = computed<string | undefined>(() => db[getVendorValue(macAddress.value)]);
 
 const { attrs: validationAttrs } = macAddressValidation(macAddress);
+
+const { copy } = useCopy({ source: details, text: 'Vendor info copied to the clipboard' });
 </script>
 
 <style lang="less" scoped></style>

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

@@ -11,12 +11,10 @@
       autocapitalize="off"
       spellcheck="false"
     />
-    <br />
-    <br />
 
-    <n-card v-if="result !== ''" title="Result ">
+    <c-card v-if="result !== ''" title="Result " mt-5>
       {{ result }}
-    </n-card>
+    </c-card>
   </div>
 </template>
 

src/tools/mime-types/mime-types.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-card>
+  <c-card>
     <n-h2 style="margin-bottom: 0">Mime type to extension</n-h2>
     <div style="opacity: 0.8">Now witch file extensions are associated to a mime-type</div>
     <n-form-item>
@@ -27,9 +27,9 @@
         </n-tag>
       </div>
     </div>
-  </n-card>
+  </c-card>
 
-  <n-card>
+  <c-card>
     <n-h2 style="margin-bottom: 0">File extension to mime type</n-h2>
     <div style="opacity: 0.8">Now witch mime type is associated to a file extension</div>
     <n-form-item>
@@ -51,7 +51,7 @@
         </n-tag>
       </div>
     </div>
-  </n-card>
+  </c-card>
 
   <div>
     <n-table>

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

@@ -5,9 +5,9 @@
         <template #suffix>
           <n-tooltip trigger="hover">
             <template #trigger>
-              <n-button quaternary circle @click="refreshSecret">
+              <c-button circle variant="text" @click="refreshSecret">
                 <n-icon :component="Refresh" />
-              </n-button>
+              </c-button>
             </template>
             Generate secret token
           </n-tooltip>
@@ -23,7 +23,7 @@
     </div>
     <n-space justify="center" vertical align="center" style="margin-top: 10px">
       <n-image :src="qrcode"></n-image>
-      <n-button secondary tag="a" :href="keyUri" target="_blank">Open Key URI in new tab</n-button>
+      <c-button :href="keyUri" target="_blank">Open Key URI in new tab</c-button>
     </n-space>
   </div>
   <div style="max-width: 350px">

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

@@ -8,31 +8,30 @@
     <n-input-group>
       <n-tooltip trigger="hover" placement="bottom">
         <template #trigger>
-          <n-button data-test-id="previous-otp" secondary @click.prevent="copyPrevious(tokens.previous)">{{
+          <c-button important:h-12 data-test-id="previous-otp" @click.prevent="copyPrevious(tokens.previous)">
-            tokens.previous
+            {{ tokens.previous }}
-          }}</n-button>
+          </c-button>
         </template>
         <div>{{ previousCopied ? 'Copied !' : 'Copy previous OTP' }}</div>
       </n-tooltip>
       <n-tooltip trigger="hover" placement="bottom">
         <template #trigger>
-          <n-button
+          <c-button
-            tertiary
-            type="primary"
             data-test-id="current-otp"
             class="current-otp"
+            important:h-12
             @click.prevent="copyCurrent(tokens.current)"
           >
             {{ tokens.current }}
-          </n-button>
+          </c-button>
         </template>
         <div>{{ currentCopied ? 'Copied !' : 'Copy current OTP' }}</div>
       </n-tooltip>
       <n-tooltip trigger="hover" placement="bottom">
         <template #trigger>
-          <n-button secondary data-test-id="next-otp" @click.prevent="copyNext(tokens.next)">{{
+          <c-button important:h-12 data-test-id="next-otp" @click.prevent="copyNext(tokens.next)">{{
             tokens.next
-          }}</n-button>
+          }}</c-button>
         </template>
         <div>{{ nextCopied ? 'Copied !' : 'Copy next OTP' }}</div>
       </n-tooltip>

src/tools/qr-code-generator/qr-code-generator.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-card>
+  <c-card>
     <n-grid x-gap="12" y-gap="12" cols="1 600:3">
       <n-gi span="2">
         <n-form label-width="130" label-placement="left">
@@ -28,11 +28,11 @@
       <n-gi>
         <n-space justify="center" align="center" vertical>
           <n-image :src="qrcode" width="200" />
-          <n-button secondary @click="download"> Download qr-code </n-button>
+          <c-button @click="download"> Download qr-code </c-button>
         </n-space>
       </n-gi>
     </n-grid>
-  </n-card>
+  </c-card>
 </template>
 
 <script setup lang="ts">

src/tools/random-port-generator/random-port-generator.vue

@@ -1,13 +1,13 @@
 <template>
-  <n-card>
+  <c-card>
     <div class="port">
       {{ port }}
     </div>
     <n-space justify="center">
-      <n-button secondary @click="copy"> Copy </n-button>
+      <c-button @click="copy"> Copy </c-button>
-      <n-button secondary @click="refreshPort"> Refresh </n-button>
+      <c-button @click="refreshPort"> Refresh </c-button>
     </n-space>
-  </n-card>
+  </c-card>
 </template>
 
 <script setup lang="ts">

src/tools/roman-numeral-converter/roman-numeral-converter.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <n-card title="Arabic to roman">
+    <c-card title="Arabic to roman">
       <n-space align="center" justify="space-between">
         <n-form-item v-bind="validationNumeral">
           <n-input-number v-model:value="inputNumeral" :min="1" style="width: 200px" :show-button="false" />
@@ -8,13 +8,12 @@
         <div class="result">
           {{ outputRoman }}
         </div>
-        <n-button secondary autofocus :disabled="validationNumeral.validationStatus === 'error'" @click="copyRoman">
+        <c-button autofocus :disabled="validationNumeral.validationStatus === 'error'" @click="copyRoman">
           Copy
-        </n-button>
+        </c-button>
       </n-space>
-    </n-card>
+    </c-card>
-    <br />
+    <c-card title="Roman to arabic" mt-5>
-    <n-card title="Roman to arabic">
       <n-space align="center" justify="space-between">
         <n-form-item v-bind="validationRoman">
           <n-input v-model:value="inputRoman" style="width: 200px" />
@@ -22,11 +21,9 @@
         <div class="result">
           {{ outputNumeral }}
         </div>
-        <n-button secondary autofocus :disabled="validationRoman.validationStatus === 'error'" @click="copyArabic">
+        <c-button :disabled="validationRoman.validationStatus === 'error'" @click="copyArabic"> Copy </c-button>
-          Copy
-        </n-button>
       </n-space>
-    </n-card>
+    </c-card>
   </div>
 </template>
 

src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue

@@ -5,7 +5,7 @@
         <n-input-number v-model:value="bits" min="256" max="16384" step="8" />
       </n-form-item>
 
-      <n-button tertiary @click="refreshCerts">Refresh key-pair</n-button>
+      <c-button @click="refreshCerts">Refresh key-pair</c-button>
     </n-space>
   </div>
 

src/tools/slugify-string/slugify-string.vue

@@ -14,7 +14,7 @@
     </n-form-item>
 
     <n-space justify="center">
-      <n-button secondary :disabled="slug.length === 0" @click="copy">Copy slug</n-button>
+      <c-button :disabled="slug.length === 0" @click="copy">Copy slug</c-button>
     </n-space>
   </div>
 </template>

src/tools/svg-placeholder-generator/svg-placeholder-generator.vue

@@ -38,9 +38,9 @@
     </n-form-item>
 
     <n-space justify="center">
-      <n-button secondary @click="copySVG()">Copy svg</n-button>
+      <c-button @click="copySVG()">Copy svg</c-button>
-      <n-button secondary @click="copyBase64()">Copy base64</n-button>
+      <c-button @click="copyBase64()">Copy base64</c-button>
-      <n-button secondary @click="download()">Download svg</n-button>
+      <c-button @click="download()">Download svg</c-button>
     </n-space>
   </div>
 

src/tools/text-statistics/text-statistics.vue

@@ -1,15 +1,14 @@
 <template>
-  <n-card>
+  <c-card>
     <n-input v-model:value="text" type="textarea" placeholder="Your text..." rows="5" />
-    <br />
+
-    <br />
+    <n-space justify="space-around" mt-5>
-    <n-space justify="space-around">
       <n-statistic label="Character count" :value="text.length" />
       <n-statistic label="Word count" :value="text === '' ? 0 : text.split(/\s+/).length" />
       <n-statistic label="Line count" :value="text === '' ? 0 : text.split(/\r\n|\r|\n/).length" />
       <n-statistic label="Byte size" :value="formatBytes(getStringSizeInBytes(text))" />
     </n-space>
-  </n-card>
+  </c-card>
 </template>
 
 <script setup lang="ts">

src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue

@@ -6,12 +6,12 @@
 
     <n-space v-if="natoText" vertical>
       <n-text>Your text in NATO phonetic alphabet</n-text>
-      <n-card>
+      <c-card>
         {{ natoText }}
-      </n-card>
+      </c-card>
 
       <n-space justify="center">
-        <n-button secondary autofocus @click="copy"> Copy NATO string </n-button>
+        <c-button autofocus @click="copy"> Copy NATO string </c-button>
       </n-space>
     </n-space>
   </div>

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <n-card>
+    <c-card>
       <n-form label-placement="left" label-width="140">
         <n-space justify="center" item-style="padding: 0" :size="0">
           <div>
@@ -41,13 +41,12 @@
         autocapitalize="off"
         spellcheck="false"
       />
-      <br />
+
-      <br />
+      <n-space justify="center" mt-5>
-      <n-space justify="center">
+        <c-button @click="copy"> Copy </c-button>
-        <n-button secondary autofocus @click="copy"> Copy </n-button>
+        <c-button @click="refreshToken"> Refresh </c-button>
-        <n-button secondary @click="refreshToken"> Refresh </n-button>
       </n-space>
-    </n-card>
+    </c-card>
   </div>
 </template>
 

src/tools/url-encoder/url-encoder.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-card title="Encode">
+  <c-card title="Encode">
     <n-form-item
       label="Your string :"
       :feedback="encodedValidation.message"
@@ -24,10 +24,10 @@
     </n-form-item>
 
     <n-space justify="center">
-      <n-button secondary @click="copyEncoded"> Copy </n-button>
+      <c-button @click="copyEncoded"> Copy </c-button>
     </n-space>
-  </n-card>
+  </c-card>
-  <n-card title="Decode">
+  <c-card title="Decode">
     <n-form-item
       label="Your encoded string :"
       :feedback="decodeValidation.message"
@@ -52,9 +52,9 @@
     </n-form-item>
 
     <n-space justify="center">
-      <n-button secondary @click="copyDecoded"> Copy </n-button>
+      <c-button @click="copyDecoded"> Copy </c-button>
     </n-space>
-  </n-card>
+  </c-card>
 </template>
 
 <script setup lang="ts">

src/tools/url-parser/url-parser.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-card>
+  <c-card>
     <n-form-item label="Your url to parse:" :feedback="validation.message" :validation-status="validation.status">
       <n-input v-model:value="urlToParse" placeholder="Your url to parse..." />
     </n-form-item>
@@ -23,7 +23,7 @@
         <input-copyable :value="v" readonly />
       </n-input-group>
     </n-form>
-  </n-card>
+  </c-card>
 </template>
 
 <script setup lang="ts">

src/tools/user-agent-parser/user-agent-parser.types.ts

@@ -6,7 +6,7 @@ export type UserAgentResultSection = {
   icon?: Component;
   content: {
     label: string;
-    getValue: (blocks: UAParser.IResult) => string | undefined;
+    getValue: (blocks?: UAParser.IResult) => string | undefined;
     undefinedFallback?: string;
   }[];
 };

src/tools/user-agent-parser/user-agent-parser.vue

@@ -40,12 +40,12 @@ const sections: UserAgentResultSection[] = [
     content: [
       {
         label: 'Name',
-        getValue: (block) => block.browser.name,
+        getValue: (block) => block?.browser.name,
         undefinedFallback: 'No browser name available',
       },
       {
         label: 'Version',
-        getValue: (block) => block.browser.version,
+        getValue: (block) => block?.browser.version,
         undefinedFallback: 'No browser version available',
       },
     ],
@@ -56,12 +56,12 @@ const sections: UserAgentResultSection[] = [
     content: [
       {
         label: 'Name',
-        getValue: (block) => block.engine.name,
+        getValue: (block) => block?.engine.name,
         undefinedFallback: 'No engine name available',
       },
       {
         label: 'Version',
-        getValue: (block) => block.engine.version,
+        getValue: (block) => block?.engine.version,
         undefinedFallback: 'No engine version available',
       },
     ],
@@ -72,12 +72,12 @@ const sections: UserAgentResultSection[] = [
     content: [
       {
         label: 'Name',
-        getValue: (block) => block.os.name,
+        getValue: (block) => block?.os.name,
         undefinedFallback: 'No OS name available',
       },
       {
         label: 'Version',
-        getValue: (block) => block.os.version,
+        getValue: (block) => block?.os.version,
         undefinedFallback: 'No OS version available',
       },
     ],
@@ -88,17 +88,17 @@ const sections: UserAgentResultSection[] = [
     content: [
       {
         label: 'Model',
-        getValue: (block) => block.device.model,
+        getValue: (block) => block?.device.model,
         undefinedFallback: 'No device model available',
       },
       {
         label: 'Type',
-        getValue: (block) => block.device.type,
+        getValue: (block) => block?.device.type,
         undefinedFallback: 'No device type available',
       },
       {
         label: 'Vendor',
-        getValue: (block) => block.device.vendor,
+        getValue: (block) => block?.device.vendor,
         undefinedFallback: 'No device vendor available',
       },
     ],
@@ -109,7 +109,7 @@ const sections: UserAgentResultSection[] = [
     content: [
       {
         label: 'Architecture',
-        getValue: (block) => block.cpu.architecture,
+        getValue: (block) => block?.cpu.architecture,
         undefinedFallback: 'No CPU architecture available',
       },
     ],

src/tools/user-agent-parser/user-agent-result-cards.vue

@@ -2,7 +2,7 @@
   <div>
     <n-grid :x-gap="12" :y-gap="8" cols="1 s:2" responsive="screen">
       <n-gi v-for="{ heading, icon, content } in sections" :key="heading">
-        <n-card style="height: 100%">
+        <c-card h-full>
           <n-page-header>
             <template #title>
               {{ heading }}
@@ -12,9 +12,7 @@
             </template>
           </n-page-header>
 
-          <br />
+          <n-space mt-5>
-
-          <n-space>
             <span v-for="{ label, getValue } in content" :key="label">
               <n-tooltip v-if="getValue(userAgentInfo)" trigger="hover">
                 <template #trigger>
@@ -31,7 +29,7 @@
               <n-text v-if="getValue(userAgentInfo) === undefined" depth="3">{{ undefinedFallback }}</n-text>
             </span>
           </n-space>
-        </n-card>
+        </c-card>
       </n-gi>
     </n-grid>
   </div>

src/tools/uuid-generator/uuid-generator.vue

@@ -1,11 +1,10 @@
 <template>
-  <div>
+  <n-space vertical :size="20">
-    <n-card>
     <n-space align="center" justify="center">
       Quantity :
-        <n-input-number v-model:value="count" :min="1" :max="50" />
+      <n-input-number v-model:value="count" :min="1" :max="50" placeholder="UUID quantity" />
     </n-space>
-      <br />
+
     <n-input
       style="text-align: center; font-family: monospace"
       :value="uuids"
@@ -18,23 +17,20 @@
       autocapitalize="off"
       spellcheck="false"
     />
-      <br />
+
-      <br />
     <n-space justify="center">
-        <n-button secondary autofocus @click="copy"> Copy </n-button>
+      <c-button autofocus @click="copy"> Copy </c-button>
-        <n-button secondary @click="refreshUUIDs"> Refresh </n-button>
+      <c-button @click="refreshUUIDs"> Refresh </c-button>
+    </n-space>
   </n-space>
-    </n-card>
-  </div>
 </template>
 
 <script setup lang="ts">
 import { useCopy } from '@/composable/copy';
 import { v4 as generateUUID } from 'uuid';
-import { useQueryParam } from '@/composable/queryParams';
 import { computedRefreshable } from '@/composable/computedRefreshable';
 
-const count = useQueryParam({ defaultValue: 1, name: 'count' });
+const count = useStorage('uuid-generator:quantity', 1);
 
 const [uuids, refreshUUIDs] = computedRefreshable(() =>
   Array.from({ length: count.value }, () => generateUUID()).join('\n'),

src/ui/c-button/c-button.demo.vue

@@ -0,0 +1,29 @@
+<template>
+  <div v-for="buttonVariant of buttonVariants" :key="buttonVariant">
+    <h2>{{ _.capitalize(buttonVariant) }}</h2>
+
+    <c-button v-for="buttonType of buttonTypes" :key="buttonType" :variant="buttonVariant" :type="buttonType" mx-1>
+      Button
+    </c-button>
+
+    <c-button
+      v-for="buttonType of buttonTypes"
+      :key="buttonType"
+      :variant="buttonVariant"
+      :type="buttonType"
+      circle
+      mx-1
+    >
+      A
+    </c-button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import _ from 'lodash';
+
+const buttonVariants = ['basic', 'text'];
+const buttonTypes = ['default', 'primary'];
+</script>
+
+<style lang="less" scoped></style>

src/ui/c-button/c-button.theme.ts

@@ -0,0 +1,76 @@
+import { darken, lighten } from '../color/color.models';
+import { defineThemes } from '../theme/theme.models';
+import { appThemes } from '../theme/themes';
+
+const createState = ({
+  textColor,
+  backgroundColor,
+  hoverBackground,
+  hoveredTextColor = textColor,
+  pressedBackground,
+  pressedTextColor = textColor,
+}: {
+  textColor: string;
+  backgroundColor: string;
+  hoverBackground: string;
+  hoveredTextColor?: string;
+  pressedBackground: string;
+  pressedTextColor?: string;
+}) => ({
+  textColor,
+  backgroundColor,
+  hover: { textColor: hoveredTextColor, backgroundColor: hoverBackground },
+  pressed: { textColor: pressedTextColor, backgroundColor: pressedBackground },
+});
+
+const createTheme = ({ style }: { style: 'light' | 'dark' }) => {
+  const theme = appThemes[style];
+
+  return {
+    basic: {
+      default: createState({
+        textColor: theme.text.baseColor,
+        backgroundColor: theme.default.color,
+        hoverBackground: theme.default.colorHover,
+        pressedBackground: theme.default.colorPressed,
+      }),
+      primary: createState({
+        textColor: theme.primary.color,
+        backgroundColor: theme.primary.colorFaded,
+        hoverBackground: lighten(theme.primary.colorFaded, 30),
+        pressedBackground: darken(theme.primary.colorFaded, 30),
+      }),
+      warning: createState({
+        textColor: theme.text.baseColor,
+        backgroundColor: theme.warning.color,
+        hoverBackground: theme.warning.colorHover,
+        pressedBackground: theme.warning.colorPressed,
+      }),
+    },
+    text: {
+      default: createState({
+        textColor: theme.text.baseColor,
+        backgroundColor: 'transparent',
+        hoverBackground: theme.default.colorHover,
+        pressedBackground: theme.default.colorPressed,
+      }),
+      primary: createState({
+        textColor: theme.primary.color,
+        backgroundColor: 'transparent',
+        hoverBackground: theme.primary.colorFaded,
+        pressedBackground: darken(theme.primary.colorFaded, 30),
+      }),
+      warning: createState({
+        textColor: theme.text.baseColor,
+        backgroundColor: theme.warning.color,
+        hoverBackground: theme.warning.colorHover,
+        pressedBackground: theme.warning.colorPressed,
+      }),
+    },
+  };
+};
+
+export const { useTheme } = defineThemes({
+  dark: createTheme({ style: 'dark' }),
+  light: createTheme({ style: 'light' }),
+});

src/ui/c-button/c-button.vue

@@ -0,0 +1,115 @@
+<template>
+  <component
+    :is="tag"
+    :href="href ?? to"
+    class="c-button"
+    :class="{ disabled, round, circle }"
+    :to="to"
+    @click="handleClick"
+  >
+    <slot />
+  </component>
+</template>
+
+<script lang="ts" setup>
+import type { RouteLocationRaw } from 'vue-router';
+import { useTheme } from './c-button.theme';
+import { useAppTheme } from '../theme/themes';
+
+const props = withDefaults(
+  defineProps<{
+    type?: 'default' | 'primary';
+    variant?: 'basic' | 'text';
+    disabled?: boolean;
+    round?: boolean;
+    circle?: boolean;
+    href?: string;
+    to?: RouteLocationRaw;
+  }>(),
+  {
+    type: 'default',
+    variant: 'basic',
+    disabled: false,
+    round: false,
+    circle: false,
+    href: undefined,
+    to: undefined,
+  },
+);
+const { variant, disabled, round, circle, href, type, to } = toRefs(props);
+
+const emits = defineEmits(['click']);
+
+function handleClick(event: MouseEvent) {
+  if (!disabled.value) {
+    emits('click', event);
+  }
+}
+
+const theme = useTheme();
+const variantTheme = computed(() => theme.value[variant.value][type.value]);
+const tag = computed(() => {
+  if (href.value) {
+    return 'a';
+  }
+  if (to.value) {
+    return 'router-link';
+  }
+  return 'button';
+});
+const appTheme = useAppTheme();
+</script>
+
+<style lang="less" scoped>
+.c-button {
+  line-height: 1;
+  font-family: inherit;
+  font-size: inherit;
+  border: none;
+  text-align: center;
+  cursor: pointer;
+  text-decoration: none;
+  height: 34px;
+  font-weight: 400;
+  color: v-bind('variantTheme.textColor');
+  padding: 0 14px;
+  border-radius: 4px;
+  transition: background-color cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
+
+  background-color: v-bind('variantTheme.backgroundColor');
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  // outline-offset: 1px;
+  &.round {
+    border-radius: 100px;
+  }
+
+  &.circle {
+    border-radius: 40px;
+    width: 34px;
+  }
+
+  &:not(.disabled) {
+    &:hover {
+      background-color: v-bind('variantTheme.hover.backgroundColor');
+    }
+
+    &:active {
+      background-color: v-bind('variantTheme.pressed.backgroundColor');
+    }
+  }
+
+  &:focus {
+    outline: 1px solid v-bind('appTheme.primary.color');
+  }
+
+  &.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+</style>

src/ui/c-card/c-card.demo.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <h2>Default</h2>
+
+    <c-card title="Title">
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repudiandae ipsa reiciendis facilis officia nulla.
+      Laboriosam cumque molestias excepturi doloribus nulla nemo quod ratione rerum possimus. Excepturi nihil possimus
+      error itaque.
+    </c-card>
+  </div>
+</template>
+
+<script lang="ts" setup></script>

src/ui/c-card/c-card.theme.ts

@@ -0,0 +1,12 @@
+import { defineThemes } from '../theme/theme.models';
+
+export const { useTheme } = defineThemes({
+  dark: {
+    backgroundColor: '#232323',
+    borderColor: '#282828',
+  },
+  light: {
+    backgroundColor: '#ffffff',
+    borderColor: '#efeff5',
+  },
+});

src/ui/c-card/c-card.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="c-card">
+    <div v-if="title" class="c-card-title">
+      {{ title }}
+    </div>
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useTheme } from './c-card.theme';
+
+const props = defineProps<{
+  title?: string;
+}>();
+
+const { title } = toRefs(props);
+
+const theme = useTheme();
+</script>
+
+<style lang="less" scoped>
+.c-card {
+  background-color: v-bind('theme.backgroundColor');
+  border: 1px solid v-bind('theme.borderColor');
+  border-radius: 4px;
+  padding: 20px 24px;
+
+  &-title {
+    font-size: 16px;
+    font-weight: 500;
+    margin-bottom: 20px;
+  }
+}
+</style>

src/ui/c-link/c-link.demo.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <h2>Default</h2>
+    <c-link mx-1> Link </c-link>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import CLink from './c-link.vue';
+</script>
+
+<style lang="less" scoped></style>