feat(new-tool): ed25519 key pair generator

refactor(otp-generator): coerce lowercase secret characters to uppercase
feat(new-tool): html wysiwyg editor
2025-11-04 05:53:25 +00:00 · 2023-03-27 00:01:46 +02:00 · 2023-03-26 22:43:56 +02:00 · 2023-03-26 20:21:00 +02:00 · 2023-03-26 16:15:37 +02:00 · 2023-03-24 18:35:37 +01:00
76 changed files with 3907 additions and 1279 deletions
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -32,5 +32,6 @@ module.exports = {
        tsx: 'never',
      },
    ],
+    'import/no-unresolved': ['error', { ignore: ['^virtual:'] }],
  },
 };
--- a/.github/workflows/docker-release.yml
+++ b/.github/workflows/docker-release.yml
@@ -0,0 +1,60 @@
+name: docker-release
+
+on:
+  push:
+    branches:
+      - 'main'
+
+jobs:
+  ci:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+      - run: corepack enable
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm i
+
+      - name: Run linters
+        run: pnpm lint
+
+      - name: Run unit test
+        run: pnpm test
+
+      - name: Build the app
+        run: pnpm build
+
+  build:
+    runs-on: ubuntu-latest
+    needs:
+      - ci
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Build and push
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          file: ./Dockerfile
+          platforms: linux/amd64,linux/arm64
+          push: true
+          tags: corentinth/it-tools:latest
--- a/.gitignore
+++ b/.gitignore
@@ -26,3 +26,5 @@ coverage
 *.njsproj
 *.sln
 *.sw?
+
+.env
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,74 @@

 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.

