chore(release): 2.5.1

fix(title): trully reactive tool title
fix: menu label key value was undefined
2025-10-23 04:52:14 +00:00 · 2022-06-02 01:00:49 +02:00 · 2022-06-02 00:59:42 +02:00 · 2022-06-02 00:57:17 +02:00 · 2022-06-02 00:44:23 +02:00 · 2022-06-02 00:30:43 +02:00
60 changed files with 1107 additions and 445 deletions
--- a/.github/PULL_REQUEST_TEMPLATE/pull_request_template.md
+++ b/.github/PULL_REQUEST_TEMPLATE/pull_request_template.md
@@ -0,0 +1,25 @@
+<!-- Thank you for contributing! -->
+
+### Description
+
+<!-- Please insert your description here and provide especially info about the "what" this PR is solving -->
+
+### Additional context
+
+<!-- e.g. is there anything you'd like reviewers to focus on? -->
+
+---
+
+### What is the purpose of this pull request? <!-- (put an "X" next to an item) -->
+
+- [ ] Bug fix
+- [ ] New Feature
+- [ ] Documentation update
+- [ ] Other
+
+### Before submitting the PR, please make sure you do the following
+
+- [ ] Submit the PR against the `dev` branch.
+- [ ] Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
+- [ ] Provide a description in this PR that addresses **what** the PR is solving, or reference the issue that it solves (e.g. `fixes #123`).
+- [ ] Ideally, include relevant tests that fail without this PR but pass with it.
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -1,6 +1,6 @@
 name: ci

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

 jobs:
  ci:
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -1,3 +1,3 @@
 {
-  "recommendations": ["johnsoncodehk.volar", "johnsoncodehk.vscode-typescript-vue-plugin"]
+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin", "dbaeumer.vscode-eslint"]
 }
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,107 @@

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


--- a/README.md
+++ b/README.md
@@ -68,6 +68,12 @@ Coded with ❤️ by [Corentin Thomasset](//corentin-thomasset.fr).

 This project is continuously deployed using [vercel.com](https://vercel.com).

+
+
+<a href="https://www.producthunt.com/posts/it-tools?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-it&#0045;tools" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=345793&theme=light" alt="IT&#0032;Tools - Collection&#0032;of&#0032;handy&#0032;online&#0032;tools&#0032;for&#0032;devs&#0044;&#0032;with&#0032;great&#0032;UX | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
+<a href="https://www.producthunt.com/posts/it-tools?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-it&#0045;tools" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=345793&theme=light&period=daily" alt="IT&#0032;Tools - Collection&#0032;of&#0032;handy&#0032;online&#0032;tools&#0032;for&#0032;devs&#0044;&#0032;with&#0032;great&#0032;UX | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
+
+
 ## License

 This project is under the [MIT license](LICENSE).
--- a/index.html
+++ b/index.html
@@ -4,13 +4,13 @@
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Aggregated set of useful tools that every developer may need once in a while." />
-    <title>IT Tools</title>
-    <meta itemprop="name" content="IT-Tools" />
-    <meta name="description" content="Aggregated set of useful tools that every developer may need once in a while." />
-    <meta itemprop="description" content="Aggregated set of useful tools that every developer may need once in a while." />
+    <title>IT Tools - Handy online tools for developers</title>
+    <meta itemprop="name" content="IT Tools - Handy online tools for developers" />
+    <meta name="description" content="Collection of handy online tools for developers, with great UX. IT Tools is a free and open-source collection of handy online tools for developers & people working in IT." />
+    <meta itemprop="description" content="Collection of handy online tools for developers, with great UX. IT Tools is a free and open-source collection of handy online tools for developers & people working in IT." />
    <link rel="author" href="/humans.txt" />
-
+    <link rel=canonical href="https://it-tools.tech">
+    
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
@@ -18,17 +18,17 @@
    <meta name="msapplication-TileColor" content="#da532c" />
    <meta name="theme-color" content="#ffffff" />

-    <meta property="og:url" content="https://dev.it-tools.tech/" />
+    <meta property="og:url" content="https://it-tools.tech/" />
    <meta property="og:type" content="website" />
-    <meta property="og:title" content="IT-Tools" />
-    <meta property="og:description" content="Aggregated set of useful tools that every developer may need once in a while." />
+    <meta property="og:title" content="IT Tools - Handy online tools for developers" />
+    <meta property="og:description" content="Collection of handy online tools for developers, with great UX. IT Tools is a free and open-source collection of handy online tools for developers & people working in IT." />
    <meta property="og:image" content="/banner.png" />

    <meta name="twitter:card" content="summary_large_image" />
-    <meta property="twitter:domain" content="dev.it-tools.tech" />
-    <meta property="twitter:url" content="https://dev.it-tools.tech/" />
-    <meta name="twitter:title" content="IT-Tools" />
-    <meta name="twitter:description" content="Aggregated set of useful tools that every developer may need once in a while." />
+    <meta property="twitter:domain" content="it-tools.tech" />
+    <meta property="twitter:url" content="https://it-tools.tech/" />
+    <meta name="twitter:title" content="IT Tools - Handy online tools for developers" />
+    <meta name="twitter:description" content="Collection of handy online tools for developers, with great UX. IT Tools is a free and open-source collection of handy online tools for developers & people working in IT." />
    <meta name="twitter:image" content="/banner.png" />
  </head>
  <body>
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "it-tools",
-  "version": "2.3.0",
+  "version": "2.5.1",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "it-tools",
-      "version": "2.3.0",
+      "version": "2.5.1",
      "dependencies": {
        "@it-tools/bip39": "^0.0.4",
        "@vicons/material": "^0.12.0",
@@ -20,7 +20,10 @@
        "cronstrue": "^2.2.0",
        "crypto-js": "^4.1.1",
        "date-fns": "^2.28.0",
+        "figue": "^1.2.0",
+        "highlight.js": "^11.5.1",
        "lodash": "^4.17.21",
+        "mathjs": "^10.6.0",
        "naive-ui": "^2.28.0",
        "pinia": "^2.0.11",
        "plausible-tracker": "^0.3.5",
@@ -58,7 +61,7 @@
        "vite-plugin-md": "^0.12.4",
        "vite-plugin-pwa": "^0.11.13",
        "vite-svg-loader": "^3.2.0",
-        "vitest": "^0.5.0",
+        "vitest": "^0.13.1",
        "vue-tsc": "^0.31.4"
      }
    },
@@ -1641,7 +1644,6 @@
      "version": "7.17.9",
      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.9.tgz",
      "integrity": "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==",
-      "dev": true,
      "dependencies": {
        "regenerator-runtime": "^0.13.4"
      },
@@ -2122,9 +2124,9 @@
      "dev": true
    },
    "node_modules/@types/chai": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.0.tgz",
-      "integrity": "sha512-/ceqdqeRraGolFTcfoXNiqjyQhZzbINDngeoAq9GoHa8PPK1yNzTaxWjA6BFWp5Ua9JpXEMSS4s5i9tS0hOJtw==",
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.1.tgz",
+      "integrity": "sha512-/zPMqDkzSZ8t3VtxOa4KPq7uzzW978M9Tvh+j7GHKuo6k6GTLxPJ4J5gE5cjfJ26pnXst0N5Hax8Sr0T2Mi9zQ==",
      "dev": true
    },
    "node_modules/@types/chai-subset": {
@@ -3101,6 +3103,12 @@
        "node": "*"
      }
    },
+    "node_modules/async": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.3.tgz",
+      "integrity": "sha512-spZRyzKL5l5BZQrr/6m/SqFdBN0q3OCI0f9rjfBzCMBIP4p75P620rR3gTmaksNOhmzgdxcaxdNfMy6anrbM0g==",
+      "dev": true
+    },
    "node_modules/async-validator": {
      "version": "4.0.7",
      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.0.7.tgz",
@@ -3472,7 +3480,7 @@
    "node_modules/check-error": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/check-error/-/check-error-1.0.2.tgz",
-      "integrity": "sha1-V00xLt2Iu13YkS6Sht1sCu1KrII=",
+      "integrity": "sha512-BrgHpW9NURQgzoNyjfq0Wu6VFO6D7IZEmJNdtgNqpzGG8RuNFHt2jQxWlAs4HMe119chBnv+34syEZtc6IhLtA==",
      "dev": true,
      "engines": {
        "node": "*"
@@ -3550,6 +3558,18 @@
        "dot-prop": "^5.1.0"
      }
    },
+    "node_modules/complex.js": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/complex.js/-/complex.js-2.1.1.tgz",
+      "integrity": "sha512-8njCHOTtFFLtegk6zQo0kkVX1rngygb/KQI6z1qZxlFI3scluC+LVTCFbrkWjBv4vvLlbQ9t88IPMC6k95VTTg==",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://www.patreon.com/infusion"
+      }
+    },
    "node_modules/concat-map": {
      "version": "0.0.1",
      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -4156,8 +4176,7 @@
    "node_modules/decimal.js": {
      "version": "10.3.1",
      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.3.1.tgz",
-      "integrity": "sha512-V0pfhfr8suzyPGOx3nmq4aHqabehUZn6Ch9kyFpV79TGDTWFmHqUqXdabR7QHqxzrYolF4+tVmJhUG4OURg5dQ==",
-      "dev": true
+      "integrity": "sha512-V0pfhfr8suzyPGOx3nmq4aHqabehUZn6Ch9kyFpV79TGDTWFmHqUqXdabR7QHqxzrYolF4+tVmJhUG4OURg5dQ=="
    },
    "node_modules/deep-eql": {
      "version": "3.0.1",
@@ -4459,12 +4478,12 @@
      "dev": true
    },
    "node_modules/ejs": {
-      "version": "3.1.6",
-      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.6.tgz",
-      "integrity": "sha512-9lt9Zse4hPucPkoP7FHDF0LQAlGyF9JVpnClFLFH3aSSbxmyoqINRpp/9wePWJTUl4KOQwRL72Iw3InHPDkoGw==",
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.7.tgz",
+      "integrity": "sha512-BIar7R6abbUxDA3bfXrO4DSgwo8I+fB5/1zgujl3HLLjwd6+9iOnrT+t3grn2qbk9vOgBubXOFwX2m9axoFaGw==",
      "dev": true,
      "dependencies": {
-        "jake": "^10.6.1"
+        "jake": "^10.8.5"
      },
      "bin": {
        "ejs": "bin/cli.js"
@@ -4948,6 +4967,11 @@
        "node": ">=6"
      }
    },
+    "node_modules/escape-latex": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/escape-latex/-/escape-latex-1.2.0.tgz",
+      "integrity": "sha512-nV5aVWW1K0wEiUIEdZ4erkGGH8mDxGyxSeqPzRNtWP7ataw+/olFObw7hujFWlVjNsaDFw5VZ5NzVSIqRgfTiw=="
+    },
    "node_modules/escape-string-regexp": {
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
@@ -5514,6 +5538,17 @@
        "reusify": "^1.0.4"
      }
    },
+    "node_modules/figue": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/figue/-/figue-1.2.0.tgz",
+      "integrity": "sha512-CXKr12kiNWjKtUK3X+YHeXKepn80s9Rg6pgZXoLQYEybgwaGJ9uGW4DrBrVK30ZWZf1mcvTbXF56AcovG7gLVw==",
+      "dependencies": {
+        "lodash": "^4.17.21"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/CorentinTh"
+      }
+    },
    "node_modules/figures": {
      "version": "3.2.0",
      "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
@@ -5542,12 +5577,33 @@
      }
    },
    "node_modules/filelist": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.2.tgz",
-      "integrity": "sha512-z7O0IS8Plc39rTCq6i6iHxk43duYOn8uFJiWSewIq0Bww1RNybVHSCjahmcC87ZqAm4OTvFzlzeGu3XAzG1ctQ==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.3.tgz",
+      "integrity": "sha512-LwjCsruLWQULGYKy7TX0OPtrL9kLpojOFKc5VCTxdFTV7w5zbsgqVKfnkKG7Qgjtq50gKfO56hJv88OfcGb70Q==",
      "dev": true,
      "dependencies": {
-        "minimatch": "^3.0.4"
+        "minimatch": "^5.0.1"
+      }
+    },
+    "node_modules/filelist/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/filelist/node_modules/minimatch": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.0.1.tgz",
+      "integrity": "sha512-nLDxIFRyhDblz3qMuq+SoRZED4+miJ/G+tdDrjkkkRnjAsBexeGpgjLEQ0blJy7rHhR2b93rhQY4SvyWu9v03g==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
      }
    },
    "node_modules/fill-range": {
@@ -5630,6 +5686,18 @@
        "node": ">=8.0.0"
      }
    },
+    "node_modules/fraction.js": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
+      "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://www.patreon.com/infusion"
+      }
+    },
    "node_modules/from": {
      "version": "0.1.7",
      "resolved": "https://registry.npmjs.org/from/-/from-0.1.7.tgz",
@@ -5724,7 +5792,7 @@
    "node_modules/get-func-name": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.0.tgz",
-      "integrity": "sha1-6td0q+5y4gQJQzoGY2YCPdaIekE=",
+      "integrity": "sha512-Hm0ixYtaSZ/V7C8FJrtZIuBBI+iSgL+1Aq82zSu8VQNB4S3Gk8e7Qs3VwBDJAhmRZcFqkl3tQu36g/Foh5I5ig==",
      "dev": true,
      "engines": {
        "node": "*"
@@ -6704,12 +6772,12 @@
      }
    },
    "node_modules/jake": {
-      "version": "10.8.4",
-      "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.4.tgz",
-      "integrity": "sha512-MtWeTkl1qGsWUtbl/Jsca/8xSoK3x0UmS82sNbjqxxG/de/M/3b1DntdjHgPMC50enlTNwXOCRqPXLLt5cCfZA==",
+      "version": "10.8.5",
+      "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.5.tgz",
+      "integrity": "sha512-sVpxYeuAhWt0OTWITwT98oyV0GsXyMlXCF+3L1SuafBVUIr/uILGRB+NqwkzhgXKvoJpDIpQvqkUALgdmQsQxw==",
      "dev": true,
      "dependencies": {
-        "async": "0.9.x",
+        "async": "^3.2.3",
        "chalk": "^4.0.2",
        "filelist": "^1.0.1",
        "minimatch": "^3.0.4"
@@ -6736,12 +6804,6 @@
        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
      }
    },
-    "node_modules/jake/node_modules/async": {
-      "version": "0.9.2",
-      "resolved": "https://registry.npmjs.org/async/-/async-0.9.2.tgz",
-      "integrity": "sha1-rqdNXmHB+JlhO/ZL2mbUx48v0X0=",
-      "dev": true
-    },
    "node_modules/jake/node_modules/chalk": {
      "version": "4.1.2",
      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -6779,6 +6841,11 @@
        "node": ">=8"
      }
    },
+    "node_modules/javascript-natural-sort": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz",
+      "integrity": "sha1-+eIwPUUH9tdDVac2ZNFED7Wg71k="
+    },
    "node_modules/jest-diff": {
      "version": "27.5.1",
      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-27.5.1.tgz",
@@ -7483,6 +7550,28 @@
        "url": "https://github.com/fb55/entities?sponsor=1"
      }
    },
+    "node_modules/mathjs": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/mathjs/-/mathjs-10.6.0.tgz",
+      "integrity": "sha512-4oI0CSX7LtcyexTSLV8uo+llj8hB5LvVE9ApjN6rBjBplQaZ4/Gr3jh0zEla9+KaCig5wonZ9oFKD+GKXFL8hg==",
+      "dependencies": {
+        "@babel/runtime": "^7.17.9",
+        "complex.js": "^2.1.1",
+        "decimal.js": "^10.3.1",
+        "escape-latex": "^1.2.0",
+        "fraction.js": "^4.2.0",
+        "javascript-natural-sort": "^0.7.1",
+        "seedrandom": "^3.0.5",
+        "tiny-emitter": "^2.1.0",
+        "typed-function": "^2.1.0"
+      },
+      "bin": {
+        "mathjs": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
    "node_modules/mdn-data": {
      "version": "2.0.14",
      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
@@ -7835,9 +7924,9 @@
      }
    },
    "node_modules/nanoid": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.2.tgz",
-      "integrity": "sha512-CuHBogktKwpm5g2sRgv83jEy2ijFzBwMoYA60orPDR7ynsLijJDqgsi4RDGj3OJpy3Ieb+LYwiRmIOGyytgITA==",
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
      "bin": {
        "nanoid": "bin/nanoid.cjs"
      },
@@ -8325,9 +8414,9 @@
      }
    },
    "node_modules/postcss": {
-      "version": "8.4.12",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.12.tgz",
-      "integrity": "sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==",
+      "version": "8.4.14",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
+      "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
      "funding": [
        {
          "type": "opencollective",
@@ -8339,7 +8428,7 @@
        }
      ],
      "dependencies": {
-        "nanoid": "^3.3.1",
+        "nanoid": "^3.3.4",
        "picocolors": "^1.0.0",
        "source-map-js": "^1.0.2"
      },
@@ -8985,8 +9074,7 @@
    "node_modules/regenerator-runtime": {
      "version": "0.13.9",
      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
-      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
-      "dev": true
+      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
    },
    "node_modules/regenerator-transform": {
      "version": "0.15.0",
@@ -9253,6 +9341,11 @@
        "node": ">=4"
      }
    },
+    "node_modules/seedrandom": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/seedrandom/-/seedrandom-3.0.5.tgz",
+      "integrity": "sha512-8OwmbklUNzwezjGInmZ+2clQmExQPvomqjL7LFqOYqtmuxRgQYqOD3mHaU+MvZn5FLUeVxVfQjwLZW/n/JFuqg=="
+    },
    "node_modules/seemly": {
      "version": "0.3.3",
      "resolved": "https://registry.npmjs.org/seemly/-/seemly-0.3.3.tgz",
@@ -9956,19 +10049,24 @@
        "readable-stream": "3"
      }
    },
+    "node_modules/tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
+    },
    "node_modules/tinypool": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-0.1.2.tgz",
-      "integrity": "sha512-fvtYGXoui2RpeMILfkvGIgOVkzJEGediv8UJt7TxdAOY8pnvUkFg/fkvqTfXG9Acc9S17Cnn1S4osDc2164guA==",
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-0.1.3.tgz",
+      "integrity": "sha512-2IfcQh7CP46XGWGGbdyO4pjcKqsmVqFAPcXfPxcPXmOWt9cYkTP9HcDmGgsfijYoAEc4z9qcpM/BaBz46Y9/CQ==",
      "dev": true,
      "engines": {
        "node": ">=14.0.0"
      }
    },
    "node_modules/tinyspy": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-0.3.0.tgz",
-      "integrity": "sha512-c5uFHqtUp74R2DJE3/Efg0mH5xicmgziaQXMm/LvuuZn3RdpADH32aEGDRyCzObXT1DNfwDMqRQ/Drh1MlO12g==",
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-0.3.2.tgz",
+      "integrity": "sha512-2+40EP4D3sFYy42UkgkFFB+kiX2Tg3URG/lVvAZFfLxgGpnWl5qQJuBw1gaLttq8UOS+2p3C0WrhJnQigLTT2Q==",
      "dev": true,
      "engines": {
        "node": ">=14.0.0"
@@ -10074,6 +10172,14 @@
        "node": ">=4"
      }
    },
+    "node_modules/typed-function": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/typed-function/-/typed-function-2.1.0.tgz",
+      "integrity": "sha512-bctQIOqx2iVbWGDGPWwIm18QScpu2XRmkC19D8rQGFsjKSgteq/o1hTZvIG/wuDq8fanpBDrLkLq+aEN/6y5XQ==",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
    "node_modules/typedarray": {
      "version": "0.0.6",
      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
@@ -10293,13 +10399,13 @@
      "integrity": "sha512-nguyw8L6Un8eelg1vQ31vIU2ESxqid7EYmy8V+MDeMaHBqaRSkg3dTBToC1PR00D89UzS/SLkfYPnx0Wf23IQQ=="
    },
    "node_modules/vite": {
-      "version": "2.9.1",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.1.tgz",
-      "integrity": "sha512-vSlsSdOYGcYEJfkQ/NeLXgnRv5zZfpAsdztkIrs7AZHV8RCMZQkwjo4DS5BnrYTqoWqLoUe1Cah4aVO4oNNqCQ==",
+      "version": "2.9.9",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.9.tgz",
+      "integrity": "sha512-ffaam+NgHfbEmfw/Vuh6BHKKlI/XIAhxE5QSS7gFLIngxg171mg1P3a4LSRME0z2ZU1ScxoKzphkipcYwSD5Ew==",
      "dev": true,
      "dependencies": {
        "esbuild": "^0.14.27",
-        "postcss": "^8.4.12",
+        "postcss": "^8.4.13",
        "resolve": "^1.22.0",
        "rollup": "^2.59.0"
      },
@@ -10382,24 +10488,25 @@
      }
    },
    "node_modules/vitest": {
-      "version": "0.5.9",
-      "resolved": "https://registry.npmjs.org/vitest/-/vitest-0.5.9.tgz",
-      "integrity": "sha512-R8lRP9Q1yIbwr8pDf2gvw4PFe8H5YMyHhBcdyfnUh6toLfCR10jrdI/WkNxdo5I4H/9XrMX9t+SAavdJExNdKg==",
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-0.13.1.tgz",
+      "integrity": "sha512-CfSBf7YFw/i8HumSUQRtZKs0aV91DC9WU8nAgIJAlawKHaFuPHQohDwOTPIFgrxySiuFYUa0Yohf9gDFfBwjxA==",
      "dev": true,
      "dependencies": {
-        "@types/chai": "^4.3.0",
+        "@types/chai": "^4.3.1",
        "@types/chai-subset": "^1.3.3",
        "chai": "^4.3.6",
+        "debug": "^4.3.4",
        "local-pkg": "^0.4.1",
-        "tinypool": "^0.1.2",
-        "tinyspy": "^0.3.0",
-        "vite": "^2.7.10"
+        "tinypool": "^0.1.3",
+        "tinyspy": "^0.3.2",
+        "vite": "^2.9.9"
      },
      "bin": {
        "vitest": "vitest.mjs"
      },
      "engines": {
-        "node": ">=14.14.0"
+        "node": ">=v14.16.0"
      },
      "funding": {
        "url": "https://github.com/sponsors/antfu"
@@ -12391,7 +12498,6 @@
      "version": "7.17.9",
      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.9.tgz",
      "integrity": "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==",
-      "dev": true,
      "requires": {
        "regenerator-runtime": "^0.13.4"
      }
@@ -12776,9 +12882,9 @@
      "dev": true
    },
    "@types/chai": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.0.tgz",
-      "integrity": "sha512-/ceqdqeRraGolFTcfoXNiqjyQhZzbINDngeoAq9GoHa8PPK1yNzTaxWjA6BFWp5Ua9JpXEMSS4s5i9tS0hOJtw==",
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.1.tgz",
+      "integrity": "sha512-/zPMqDkzSZ8t3VtxOa4KPq7uzzW978M9Tvh+j7GHKuo6k6GTLxPJ4J5gE5cjfJ26pnXst0N5Hax8Sr0T2Mi9zQ==",
      "dev": true
    },
    "@types/chai-subset": {
@@ -13541,6 +13647,12 @@
      "integrity": "sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==",
      "dev": true
    },
+    "async": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.3.tgz",
+      "integrity": "sha512-spZRyzKL5l5BZQrr/6m/SqFdBN0q3OCI0f9rjfBzCMBIP4p75P620rR3gTmaksNOhmzgdxcaxdNfMy6anrbM0g==",
+      "dev": true
+    },
    "async-validator": {
      "version": "4.0.7",
      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.0.7.tgz",
@@ -13831,7 +13943,7 @@
    "check-error": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/check-error/-/check-error-1.0.2.tgz",
-      "integrity": "sha1-V00xLt2Iu13YkS6Sht1sCu1KrII=",
+      "integrity": "sha512-BrgHpW9NURQgzoNyjfq0Wu6VFO6D7IZEmJNdtgNqpzGG8RuNFHt2jQxWlAs4HMe119chBnv+34syEZtc6IhLtA==",
      "dev": true
    },
    "check-more-types": {
@@ -13894,6 +14006,11 @@
        "dot-prop": "^5.1.0"
      }
    },