+## [2.19.0](https://github.com/CorentinTh/it-tools/compare/v2.18.0...v2.19.0) (2023-02-06)
+
+
+### Features
+
+* **new-tool:** keycode info ([c934c4e](https://github.com/CorentinTh/it-tools/commit/c934c4e50ca1a129b80b786a5d9a7dbc33ad9ba3))
+
+## [2.18.0](https://github.com/CorentinTh/it-tools/compare/v2.17.0...v2.18.0) (2023-02-04)
+
+
+### Features
+
+* **new-tool:** json minify ([#265](https://github.com/CorentinTh/it-tools/issues/265)) ([f708f50](https://github.com/CorentinTh/it-tools/commit/f708f5091e2182fc88e7cf3e7d23b3d05edc04da))
+
+
+### Refactors
+
+* **tools:** config in query params ([db817a2](https://github.com/CorentinTh/it-tools/commit/db817a2459e23bd096274a7f91815d613d5f7ff4))
+
+## [2.17.0](https://github.com/CorentinTh/it-tools/compare/v2.16.0...v2.17.0) (2023-01-13)
+
+
+### Features
+
+* **new-tool:** jwt parser ([#262](https://github.com/CorentinTh/it-tools/issues/262)) ([acc7f0a](https://github.com/CorentinTh/it-tools/commit/acc7f0a586c64500c5f720e70cdbccf9bffe76d9))
+* **new-tool:** temperature converter ([4607837](https://github.com/CorentinTh/it-tools/commit/4607837f9a398440e0098f2ba862e8d7422ce94f))
+
+
+### Refactors
+
+* **jwt-parser:** simplified code ([f52f7a8](https://github.com/CorentinTh/it-tools/commit/f52f7a845c34ce7da57b11c17d261733be89554f))
+
+## [2.16.0](https://github.com/CorentinTh/it-tools/compare/v2.15.0...v2.16.0) (2022-12-21)
+
+
+### Features
+
+* **search-bar:** use cmd + k to focus on mac ([bf88836](https://github.com/CorentinTh/it-tools/commit/bf88836dbe4037019e9545deaae1db06e5768cfb))
+* **tool:** improved favorite tool management ([af075dc](https://github.com/CorentinTh/it-tools/commit/af075dccccec959a0863e6d11516206860bed91f))
+* **tools:** added favorite tool handling ([4cd809b](https://github.com/CorentinTh/it-tools/commit/4cd809bd0c94836532f58a2ec6aa131694cce10d))
+* **tracker:** added actions monitoring ([bfc2e24](https://github.com/CorentinTh/it-tools/commit/bfc2e24bbfc08f67ed9c9b1d93474029bc01dc8b))
+
+
+### Refactors
+
+* **clean:** removed empty style tag ([cf723f1](https://github.com/CorentinTh/it-tools/commit/cf723f144ee865b6de7323d3be58eb7a9586fa56))
+* **clean:** removed unused import ([4087285](https://github.com/CorentinTh/it-tools/commit/40872859a580a20bb838b79db2b3c88c00995e37))
+* **menu:** improve support button ([679dd1c](https://github.com/CorentinTh/it-tools/commit/679dd1c1f6265227cc9db60c55d83f8eaf8f72b4))
+* **tracker:** better tracker injection ([def60e7](https://github.com/CorentinTh/it-tools/commit/def60e7248003e74ed67e9ff116b438bab410a92))
+
+## [2.15.0](https://github.com/CorentinTh/it-tools/compare/v2.14.1...v2.15.0) (2022-12-16)
+
+
+### Features
+
+* **search-bar:** better search back result ([71e98e9](https://github.com/CorentinTh/it-tools/commit/71e98e93e5752cba934f67d679088524c4d3d2ad))
+
+
+### Bug Fixes
+
+* **integer-base-converter:** handle non-decimal char and better error message ([8476cf3](https://github.com/CorentinTh/it-tools/commit/8476cf319b7ebae87c7928592604a54833ac56ef))
+* **tool-card:** correct text color on light mode for card description ([acf8bc1](https://github.com/CorentinTh/it-tools/commit/acf8bc11dbab85ab361edbe400ebbe5e52a11b89))
+
+
+### Refactors
+
+* **search-bar:** improved tool fuzzy search ([1b5d4e7](https://github.com/CorentinTh/it-tools/commit/1b5d4e72bdb222dd721a1e484c3e5d73bb62d2b1))
+
 ### [2.14.1](https://github.com/CorentinTh/it-tools/compare/v2.14.0...v2.14.1) (2022-11-23)

 ## [2.14.0](https://github.com/CorentinTh/it-tools/compare/v2.13.0...v2.14.0) (2022-11-23)
--- a/13
+++ b/13
@@ -0,0 +1,13 @@
+# build stage
+FROM node:lts-alpine as build-stage
+WORKDIR /app
+COPY . .
+RUN npm install -g pnpm
+RUN pnpm i --frozen-lockfile
+RUN pnpm build
+
+# production stage
+FROM nginx:stable-alpine as production-stage
+COPY --from=build-stage /app/dist /usr/share/nginx/html
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]
--- a/README.md
+++ b/README.md
@@ -8,48 +8,60 @@ Please check the [issues](https://github.com/CorentinTh/it-tools/issues) to see

 You have an idea of a tool? Submit a [feature request](https://github.com/CorentinTh/it-tools/issues/new?assignees=corentinth&labels=&template=feature_request.md&title=)!

+## Self host
+
+Self host your own version of it-tools in your homelab with docker:
+
+```sh
+docker run -d -p 8080:80 --name it-tools -it corentinth/it-tools
+
+```
+
 ## Contribute

 ### Recommended IDE Setup

-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.vscode-typescript-vue-plugin).
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).

-### Node version
+### Type Support for `.vue` Imports in TS

-Ensure you have the correct node/npm version
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.

-```sh
-nvm use
-```
+If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
+
+1. Disable the built-in TypeScript Extension
+   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
+   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
+2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.

 ### Project Setup

 ```sh
-npm install
+pnpm install
 ```

-#### Compile and Hot-Reload for Development
+### Compile and Hot-Reload for Development

 ```sh
-npm run dev
+pnpm dev
 ```

-#### Type-Check, Compile and Minify for Production
+### Type-Check, Compile and Minify for Production

 ```sh
-npm run build
+pnpm build
 ```

-#### Run Unit Tests with [Vitest](https://vitest.dev/)
+### Run Unit Tests with [Vitest](https://vitest.dev/)

 ```sh
-npm run test
+pnpm test
 ```

-#### Lint with [ESLint](https://eslint.org/)
+### Lint with [ESLint](https://eslint.org/)

 ```sh
-npm run lint
+pnpm lint
 ```

 ### Create a new tool
@@ -68,12 +80,9 @@ Coded with ❤️ by [Corentin Thomasset](//corentin-thomasset.fr).

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

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

-
 ## License

 This project is under the [GNU GPLv3](LICENSE).
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "it-tools",
-  "version": "2.14.1",
+  "version": "2.19.0",
  "description": "Collection of handy online tools for developers, with great UX. ",
  "keywords": [
    "productivity",
@@ -33,31 +33,40 @@
  "dependencies": {
    "@it-tools/bip39": "^0.0.4",
    "@it-tools/oggen": "^1.3.0",
+    "@sindresorhus/slugify": "^2.2.0",
+    "@tiptap/pm": "2.0.0-beta.220",
+    "@tiptap/starter-kit": "2.0.0-beta.220",
+    "@tiptap/vue-3": "2.0.0-beta.220",
    "@vicons/material": "^0.12.0",
    "@vicons/tabler": "^0.12.0",
    "@vueuse/core": "^8.9.4",
    "@vueuse/head": "^0.7.13",
+    "@vueuse/router": "^9.13.0",
    "bcryptjs": "^2.4.3",
    "change-case": "^4.1.2",
    "colord": "^2.9.3",
    "cron-validator": "^1.3.1",
-    "cronstrue": "^2.15.0",
+    "cronstrue": "^2.23.0",
    "crypto-js": "^4.1.1",
    "date-fns": "^2.29.3",
    "figue": "^1.2.0",
-    "highlight.js": "^11.6.0",
-    "json5": "^2.2.1",
+    "fuse.js": "^6.6.2",
+    "highlight.js": "^11.7.0",
+    "json5": "^2.2.3",
+    "jwt-decode": "^3.1.2",
    "lodash": "^4.17.21",
    "mathjs": "^10.6.4",
    "mime-types": "^2.1.35",
-    "naive-ui": "^2.33.5",
-    "pinia": "^2.0.23",
+    "naive-ui": "^2.34.3",
+    "node-forge": "^1.3.1",
+    "pinia": "^2.0.33",
    "plausible-tracker": "^0.3.8",
    "qrcode": "^1.5.1",
    "randombytes": "^2.1.0",
    "sql-formatter": "^8.2.0",
+    "ts-pattern": "^4.2.1",
    "uuid": "^8.3.2",
-    "vue": "^3.2.45",
+    "vue": "^3.2.47",
    "vue-router": "^4.1.6"
  },
  "devDependencies": {
@@ -65,30 +74,32 @@
    "@types/bcryptjs": "^2.4.2",
    "@types/crypto-js": "^4.1.1",
    "@types/jsdom": "^16.2.15",
-    "@types/lodash": "^4.14.188",
+    "@types/lodash": "^4.14.191",
    "@types/mime-types": "^2.1.1",
-    "@types/node": "^16.18.3",
+    "@types/node": "^16.18.16",
+    "@types/node-forge": "^1.3.1",
+    "@types/prettier": "^2.7.2",
    "@types/qrcode": "^1.5.0",
    "@types/randombytes": "^2.0.0",
    "@types/uuid": "^8.3.4",
-    "@typescript-eslint/parser": "^5.42.1",
+    "@typescript-eslint/parser": "^5.55.0",
    "@vitejs/plugin-vue": "^2.3.4",
    "@vitejs/plugin-vue-jsx": "^1.3.10",
-    "@vue/eslint-config-prettier": "^7.0.0",
+    "@vue/eslint-config-prettier": "^7.1.0",
    "@vue/eslint-config-typescript": "^10.0.0",
-    "@vue/test-utils": "^2.2.2",
+    "@vue/test-utils": "^2.3.1",
    "@vue/tsconfig": "^0.1.3",
-    "c8": "^7.12.0",
-    "eslint": "^8.27.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-import-resolver-typescript": "^3.5.2",
-    "eslint-plugin-import": "^2.26.0",
+    "c8": "^7.13.0",
+    "eslint": "^8.36.0",
+    "eslint-config-prettier": "^8.7.0",
+    "eslint-import-resolver-typescript": "^3.5.3",
+    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-vue": "^8.7.1",
    "jsdom": "^19.0.0",
    "less": "^4.1.3",
-    "prettier": "^2.7.1",
+    "prettier": "^2.8.4",
    "standard-version": "^9.5.0",
-    "start-server-and-test": "^1.14.0",
+    "start-server-and-test": "^1.15.4",
    "typescript": "~4.5.5",
    "vite": "^2.9.15",
    "vite-plugin-md": "^0.12.4",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useRoute, RouterView } from 'vue-router';
-import { darkTheme, NGlobalStyle, NMessageProvider } from 'naive-ui';
+import { darkTheme, NGlobalStyle, NMessageProvider, NNotificationProvider } from 'naive-ui';
 import { darkThemeOverrides, lightThemeOverrides } from './themes';
 import { layouts } from './layouts';
 import { useStyleStore } from './stores/style.store';
@@ -18,9 +18,11 @@ const themeOverrides = computed(() => (styleStore.isDarkTheme ? darkThemeOverrid
  <n-config-provider :theme="theme" :theme-overrides="themeOverrides">
    <n-global-style />
    <n-message-provider placement="bottom">
-      <component :is="layout">
-        <router-view />
-      </component>
+      <n-notification-provider placement="bottom-right">
+        <component :is="layout">
+          <router-view />
+        </component>
+      </n-notification-provider>
    </n-message-provider>
  </n-config-provider>
 </template>
--- a/src/components/FavoriteButton.vue
+++ b/src/components/FavoriteButton.vue
@@ -0,0 +1,38 @@
+<template>
+  <n-tooltip trigger="hover">
+    <template #trigger>
+      <n-button circle quaternary :type="buttonType" :style="{ opacity: isFavorite ? 1 : 0.2 }" @click="toggleFavorite">
+        <template #icon>
+          <n-icon :component="FavoriteFilled" />
+        </template>
+      </n-button>
+    </template>
+    {{ isFavorite ? 'Remove from favorites' : 'Add to favorites' }}
+  </n-tooltip>
+</template>
+
+<script setup lang="ts">
+import { FavoriteFilled } from '@vicons/material';
+import { useToolStore } from '@/tools/tools.store';
+import type { Tool } from '@/tools/tools.types';
+import { computed, toRefs } from 'vue';
+
+const toolStore = useToolStore();
+
+const props = defineProps<{ tool: Tool }>();
+const { tool } = toRefs(props);
+
+const isFavorite = computed(() => toolStore.isToolFavorite({ tool }));
+const buttonType = computed(() => (isFavorite.value ? 'primary' : 'default'));
+
+function toggleFavorite(event: MouseEvent) {
+  event.preventDefault();
+
+  if (toolStore.isToolFavorite({ tool })) {
+    toolStore.removeToolFromFavorites({ tool });
+    return;
+  }
+
+  toolStore.addToolToFavorites({ tool });
+}
+</script>
--- a/src/components/MenuIconItem.vue
+++ b/src/components/MenuIconItem.vue
@@ -6,11 +6,11 @@
 </template>

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

-const props = defineProps<{ tool: ITool }>();
+const props = defineProps<{ tool: Tool }>();
 const { tool } = toRefs(props);

 const theme = useThemeVars();
--- a/src/components/NavbarButtons.vue
+++ b/src/components/NavbarButtons.vue
@@ -9,7 +9,7 @@
        href="https://github.com/CorentinTh/it-tools"
        rel="noopener"
        target="_blank"
-        aria-label="IT-Tools' github repository"
+        aria-label="IT-Tools' GitHub repository"
      >
        <n-icon size="25" :component="BrandGithub" />
      </n-button>
@@ -27,12 +27,12 @@
        href="https://twitter.com/ittoolsdottech"
        rel="noopener"
        target="_blank"
-        aria-label="IT Tools' twitter account"
+        aria-label="IT Tools' Twitter account"
      >
        <n-icon size="25" :component="BrandTwitter" />
      </n-button>
    </template>
-    IT Tools' twitter account
+    IT Tools' Twitter account
  </n-tooltip>

  <router-link to="/about" #="{ navigate, href }" custom>
--- a/src/components/SearchBar.vue
+++ b/src/components/SearchBar.vue
@@ -1,36 +1,38 @@
 <script lang="ts" setup>
+import { useFuzzySearch } from '@/composable/fuzzySearch';
+import { useTracker } from '@/modules/tracker/tracker.services';
 import { tools } from '@/tools';
+import type { Tool } from '@/tools/tools.types';
 import { SearchRound } from '@vicons/material';
 import { useMagicKeys, whenever } from '@vueuse/core';
-import { deburr } from 'lodash';
-import { computed, ref } from 'vue';
+import type { NInput } from 'naive-ui';
+import { computed, h, ref } from 'vue';
 import { useRouter } from 'vue-router';
+import SearchBarItem from './SearchBarItem.vue';
+
+const toolToOption = (tool: Tool) => ({ label: tool.name, value: tool.path, tool });

 const router = useRouter();
+const { tracker } = useTracker();
+
 const queryString = ref('');
-
-const cleanString = (s: string) => deburr(s.trim().toLowerCase());
-
-const searchableTools = tools.map(({ name, description, keywords, path }) => ({
-  searchableText: [name, description, ...keywords].map(cleanString).join(' '),
-  path,
-  name,
-}));
+const inputEl = ref<HTMLElement>();
+const displayDropDown = ref(true);
+const isMac = computed(() => window.navigator.userAgent.toLowerCase().includes('mac'));

 const options = computed(() => {
-  const query = cleanString(queryString.value);
+  if (queryString.value === '') {
+    return tools.map(toolToOption);
+  }

-  return searchableTools
-    .filter(({ searchableText }) => searchableText.includes(query))
-    .map(({ name, path }) => ({ label: name, value: path }));
+  return searchResult.value.map(toolToOption);
 });

-function onSelect(path: string) {
-  router.push(path);
-  queryString.value = '';
-}
-
-const focusTarget = ref();
+const { searchResult } = useFuzzySearch({
+  search: queryString,
+  data: tools,
+  options: { keys: [{ name: 'name', weight: 2 }, 'description', 'keywords'] },
+});

 const keys = useMagicKeys({
  passive: false,
@@ -38,12 +40,40 @@ const keys = useMagicKeys({
    if (e.ctrlKey && e.key === 'k' && e.type === 'keydown') {
      e.preventDefault();
    }
+
+    if (e.metaKey && e.key === 'k' && e.type === 'keydown') {
+      e.preventDefault();
+    }
  },
 });

-whenever(keys.ctrl_k, () => {
-  focusTarget.value.focus();
-});
+whenever(keys.ctrl_k, claimFocus);
+whenever(keys.meta_k, claimFocus);
+whenever(keys.escape, releaseFocus);
+
+function renderOption({ tool }: { tool: Tool }) {
+  return h(SearchBarItem, { tool });
+}
+
+function onSelect(path: string) {
+  router.push(path);
+  queryString.value = '';
+}
+
+function claimFocus() {
+  displayDropDown.value = true;
+
+  inputEl.value?.focus();
+}
+
+function releaseFocus() {
+  displayDropDown.value = false;
+}
+
+function onFocus() {
+  tracker.trackEvent({ eventName: 'Search-bar focused' });
+  displayDropDown.value = true;
+}
 </script>

 <template>
@@ -51,16 +81,21 @@ whenever(keys.ctrl_k, () => {
    <n-auto-complete
      v-model:value="queryString"
      :options="options"
-      :input-props="{ autocomplete: 'disabled' }"
-      :on-select="onSelect"
+      :on-select="(value) => onSelect(String(value))"
+      :render-label="renderOption"
+      :default-value="'aa'"
+      :get-show="() => displayDropDown"
+      :on-focus="onFocus"
+      @update:value="() => (displayDropDown = true)"
    >
      <template #default="{ handleInput, handleBlur, handleFocus, value: slotValue }">
        <n-input
-          ref="focusTarget"
+          ref="inputEl"
          round
          clearable
-          placeholder="Search a tool... [Ctrl + K]"
+          :placeholder="`Search a tool (use ${isMac ? 'Cmd' : 'Ctrl'} + K to focus)`"
          :value="slotValue"
+          :input-props="{ autocomplete: 'disabled' }"
          @input="handleInput"
          @focus="handleFocus"
          @blur="handleBlur"
@@ -73,9 +108,3 @@ whenever(keys.ctrl_k, () => {
    </n-auto-complete>
  </div>
 </template>
-
-<style lang="less" scoped>
-// ::v-deep(.n-input__border) {
-//     border: none;
-// }
-</style>
--- a/src/components/SearchBarItem.vue
+++ b/src/components/SearchBarItem.vue
@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import type { Tool } from '@/tools/tools.types';
+import { toRefs } from 'vue';
+
+const props = defineProps<{ tool: Tool }>();
+const { tool } = toRefs(props);
+</script>
+
+<template>
+  <div class="search-bar-item">
+    <n-icon class="icon" :component="tool.icon" />
+
+    <div>
+      <div class="name">{{ tool.name }}</div>
+      <div class="description">{{ tool.description }}</div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.search-bar-item {
+  padding: 10px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  .icon {
+    font-size: 30px;
+    margin-right: 10px;
+    opacity: 0.7;
+  }
+
+  .name {
+    font-weight: bold;
+    font-size: 15px;
+    line-height: 1;
+    margin-bottom: 5px;
+  }
+
+  .description {
+    opacity: 0.7;
+    line-height: 1;
+  }
+}
+</style>
--- a/src/components/ToolCard.vue
+++ b/src/components/ToolCard.vue
@@ -3,25 +3,30 @@
    <n-card class="tool-card">
      <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 align="center">
+          <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>
+
+          <favorite-button :tool="tool" />
+        </n-space>
      </n-space>
      <n-h3 class="title">
        <n-ellipsis>{{ tool.name }}</n-ellipsis>
      </n-h3>

      <div class="description">
-        <n-ellipsis :line-clamp="2" :tooltip="false">
+        <n-ellipsis :line-clamp="2" :tooltip="false" style="min-height: 44.78px">
          {{ tool.description }}
+          <br />&nbsp;
        </n-ellipsis>
      </div>
    </n-card>
@@ -29,11 +34,12 @@
 </template>

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

-const props = defineProps<{ tool: ITool & { category: string } }>();
+const props = defineProps<{ tool: Tool & { category: string } }>();
 const { tool } = toRefs(props);
 const theme = useThemeVars();
 </script>
@@ -50,7 +56,7 @@ a {

  .icon {
    opacity: 0.6;
-    color: #ffffff;
+    color: v-bind('theme.textColorBase');
  }

  .title {
@@ -59,7 +65,7 @@ a {

  .description {
    opacity: 0.6;
-    color: #ffffff;
+    color: v-bind('theme.textColorBase');
    margin: 5px 0;
  }
 }
--- a/src/composable/fuzzySearch.ts
+++ b/src/composable/fuzzySearch.ts
@@ -0,0 +1,23 @@
+import { get, type MaybeRef } from '@vueuse/core';
+import Fuse from 'fuse.js';
+import { computed } from 'vue';
+
+export { useFuzzySearch };
+
+function useFuzzySearch<Data>({
+  search,
+  data,
+  options = {},
+}: {
+  search: MaybeRef<string>;
+  data: Data[];
+  options?: Fuse.IFuseOptions<Data>;
+}) {
+  const fuse = new Fuse(data, options);
+
+  const searchResult = computed(() => {
+    return fuse.search(get(search)).map(({ item }) => item);
+  });
+
+  return { searchResult };
+}
--- a/src/composable/queryParams.ts
+++ b/src/composable/queryParams.ts
@@ -0,0 +1,35 @@
+import { useRouteQuery } from '@vueuse/router';
+import { computed } from 'vue';
+
+export { useQueryParam };
+
+const transformers = {
+  number: {
+    fromQuery: (value: string) => Number(value),
+    toQuery: (value: number) => String(value),
+  },
+  string: {
+    fromQuery: (value: string) => value,
+    toQuery: (value: string) => value,
+  },
+  boolean: {
+    fromQuery: (value: string) => value.toLowerCase() === 'true',
+    toQuery: (value: boolean) => (value ? 'true' : 'false'),
+  },
+};
+
+function useQueryParam<T>({ name, defaultValue }: { name: string; defaultValue: T }) {
+  const type = typeof defaultValue;
+  const transformer = transformers[type as keyof typeof transformers] ?? transformers.string;
+
+  const proxy = useRouteQuery(name, transformer.toQuery(defaultValue as never));
+
+  return computed<T>({
+    get() {
+      return transformer.fromQuery(proxy.value) as T;
+    },
+    set(value) {
+      proxy.value = transformer.toQuery(value as never);
+    },
+  });
+}
--- a/src/layouts/base.layout.vue
+++ b/src/layouts/base.layout.vue
@@ -1,13 +1,15 @@
 <script lang="ts" setup>
 import { NIcon, useThemeVars, type MenuGroupOption } from 'naive-ui';
-import { h } from 'vue';
+import { computed, h } from 'vue';
 import { RouterLink, useRoute } from 'vue-router';
 import { Heart, Menu2, Home2 } from '@vicons/tabler';
 import { toolsByCategory } from '@/tools';
 import { useStyleStore } from '@/stores/style.store';
 import { config } from '@/config';
 import MenuIconItem from '@/components/MenuIconItem.vue';
-import type { ITool } from '@/tools/tool';
+import type { Tool } from '@/tools/tools.types';
+import { useToolStore } from '@/tools/tools.store';
+import { useTracker } from '@/modules/tracker/tracker.services';
 import SearchBar from '../components/SearchBar.vue';
 import HeroGradient from '../assets/hero-gradient.svg?component';
 import MenuLayout from '../components/MenuLayout.vue';
@@ -19,19 +21,30 @@ const styleStore = useStyleStore();
 const version = config.app.version;
 const commitSha = config.app.lastCommitSha.slice(0, 7);

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

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

 <template>
@@ -142,9 +155,12 @@ const menuOptions: MenuGroupOption[] = toolsByCategory.map((category) => ({
              round
              type="primary"
              tag="a"
-              href="https://github.com/sponsors/CorentinTh"
+              href="https://www.buymeacoffee.com/cthmsst"
              rel="noopener"
              target="_blank"
+              class="support-button"
+              :bordered="false"
+              @click="() => tracker.trackEvent({ eventName: 'Support button clicked' })"
            >
              Buy me a coffee
              <n-icon v-if="!styleStore.isSmallScreen" :component="Heart" style="margin-left: 5px" />
@@ -170,6 +186,19 @@ const menuOptions: MenuGroupOption[] = toolsByCategory.map((category) => ({
 //     background-size: @size @size;
 // }

+.support-button {
+  background: rgb(37, 99, 108);
+  background: linear-gradient(48deg, rgba(37, 99, 108, 1) 0%, rgba(59, 149, 111, 1) 60%, rgba(20, 160, 88, 1) 100%);
+  color: #fff;
+  transition: all ease 0.2s;
+
+  &:hover {
+    color: #fff;
+    padding-left: 30px;
+    padding-right: 30px;
+  }
+}
+
 .footer {
  text-align: center;
  color: #838587;
--- a/src/layouts/tool.layout.vue
+++ b/src/layouts/tool.layout.vue
@@ -3,22 +3,22 @@ import { useRoute } from 'vue-router';
 import { useHead } from '@vueuse/head';
 import type { HeadObject } from '@vueuse/head';
 import { computed } from 'vue';
-import { useThemeVars } from 'naive-ui';
+import FavoriteButton from '@/components/FavoriteButton.vue';
+import type { Tool } from '@/tools/tools.types';
 import BaseLayout from './base.layout.vue';

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

 const head = computed<HeadObject>(() => ({
  title: `${route.meta.name} - IT Tools`,
  meta: [
    {
      name: 'description',
-      content: route.meta.description,
+      content: route.meta?.description as string,
    },
    {
      name: 'keywords',
-      content: route.meta.keywords,
+      content: ((route.meta.keywords ?? []) as string[]).join(','),
    },
  ],
 }));
@@ -29,22 +29,18 @@ useHead(head);
  <base-layout>
    <div class="tool-layout">
      <div class="tool-header">
-        <n-h1>
-          {{ route.meta.name }}
+        <n-space align="center" justify="space-between" :wrap="false">
+          <n-h1>
+            {{ route.meta.name }}
+          </n-h1>

-          <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>
+            <favorite-button :tool="{name: route.meta.name} as Tool" />
+          </div>
+        </n-space>

        <div class="separator" />
+
        <div class="description">
          {{ route.meta.description }}
        </div>
@@ -92,6 +88,7 @@ useHead(head);
      width: 200px;
      height: 2px;
      background: rgb(161, 161, 161);
+      opacity: 0.2;

      margin: 10px 0;
    }
--- a/src/modules/tracker/tracker.services.ts
+++ b/src/modules/tracker/tracker.services.ts
@@ -0,0 +1,27 @@
+import _ from 'lodash';
+import type Plausible from 'plausible-tracker';
+import { inject } from 'vue';
+
+export { createTrackerService, useTracker };
+
+function createTrackerService({ plausible }: { plausible: ReturnType<typeof Plausible> }) {
+  return {
+    trackEvent({ eventName }: { eventName: string }) {
+      plausible.trackEvent(eventName);
+    },
+  };
+}
+
+function useTracker() {
+  const plausible: ReturnType<typeof Plausible> | undefined = inject('plausible');
+
+  if (_.isNil(plausible)) {
+    throw new Error('Plausible must be instantiated');
+  }
+
+  const tracker = createTrackerService({ plausible });
+
+  return {
+    tracker,
+  };
+}
--- a/src/modules/tracker/tracker.types.ts
+++ b/src/modules/tracker/tracker.types.ts
@@ -0,0 +1,3 @@
+import type { createTrackerService } from './tracker.services';
+
+export type TrackerService = ReturnType<typeof createTrackerService>;
--- a/src/pages/About.vue
+++ b/src/pages/About.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
+import { useTracker } from '@/modules/tracker/tracker.services';
 import { useHead } from '@vueuse/head';

 useHead({ title: 'About - IT Tools' });
+const { tracker } = useTracker();
 </script>

 <template>
@@ -22,9 +24,10 @@ useHead({ title: 'About - IT Tools' });
        type="primary"
        tag="a"
        text
-        href="https://github.com/sponsors/CorentinTh"
+        href="https://www.buymeacoffee.com/cthmsst"
        rel="noopener"
        target="_blank"
+        @click="() => tracker.trackEvent({ eventName: 'Support button clicked' })"
      >
        sponsoring me </n-button
      >.
@@ -38,7 +41,7 @@ useHead({ title: 'About - IT Tools' });
        type="primary"
        tag="a"
        text
-        href="https://github.com/CorentinTh/it-tools/blob/master/package.json"
+        href="https://github.com/CorentinTh/it-tools/blob/main/package.json"
        rel="noopener"
        target="_blank"
      >
@@ -61,7 +64,7 @@ useHead({ title: 'About - IT Tools' });
      >
        issues section
      </n-button>
-      in the github repository.
+      in the GitHub repository.
    </n-p>
    <n-p>
      And if you found a bug, or something broken that doesn't work as expected, please fill a bug report in the
@@ -75,7 +78,7 @@ useHead({ title: 'About - IT Tools' });
      >
        issues section
      </n-button>
-      in the github repository.
+      in the GitHub repository.
    </n-p>
  </div>
 </template>
--- a/src/pages/Home.page.vue
+++ b/src/pages/Home.page.vue
@@ -1,41 +1,71 @@
 <script setup lang="ts">
-import { toolsWithCategory } from '@/tools';
+import { useToolStore } from '@/tools/tools.store';
 import { Heart } from '@vicons/tabler';
 import { useHead } from '@vueuse/head';
 import ColoredCard from '../components/ColoredCard.vue';
 import ToolCard from '../components/ToolCard.vue';

+const toolStore = useToolStore();
+
 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>
-        <colored-card title="You like it-tools?" :icon="Heart">
-          Give us a star on
-          <a
-            href="https://github.com/CorentinTh/it-tools"
-            rel="noopener"
-            target="_blank"
-            aria-label="IT-Tools' github repository"
-            >github</a
-          >
-          or follow us on
-          <a
-            href="https://twitter.com/ittoolsdottech"
-            rel="noopener"
-            target="_blank"
-            aria-label="IT-Tools' twitter account"
-            >twitter</a
-          >! Thank you
-          <n-icon :component="Heart" />
-        </colored-card>
-      </n-gi>
-      <n-gi v-for="tool in toolsWithCategory" :key="tool.name">
-        <tool-card :tool="tool" />
-      </n-gi>
-    </n-grid>
+    <div class="grid-wrapper">
+      <n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
+        <n-gi>
+          <colored-card title="You like it-tools?" :icon="Heart">
+            Give us a star on
+            <a
+              href="https://github.com/CorentinTh/it-tools"
+              rel="noopener"
+              target="_blank"
+              aria-label="IT-Tools' GitHub repository"
+              >GitHub</a
+            >
+            or follow us on
+            <a
+              href="https://twitter.com/ittoolsdottech"
+              rel="noopener"
+              target="_blank"
+              aria-label="IT-Tools' Twitter account"
+              >Twitter</a
+            >! Thank you
+            <n-icon :component="Heart" />
+          </colored-card>
+        </n-gi>
+      </n-grid>
+
+      <transition name="height">
+        <div v-if="toolStore.favoriteTools.length > 0">
+          <n-h3>Your favorite tools</n-h3>
+          <n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
+            <n-gi v-for="tool in toolStore.favoriteTools" :key="tool.name">
+              <tool-card :tool="tool" />
+            </n-gi>
+          </n-grid>
+        </div>
+      </transition>
+
+      <div v-if="toolStore.newTools.length > 0">
+        <n-h3>Newest tools</n-h3>
+        <n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
+          <n-gi v-for="tool in toolStore.newTools" :key="tool.name">
+            <tool-card :tool="tool" />
+          </n-gi>
+        </n-grid>
+      </div>
+
+      <n-h3>All the tools</n-h3>
+      <n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
+        <n-gi v-for="tool in toolStore.tools" :key="tool.name">
+          <transition>
+            <tool-card :tool="tool" />
+          </transition>
+        </n-gi>
+      </n-grid>
+    </div>
  </div>
 </template>

@@ -43,4 +73,27 @@ useHead({ title: 'IT Tools - Handy online tools for developers' });
 .home-page {
  padding-top: 50px;
 }
+
+.n-h3 {
+  margin-bottom: 10px;
+}
+
+::v-deep(.n-grid) {
+  margin-bottom: 30px;
+}
+
+.height-enter-active,
+.height-leave-active {
+  transition: all 0.5s ease-in-out;
+  overflow: hidden;
+  max-height: 500px;
+}
+
+.height-enter-from,
+.height-leave-to {
+  max-height: 42px;
+  overflow: hidden;
+  opacity: 0;
+  margin-bottom: 0;
+}
 </style>
--- a/src/plugins/naive.plugin.ts
+++ b/src/plugins/naive.plugin.ts
@@ -53,6 +53,7 @@ import {
  NTooltip,
  NUpload,
  NUploadDragger,
+  NPopover,
  NCheckbox,
 } from 'naive-ui';

@@ -111,6 +112,7 @@ const components = [
  NIcon,
  NSwitch,
  NCollapseTransition,
+  NPopover,
 ];

 export const naive = create({ components });
--- a/src/plugins/plausible.plugin.ts
+++ b/src/plugins/plausible.plugin.ts
@@ -1,4 +1,5 @@
 import { config } from '@/config';
+
 import Plausible from 'plausible-tracker';
 import type { App } from 'vue';

@@ -7,6 +8,6 @@ export const plausible = {
    const plausible = Plausible(config.plausible);
    plausible.enableAutoPageviews();

-    app.config.globalProperties.$plausible = plausible;
+    app.provide('plausible', plausible);
  },
 };
--- a/src/themes.ts
+++ b/src/themes.ts
@@ -6,6 +6,12 @@ export const lightThemeOverrides: GlobalThemeOverrides = {
  },

  Layout: { color: '#f1f5f9' },
+
+  AutoComplete: {
+    peers: {
+      InternalSelectMenu: { height: '500px' },
+    },
+  },
 };

 export const darkThemeOverrides: GlobalThemeOverrides = {
@@ -16,23 +22,33 @@ export const darkThemeOverrides: GlobalThemeOverrides = {
    primaryColorSuppl: '#36AD6AFF',
  },

+  Notification: {
+    color: '#333333',
+  },
+
+  AutoComplete: {
+    peers: {
+      InternalSelectMenu: { height: '500px', color: '#1e1e1e' },
+    },
+  },
+
  Menu: {
    itemHeight: '32px',
  },

  Layout: {
-    color: '#121212',
-    siderColor: '#1e1e1e',
+    color: '#1c1c1c',
+    siderColor: '#232323',
    siderBorderColor: 'transparent',
  },

  Card: {
-    color: '#1e1e1e',
-    borderColor: 'transparent',
+    color: '#232323',
+    borderColor: '#282828',
  },

  Table: {
-    tdColor: '#1e1e1e',
+    tdColor: '#232323',
    thColor: '#353535',
  },
 };
--- a/src/tools/base64-string-converter/base64-string-converter.vue
+++ b/src/tools/base64-string-converter/base64-string-converter.vue
@@ -53,5 +53,3 @@ const b64Validation = useValidation({
  rules: [{ message: 'Invalid base64 string', validator: (value) => isValidBase64(value.trim()) }],
 });
 </script>
-
-<style lang="less" scoped></style>
--- a/src/tools/case-converter/case-converter.vue
+++ b/src/tools/case-converter/case-converter.vue
@@ -8,37 +8,37 @@
      <n-divider />

      <n-form-item label="Camelcase:">
-        <input-copyable :value="camelCase(input)" />
+        <input-copyable :value="camelCase(input, baseConfig)" />
      </n-form-item>
      <n-form-item label="Capitalcase:">
-        <input-copyable :value="capitalCase(input)" />
+        <input-copyable :value="capitalCase(input, baseConfig)" />
      </n-form-item>
      <n-form-item label="Constantcase:">
-        <input-copyable :value="constantCase(input)" />
+        <input-copyable :value="constantCase(input, baseConfig)" />
      </n-form-item>
      <n-form-item label="Dotcase:">
-        <input-copyable :value="dotCase(input)" />
+        <input-copyable :value="dotCase(input, baseConfig)" />
      </n-form-item>
      <n-form-item label="Headercase:">
-        <input-copyable :value="headerCase(input)" />
+        <input-copyable :value="headerCase(input, baseConfig)" />
      </n-form-item>
      <n-form-item label="Nocase:">
-        <input-copyable :value="noCase(input)" />
+        <input-copyable :value="noCase(input, baseConfig)" />
      </n-form-item>
      <n-form-item label="Paramcase:">
-        <input-copyable :value="paramCase(input)" />
+        <input-copyable :value="paramCase(input, baseConfig)" />
      </n-form-item>
      <n-form-item label="Pascalcase:">
-        <input-copyable :value="pascalCase(input)" />
+        <input-copyable :value="pascalCase(input, baseConfig)" />
      </n-form-item>
      <n-form-item label="Pathcase:">
-        <input-copyable :value="pathCase(input)" />
+        <input-copyable :value="pathCase(input, baseConfig)" />
      </n-form-item>
      <n-form-item label="Sentencecase:">
-        <input-copyable :value="sentenceCase(input)" />
+        <input-copyable :value="sentenceCase(input, baseConfig)" />
      </n-form-item>
      <n-form-item label="Snakecase:">
-        <input-copyable :value="snakeCase(input)" />
+        <input-copyable :value="snakeCase(input, baseConfig)" />
      </n-form-item>
    </n-form>
  </n-card>
@@ -61,6 +61,10 @@ import {
 } from 'change-case';
 import InputCopyable from '../../components/InputCopyable.vue';

+const baseConfig = {
+  stripRegexp: /[^A-Za-zÀ-ÖØ-öø-ÿ]+/gi,
+};
+
 const input = ref('lorem ipsum dolor sit amet');
 </script>

--- a/src/tools/ed25519-key-pair-generator/ed25519-key-pair-generator.service.ts
+++ b/src/tools/ed25519-key-pair-generator/ed25519-key-pair-generator.service.ts
@@ -0,0 +1,14 @@
+import { pki } from 'node-forge';
+
+export { generateKeyPair };
+
+function generateKeyPair() {
+  const { privateKey, publicKey } = pki.ed25519.generateKeyPair();
+
+  console.log({ privateKey, publicKey });
+
+  return {
+    publicKeyPem: pki.publicKeyToPem(publicKey),
+    privateKeyPem: pki.privateKeyToPem(privateKey),
+  };
+}
--- a/src/tools/ed25519-key-pair-generator/ed25519-key-pair-generator.vue
+++ b/src/tools/ed25519-key-pair-generator/ed25519-key-pair-generator.vue
@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <h3>Public key</h3>
+    <textarea-copyable :value="certs.publicKeyPem" />
+  </div>
+
+  <div>
+    <h3>Private key</h3>
+    <textarea-copyable :value="certs.privateKeyPem" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
+import { withDefaultOnErrorAsync } from '@/utils/defaults';
+import { computed } from 'vue';
+import { generateKeyPair } from './ed25519-key-pair-generator.service';
+
+const emptyCerts = { publicKeyPem: '', privateKeyPem: '' };
+
+const certs = computed(() => generateKeyPair());
+</script>
+
+<style lang="less" scoped></style>
--- a/src/tools/ed25519-key-pair-generator/index.ts
+++ b/src/tools/ed25519-key-pair-generator/index.ts
@@ -0,0 +1,11 @@
+import { ArrowsShuffle } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Ed25519 key pair generator',
+  path: '/ed25519-key-pair-generator',
+  description: '',
+  keywords: ['ed25519', 'key', 'pair', 'generator'],
+  component: () => import('./ed25519-key-pair-generator.vue'),
+  icon: ArrowsShuffle,
+});
--- a/src/tools/hash-text/hash-text.vue
+++ b/src/tools/hash-text/hash-text.vue
@@ -40,6 +40,7 @@
 </template>

 <script setup lang="ts">
+import { useQueryParam } from '@/composable/queryParams';
 import { enc, lib, MD5, RIPEMD160, SHA1, SHA224, SHA256, SHA3, SHA384, SHA512 } from 'crypto-js';
 import { ref } from 'vue';
 import InputCopyable from '../../components/InputCopyable.vue';
@@ -59,7 +60,7 @@ const algos = {
 type AlgoNames = keyof typeof algos;
 type Encoding = keyof typeof enc | 'Bin';
 const algoNames = Object.keys(algos) as AlgoNames[];
-const encoding = ref<Encoding>('Hex');
+const encoding = useQueryParam<Encoding>({ defaultValue: 'Hex', name: 'encoding' });
 const clearText = ref('');

 function formatWithEncoding(words: lib.WordArray, encoding: Encoding) {
--- a/src/tools/hmac-generator/hmac-generator.vue
+++ b/src/tools/hmac-generator/hmac-generator.vue
@@ -94,5 +94,3 @@ const hmac = computed(() =>
 );
 const { copy } = useCopy({ source: hmac });
 </script>
-
-<style lang="less" scoped></style>
--- a/src/tools/html-wysiwyg-editor/editor/editor.vue
+++ b/src/tools/html-wysiwyg-editor/editor/editor.vue
@@ -0,0 +1,135 @@
+<template>
+  <n-card v-if="editor" class="editor">
+    <template #header>
+      <menu-bar class="editor-header" :editor="editor" />
+      <n-divider style="margin-top: 0" />
+    </template>
+
+    <editor-content class="editor-content" :editor="editor" />
+  </n-card>
+</template>
+
+<script setup lang="ts">
+import { tryOnBeforeUnmount, useVModel } from '@vueuse/core';
+import { Editor, EditorContent } from '@tiptap/vue-3';
+import StarterKit from '@tiptap/starter-kit';
+import { useThemeVars } from 'naive-ui';
+import MenuBar from './menu-bar.vue';
+
+const themeVars = useThemeVars();
+const props = defineProps<{ html: string }>();
+const emit = defineEmits(['update:html']);
+const html = useVModel(props, 'html', emit);
+
+const editor = new Editor({
+  content: html.value,
+  extensions: [StarterKit],
+});
+
+editor.on('update', ({ editor }) => emit('update:html', editor.getHTML()));
+
+tryOnBeforeUnmount(() => {
+  editor.destroy();
+});
+</script>
+
+<style scoped lang="less">
+::v-deep(.n-card-header) {
+  padding: 0;
+}
+
+::v-deep(.ProseMirror-focused) {
+  outline: none;
+}
+</style>
+
+<style scoped lang="less">
+::v-deep(.ProseMirror) {
+  > * + * {
+    margin-top: 0.75em;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  ul,
+  ol {
+    padding: 0 1rem;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+  }
+
+  code {
+    background-color: v-bind('themeVars.codeColor');
+    padding: 2px 4px;
+    border-radius: 5px;
+    font-size: 85%;
+  }
+
+  pre {
+    background: v-bind('themeVars.codeColor');
+    font-family: monospace;
+    padding: 0.75rem 1rem;
+    border-radius: 0.5rem;
+
+    code {
+      color: inherit;
+      padding: 0;
+      background: none;
+      font-size: 0.8rem;
+    }
+  }
+
+  mark {
+    background-color: #faf594;
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+
+  hr {
+    margin: 1rem 0;
+  }
+
+  blockquote {
+    padding-left: 1rem;
+    border-left: 2px solid rgba(#0d0d0d, 0.1);
+  }
+
+  hr {
+    border: none;
+    border-top: 2px solid rgba(#0d0d0d, 0.1);
+    margin: 2rem 0;
+  }
+
+  ul[data-type='taskList'] {
+    list-style: none;
+    padding: 0;
+
+    li {
+      display: flex;
+      align-items: center;
+
+      > label {
+        flex: 0 0 auto;
+        margin-right: 0.5rem;
+        user-select: none;
+      }
+
+      > div {
+        flex: 1 1 auto;
+      }
+    }
+  }
+}
+</style>
--- a/src/tools/html-wysiwyg-editor/editor/menu-bar-item.vue
+++ b/src/tools/html-wysiwyg-editor/editor/menu-bar-item.vue
@@ -0,0 +1,22 @@
+<template>
+  <n-tooltip trigger="hover">
+    <template #trigger>
+      <n-button circle quaternary :type="isActive?.() ? 'primary' : 'default'" @click="action">
+        <template #icon>
+          <n-icon :component="icon" />
+        </template>
+      </n-button>
+    </template>
+
+    {{ title }}
+  </n-tooltip>
+</template>
+
+<script setup lang="ts">
+import { toRefs, type Component } from 'vue';
+
+const props = defineProps<{ icon: Component; title: string; action: () => void; isActive?: () => boolean }>();
+const { icon, title, action, isActive } = toRefs(props);
+</script>
+
+<style scoped></style>
--- a/src/tools/html-wysiwyg-editor/editor/menu-bar.vue
+++ b/src/tools/html-wysiwyg-editor/editor/menu-bar.vue
@@ -0,0 +1,171 @@
+<template>
+  <n-space align="center" :size="0">
+    <template v-for="(item, index) in items">
+      <n-divider v-if="item.type === 'divider'" :key="`divider${index}`" vertical />
+      <menu-bar-item v-else-if="item.type === 'button'" :key="index" v-bind="item" />
+    </template>
+  </n-space>
+</template>
+
+<script setup lang="ts">
+import type { Editor } from '@tiptap/vue-3';
+import {
+  ArrowBack,
+  ArrowForwardUp,
+  Blockquote,
+  Bold,
+  ClearFormatting,
+  Code,
+  CodePlus,
+  H1,
+  H2,
+  H3,
+  H4,
+  Italic,
+  Link,
+  List,
+  ListNumbers,
+  Separator,
+  Strikethrough,
+  TextWrap,
+} from '@vicons/tabler';
+import { toRefs, type Component } from 'vue';
+import MenuBarItem from './menu-bar-item.vue';
+
+const props = defineProps<{ editor: Editor }>();
+const { editor } = toRefs(props);
+
+type MenuItem =
+  | {
+      icon: Component;
+      title: string;
+      action: () => void;
+      isActive?: () => boolean;
+      type: 'button';
+    }
+  | { type: 'divider' };
+
+const items: MenuItem[] = [
+  {
+    type: 'button',
+    icon: Bold,
+    title: 'Bold',
+    action: () => editor.value.chain().focus().toggleBold().run(),
+    isActive: () => editor.value.isActive('bold'),
+  },
+  {
+    type: 'button',
+    icon: Italic,
+    title: 'Italic',
+    action: () => editor.value.chain().focus().toggleItalic().run(),
+    isActive: () => editor.value.isActive('italic'),
+  },
+  {
+    type: 'button',
+    icon: Strikethrough,
+    title: 'Strike',
+    action: () => editor.value.chain().focus().toggleStrike().run(),
+    isActive: () => editor.value.isActive('strike'),
+  },
+  {
+    type: 'button',
+    icon: Code,
+    title: 'Inline code',
+    action: () => editor.value.chain().focus().toggleCode().run(),
+    isActive: () => editor.value.isActive('code'),
+  },
+  {
+    type: 'divider',
+  },
+  {
+    type: 'button',
+    icon: H1,
+    title: 'Heading 1',
+    action: () => editor.value.chain().focus().toggleHeading({ level: 1 }).run(),
+    isActive: () => editor.value.isActive('heading', { level: 1 }),
+  },
+  {
+    type: 'button',
+    icon: H2,
+    title: 'Heading 2',
+    action: () => editor.value.chain().focus().toggleHeading({ level: 2 }).run(),
+    isActive: () => editor.value.isActive('heading', { level: 2 }),
+  },
+  {
+    type: 'button',
+    icon: H3,
+    title: 'Heading 3',
+    action: () => editor.value.chain().focus().toggleHeading({ level: 4 }).run(),
+    isActive: () => editor.value.isActive('heading', { level: 4 }),
+  },
+  {
+    type: 'button',
+    icon: H4,
+    title: 'Heading 4',
+    action: () => editor.value.chain().focus().toggleHeading({ level: 4 }).run(),
+    isActive: () => editor.value.isActive('heading', { level: 4 }),
+  },
+  {
+    type: 'divider',
+  },
+  {
+    type: 'button',
+    icon: List,
+    title: 'Bullet list',
+    action: () => editor.value.chain().focus().toggleBulletList().run(),
+    isActive: () => editor.value.isActive('bulletList'),
+  },
+  {
+    type: 'button',
+    icon: ListNumbers,
+    title: 'Ordered list',
+    action: () => editor.value.chain().focus().toggleOrderedList().run(),
+    isActive: () => editor.value.isActive('orderedList'),
+  },
+  {
+    type: 'button',
+    icon: CodePlus,
+    title: 'Code block',
+    action: () => editor.value.chain().focus().toggleCodeBlock().run(),
+    isActive: () => editor.value.isActive('codeBlock'),
+  },
+
+  {
+    type: 'button',
+    icon: Blockquote,
+    title: 'Blockquote',
+    action: () => editor.value.chain().focus().toggleBlockquote().run(),
+    isActive: () => editor.value.isActive('blockquote'),
+  },
+  {
+    type: 'divider',
+  },
+  {
+    type: 'button',
+    icon: TextWrap,
+    title: 'Hard break',
+    action: () => editor.value.chain().focus().setHardBreak().run(),
+  },
+  {
+    type: 'button',
+    icon: ClearFormatting,
+    title: 'Clear format',
+    action: () => editor.value.chain().focus().clearNodes().unsetAllMarks().run(),
+  },
+
+  {
+    type: 'button',
+    icon: ArrowBack,
+    title: 'Undo',
+    action: () => editor.value.chain().focus().undo().run(),
+  },
+  {
+    type: 'button',
+    icon: ArrowForwardUp,
+    title: 'Redo',
+    action: () => editor.value.chain().focus().redo().run(),
+  },
+];
+</script>
+
+<style scoped></style>
--- a/src/tools/html-wysiwyg-editor/html-wysiwyg-editor.vue
+++ b/src/tools/html-wysiwyg-editor/html-wysiwyg-editor.vue
@@ -0,0 +1,17 @@
+<template>
+  <editor v-model:html="html" />
+  <textarea-copyable :value="format(html, { parser: 'html', plugins: [htmlParser] })" language="html" />
+</template>
+
+<script setup lang="ts">
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
+import { ref } from 'vue';
+import { format } from 'prettier';
+import htmlParser from 'prettier/parser-html';
+import { useStorage } from '@vueuse/core';
+import Editor from './editor/editor.vue';
+
+const html = useStorage('html-wysiwyg-editor--html', '<h1>Hey!</h1><p>Welcome to this html wysiwyg editor</p>');
+</script>
+
+<style lang="less" scoped></style>
--- a/src/tools/html-wysiwyg-editor/index.ts
+++ b/src/tools/html-wysiwyg-editor/index.ts
@@ -0,0 +1,11 @@
+import { Edit } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Html wysiwyg editor',
+  path: '/html-wysiwyg-editor',
+  description: 'Online HTML editor with feature-rich WYSIWYG editor, get the source code of the content immediately.',
+  keywords: ['html', 'wysiwyg', 'editor', 'p', 'ul', 'ol', 'converter', 'live'],
+  component: () => import('./html-wysiwyg-editor.vue'),
+  icon: Edit,
+});
--- a/src/tools/index.ts
+++ b/src/tools/index.ts
@@ -1,15 +1,16 @@
-import { LockOpen } from '@vicons/tabler';
-import type { ToolCategory } from './tool';
-
-import { tool as chmodCalculator } from './chmod-calculator';
-import { tool as mimeTypes } from './mime-types';
-import { tool as otpCodeGeneratorAndValidator } from './otp-code-generator-and-validator';
 import { tool as base64FileConverter } from './base64-file-converter';
 import { tool as base64StringConverter } from './base64-string-converter';
 import { tool as basicAuthGenerator } from './basic-auth-generator';
+import { tool as htmlWysiwygEditor } from './html-wysiwyg-editor';
+import { tool as rsaKeyPairGenerator } from './rsa-key-pair-generator';
+import { tool as textToNatoAlphabet } from './text-to-nato-alphabet';
+import { tool as slugifyString } from './slugify-string';
+import { tool as keycodeInfo } from './keycode-info';
+import { tool as jsonMinify } from './json-minify';
 import { tool as bcrypt } from './bcrypt';
 import { tool as bip39 } from './bip39-generator';
 import { tool as caseConverter } from './case-converter';
+import { tool as chmodCalculator } from './chmod-calculator';
 import { tool as chronometer } from './chronometer';
 import { tool as colorConverter } from './color-converter';
 import { tool as crontabGenerator } from './crontab-generator';
@@ -23,16 +24,21 @@ import { tool as hmacGenerator } from './hmac-generator';
 import { tool as htmlEntities } from './html-entities';
 import { tool as baseConverter } from './integer-base-converter';
 import { tool as jsonViewer } from './json-viewer';
+import { tool as jwtParser } from './jwt-parser';
 import { tool as loremIpsumGenerator } from './lorem-ipsum-generator';
 import { tool as mathEvaluator } from './math-evaluator';
 import { tool as metaTagGenerator } from './meta-tag-generator';
+import { tool as mimeTypes } from './mime-types';
+import { tool as otpCodeGeneratorAndValidator } from './otp-code-generator-and-validator';
 import { tool as qrCodeGenerator } from './qr-code-generator';
 import { tool as randomPortGenerator } from './random-port-generator';
 import { tool as romanNumeralConverter } from './roman-numeral-converter';
 import { tool as sqlPrettify } from './sql-prettify';
 import { tool as svgPlaceholderGenerator } from './svg-placeholder-generator';
+import { tool as temperatureConverter } from './temperature-converter';
 import { tool as textStatistics } from './text-statistics';
 import { tool as tokenGenerator } from './token-generator';
+import type { ToolCategory } from './tools.types';
 import { tool as urlEncoder } from './url-encoder';
 import { tool as urlParser } from './url-parser';
 import { tool as uuidGenerator } from './uuid-generator';
@@ -40,12 +46,10 @@ import { tool as uuidGenerator } from './uuid-generator';
 export const toolsByCategory: ToolCategory[] = [
  {
    name: 'Crypto',
-    icon: LockOpen,
-    components: [tokenGenerator, hashText, bcrypt, uuidGenerator, cypher, bip39, hmacGenerator],
+    components: [tokenGenerator, hashText, bcrypt, uuidGenerator, cypher, bip39, hmacGenerator, rsaKeyPairGenerator],
  },
  {
    name: 'Converter',
-    icon: LockOpen,
    components: [
      dateTimeConverter,
      baseConverter,
@@ -54,11 +58,11 @@ export const toolsByCategory: ToolCategory[] = [
      base64FileConverter,
      colorConverter,
      caseConverter,
+      textToNatoAlphabet,
    ],
  },
  {
    name: 'Web',
-    icon: LockOpen,
    components: [
      urlEncoder,
      htmlEntities,
@@ -68,31 +72,30 @@ export const toolsByCategory: ToolCategory[] = [
      metaTagGenerator,
      otpCodeGeneratorAndValidator,
      mimeTypes,
+      jwtParser,
+      keycodeInfo,
+      slugifyString,
+      htmlWysiwygEditor,
    ],
  },
  {
    name: 'Images',
-    icon: LockOpen,
    components: [qrCodeGenerator, svgPlaceholderGenerator],
  },
  {
    name: 'Development',
-    icon: LockOpen,
-    components: [gitMemo, randomPortGenerator, crontabGenerator, jsonViewer, sqlPrettify, chmodCalculator],
+    components: [gitMemo, randomPortGenerator, crontabGenerator, jsonViewer, jsonMinify, sqlPrettify, chmodCalculator],
  },
  {
    name: 'Math',
-    icon: LockOpen,
    components: [mathEvaluator, etaCalculator],
  },
  {
    name: 'Measurement',
-    icon: LockOpen,
-    components: [chronometer],
+    components: [chronometer, temperatureConverter],
  },
  {
    name: 'Text',
-    icon: LockOpen,
    components: [loremIpsumGenerator, textStatistics],
  },
 ];
--- a/src/tools/integer-base-converter/integer-base-converter.model.ts
+++ b/src/tools/integer-base-converter/integer-base-converter.model.ts
@@ -7,7 +7,7 @@ export function convertBase({ value, fromBase, toBase }: { value: string; fromBa
    .reverse()
    .reduce((carry: number, digit: string, index: number) => {
      if (!fromRange.includes(digit)) {
-        throw new Error('Invalid digit `' + digit + '` for base ' + fromBase + '.');
+        throw new Error('Invalid digit "' + digit + '" for base ' + fromBase + '.');
      }
      return (carry += fromRange.indexOf(digit) * Math.pow(fromBase, index));
    }, 0);
--- a/src/tools/integer-base-converter/integer-base-converter.vue
+++ b/src/tools/integer-base-converter/integer-base-converter.vue
@@ -4,7 +4,7 @@
      <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 v-model:value="input" style="width: 100%" :status="error ? 'error' : undefined" />
        </n-input-group>
        <n-input-group>
          <n-input-group-label style="flex: 0 0 120px"> Input base: </n-input-group-label>
@@ -14,51 +14,65 @@

      <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 v-model:value="input" :status="error ? 'error' : undefined" />
        <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-alert v-if="error" style="margin-top: 25px" type="error">{{ error }}</n-alert>
      <n-divider />

      <n-input-group>
        <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 />
+        <input-copyable
+          :value="errorlessConvert({ value: input, fromBase: inputBase, toBase: 2 })"
+          readonly
+          placeholder="Binary version will be here..."
+        />
      </n-input-group>

      <n-input-group>
        <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 />
+        <input-copyable
+          :value="errorlessConvert({ value: input, fromBase: inputBase, toBase: 8 })"
+          readonly
+          placeholder="Octal version will be here..."
+        />
      </n-input-group>

      <n-input-group>
        <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 })"
+          :value="errorlessConvert({ value: input, fromBase: inputBase, toBase: 10 })"
          readonly
+          placeholder="Decimal version will be here..."
        />
      </n-input-group>

      <n-input-group>
        <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 })"
+          :value="errorlessConvert({ value: input, fromBase: inputBase, toBase: 16 })"
          readonly
+          placeholder="Decimal version will be here..."
        />
      </n-input-group>

      <n-input-group>
        <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 })"
+          :value="errorlessConvert({ value: input, fromBase: inputBase, toBase: 64 })"
          readonly
+          placeholder="Base64 version will be here..."
        />
      </n-input-group>
      <n-input-group>
        <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 })"
+          :value="errorlessConvert({ value: input, fromBase: inputBase, toBase: outputBase })"
          readonly
+          :placeholder="`Base ${outputBase} will be here...`"
        />
      </n-input-group>
    </n-card>
@@ -66,16 +80,31 @@
 </template>

 <script setup lang="ts">
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import { useStyleStore } from '@/stores/style.store';
+import { getErrorMessageIfThrows } from '@/utils/error';
 import { convertBase } from './integer-base-converter.model';
 import InputCopyable from '../../components/InputCopyable.vue';

 const styleStore = useStyleStore();

-const inputNumber = ref(42);
+const input = ref('42');
 const inputBase = ref(10);
 const outputBase = ref(42);
+
+function errorlessConvert(...args: Parameters<typeof convertBase>) {
+  try {
+    return convertBase(...args);
+  } catch (err) {
+    return '';
+  }
+}
+
+const error = computed(() =>
+  getErrorMessageIfThrows(() =>
+    convertBase({ value: input.value, fromBase: inputBase.value, toBase: outputBase.value }),
+  ),
+);
 </script>

 <style lang="less" scoped>
--- a/src/tools/json-minify/index.ts
+++ b/src/tools/json-minify/index.ts
@@ -0,0 +1,11 @@
+import { Braces } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'JSON minify',
+  path: '/json-minify',
+  description: 'Minify and compress your JSON by removing unnecessary white spaces.',
+  keywords: ['json', 'minify', 'format'],
+  component: () => import('./json-minify.vue'),
+  icon: Braces,
+});
--- a/src/tools/json-minify/json-minify.vue
+++ b/src/tools/json-minify/json-minify.vue
@@ -0,0 +1,57 @@
+<template>
+  <n-form-item
+    label="Your raw json"
+    :feedback="rawJsonValidation.message"
+    :validation-status="rawJsonValidation.status"
+  >
+    <n-input
+      ref="inputElement"
+      v-model:value="rawJson"
+      placeholder="Paste your raw json here..."
+      type="textarea"
+      rows="20"
+      autocomplete="off"
+      autocorrect="off"
+      autocapitalize="off"
+      spellcheck="false"
+    />
+  </n-form-item>
+  <n-form-item label="Minify version of your JSON">
+    <textarea-copyable :value="cleanJson" language="json" :follow-height-of="inputElement" />
+  </n-form-item>
+</template>
+
+<script setup lang="ts">
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
+import { useValidation } from '@/composable/validation';
+import { withDefaultOnError } from '@/utils/defaults';
+import JSON5 from 'json5';
+import { computed, ref } from 'vue';
+
+const inputElement = ref<HTMLElement>();
+
+const rawJson = ref('{\n\t"hello": [\n\t\t"world"\n\t]\n}');
+const cleanJson = computed(() => withDefaultOnError(() => JSON.stringify(JSON5.parse(rawJson.value), null, 0), ''));
+
+const rawJsonValidation = useValidation({
+  source: rawJson,
+  rules: [
+    {
+      validator: (v) => v === '' || JSON5.parse(v),
+      message: 'Provided JSON is not valid.',
+    },
+  ],
+});
+</script>
+
+<style lang="less" scoped>
+.result-card {
+  position: relative;
+
+  .copy-button {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+  }
+}
+</style>
--- a/src/tools/jwt-parser/index.ts
+++ b/src/tools/jwt-parser/index.ts
@@ -0,0 +1,27 @@
+import { Key } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'JWT parser',
+  path: '/jwt-parser',
+  description: 'Parse and decode your JSON Web Token (jwt) and display its content.',
+  keywords: [
+    'jwt',
+    'parser',
+    'decode',
+    'typ',
+    'alg',
+    'iss',
+    'sub',
+    'aud',
+    'exp',
+    'nbf',
+    'iat',
+    'jti',
+    'json',
+    'web',
+    'token',
+  ],
+  component: () => import('./jwt-parser.vue'),
+  icon: Key,
+});
--- a/src/tools/jwt-parser/jwt-parser.constants.ts
+++ b/src/tools/jwt-parser/jwt-parser.constants.ts
@@ -0,0 +1,92 @@
+// From https://datatracker.ietf.org/doc/html/rfc7518#section-3.1
+export const ALGORITHM_DESCRIPTIONS: { [k: string]: string } = {
+  HS256: 'HMAC using SHA-256',
+  HS384: 'HMAC using SHA-384',
+  HS512: 'HMAC using SHA-512',
+  RS256: 'RSASSA-PKCS1-v1_5 using SHA-256',
+  RS384: 'RSASSA-PKCS1-v1_5 using SHA-384',
+  RS512: 'RSASSA-PKCS1-v1_5 using SHA-512',
+  ES256: 'ECDSA using P-256 and SHA-256',
+  ES384: 'ECDSA using P-384 and SHA-384',
+  ES512: 'ECDSA using P-521 and SHA-512',
+  PS256: 'RSASSA-PSS using SHA-256 and MGF1 with SHA-256',
+  PS384: 'RSASSA-PSS using SHA-384 and MGF1 with SHA-384',
+  PS512: 'RSASSA-PSS using SHA-512 and MGF1 with SHA-512',
+  none: 'No digital signature or MAC performed',
+};
+
+// List extracted from IANA: https://www.iana.org/assignments/jwt/jwt.xhtml
+export const CLAIM_DESCRIPTIONS: Record<string, string> = {
+  typ: 'Type',
+  alg: 'Algorithm',
+  iss: 'Issuer',
+  sub: 'Subject',
+  aud: 'Audience',
+  exp: 'Expiration Time',
+  nbf: 'Not Before',
+  iat: 'Issued At',
+  jti: 'JWT ID',
+  name: 'Full name',
+  given_name: 'Given name(s) or first name(s)',
+  family_name: 'Surname(s) or last name(s)',
+  middle_name: 'Middle name(s)',
+  nickname: 'Casual name',
+  preferred_username: 'Shorthand name by which the End-User wishes to be referred to',
+  profile: 'Profile page URL',
+  picture: 'Profile picture URL',
+  website: 'Web page or blog URL',
+  email: 'Preferred e-mail address',
+  email_verified: 'True if the e-mail address has been verified; otherwise false',
+  gender: 'Gender',
+  birthdate: 'Birthday',
+  zoneinfo: 'Time zone',
+  locale: 'Locale',
+  phone_number: 'Preferred telephone number',
+  phone_number_verified: 'True if the phone number has been verified; otherwise false',
+  address: 'Preferred postal address',
+  updated_at: 'Time the information was last updated',
+  azp: 'Authorized party - the party to which the ID Token was issued',
+  nonce: 'Value used to associate a Client session with an ID Token',
+  auth_time: 'Time when the authentication occurred',
+  at_hash: 'Access Token hash value',
+  c_hash: 'Code hash value',
+  acr: 'Authentication Context Class Reference',
+  amr: 'Authentication Methods References',
+  sub_jwk: 'Public key used to check the signature of an ID Token',
+  cnf: 'Confirmation',
+  sip_from_tag: 'SIP From tag header field parameter value',
+  sip_date: 'SIP Date header field value',
+  sip_callid: 'SIP Call-Id header field value',
+  sip_cseq_num: 'SIP CSeq numeric header field parameter value',
+  sip_via_branch: 'SIP Via branch header field parameter value',
+  orig: 'Originating Identity String',
+  dest: 'Destination Identity String',
+  mky: 'Media Key Fingerprint String',
+  events: 'Security Events',
+  toe: 'Time of Event',
+  txn: 'Transaction Identifier',
+  rph: 'Resource Priority Header Authorization',
+  sid: 'Session ID',
+  vot: 'Vector of Trust value',
+  vtm: 'Vector of Trust trustmark URL',
+  attest: 'Attestation level as defined in SHAKEN framework',
+  origid: 'Originating Identifier as defined in SHAKEN framework',
+  act: 'Actor',
+  scope: 'Scope Values',
+  client_id: 'Client Identifier',
+  may_act: 'Authorized Actor - the party that is authorized to become the actor',
+  jcard: 'jCard data',
+  at_use_nbr: 'Number of API requests for which the access token can be used',
+  div: 'Diverted Target of a Call',
+  opt: 'Original PASSporT (in Full Form)',
+  vc: 'Verifiable Credential as specified in the W3C Recommendation',
+  vp: 'Verifiable Presentation as specified in the W3C Recommendation',
+  sph: 'SIP Priority header field',
+  ace_profile: 'ACE profile a token is supposed to be used with.',
+  cnonce: 'Client nonce',
+  exi: 'Expires in',
+  roles: 'Roles',
+  groups: 'Groups',
+  entitlements: 'Entitlements',
+  token_introspection: 'Token introspection response',
+};
--- a/src/tools/jwt-parser/jwt-parser.service.ts
+++ b/src/tools/jwt-parser/jwt-parser.service.ts
@@ -0,0 +1,46 @@
+import jwtDecode, { type JwtHeader, type JwtPayload } from 'jwt-decode';
+import _ from 'lodash';
+import { match } from 'ts-pattern';
+import { ALGORITHM_DESCRIPTIONS, CLAIM_DESCRIPTIONS } from './jwt-parser.constants';
+
+export { decodeJwt };
+
+function decodeJwt({ jwt }: { jwt: string }) {
+  const rawHeader = jwtDecode<JwtHeader>(jwt, { header: true });
+  const rawPayload = jwtDecode<JwtPayload>(jwt);
+
+  const header = _.map(rawHeader, (value, claim) => parseClaims({ claim, value }));
+  const payload = _.map(rawPayload, (value, claim) => parseClaims({ claim, value }));
+
+  return {
+    header,
+    payload,
+  };
+}
+
+function parseClaims({ claim, value }: { claim: string; value: unknown }) {
+  const claimDescription = CLAIM_DESCRIPTIONS[claim];
+  const formattedValue = _.isPlainObject(value) ? JSON.stringify(value, null, 3) : _.toString(value);
+  const friendlyValue = getFriendlyValue({ claim, value });
+
+  return {
+    value: formattedValue,
+    friendlyValue,
+    claim,
+    claimDescription,
+  };
+}
+
+function getFriendlyValue({ claim, value }: { claim: string; value: unknown }) {
+  return match(claim)
+    .with('exp', 'nbf', 'iat', () => dateFormatter(value))
+    .with('alg', () => (_.isString(value) ? ALGORITHM_DESCRIPTIONS[value] : undefined))
+    .otherwise(() => undefined);
+}
+
+const dateFormatter = (value: unknown) => {
+  if (_.isNil(value)) return undefined;
+
+  const date = new Date(Number(value) * 1000);
+  return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
+};
--- a/src/tools/jwt-parser/jwt-parser.vue
+++ b/src/tools/jwt-parser/jwt-parser.vue
@@ -0,0 +1,70 @@
+<template>
+  <n-card>
+    <n-form-item label="JWT to decode" :feedback="validation.message" :validation-status="validation.status">
+      <n-input v-model:value="rawJwt" type="textarea" placeholder="Put your token here..." rows="5" />
+    </n-form-item>
+
+    <n-table v-if="validation.isValid">
+      <tbody>
+        <template v-for="section of sections" :key="section.key">
+          <th colspan="2" class="table-header">{{ section.title }}</th>
+          <tr v-for="{ claim, claimDescription, friendlyValue, value } in decodedJWT[section.key]" :key="claim + value">
+            <td class="claims">
+              <n-space>
+                <n-text strong>{{ claim }}</n-text>
+                <template v-if="claimDescription">
+                  <n-text depth="3">({{ claimDescription }})</n-text>
+                </template>
+              </n-space>
+            </td>
+            <td>
+              <n-space>
+                <n-text>{{ value }}</n-text>
+                <template v-if="friendlyValue">
+                  <n-text depth="3">({{ friendlyValue }})</n-text>
+                </template>
+              </n-space>
+            </td>
+          </tr>
+        </template>
+      </tbody>
+    </n-table>
+  </n-card>
+</template>
+
+<script setup lang="ts">
+import { useValidation } from '@/composable/validation';
+import { isNotThrowing } from '@/utils/boolean';
+import { withDefaultOnError } from '@/utils/defaults';
+import { computed, ref } from 'vue';
+import { decodeJwt } from './jwt-parser.service';
+
+const rawJwt = ref(
+  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c',
+);
+
+const decodedJWT = computed(() =>
+  withDefaultOnError(() => decodeJwt({ jwt: rawJwt.value }), { header: [], payload: [] }),
+);
+
+const sections = [
+  { key: 'header', title: 'Header' },
+  { key: 'payload', title: 'Payload' },
+] as const;
+
+const validation = useValidation({
+  source: rawJwt,
+  rules: [
+    {
+      validator: (value) => value.length > 0 && isNotThrowing(() => decodeJwt({ jwt: rawJwt.value })),
+      message: 'Invalid JWT',
+    },
+  ],
+});
+</script>
+
+<style lang="less" scoped>
+.table-header {
+  text-align: center;
+}
+</style>
--- a/src/tools/keycode-info/index.ts
+++ b/src/tools/keycode-info/index.ts
@@ -0,0 +1,26 @@
+import { Keyboard } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Keycode info',
+  path: '/keycode-info',
+  description: 'Find the javascript keycode, code, location and modifiers of any pressed key.',
+  keywords: [
+    'keycode',
+    'info',
+    'code',
+    'javascript',
+    'event',
+    'keycodes',
+    'which',
+    'keyboard',
+    'press',
+    'modifier',
+    'alt',
+    'ctrl',
+    'meta',
+    'shift',
+  ],
+  component: () => import('./keycode-info.vue'),
+  icon: Keyboard,
+});
--- a/src/tools/keycode-info/keycode-info.vue
+++ b/src/tools/keycode-info/keycode-info.vue
@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <n-card style="text-align: center; padding: 40px 0; margin-bottom: 26px">
+      <n-h2 v-if="event">{{ event.key }}</n-h2>
+      <n-text strong depth="3">Press the key on your keyboard you want to get info about this key</n-text>
+    </n-card>
+
+    <n-input-group v-for="({ label, value, placeholder }, i) of fields" :key="i" style="margin-bottom: 5px">
+      <n-input-group-label style="flex: 0 0 150px"> {{ label }} </n-input-group-label>
+      <input-copyable :value="value" readonly :placeholder="placeholder" />
+    </n-input-group>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useEventListener } from '@vueuse/core';
+import { computed, ref } from 'vue';
+import InputCopyable from '../../components/InputCopyable.vue';
+
+const event = ref<KeyboardEvent>();
+
+useEventListener(document, 'keydown', (e) => {
+  event.value = e;
+});
+
+const fields = computed(() => {
+  if (!event.value) return [];
+
+  return [
+    {
+      label: 'Key :',
+      value: event.value.key,
+      placeholder: 'Key name...',
+    },
+    {
+      label: 'Keycode :',
+      value: String(event.value.keyCode),
+      placeholder: 'Keycode...',
+    },
+    {
+      label: 'Code :',
+      value: event.value.code,
+      placeholder: 'Code...',
+    },
+    {
+      label: 'Location :',
+      value: String(event.value.location),
+      placeholder: 'Code...',
+    },
+
+    {
+      label: 'Modifiers :',
+      value: [
+        event.value.metaKey && 'Meta',
+        event.value.shiftKey && 'Shift',
+        event.value.ctrlKey && 'Ctrl',
+        event.value.altKey && 'Alt',
+      ]
+        .filter(Boolean)
+        .join(' + '),
+      placeholder: 'None',
+    },
+  ];
+});
+</script>
+
+<style lang="less" scoped></style>
--- a/src/tools/math-evaluator/math-evaluator.vue
+++ b/src/tools/math-evaluator/math-evaluator.vue
@@ -29,5 +29,3 @@ const expression = ref('');

 const result = computed(() => withDefaultOnError(() => evaluate(expression.value) ?? '', ''));
 </script>
-
-<style lang="less" scoped></style>
--- a/src/tools/meta-tag-generator/og-schemas/twitter.ts
+++ b/src/tools/meta-tag-generator/og-schemas/twitter.ts
@@ -12,19 +12,19 @@ export const twitter: OGSchemaType = {
        { label: 'Player', value: 'player' },
      ],
      label: 'Card type',
-      placeholder: 'The twitter card type...',
+      placeholder: 'The Twitter card type...',
      key: 'twitter:card',
    },
    {
      type: 'input',
      label: 'Site account',
-      placeholder: 'The name of the twitter account of the site (ex: @ittoolsdottech)...',
+      placeholder: 'The name of the Twitter account of the site (ex: @ittoolsdottech)...',
      key: 'twitter:site',
    },
    {
      type: 'input',
      label: 'Creator acc.',
-      placeholder: 'The name of the twitter account of the creator (ex: @cthmsst)...',
+      placeholder: 'The name of the Twitter account of the creator (ex: @cthmsst)...',
      key: 'twitter:creator',
    },
  ],
--- a/src/tools/mime-types/mime-types.vue
+++ b/src/tools/mime-types/mime-types.vue
@@ -95,5 +95,3 @@ const selectedExtension = ref(undefined);

 const mimeTypeFound = computed(() => (selectedExtension.value ? extensionToMimeType[selectedExtension.value] : []));
 </script>
-
-<style lang="less" scoped></style>
--- a/src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue
+++ b/src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue
@@ -84,7 +84,10 @@ const keyUri = computed(() => buildKeyUri({ secret: secret.value }));

 const { qrcode } = useQRCode({
  text: keyUri,
-  color: { background: '#00000000', foreground: computed(() => (styleStore.isDarkTheme ? '#ffffff' : '#000000')) },
+  color: {
+    background: computed(() => (styleStore.isDarkTheme ? '#ffffff' : '#00000000')),
+    foreground: '#000000',
+  },
  options: { width: 210 },
 });

@@ -93,7 +96,7 @@ const { attrs: secretValidationAttrs } = useValidation({
  rules: [
    {
      message: 'Secret should be a base32 string',
-      validator: (value) => value.match(/^[A-Z234567]+$/),
+      validator: (value) => value.toUpperCase().match(/^[A-Z234567]+$/),
    },
    {
      message: 'Please set a secret',
--- a/src/tools/otp-code-generator-and-validator/otp.service.test.ts
+++ b/src/tools/otp-code-generator-and-validator/otp.service.test.ts
@@ -20,12 +20,16 @@ describe('otp functions', () => {
      expect(hexToBytes('0102030405060708090a0b0c0d0e0f')).toEqual([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);
    });
  });
-  describe('base32tohex', () => {
+  describe('base32toHex', () => {
    it('convert a base32 to hex string', () => {
      expect(base32toHex('ABCDEF')).to.eql('00443205');
      expect(base32toHex('7777')).to.eql('ffff0f');
      expect(base32toHex('JBSWY3DPEHPK3PXP')).to.eql('48656c6c6f21deadbeef');
    });
+
+    it('case does not matter', () => {
+      expect(base32toHex('ABC')).to.eql(base32toHex('abc'));
+    });
  });

  describe('generateHOTP', () => {
--- a/src/tools/otp-code-generator-and-validator/otp.service.ts
+++ b/src/tools/otp-code-generator-and-validator/otp.service.ts
@@ -26,6 +26,7 @@ function base32toHex(base32: string) {
  const base32Chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ234567';

  const bits = base32
+    .toUpperCase() // Since base 32, we coerce lowercase to uppercase
    .replace(/=+$/, '')
    .split('')
    .map((value) => base32Chars.indexOf(value).toString(2).padStart(5, '0'))
--- a/src/tools/roman-numeral-converter/roman-numeral-converter.vue
+++ b/src/tools/roman-numeral-converter/roman-numeral-converter.vue
@@ -30,7 +30,7 @@ import { arabicToRoman, romanToArabic } from './roman-numeral-converter.service'
 const inputNumeral = ref(42);
 const outputRoman = computed(() => arabicToRoman(inputNumeral.value));

-const inputRoman = ref('IVX');
+const inputRoman = ref('XLII');
 const outputNumeral = computed(() => romanToArabic(inputRoman.value));

 const { copy: copyRoman } = useCopy({ source: outputRoman, text: 'Roman number copied to the clipboard' });
--- a/src/tools/rsa-key-pair-generator/index.ts
+++ b/src/tools/rsa-key-pair-generator/index.ts
@@ -0,0 +1,11 @@
+import { Certificate } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'RSA key pair generator',
+  path: '/rsa-key-pair-generator',
+  description: 'Generate new random RSA private and public key pem certificates.',
+  keywords: ['rsa', 'key', 'pair', 'generator', 'public', 'private', 'secret', 'ssh', 'pem'],
+  component: () => import('./rsa-key-pair-generator.vue'),
+  icon: Certificate,
+});
--- a/src/tools/rsa-key-pair-generator/rsa-key-pair-generator.service.ts
+++ b/src/tools/rsa-key-pair-generator/rsa-key-pair-generator.service.ts
@@ -0,0 +1,25 @@
+import { pki } from 'node-forge';
+
+export { generateKeyPair };
+
+function generateRawPairs({ bits = 2048 }) {
+  return new Promise<pki.rsa.KeyPair>((resolve, reject) =>
+    pki.rsa.generateKeyPair({ bits }, (err, keyPair) => {
+      if (err) {
+        reject(err);
+        return;
+      }
+
+      resolve(keyPair);
+    }),
+  );
+}
+
+async function generateKeyPair(config: { bits?: number } = {}) {
+  const { privateKey, publicKey } = await generateRawPairs(config);
+
+  return {
+    publicKeyPem: pki.publicKeyToPem(publicKey),
+    privateKeyPem: pki.privateKeyToPem(privateKey),
+  };
+}
--- a/src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue
+++ b/src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue
@@ -0,0 +1,48 @@
+<template>
+  <div style="flex: 0 0 100%">
+    <n-space item-style="flex: 1 1 0" style="margin: 0 auto; max-width: 600px" justify="center">
+      <n-form-item label="Bits :" v-bind="bitsValidationAttrs" label-placement="left" label-width="100">
+        <n-input-number v-model:value="bits" min="256" max="16384" step="8" style="width: 150px" />
+      </n-form-item>
+    </n-space>
+  </div>
+
+  <div>
+    <h3>Public key</h3>
+    <textarea-copyable :value="certs.publicKeyPem" />
+  </div>
+
+  <div>
+    <h3>Private key</h3>
+    <textarea-copyable :value="certs.privateKeyPem" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
+import { ref } from 'vue';
+import { computedAsync } from '@vueuse/core';
+import { withDefaultOnErrorAsync } from '@/utils/defaults';
+import { useValidation } from '@/composable/validation';
+import { generateKeyPair } from './rsa-key-pair-generator.service';
+
+const bits = ref(2048);
+const emptyCerts = { publicKeyPem: '', privateKeyPem: '' };
+
+const { attrs: bitsValidationAttrs } = useValidation({
+  source: bits,
+  rules: [
+    {
+      message: 'Bits should be 256 <= bits <= 16384 and be a multiple of 8',
+      validator: (value) => value >= 256 && value <= 16384 && value % 8 === 0,
+    },
+  ],
+});
+
+const certs = computedAsync(
+  () => withDefaultOnErrorAsync(() => generateKeyPair({ bits: bits.value }), emptyCerts),
+  emptyCerts,
+);
+</script>
+
+<style lang="less" scoped></style>
--- a/src/tools/slugify-string/index.ts
+++ b/src/tools/slugify-string/index.ts
@@ -0,0 +1,11 @@
+import { AbcRound } from '@vicons/material';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Slugify string',
+  path: '/slugify-string',
+  description: 'Make a string url, filename and id safe.',
+  keywords: ['slugify', 'string', 'escape', 'emoji', 'special', 'character', 'space', 'trim'],
+  component: () => import('./slugify-string.vue'),
+  icon: AbcRound,
+});
--- a/src/tools/slugify-string/slugify-string.vue
+++ b/src/tools/slugify-string/slugify-string.vue
@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <n-form-item label="Your string to slugify">
+      <n-input v-model:value="input" type="textarea" placeholder="Put your string here (ex: My file path)"></n-input>
+    </n-form-item>
+
+    <n-form-item label="Your slug">
+      <n-input
+        :value="slug"
+        type="textarea"
+        readonly
+        placeholder="You slug will be generated here (ex: my-file-path)"
+      ></n-input>
+    </n-form-item>
+
+    <n-space justify="center">
+      <n-button secondary :disabled="slug.length === 0" @click="copy">Copy slug</n-button>
+    </n-space>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import slugify from '@sindresorhus/slugify';
+import { withDefaultOnError } from '@/utils/defaults';
+import { useCopy } from '@/composable/copy';
+
+const input = ref('');
+const slug = computed(() => withDefaultOnError(() => slugify(input.value), ''));
+const { copy } = useCopy({ source: slug, text: 'Slug copied to clipboard' });
+</script>
+
+<style lang="less" scoped></style>
--- a/src/tools/temperature-converter/index.ts
+++ b/src/tools/temperature-converter/index.ts
@@ -0,0 +1,24 @@
+import { Temperature } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Temperature converter',
+  path: '/temperature-converter',
+  description:
+    'Temperature degrees conversions for Kelvin, Celsius, Fahrenheit, Rankine, Delisle, Newton, Réaumur and Rømer.',
+  keywords: [
+    'temperature',
+    'converter',
+    'degree',
+    'Kelvin',
+    'Celsius',
+    'Fahrenheit',
+    'Rankine',
+    'Delisle',
+    'Newton',
+    'Réaumur',
+    'Rømer',
+  ],
+  component: () => import('./temperature-converter.vue'),
+  icon: Temperature,
+});
--- a/src/tools/temperature-converter/temperature-converter.models.ts
+++ b/src/tools/temperature-converter/temperature-converter.models.ts
@@ -0,0 +1,20 @@
+export const convertCelsiusToKelvin = (temperature: number) => temperature + 273.15;
+export const convertKelvinToCelsius = (temperature: number) => temperature - 273.15;
+
+export const convertFahrenheitToKelvin = (temperature: number) => (temperature + 459.67) * (5 / 9);
+export const convertKelvinToFahrenheit = (temperature: number) => temperature * (9 / 5) - 459.67;
+
+export const convertRankineToKelvin = (temperature: number) => temperature * (5 / 9);
+export const convertKelvinToRankine = (temperature: number) => temperature * (9 / 5);
+
+export const convertDelisleToKelvin = (temperature: number) => 373.15 - (2 / 3) * temperature;
+export const convertKelvinToDelisle = (temperature: number) => (3 / 2) * (373.15 - temperature);
+
+export const convertNewtonToKelvin = (temperature: number) => temperature * (100 / 33) + 273.15;
+export const convertKelvinToNewton = (temperature: number) => (temperature - 273.15) * (33 / 100);
+
+export const convertReaumurToKelvin = (temperature: number) => temperature * (5 / 4) + 273.15;
+export const convertKelvinToReaumur = (temperature: number) => (temperature - 273.15) * (4 / 5);
+
+export const convertRomerToKelvin = (temperature: number) => (temperature - 7.5) * (40 / 21) + 273.15;
+export const convertKelvinToRomer = (temperature: number) => (temperature - 273.15) * (21 / 40) + 7.5;
--- a/src/tools/temperature-converter/temperature-converter.vue
+++ b/src/tools/temperature-converter/temperature-converter.vue
@@ -0,0 +1,127 @@
+<template>
+  <div>
+    <n-input-group
+      v-for="[key, { title, unit }] in Object.entries(units)"
+      :key="key"
+      style="width: 100%; margin-bottom: 15px"
+    >
+      <n-input-group-label style="width: 100px">
+        {{ title }}
+      </n-input-group-label>
+
+      <n-input-number
+        v-model:value="units[key].ref"
+        style="flex: 1"
+        @update:value="() => update(key as TemperatureScale)"
+      />
+
+      <n-input-group-label style="width: 50px">
+        {{ unit }}
+      </n-input-group-label>
+    </n-input-group>
+  </div>
+</template>
+
+<script setup lang="ts">
+import _ from 'lodash';
+import { reactive } from 'vue';
+import {
+  convertCelsiusToKelvin,
+  convertDelisleToKelvin,
+  convertFahrenheitToKelvin,
+  convertKelvinToCelsius,
+  convertKelvinToDelisle,
+  convertKelvinToFahrenheit,
+  convertKelvinToNewton,
+  convertKelvinToRankine,
+  convertKelvinToReaumur,
+  convertKelvinToRomer,
+  convertNewtonToKelvin,
+  convertRankineToKelvin,
+  convertReaumurToKelvin,
+  convertRomerToKelvin,
+} from './temperature-converter.models';
+
+type TemperatureScale = 'kelvin' | 'celsius' | 'fahrenheit' | 'rankine' | 'delisle' | 'newton' | 'reaumur' | 'romer';
+
+const units = reactive<
+  Record<
+    string | TemperatureScale,
+    { title: string; unit: string; ref: number; toKelvin: (v: number) => number; fromKelvin: (v: number) => number }
+  >
+>({
+  kelvin: {
+    title: 'Kelvin',
+    unit: 'K',
+    ref: 0,
+    toKelvin: _.identity,
+    fromKelvin: _.identity,
+  },
+  celsius: {
+    title: 'Celsius',
+    unit: '°C',
+    ref: 0,
+    toKelvin: convertCelsiusToKelvin,
+    fromKelvin: convertKelvinToCelsius,
+  },
+  fahrenheit: {
+    title: 'Fahrenheit',
+    unit: '°F',
+    ref: 0,
+    toKelvin: convertFahrenheitToKelvin,
+    fromKelvin: convertKelvinToFahrenheit,
+  },
+  rankine: {
+    title: 'Rankine',
+    unit: '°R',
+    ref: 0,
+    toKelvin: convertRankineToKelvin,
+    fromKelvin: convertKelvinToRankine,
+  },
+  delisle: {
+    title: 'Delisle',
+    unit: '°De',
+    ref: 0,
+    toKelvin: convertDelisleToKelvin,
+    fromKelvin: convertKelvinToDelisle,
+  },
+  newton: {
+    title: 'Newton',
+    unit: '°N',
+    ref: 0,
+    toKelvin: convertNewtonToKelvin,
+    fromKelvin: convertKelvinToNewton,
+  },
+  reaumur: {
+    title: 'Réaumur',
+    unit: '°Ré',
+    ref: 0,
+    toKelvin: convertReaumurToKelvin,
+    fromKelvin: convertKelvinToReaumur,
+  },
+  romer: {
+    title: 'Rømer',
+    unit: '°Rø',
+    ref: 0,
+    toKelvin: convertRomerToKelvin,
+    fromKelvin: convertKelvinToRomer,
+  },
+});
+
+function update(key: TemperatureScale) {
+  const { ref: value, toKelvin } = units[key];
+
+  const kelvins = toKelvin(value) ?? 0;
+
+  _.chain(units)
+    .omit(key)
+    .forEach(({ fromKelvin }, index) => {
+      units[index].ref = Math.floor((fromKelvin(kelvins) ?? 0) * 100) / 100;
+    })
+    .value();
+}
+
+update('kelvin');
+</script>
+
+<style lang="less" scoped></style>
--- a/src/tools/text-to-nato-alphabet/index.ts
+++ b/src/tools/text-to-nato-alphabet/index.ts
@@ -0,0 +1,11 @@
+import { Speakerphone } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Text to NATO alphabet',
+  path: '/text-to-nato-alphabet',
+  description: 'Transform text into NATO phonetic alphabet for oral transmission.',
+  keywords: ['string', 'nato', 'alphabet', 'phonetic', 'oral', 'transmission'],
+  component: () => import('./text-to-nato-alphabet.vue'),
+  icon: Speakerphone,
+});
--- a/src/tools/text-to-nato-alphabet/text-to-nato-alphabet.constants.ts
+++ b/src/tools/text-to-nato-alphabet/text-to-nato-alphabet.constants.ts
@@ -0,0 +1,28 @@
+export const natoAlphabet = [
+  'Alpha',
+  'Bravo',
+  'Charlie',
+  'Delta',
+  'Echo',
+  'Foxtrot',
+  'Golf',
+  'Hotel',
+  'India',
+  'Juliet',
+  'Kilo',
+  'Lima',
+  'Mike',
+  'November',
+  'Oscar',
+  'Papa',
+  'Quebec',
+  'Romeo',
+  'Sierra',
+  'Tango',
+  'Uniform',
+  'Victor',
+  'Whiskey',
+  'X-ray',
+  'Yankee',
+  'Zulu',
+];
--- a/src/tools/text-to-nato-alphabet/text-to-nato-alphabet.service.ts
+++ b/src/tools/text-to-nato-alphabet/text-to-nato-alphabet.service.ts
@@ -0,0 +1,19 @@
+import { natoAlphabet } from './text-to-nato-alphabet.constants';
+
+export { textToNatoAlphabet };
+
+function getLetterPositionInAlphabet({ letter }: { letter: string }) {
+  return letter.toLowerCase().charCodeAt(0) - 'a'.charCodeAt(0);
+}
+
+function textToNatoAlphabet({ text }: { text: string }) {
+  return text
+    .split('')
+    .map((character) => {
+      const alphabetIndex = getLetterPositionInAlphabet({ letter: character });
+      const natoWord = natoAlphabet[alphabetIndex];
+
+      return natoWord ?? character;
+    })
+    .join(' ');
+}
--- a/src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue
+++ b/src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue
@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <n-form-item label="Your text to convert to NATO phonetic alphabet">
+      <n-input v-model:value="input" placeholder="Put your text here..." clearable />
+    </n-form-item>
+
+    <n-space v-if="natoText" vertical>
+      <n-text>Your text in NATO phonetic alphabet</n-text>
+      <n-card>
+        {{ natoText }}
+      </n-card>
+
+      <n-space justify="center">
+        <n-button secondary autofocus @click="copy"> Copy NATO string </n-button>
+      </n-space>
+    </n-space>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useCopy } from '@/composable/copy';
+import { computed, ref } from 'vue';
+import { textToNatoAlphabet } from './text-to-nato-alphabet.service';
+
+const input = ref('');
+const natoText = computed(() => textToNatoAlphabet({ text: input.value }));
+const { copy } = useCopy({ source: natoText, text: 'NATO alphabet string copied.' });
+</script>
+
+<style lang="less" scoped></style>
--- a/src/tools/token-generator/token-generator.tool.vue
+++ b/src/tools/token-generator/token-generator.tool.vue
@@ -54,18 +54,19 @@
 <script setup lang="ts">
 import { useCopy } from '@/composable/copy';
 import { ref, watch } from 'vue';
+import { useQueryParam } from '@/composable/queryParams';
 import { createToken } from './token-generator.service';

 const token = ref('');
-const length = ref(64);
+const length = useQueryParam({ name: 'length', defaultValue: 64 });
 const { copy } = useCopy({ source: token, text: 'Token copied to the clipboard' });

-const withUppercase = ref(true);
-const withLowercase = ref(true);
-const withNumbers = ref(true);
-const withSymbols = ref(false);
+const withUppercase = useQueryParam({ name: 'uppercase', defaultValue: true });
+const withLowercase = useQueryParam({ name: 'lowercase', defaultValue: true });
+const withNumbers = useQueryParam({ name: 'numbers', defaultValue: true });
+const withSymbols = useQueryParam({ name: 'symbols', defaultValue: false });

-watch([withUppercase, withLowercase, withNumbers, withSymbols, length], refreshToken);
+watch([withUppercase, withLowercase, withNumbers, withSymbols, length], refreshToken, { immediate: true });

 function refreshToken() {
  token.value = createToken({
@@ -76,6 +77,4 @@ function refreshToken() {
    withSymbols: withSymbols.value,
  });
 }
-
-refreshToken();
 </script>
--- a/src/tools/tool.ts
+++ b/src/tools/tool.ts
@@ -1,27 +1,10 @@
 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[];
-}
+import type { Tool } from './tools.types';

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

 export function defineTool(
-  tool: WithOptional<ITool, 'isNew'>,
+  tool: WithOptional<Tool, 'isNew'>,
  { newTools }: { newTools: string[] } = { newTools: config.tools.newTools },
 ) {
  const isNew = newTools.includes(tool.name);
--- a/src/tools/tools.store.ts
+++ b/src/tools/tools.store.ts
@@ -0,0 +1,44 @@
+import { get, useStorage, type MaybeRef } from '@vueuse/core';
+import { defineStore } from 'pinia';
+import type { Ref } from 'vue';
+import { toolsWithCategory } from './index';
+import type { Tool, ToolWithCategory } from './tools.types';
+
+export const useToolStore = defineStore('tools', {
+  state: () => ({
+    favoriteToolsName: useStorage('favoriteToolsName', []) as Ref<string[]>,
+  }),
+  getters: {
+    favoriteTools(state) {
+      return state.favoriteToolsName
+        .map((favoriteName) => toolsWithCategory.find(({ name }) => name === favoriteName))
+        .filter(Boolean) as ToolWithCategory[]; // cast because .filter(Boolean) does not remove undefined from type
+    },
+
+    notFavoriteTools(state): ToolWithCategory[] {
+      return toolsWithCategory.filter((tool) => !state.favoriteToolsName.includes(tool.name));
+    },
+
+    tools(): ToolWithCategory[] {
+      return toolsWithCategory;
+    },
+
+    newTools(): ToolWithCategory[] {
+      return this.tools.filter(({ isNew }) => isNew);
+    },
+  },
+
+  actions: {
+    addToolToFavorites({ tool }: { tool: MaybeRef<Tool> }) {
+      this.favoriteToolsName.push(get(tool).name);
+    },
+
+    removeToolFromFavorites({ tool }: { tool: MaybeRef<Tool> }) {
+      this.favoriteToolsName = this.favoriteToolsName.filter((name) => get(tool).name !== name);
+    },
+
+    isToolFavorite({ tool }: { tool: MaybeRef<Tool> }) {
+      return this.favoriteToolsName.includes(get(tool).name);
+    },
+  },
+});
--- a/src/tools/tools.types.ts
+++ b/src/tools/tools.types.ts
@@ -0,0 +1,19 @@
+import type { Component } from 'vue';
+
+export type Tool = {
+  name: string;
+  path: string;
+  description: string;
+  keywords: string[];
+  component: () => Promise<Component>;
+  icon: Component;
+  redirectFrom?: string[];
+  isNew: boolean;
+};
+
+export type ToolCategory = {
+  name: string;
+  components: Tool[];
+};
+
+export type ToolWithCategory = Tool & { category: string };
--- a/src/tools/uuid-generator/uuid-generator.vue
+++ b/src/tools/uuid-generator/uuid-generator.vue
@@ -32,8 +32,9 @@
 import { useCopy } from '@/composable/copy';
 import { ref, watch } from 'vue';
 import { v4 as generateUUID } from 'uuid';
+import { useQueryParam } from '@/composable/queryParams';

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

 const uuids = ref('');

--- a/src/utils/defaults.ts
+++ b/src/utils/defaults.ts
@@ -1,4 +1,4 @@
-export { withDefaultOnError };
+export { withDefaultOnError, withDefaultOnErrorAsync };

 function withDefaultOnError<A, B>(cb: () => A, defaultValue: B): A | B {
  try {
@@ -7,3 +7,11 @@ function withDefaultOnError<A, B>(cb: () => A, defaultValue: B): A | B {
    return defaultValue;
  }
 }
+
+async function withDefaultOnErrorAsync<A, B>(cb: () => A, defaultValue: B): Promise<Awaited<A> | B> {
+  try {
+    return await cb();
+  } catch (_) {
+    return defaultValue;
+  }
+}
--- a/src/utils/error.test.ts
+++ b/src/utils/error.test.ts
@@ -0,0 +1,29 @@
+import { describe, expect, it } from 'vitest';
+import { getErrorMessageIfThrows } from './error';
+
+describe('error util', () => {
+  describe('getErrorMessageIfThrows', () => {
+    it('get an error message if the callback throws, undefined instead', () => {
+      expect(
+        getErrorMessageIfThrows(() => {
+          throw 'message';
+        }),
+      ).to.equal('message');
+
+      expect(
+        getErrorMessageIfThrows(() => {
+          throw new Error('message');
+        }),
+      ).to.equal('message');
+
+      expect(
+        getErrorMessageIfThrows(() => {
+          throw { message: 'message' };
+        }),
+      ).to.equal('message');
+
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      expect(getErrorMessageIfThrows(() => {})).to.equal(undefined);
+    });
+  });
+});
--- a/src/utils/error.ts
+++ b/src/utils/error.ts
@@ -0,0 +1,24 @@
+import _ from 'lodash';
+
+export { getErrorMessageIfThrows };
+
+function getErrorMessageIfThrows(cb: () => unknown) {
+  try {
+    cb();
+    return undefined;
+  } catch (err) {
+    if (_.isString(err)) {
+      return err;
+    }
+
+    if (_.isError(err)) {
+      return err.message;
+    }
+
+    if (_.isObject(err) && _.has(err, 'message')) {
+      return (err as { message: string }).message;
+    }
+
+    return 'An error as occurred.';
+  }
+}
Author	SHA1	Message	Date
Corentin Thomasset	55d2a4d7af	feat(new-tool): ed25519 key pair generator	2023-03-27 00:01:46 +02:00
Corentin Thomasset	7c40539ef9	refactor(otp-generator): coerce lowercase secret characters to uppercase	2023-03-26 22:43:56 +02:00
Corentin Thomasset	f3b1863f09	feat(new-tool): html wysiwyg editor	2023-03-26 20:21:00 +02:00
Corentin Thomasset	b1d6bfd2dc	refactor(otp-generator): no more barcode color invertion	2023-03-26 16:15:37 +02:00
Corentin Thomasset	8787ce72ab	fix(roman-converter): replaced incorrect default value	2023-03-24 18:35:37 +01:00
Corentin Thomasset	dab8d63390	refactor(readme): better headings levels	2023-03-24 08:42:28 +01:00
Corentin Thomasset	96aaa35ea2	docs(docker): added self hosting command in README	2023-03-23 22:47:14 +01:00
Benny	519b169336	chore(docker): arm64 and amd64 as supported platform (#271 )	2023-03-23 21:48:07 +01:00
Corentin Thomasset	3bc1f0d1fa	chore(docker): it-tools docker container	2023-03-23 18:54:51 +01:00
Corentin Thomasset	b519cc9574	chore(deps): updated dependencies versions	2023-03-19 11:59:43 +01:00
Corentin Thomasset	30e9149d61	feat(new-tool): RSA key pair generator	2023-03-10 18:16:55 +01:00
marvin-j97	7958e2e075	refactor(branding): correct branding for twitter & github (#268 )	2023-03-08 18:09:53 +01:00
Corentin Thomasset	61024279b5	fix(about): correct git branch in package.json url	2023-03-08 13:48:52 +01:00
Corentin Thomasset	ad202bd372	revert(pwa): fallback to autoUpdate	2023-03-01 23:35:17 +01:00
Corentin Thomasset	400654b6b1	chore(pwa): close update notification on update	2023-03-01 23:24:17 +01:00
Corentin Thomasset	3351b70c1a	refactor(sponsor): updated support link to buy me a coffe	2023-03-01 22:15:51 +01:00
Corentin Thomasset	53ce079dff	refactor(pwa): prompt for pwa update	2023-03-01 22:00:29 +01:00
Corentin Thomasset	a771346250	refactor(style): improved dark mode colors	2023-02-21 23:14:27 +01:00
Corentin Thomasset	a312dedf65	fix(jwt-parser): prevent [object Object] value	2023-02-21 22:52:08 +01:00
Corentin Thomasset	0ddf18f4b5	feat(new-tool): String to NATO alphabet	2023-02-15 00:45:20 +01:00
Corentin Thomasset	9634f5d9a8	fix(case-converter): allowed diacritics	2023-02-10 22:59:44 +01:00
Corentin Thomasset	e6c0445684	fix(case-converter): allowed diacritics	2023-02-10 22:53:10 +01:00
Corentin Thomasset	32f87f3fca	refactor(tool-card): enforce description height	2023-02-10 22:20:50 +01:00
Corentin Thomasset	a3b1cb5737	refactor(tool-card): enforce description height	2023-02-10 22:13:08 +01:00
Corentin Thomasset	6fe4b5ac60	feat(new-tool): slugify string	2023-02-10 22:06:32 +01:00
Corentin Thomasset	1a3f0a135d	refactor(keycode-info): wording	2023-02-06 23:26:40 +01:00
Corentin Thomasset	072083832d	chore(release): 2.19.0	2023-02-06 23:14:52 +01:00
Corentin Thomasset	c934c4e50c	feat(new-tool): keycode info	2023-02-06 23:13:20 +01:00
Corentin Thomasset	4a5734d4a3	chore(release): 2.18.0	2023-02-04 09:59:56 +01:00
Tsonglew	f708f5091e	feat(new-tool): json minify (#265 ) Co-authored-by: Corentin THOMASSET <corentin.thomasset74@gmail.com>	2023-02-04 09:56:17 +01:00
Corentin Thomasset	db817a2459	refactor(tools): config in query params	2023-01-28 21:06:16 +01:00
Corentin Thomasset	119041c185	chore(release): 2.17.0	2023-01-13 18:27:39 +01:00
Corentin Thomasset	4607837f9a	feat(new-tool): temperature converter	2023-01-13 18:26:28 +01:00
Corentin Thomasset	f52f7a845c	refactor(jwt-parser): simplified code	2023-01-13 14:02:44 +01:00
bastantoine	acc7f0a586	feat(new-tool): jwt parser (#262 ) * npm install jwt-decode * added base tool structure * added function to decode JWT and display header and payload * use a table to display the data * show human readable values * added switch to toggle display of parsed values * lint * replaced basic package-lock.json with pnpm-lock.json * change the icon of the tool * simplify return * use camelCase * added description of the tool * always parse the values * use camelCase...	2022-12-27 09:38:35 +01:00
Corentin Thomasset	ebb7301a98	chore(release): 2.16.0	2022-12-21 21:15:16 +01:00
Corentin Thomasset	def60e7248	refactor(tracker): better tracker injection	2022-12-21 21:02:57 +01:00
Corentin Thomasset	bf88836dbe	feat(search-bar): use cmd + k to focus on mac	2022-12-21 00:21:12 +01:00
Corentin Thomasset	bfc2e24bbf	feat(tracker): added actions monitoring	2022-12-21 00:03:31 +01:00
Corentin Thomasset	40872859a5	refactor(clean): removed unused import	2022-12-20 21:15:00 +01:00
Corentin Thomasset	cf723f144e	refactor(clean): removed empty style tag	2022-12-20 21:14:40 +01:00
Corentin Thomasset	7f964941d3	chore(docs): updated readme	2022-12-20 20:57:24 +01:00
Corentin Thomasset	af075dcccc	feat(tool): improved favorite tool management	2022-12-17 15:33:52 +01:00
Corentin Thomasset	274ff02b54	chore(git): added .env to gitignore	2022-12-17 11:42:47 +01:00
Corentin Thomasset	679dd1c1f6	refactor(menu): improve support button	2022-12-17 01:30:27 +01:00
Corentin Thomasset	4cd809bd0c	feat(tools): added favorite tool handling	2022-12-17 01:30:02 +01:00
Corentin Thomasset	8d09086e78	chore(release): 2.15.0	2022-12-16 21:59:47 +01:00
Corentin Thomasset	acf8bc11db	fix(tool-card): correct text color on light mode for card description	2022-12-16 21:57:23 +01:00
Corentin Thomasset	71e98e93e5	feat(search-bar): better search back result	2022-12-16 21:44:54 +01:00
Corentin Thomasset	1b5d4e72bd	refactor(search-bar): improved tool fuzzy search	2022-12-16 18:10:50 +01:00
Corentin Thomasset	8476cf319b	fix(integer-base-converter): handle non-decimal char and better error message	2022-12-07 21:52:24 +01:00