+    "complex.js": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/complex.js/-/complex.js-2.1.1.tgz",
+      "integrity": "sha512-8njCHOTtFFLtegk6zQo0kkVX1rngygb/KQI6z1qZxlFI3scluC+LVTCFbrkWjBv4vvLlbQ9t88IPMC6k95VTTg=="
+    },
    "concat-map": {
      "version": "0.0.1",
      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -14377,8 +14494,7 @@
    "decimal.js": {
      "version": "10.3.1",
      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.3.1.tgz",
-      "integrity": "sha512-V0pfhfr8suzyPGOx3nmq4aHqabehUZn6Ch9kyFpV79TGDTWFmHqUqXdabR7QHqxzrYolF4+tVmJhUG4OURg5dQ==",
-      "dev": true
+      "integrity": "sha512-V0pfhfr8suzyPGOx3nmq4aHqabehUZn6Ch9kyFpV79TGDTWFmHqUqXdabR7QHqxzrYolF4+tVmJhUG4OURg5dQ=="
    },
    "deep-eql": {
      "version": "3.0.1",
@@ -14605,12 +14721,12 @@
      "dev": true
    },
    "ejs": {
-      "version": "3.1.6",
-      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.6.tgz",
-      "integrity": "sha512-9lt9Zse4hPucPkoP7FHDF0LQAlGyF9JVpnClFLFH3aSSbxmyoqINRpp/9wePWJTUl4KOQwRL72Iw3InHPDkoGw==",
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.7.tgz",
+      "integrity": "sha512-BIar7R6abbUxDA3bfXrO4DSgwo8I+fB5/1zgujl3HLLjwd6+9iOnrT+t3grn2qbk9vOgBubXOFwX2m9axoFaGw==",
      "dev": true,
      "requires": {
-        "jake": "^10.6.1"
+        "jake": "^10.8.5"
      }
    },
    "electron-to-chromium": {
@@ -14877,6 +14993,11 @@
      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
      "dev": true
    },
+    "escape-latex": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/escape-latex/-/escape-latex-1.2.0.tgz",
+      "integrity": "sha512-nV5aVWW1K0wEiUIEdZ4erkGGH8mDxGyxSeqPzRNtWP7ataw+/olFObw7hujFWlVjNsaDFw5VZ5NzVSIqRgfTiw=="
+    },
    "escape-string-regexp": {
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
@@ -15292,6 +15413,14 @@
        "reusify": "^1.0.4"
      }
    },
+    "figue": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/figue/-/figue-1.2.0.tgz",
+      "integrity": "sha512-CXKr12kiNWjKtUK3X+YHeXKepn80s9Rg6pgZXoLQYEybgwaGJ9uGW4DrBrVK30ZWZf1mcvTbXF56AcovG7gLVw==",
+      "requires": {
+        "lodash": "^4.17.21"
+      }
+    },
    "figures": {
      "version": "3.2.0",
      "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
@@ -15311,12 +15440,32 @@
      }
    },
    "filelist": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.2.tgz",
-      "integrity": "sha512-z7O0IS8Plc39rTCq6i6iHxk43duYOn8uFJiWSewIq0Bww1RNybVHSCjahmcC87ZqAm4OTvFzlzeGu3XAzG1ctQ==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.3.tgz",
+      "integrity": "sha512-LwjCsruLWQULGYKy7TX0OPtrL9kLpojOFKc5VCTxdFTV7w5zbsgqVKfnkKG7Qgjtq50gKfO56hJv88OfcGb70Q==",
      "dev": true,
      "requires": {
-        "minimatch": "^3.0.4"
+        "minimatch": "^5.0.1"
+      },
+      "dependencies": {
+        "brace-expansion": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+          "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+          "dev": true,
+          "requires": {
+            "balanced-match": "^1.0.0"
+          }
+        },
+        "minimatch": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.0.1.tgz",
+          "integrity": "sha512-nLDxIFRyhDblz3qMuq+SoRZED4+miJ/G+tdDrjkkkRnjAsBexeGpgjLEQ0blJy7rHhR2b93rhQY4SvyWu9v03g==",
+          "dev": true,
+          "requires": {
+            "brace-expansion": "^2.0.1"
+          }
+        }
      }
    },
    "fill-range": {
@@ -15370,6 +15519,11 @@
        "signal-exit": "^3.0.2"
      }
    },
+    "fraction.js": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
+      "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA=="
+    },
    "from": {
      "version": "0.1.7",
      "resolved": "https://registry.npmjs.org/from/-/from-0.1.7.tgz",
@@ -15442,7 +15596,7 @@
    "get-func-name": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.0.tgz",
-      "integrity": "sha1-6td0q+5y4gQJQzoGY2YCPdaIekE=",
+      "integrity": "sha512-Hm0ixYtaSZ/V7C8FJrtZIuBBI+iSgL+1Aq82zSu8VQNB4S3Gk8e7Qs3VwBDJAhmRZcFqkl3tQu36g/Foh5I5ig==",
      "dev": true
    },
    "get-intrinsic": {
@@ -16167,12 +16321,12 @@
      }
    },
    "jake": {
-      "version": "10.8.4",
-      "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.4.tgz",
-      "integrity": "sha512-MtWeTkl1qGsWUtbl/Jsca/8xSoK3x0UmS82sNbjqxxG/de/M/3b1DntdjHgPMC50enlTNwXOCRqPXLLt5cCfZA==",
+      "version": "10.8.5",
+      "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.5.tgz",
+      "integrity": "sha512-sVpxYeuAhWt0OTWITwT98oyV0GsXyMlXCF+3L1SuafBVUIr/uILGRB+NqwkzhgXKvoJpDIpQvqkUALgdmQsQxw==",
      "dev": true,
      "requires": {
-        "async": "0.9.x",
+        "async": "^3.2.3",
        "chalk": "^4.0.2",
        "filelist": "^1.0.1",
        "minimatch": "^3.0.4"
@@ -16187,12 +16341,6 @@
            "color-convert": "^2.0.1"
          }
        },
-        "async": {
-          "version": "0.9.2",
-          "resolved": "https://registry.npmjs.org/async/-/async-0.9.2.tgz",
-          "integrity": "sha1-rqdNXmHB+JlhO/ZL2mbUx48v0X0=",
-          "dev": true
-        },
        "chalk": {
          "version": "4.1.2",
          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -16220,6 +16368,11 @@
        }
      }
    },
+    "javascript-natural-sort": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz",
+      "integrity": "sha1-+eIwPUUH9tdDVac2ZNFED7Wg71k="
+    },
    "jest-diff": {
      "version": "27.5.1",
      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-27.5.1.tgz",
@@ -16772,6 +16925,22 @@
        }
      }
    },
+    "mathjs": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/mathjs/-/mathjs-10.6.0.tgz",
+      "integrity": "sha512-4oI0CSX7LtcyexTSLV8uo+llj8hB5LvVE9ApjN6rBjBplQaZ4/Gr3jh0zEla9+KaCig5wonZ9oFKD+GKXFL8hg==",
+      "requires": {
+        "@babel/runtime": "^7.17.9",
+        "complex.js": "^2.1.1",
+        "decimal.js": "^10.3.1",
+        "escape-latex": "^1.2.0",
+        "fraction.js": "^4.2.0",
+        "javascript-natural-sort": "^0.7.1",
+        "seedrandom": "^3.0.5",
+        "tiny-emitter": "^2.1.0",
+        "typed-function": "^2.1.0"
+      }
+    },
    "mdn-data": {
      "version": "2.0.14",
      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
@@ -17043,9 +17212,9 @@
      }
    },
    "nanoid": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.2.tgz",
-      "integrity": "sha512-CuHBogktKwpm5g2sRgv83jEy2ijFzBwMoYA60orPDR7ynsLijJDqgsi4RDGj3OJpy3Ieb+LYwiRmIOGyytgITA=="
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
    },
    "natural-compare": {
      "version": "1.4.0",
@@ -17393,11 +17562,11 @@
      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw=="
    },
    "postcss": {
-      "version": "8.4.12",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.12.tgz",
-      "integrity": "sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==",
+      "version": "8.4.14",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
+      "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
      "requires": {
-        "nanoid": "^3.3.1",
+        "nanoid": "^3.3.4",
        "picocolors": "^1.0.0",
        "source-map-js": "^1.0.2"
      }
@@ -17907,8 +18076,7 @@
    "regenerator-runtime": {
      "version": "0.13.9",
      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
-      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
-      "dev": true
+      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
    },
    "regenerator-transform": {
      "version": "0.15.0",
@@ -18102,6 +18270,11 @@
        "kind-of": "^6.0.0"
      }
    },
+    "seedrandom": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/seedrandom/-/seedrandom-3.0.5.tgz",
+      "integrity": "sha512-8OwmbklUNzwezjGInmZ+2clQmExQPvomqjL7LFqOYqtmuxRgQYqOD3mHaU+MvZn5FLUeVxVfQjwLZW/n/JFuqg=="
+    },
    "seemly": {
      "version": "0.3.3",
      "resolved": "https://registry.npmjs.org/seemly/-/seemly-0.3.3.tgz",
@@ -18648,16 +18821,21 @@
        "readable-stream": "3"
      }
    },
+    "tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
+    },
    "tinypool": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-0.1.2.tgz",
-      "integrity": "sha512-fvtYGXoui2RpeMILfkvGIgOVkzJEGediv8UJt7TxdAOY8pnvUkFg/fkvqTfXG9Acc9S17Cnn1S4osDc2164guA==",
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-0.1.3.tgz",
+      "integrity": "sha512-2IfcQh7CP46XGWGGbdyO4pjcKqsmVqFAPcXfPxcPXmOWt9cYkTP9HcDmGgsfijYoAEc4z9qcpM/BaBz46Y9/CQ==",
      "dev": true
    },
    "tinyspy": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-0.3.0.tgz",
-      "integrity": "sha512-c5uFHqtUp74R2DJE3/Efg0mH5xicmgziaQXMm/LvuuZn3RdpADH32aEGDRyCzObXT1DNfwDMqRQ/Drh1MlO12g==",
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-0.3.2.tgz",
+      "integrity": "sha512-2+40EP4D3sFYy42UkgkFFB+kiX2Tg3URG/lVvAZFfLxgGpnWl5qQJuBw1gaLttq8UOS+2p3C0WrhJnQigLTT2Q==",
      "dev": true
    },
    "to-fast-properties": {
@@ -18738,6 +18916,11 @@
      "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==",
      "dev": true
    },
+    "typed-function": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/typed-function/-/typed-function-2.1.0.tgz",
+      "integrity": "sha512-bctQIOqx2iVbWGDGPWwIm18QScpu2XRmkC19D8rQGFsjKSgteq/o1hTZvIG/wuDq8fanpBDrLkLq+aEN/6y5XQ=="
+    },
    "typedarray": {
      "version": "0.0.6",
      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
@@ -18909,14 +19092,14 @@
      "integrity": "sha512-nguyw8L6Un8eelg1vQ31vIU2ESxqid7EYmy8V+MDeMaHBqaRSkg3dTBToC1PR00D89UzS/SLkfYPnx0Wf23IQQ=="
    },
    "vite": {
-      "version": "2.9.1",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.1.tgz",
-      "integrity": "sha512-vSlsSdOYGcYEJfkQ/NeLXgnRv5zZfpAsdztkIrs7AZHV8RCMZQkwjo4DS5BnrYTqoWqLoUe1Cah4aVO4oNNqCQ==",
+      "version": "2.9.9",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.9.tgz",
+      "integrity": "sha512-ffaam+NgHfbEmfw/Vuh6BHKKlI/XIAhxE5QSS7gFLIngxg171mg1P3a4LSRME0z2ZU1ScxoKzphkipcYwSD5Ew==",
      "dev": true,
      "requires": {
        "esbuild": "^0.14.27",
        "fsevents": "~2.3.2",
-        "postcss": "^8.4.12",
+        "postcss": "^8.4.13",
        "resolve": "^1.22.0",
        "rollup": "^2.59.0"
      }
@@ -18960,18 +19143,19 @@
      }
    },
    "vitest": {
-      "version": "0.5.9",
-      "resolved": "https://registry.npmjs.org/vitest/-/vitest-0.5.9.tgz",
-      "integrity": "sha512-R8lRP9Q1yIbwr8pDf2gvw4PFe8H5YMyHhBcdyfnUh6toLfCR10jrdI/WkNxdo5I4H/9XrMX9t+SAavdJExNdKg==",
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-0.13.1.tgz",
+      "integrity": "sha512-CfSBf7YFw/i8HumSUQRtZKs0aV91DC9WU8nAgIJAlawKHaFuPHQohDwOTPIFgrxySiuFYUa0Yohf9gDFfBwjxA==",
      "dev": true,
      "requires": {
-        "@types/chai": "^4.3.0",
+        "@types/chai": "^4.3.1",
        "@types/chai-subset": "^1.3.3",
        "chai": "^4.3.6",
+        "debug": "^4.3.4",
        "local-pkg": "^0.4.1",
-        "tinypool": "^0.1.2",
-        "tinyspy": "^0.3.0",
-        "vite": "^2.7.10"
+        "tinypool": "^0.1.3",
+        "tinyspy": "^0.3.2",
+        "vite": "^2.9.9"
      }
    },
    "void-elements": {
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "it-tools",
-  "version": "2.3.0",
+  "version": "2.5.1",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
@@ -25,7 +25,10 @@
    "cronstrue": "^2.2.0",
    "crypto-js": "^4.1.1",
    "date-fns": "^2.28.0",
+    "figue": "^1.2.0",
+    "highlight.js": "^11.5.1",
    "lodash": "^4.17.21",
+    "mathjs": "^10.6.0",
    "naive-ui": "^2.28.0",
    "pinia": "^2.0.11",
    "plausible-tracker": "^0.3.5",
@@ -63,7 +66,7 @@
    "vite-plugin-md": "^0.12.4",
    "vite-plugin-pwa": "^0.11.13",
    "vite-svg-loader": "^3.2.0",
-    "vitest": "^0.5.0",
+    "vitest": "^0.13.1",
    "vue-tsc": "^0.31.4"
  }
 }
--- a/scripts/create-tool.mjs
+++ b/scripts/create-tool.mjs
@@ -39,16 +39,16 @@ createToolFile(

 <style lang="less" scoped>
 </style>
-`
+`,
 );

 createToolFile(
  `index.ts`,
  `
 import { ArrowsShuffle } from '@vicons/tabler';
-import type { ITool } from './../Tool';
+import { defineTool } from '../tool';

-export const tool: ITool = {
+export const tool = defineTool({
  name: '${toolNameTitleCase}',
  path: '/${toolName}',
  description: '',
@@ -56,7 +56,7 @@ export const tool: ITool = {
  component: () => import('./${toolName}.vue'),
  icon: ArrowsShuffle,
 };
-`
+`,
 );

 createToolFile(`${toolName}.service.ts`, ``);
@@ -69,7 +69,7 @@ import { expect, describe, it } from 'vitest';
 // describe('${toolName}', () => {
 //
 // })
-`
+`,
 );

 const toolsIndex = join(toolsDir, 'index.ts');
--- a/src/components/MenuIconItem.vue
+++ b/src/components/MenuIconItem.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="menu-icon-item">
+    <n-icon :component="tool.icon" />
+    <div v-if="tool.isNew" class="badge"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ITool } from '@/tools/tool';
+import { useThemeVars } from 'naive-ui';
+import { toRefs } from 'vue';
+
+const props = defineProps<{ tool: ITool }>();
+const { tool } = toRefs(props);
+
+const theme = useThemeVars();
+</script>
+
+<style lang="less" scoped>
+.menu-icon-item {
+  position: relative;
+
+  .badge {
+    position: absolute;
+    background-color: v-bind('theme.primaryColor');
+    border-radius: 10px;
+    line-height: 1;
+    top: 3px;
+    left: -6px;
+    font-size: 10px;
+
+    height: 6px;
+    width: 6px;
+  }
+}
+</style>
--- a/src/components/NavbarButtons.vue
+++ b/src/components/NavbarButtons.vue
@@ -23,7 +23,7 @@
        circle
        quaternary
        tag="a"
-        href="https://twitter.com/cthmsst"
+        href="https://twitter.com/ittoolsdottech"
        rel="noopener"
        target="_blank"
      >
--- a/src/components/ToolCard.vue
+++ b/src/components/ToolCard.vue
@@ -1,10 +1,24 @@
 <template>
  <router-link :to="tool.path">
    <n-card class="tool-card">
-      <n-icon class="icon" size="40" :component="tool.icon" />
+      <n-space justify="space-between" align="center">
+        <n-icon class="icon" size="40" :component="tool.icon" />
+        <n-tag
+          v-if="tool.isNew"
+          size="small"
+          class="badge-new"
+          round
+          type="success"
+          :bordered="false"
+          :color="{ color: theme.primaryColor, textColor: theme.tagColor }"
+        >
+          New
+        </n-tag>
+      </n-space>
      <n-h3 class="title">
        <n-ellipsis>{{ tool.name }}</n-ellipsis>
      </n-h3>
+
      <div class="description">
        <n-ellipsis :line-clamp="2" :tooltip="false">
          {{ tool.description }}
@@ -15,11 +29,13 @@
 </template>

 <script setup lang="ts">
-import type { ITool } from '@/tools/Tool';
-import { toRefs, defineProps } from 'vue';
+import type { ITool } from '@/tools/tool';
+import { useThemeVars } from 'naive-ui';
+import { toRefs } from 'vue';

 const props = defineProps<{ tool: ITool & { category: string } }>();
 const { tool } = toRefs(props);
+const theme = useThemeVars();
 </script>

 <style lang="less" scoped>
--- a/src/composable/validation.ts
+++ b/src/composable/validation.ts
@@ -5,6 +5,14 @@ type UseValidationRule<T> = {
  message: string;
 };

+function isFalsyOrHasThrown(cb: () => boolean) {
+  try {
+    return !cb();
+  } catch (_) {
+    return true;
+  }
+}
+
 export function useValidation<T>({ source, rules }: { source: Ref<T>; rules: UseValidationRule<T>[] }) {
  const state = reactive<{
    message: string;
@@ -19,7 +27,7 @@ export function useValidation<T>({ source, rules }: { source: Ref<T>; rules: Use
    state.status = undefined;

    for (const rule of rules) {
-      if (!rule.validator(source.value)) {
+      if (isFalsyOrHasThrown(() => rule.validator(source.value))) {
        state.message = rule.message;
        state.status = 'error';
      }
--- a/src/config.ts
+++ b/src/config.ts
@@ -0,0 +1,65 @@
+import { figue } from 'figue';
+
+export const config = figue({
+  app: {
+    version: {
+      doc: 'Application current version',
+      format: 'string',
+      default: '0.0.0',
+      env: 'PACKAGE_VERSION',
+    },
+    lastCommitSha: {
+      doc: 'Application last commit SHA version',
+      format: 'string',
+      default: '',
+      env: 'VITE_VERCEL_GIT_COMMIT_SHA',
+    },
+    baseUrl: {
+      doc: 'Application base url',
+      format: 'string',
+      default: '/',
+      env: 'BASE_URL',
+    },
+    env: {
+      doc: 'Application current env',
+      format: 'enum',
+      values: ['production', 'development', 'test'],
+      default: 'development',
+      env: 'MODE',
+    },
+  },
+  plausible: {
+    domain: {
+      doc: 'Plausible current domain',
+      format: 'string',
+      default: '',
+      env: 'VITE_PLAUSIBLE_DOMAIN',
+    },
+    apiHost: {
+      doc: 'Plausible remote api host',
+      format: 'string',
+      default: '',
+      env: 'VITE_PLAUSIBLE_API_HOST',
+    },
+    trackLocalhost: {
+      doc: 'Enable or disable localhost tracking by plausible',
+      format: 'boolean',
+      default: false,
+    },
+  },
+  tools: {
+    newTools: {
+      doc: 'Tool names for tools flagged a as new',
+      format: 'array',
+      default: [],
+      env: 'VITE_NEW_TOOLS',
+    },
+  },
+})
+  .loadEnv({
+    ...import.meta.env,
+    // Because the string 'import.meta.env.PACKAGE_VERSION' is statically replaced during build time (see 'define' in vite.config.ts)
+    PACKAGE_VERSION: import.meta.env.PACKAGE_VERSION,
+  })
+  .validate()
+  .getConfig();
--- a/src/layouts/base.layout.vue
+++ b/src/layouts/base.layout.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { NIcon, useThemeVars } from 'naive-ui';
-import { h, type Component } from 'vue';
+import { NIcon, useThemeVars, type MenuGroupOption } from 'naive-ui';
+import { h } from 'vue';
 import { RouterLink, useRoute } from 'vue-router';
 import { Heart, Menu2, Home2 } from '@vicons/tabler';
 import { toolsByCategory } from '@/tools';
@@ -9,24 +9,27 @@ import { useStyleStore } from '@/stores/style.store';
 import HeroGradient from '../assets/hero-gradient.svg?component';
 import MenuLayout from '../components/MenuLayout.vue';
 import NavbarButtons from '../components/NavbarButtons.vue';
+import { config } from '@/config';
+import MenuIconItem from '@/components/MenuIconItem.vue';
+import type { ITool } from '@/tools/tool';

 const themeVars = useThemeVars();
 const route = useRoute();
 const styleStore = useStyleStore();
-const version = import.meta.env.PACKAGE_VERSION;
-const commitSha = import.meta.env.GIT_SHORT_SHA;
+const version = config.app.version;
+const commitSha = config.app.lastCommitSha.slice(0, 7);

-const makeLabel = (text: string, to: string) => () => h(RouterLink, { to }, { default: () => text });
-const makeIcon = (icon: Component) => () => h(NIcon, null, { default: () => h(icon) });
+const makeLabel = (tool: ITool) => () => h(RouterLink, { to: tool.path }, { default: () => tool.name });
+const makeIcon = (tool: ITool) => () => h(MenuIconItem, { tool });

-const m = toolsByCategory.map((category) => ({
+const menuOptions: MenuGroupOption[] = toolsByCategory.map((category) => ({
  label: category.name,
  key: category.name,
  type: 'group',
-  children: category.components.map(({ name, path, icon }) => ({
-    label: makeLabel(name, path),
-    icon: makeIcon(icon),
-    key: name,
+  children: category.components.map((tool) => ({
+    label: makeLabel(tool),
+    icon: makeIcon(tool),
+    key: tool.name,
  })),
 }));
 </script>
@@ -53,7 +56,7 @@ const m = toolsByCategory.map((category) => ({
          :value="(route.name as string)"
          :collapsed-width="64"
          :collapsed-icon-size="22"
-          :options="m"
+          :options="menuOptions"
          :indent="20"
        />

@@ -217,6 +220,11 @@ const m = toolsByCategory.map((category) => ({
  }
 }

+// ::v-deep(.n-menu-item-content-header) {
+//   overflow: visible !important;
+//   // overflow-x: hidden !important;
+// }
+
 .navigation {
  display: flex;
  align-items: center;
--- a/src/layouts/tool.layout.vue
+++ b/src/layouts/tool.layout.vue
@@ -3,11 +3,13 @@ import { useRoute } from 'vue-router';
 import BaseLayout from './base.layout.vue';
 import { useHead } from '@vueuse/head';
 import type { HeadObject } from '@vueuse/head';
-import { reactive } from 'vue';
+import { computed } from 'vue';
+import { useThemeVars } from 'naive-ui';

 const route = useRoute();
+const theme = useThemeVars();

-const head = reactive<HeadObject>({
+const head = computed<HeadObject>(() => ({
  title: `${route.meta.name} - IT Tools`,
  meta: [
    {
@@ -19,7 +21,7 @@ const head = reactive<HeadObject>({
      content: route.meta.keywords,
    },
  ],
-});
+}));
 useHead(head);
 </script>

@@ -27,26 +29,56 @@ useHead(head);
  <base-layout>
    <div class="tool-layout">
      <div class="tool-header">
-        <n-h1>{{ route.meta.name }}</n-h1>
+        <n-h1>
+          {{ route.meta.name }}
+
+          <n-tag
+            v-if="route.meta.isNew"
+            round
+            type="success"
+            :bordered="false"
+            :color="{ color: theme.primaryColor, textColor: theme.tagColor }"
+          >
+            New tool
+          </n-tag>
+          <!-- <span class="new-tool-badge">New !</span> -->
+        </n-h1>
+
        <div class="separator" />
        <div class="description">
          {{ route.meta.description }}
        </div>
      </div>
+    </div>

+    <div class="tool-content">
      <slot />
    </div>
  </base-layout>
 </template>

 <style lang="less" scoped>
+.tool-content {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: 16px;
+
+  ::v-deep(& > *) {
+    flex: 0 1 600px;
+  }
+}
+
 .tool-layout {
-  max-width: 700px;
+  max-width: 600px;
  margin: 0 auto;
  box-sizing: border-box;

  .tool-header {
    padding: 40px 0;
+    width: 100%;

    .n-h1 {
      opacity: 0.9;
--- a/src/pages/Home.page.vue
+++ b/src/pages/Home.page.vue
@@ -3,13 +3,19 @@ import { toolsWithCategory } from '@/tools';
 import ToolCard from '../components/ToolCard.vue';
 import { useHead } from '@vueuse/head';

-useHead({ title: 'IT Tools' });
+useHead({ title: 'IT Tools - Handy online tools for developers' });
 </script>

 <template>
  <div class="home-page">
    <n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
-      <n-gi v-for="tool in toolsWithCategory" :key="tool.name">
+      <n-gi
+        v-for="tool in [
+          ...toolsWithCategory.filter(({ isNew }) => isNew),
+          ...toolsWithCategory.filter(({ isNew }) => !isNew),
+        ]"
+        :key="tool.name"
+      >
        <tool-card :tool="tool" />
      </n-gi>
    </n-grid>
--- a/src/plugins/naive.plugin.ts
+++ b/src/plugins/naive.plugin.ts
@@ -50,9 +50,11 @@ import {
  NImage,
  NScrollbar,
  NGradientText,
+  NCode,
 } from 'naive-ui';

 const components = [
+  NCode,
  NGradientText,
  NScrollbar,
  NImage,
--- a/src/plugins/plausible.plugin.ts
+++ b/src/plugins/plausible.plugin.ts
@@ -1,15 +1,10 @@
-import Plausible, { type PlausibleOptions } from 'plausible-tracker';
+import { config } from '@/config';
+import Plausible from 'plausible-tracker';
 import type { App } from 'vue';

-const options: PlausibleOptions = {
-  domain: import.meta.env.VITE_PLAUSIBLE_DOMAIN,
-  apiHost: import.meta.env.VITE_PLAUSIBLE_API_HOST,
-  trackLocalhost: false,
-};
-
 export const plausible = {
  install: (app: App) => {
-    const plausible = Plausible(options);
+    const plausible = Plausible(config.plausible);
    plausible.enableAutoPageviews();

    app.config.globalProperties.$plausible = plausible;
--- a/src/router.ts
+++ b/src/router.ts
@@ -3,6 +3,7 @@ import { createRouter, createWebHistory } from 'vue-router';
 import HomePage from './pages/Home.page.vue';
 import NotFound from './pages/404.page.vue';
 import { tools } from './tools';
+import { config } from './config';

 const toolsRoutes = tools.map(({ path, name, component, ...config }) => ({
  path,
@@ -17,7 +18,7 @@ const toolsRedirectRoutes = tools
  );

 const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
+  history: createWebHistory(config.app.baseUrl),
  routes: [
    {
      path: '/',
--- a/src/tools/Tool.ts
+++ b/src/tools/Tool.ts
@@ -1,17 +0,0 @@
-import type { Component } from 'vue';
-
-export interface ITool {
-  name: string;
-  path: string;
-  description: string;
-  keywords: string[];
-  component: () => Promise<Component>;
-  icon: Component;
-  redirectFrom?: string[];
-}
-
-export interface ToolCategory {
-  name: string;
-  icon: Component;
-  components: ITool[];
-}
--- a/src/tools/base64-converter/base64-converter.vue
+++ b/src/tools/base64-converter/base64-converter.vue
@@ -40,7 +40,7 @@ const fileInput = ref() as Ref<File>;
 const { base64: fileBase64 } = useBase64(fileInput);
 const { copy: copyFileBase64 } = useCopy({ source: fileBase64, text: 'Base64 string copied to the clipboard' });

-function onUpload({ file: { file } }: { file: UploadFileInfo }) {
+async function onUpload({ file: { file } }: { file: UploadFileInfo }) {
  if (file) {
    fileList.value = [];
    fileInput.value = file;
@@ -50,8 +50,7 @@ function onUpload({ file: { file } }: { file: UploadFileInfo }) {

 <style lang="less" scoped>
 .n-input,
-.n-upload,
-.n-card {
+.n-upload {
  margin-bottom: 15px;
 }

--- a/src/tools/base64-converter/index.ts
+++ b/src/tools/base64-converter/index.ts
@@ -1,12 +1,12 @@
 import { FileDigit } from '@vicons/tabler';
-import type { ITool } from './../Tool';
+import { defineTool } from '../tool';

-export const tool: ITool = {
+export const tool = defineTool({
  name: 'Base64 converter',
  path: '/base64-converter',
  description: "Convert string, files or images into a it's base64 representation.",
-  keywords: ['base64', 'converter', 'upload', 'image', 'file', 'convertion', 'web', 'data', 'format'],
+  keywords: ['base64', 'converter', 'upload', 'image', 'file', 'conversion', 'web', 'data', 'format'],
  component: () => import('./base64-converter.vue'),
  icon: FileDigit,
  redirectFrom: ['/file-to-base64', '/base64-string-converter'],
-};
+});
--- a/src/tools/bcrypt/bcrypt.vue
+++ b/src/tools/bcrypt/bcrypt.vue
@@ -22,7 +22,6 @@
    </n-space>
  </n-card>

-  <br />
  <n-card title="Compare string with hash">
    <n-form label-width="120">
      <n-form-item label="Your string: " label-placement="left">
--- a/src/tools/bcrypt/index.ts
+++ b/src/tools/bcrypt/index.ts
@@ -1,7 +1,7 @@
 import { LockSquare } from '@vicons/tabler';
-import type { ITool } from './../Tool';
+import { defineTool } from '../tool';

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

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

-export const tool: ITool = {
+export const tool = defineTool({
  name: 'Case converter',
  path: '/case-converter',
  description: 'Change the case of a string and chose between different formats',
@@ -22,4 +22,4 @@ export const tool: ITool = {
  ],
  component: () => import('./case-converter.vue'),
  icon: LetterCaseToggle,
-};
+});
--- a/src/tools/color-converter/index.ts
+++ b/src/tools/color-converter/index.ts
@@ -1,7 +1,7 @@
 import { Palette } from '@vicons/tabler';
-import type { ITool } from './../Tool';
+import { defineTool } from '../tool';

-export const tool: ITool = {
+export const tool = defineTool({
  name: 'Color converter',
  path: '/color-converter',
  description: 'Convert color between the different formats (hex, rgb, hsl and css name)',
@@ -9,4 +9,4 @@ export const tool: ITool = {
  component: () => import('./color-converter.vue'),
  icon: Palette,
  redirectFrom: ['/color-picker-converter'],
-};
+});
--- a/src/tools/crontab-generator/crontab-generator.vue
+++ b/src/tools/crontab-generator/crontab-generator.vue
@@ -28,7 +28,6 @@
      </n-form>
    </n-space>
  </n-card>
-  <br />
  <n-card>
    <pre>
 ┌──────────── [optional] seconds (0 - 59)
--- a/src/tools/crontab-generator/index.ts
+++ b/src/tools/crontab-generator/index.ts
@@ -1,7 +1,7 @@
 import { Alarm } from '@vicons/tabler';
-import type { ITool } from './../Tool';
+import { defineTool } from '../tool';

-export const tool: ITool = {
+export const tool = defineTool({
  name: 'Crontab generator',
  path: '/crontab-generator',
  description: 'Validate and generate crontab and get the human readable description of the cron schedule.',
@@ -22,4 +22,4 @@ export const tool: ITool = {
  ],
  component: () => import('./crontab-generator.vue'),
  icon: Alarm,
-};
+});
--- a/src/tools/date-time-converter/date-time-converter.vue
+++ b/src/tools/date-time-converter/date-time-converter.vue
@@ -83,46 +83,54 @@ function onDateInputChanged(value: string) {
  }
 }

-const formats = [
+type Format = {
+  name: string;
+  fromDate: (date: Date) => string;
+  toDate: (value: string) => Date;
+};
+
+const toDate: Format['toDate'] = (date) => new Date(date);
+
+const formats: Format[] = [
  {
    name: 'JS locale date string',
-    fromDate: (date: Date) => date.toString(),
-    toDate: (date: string) => new Date(date),
+    fromDate: (date) => date.toString(),
+    toDate,
  },
  {
    name: 'ISO 8601',
-    fromDate: (date: Date) => formatISO(date),
-    toDate: (date: string) => parseISO(date),
+    fromDate: formatISO,
+    toDate: parseISO,
  },
  {
    name: 'ISO 9075',
-    fromDate: (date: Date) => formatISO9075(date),
-    toDate: (date: string) => parseISO(date),
+    fromDate: formatISO9075,
+    toDate: parseISO,
  },
  {
    name: 'RFC 3339',
-    fromDate: (date: Date) => formatRFC3339(date),
-    toDate: (date: string) => new Date(date),
+    fromDate: formatRFC3339,
+    toDate,
  },
  {
    name: 'RFC 7231',
-    fromDate: (date: Date) => formatRFC7231(date),
-    toDate: (date: string) => new Date(date),
+    fromDate: formatRFC7231,
+    toDate,
  },
  {
    name: 'Timestamp',
-    fromDate: (date: Date) => String(getTime(date)),
-    toDate: (ms: string) => parseJSON(+ms),
+    fromDate: (date) => String(getTime(date)),
+    toDate: (ms) => parseJSON(+ms),
  },
  {
    name: 'Unix timestamp',
-    fromDate: (date: Date) => String(getUnixTime(date)),
-    toDate: (sec: string) => fromUnixTime(+sec),
+    fromDate: (date) => String(getUnixTime(date)),
+    toDate: (sec) => fromUnixTime(+sec),
  },
  {
    name: 'UTC format',
-    fromDate: (date: Date) => date.toUTCString(),
-    toDate: (date: string) => new Date(date),
+    fromDate: (date) => date.toUTCString(),
+    toDate,
  },
 ];
 </script>
--- a/src/tools/date-time-converter/index.ts
+++ b/src/tools/date-time-converter/index.ts
@@ -1,11 +1,11 @@
 import { Calendar } from '@vicons/tabler';
-import type { ITool } from '../Tool';
+import { defineTool } from '../tool';

-export const tool: ITool = {
+export const tool = defineTool({
  name: 'Date-time converter',
  path: '/date-converter',
  description: 'Convert date and time into the various different formats',
-  keywords: ['date', 'time', 'converter', 'iso', 'utc', 'timezone', 'year', 'mounth', 'day', 'minute', 'seconde'],
+  keywords: ['date', 'time', 'converter', 'iso', 'utc', 'timezone', 'year', 'month', 'day', 'minute', 'seconde'],
  component: () => import('./date-time-converter.vue'),
  icon: Calendar,
-};
+});
--- a/src/tools/device-information/device-information.vue
+++ b/src/tools/device-information/device-information.vue
@@ -1,5 +1,5 @@
 <template>
-  <n-card v-for="{ name, information } in sections" :key="name" :title="name" style="margin-bottom: 15px">
+  <n-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 } in information" :key="label" class="information">
        <n-card :bordered="false" embedded>
@@ -66,7 +66,7 @@ const sections = [
        value: computed(() => navigator.languages.join(', ')),
      },
      {
-        label: 'Plateform',
+        label: 'Platform',
        value: computed(() => navigator.platform),
      },
      {
--- a/src/tools/device-information/index.ts
+++ b/src/tools/device-information/index.ts
@@ -1,7 +1,7 @@
 import { DeviceDesktop } from '@vicons/tabler';
-import type { ITool } from './../Tool';
+import { defineTool } from '../tool';

-export const tool: ITool = {
+export const tool = defineTool({
  name: 'Device information',
  path: '/device-information',
  description: 'Get information about your current device (screen size, pixel-ratio, user agent, ...)',
@@ -20,4 +20,4 @@ export const tool: ITool = {
  ],
  component: () => import('./device-information.vue'),
  icon: DeviceDesktop,
-};
+});
--- a/src/tools/encryption/encryption.vue
+++ b/src/tools/encryption/encryption.vue
@@ -1,81 +1,78 @@
 <template>
-  <div>
-    <n-card title="Encrypt">
-      <n-space item-style="flex: 1 1 0">
-        <n-form-item label="Your text:" :show-feedback="false">
-          <n-input
-            v-model:value="cypherInput"
-            type="textarea"
-            placeholder="The string to cypher"
-            :autosize="{ minRows: 4 }"
-          />
-        </n-form-item>
-        <n-space vertical>
-          <n-form-item label="Your secret key:" :show-feedback="false">
-            <n-input v-model:value="cypherSecret" />
-          </n-form-item>
-          <n-form-item label="Encryption algorithm:" :show-feedback="false">
-            <n-select
-              v-model:value="cypherAlgo"
-              :options="Object.keys(algos).map((label) => ({ label, value: label }))"
-            />
-          </n-form-item>
-        </n-space>
-      </n-space>
-      <br />
-      <n-form-item label="Yout text encrypted:" :show-feedback="false">
+  <n-card title="Encrypt">
+    <n-space item-style="flex: 1 1 0">
+      <n-form-item label="Your text:" :show-feedback="false">
        <n-input
-          :value="cypherOutput"
+          v-model:value="cypherInput"
          type="textarea"
-          placeholder="Your string hash"
-          :autosize="{ minRows: 2 }"
-          readonly
-          autocomplete="off"
-          autocorrect="off"
-          autocapitalize="off"
-          spellcheck="false"
+          placeholder="The string to cypher"
+          :autosize="{ minRows: 4 }"
        />
      </n-form-item>
-    </n-card>
+      <n-space vertical>
+        <n-form-item label="Your secret key:" :show-feedback="false">
+          <n-input v-model:value="cypherSecret" />
+        </n-form-item>
+        <n-form-item label="Encryption algorithm:" :show-feedback="false">
+          <n-select
+            v-model:value="cypherAlgo"
+            :options="Object.keys(algos).map((label) => ({ label, value: label }))"
+          />
+        </n-form-item>
+      </n-space>
+    </n-space>
    <br />
-    <n-card title="Decrypt">
-      <n-space item-style="flex: 1 1 0">
-        <n-form-item label="Your encrypted text:" :show-feedback="false">
-          <n-input
-            v-model:value="decryptInput"
-            type="textarea"
-            placeholder="The string to cypher"
-            :autosize="{ minRows: 4 }"
-          />
-        </n-form-item>
-        <n-space vertical>
-          <n-form-item label="Your secret key:" :show-feedback="false">
-            <n-input v-model:value="decryptSecret" />
-          </n-form-item>
-          <n-form-item label="Encryption algorithm:" :show-feedback="false">
-            <n-select
-              v-model:value="decryptAlgo"
-              :options="Object.keys(algos).map((label) => ({ label, value: label }))"
-            />
-          </n-form-item>
-        </n-space>
-      </n-space>
-      <br />
-      <n-form-item label="Yout decrypted text:" :show-feedback="false">
+    <n-form-item label="Your text encrypted:" :show-feedback="false">
+      <n-input
+        :value="cypherOutput"
+        type="textarea"
+        placeholder="Your string hash"
+        :autosize="{ minRows: 2 }"
+        readonly
+        autocomplete="off"
+        autocorrect="off"
+        autocapitalize="off"
+        spellcheck="false"
+      />
+    </n-form-item>
+  </n-card>
+  <n-card title="Decrypt">
+    <n-space item-style="flex: 1 1 0">
+      <n-form-item label="Your encrypted text:" :show-feedback="false">
        <n-input
-          :value="decryptOutput"
+          v-model:value="decryptInput"
          type="textarea"
-          placeholder="Your string hash"
-          :autosize="{ minRows: 2 }"
-          readonly
-          autocomplete="off"
-          autocorrect="off"
-          autocapitalize="off"
-          spellcheck="false"
+          placeholder="The string to cypher"
+          :autosize="{ minRows: 4 }"
        />
      </n-form-item>
-    </n-card>
-  </div>
+      <n-space vertical>
+        <n-form-item label="Your secret key:" :show-feedback="false">
+          <n-input v-model:value="decryptSecret" />
+        </n-form-item>
+        <n-form-item label="Encryption algorithm:" :show-feedback="false">
+          <n-select
+            v-model:value="decryptAlgo"
+            :options="Object.keys(algos).map((label) => ({ label, value: label }))"
+          />
+        </n-form-item>
+      </n-space>
+    </n-space>
+    <br />
+    <n-form-item label="Your decrypted text:" :show-feedback="false">
+      <n-input
+        :value="decryptOutput"
+        type="textarea"
+        placeholder="Your string hash"
+        :autosize="{ minRows: 2 }"
+        readonly
+        autocomplete="off"
+        autocorrect="off"
+        autocapitalize="off"
+        spellcheck="false"
+      />
+    </n-form-item>
+  </n-card>
 </template>

 <script setup lang="ts">
--- a/src/tools/encryption/index.ts
+++ b/src/tools/encryption/index.ts
@@ -1,12 +1,12 @@
 import { Lock } from '@vicons/tabler';
-import type { ITool } from '../Tool';
+import { defineTool } from '../tool';

-export const tool: ITool = {
+export const tool = defineTool({
  name: 'Encrypt / decrypt text',
  path: '/encryption',
  description: 'Encrypt and decrypt text clear text using crypto algorithm like AES, TripleDES, Rabbit or RC4.',
-  keywords: ['cypher', 'uncypher', 'text', 'AES', 'TripleDES', 'Rabbit', 'RC4'],
+  keywords: ['cypher', 'encipher', 'text', 'AES', 'TripleDES', 'Rabbit', 'RC4'],
  component: () => import('./encryption.vue'),
  icon: Lock,
  redirectFrom: ['/cypher'],
-};
+});
--- a/src/tools/git-memo/index.ts
+++ b/src/tools/git-memo/index.ts
@@ -1,12 +1,12 @@
 import { BrandGit } from '@vicons/tabler';
-import type { ITool } from '../Tool';
+import { defineTool } from '../tool';

-export const tool: ITool = {
+export const tool = defineTool({
  name: 'Git cheatsheet',
  path: '/git-memo',
  description:
-    'Git is a decentralized version management sofware. With this cheatsheet you will have a quick acces to the most common git commands.',
-  keywords: ['git', 'push', 'force', 'pull', 'commit', 'ammend', 'rebase', 'merge', 'reset', 'soft', 'hard', 'lease'],
+    'Git is a decentralized version management software. With this cheatsheet you will have a quick access to the most common git commands.',
+  keywords: ['git', 'push', 'force', 'pull', 'commit', 'amend', 'rebase', 'merge', 'reset', 'soft', 'hard', 'lease'],
  component: () => import('./git-memo.vue'),
  icon: BrandGit,
-};
+});
--- a/src/tools/hash-text/hash-text.vue
+++ b/src/tools/hash-text/hash-text.vue
@@ -2,35 +2,22 @@
  <div>
    <n-card>
      <n-input v-model:value="clearText" type="textarea" placeholder="Your string..." :autosize="{ minRows: 3 }" />
-      <br />
-      <br />
-      <n-select v-model:value="algo" :options="Object.keys(algos).map((label) => ({ label, value: label }))" />

-      <br />
-      <n-input
-        style="text-align: center"
-        :value="hashedText"
-        type="textarea"
-        placeholder="Your string hash"
-        :autosize="{ minRows: 1 }"
-        readonly
-        autocomplete="off"
-        autocorrect="off"
-        autocapitalize="off"
-        spellcheck="false"
-      />
-      <br />
-      <br />
-      <n-space justify="center">
-        <n-button secondary autofocus @click="copy"> Copy </n-button>
-      </n-space>
+      <n-divider />
+
+      <div v-for="algo in algoNames" :key="algo" style="margin: 5px 0">
+        <n-input-group>
+          <n-input-group-label style="flex: 0 0 120px"> {{ algo }} </n-input-group-label>
+          <input-copyable :value="hashText(algo, clearText)" readonly />
+        </n-input-group>
+      </div>
    </n-card>
  </div>
 </template>

 <script setup lang="ts">
-import { useCopy } from '@/composable/copy';
-import { ref, computed } from 'vue';
+import InputCopyable from '../../components/InputCopyable.vue';
+import { ref } from 'vue';
 import { MD5, SHA1, SHA256, SHA224, SHA512, SHA384, SHA3, RIPEMD160 } from 'crypto-js';

 const algos = {
@@ -44,11 +31,11 @@ const algos = {
  RIPEMD160,
 } as const;

+type AlgoNames = keyof typeof algos;
+const algoNames = Object.keys(algos) as AlgoNames[];
+
 const clearText = ref(
  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lacus metus blandit dolor lacus natoque ad fusce aliquam velit.',
 );
-const algo = ref<keyof typeof algos>('SHA256');
-const hashedText = computed(() => algos[algo.value](clearText.value).toString());
-
-const { copy } = useCopy({ source: hashedText, text: 'Hash copied to the clipboard' });
+const hashText = (algo: AlgoNames, value: string) => algos[algo](value).toString();
 </script>
--- a/src/tools/hash-text/index.ts
+++ b/src/tools/hash-text/index.ts
@@ -1,7 +1,7 @@
 import { EyeOff } from '@vicons/tabler';
-import type { ITool } from '../Tool';
+import { defineTool } from '../tool';

-export const tool: ITool = {
+export const tool = defineTool({
  name: 'Hash text',
  path: '/hash-text',
  description:
@@ -24,4 +24,4 @@ export const tool: ITool = {
  component: () => import('./hash-text.vue'),
  icon: EyeOff,
  redirectFrom: ['/hash'],
-};
+});
--- a/src/tools/html-entities/html-entities.vue
+++ b/src/tools/html-entities/html-entities.vue
@@ -23,7 +23,6 @@
      <n-button secondary @click="copyEscaped"> Copy </n-button>
    </n-space>
  </n-card>
-  <br />
  <n-card title="Unescape html entities">
    <n-form-item label="Your escaped string :">
      <n-input
--- a/src/tools/html-entities/index.ts
+++ b/src/tools/html-entities/index.ts
@@ -1,11 +1,11 @@
 import { Code } from '@vicons/tabler';
-import type { ITool } from './../Tool';
+import { defineTool } from '../tool';

-export const tool: ITool = {
+export const tool = defineTool({
  name: 'Escape html entities',
  path: '/html-entities',
  description: 'Escape or unescape html entities (replace <,>, &, " and \' to their html version)',
  keywords: ['html', 'entities', 'escape', 'unescape', 'special', 'characters', 'tags'],
  component: () => import('./html-entities.vue'),
  icon: Code,
-};
+});
--- a/src/tools/index.ts
+++ b/src/tools/index.ts
@@ -1,6 +1,8 @@
 import { LockOpen } from '@vicons/tabler';
-import type { ToolCategory } from './Tool';
+import type { ToolCategory } from './tool';

+import { tool as mathEvaluator } from './math-evaluator';
+import { tool as jsonViewer } from './json-viewer';
 import { tool as htmlEntities } from './html-entities';
 import { tool as urlParser } from './url-parser';
 import { tool as deviceInformation } from './device-information';
@@ -50,7 +52,12 @@ export const toolsByCategory: ToolCategory[] = [
  {
    name: 'Development',
    icon: LockOpen,
-    components: [gitMemo, randomPortGenerator, crontabGenerator],
+    components: [gitMemo, randomPortGenerator, crontabGenerator, jsonViewer],
+  },
+  {
+    name: 'Math',
+    icon: LockOpen,
+    components: [mathEvaluator],
  },
  {
    name: 'Text',
--- a/src/tools/integer-base-converter/index.ts
+++ b/src/tools/integer-base-converter/index.ts
@@ -1,11 +1,11 @@
 import { ArrowsLeftRight } from '@vicons/tabler';
-import type { ITool } from '../Tool';
+import { defineTool } from '../tool';

-export const tool: ITool = {
+export const tool = defineTool({
  name: 'Integer base converter',
  path: '/base-converter',
-  description: 'Convert numver between different bases (decimal, hexadecimal, binary, octale, base64, ...)',
-  keywords: ['integer', 'number', 'base', 'convertion', 'decimal', 'hexadecimal', 'binary', 'octale', 'base64'],
+  description: 'Convert number between different bases (decimal, hexadecimal, binary, octal, base64, ...)',
+  keywords: ['integer', 'number', 'base', 'conversion', 'decimal', 'hexadecimal', 'binary', 'octal', 'base64'],
  component: () => import('./integer-base-converter.vue'),
  icon: ArrowsLeftRight,
-};
+});
--- a/src/tools/integer-base-converter/integer-base-converter.vue
+++ b/src/tools/integer-base-converter/integer-base-converter.vue
@@ -1,27 +1,37 @@
 <template>
  <div>
    <n-card>
-      <n-input-group>
-        <n-input-group-label style="width: 200px"> Input number: </n-input-group-label>
-        <n-input-number v-model:value="inputNumber" min="0" />
+      <div v-if="styleStore.isSmallScreen">
+        <n-input-group>
+          <n-input-group-label style="flex: 0 0 120px"> Input number: </n-input-group-label>
+          <n-input-number v-model:value="inputNumber" min="0" style="width: 100%" />
+        </n-input-group>
+        <n-input-group>
+          <n-input-group-label style="flex: 0 0 120px"> Input base: </n-input-group-label>
+          <n-input-number v-model:value="inputBase" max="64" min="2" style="width: 100%" />
+        </n-input-group>
+      </div>

-        <n-input-group-label style="width: 200px"> Input base: </n-input-group-label>
-        <n-input-number v-model:value="inputBase" max="64" min="2" style="width: 100px" />
+      <n-input-group v-else>
+        <n-input-group-label style="flex: 0 0 120px"> Input number: </n-input-group-label>
+        <n-input-number v-model:value="inputNumber" min="0" />
+        <n-input-group-label style="flex: 0 0 120px"> Input base: </n-input-group-label>
+        <n-input-number v-model:value="inputBase" max="64" min="2" />
      </n-input-group>
      <n-divider />

      <n-input-group>
-        <n-input-group-label style="width: 200px"> Binary (2): </n-input-group-label>
+        <n-input-group-label style="flex: 0 0 170px"> Binary (2): </n-input-group-label>
        <input-copyable :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 2 })" readonly />
      </n-input-group>

      <n-input-group>
-        <n-input-group-label style="width: 200px"> Octale (8): </n-input-group-label>
+        <n-input-group-label style="flex: 0 0 170px"> Octal (8): </n-input-group-label>
        <input-copyable :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 8 })" readonly />
      </n-input-group>

      <n-input-group>
-        <n-input-group-label style="width: 200px"> Decimal (10): </n-input-group-label>
+        <n-input-group-label style="flex: 0 0 170px"> Decimal (10): </n-input-group-label>
        <input-copyable
          :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 10 })"
          readonly
@@ -29,7 +39,7 @@
      </n-input-group>

      <n-input-group>
-        <n-input-group-label style="width: 200px"> Hexadecimal (16): </n-input-group-label>
+        <n-input-group-label style="flex: 0 0 170px"> Hexadecimal (16): </n-input-group-label>
        <input-copyable
          :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 16 })"
          readonly
@@ -37,15 +47,15 @@
      </n-input-group>

      <n-input-group>
-        <n-input-group-label style="width: 200px"> Base64 (64): </n-input-group-label>
+        <n-input-group-label style="flex: 0 0 170px"> Base64 (64): </n-input-group-label>
        <input-copyable
          :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 64 })"
          readonly
        />
      </n-input-group>
      <n-input-group>
-        <n-input-group-label style="width: 90px"> Custom: </n-input-group-label>
-        <n-input-number v-model:value="outputBase" style="width: 110px" max="64" min="2" />
+        <n-input-group-label style="flex: 0 0 85px"> Custom: </n-input-group-label>
+        <n-input-number v-model:value="outputBase" style="flex: 0 0 86px" max="64" min="2" />
        <input-copyable
          :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: outputBase })"
          readonly
@@ -59,6 +69,9 @@
 import { ref } from 'vue';
 import { convertBase } from './integer-base-converter.model';
 import InputCopyable from '../../components/InputCopyable.vue';
+import { useStyleStore } from '@/stores/style.store';
+
+const styleStore = useStyleStore();

 const inputNumber = ref(42);
 const inputBase = ref(10);
--- a/src/tools/json-viewer/index.ts
+++ b/src/tools/json-viewer/index.ts
@@ -0,0 +1,11 @@
+import { Braces } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'JSON viewer',
+  path: '/json-viewer',
+  description: 'Prettify JSON string to a human friendly readable format.',
+  keywords: ['json', 'viewer', 'prettify', 'format'],
+  component: () => import('./json-viewer.vue'),
+  icon: Braces,
+});
--- a/src/tools/json-viewer/json-viewer.vue
+++ b/src/tools/json-viewer/json-viewer.vue
@@ -0,0 +1,66 @@
+<template>
+  <n-card>
+    <n-form-item
+      label="Your raw json:"
+      :feedback="rawJsonValidation.message"
+      :validation-status="rawJsonValidation.status"
+    >
+      <n-input
+        v-model:value="rawJson"
+        class="json-input"
+        type="textarea"
+        placeholder="Paste your raw json here..."
+        autocomplete="off"
+        autocorrect="off"
+        autocapitalize="off"
+        spellcheck="false"
+      />
+    </n-form-item>
+
+    <n-space justify="center">
+      <n-button secondary @click="rawJson = ''">Clear</n-button>
+    </n-space>
+  </n-card>
+
+  <n-card v-if="cleanJson.length > 0">
+    <n-scrollbar :x-scrollable="true">
+      <n-config-provider :hljs="hljs">
+        <n-code :code="cleanJson" language="json" />
+      </n-config-provider>
+    </n-scrollbar>
+  </n-card>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import hljs from 'highlight.js/lib/core';
+import json from 'highlight.js/lib/languages/json';
+import { useValidation } from '@/composable/validation';
+
+hljs.registerLanguage('json', json);
+
+const rawJson = ref('');
+const cleanJson = computed(() => {
+  try {
+    return JSON.stringify(JSON.parse(rawJson.value), null, 3);
+  } catch (_) {
+    return '';
+  }
+});
+
+const rawJsonValidation = useValidation({
+  source: rawJson,
+  rules: [
+    {
+      validator: (v) => v === '' || JSON.parse(v),
+      message: 'Invalid json string',
+    },
+  ],
+});
+</script>
+
+<style lang="less" scoped>
+.json-input ::v-deep(.n-input-wrapper) {
+  resize: both !important;
+}
+</style>
--- a/src/tools/lorem-ipsum-generator/index.ts
+++ b/src/tools/lorem-ipsum-generator/index.ts
@@ -1,7 +1,7 @@
 import { AlignJustified } from '@vicons/tabler';
-import type { ITool } from '../Tool';
+import { defineTool } from '../tool';

-export const tool: ITool = {
+export const tool = defineTool({
  name: 'Lorem ipsum generator',
  path: '/lorem-ipsum-generator',
  description:
@@ -9,4 +9,4 @@ export const tool: ITool = {
  keywords: ['lorem', 'ipsum', 'dolor', 'sit', 'amet', 'placeholder', 'text', 'filler', 'random', 'generator'],
  component: () => import('./lorem-ipsum-generator.vue'),
  icon: AlignJustified,
-};
+});
--- a/src/tools/math-evaluator/index.ts
+++ b/src/tools/math-evaluator/index.ts
@@ -0,0 +1,39 @@
+import { Math } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Math evaluator',
+  path: '/math-evaluator',
+  description: `Evaluate math expression, like a calculator on steroid (you can use function like sqrt, cos, sin, abs, ...)`,
+  keywords: [
+    'math',
+    'evaluator',
+    'acos',
+    'acosh',
+    'acot',
+    'acoth',
+    'acsc',
+    'acsch',
+    'asec',
+    'asech',
+    'asin',
+    'asinh',
+    'atan',
+    'atan2',
+    'atanh',
+    'cos',
+    'cosh',
+    'cot',
+    'coth',
+    'csc',
+    'csch',
+    'sec',
+    'sech',
+    'sin',
+    'sinh',
+    'tan',
+    'tanh',
+  ],
+  component: () => import('./math-evaluator.vue'),
+  icon: Math,
+});
--- a/src/tools/math-evaluator/math-evaluator.vue
+++ b/src/tools/math-evaluator/math-evaluator.vue
@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <n-input
+      v-model:value="expression"
+      rows="1"
+      type="textarea"
+      placeholder="Your math expression (ex: 2*sqrt(6) )..."
+      size="large"
+      autocomplete="off"
+      autocorrect="off"
+      autocapitalize="off"
+      spellcheck="false"
+    />
+    <br />
+    <br />
+
+    <n-card v-if="result !== ''" title="Result ">
+      {{ result }}
+    </n-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { evaluate } from 'mathjs';
+import { computed, ref } from 'vue';
+
+const expression = ref('');
+
+const result = computed(() => {
+  try {
+    return evaluate(expression.value) ?? '';
+  } catch (_) {
+    return '';
+  }
+});
+</script>
+
+<style lang="less" scoped></style>
--- a/src/tools/qr-code-generator/index.ts
+++ b/src/tools/qr-code-generator/index.ts
@@ -1,7 +1,7 @@
 import { Qrcode } from '@vicons/tabler';
-import type { ITool } from './../Tool';
+import { defineTool } from '../tool';

-export const tool: ITool = {
+export const tool = defineTool({
  name: 'QR Code generator',
  path: '/qrcode-generator',
  description:
@@ -9,4 +9,4 @@ export const tool: ITool = {
  keywords: ['qr', 'code', 'generator', 'square', 'color', 'link', 'low', 'medium', 'quartile', 'high', 'transparent'],
  component: () => import('./qr-code-generator.vue'),
  icon: Qrcode,
-};
+});
--- a/src/tools/random-port-generator/index.ts
+++ b/src/tools/random-port-generator/index.ts
@@ -1,11 +1,11 @@
 import { Server } from '@vicons/tabler';
-import type { ITool } from '../Tool';
+import { defineTool } from '../tool';

-export const tool: ITool = {
+export const tool = defineTool({
  name: 'Random port generator',
  path: '/random-port-generator',
  description: 'Generate random port numbers outside of the range of "known" ports (0-1023).',
-  keywords: ['system', 'port', 'lan', 'generator', 'random', 'developement', 'computer'],
+  keywords: ['system', 'port', 'lan', 'generator', 'random', 'development', 'computer'],
  component: () => import('./random-port-generator.vue'),
  icon: Server,
-};
+});
--- a/src/tools/roman-numeral-converter/index.ts
+++ b/src/tools/roman-numeral-converter/index.ts
@@ -1,11 +1,11 @@
 import { LetterX } from '@vicons/tabler';
-import type { ITool } from '../Tool';
+import { defineTool } from '../tool';

-export const tool: ITool = {
+export const tool = defineTool({
  name: 'Roman numeral converter',
  path: '/roman-numeral-converter',
  description: 'Convert Roman numerals to numbers and convert numbers to Roman numerals.',
  keywords: ['roman', 'arabic', 'converter', 'X', 'I', 'V', 'L', 'C', 'D', 'M'],
  component: () => import('./roman-numeral-converter.vue'),
  icon: LetterX,
-};
+});
--- a/src/tools/text-statistics/index.ts
+++ b/src/tools/text-statistics/index.ts
@@ -1,7 +1,7 @@
 import { FileText } from '@vicons/tabler';
-import type { ITool } from './../Tool';
+import { defineTool } from '../tool';

-export const tool: ITool = {
+export const tool = defineTool({
  name: 'Text statistics',
  path: '/text-statistics',
  description: "Get information about a text, the amount of characters, the amount of words, it's size, ...",
@@ -9,4 +9,4 @@ export const tool: ITool = {
  component: () => import('./text-statistics.vue'),
  icon: FileText,
  redirectFrom: ['/text-stats'],
-};
+});
--- a/src/tools/token-generator/index.ts
+++ b/src/tools/token-generator/index.ts
@@ -1,7 +1,7 @@
 import { ArrowsShuffle } from '@vicons/tabler';
-import type { ITool } from './../Tool';
+import { defineTool } from '../tool';

-export const tool: ITool = {
+export const tool = defineTool({
  name: 'Token generator',
  path: '/token-generator',
  description:
@@ -9,4 +9,4 @@ export const tool: ITool = {
  keywords: ['token', 'random', 'string', 'alphanumeric', 'symbols', 'number', 'letters', 'lowercase', 'uppercase'],
  component: () => import('./token-generator.tool.vue'),
  icon: ArrowsShuffle,
-};
+});
--- a/src/tools/tool.ts
+++ b/src/tools/tool.ts
@@ -0,0 +1,33 @@
+import { config } from '@/config';
+import type { Component } from 'vue';
+
+export interface ITool {
+  name: string;
+  path: string;
+  description: string;
+  keywords: string[];
+  component: () => Promise<Component>;
+  icon: Component;
+  redirectFrom?: string[];
+  isNew: boolean;
+}
+
+export interface ToolCategory {
+  name: string;
+  icon: Component;
+  components: ITool[];
+}
+
+type WithOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+
+export function defineTool(
+  tool: WithOptional<ITool, 'isNew'>,
+  { newTools }: { newTools: string[] } = { newTools: config.tools.newTools },
+) {
+  const isNew = newTools.includes(tool.name);
+
+  return {
+    isNew,
+    ...tool,
+  };
+}
--- a/src/tools/url-encoder/index.ts
+++ b/src/tools/url-encoder/index.ts
@@ -1,11 +1,11 @@
 import { Link } from '@vicons/tabler';
-import type { ITool } from '../Tool';
+import { defineTool } from '../tool';

-export const tool: ITool = {
+export const tool = defineTool({
  name: 'Encode/decode url formatted strings',
  path: '/url-encoder',
  description: 'Encode to url-encoded format (also known as "percent-encoded") or decode from it.',
  keywords: ['url', 'encode', 'decode', 'percent', '%20', 'format'],
  component: () => import('./url-encoder.vue'),
  icon: Link,
-};
+});
--- a/src/tools/url-encoder/url-encoder.vue
+++ b/src/tools/url-encoder/url-encoder.vue
@@ -1,63 +1,60 @@
 <template>
-  <div>
-    <n-card title="Encode">
-      <n-form-item
-        label="Your string :"
-        :feedback="encodedValidation.message"
-        :validation-status="encodedValidation.status"
-      >
-        <n-input
-          v-model:value="encodeInput"
-          type="textarea"
-          placeholder="The string to encode"
-          :autosize="{ minRows: 2 }"
-        />
-      </n-form-item>
+  <n-card title="Encode">
+    <n-form-item
+      label="Your string :"
+      :feedback="encodedValidation.message"
+      :validation-status="encodedValidation.status"
+    >
+      <n-input
+        v-model:value="encodeInput"
+        type="textarea"
+        placeholder="The string to encode"
+        :autosize="{ minRows: 2 }"
+      />
+    </n-form-item>

-      <n-form-item label="Your string encoded :">
-        <n-input
-          :value="encodeOutput"
-          type="textarea"
-          readonly
-          placeholder="Your string encoded"
-          :autosize="{ minRows: 2 }"
-        />
-      </n-form-item>
+    <n-form-item label="Your string encoded :">
+      <n-input
+        :value="encodeOutput"
+        type="textarea"
+        readonly
+        placeholder="Your string encoded"
+        :autosize="{ minRows: 2 }"
+      />
+    </n-form-item>

-      <n-space justify="center">
-        <n-button secondary @click="copyEncoded"> Copy </n-button>
-      </n-space>
-    </n-card>
-    <br />
-    <n-card title="Decode">
-      <n-form-item
-        label="Your encoded string :"
-        :feedback="decodeValidation.message"
-        :validation-status="decodeValidation.status"
-      >
-        <n-input
-          v-model:value="decodeInput"
-          type="textarea"
-          placeholder="The string to decode"
-          :autosize="{ minRows: 2 }"
-        />
-      </n-form-item>
+    <n-space justify="center">
+      <n-button secondary @click="copyEncoded"> Copy </n-button>
+    </n-space>
+  </n-card>
+  <n-card title="Decode">
+    <n-form-item
+      label="Your encoded string :"
+      :feedback="decodeValidation.message"
+      :validation-status="decodeValidation.status"
+    >
+      <n-input
+        v-model:value="decodeInput"
+        type="textarea"
+        placeholder="The string to decode"
+        :autosize="{ minRows: 2 }"
+      />
+    </n-form-item>

-      <n-form-item label="Your string decoded :">
-        <n-input
-          :value="decodeOutput"
-          type="textarea"
-          readonly
-          placeholder="Your string decoded"
-          :autosize="{ minRows: 2 }"
-        />
-      </n-form-item>
+    <n-form-item label="Your string decoded :">
+      <n-input
+        :value="decodeOutput"
+        type="textarea"
+        readonly
+        placeholder="Your string decoded"
+        :autosize="{ minRows: 2 }"
+      />
+    </n-form-item>

-      <n-space justify="center">
-        <n-button secondary @click="copyDecoded"> Copy </n-button>
-      </n-space>
-    </n-card>
-  </div>
+    <n-space justify="center">
+      <n-button secondary @click="copyDecoded"> Copy </n-button>
+    </n-space>
+  </n-card>
 </template>

 <script setup lang="ts">
--- a/src/tools/url-parser/index.ts
+++ b/src/tools/url-parser/index.ts
@@ -1,12 +1,12 @@
 import { Unlink } from '@vicons/tabler';
-import type { ITool } from './../Tool';
+import { defineTool } from '../tool';

-export const tool: ITool = {
+export const tool = defineTool({
  name: 'Url parser',
  path: '/url-parser',
  description:
-    'Parse an url string to get all the differents parts (protocol, origin, params, port, username-password, ...)',
+    'Parse an url string to get all the different parts (protocol, origin, params, port, username-password, ...)',
  keywords: ['url', 'parser', 'protocol', 'origin', 'params', 'port', 'username', 'password', 'href'],
  component: () => import('./url-parser.vue'),
  icon: Unlink,
-};
+});
--- a/src/tools/uuid-generator/index.ts
+++ b/src/tools/uuid-generator/index.ts
@@ -1,7 +1,7 @@
 import { Fingerprint } from '@vicons/tabler';
-import type { ITool } from '../Tool';
+import { defineTool } from '../tool';

-export const tool: ITool = {
+export const tool = defineTool({
  name: 'UUIDs v4 generator',
  path: '/uuid-generator',
  description:
@@ -9,4 +9,4 @@ export const tool: ITool = {
  keywords: ['uuid', 'v4', 'random', 'id', 'alphanumeric', 'identity', 'token', 'string', 'identifier', 'unique'],
  component: () => import('./uuid-generator.vue'),
  icon: Fingerprint,
-};
+});
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -61,6 +61,5 @@ export default defineConfig({
  },
  define: {
    'import.meta.env.PACKAGE_VERSION': JSON.stringify(process.env.npm_package_version),
-    'import.meta.env.GIT_SHORT_SHA': JSON.stringify((process?.env?.VITE_VERCEL_GIT_COMMIT_SHA ?? '').slice(0, 7)),
  },
 });
Author	SHA1	Message	Date
Corentin Thomasset	7a01af1c14	chore(release): 2.5.1	2022-06-02 01:00:49 +02:00
Corentin Thomasset	c2e1d59cb9	fix(title): trully reactive tool title	2022-06-02 00:59:42 +02:00
Corentin Thomasset	f48cd058cf	fix: menu label key value was undefined	2022-06-02 00:57:17 +02:00
Corentin Thomasset	5ab4dd3d4a	fix: tool sorting inconsistencies in home page	2022-06-02 00:44:23 +02:00
Corentin Thomasset	f05c8e1dc6	fix(lint): missing dangling comma	2022-06-02 00:30:43 +02:00
Corentin Thomasset	ba3b84c668	chore(release): 2.5.0	2022-06-02 00:26:10 +02:00
Corentin Thomasset	433ba2a3e5	feat(new-tool): math evaluator	2022-06-02 00:25:10 +02:00
Corentin Thomasset	8fb0e6af9c	refactor: removed unused import	2022-06-02 00:11:49 +02:00
Corentin Thomasset	11720e6cde	feat(tools): new badge for recently created tools	2022-06-02 00:11:49 +02:00
Corentin Thomasset	ac89490794	refactor: renammed Tool.ts to tool.ts	2022-06-02 00:11:49 +02:00
Corentin Thomasset	2f61c745f5	fix(config): updated env values loading	2022-06-01 09:08:46 +02:00
Corentin Thomasset	a9a6526e75	chore(deps): updated vitest version	2022-06-01 09:07:28 +02:00
Corentin Thomasset	af0b02d3a8	chore(release): 2.4.2	2022-06-01 08:50:10 +02:00
Corentin Thomasset	a46d125c19	refactor: set coerent head title for home page	2022-05-30 20:35:22 +02:00
Corentin Thomasset	6becdbb423	refactor(config): added config management with figue	2022-05-24 00:07:54 +02:00
Corentin Thomasset	5ce1262fb4	refactor(imports): removed useless defineProps import	2022-05-24 00:07:24 +02:00
Corentin Thomasset	d591a73ce7	chore(release): 2.4.1	2022-05-15 11:34:19 +02:00
Corentin Thomasset	a88e4a9289	fix(seo): wrong url in share metas	2022-05-15 11:31:17 +02:00
Corentin Thomasset	d4ea393c1d	refactor(seo): changed title string	2022-05-15 11:29:36 +02:00
Corentin Thomasset	048bc4ae94	refactor(json-viewer): add clear button	2022-05-14 16:29:50 +02:00
Corentin Thomasset	3aefe83a31	chore(release): 2.4.0	2022-05-14 12:48:43 +02:00
Corentin Thomasset	c3b6132c26	refactor(seo): changed title string	2022-05-14 12:45:33 +02:00
Corentin Thomasset	69f564e6fe	chore: added pull request template	2022-05-11 17:37:39 +02:00
Evo Stamatov	e9cc499ed8	feat(hash-text): compute all hashes at the same time (#242 ) * compute all hashes at the same time instead of using a select * add prettier config * Revert "add prettier config" This reverts commit `fd374ff6fd`. Prettier config is in `.eslintrc.cjs`. Should run the lint script or should use ESLint's VS Code extension. * fix: address requested changes - rename hashedText to hashText since it's a function and no longer a variable - rename to list to algoNames - rename to type to AlgoName removed unused import * revert back to allow empty value to be hashed; lint	2022-05-11 16:29:55 +02:00
Corentin Thomasset	383d975695	refactor(base-layout): renammed one letter variable	2022-05-11 15:09:48 +02:00
Corentin Thomasset	347144bfe8	chore(deps): npm audit fix	2022-05-11 14:39:51 +02:00
Corentin Thomasset	4c4da16970	docs: added producthunt banners	2022-05-11 14:35:45 +02:00
Corentin Thomasset	9450537bae	chore: added eslint in recommended extensions	2022-05-11 14:14:29 +02:00
Evo Stamatov	1d7032d026	fix: update recommended extension ids (#244 )	2022-05-11 14:08:39 +02:00
Evo Stamatov	d2c767f092	refactor(date-converter): mutualised and dry-ed code	2022-05-11 14:06:39 +02:00
Corentin Thomasset	0cc7af6b1d	chore(ci): run ci on PR	2022-05-11 10:12:21 +02:00
Corentin Thomasset	34bc6a57a7	feat(seo): added cannonical meta	2022-05-10 09:12:11 +02:00
Corentin Thomasset	d356b1488f	feat(new-tool): json viewer	2022-05-09 17:41:42 +02:00
Corentin Thomasset	a60f64f744	feat: catch throw on validation	2022-05-09 17:40:29 +02:00
Corentin Thomasset	b89db3c8d0	refactor: updated description	2022-05-09 17:19:12 +02:00
Corentin Thomasset	3cfc5f8bc2	fix(lint): missing new lines	2022-05-09 15:25:48 +02:00
Corentin Thomasset	9da56da096	chore(release): 2.3.2	2022-05-09 14:45:47 +02:00
Corentin Thomasset	9755e51fe2	fix(typo): misspelings	2022-05-09 14:38:54 +02:00
Corentin Thomasset	0b0cbd55c3	fix(base-converter): responsive input	2022-04-24 23:22:52 +02:00
Corentin Thomasset	e21230bbd9	refactor(responsive): row layout for multicards on big screens	2022-04-24 23:09:12 +02:00
Corentin Thomasset	84cf1bb964	fix(base64-converter): async onUpload callback	2022-04-24 22:33:40 +02:00
Corentin Thomasset	b64839cb73	chore(release): 2.3.1	2022-04-24 19:43:01 +02:00
Corentin Thomasset	608ec3a81d	refactor: changed twitter account handler	2022-04-24 19:26:28 +02:00