refactor(home): improved landing page ui

.eslintrc.cjs

@@ -7,23 +7,29 @@ module.exports = {
     'plugin:vue/vue3-essential',
     'eslint:recommended',
     'plugin:vue/vue3-recommended',
-    'plugin:vue/vue3-recommended',
     '@vue/eslint-config-typescript/recommended',
     '@vue/eslint-config-prettier',
+    'plugin:import/recommended',
   ],
+
+  settings: {
+    'import/resolver': { typescript: { project: './tsconfig.app.json' } },
+  },
   env: {
     'vue/setup-compiler-macros': true,
   },
   rules: {
     'vue/multi-word-component-names': ['off'],
-    'prettier/prettier': [
+    'prettier/prettier': ['error'],
+    'import/no-duplicates': ['error', { considerQueryString: true }],
+    'import/order': ['error', { groups: [['builtin', 'external', 'internal']] }],
+    'import/extensions': [
       'error',
+      'ignorePackages',
       {
-        singleQuote: true,
+        js: 'never',
-        semi: true,
+        ts: 'never',
-        tabWidth: 2,
+        tsx: 'never',
-        trailingComma: 'all',
-        printWidth: 120,
       },
     ],
   },

.github/workflows/ci.yml

@@ -7,32 +7,21 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - name: Checkout
+      - uses: actions/checkout@v3
-        uses: actions/checkout@master
+      - run: corepack enable
-        with:
+      - uses: actions/setup-node@v3
-          fetch-depth: 0
-
-      - name: Setup node env
-        uses: actions/setup-node@v3.0.0
         with:
           node-version: 16
-
+          cache: 'pnpm'
-      - name: Cache node_modules
-        uses: actions/cache@v2
-        with:
-          path: ~/.npm
-          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: |
-            ${{ runner.os }}-node-
 
       - name: Install dependencies
-        run: npm ci
+        run: pnpm i
 
       - name: Run linters
-        run: npm run lint
+        run: pnpm lint
 
       - name: Run unit test
-        run: npm run test
+        run: pnpm test
 
       - name: Build the app
-        run: npm run build
+        run: pnpm build

.gitignore

@@ -26,3 +26,5 @@ coverage
 *.njsproj
 *.sln
 *.sw?
+
+.env

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "singleQuote": true,
+  "semi": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "printWidth": 120
+}

CHANGELOG.md

@@ -2,6 +2,158 @@
 
 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.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)
+
+
+### Features
+
+* **new-tool:** chmod calculator ([35b5187](https://github.com/CorentinTh/it-tools/commit/35b518711938c2bc88f35d104bb35d9956f0c267))
+
+## [2.13.0](https://github.com/CorentinTh/it-tools/compare/v2.11.0...v2.13.0) (2022-11-14)
+
+
+### Features
+
+* **config:** added tsx to allowed extension ([ea5e7a7](https://github.com/CorentinTh/it-tools/commit/ea5e7a7fc7df1a3a912193912a6ab80a8a36a256))
+* **date-converter:** added mongodb objectID format ([4ef2588](https://github.com/CorentinTh/it-tools/commit/4ef25887b9d874b8789bf8dbabd8aab92b4b1b03))
+* **new-tool:** added otp generator ([5f16885](https://github.com/CorentinTh/it-tools/commit/5f168859238e9c3a8b8bbaf6b550c4b9bd163e00))
+* **new-tool:** mime type to extension converter ([7c9b8ac](https://github.com/CorentinTh/it-tools/commit/7c9b8ac178967151a4f921ac26e8c2fe8d23b886))
+
+
+### Bug Fixes
+
+* **ui:** remove icon transparency overlap ([35a3760](https://github.com/CorentinTh/it-tools/commit/35a376077116dd65b21f9a0786d2ecfc14db6051))
+
+
+### Refactors
+
+* **otp-generator:** changed url ([7f22995](https://github.com/CorentinTh/it-tools/commit/7f229959d64b7a932f32753e3838d87a819a9192))
+* token generator can use a custom alphabet ([83da6b7](https://github.com/CorentinTh/it-tools/commit/83da6b7ee9db29e40faf288f9627257aa7124038))
+* **ui:** change sponsor button location and caption ([5d8f46a](https://github.com/CorentinTh/it-tools/commit/5d8f46abf8d5a10cc4650efc87b12a9a6c537fe5))
+* **useQRCode:** switched args to MaybeRef ([7de6c86](https://github.com/CorentinTh/it-tools/commit/7de6c86f9ead8d7315614cc508dfee4fed90e9c2))
+
+## [2.12.0](https://github.com/CorentinTh/it-tools/compare/v2.10.3...v2.12.0) (2022-08-23)
+
+
+### Features
+
+* added colored share card ([ab7483b](https://github.com/CorentinTh/it-tools/commit/ab7483b5c2bd5aee1b8b609597c22b7b7b55606d))
+* **config:** added tsx to allowed extension ([741a3c2](https://github.com/CorentinTh/it-tools/commit/741a3c25a915d8296987b23bda03f2b664d51ba6))
+* **new-tool:** added otp generator ([cc6070a](https://github.com/CorentinTh/it-tools/commit/cc6070a16655bce9de90517bdda3bf6224ba139d))
+* **new-tool:** meta tag generator ([164e32b](https://github.com/CorentinTh/it-tools/commit/164e32b4428b8dfaaddcefa06b767a8af94573a9))
+
+
+### Bug Fixes
+
+* **deps:** added missing optional deps ([4975590](https://github.com/CorentinTh/it-tools/commit/49755909bdaea9399e51b67fbd1a6d071acd3182))
+* removed colored card border ([7c449f4](https://github.com/CorentinTh/it-tools/commit/7c449f4f2d491ce58726c5419a74dc295fa92905))
+
+
+### Refactors
+
+* **colored-card:** added transition on like hover ([da17696](https://github.com/CorentinTh/it-tools/commit/da17696293270005b1b7ec4aafc0df7496f602c7))
+* **share:** updated share meta ([5222bd5](https://github.com/CorentinTh/it-tools/commit/5222bd5d04ad089ba4cbade399dada55e29dcde5))
+* token generator can use a custom alphabet ([59ec629](https://github.com/CorentinTh/it-tools/commit/59ec6293b65526fe8dc527ac596d0e5af29b1e32))
+* **useQRCode:** switched args to MaybeRef ([a89c9be](https://github.com/CorentinTh/it-tools/commit/a89c9bea42d598f4caba10800becd66a07bbcdc9))
+
+## [2.11.0](https://github.com/CorentinTh/it-tools/compare/v2.10.3...v2.11.0) (2022-08-19)
+
+
+### Features
+
+* added colored share card ([ab7483b](https://github.com/CorentinTh/it-tools/commit/ab7483b5c2bd5aee1b8b609597c22b7b7b55606d))
+* **new-tool:** meta tag generator ([164e32b](https://github.com/CorentinTh/it-tools/commit/164e32b4428b8dfaaddcefa06b767a8af94573a9))
+
+
+### Bug Fixes
+
+* **deps:** added missing optional deps ([4975590](https://github.com/CorentinTh/it-tools/commit/49755909bdaea9399e51b67fbd1a6d071acd3182))
+* removed colored card border ([7c449f4](https://github.com/CorentinTh/it-tools/commit/7c449f4f2d491ce58726c5419a74dc295fa92905))
+
+
+### Refactors
+
+* **colored-card:** added transition on like hover ([da17696](https://github.com/CorentinTh/it-tools/commit/da17696293270005b1b7ec4aafc0df7496f602c7))
+* **share:** updated share meta ([5222bd5](https://github.com/CorentinTh/it-tools/commit/5222bd5d04ad089ba4cbade399dada55e29dcde5))
+
+### [2.10.3](https://github.com/CorentinTh/it-tools/compare/v2.10.2...v2.10.3) (2022-08-14)
+
+
+### Refactors
+
+* **share:** new share banner ([fcf4cfe](https://github.com/CorentinTh/it-tools/commit/fcf4cfe64d4c1c3814137c8ff23b83a1ca0d502d))
+* **share:** updated twitter meta tags ([992f96b](https://github.com/CorentinTh/it-tools/commit/992f96b48a89e2793ccf75fb9e28b2ec7b7f62b6))
+* **validation:** simplified validation management with helpers ([f54223f](https://github.com/CorentinTh/it-tools/commit/f54223fb0aaedbd101b5d3dc4176053533bb936a))
+
+### [2.10.2](https://github.com/CorentinTh/it-tools/compare/v2.10.1...v2.10.2) (2022-08-04)
+
+
+### Refactors
+
+* **dry:** mutualised duplicated code with withDefaultOnError ([f6cd9b7](https://github.com/CorentinTh/it-tools/commit/f6cd9b76d38800e1a1f63d07152fc96cda562795))
+* **home:** removed new tool first sort ([d30cd8a](https://github.com/CorentinTh/it-tools/commit/d30cd8a9abc3298c0a0b05f249e54318bb4537f2))
+* **json-prettifier:** more permissive json parser ([8089c60](https://github.com/CorentinTh/it-tools/commit/8089c60000000c42c821c6586c128d3d2b248885))
+* **lint:** added import rules ([208a373](https://github.com/CorentinTh/it-tools/commit/208a373fd08ac550778745eb6e4536bf02537da7))
+
+### [2.10.1](https://github.com/CorentinTh/it-tools/compare/v2.10.0...v2.10.1) (2022-08-04)
+
+
+### Bug Fixes
+
+* **bip39-generator:** cleared an issue with the mnemonic validation ([ca7cb44](https://github.com/CorentinTh/it-tools/commit/ca7cb4438972ca09f28a6a40332ec94ceaa4aab4))
+* **import:** removed auto added weird .js extension ([fda0b0c](https://github.com/CorentinTh/it-tools/commit/fda0b0ca25c1733542a4e797ac1a2150c546a660))
+
+
+### Refactors
+
+* **base64:** mutualized base64 functions into global utilities ([447bdf2](https://github.com/CorentinTh/it-tools/commit/447bdf2148098d70ba309e13d9b1e846b5064da1))
+* **chronometer:** improved chronometer precision ([e48d60b](https://github.com/CorentinTh/it-tools/commit/e48d60b1ed19279f48441743f7ed69e8fd915011))
+
+## [2.10.0](https://github.com/CorentinTh/it-tools/compare/v2.9.2...v2.10.0) (2022-08-03)
+
+
+### Features
+
+* **hash-text:** digest base selector ([#254](https://github.com/CorentinTh/it-tools/issues/254)) ([422b6eb](https://github.com/CorentinTh/it-tools/commit/422b6eb05a2fb5e7eec816a6bd2d37b53e4a6bdc))
+* **new-tool:** an svg placeholder image generator ([129f74c](https://github.com/CorentinTh/it-tools/commit/129f74c371eaf09fdc3a19afb709cee40b7aaf7f))
+* **new-tool:** hmac generator ([1bc6380](https://github.com/CorentinTh/it-tools/commit/1bc6380c6fdd7a9b500422a54bc508ab5557eb46))
+
+
+### Bug Fixes
+
+* **base64-to-string:** prevent validation error ([8a9e788](https://github.com/CorentinTh/it-tools/commit/8a9e7888dec41364c8c17b1234adcdc0616612b0))
+* **bip39-generator:** typo in validation message ([7570ad9](https://github.com/CorentinTh/it-tools/commit/7570ad965602233f860b9e03177a5b9dacf1b034))
+* **eta-calculator:** clamp inputs ([#249](https://github.com/CorentinTh/it-tools/issues/249)) ([531a25c](https://github.com/CorentinTh/it-tools/commit/531a25c1c4892835633ba5635c6ee48e1fbef31c))
+* **wording:** removed spaces before ponctuation ([#252](https://github.com/CorentinTh/it-tools/issues/252)) ([5f03619](https://github.com/CorentinTh/it-tools/commit/5f03619ab44c0b35455c46698ec37d79e87555b5))
+
+
+### Refactors
+
+* **base64-to-file:** clean validation to convert base64 to file ([750a76b](https://github.com/CorentinTh/it-tools/commit/750a76b00fb79c0e9c2851c112141158ee0ffab1))
+* **display:** mutualized code display ([0be33fb](https://github.com/CorentinTh/it-tools/commit/0be33fb337e8d82474922c0fdf9555aa328cd729))
+* **lint:** externalization of prettier for simpler IDE support ([02c4963](https://github.com/CorentinTh/it-tools/commit/02c49635315661ca08deb0859c5ba33113368b9b))
+* **validation:** simplified validation system ([77b5b0c](https://github.com/CorentinTh/it-tools/commit/77b5b0cab50a05dcb419ce87d74517d82e7cd2c0))
+
 ### [2.9.2](https://github.com/CorentinTh/it-tools/compare/v2.9.1...v2.9.2) (2022-07-28)
 
 

index.html

@@ -31,17 +31,19 @@
       property="og:description"
       content="Collection of handy online tools for developers, with great UX. IT Tools is a free and open-source collection of handy online tools for developers & people working in IT."
     />
-    <meta property="og:image" content="/banner.png" />
+    <meta property="og:image" content="https://it-tools.tech/banner.png?v=2" />
 
     <meta name="twitter:card" content="summary_large_image" />
-    <meta property="twitter:domain" content="it-tools.tech" />
+    <meta name="twitter:site" content="@ittoolsdottech" />
-    <meta property="twitter:url" content="https://it-tools.tech/" />
+    <meta name="twitter:creator" content="@cthmsst" />
+
     <meta name="twitter:title" content="IT Tools - Handy online tools for developers" />
     <meta
       name="twitter:description"
       content="Collection of handy online tools for developers, with great UX. IT Tools is a free and open-source collection of handy online tools for developers & people working in IT."
     />
-    <meta name="twitter:image" content="/banner.png" />
+    <meta name="twitter:image" content="https://it-tools.tech/banner.png?v=2" />
+    <meta name="twitter:image:alt" content="IT Tools - Handy online tools for developers" />
   </head>
   <body>
     <div id="app"></div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "it-tools",
-  "version": "2.9.2",
+  "version": "2.15.0",
   "description": "Collection of handy online tools for developers, with great UX. ",
   "keywords": [
     "productivity",
@@ -32,62 +32,71 @@
   },
   "dependencies": {
     "@it-tools/bip39": "^0.0.4",
+    "@it-tools/oggen": "^1.3.0",
     "@vicons/material": "^0.12.0",
     "@vicons/tabler": "^0.12.0",
-    "@vueuse/core": "^8.2.1",
+    "@vueuse/core": "^8.9.4",
-    "@vueuse/head": "^0.7.5",
+    "@vueuse/head": "^0.7.13",
     "bcryptjs": "^2.4.3",
     "change-case": "^4.1.2",
-    "colord": "^2.9.2",
+    "colord": "^2.9.3",
     "cron-validator": "^1.3.1",
-    "cronstrue": "^2.2.0",
+    "cronstrue": "^2.15.0",
     "crypto-js": "^4.1.1",
-    "date-fns": "^2.28.0",
+    "date-fns": "^2.29.3",
     "figue": "^1.2.0",
-    "highlight.js": "^11.5.1",
+    "fuse.js": "^6.6.2",
+    "highlight.js": "^11.6.0",
+    "json5": "^2.2.1",
     "lodash": "^4.17.21",
-    "mathjs": "^10.6.0",
+    "mathjs": "^10.6.4",
     "mime-types": "^2.1.35",
-    "naive-ui": "^2.31.0",
+    "naive-ui": "^2.33.5",
-    "pinia": "^2.0.11",
+    "pinia": "^2.0.23",
-    "plausible-tracker": "^0.3.5",
+    "plausible-tracker": "^0.3.8",
-    "qrcode": "^1.5.0",
+    "qrcode": "^1.5.1",
     "randombytes": "^2.1.0",
     "sql-formatter": "^8.2.0",
     "uuid": "^8.3.2",
-    "vue": "^3.2.31",
+    "vue": "^3.2.45",
-    "vue-router": "^4.0.12"
+    "vue-router": "^4.1.6"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "^1.1.0",
+    "@rushstack/eslint-patch": "^1.2.0",
     "@types/bcryptjs": "^2.4.2",
     "@types/crypto-js": "^4.1.1",
-    "@types/jsdom": "^16.2.14",
+    "@types/jsdom": "^16.2.15",
+    "@types/lodash": "^4.14.188",
     "@types/mime-types": "^2.1.1",
-    "@types/node": "^16.11.25",
+    "@types/node": "^16.18.3",
-    "@types/qrcode": "^1.4.2",
+    "@types/qrcode": "^1.5.0",
     "@types/randombytes": "^2.0.0",
     "@types/uuid": "^8.3.4",
-    "@vitejs/plugin-vue": "^2.2.2",
+    "@typescript-eslint/parser": "^5.42.1",
-    "@vitejs/plugin-vue-jsx": "^1.3.7",
+    "@vitejs/plugin-vue": "^2.3.4",
+    "@vitejs/plugin-vue-jsx": "^1.3.10",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^10.0.0",
-    "@vue/test-utils": "^2.0.0-rc.18",
+    "@vue/test-utils": "^2.2.2",
     "@vue/tsconfig": "^0.1.3",
-    "c8": "^7.11.0",
+    "c8": "^7.12.0",
-    "eslint": "^8.5.0",
+    "eslint": "^8.27.0",
-    "eslint-plugin-vue": "^8.2.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-import-resolver-typescript": "^3.5.2",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-vue": "^8.7.1",
     "jsdom": "^19.0.0",
-    "less": "^4.1.2",
+    "less": "^4.1.3",
-    "prettier": "^2.6.2",
+    "prettier": "^2.7.1",
-    "standard-version": "^9.3.2",
+    "standard-version": "^9.5.0",
     "start-server-and-test": "^1.14.0",
     "typescript": "~4.5.5",
-    "vite": "^2.9.1",
+    "vite": "^2.9.15",
     "vite-plugin-md": "^0.12.4",
     "vite-plugin-pwa": "^0.11.13",
-    "vite-svg-loader": "^3.2.0",
+    "vite-svg-loader": "^3.6.0",
     "vitest": "^0.13.1",
-    "vue-tsc": "^0.31.4"
+    "vue-tsc": "^0.31.4",
+    "workbox-window": "^6.5.4"
   }
 }

src/App.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { layouts } from './layouts';
 import { computed } from 'vue';
 import { useRoute, RouterView } from 'vue-router';
-import { darkThemeOverrides, lightThemeOverrides } from './themes';
 import { darkTheme, NGlobalStyle, NMessageProvider } from 'naive-ui';
+import { darkThemeOverrides, lightThemeOverrides } from './themes';
+import { layouts } from './layouts';
 import { useStyleStore } from './stores/style.store';
 
 const route = useRoute();
-const layout = computed(() => route?.meta?.layout ?? layouts.base);
+const layout = computed(() => route?.meta?.layout ?? layouts.navbar);
 const styleStore = useStyleStore();
 
 const theme = computed(() => (styleStore.isDarkTheme ? darkTheme : null));

src/assets/hero-gradient.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 275">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 275" preserveAspectRatio="none">
   <defs>
     <linearGradient id="small-hero-gradient-1" x1="13.74" y1="183.7" x2="303.96" y2="45.59" gradientUnits="userSpaceOnUse">
       <stop offset="0" stop-color="#25636c"/>
@@ -20,4 +20,4 @@
       <path fill="url(#small-hero-gradient-1)" d="M0,0V212.5s62.5-12.5,150,25,150,0,150,0V0Z"/>
     </g>
   </g>
-</svg>
+</svg> 

src/components/ColoredCard.vue

@@ -0,0 +1,59 @@
+<template>
+  <n-card class="colored-card">
+    <n-space justify="space-between" align="center">
+      <n-icon class="icon" size="40" :component="icon" />
+    </n-space>
+    <n-h3 class="title">
+      <n-ellipsis>{{ title }}</n-ellipsis>
+    </n-h3>
+
+    <div class="description">
+      <n-ellipsis :line-clamp="2" :tooltip="false">
+        <slot />
+      </n-ellipsis>
+    </div>
+  </n-card>
+</template>
+
+<script setup lang="ts">
+import { toRefs, type Component } from 'vue';
+
+const props = defineProps<{ icon: Component; title: string }>();
+const { icon, title } = toRefs(props);
+</script>
+
+<style lang="less" scoped>
+.colored-card {
+  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;
+  border: none;
+
+  .icon {
+    opacity: 0.7;
+  }
+
+  .title {
+    color: #fff;
+
+    margin: 5px 0;
+  }
+
+  .description {
+    opacity: 0.8;
+
+    margin: 5px 0;
+
+    ::v-deep(a) {
+      color: inherit;
+      text-decoration: underline;
+      font-weight: bold;
+      transition: color ease 0.2s;
+
+      &:hover {
+        color: rgb(20, 20, 20);
+      }
+    }
+  }
+}
+</style>

src/components/FavoriteButton.vue

@@ -0,0 +1,40 @@
+<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>
+
+<style scoped></style>

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

src/components/MenuLayout.vue

@@ -39,13 +39,6 @@ const siderPosition = computed(() => (isSmallScreen.value ? 'absolute' : 'static
   cursor: pointer;
 }
 
-.content {
-  // background-color: #f1f5f9;
-  ::v-deep(.n-layout-scroll-container) {
-    padding: 26px;
-  }
-}
-
 .n-layout {
   height: 100vh;
 }

src/components/SearchBar.vue

@@ -1,28 +1,30 @@
 <script lang="ts" setup>
+import { useFuzzySearch } from '@/composable/fuzzySearch';
 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, h, ref } from 'vue';
-import { computed, ref } from 'vue';
 import { useRouter } from 'vue-router';
+import SearchBarItem from './SearchBarItem.vue';
 
 const router = useRouter();
 const queryString = ref('');
 
-const cleanString = (s: string) => deburr(s.trim().toLowerCase());
+const { searchResult } = useFuzzySearch({
+  search: queryString,
+  data: tools,
+  options: { keys: [{ name: 'name', weight: 2 }, 'description', 'keywords'] },
+});
 
-const searchableTools = tools.map(({ name, description, keywords, path }) => ({
+const toolToOption = (tool: Tool) => ({ label: tool.name, value: tool.path, tool });
-  searchableText: [name, description, ...keywords].map(cleanString).join(' '),
-  path,
-  name,
-}));
 
 const options = computed(() => {
-  const query = cleanString(queryString.value);
+  if (queryString.value === '') {
+    return tools.map(toolToOption);
+  }
 
-  return searchableTools
+  return searchResult.value.map(toolToOption);
-    .filter(({ searchableText }) => searchableText.includes(query))
-    .map(({ name, path }) => ({ label: name, value: path }));
 });
 
 function onSelect(path: string) {
@@ -44,6 +46,10 @@ const keys = useMagicKeys({
 whenever(keys.ctrl_k, () => {
   focusTarget.value.focus();
 });
+
+function renderOption({ tool }: { tool: Tool }) {
+  return h(SearchBarItem, { tool });
+}
 </script>
 
 <template>
@@ -51,8 +57,10 @@ whenever(keys.ctrl_k, () => {
     <n-auto-complete
       v-model:value="queryString"
       :options="options"
-      :input-props="{ autocomplete: 'disabled' }"
+      :on-select="(value) => onSelect(String(value))"
-      :on-select="onSelect"
+      :render-label="renderOption"
+      :default-value="'aa'"
+      :get-show="() => true"
     >
       <template #default="{ handleInput, handleBlur, handleFocus, value: slotValue }">
         <n-input
@@ -61,6 +69,7 @@ whenever(keys.ctrl_k, () => {
           clearable
           placeholder="Search a tool... [Ctrl + K]"
           :value="slotValue"
+          :input-props="{ autocomplete: 'disabled' }"
           @input="handleInput"
           @focus="handleFocus"
           @blur="handleBlur"
@@ -74,8 +83,4 @@ whenever(keys.ctrl_k, () => {
   </div>
 </template>
 
-<style lang="less" scoped>
+<style lang="less" scoped></style>
-// ::v-deep(.n-input__border) {
-//     border: none;
-// }
-</style>

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>

src/components/TextareaCopyable.vue

@@ -0,0 +1,100 @@
+<template>
+  <div style="overflow-x: hidden; width: 100%">
+    <n-card class="result-card">
+      <n-scrollbar
+        x-scrollable
+        trigger="none"
+        :style="height ? `min-height: ${height - 40 /* card padding */ + 10 /* negative margin compensation */}px` : ''"
+      >
+        <n-config-provider :hljs="hljs">
+          <n-code :code="value" :language="language" :trim="false" />
+        </n-config-provider>
+      </n-scrollbar>
+      <n-tooltip v-if="value" trigger="hover">
+        <template #trigger>
+          <div class="copy-button" :class="[copyPlacement]">
+            <n-button secondary circle size="large" @click="onCopyClicked">
+              <n-icon size="22" :component="Copy" />
+            </n-button>
+          </div>
+        </template>
+        <span>{{ tooltipText }}</span>
+      </n-tooltip>
+    </n-card>
+    <n-space v-if="copyPlacement === 'outside'" justify="center" style="margin-top: 15px">
+      <n-button secondary @click="onCopyClicked"> {{ tooltipText }} </n-button>
+    </n-space>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Copy } from '@vicons/tabler';
+import { useClipboard, useElementSize } from '@vueuse/core';
+import hljs from 'highlight.js/lib/core';
+import jsonHljs from 'highlight.js/lib/languages/json';
+import sqlHljs from 'highlight.js/lib/languages/sql';
+import xmlHljs from 'highlight.js/lib/languages/xml';
+import { ref, toRefs } from 'vue';
+
+hljs.registerLanguage('sql', sqlHljs);
+hljs.registerLanguage('json', jsonHljs);
+hljs.registerLanguage('html', xmlHljs);
+
+const props = withDefaults(
+  defineProps<{
+    value: string;
+    followHeightOf?: HTMLElement | null;
+    language?: string;
+    copyPlacement?: 'top-right' | 'bottom-right' | 'outside' | 'none';
+    copyMessage?: string;
+  }>(),
+  {
+    followHeightOf: null,
+    language: 'txt',
+    copyPlacement: 'top-right',
+    copyMessage: 'Copy to clipboard',
+  },
+);
+const { value, language, followHeightOf, copyPlacement, copyMessage } = toRefs(props);
+const { height } = followHeightOf ? useElementSize(followHeightOf) : { height: ref(null) };
+
+const { copy } = useClipboard({ source: value });
+const tooltipText = ref(copyMessage.value);
+
+function onCopyClicked() {
+  copy();
+  tooltipText.value = 'Copied !';
+
+  setTimeout(() => {
+    tooltipText.value = copyMessage.value;
+  }, 2000);
+}
+</script>
+
+<style lang="less" scoped>
+::v-deep(.n-scrollbar) {
+  padding-bottom: 10px;
+  margin-bottom: -10px;
+}
+.result-card {
+  position: relative;
+  .copy-button {
+    position: absolute;
+    opacity: 1;
+
+    &.top-right {
+      top: 10px;
+      right: 10px;
+    }
+
+    &.bottom-right {
+      bottom: 10px;
+      right: 10px;
+    }
+    &.outside,
+    &.none {
+      display: none;
+    }
+  }
+}
+</style>

src/components/ToolCard.vue

@@ -3,17 +3,21 @@
     <n-card class="tool-card">
       <n-space justify="space-between" align="center">
         <n-icon class="icon" size="40" :component="tool.icon" />
-        <n-tag
+        <n-space align="center">
-          v-if="tool.isNew"
+          <n-tag
-          size="small"
+            v-if="tool.isNew"
-          class="badge-new"
+            size="small"
-          round
+            class="badge-new"
-          type="success"
+            round
-          :bordered="false"
+            type="success"
-          :color="{ color: theme.primaryColor, textColor: theme.tagColor }"
+            :bordered="false"
-        >
+            :color="{ color: theme.primaryColor, textColor: theme.tagColor }"
-          New
+          >
-        </n-tag>
+            New
+          </n-tag>
+
+          <favorite-button :tool="tool" />
+        </n-space>
       </n-space>
       <n-h3 class="title">
         <n-ellipsis>{{ tool.name }}</n-ellipsis>
@@ -29,11 +33,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>
@@ -49,7 +54,8 @@ a {
   }
 
   .icon {
-    opacity: 0.7;
+    opacity: 0.6;
+    color: v-bind('theme.textColorBase');
   }
 
   .title {
@@ -57,7 +63,8 @@ a {
   }
 
   .description {
-    opacity: 0.7;
+    opacity: 0.6;
+    color: v-bind('theme.textColorBase');
     margin: 5px 0;
   }
 }

src/composable/downloadBase64.ts

@@ -1,16 +1,35 @@
 import { extension as getExtensionFromMime } from 'mime-types';
 import type { Ref } from 'vue';
 
+function getFileExtensionFromBase64({
+  base64String,
+  defaultExtension = 'txt',
+}: {
+  base64String: string;
+  defaultExtension?: string;
+}) {
+  const hasMimeType = base64String.match(/data:(.*?);base64/i);
+
+  if (hasMimeType) {
+    return getExtensionFromMime(hasMimeType[1]) || defaultExtension;
+  }
+
+  return defaultExtension;
+}
+
 export function useDownloadFileFromBase64({ source, filename }: { source: Ref<string>; filename?: string }) {
   return {
     download() {
-      const base64 = source.value;
+      const base64String = source.value;
-      const mimeType = base64.match(/data:(.*?);base64/i)?.[1] ?? 'text/plain';
+
-      console.log({ mimeType });
+      if (base64String === '') {
-      const cleanFileName = filename ?? `file.${getExtensionFromMime(mimeType)}`;
+        throw new Error('Base64 string is empty');
+      }
+
+      const cleanFileName = filename ?? `file.${getFileExtensionFromBase64({ base64String })}`;
 
       const a = document.createElement('a');
-      a.href = source.value;
+      a.href = base64String;
       a.download = cleanFileName;
       a.click();
     },

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

src/composable/validation.test.ts

@@ -0,0 +1,29 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import { describe, expect, it } from 'vitest';
+import { isFalsyOrHasThrown } from './validation';
+
+describe('useValidation', () => {
+  describe('isFalsyOrHasThrown', () => {
+    it('should return true if the callback return nil, false or throw', () => {
+      expect(isFalsyOrHasThrown(() => false)).toBe(true);
+      expect(isFalsyOrHasThrown(() => null)).toBe(true);
+      expect(isFalsyOrHasThrown(() => undefined)).toBe(true);
+      expect(isFalsyOrHasThrown(() => {})).toBe(true);
+      expect(
+        isFalsyOrHasThrown(() => {
+          throw new Error();
+        }),
+      ).toBe(true);
+    });
+
+    it('should return true for any truthy values and empty string and 0 values', () => {
+      expect(isFalsyOrHasThrown(() => true)).toBe(false);
+      expect(isFalsyOrHasThrown(() => 'string')).toBe(false);
+      expect(isFalsyOrHasThrown(() => 1)).toBe(false);
+      expect(isFalsyOrHasThrown(() => 0)).toBe(false);
+      expect(isFalsyOrHasThrown(() => '')).toBe(false);
+      expect(isFalsyOrHasThrown(() => [])).toBe(false);
+      expect(isFalsyOrHasThrown(() => ({}))).toBe(false);
+    });
+  });
+});

src/composable/validation.ts

@@ -1,38 +1,65 @@
+import _ from 'lodash';
 import { reactive, watch, type Ref } from 'vue';
 
-type UseValidationRule<T> = {
+type ValidatorReturnType = unknown;
-  validator: (value: T) => boolean;
-  message: string;
-};
 
-function isFalsyOrHasThrown(cb: () => boolean) {
+interface UseValidationRule<T> {
+  validator: (value: T) => ValidatorReturnType;
+  message: string;
+}
+
+export function isFalsyOrHasThrown(cb: () => ValidatorReturnType): boolean {
   try {
-    return !cb();
+    const returnValue = cb();
+
+    if (_.isNil(returnValue)) return true;
+
+    return returnValue === false;
   } catch (_) {
     return true;
   }
 }
 
+type ValidationAttrs = {
+  feedback: string;
+  validationStatus: string | undefined;
+};
+
 export function useValidation<T>({ source, rules }: { source: Ref<T>; rules: UseValidationRule<T>[] }) {
   const state = reactive<{
     message: string;
     status: undefined | 'error';
+    isValid: boolean;
+    attrs: ValidationAttrs;
   }>({
     message: '',
     status: undefined,
+    isValid: false,
+    attrs: {
+      validationStatus: undefined,
+      feedback: '',
+    },
   });
 
-  watch([source], () => {
+  watch(
-    state.message = '';
+    [source],
-    state.status = undefined;
+    () => {
+      state.message = '';
+      state.status = undefined;
 
-    for (const rule of rules) {
+      for (const rule of rules) {
-      if (isFalsyOrHasThrown(() => rule.validator(source.value))) {
+        if (isFalsyOrHasThrown(() => rule.validator(source.value))) {
-        state.message = rule.message;
+          state.message = rule.message;
-        state.status = 'error';
+          state.status = 'error';
+        }
       }
-    }
+
-  });
+      state.isValid = state.status !== 'error';
+      state.attrs.feedback = state.message;
+      state.attrs.validationStatus = state.status;
+    },
+    { immediate: true },
+  );
 
   return state;
 }

src/layouts/base.layout.vue

@@ -1,17 +1,18 @@
 <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 SearchBar from '../components/SearchBar.vue';
 import { useStyleStore } from '@/stores/style.store';
+import { config } from '@/config';
+import MenuIconItem from '@/components/MenuIconItem.vue';
+import type { Tool } from '@/tools/tools.types';
+import { useToolStore } from '@/tools/tools.store';
+import SearchBar from '../components/SearchBar.vue';
 import HeroGradient from '../assets/hero-gradient.svg?component';
 import MenuLayout from '../components/MenuLayout.vue';
 import NavbarButtons from '../components/NavbarButtons.vue';
-import { config } from '@/config';
-import MenuIconItem from '@/components/MenuIconItem.vue';
-import type { ITool } from '@/tools/tool';
 
 const themeVars = useThemeVars();
 const route = useRoute();
@@ -19,19 +20,28 @@ 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 makeLabel = (tool: Tool) => () => h(RouterLink, { to: tool.path }, { default: () => tool.name });
-const makeIcon = (tool: ITool) => () => h(MenuIconItem, { tool });
+const makeIcon = (tool: Tool) => () => h(MenuIconItem, { tool });
 
-const menuOptions: MenuGroupOption[] = toolsByCategory.map((category) => ({
+const toolStore = useToolStore();
-  label: category.name,
+
-  key: category.name,
+const menuOptions = computed<MenuGroupOption[]>(() =>
-  type: 'group',
+  [
-  children: category.components.map((tool) => ({
+    ...(toolStore.favoriteTools.length > 0
-    label: makeLabel(tool),
+      ? [{ name: 'Your favorite tools', components: toolStore.favoriteTools }]
-    icon: makeIcon(tool),
+      : []),
-    key: tool.name,
+    ...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>
@@ -102,56 +112,6 @@ const menuOptions: MenuGroupOption[] = toolsByCategory.map((category) => ({
     </template>
 
     <template #content>
-      <div class="navigation">
-        <n-button
-          :size="styleStore.isSmallScreen ? 'medium' : 'large'"
-          circle
-          quaternary
-          aria-label="Toggle menu"
-          @click="styleStore.isMenuCollapsed = !styleStore.isMenuCollapsed"
-        >
-          <n-icon size="25" :component="Menu2" />
-        </n-button>
-
-        <router-link to="/" #="{ navigate, href }" custom>
-          <n-tooltip trigger="hover">
-            <template #trigger>
-              <n-button
-                tag="a"
-                :href="href"
-                :size="styleStore.isSmallScreen ? 'medium' : 'large'"
-                circle
-                quaternary
-                aria-label="Home"
-                @click="navigate"
-              >
-                <n-icon size="25" :component="Home2" />
-              </n-button>
-            </template>
-            Home
-          </n-tooltip>
-        </router-link>
-
-        <search-bar />
-
-        <n-tooltip trigger="hover">
-          <template #trigger>
-            <n-button
-              type="primary"
-              tag="a"
-              href="https://github.com/sponsors/CorentinTh"
-              rel="noopener"
-              target="_blank"
-            >
-              <n-icon v-if="!styleStore.isSmallScreen" :component="Heart" style="margin-right: 5px" />
-              Sponsor
-            </n-button>
-          </template>
-          ❤ Support IT Tools development !
-        </n-tooltip>
-
-        <navbar-buttons v-if="!styleStore.isSmallScreen" />
-      </div>
       <slot />
     </template>
   </menu-layout>
@@ -169,6 +129,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;

src/layouts/index.ts

@@ -1,7 +1,9 @@
 import BaseLayout from './base.layout.vue';
+import NavbarLayout from './navbar.layout.vue';
 import ToolLayout from './tool.layout.vue';
 
 export const layouts = {
   base: BaseLayout,
   toolLayout: ToolLayout,
+  navbar: NavbarLayout,
 };

src/layouts/navbar.layout.vue

@@ -0,0 +1,174 @@
+<script lang="ts" setup>
+import { NIcon, useThemeVars } from 'naive-ui';
+import { RouterLink } from 'vue-router';
+import { Heart, Menu2, Home2 } from '@vicons/tabler';
+import { useStyleStore } from '@/stores/style.store';
+import SearchBar from '../components/SearchBar.vue';
+import BaseLayout from './base.layout.vue';
+import NavbarButtons from '../components/NavbarButtons.vue';
+
+const themeVars = useThemeVars();
+const styleStore = useStyleStore();
+</script>
+
+<template>
+  <base-layout class="base-layout">
+    <div class="navigation">
+      <n-button
+        :size="styleStore.isSmallScreen ? 'medium' : 'large'"
+        circle
+        quaternary
+        aria-label="Toggle menu"
+        @click="styleStore.isMenuCollapsed = !styleStore.isMenuCollapsed"
+      >
+        <n-icon size="25" :component="Menu2" />
+      </n-button>
+
+      <router-link to="/" #="{ navigate, href }" custom>
+        <n-tooltip trigger="hover">
+          <template #trigger>
+            <n-button
+              tag="a"
+              :href="href"
+              :size="styleStore.isSmallScreen ? 'medium' : 'large'"
+              circle
+              quaternary
+              aria-label="Home"
+              @click="navigate"
+            >
+              <n-icon size="25" :component="Home2" />
+            </n-button>
+          </template>
+          Home
+        </n-tooltip>
+      </router-link>
+
+      <search-bar />
+
+      <navbar-buttons v-if="!styleStore.isSmallScreen" />
+
+      <n-tooltip trigger="hover">
+        <template #trigger>
+          <n-button
+            round
+            type="primary"
+            tag="a"
+            href="https://github.com/sponsors/CorentinTh"
+            rel="noopener"
+            target="_blank"
+            class="support-button"
+            :bordered="false"
+          >
+            Buy me a coffee
+
+            <n-icon v-if="!styleStore.isSmallScreen" :component="Heart" style="margin-left: 8px" size="20px" />
+          </n-button>
+        </template>
+        ❤ Support IT Tools development !
+      </n-tooltip>
+    </div>
+    <slot />
+  </base-layout>
+</template>
+
+<style lang="less" scoped>
+// ::v-deep(.n-layout-scroll-container) {
+//     @percent: 4%;
+//     @position: 25px;
+//     @size: 50px;
+//     @color: #eeeeee25;
+//     background-image: radial-gradient(@color @percent, transparent @percent),
+//         radial-gradient(@color @percent, transparent @percent);
+//     background-position: 0 0, @position @position;
+//     background-size: @size @size;
+// }
+
+::v-deep(.content .n-layout-scroll-container) {
+  padding: 26px;
+}
+
+.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;
+  margin-top: 20px;
+  padding: 20px 0;
+}
+
+.sider-content {
+  padding-top: 160px;
+  padding-bottom: 200px;
+}
+
+.hero-wrapper {
+  position: absolute;
+  display: block;
+  left: 0;
+  width: 100%;
+  z-index: 10;
+  overflow: hidden;
+
+  .gradient {
+    margin-top: -65px;
+  }
+
+  .text-wrapper {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    text-align: center;
+    top: 16px;
+    color: #fff;
+
+    .title {
+      font-size: 25px;
+      font-weight: 600;
+    }
+
+    .divider {
+      width: 50px;
+      height: 2px;
+      border-radius: 4px;
+      background-color: v-bind('themeVars.primaryColor');
+      margin: 0 auto 5px;
+    }
+
+    .subtitle {
+      font-size: 16px;
+    }
+  }
+}
+
+// ::v-deep(.n-menu-item-content-header) {
+//   overflow: visible !important;
+//   // overflow-x: hidden !important;
+// }
+
+.navigation {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+
+  & > *:not(:last-child) {
+    margin-right: 5px;
+  }
+
+  .search-bar {
+    // width: 100%;
+    flex-grow: 1;
+  }
+}
+</style>

src/layouts/tool.layout.vue

@@ -1,10 +1,12 @@
 <script lang="ts" setup>
 import { useRoute } from 'vue-router';
-import BaseLayout from './base.layout.vue';
 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 NavbarLayout from './navbar.layout.vue';
 
 const route = useRoute();
 const theme = useThemeVars();
@@ -14,11 +16,11 @@ const head = computed<HeadObject>(() => ({
   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(','),
     },
   ],
 }));
@@ -26,25 +28,21 @@ useHead(head);
 </script>
 
 <template>
-  <base-layout>
+  <navbar-layout>
     <div class="tool-layout">
       <div class="tool-header">
-        <n-h1>
+        <n-space align="center" justify="space-between" :wrap="false">
-          {{ route.meta.name }}
+          <n-h1>
+            {{ route.meta.name }}
+          </n-h1>
 
-          <n-tag
+          <div>
-            v-if="route.meta.isNew"
+            <favorite-button :tool="{name: route.meta.name} as Tool" />
-            round
+          </div>
-            type="success"
+        </n-space>
-            :bordered="false"
-            :color="{ color: theme.primaryColor, textColor: theme.tagColor }"
-          >
-            New tool
-          </n-tag>
-          <!-- <span class="new-tool-badge">New !</span> -->
-        </n-h1>
 
         <div class="separator" />
+
         <div class="description">
           {{ route.meta.description }}
         </div>
@@ -54,7 +52,7 @@ useHead(head);
     <div class="tool-content">
       <slot />
     </div>
-  </base-layout>
+  </navbar-layout>
 </template>
 
 <style lang="less" scoped>
@@ -92,6 +90,7 @@ useHead(head);
       width: 200px;
       height: 2px;
       background: rgb(161, 161, 161);
+      opacity: 0.2;
 
       margin: 10px 0;
     }

src/main.ts

@@ -1,6 +1,7 @@
 import { createApp } from 'vue';
 import { createPinia } from 'pinia';
 import { createHead } from '@vueuse/head';
+// eslint-disable-next-line import/no-unresolved
 import { registerSW } from 'virtual:pwa-register';
 import { plausible } from './plugins/plausible.plugin';
 

src/pages/About.vue

@@ -47,7 +47,7 @@ useHead({ title: 'About - IT Tools' });
       file of the repository.
     </n-p>
 
-    <n-h2>Found a bug ? A tool is missing ?</n-h2>
+    <n-h2>Found a bug? A tool is missing?</n-h2>
     <n-p>
       If you need a tool that is currently not present here, and you think can be relevant, you are welcome to submit a
       feature request in the

src/pages/Home.page.vue

@@ -1,29 +1,97 @@
 <script setup lang="ts">
-import { toolsWithCategory } from '@/tools';
+import { useToolStore } from '@/tools/tools.store';
-import ToolCard from '../components/ToolCard.vue';
+import { Heart } from '@vicons/tabler';
 import { useHead } from '@vueuse/head';
+import ColoredCard from '../components/ColoredCard.vue';
+import ToolCard from '../components/ToolCard.vue';
+import Hero from './home/components/hero.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-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
-      <n-gi
+      <n-gi>
-        v-for="tool in [
+        <colored-card title="You like it-tools?" :icon="Heart">
-          ...toolsWithCategory.filter(({ isNew }) => isNew),
+          Give us a star on
-          ...toolsWithCategory.filter(({ isNew }) => !isNew),
+          <a
-        ]"
+            href="https://github.com/CorentinTh/it-tools"
-        :key="tool.name"
+            rel="noopener"
-      >
+            target="_blank"
-        <tool-card :tool="tool" />
+            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>
+    </n-grid> -->
+
+    <hero />
+    <div class="grid-wrapper">
+      <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>
 
 <style scoped lang="less">
-.home-page {
+.grid-wrapper {
-  padding-top: 50px;
+  padding: 26px;
+}
+
+::v-deep(.n-grid) {
+  margin-bottom: 12px;
+}
+
+.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>

src/pages/home/components/hero.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="hero">
+    <!-- <img :src="HeroGradientUrl" alt="Hero background image" class="hero-background" /> -->
+    <div class="background-wrapper" :style="{ backgroundImage: `url(${HeroGradientUrl})` }">
+      <div class="navigation">
+        <n-button
+          :size="styleStore.isSmallScreen ? 'medium' : 'large'"
+          circle
+          quaternary
+          aria-label="Toggle menu"
+          color="#fff"
+          @click="styleStore.isMenuCollapsed = !styleStore.isMenuCollapsed"
+        >
+          <n-icon size="25" :component="Menu2" />
+        </n-button>
+
+        <div class="spacer"></div>
+
+        <navbar-buttons v-if="!styleStore.isSmallScreen" />
+
+        <n-tooltip trigger="hover">
+          <template #trigger>
+            <n-button
+              round
+              type="primary"
+              tag="a"
+              href="https://github.com/sponsors/CorentinTh"
+              rel="noopener"
+              target="_blank"
+              ghost
+              color="#fff"
+            >
+              Buy me a coffee
+
+              <n-icon v-if="!styleStore.isSmallScreen" :component="Heart" style="margin-left: 8px" size="20px" />
+            </n-button>
+          </template>
+          ❤ Support IT Tools development !
+        </n-tooltip>
+      </div>
+
+      <n-space justify="center" class="content" vertical>
+        <n-h1> Hello, world! </n-h1>
+        <div class="subtitle">
+          Welcome to IT-Tools! The collection of handy online tool for devs. Find everything you need to work in IT!
+        </div>
+        <search-bar />
+      </n-space>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import HeroGradientUrl from '@/assets/hero-gradient.svg?url';
+import NavbarButtons from '@/components/NavbarButtons.vue';
+import SearchBar from '@/components/SearchBar.vue';
+import { useStyleStore } from '@/stores/style.store';
+import { Heart, Menu2 } from '@vicons/tabler';
+
+const styleStore = useStyleStore();
+</script>
+
+<style scoped lang="less">
+.hero {
+  position: relative;
+  color: #fff !important;
+
+  .n-h1 {
+    margin-bottom: 0;
+    line-height: 1;
+    color: #fff !important;
+  }
+
+  .subtitle {
+    opacity: 0.8;
+    margin-bottom: 20px;
+  }
+
+  .background-wrapper {
+    //   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%);
+
+    background-size: 100% 150%;
+    background-position: bottom;
+  }
+
+  .content {
+    padding: 50px 0 300px;
+    max-width: 900px;
+    margin: 0 auto;
+  }
+
+  .navigation {
+    padding: 26px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: row;
+
+    & > *:not(:last-child) {
+      margin-right: 5px;
+    }
+
+    .spacer {
+      // width: 100%;
+      flex-grow: 1;
+    }
+  }
+}
+</style>

src/plugins/naive.plugin.ts

@@ -1,60 +1,64 @@
 import {
   create,
+  NAlert,
+  NAutoComplete,
   NButton,
-  NConfigProvider,
   NCard,
-  NInput,
+  NCode,
-  NColorPicker,
-  NInputNumber,
-  NSpace,
-  NH1,
-  NForm,
-  NFormItem,
-  NTimePicker,
-  NText,
-  NIcon,
-  NSwitch,
-  NCollapseTransition,
-  NGrid,
-  NGridItem,
-  NPopconfirm,
-  NSlider,
   NCollapse,
   NCollapseItem,
-  NProgress,
+  NCollapseTransition,
-  NAutoComplete,
+  NColorPicker,
-  NSelect,
+  NConfigProvider,
-  NUpload,
+  NDatePicker,
-  NEmpty,
+  NDivider,
-  NModal,
-  NTooltip,
-  NAlert,
-  NP,
-  NH2,
   NDropdown,
+  NDynamicInput,
+  NEllipsis,
+  NEmpty,
+  NForm,
+  NFormItem,
+  NGradientText,
+  NGrid,
+  NGridItem,
+  NH1,
+  NH2,
+  NH3,
+  NIcon,
+  NImage,
+  NInput,
+  NInputGroup,
+  NInputGroupLabel,
+  NInputNumber,
   NLayout,
   NLayoutSider,
   NMenu,
   NMessageProvider,
+  NModal,
+  NP,
   NPageHeader,
+  NPopconfirm,
+  NProgress,
   NResult,
-  NH3,
-  NEllipsis,
-  NTag,
-  NInputGroup,
-  NInputGroupLabel,
-  NDivider,
-  NStatistic,
-  NTable,
-  NUploadDragger,
-  NImage,
   NScrollbar,
-  NGradientText,
+  NSelect,
-  NCode,
+  NSlider,
-  NDatePicker,
+  NSpace,
+  NStatistic,
+  NSwitch,
+  NTable,
+  NTag,
+  NText,
+  NTimePicker,
+  NTooltip,
+  NUpload,
+  NUploadDragger,
+  NCheckbox,
 } from 'naive-ui';
 
 const components = [
+  NCheckbox,
+  NDynamicInput,
   NDatePicker,
   NCode,
   NGradientText,

src/router.ts

@@ -1,5 +1,5 @@
-import { layouts } from './layouts/index';
 import { createRouter, createWebHistory } from 'vue-router';
+import { layouts } from './layouts/index';
 import HomePage from './pages/Home.page.vue';
 import NotFound from './pages/404.page.vue';
 import { tools } from './tools';
@@ -24,6 +24,7 @@ const router = createRouter({
       path: '/',
       name: 'home',
       component: HomePage,
+      meta: { layout: layouts.base },
     },
     {
       path: '/about',

src/themes.ts

@@ -6,6 +6,12 @@ export const lightThemeOverrides: GlobalThemeOverrides = {
   },
 
   Layout: { color: '#f1f5f9' },
+
+  AutoComplete: {
+    peers: {
+      InternalSelectMenu: { height: '500px' },
+    },
+  },
 };
 
 export const darkThemeOverrides: GlobalThemeOverrides = {
@@ -16,6 +22,12 @@ export const darkThemeOverrides: GlobalThemeOverrides = {
     primaryColorSuppl: '#36AD6AFF',
   },
 
+  AutoComplete: {
+    peers: {
+      InternalSelectMenu: { height: '500px', color: '#1e1e1e' },
+    },
+  },
+
   Menu: {
     itemHeight: '32px',
   },
@@ -30,4 +42,9 @@ export const darkThemeOverrides: GlobalThemeOverrides = {
     color: '#1e1e1e',
     borderColor: 'transparent',
   },
+
+  Table: {
+    tdColor: '#1e1e1e',
+    thColor: '#353535',
+  },
 };

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

@@ -1,8 +1,16 @@
 <template>
   <n-card title="Base64 to file">
-    <n-input v-model:value="base64Input" type="textarea" placeholder="Put your base64 file string here..." rows="5" />
+    <n-form-item
+      :feedback="base64InputValidation.message"
+      :validation-status="base64InputValidation.status"
+      :show-label="false"
+    >
+      <n-input v-model:value="base64Input" type="textarea" placeholder="Put your base64 file string here..." rows="5" />
+    </n-form-item>
     <n-space justify="center">
-      <n-button secondary @click="download()"> Download file </n-button>
+      <n-button :disabled="base64Input === '' || !base64InputValidation.isValid" secondary @click="downloadFile()">
+        Download file
+      </n-button>
     </n-space>
   </n-card>
 
@@ -26,6 +34,8 @@
 <script setup lang="ts">
 import { useCopy } from '@/composable/copy';
 import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
+import { useValidation } from '@/composable/validation';
+import { isValidBase64 } from '@/utils/base64';
 import { Upload } from '@vicons/tabler';
 import { useBase64 } from '@vueuse/core';
 import type { UploadFileInfo } from 'naive-ui';
@@ -33,6 +43,25 @@ import { ref, type Ref } from 'vue';
 
 const base64Input = ref('');
 const { download } = useDownloadFileFromBase64({ source: base64Input });
+const base64InputValidation = useValidation({
+  source: base64Input,
+  rules: [
+    {
+      message: 'Invalid base 64 string',
+      validator: (value) => isValidBase64(value.trim()),
+    },
+  ],
+});
+
+function downloadFile() {
+  if (!base64InputValidation.isValid) return;
+
+  try {
+    download();
+  } catch (_) {
+    //
+  }
+}
 
 const fileList = ref();
 const fileInput = ref() as Ref<File>;

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

@@ -20,11 +20,7 @@
   </n-card>
 
   <n-card title="Base64 to string">
-    <n-form-item
+    <n-form-item label="Base64 string to decode" v-bind="b64Validation.attrs">
-      label="Base64 string to decode"
-      :validation-status="b64Validation.status"
-      :feedback="b64Validation.message"
-    >
       <n-input v-model:value="base64Input" type="textarea" placeholder="Your base64 string..." rows="5" />
     </n-form-item>
 
@@ -41,24 +37,20 @@
 <script setup lang="ts">
 import { useCopy } from '@/composable/copy';
 import { useValidation } from '@/composable/validation';
+import { base64ToText, isValidBase64, textToBase64 } from '@/utils/base64';
+import { withDefaultOnError } from '@/utils/defaults';
 import { computed, ref } from 'vue';
 
 const textInput = ref('');
-const base64Output = computed(() => window.btoa(textInput.value));
+const base64Output = computed(() => textToBase64(textInput.value));
 const { copy: copyTextBase64 } = useCopy({ source: base64Output, text: 'Base64 string copied to the clipboard' });
 
 const base64Input = ref('');
-const textOutput = computed(() => {
+const textOutput = computed(() => withDefaultOnError(() => base64ToText(base64Input.value.trim()), ''));
-  try {
-    return window.atob(base64Input.value);
-  } catch (_) {
-    return '';
-  }
-});
 const { copy: copyText } = useCopy({ source: textOutput, text: 'String copied to the clipboard' });
 const b64Validation = useValidation({
   source: base64Input,
-  rules: [{ message: 'Invalid base64 string', validator: (value) => true || window.atob(value) }],
+  rules: [{ message: 'Invalid base64 string', validator: (value) => isValidBase64(value.trim()) }],
 });
 </script>
 

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

@@ -30,11 +30,12 @@
 
 <script setup lang="ts">
 import { useCopy } from '@/composable/copy';
+import { textToBase64 } from '@/utils/base64';
 import { computed, ref } from 'vue';
 
 const username = ref('');
 const password = ref('');
-const header = computed(() => `Authorization: Basic ${window.btoa(`${username.value}:${password.value}`)}`);
+const header = computed(() => `Authorization: Basic ${textToBase64(`${username.value}:${password.value}`)}`);
 
 const { copy } = useCopy({ source: header, text: 'Header copied to the clipboard' });
 </script>

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

@@ -59,24 +59,26 @@
 
 <script setup lang="ts">
 import { useCopy } from '@/composable/copy';
-import { ref, computed } from 'vue';
+import { useValidation } from '@/composable/validation';
+import { isNotThrowing } from '@/utils/boolean';
+import { withDefaultOnError } from '@/utils/defaults';
 import {
-  entropyToMnemonic,
-  englishWordList,
   chineseSimplifiedWordList,
   chineseTraditionalWordList,
   czechWordList,
+  englishWordList,
+  entropyToMnemonic,
   frenchWordList,
+  generateEntropy,
   italianWordList,
   japaneseWordList,
   koreanWordList,
+  mnemonicToEntropy,
   portugueseWordList,
   spanishWordList,
-  generateEntropy,
-  mnemonicToEntropy,
 } from '@it-tools/bip39';
 import { Copy, Refresh } from '@vicons/tabler';
-import { useValidation } from '@/composable/validation';
+import { computed, ref } from 'vue';
 
 const languages = {
   English: englishWordList,
@@ -97,20 +99,11 @@ const passphraseInput = ref('');
 const language = ref<keyof typeof languages>('English');
 const passphrase = computed({
   get() {
-    try {
+    return withDefaultOnError(() => entropyToMnemonic(entropy.value, languages[language.value]), passphraseInput.value);
-      return entropyToMnemonic(entropy.value, languages[language.value]);
-    } catch (_) {
-      return passphraseInput.value;
-    }
   },
   set(value: string) {
     passphraseInput.value = value;
-
+    entropy.value = withDefaultOnError(() => mnemonicToEntropy(value, languages[language.value]), '');
-    try {
-      entropy.value = mnemonicToEntropy(value, languages[language.value]);
-    } catch (_) {
-      entropy.value = '';
-    }
   },
 });
 
@@ -123,7 +116,7 @@ const entropyValidation = useValidation({
     },
     {
       validator: (value) => /^[a-fA-F0-9]*$/.test(value),
-      message: 'Entropy should an hexadecimal number',
+      message: 'Entropy should be an hexadecimal string',
     },
   ],
 });
@@ -132,14 +125,7 @@ const mnemonicValidation = useValidation({
   source: passphrase,
   rules: [
     {
-      validator: (value) => {
+      validator: (value) => isNotThrowing(() => mnemonicToEntropy(value, languages[language.value])),
-        try {
-          mnemonicToEntropy(value);
-          return true;
-        } catch (_) {
-          return false;
-        }
-      },
       message: 'Invalid mnemonic',
     },
   ],

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

@@ -46,8 +46,6 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import InputCopyable from '../../components/InputCopyable.vue';
-
 import {
   camelCase,
   capitalCase,
@@ -61,6 +59,7 @@ import {
   sentenceCase,
   snakeCase,
 } from 'change-case';
+import InputCopyable from '../../components/InputCopyable.vue';
 
 const input = ref('lorem ipsum dolor sit amet');
 </script>

src/tools/chmod-calculator/chmod-calculator.service.test.ts

@@ -0,0 +1,68 @@
+import { expect, describe, it } from 'vitest';
+import { computeChmodOctalRepresentation } from './chmod-calculator.service';
+
+describe('chmod-calculator', () => {
+  describe('computeChmodOctalRepresentation', () => {
+    it('get the octal representation from permissions', () => {
+      expect(
+        computeChmodOctalRepresentation({
+          permissions: {
+            owner: { read: true, write: true, execute: true },
+            group: { read: true, write: true, execute: true },
+            public: { read: true, write: true, execute: true },
+          },
+        }),
+      ).to.eql('777');
+
+      expect(
+        computeChmodOctalRepresentation({
+          permissions: {
+            owner: { read: false, write: false, execute: false },
+            group: { read: false, write: false, execute: false },
+            public: { read: false, write: false, execute: false },
+          },
+        }),
+      ).to.eql('000');
+
+      expect(
+        computeChmodOctalRepresentation({
+          permissions: {
+            owner: { read: false, write: true, execute: false },
+            group: { read: false, write: true, execute: true },
+            public: { read: true, write: false, execute: true },
+          },
+        }),
+      ).to.eql('235');
+
+      expect(
+        computeChmodOctalRepresentation({
+          permissions: {
+            owner: { read: true, write: false, execute: false },
+            group: { read: false, write: true, execute: false },
+            public: { read: false, write: false, execute: true },
+          },
+        }),
+      ).to.eql('421');
+
+      expect(
+        computeChmodOctalRepresentation({
+          permissions: {
+            owner: { read: false, write: false, execute: true },
+            group: { read: false, write: true, execute: false },
+            public: { read: true, write: false, execute: false },
+          },
+        }),
+      ).to.eql('124');
+
+      expect(
+        computeChmodOctalRepresentation({
+          permissions: {
+            owner: { read: false, write: true, execute: false },
+            group: { read: false, write: true, execute: false },
+            public: { read: false, write: true, execute: false },
+          },
+        }),
+      ).to.eql('222');
+    });
+  });
+});

src/tools/chmod-calculator/chmod-calculator.service.ts

@@ -0,0 +1,17 @@
+import _ from 'lodash';
+import type { GroupPermissions, Permissions } from './chmod-calculator.types';
+
+export { computeChmodOctalRepresentation };
+
+function computeChmodOctalRepresentation({ permissions }: { permissions: Permissions }): string {
+  const permissionValue = { read: 4, write: 2, execute: 1 };
+
+  const getGroupPermissionValue = (permission: GroupPermissions) =>
+    _.reduce(permission, (acc, isPermSet, key) => acc + (isPermSet ? _.get(permissionValue, key, 0) : 0), 0);
+
+  return [
+    getGroupPermissionValue(permissions.owner),
+    getGroupPermissionValue(permissions.group),
+    getGroupPermissionValue(permissions.public),
+  ].join('');
+}

src/tools/chmod-calculator/chmod-calculator.types.ts

@@ -0,0 +1,10 @@
+export type Scope = 'read' | 'write' | 'execute';
+export type Group = 'owner' | 'group' | 'public';
+
+export type GroupPermissions = {
+  [k in Scope]: boolean;
+};
+
+export type Permissions = {
+  [k in Group]: GroupPermissions;
+};

src/tools/chmod-calculator/chmod-calculator.vue

@@ -0,0 +1,83 @@
+<template>
+  <div>
+    <n-table :bordered="false" :bottom-bordered="false" single-column class="permission-table">
+      <thead>
+        <tr>
+          <th class="text-center" scope="col"></th>
+          <th class="text-center" scope="col">Owner (u)</th>
+          <th class="text-center" scope="col">Group (g)</th>
+          <th class="text-center" scope="col">Public (o)</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="{ scope, title } of scopes" :key="scope">
+          <td class="line-header">{{ title }}</td>
+          <td v-for="group of groups" :key="group" class="text-center">
+            <!-- <n-switch v-model:value="permissions[group][scope]" /> -->
+            <n-checkbox v-model:checked="permissions[group][scope]" size="large" />
+          </td>
+        </tr>
+      </tbody>
+    </n-table>
+
+    <div class="octal-result">
+      {{ octal }}
+    </div>
+
+    <input-copyable :value="`chmod ${octal} path`" readonly style="margin-bottom: 5px" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useThemeVars } from 'naive-ui';
+import { computed, ref } from 'vue';
+import { computeChmodOctalRepresentation } from './chmod-calculator.service';
+import InputCopyable from '../../components/InputCopyable.vue';
+
+import type { Group, Scope } from './chmod-calculator.types';
+
+const themeVars = useThemeVars();
+
+const scopes: { scope: Scope; title: string }[] = [
+  { scope: 'read', title: 'Read (4)' },
+  { scope: 'write', title: 'Write (2)' },
+  { scope: 'execute', title: 'Execute (1)' },
+];
+const groups: Group[] = ['owner', 'group', 'public'];
+
+const permissions = ref({
+  owner: { read: false, write: false, execute: false },
+  group: { read: false, write: false, execute: false },
+  public: { read: false, write: false, execute: false },
+});
+
+const octal = computed(() => computeChmodOctalRepresentation({ permissions: permissions.value }));
+</script>
+
+<style lang="less" scoped>
+.octal-result {
+  text-align: center;
+  font-size: 50px;
+  font-family: monospace;
+  color: v-bind('themeVars.primaryColor');
+  margin: 20px 0;
+}
+.permission-table {
+  td,
+  th {
+    padding: 15px;
+
+    @media screen and (max-width: 600px) {
+      padding: 5px;
+    }
+  }
+}
+.line-header {
+  font-weight: bold;
+  text-align: right;
+  max-width: 80px;
+}
+.text-center {
+  text-align: center;
+}
+</style>

src/tools/chmod-calculator/index.ts

@@ -0,0 +1,22 @@
+import { FileInvoice } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Chmod calculator',
+  path: '/chmod-calculator',
+  description: 'Compute your chmod permissions and commands with this online chmod calculator.',
+  keywords: [
+    'chmod',
+    'calculator',
+    'file',
+    'permission',
+    'files',
+    'directory',
+    'folder',
+    'recursive',
+    'generator',
+    'octal',
+  ],
+  component: () => import('./chmod-calculator.vue'),
+  icon: FileInvoice,
+});

src/tools/chronometer/chronometer.service.test.ts

@@ -1,12 +1,13 @@
 import { describe, expect, it } from 'vitest';
-import { formatChronometerTime } from './chronometer.service';
+import { formatMs } from './chronometer.service';
 
 describe('chronometer', () => {
   describe('formatChronometerTime', () => {
     it('format the elapsed time', () => {
-      expect(formatChronometerTime({ elapsed: 123456 })).toEqual('02:03.456');
+      expect(formatMs(0)).toEqual('00:00.000');
-      expect(formatChronometerTime({ elapsed: 123456, msPerUnit: 100 })).toEqual('03:25:45.600');
+      expect(formatMs(1)).toEqual('00:00.001');
-      expect(formatChronometerTime({ elapsed: 12345600 })).toEqual('03:25:45.600');
+      expect(formatMs(123456)).toEqual('02:03.456');
+      expect(formatMs(12345600)).toEqual('03:25:45.600');
     });
   });
 });

src/tools/chronometer/chronometer.service.ts

@@ -1,10 +1,8 @@
-export function formatChronometerTime({ elapsed, msPerUnit = 1 }: { elapsed: number; msPerUnit?: number }) {
+export function formatMs(msTotal: number) {
-  const elapsedMs = elapsed * msPerUnit;
+  const ms = msTotal % 1000;
-
+  const secs = ((msTotal - ms) / 1000) % 60;
-  const ms = elapsedMs % 1000;
+  const mins = (((msTotal - ms) / 1000 - secs) / 60) % 60;
-  const secs = ((elapsedMs - ms) / 1000) % 60;
+  const hrs = (((msTotal - ms) / 1000 - secs) / 60 - mins) / 60;
-  const mins = (((elapsedMs - ms) / 1000 - secs) / 60) % 60;
-  const hrs = (((elapsedMs - ms) / 1000 - secs) / 60 - mins) / 60;
   const hrsString = hrs > 0 ? `${hrs.toString().padStart(2, '0')}:` : '';
 
   return `${hrsString}${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}.${ms

src/tools/chronometer/chronometer.vue

@@ -1,11 +1,11 @@
 <template>
   <div>
     <n-card>
-      <div class="duration">{{ formatChronometerTime({ elapsed: counter, msPerUnit }) }}</div>
+      <div class="duration">{{ formatMs(counter) }}</div>
     </n-card>
     <br />
     <n-space justify="center">
-      <n-button v-if="!isActive" secondary type="primary" @click="resume">Start</n-button>
+      <n-button v-if="!isRunning" secondary type="primary" @click="resume">Start</n-button>
       <n-button v-else secondary type="warning" @click="pause">Stop</n-button>
 
       <n-button secondary @click="counter = 0">Reset</n-button>
@@ -14,12 +14,33 @@
 </template>
 
 <script setup lang="ts">
-import { useInterval } from '@vueuse/core';
+import { useRafFn } from '@vueuse/core';
-import { formatChronometerTime } from './chronometer.service';
+import { ref } from 'vue';
+import { formatMs } from './chronometer.service';
 
-const msPerUnit = 10;
+const isRunning = ref(false);
+const counter = ref(0);
 
-const { counter, pause, resume, isActive } = useInterval(msPerUnit, { controls: true, immediate: false });
+let previousRafDate = Date.now();
+const { pause: pauseRaf, resume: resumeRaf } = useRafFn(
+  () => {
+    const deltaMs = Date.now() - previousRafDate;
+    previousRafDate = Date.now();
+    counter.value += deltaMs;
+  },
+  { immediate: false },
+);
+
+function resume() {
+  previousRafDate = Date.now();
+  resumeRaf();
+  isRunning.value = true;
+}
+
+function pause() {
+  pauseRaf();
+  isRunning.value = false;
+}
 </script>
 
 <style lang="less" scoped>

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

@@ -36,12 +36,12 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { colord, extend } from 'colord';
-import InputCopyable from '../../components/InputCopyable.vue';
 
 import cmykPlugin from 'colord/plugins/cmyk';
 import hwbPlugin from 'colord/plugins/hwb';
 import namesPlugin from 'colord/plugins/names';
 import lchPlugin from 'colord/plugins/lch';
+import InputCopyable from '../../components/InputCopyable.vue';
 
 extend([cmykPlugin, hwbPlugin, namesPlugin, lchPlugin]);
 

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

@@ -132,5 +132,10 @@ const formats: Format[] = [
     fromDate: (date) => date.toUTCString(),
     toDate,
   },
+  {
+    name: 'Mongo ObjectID',
+    fromDate: (date) => Math.floor(date.getTime() / 1000).toString(16) + '0000000000000000',
+    toDate: (objectId) => new Date(parseInt(objectId.substring(0, 8), 16) * 1000),
+  },
 ];
 </script>

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

@@ -11,7 +11,7 @@
       <div>
         <n-space item-style="flex:1 1 0">
           <n-form-item label="Amount of element to consume">
-            <n-input-number v-model:value="unitCount" />
+            <n-input-number v-model:value="unitCount" :min="1" />
           </n-form-item>
           <n-form-item label="The consumption started at">
             <n-date-picker v-model:value="startedAt" type="datetime" />
@@ -19,10 +19,10 @@
         </n-space>
 
         <n-form-item label="Amount of unit consumed by time span" :show-feedback="false">
-          <n-input-number v-model:value="unitPerTimeSpan" />
+          <n-input-number v-model:value="unitPerTimeSpan" :min="1" />
           <span style="margin: 0 10px">in</span>
           <n-input-group>
-            <n-input-number v-model:value="timeSpan" />
+            <n-input-number v-model:value="timeSpan" :min="1" />
             <n-select
               v-model:value="timeSpanUnitMultiplier"
               :options="[
@@ -51,7 +51,10 @@
 </template>
 
 <script setup lang="ts">
+// Duplicate issue with sub directory
+// eslint-disable-next-line import/no-duplicates
 import { addMilliseconds, formatRelative } from 'date-fns';
+// eslint-disable-next-line import/no-duplicates
 import { enGB } from 'date-fns/locale';
 import { computed, ref } from 'vue';
 import { formatMsDuration } from './eta-calculator.service';

src/tools/git-memo/git-memo.vue

@@ -5,8 +5,8 @@
 </template>
 
 <script setup lang="ts">
-import Memo from './git-memo.md';
 import { useThemeVars } from 'naive-ui';
+import Memo from './git-memo.md';
 
 const themeVars = useThemeVars();
 </script>

src/tools/hash-text/hash-text.service.test.ts

@@ -0,0 +1,15 @@
+import { describe, expect, it } from 'vitest';
+import { convertHexToBin } from './hash-text.service';
+
+describe('hash text', () => {
+  describe('convertHexToBin', () => {
+    it('convert hex to bin', () => {
+      expect(convertHexToBin('')).toEqual('');
+      expect(convertHexToBin('FF')).toEqual('11111111');
+      expect(convertHexToBin('F'.repeat(200))).toEqual('1111'.repeat(200));
+      expect(convertHexToBin('2123006AD00F694CE120')).toEqual(
+        '00100001001000110000000001101010110100000000111101101001010011001110000100100000',
+      );
+    });
+  });
+});

src/tools/hash-text/hash-text.service.ts

@@ -0,0 +1,7 @@
+export function convertHexToBin(hex: string) {
+  return hex
+    .trim()
+    .split('')
+    .map((byte) => parseInt(byte, 16).toString(2).padStart(4, '0'))
+    .join('');
+}

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

@@ -1,10 +1,34 @@
 <template>
   <div>
     <n-card>
-      <n-input v-model:value="clearText" type="textarea" placeholder="Your string..." :autosize="{ minRows: 3 }" />
+      <n-input v-model:value="clearText" type="textarea" placeholder="Your string to hash..." rows="3" />
 
       <n-divider />
 
+      <n-form-item label="Digest encoding">
+        <n-select
+          v-model:value="encoding"
+          :options="[
+            {
+              label: 'Binary (base 2)',
+              value: 'Bin',
+            },
+            {
+              label: 'Hexadecimal (base 16)',
+              value: 'Hex',
+            },
+            {
+              label: 'Base64 (base 64)',
+              value: 'Base64',
+            },
+            {
+              label: 'Base64url (base 64 with url safe chars)',
+              value: 'Base64url',
+            },
+          ]"
+        />
+      </n-form-item>
+
       <div v-for="algo in algoNames" :key="algo" style="margin: 5px 0">
         <n-input-group>
           <n-input-group-label style="flex: 0 0 120px"> {{ algo }} </n-input-group-label>
@@ -16,9 +40,10 @@
 </template>
 
 <script setup lang="ts">
-import InputCopyable from '../../components/InputCopyable.vue';
+import { enc, lib, MD5, RIPEMD160, SHA1, SHA224, SHA256, SHA3, SHA384, SHA512 } from 'crypto-js';
 import { ref } from 'vue';
-import { MD5, SHA1, SHA256, SHA224, SHA512, SHA384, SHA3, RIPEMD160 } from 'crypto-js';
+import InputCopyable from '../../components/InputCopyable.vue';
+import { convertHexToBin } from './hash-text.service';
 
 const algos = {
   MD5,
@@ -32,10 +57,18 @@ const algos = {
 } as const;
 
 type AlgoNames = keyof typeof algos;
+type Encoding = keyof typeof enc | 'Bin';
 const algoNames = Object.keys(algos) as AlgoNames[];
+const encoding = ref<Encoding>('Hex');
+const clearText = ref('');
 
-const clearText = ref(
+function formatWithEncoding(words: lib.WordArray, encoding: Encoding) {
-  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lacus metus blandit dolor lacus natoque ad fusce aliquam velit.',
+  if (encoding === 'Bin') {
-);
+    return convertHexToBin(words.toString(enc.Hex));
-const hashText = (algo: AlgoNames, value: string) => algos[algo](value).toString();
+  }
+
+  return words.toString(enc[encoding]);
+}
+
+const hashText = (algo: AlgoNames, value: string) => formatWithEncoding(algos[algo](value), encoding.value);
 </script>

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

@@ -0,0 +1,98 @@
+<template>
+  <div>
+    <n-form-item label="Plain text to compute the hash">
+      <n-input v-model:value="plainText" type="textarea" placeholder="Enter the text to compute the hash..." />
+    </n-form-item>
+    <n-form-item label="Secret key">
+      <n-input v-model:value="secret" placeholder="Enter the secret key..." />
+    </n-form-item>
+    <n-space item-style="flex:1 1 0">
+      <n-form-item label="Hashing function">
+        <n-select
+          v-model:value="hashFunction"
+          placeholder="Select an hashing function..."
+          :options="Object.keys(algos).map((label) => ({ label, value: label }))"
+        />
+      </n-form-item>
+      <n-form-item label="Output encoding">
+        <n-select
+          v-model:value="encoding"
+          placeholder="Select the result encoding..."
+          :options="[
+            {
+              label: 'Binary (base 2)',
+              value: 'Bin',
+            },
+            {
+              label: 'Hexadecimal (base 16)',
+              value: 'Hex',
+            },
+            {
+              label: 'Base64 (base 64)',
+              value: 'Base64',
+            },
+            {
+              label: 'Base64-url (base 64 with url safe chars)',
+              value: 'Base64url',
+            },
+          ]"
+        />
+      </n-form-item>
+    </n-space>
+    <n-form-item label="HMAC of your text">
+      <n-input readonly :value="hmac" type="textarea" placeholder="The result of the HMAC..." />
+    </n-form-item>
+    <n-space justify="center">
+      <n-button secondary @click="copy()">Copy HMAC</n-button>
+    </n-space>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useCopy } from '@/composable/copy';
+import {
+  enc,
+  HmacMD5,
+  HmacRIPEMD160,
+  HmacSHA1,
+  HmacSHA224,
+  HmacSHA256,
+  HmacSHA3,
+  HmacSHA384,
+  HmacSHA512,
+  lib,
+} from 'crypto-js';
+import { computed, ref } from 'vue';
+import { convertHexToBin } from '../hash-text/hash-text.service';
+
+const algos = {
+  MD5: HmacMD5,
+  RIPEMD160: HmacRIPEMD160,
+  SHA1: HmacSHA1,
+  SHA3: HmacSHA3,
+  SHA224: HmacSHA224,
+  SHA256: HmacSHA256,
+  SHA384: HmacSHA384,
+  SHA512: HmacSHA512,
+} as const;
+
+type Encoding = keyof typeof enc | 'Bin';
+
+function formatWithEncoding(words: lib.WordArray, encoding: Encoding) {
+  if (encoding === 'Bin') {
+    return convertHexToBin(words.toString(enc.Hex));
+  }
+  return words.toString(enc[encoding]);
+}
+
+const plainText = ref('');
+const secret = ref('');
+const hashFunction = ref<keyof typeof algos>('SHA256');
+const encoding = ref<Encoding>('Hex');
+const hmac = computed(() =>
+  formatWithEncoding(algos[hashFunction.value](plainText.value, secret.value), encoding.value),
+);
+const { copy } = useCopy({ source: hmac });
+</script>
+
+<style lang="less" scoped></style>

src/tools/hmac-generator/index.ts

@@ -0,0 +1,12 @@
+import { ShortTextRound } from '@vicons/material';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Hmac generator',
+  path: '/hmac-generator',
+  description:
+    'Computes a hash-based message authentication code (HMAC) using a secret key and your favorite hashing function.',
+  keywords: ['hmac', 'generator', 'MD5', 'SHA1', 'SHA256', 'SHA224', 'SHA512', 'SHA384', 'SHA3', 'RIPEMD160'],
+  component: () => import('./hmac-generator.vue'),
+  icon: ShortTextRound,
+});

src/tools/index.ts

@@ -1,6 +1,8 @@
 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';
@@ -16,30 +18,32 @@ import { tool as cypher } from './encryption';
 import { tool as etaCalculator } from './eta-calculator';
 import { tool as gitMemo } from './git-memo';
 import { tool as hashText } from './hash-text';
+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 loremIpsumGenerator } from './lorem-ipsum-generator';
 import { tool as mathEvaluator } from './math-evaluator';
+import { tool as metaTagGenerator } from './meta-tag-generator';
 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 textStatistics } from './text-statistics';
 import { tool as tokenGenerator } from './token-generator';
 import { tool as urlEncoder } from './url-encoder';
 import { tool as urlParser } from './url-parser';
 import { tool as uuidGenerator } from './uuid-generator';
+import type { ToolCategory } from './tools.types';
 
 export const toolsByCategory: ToolCategory[] = [
   {
     name: 'Crypto',
-    icon: LockOpen,
+    components: [tokenGenerator, hashText, bcrypt, uuidGenerator, cypher, bip39, hmacGenerator],
-    components: [tokenGenerator, hashText, bcrypt, uuidGenerator, cypher, bip39],
   },
   {
     name: 'Converter',
-    icon: LockOpen,
     components: [
       dateTimeConverter,
       baseConverter,
@@ -52,27 +56,35 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Web',
-    icon: LockOpen,
+    components: [
-    components: [urlEncoder, htmlEntities, qrCodeGenerator, urlParser, deviceInformation, basicAuthGenerator],
+      urlEncoder,
+      htmlEntities,
+      urlParser,
+      deviceInformation,
+      basicAuthGenerator,
+      metaTagGenerator,
+      otpCodeGeneratorAndValidator,
+      mimeTypes,
+    ],
+  },
+  {
+    name: 'Images',
+    components: [qrCodeGenerator, svgPlaceholderGenerator],
   },
   {
     name: 'Development',
-    icon: LockOpen,
+    components: [gitMemo, randomPortGenerator, crontabGenerator, jsonViewer, sqlPrettify, chmodCalculator],
-    components: [gitMemo, randomPortGenerator, crontabGenerator, jsonViewer, sqlPrettify],
   },
   {
     name: 'Math',
-    icon: LockOpen,
     components: [mathEvaluator, etaCalculator],
   },
   {
     name: 'Measurement',
-    icon: LockOpen,
     components: [chronometer],
   },
   {
     name: 'Text',
-    icon: LockOpen,
     components: [loremIpsumGenerator, textStatistics],
   },
 ];

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

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';
-import { useStyleStore } from '@/stores/style.store';
 
 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>

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

@@ -17,44 +17,28 @@
     />
   </n-form-item>
   <n-form-item label="Prettify version of your json">
-    <n-card class="result-card" :style="`min-height: ${inputElementHeight ?? 400}px`">
+    <textarea-copyable :value="cleanJson" language="json" :follow-height-of="inputElement" />
-      <n-config-provider :hljs="hljs">
-        <n-code :code="cleanJson" language="json" :trim="false" />
-      </n-config-provider>
-      <n-button v-if="cleanJson" class="copy-button" secondary @click="copy">Copy</n-button>
-    </n-card>
   </n-form-item>
 </template>
 
 <script setup lang="ts">
-import { useCopy } from '@/composable/copy';
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
 import { useValidation } from '@/composable/validation';
-import { useElementSize } from '@vueuse/core';
+import { withDefaultOnError } from '@/utils/defaults';
-import hljs from 'highlight.js/lib/core';
+import JSON5 from 'json5';
-import json from 'highlight.js/lib/languages/json';
 import { computed, ref } from 'vue';
 
-hljs.registerLanguage('json', json);
 const inputElement = ref<HTMLElement>();
-const { height: inputElementHeight } = useElementSize(inputElement);
 
 const rawJson = ref('{"hello": "world"}');
-const cleanJson = computed(() => {
+const cleanJson = computed(() => withDefaultOnError(() => JSON.stringify(JSON5.parse(rawJson.value), null, 3), ''));
-  try {
-    return JSON.stringify(JSON.parse(rawJson.value), null, 3);
-  } catch (_) {
-    return '';
-  }
-});
-
-const { copy } = useCopy({ source: cleanJson });
 
 const rawJsonValidation = useValidation({
   source: rawJson,
   rules: [
     {
-      validator: (v) => v === '' || JSON.parse(v),
+      validator: (v) => v === '' || JSON5.parse(v),
-      message: 'Invalid json',
+      message: 'Provided JSON is not valid.',
     },
   ],
 });

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

@@ -30,8 +30,8 @@
 <script setup lang="ts">
 import { useCopy } from '@/composable/copy';
 import { ref, computed } from 'vue';
-import { generateLoremIpsum } from './lorem-ipsum-generator.service';
 import { randIntFromInterval } from '@/utils/random';
+import { generateLoremIpsum } from './lorem-ipsum-generator.service';
 
 const paragraphs = ref(1);
 const sentences = ref([3, 8]);

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

@@ -21,18 +21,13 @@
 </template>
 
 <script setup lang="ts">
+import { withDefaultOnError } from '@/utils/defaults';
 import { evaluate } from 'mathjs';
 import { computed, ref } from 'vue';
 
 const expression = ref('');
 
-const result = computed(() => {
+const result = computed(() => withDefaultOnError(() => evaluate(expression.value) ?? '', ''));
-  try {
-    return evaluate(expression.value) ?? '';
-  } catch (_) {
-    return '';
-  }
-});
 </script>
 
 <style lang="less" scoped></style>

src/tools/meta-tag-generator/OGSchemaType.type.ts

@@ -0,0 +1,27 @@
+import type { SelectGroupOption, SelectOption } from 'naive-ui';
+
+export type { OGSchemaType, OGSchemaTypeElementInput, OGSchemaTypeElementSelect, OGSchemaTypeElementInputMultiple };
+
+interface OGSchemaTypeElementBase {
+  key: string;
+  label: string;
+  placeholder: string;
+}
+
+interface OGSchemaTypeElementInput extends OGSchemaTypeElementBase {
+  type: 'input';
+}
+
+interface OGSchemaTypeElementInputMultiple extends OGSchemaTypeElementBase {
+  type: 'input-multiple';
+}
+
+interface OGSchemaTypeElementSelect extends OGSchemaTypeElementBase {
+  type: 'select';
+  options: Array<SelectOption | SelectGroupOption>;
+}
+
+interface OGSchemaType {
+  name: string;
+  elements: (OGSchemaTypeElementSelect | OGSchemaTypeElementInput | OGSchemaTypeElementInputMultiple)[];
+}

src/tools/meta-tag-generator/index.ts

@@ -0,0 +1,25 @@
+import { Tags } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Open graph meta generator',
+  path: '/og-meta-generator',
+  description: 'Generate open-graph and socials html meta tags for your website.',
+  keywords: [
+    'meta',
+    'tag',
+    'generator',
+    'social',
+    'title',
+    'description',
+    'image',
+    'share',
+    'online',
+    'website',
+    'open',
+    'graph',
+    'og',
+  ],
+  component: () => import('./meta-tag-generator.vue'),
+  icon: Tags,
+});

src/tools/meta-tag-generator/meta-tag-generator.vue

@@ -0,0 +1,94 @@
+<template>
+  <div>
+    <div v-for="{ name, elements } of sections" :key="name" style="margin-bottom: 15px">
+      <n-form-item :label="name" :show-feedback="false"> </n-form-item>
+
+      <n-input-group v-for="{ key, type, label, placeholder, ...element } of elements" :key="key">
+        <n-input-group-label style="flex: 0 0 110px">{{ label }}</n-input-group-label>
+        <n-input v-if="type === 'input'" v-model:value="metadata[key]" :placeholder="placeholder" />
+        <n-dynamic-input
+          v-else-if="type === 'input-multiple'"
+          v-model:value="metadata[key]"
+          :min="1"
+          :placeholder="placeholder"
+          :default-value="['']"
+          :show-sort-button="true"
+        />
+
+        <n-select
+          v-else-if="type === 'select'"
+          v-model:value="metadata[key]"
+          :placeholder="placeholder"
+          :options="(element as OGSchemaTypeElementSelect).options"
+        />
+      </n-input-group>
+    </div>
+  </div>
+  <div>
+    <n-form-item label="Your meta tags">
+      <textarea-copyable :value="metaTags" language="html" />
+    </n-form-item>
+  </div>
+</template>
+
+<script setup lang="ts">
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
+import { generateMeta } from '@it-tools/oggen';
+import _ from 'lodash';
+import { computed, ref, watch } from 'vue';
+import { image, ogSchemas, twitter, website } from './og-schemas';
+import type { OGSchemaType, OGSchemaTypeElementSelect } from './OGSchemaType.type';
+
+// Since type guards do not work in template
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const metadata = ref<{ type: string; [k: string]: any }>({
+  type: 'website',
+  'twitter:card': 'summary_large_image',
+});
+
+watch(
+  () => ref(metadata.value.type),
+  (_ignored, prevSection) => {
+    const section = ogSchemas[prevSection.value];
+
+    if (!section) return;
+
+    section.elements.forEach(({ key }) => {
+      metadata.value[key] = '';
+    });
+  },
+);
+
+const sections = computed(() => {
+  const secs: OGSchemaType[] = [website, image, twitter];
+  const additionalSchema = ogSchemas[metadata.value.type];
+
+  if (additionalSchema) secs.push(additionalSchema);
+
+  return secs;
+});
+
+const metaTags = computed(() => {
+  const twitterMeta = _.chain(metadata.value)
+    .pickBy((_value, k) => k.startsWith('twitter:'))
+    .mapKeys((_value, k) => k.replace(/^twitter:/, ''))
+    .value();
+
+  const otherMeta = _.pickBy(metadata.value, (_value, k) => !k.startsWith('twitter:'));
+
+  return generateMeta({ ...otherMeta, twitter: twitterMeta }, { generateTwitterCompatibleMeta: true });
+});
+</script>
+
+<style lang="less" scoped>
+.n-input-group {
+  margin-bottom: 5px;
+}
+
+::v-deep(.n-form-item-blank) {
+  min-height: 0 !important;
+}
+::v-deep(.n-dynamic-input-item) {
+  margin-bottom: 5px;
+}
+</style>

src/tools/meta-tag-generator/og-schemas/article.ts

@@ -0,0 +1,33 @@
+import type { OGSchemaType } from '../OGSchemaType.type';
+
+export const article: OGSchemaType = {
+  name: 'Article',
+  elements: [
+    {
+      type: 'input',
+      label: 'Publishing date',
+      key: 'article:published_time',
+      placeholder: 'When the article was first published...',
+    },
+    {
+      type: 'input',
+      label: 'Modification date',
+      key: 'article:modified_time',
+      placeholder: 'When the article was last changed...',
+    },
+    {
+      type: 'input',
+      label: 'Expiration date',
+      key: 'article:expiration_time',
+      placeholder: 'When the article is out of date after...',
+    },
+    { type: 'input', label: 'Author', key: 'article:author', placeholder: 'Writers of the article...' },
+    {
+      type: 'input',
+      label: 'Section',
+      key: 'article:section',
+      placeholder: 'A high-level section name. E.g. Technology..',
+    },
+    { type: 'input', label: 'Tag', key: 'article:tag', placeholder: 'Tag words associated with this article...' },
+  ],
+};

src/tools/meta-tag-generator/og-schemas/book.ts

@@ -0,0 +1,16 @@
+import type { OGSchemaType } from '../OGSchemaType.type';
+
+export const book: OGSchemaType = {
+  name: 'Book',
+  elements: [
+    { type: 'input', label: 'Author', key: 'book:author', placeholder: 'Who wrote this book...' },
+    { type: 'input', label: 'ISBN', key: 'book:isbn', placeholder: 'The International Standard Book Number...' },
+    {
+      type: 'input',
+      label: 'Release date',
+      key: 'book:release_date',
+      placeholder: 'The date the book was released...',
+    },
+    { type: 'input', label: 'Tag', key: 'book:tag', placeholder: 'Tag words associated with this book...' },
+  ],
+};

src/tools/meta-tag-generator/og-schemas/image.ts

@@ -0,0 +1,31 @@
+import type { OGSchemaType } from '../OGSchemaType.type';
+
+export const image: OGSchemaType = {
+  name: 'Image',
+  elements: [
+    {
+      type: 'input',
+      label: 'Image url',
+      placeholder: 'The url of your website social image...',
+      key: 'image',
+    },
+    {
+      type: 'input',
+      label: 'Image alt',
+      placeholder: 'The alternative text of your website social image...',
+      key: 'image:alt',
+    },
+    {
+      type: 'input',
+      label: 'Width',
+      placeholder: 'Width in px of your website social image...',
+      key: 'image:width',
+    },
+    {
+      type: 'input',
+      label: 'Height',
+      placeholder: 'Height in px of your website social image...',
+      key: 'image:height',
+    },
+  ],
+};

src/tools/meta-tag-generator/og-schemas/index.ts

@@ -0,0 +1,31 @@
+import type { OGSchemaType } from '../OGSchemaType.type';
+
+import { article } from './article';
+import { book } from './book';
+import { musicAlbum } from './musicAlbum';
+import { musicPlaylist } from './musicPlaylist';
+import { musicRadioStation } from './musicRadioStation';
+import { musicSong } from './musicSong';
+import { profile } from './profile';
+import { videoEpisode } from './videoEpisode';
+import { videoMovie } from './videoMovie';
+import { videoOther } from './videoOther';
+import { videoTVShow } from './videoTVShow';
+
+export * from './image';
+export * from './twitter';
+export * from './website';
+
+export const ogSchemas: Record<string, OGSchemaType> = {
+  'music.song': musicSong,
+  'music.album': musicAlbum,
+  'music.playlist': musicPlaylist,
+  'music.radio_station': musicRadioStation,
+  'video.movie': videoMovie,
+  'video.episode': videoEpisode,
+  'video.tv_show': videoTVShow,
+  'video.other': videoOther,
+  profile,
+  article,
+  book,
+};

src/tools/meta-tag-generator/og-schemas/musicAlbum.ts

@@ -0,0 +1,27 @@
+import type { OGSchemaType } from '../OGSchemaType.type';
+
+export const musicAlbum: OGSchemaType = {
+  name: 'Album details',
+  elements: [
+    { type: 'input', label: 'Song', key: 'music:song', placeholder: 'The song on this album...' },
+    {
+      type: 'input',
+      label: 'Disc',
+      key: 'music:song:disc',
+      placeholder: 'The same as music:album:disc but in reverse...',
+    },
+    {
+      type: 'input',
+      label: 'Track',
+      key: 'music:song:track',
+      placeholder: 'The same as music:album:track but in reverse...',
+    },
+    { type: 'input', label: 'Musician', key: 'music:musician', placeholder: 'The musician that made this song...' },
+    {
+      type: 'input',
+      label: 'Release date',
+      key: 'music:release_date',
+      placeholder: 'The date the album was released...',
+    },
+  ],
+};

src/tools/meta-tag-generator/og-schemas/musicPlaylist.ts

@@ -0,0 +1,21 @@
+import type { OGSchemaType } from '../OGSchemaType.type';
+
+export const musicPlaylist: OGSchemaType = {
+  name: 'Playlist details',
+  elements: [
+    { type: 'input', label: 'Song', key: 'music:song', placeholder: 'The song on this album...' },
+    {
+      type: 'input',
+      label: 'Disc',
+      key: 'music:song:disc',
+      placeholder: 'The same as music:album:disc but in reverse...',
+    },
+    {
+      type: 'input',
+      label: 'Track',
+      key: 'music:song:track',
+      placeholder: 'The same as music:album:track but in reverse...',
+    },
+    { type: 'input', label: 'Creator', key: 'music:creator', placeholder: 'The creator of this playlist...' },
+  ],
+};

src/tools/meta-tag-generator/og-schemas/musicRadioStation.ts

@@ -0,0 +1,8 @@
+import type { OGSchemaType } from '../OGSchemaType.type';
+
+export const musicRadioStation: OGSchemaType = {
+  name: 'Radio station details',
+  elements: [
+    { type: 'input', label: 'Creator', key: 'music:creator', placeholder: 'The creator of this radio station...' },
+  ],
+};

src/tools/meta-tag-generator/og-schemas/musicSong.ts

@@ -0,0 +1,22 @@
+import type { OGSchemaType } from '../OGSchemaType.type';
+
+export const musicSong: OGSchemaType = {
+  name: 'Song details',
+  elements: [
+    { type: 'input', label: 'Duration', placeholder: 'The duration of the song...', key: 'music:duration' },
+    { type: 'input', label: 'Album', placeholder: 'The album this song is from...', key: 'music:album' },
+    {
+      type: 'input',
+      label: 'Disc',
+      placeholder: 'Which disc of the album this song is on...',
+      key: 'music:album:disk',
+    },
+    { type: 'input', label: 'Track', placeholder: ' Which track this song is...', key: 'music:album:track' },
+    {
+      type: 'input-multiple',
+      label: 'Musician',
+      placeholder: 'The musician that made this song...',
+      key: 'music:musician',
+    },
+  ],
+};

src/tools/meta-tag-generator/og-schemas/profile.ts

@@ -0,0 +1,21 @@
+import type { OGSchemaType } from '../OGSchemaType.type';
+
+export const profile: OGSchemaType = {
+  name: 'Profile',
+  elements: [
+    {
+      type: 'input',
+      label: 'First name',
+      placeholder: 'Enter the first name of the person...',
+      key: 'profile:first_name',
+    },
+    {
+      type: 'input',
+      label: 'Last name',
+      placeholder: 'Enter the last name of the person...',
+      key: 'profile:last_name',
+    },
+    { type: 'input', label: 'Username', placeholder: 'Enter the username of the person...', key: 'profile:username' },
+    { type: 'input', label: 'Gender', placeholder: 'Enter the gender of the person...', key: 'profile:gender' },
+  ],
+};

src/tools/meta-tag-generator/og-schemas/twitter.ts

@@ -0,0 +1,31 @@
+import type { OGSchemaType } from '../OGSchemaType.type';
+
+export const twitter: OGSchemaType = {
+  name: 'Twitter',
+  elements: [
+    {
+      type: 'select',
+      options: [
+        { label: 'Summary', value: 'summary' },
+        { label: 'Summary with large image', value: 'summary_large_image' },
+        { label: 'Application', value: 'app' },
+        { label: 'Player', value: 'player' },
+      ],
+      label: '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)...',
+      key: 'twitter:site',
+    },
+    {
+      type: 'input',
+      label: 'Creator acc.',
+      placeholder: 'The name of the twitter account of the creator (ex: @cthmsst)...',
+      key: 'twitter:creator',
+    },
+  ],
+};

src/tools/meta-tag-generator/og-schemas/videoEpisode.ts

@@ -0,0 +1,10 @@
+import type { OGSchemaType } from '../OGSchemaType.type';
+import { videoMovie } from './videoMovie';
+
+export const videoEpisode: OGSchemaType = {
+  name: 'Video episode details',
+  elements: [
+    ...videoMovie.elements,
+    { type: 'input', label: 'Series', key: 'video:series', placeholder: 'Which series this episode belongs to...' },
+  ],
+};

src/tools/meta-tag-generator/og-schemas/videoMovie.ts

@@ -0,0 +1,29 @@
+import type { OGSchemaType } from '../OGSchemaType.type';
+
+export const videoMovie: OGSchemaType = {
+  name: 'Movie details',
+  elements: [
+    {
+      type: 'input-multiple',
+      label: 'Actor',
+      key: 'video:actor',
+      placeholder: 'Name of the actress/actor...',
+    },
+    // { type: 'input', label: 'Actor role', key: 'video:actor:role', placeholder: 'The role they played...' },
+    {
+      type: 'input-multiple',
+      label: 'Director',
+      key: 'video:director',
+      placeholder: 'Name of the director...',
+    },
+    { type: 'input-multiple', label: 'Writer', key: 'video:writer', placeholder: 'Writers of the movie...' },
+    { type: 'input', label: 'Duration', key: 'video:duration', placeholder: "The movie's length in seconds..." },
+    {
+      type: 'input',
+      label: 'Release date',
+      key: 'video:release_date',
+      placeholder: 'The date the movie was released...',
+    },
+    { type: 'input', label: 'Tag', key: 'video:tag', placeholder: 'Tag words associated with this movie...' },
+  ],
+};

src/tools/meta-tag-generator/og-schemas/videoOther.ts

@@ -0,0 +1,7 @@
+import type { OGSchemaType } from '../OGSchemaType.type';
+import { videoMovie } from './videoMovie';
+
+export const videoOther: OGSchemaType = {
+  name: 'Other video details',
+  elements: [...videoMovie.elements],
+};

src/tools/meta-tag-generator/og-schemas/videoTVShow.ts

@@ -0,0 +1,7 @@
+import type { OGSchemaType } from '../OGSchemaType.type';
+import { videoMovie } from './videoMovie';
+
+export const videoTVShow: OGSchemaType = {
+  name: 'TV show details',
+  elements: [...videoMovie.elements],
+};

src/tools/meta-tag-generator/og-schemas/website.ts

@@ -0,0 +1,56 @@
+import type { OGSchemaType } from '../OGSchemaType.type';
+
+const typeOptions = [
+  { label: 'Website', value: 'website' },
+  { label: 'Article', value: 'article' },
+  { label: 'Book', value: 'book' },
+  { label: 'Profile', value: 'profile' },
+  {
+    type: 'group',
+    label: 'Music',
+    key: 'Music',
+    children: [
+      { label: 'Song', value: 'music.song' },
+      { label: 'Music album', value: 'music.album' },
+      { label: 'Playlist', value: 'music.playlist' },
+      { label: 'Radio station', value: 'music.radio_station' },
+    ],
+  },
+  {
+    type: 'group',
+    label: 'Video',
+    key: 'Video',
+    children: [
+      { label: 'Movie', value: 'video.movie' },
+      { label: 'Episode', value: 'video.episode' },
+      { label: 'TV show', value: 'video.tv_show' },
+      { label: 'Other video', value: 'video.other' },
+    ],
+  },
+];
+
+export const website: OGSchemaType = {
+  name: 'General information',
+  elements: [
+    {
+      type: 'select',
+      label: 'Page type',
+      placeholder: 'Select the type of your website...',
+      key: 'type',
+      options: typeOptions,
+    },
+    { type: 'input', label: 'Title', placeholder: 'Enter the title of your website...', key: 'title' },
+    {
+      type: 'input',
+      label: 'Description',
+      placeholder: 'Enter the description of your website...',
+      key: 'description',
+    },
+    {
+      type: 'input',
+      label: 'Page URL',
+      placeholder: 'Enter the url of your website...',
+      key: 'url',
+    },
+  ],
+};

src/tools/mime-types/index.ts

@@ -0,0 +1,11 @@
+import { World } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Mime types',
+  path: '/mime-types',
+  description: 'Convert mime types to extensions and vice-versa.',
+  keywords: ['mime', 'types', 'extension', 'content', 'type'],
+  component: () => import('./mime-types.vue'),
+  icon: World,
+});

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

@@ -0,0 +1,99 @@
+<template>
+  <n-card>
+    <n-h2 style="margin-bottom: 0">Mime type to extension</n-h2>
+    <div style="opacity: 0.8">Now witch file extensions are associated to a mime-type</div>
+    <n-form-item>
+      <n-select
+        v-model:value="selectedMimeType"
+        filterable
+        :options="mimeToExtensionsOptions"
+        size="large"
+        placeholder="Select your mimetype here... (ex: application/pdf)"
+      />
+    </n-form-item>
+
+    <div v-if="extensionsFound.length > 0">
+      Extensions of files with the <n-tag round :bordered="false">{{ selectedMimeType }}</n-tag> mime-type:
+      <div style="margin-top: 10px">
+        <n-tag
+          v-for="extension of extensionsFound"
+          :key="extension"
+          round
+          :bordered="false"
+          type="primary"
+          style="margin-right: 10px"
+        >
+          .{{ extension }}
+        </n-tag>
+      </div>
+    </div>
+  </n-card>
+
+  <n-card>
+    <n-h2 style="margin-bottom: 0">File extension to mime type</n-h2>
+    <div style="opacity: 0.8">Now witch mime type is associated to a file extension</div>
+    <n-form-item>
+      <n-select
+        v-model:value="selectedExtension"
+        filterable
+        :options="extensionToMimeTypeOptions"
+        size="large"
+        placeholder="Select your mimetype here... (ex: application/pdf)"
+      />
+    </n-form-item>
+
+    <div v-if="selectedExtension">
+      Mime type associated to the extension <n-tag round :bordered="false">{{ selectedExtension }}</n-tag> file
+      extension:
+      <div style="margin-top: 10px">
+        <n-tag round :bordered="false" type="primary" style="margin-right: 10px">
+          {{ mimeTypeFound }}
+        </n-tag>
+      </div>
+    </div>
+  </n-card>
+
+  <div>
+    <n-table>
+      <thead>
+        <tr>
+          <th>Mime types</th>
+          <th>Extensions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="{ mimeType, extensions } of mimeInfos" :key="mimeType">
+          <td>{{ mimeType }}</td>
+          <td>
+            <n-tag v-for="extension of extensions" :key="extension" round :bordered="false" style="margin-right: 10px">
+              .{{ extension }}
+            </n-tag>
+          </td>
+        </tr>
+      </tbody>
+    </n-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { types as extensionToMimeType, extensions as mimeTypeToExtension } from 'mime-types';
+import { computed, ref } from 'vue';
+
+const mimeInfos = Object.entries(mimeTypeToExtension).map(([mimeType, extensions]) => ({ mimeType, extensions }));
+
+const mimeToExtensionsOptions = Object.keys(mimeTypeToExtension).map((label) => ({ label, value: label }));
+const selectedMimeType = ref(undefined);
+
+const extensionsFound = computed(() => (selectedMimeType.value ? mimeTypeToExtension[selectedMimeType.value] : []));
+
+const extensionToMimeTypeOptions = Object.keys(extensionToMimeType).map((label) => {
+  const extension = `.${label}`;
+
+  return { label: extension, value: label };
+});
+const selectedExtension = ref(undefined);
+
+const mimeTypeFound = computed(() => (selectedExtension.value ? extensionToMimeType[selectedExtension.value] : []));
+</script>
+
+<style lang="less" scoped></style>

src/tools/otp-code-generator-and-validator/index.ts

@@ -0,0 +1,27 @@
+import { DeviceMobile } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'OTP code generator',
+  path: '/otp-generator',
+  description: 'Generate and validate time-based OTP (one time password) for multi-factor authentication.',
+  keywords: [
+    'otp',
+    'code',
+    'generator',
+    'validator',
+    'one',
+    'time',
+    'password',
+    'authentication',
+    'MFA',
+    'mobile',
+    'device',
+    'security',
+    'TOTP',
+    'Time',
+    'HMAC',
+  ],
+  component: () => import('./otp-code-generator-and-validator.vue'),
+  icon: DeviceMobile,
+});

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

@@ -0,0 +1,140 @@
+<template>
+  <div style="max-width: 350px">
+    <n-form-item label="Secret" v-bind="secretValidationAttrs">
+      <n-input v-model:value="secret" placeholder="Paste your TOTP secret...">
+        <template #suffix>
+          <n-tooltip trigger="hover">
+            <template #trigger>
+              <n-button quaternary circle @click="refreshSecret">
+                <n-icon :component="Refresh" />
+              </n-button>
+            </template>
+            Generate secret token
+          </n-tooltip>
+        </template>
+      </n-input>
+    </n-form-item>
+
+    <div>
+      <token-display :tokens="tokens" style="margin-top: 2px" />
+
+      <n-progress :percentage="(100 * interval) / 30" :color="theme.primaryColor" :show-indicator="false" />
+      <div style="text-align: center">Next in {{ String(Math.floor(30 - interval)).padStart(2, '0') }}s</div>
+    </div>
+    <n-space justify="center" vertical align="center" style="margin-top: 10px">
+      <n-image :src="qrcode"></n-image>
+      <n-button secondary tag="a" :href="keyUri" target="_blank">Open Key URI in new tab</n-button>
+    </n-space>
+  </div>
+  <div style="max-width: 350px">
+    <n-form-item label="Secret in hexadecimal">
+      <input-copyable :value="base32toHex(secret)" readonly placeholder="Secret in hex will be displayed here" />
+    </n-form-item>
+
+    <n-form-item label="Epoch">
+      <input-copyable
+        :value="Math.floor(now / 1000).toString()"
+        readonly
+        placeholder="Epoch in sec will be displayed here"
+      />
+    </n-form-item>
+    <n-form-item label="Iteration" :show-feedback="false">
+      <n-input-group>
+        <n-input-group-label style="width: 110px">Count:</n-input-group-label>
+        <input-copyable
+          :value="String(getCounterFromTime({ now, timeStep: 30 }))"
+          readonly
+          placeholder="Iteration count will be displayed here"
+        />
+      </n-input-group>
+    </n-form-item>
+
+    <n-form-item label="Iteration" :show-label="false" style="margin-top: 5px">
+      <n-input-group>
+        <n-input-group-label style="width: 110px">Padded hex:</n-input-group-label>
+        <input-copyable
+          :value="getCounterFromTime({ now, timeStep: 30 }).toString(16).padStart(16, '0')"
+          readonly
+          placeholder="Iteration count in hex will be displayed here"
+        />
+      </n-input-group>
+    </n-form-item>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { Refresh } from '@vicons/tabler';
+import { useTimestamp, whenever } from '@vueuse/core';
+import { useThemeVars } from 'naive-ui';
+import { useStyleStore } from '@/stores/style.store';
+import InputCopyable from '@/components/InputCopyable.vue';
+import { useValidation } from '@/composable/validation';
+import { generateTOTP, buildKeyUri, generateSecret, base32toHex, getCounterFromTime } from './otp.service';
+import { useQRCode } from '../qr-code-generator/useQRCode';
+import TokenDisplay from './token-display.vue';
+
+const now = useTimestamp();
+const interval = computed(() => (now.value / 1000) % 30);
+const theme = useThemeVars();
+const styleStore = useStyleStore();
+const secret = ref(generateSecret());
+const tokens = ref(buildTokens());
+const keyUri = computed(() => buildKeyUri({ secret: secret.value }));
+
+const { qrcode } = useQRCode({
+  text: keyUri,
+  color: { background: '#00000000', foreground: computed(() => (styleStore.isDarkTheme ? '#ffffff' : '#000000')) },
+  options: { width: 210 },
+});
+
+const { attrs: secretValidationAttrs } = useValidation({
+  source: secret,
+  rules: [
+    {
+      message: 'Secret should be a base32 string',
+      validator: (value) => value.match(/^[A-Z234567]+$/),
+    },
+    {
+      message: 'Please set a secret',
+      validator: (value) => value !== '',
+    },
+  ],
+});
+
+// watch + whenever to prevent token to be refresh every raf
+watch([secret], refreshToken);
+whenever(() => Math.floor(interval.value) === 0, refreshToken);
+
+function refreshSecret() {
+  secret.value = generateSecret();
+}
+
+function refreshToken() {
+  tokens.value = buildTokens();
+}
+
+function buildTokens() {
+  return {
+    previous: generateTOTP({ key: secret.value, now: now.value - 30000 }),
+    current: generateTOTP({ key: secret.value, now: now.value }),
+    next: generateTOTP({ key: secret.value, now: now.value + 30000 }),
+  };
+}
+</script>
+
+<style lang="less" scoped>
+.n-progress {
+  margin-top: 10px;
+  ::v-deep(.n-progress-graph-line-fill) {
+    transition-duration: 0.05s !important;
+  }
+}
+
+.token {
+  text-align: center;
+  &.token-current {
+    font-size: 20px;
+  }
+}
+</style>

src/tools/otp-code-generator-and-validator/otp.service.test.ts

@@ -0,0 +1,124 @@
+import { describe, expect, it } from 'vitest';
+import {
+  generateHOTP,
+  hexToBytes,
+  verifyHOTP,
+  generateTOTP,
+  verifyTOTP,
+  buildKeyUri,
+  base32toHex,
+} from './otp.service';
+
+describe('otp functions', () => {
+  describe('hexToBytes', () => {
+    it('convert an hexstring to a byte array', () => {
+      expect(hexToBytes('1')).to.eql([1]);
+      expect(hexToBytes('ffffff')).to.eql([255, 255, 255]);
+      expect(hexToBytes('000000000')).to.eql([0, 0, 0, 0, 0]);
+      expect(hexToBytes('a3218bcef89')).to.eql([163, 33, 139, 206, 248, 9]);
+      expect(hexToBytes('063679ca')).toEqual([6, 54, 121, 202]);
+      expect(hexToBytes('0102030405060708090a0b0c0d0e0f')).toEqual([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);
+    });
+  });
+  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');
+    });
+  });
+
+  describe('generateHOTP', () => {
+    it('generates HOTP codes for a given counter', () => {
+      const key = 'JBSWY3DPEHPK3PXP';
+      const hotpCodes = ['282760', '996554', '602287', '143627', '960129'];
+
+      for (const [counter, code] of hotpCodes.entries()) {
+        expect(generateHOTP({ key, counter })).to.eql(code);
+      }
+    });
+  });
+
+  describe('verifyHOTP', () => {
+    it('validate hotp for a given secret', () => {
+      const key = 'JBSWY3DPEHPK3PXP';
+      const hotpCodes = ['282760', '996554', '602287', '143627', '960129'];
+
+      for (const [counter, token] of hotpCodes.entries()) {
+        expect(verifyHOTP({ token, key, counter, window: 0 })).to.eql(true);
+      }
+
+      expect(verifyHOTP({ token: 'INVALID', key })).to.eql(false);
+    });
+
+    it('does not validate hotp out of sync', () => {
+      const key = 'JBSWY3DPEHPK3PXP';
+      const token = '282760';
+
+      expect(verifyHOTP({ token, key, counter: 5, window: 2 })).to.eql(false);
+      expect(verifyHOTP({ token, key, counter: 5, window: 5 })).to.eql(true);
+    });
+  });
+
+  describe('generateTOTP', () => {
+    it('generates TOTP codes', () => {
+      const key = 'JBSWY3DPEHPK3PXP';
+
+      const codes = [
+        { token: '282760', now: 0 },
+        { token: '341128', now: 1465324707000 },
+        { token: '089029', now: 1365324707000 },
+      ];
+
+      for (const { token, now } of codes) {
+        expect(generateTOTP({ key, now })).to.eql(token);
+      }
+    });
+  });
+
+  describe('verifyTOTP', () => {
+    it('verify TOTP in sync codes against a key', () => {
+      const key = 'JBSWY3DPEHPK3PXP';
+
+      const codes = [
+        { token: '282760', now: 0 },
+        { token: '341128', now: 1465324707000 },
+        { token: '089029', now: 1365324707000 },
+      ];
+
+      for (const { token, now } of codes) {
+        expect(verifyTOTP({ key, token, now })).to.eql(true);
+      }
+    });
+
+    it('does not validate totp out of sync', () => {
+      const key = 'JBSWY3DPEHPK3PXP';
+      const token = '635183';
+      const now = 1661266455000;
+
+      expect(verifyTOTP({ key, token, now, window: 2 })).to.eql(true);
+      expect(verifyTOTP({ key, token, now, window: 1 })).to.eql(false);
+    });
+  });
+
+  describe('buildKeyUri', () => {
+    it('build a key uri string', () => {
+      expect(buildKeyUri({ secret: 'JBSWY3DPEHPK3PXP' })).to.eql(
+        'otpauth://totp/IT-Tools:demo-user?issuer=IT-Tools&secret=JBSWY3DPEHPK3PXP&algorithm=SHA1&digits=6&period=30',
+      );
+
+      expect(
+        buildKeyUri({
+          secret: 'JBSWY3DPEHPK3PXP',
+          app: 'app-name',
+          account: 'account',
+          algorithm: 'algo',
+          digits: 7,
+          period: 10,
+        }),
+      ).to.eql(
+        'otpauth://totp/app-name:account?issuer=app-name&secret=JBSWY3DPEHPK3PXP&algorithm=algo&digits=7&period=10',
+      );
+    });
+  });
+});

src/tools/otp-code-generator-and-validator/otp.service.ts

@@ -0,0 +1,139 @@
+import { enc, HmacSHA1 } from 'crypto-js';
+import _ from 'lodash';
+import { createToken } from '../token-generator/token-generator.service';
+
+export {
+  generateHOTP,
+  hexToBytes,
+  verifyHOTP,
+  generateTOTP,
+  verifyTOTP,
+  buildKeyUri,
+  generateSecret,
+  base32toHex,
+  getCounterFromTime,
+};
+
+function hexToBytes(hex: string) {
+  return (hex.match(/.{1,2}/g) ?? []).map((char) => parseInt(char, 16));
+}
+
+function computeHMACSha1(message: string, key: string) {
+  return HmacSHA1(enc.Hex.parse(message), enc.Hex.parse(base32toHex(key))).toString(enc.Hex);
+}
+
+function base32toHex(base32: string) {
+  const base32Chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ234567';
+
+  const bits = base32
+    .replace(/=+$/, '')
+    .split('')
+    .map((value) => base32Chars.indexOf(value).toString(2).padStart(5, '0'))
+    .join('');
+
+  const hex = (bits.match(/.{1,8}/g) ?? []).map((chunk) => parseInt(chunk, 2).toString(16).padStart(2, '0')).join('');
+
+  return hex;
+}
+
+function generateHOTP({ key, counter = 0 }: { key: string; counter?: number }) {
+  // Compute HMACdigest
+  const digest = computeHMACSha1(counter.toString(16).padStart(16, '0'), key);
+
+  // Get byte array
+  const bytes = hexToBytes(digest);
+
+  // Truncate
+  const offset = bytes[19] & 0xf;
+  const v =
+    ((bytes[offset] & 0x7f) << 24) |
+    ((bytes[offset + 1] & 0xff) << 16) |
+    ((bytes[offset + 2] & 0xff) << 8) |
+    (bytes[offset + 3] & 0xff);
+
+  const code = String(v % 1000000).padStart(6, '0');
+
+  return code;
+}
+
+function verifyHOTP({
+  token,
+  key,
+  window = 0,
+  counter = 0,
+}: {
+  token: string;
+  key: string;
+  window?: number;
+  counter?: number;
+}) {
+  for (let i = counter - window; i <= counter + window; ++i) {
+    if (generateHOTP({ key, counter: i }) === token) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+function getCounterFromTime({ now, timeStep }: { now: number; timeStep: number }) {
+  return Math.floor(now / 1000 / timeStep);
+}
+
+function generateTOTP({ key, now = Date.now(), timeStep = 30 }: { key: string; now?: number; timeStep?: number }) {
+  const counter = getCounterFromTime({ now, timeStep });
+
+  return generateHOTP({ key, counter });
+}
+
+function verifyTOTP({
+  key,
+  token,
+  window = 0,
+  now = Date.now(),
+  timeStep = 30,
+}: {
+  token: string;
+  key: string;
+  window?: number;
+  now?: number;
+  timeStep?: number;
+}) {
+  const counter = getCounterFromTime({ now, timeStep });
+
+  return verifyHOTP({ token, key, window, counter });
+}
+
+function buildKeyUri({
+  secret,
+  app = 'IT-Tools',
+  account = 'demo-user',
+  algorithm = 'SHA1',
+  digits = 6,
+  period = 30,
+}: {
+  secret: string;
+  app?: string;
+  account?: string;
+  algorithm?: string;
+  digits?: number;
+  period?: number;
+}) {
+  const params = {
+    issuer: app,
+    secret,
+    algorithm,
+    digits,
+    period,
+  };
+
+  const paramsString = _(params)
+    .map((value, key) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
+    .join('&');
+
+  return `otpauth://totp/${encodeURIComponent(app)}:${encodeURIComponent(account)}?${paramsString}`;
+}
+
+function generateSecret() {
+  return createToken({ length: 16, alphabet: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ234567' });
+}

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

@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <n-space class="labels" item-style="flex: 1 1 0" style="width: 100%" align="center">
+      <div style="text-align: left">Previous</div>
+      <div style="text-align: center">Current OTP</div>
+      <div style="text-align: right">Next</div>
+    </n-space>
+    <n-input-group>
+      <n-tooltip trigger="hover" placement="bottom">
+        <template #trigger>
+          <n-button secondary @click.prevent="copyPrevious(tokens.previous)">{{ tokens.previous }}</n-button>
+        </template>
+        <div>{{ previousCopied ? 'Copied !' : 'Copy previous OTP' }}</div>
+      </n-tooltip>
+      <n-tooltip trigger="hover" placement="bottom">
+        <template #trigger>
+          <n-button tertiary type="primary" class="current-otp" @click.prevent="copyCurrent(tokens.current)">
+            {{ tokens.current }}
+          </n-button>
+        </template>
+        <div>{{ currentCopied ? 'Copied !' : 'Copy current OTP' }}</div>
+      </n-tooltip>
+      <n-tooltip trigger="hover" placement="bottom">
+        <template #trigger>
+          <n-button secondary @click.prevent="copyNext(tokens.next)">{{ tokens.next }}</n-button>
+        </template>
+        <div>{{ nextCopied ? 'Copied !' : 'Copy next OTP' }}</div>
+      </n-tooltip>
+    </n-input-group>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useClipboard } from '@vueuse/core';
+import { toRefs } from 'vue';
+
+const { copy: copyPrevious, copied: previousCopied } = useClipboard();
+const { copy: copyCurrent, copied: currentCopied } = useClipboard();
+const { copy: copyNext, copied: nextCopied } = useClipboard();
+
+const props = defineProps<{ tokens: { previous: string; current: string; next: string } }>();
+const { tokens } = toRefs(props);
+</script>
+
+<style scoped lang="less">
+.current-otp {
+  font-size: 22px;
+  flex: 1 0 35% !important;
+}
+
+.n-button {
+  height: 45px;
+}
+
+.labels {
+  div {
+    text-align: center;
+    padding: 0 2px 6px 2px;
+    line-height: 1.25;
+  }
+}
+
+.n-input-group > * {
+  flex: 1 0 0;
+}
+</style>

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

@@ -32,9 +32,9 @@
 
 <script setup lang="ts">
 import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
-import { useQRCode } from './useQRCode';
 import { ref } from 'vue';
 import type { QRCodeErrorCorrectionLevel } from 'qrcode';
+import { useQRCode } from './useQRCode';
 
 const foreground = ref('#000000ff');
 const background = ref('#ffffffff');

src/tools/qr-code-generator/useQRCode.ts

@@ -1,5 +1,6 @@
+import { get, type MaybeRef } from '@vueuse/core';
 import QRCode, { type QRCodeErrorCorrectionLevel, type QRCodeToDataURLOptions } from 'qrcode';
-import { ref, watch, type Ref } from 'vue';
+import { ref, watch, isRef } from 'vue';
 
 export function useQRCode({
   text,
@@ -7,24 +8,24 @@ export function useQRCode({
   errorCorrectionLevel,
   options,
 }: {
-  text: Ref<string>;
+  text: MaybeRef<string>;
-  color: { foreground: Ref<string>; background: Ref<string> };
+  color: { foreground: MaybeRef<string>; background: MaybeRef<string> };
-  errorCorrectionLevel: Ref<QRCodeErrorCorrectionLevel>;
+  errorCorrectionLevel?: MaybeRef<QRCodeErrorCorrectionLevel>;
   options?: QRCodeToDataURLOptions;
 }) {
   const qrcode = ref('');
 
   watch(
-    [text, background, foreground, errorCorrectionLevel],
+    [text, background, foreground, errorCorrectionLevel].filter(isRef),
     async () => {
-      if (text.value)
+      if (get(text))
-        qrcode.value = await QRCode.toDataURL(text.value, {
+        qrcode.value = await QRCode.toDataURL(get(text), {
           color: {
-            dark: foreground.value,
+            dark: get(foreground),
-            light: background.value,
+            light: get(background),
             ...options?.color,
           },
-          errorCorrectionLevel: errorCorrectionLevel.value,
+          errorCorrectionLevel: get(errorCorrectionLevel) ?? 'M',
           ...options,
         });
     },

src/tools/sql-prettify/sql-prettify.vue

@@ -58,27 +58,17 @@
     />
   </n-form-item>
   <n-form-item label="Prettify version of your query">
-    <n-card class="result-card" :style="`min-height: ${inputElementHeight ?? 400}px`">
+    <textarea-copyable :value="prettySQL" language="sql" :follow-height-of="inputElement" />
-      <n-config-provider :hljs="hljs">
-        <n-code :code="prettySQL" language="sql" :trim="false" />
-      </n-config-provider>
-      <n-button v-if="prettySQL" class="copy-button" secondary @click="copy">Copy</n-button>
-    </n-card>
   </n-form-item>
 </template>
 
 <script setup lang="ts">
-import { useCopy } from '@/composable/copy';
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
 import { useStyleStore } from '@/stores/style.store';
-import { useElementSize } from '@vueuse/core';
-import hljs from 'highlight.js/lib/core';
-import sqlHljs from 'highlight.js/lib/languages/sql';
 import { format as formatSQL, type FormatFnOptions } from 'sql-formatter';
 import { computed, reactive, ref } from 'vue';
-hljs.registerLanguage('sql', sqlHljs);
 
 const inputElement = ref<HTMLElement>();
-const { height: inputElementHeight } = useElementSize(inputElement);
 const styleStore = useStyleStore();
 const config = reactive<Partial<FormatFnOptions>>({
   keywordCase: 'upper',
@@ -90,7 +80,6 @@ const config = reactive<Partial<FormatFnOptions>>({
 
 const rawSQL = ref('select field1,field2,field3 from my_table where my_condition;');
 const prettySQL = computed(() => formatSQL(rawSQL.value, config));
-const { copy } = useCopy({ source: prettySQL });
 </script>
 
 <style lang="less" scoped>

src/tools/svg-placeholder-generator/index.ts

@@ -0,0 +1,11 @@
+import { ImageOutlined } from '@vicons/material';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'SVG placeholder generator',
+  path: '/svg-placeholder-generator',
+  description: 'Generate svg images to use as placeholder in your applications.',
+  keywords: ['svg', 'placeholder', 'generator', 'image', 'size', 'mockup'],
+  component: () => import('./svg-placeholder-generator.vue'),
+  icon: ImageOutlined,
+});

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

@@ -0,0 +1,90 @@
+<template>
+  <div>
+    <n-form label-placement="left" label-width="100">
+      <n-space item-style="flex:1 1 0">
+        <n-form-item label="Width (in px)">
+          <n-input-number v-model:value="width" placeholder="SVG width..." min="1" />
+        </n-form-item>
+        <n-form-item label="Background">
+          <n-color-picker v-model:value="bgColor" :modes="['hex']" />
+        </n-form-item>
+      </n-space>
+      <n-space item-style="flex:1 1 0">
+        <n-form-item label="Height (in px)">
+          <n-input-number v-model:value="height" placeholder="SVG height..." min="1" />
+        </n-form-item>
+        <n-form-item label="Text color">
+          <n-color-picker v-model:value="fgColor" :modes="['hex']" />
+        </n-form-item>
+      </n-space>
+      <n-space item-style="flex:1 1 0">
+        <n-form-item label="Font size">
+          <n-input-number v-model:value="fontSize" placeholder="Font size..." min="1" />
+        </n-form-item>
+        <n-form-item label="Custom text">
+          <n-input v-model:value="customText" :placeholder="`Default is ${width}x${height}`" />
+        </n-form-item>
+      </n-space>
+      <n-form-item label="Use exact size" label-placement="left">
+        <n-switch v-model:value="useExactSize" />
+      </n-form-item>
+    </n-form>
+
+    <n-form-item label="SVG HTML element">
+      <textarea-copyable :value="svgString" copy-placement="none" />
+    </n-form-item>
+    <n-form-item label="SVG in Base64">
+      <textarea-copyable :value="base64" copy-placement="none" />
+    </n-form-item>
+
+    <n-space justify="center">
+      <n-button secondary @click="copySVG()">Copy svg</n-button>
+      <n-button secondary @click="copyBase64()">Copy base64</n-button>
+      <n-button secondary @click="download()">Download svg</n-button>
+    </n-space>
+  </div>
+
+  <n-space vertical justify="start">
+    <img :src="base64" alt="Image" />
+  </n-space>
+</template>
+
+<script setup lang="ts">
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
+import { useCopy } from '@/composable/copy';
+import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
+import { textToBase64 } from '@/utils/base64';
+import { computed, ref } from 'vue';
+
+const width = ref(600);
+const height = ref(350);
+const fontSize = ref(26);
+const bgColor = ref('#cccccc');
+const fgColor = ref('#333333');
+const useExactSize = ref(true);
+const customText = ref('');
+const svgString = computed(() => {
+  const w = width.value;
+  const h = height.value;
+  const text = customText.value.length > 0 ? customText.value : `${w}x${h}`;
+  const size = useExactSize.value ? ` width="${w}" height="${h}"` : '';
+
+  return `
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${w} ${h}"${size}>
+  <rect width="${w}" height="${h}" fill="${bgColor.value}"></rect>
+  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="monospace" font-size="${fontSize.value}px" fill="${fgColor.value}">${text}</text>   
+</svg>
+  `.trim();
+});
+const base64 = computed(() => 'data:image/svg+xml;base64,' + textToBase64(svgString.value));
+
+const { copy: copySVG } = useCopy({ source: svgString });
+const { copy: copyBase64 } = useCopy({ source: base64 });
+const { download } = useDownloadFileFromBase64({ source: base64 });
+</script>
+
+<style lang="less" scoped>
+.n-input-number {
+  width: 100%;
+}
+</style>

src/tools/token-generator/token-generator.service.ts

@@ -6,19 +6,23 @@ export function createToken({
   withNumbers = true,
   withSymbols = false,
   length = 64,
+  alphabet,
 }: {
   withUppercase?: boolean;
   withLowercase?: boolean;
   withNumbers?: boolean;
   withSymbols?: boolean;
   length?: number;
+  alphabet?: string;
 }) {
-  const alphabet = [
+  const allAlphabet =
-    ...(withUppercase ? 'ABCDEFGHIJKLMOPQRSTUVWXYZ' : ''),
+    alphabet ??
-    ...(withLowercase ? 'abcdefghijklmopqrstuvwxyz' : ''),
+    [
-    ...(withNumbers ? '0123456789' : ''),
+      ...(withUppercase ? 'ABCDEFGHIJKLMOPQRSTUVWXYZ' : ''),
-    ...(withSymbols ? '.,;:!?./-"\'#{([-|\\@)]=}*+' : ''),
+      ...(withLowercase ? 'abcdefghijklmopqrstuvwxyz' : ''),
-  ].join('');
+      ...(withNumbers ? '0123456789' : ''),
+      ...(withSymbols ? '.,;:!?./-"\'#{([-|\\@)]=}*+' : ''),
+    ].join('');
 
-  return shuffleString(alphabet.repeat(length)).substring(0, length);
+  return shuffleString(allAlphabet.repeat(length)).substring(0, length);
 }

src/tools/tool.ts

@@ -1,27 +1,10 @@
 import { config } from '@/config';
-import type { Component } from 'vue';
+import type { Tool } from './tools.types';
-
-export interface ITool {
-  name: string;
-  path: string;
-  description: string;
-  keywords: string[];
-  component: () => Promise<Component>;
-  icon: Component;
-  redirectFrom?: string[];
-  isNew: boolean;
-}
-
-export interface ToolCategory {
-  name: string;
-  icon: Component;
-  components: ITool[];
-}
 
 type WithOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
 
 export function defineTool(
-  tool: WithOptional<ITool, 'isNew'>,
+  tool: WithOptional<Tool, 'isNew'>,
   { newTools }: { newTools: string[] } = { newTools: config.tools.newTools },
 ) {
   const isNew = newTools.includes(tool.name);

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

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

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

@@ -60,29 +60,18 @@
 <script setup lang="ts">
 import { useCopy } from '@/composable/copy';
 import { useValidation } from '@/composable/validation';
+import { isNotThrowing } from '@/utils/boolean';
+import { withDefaultOnError } from '@/utils/defaults';
 import { computed, ref } from 'vue';
 
 const encodeInput = ref('Hello world :)');
-const encodeOutput = computed(() => {
+const encodeOutput = computed(() => withDefaultOnError(() => encodeURIComponent(encodeInput.value), ''));
-  try {
-    return encodeURIComponent(encodeInput.value);
-  } catch (_) {
-    return '';
-  }
-});
 
 const encodedValidation = useValidation({
   source: encodeInput,
   rules: [
     {
-      validator: (value) => {
+      validator: (value) => isNotThrowing(() => encodeURIComponent(value)),
-        try {
-          encodeURIComponent(value);
-          return true;
-        } catch (_) {
-          return false;
-        }
-      },
       message: 'Impossible to parse this string',
     },
   ],
@@ -91,27 +80,13 @@ const encodedValidation = useValidation({
 const { copy: copyEncoded } = useCopy({ source: encodeOutput, text: 'Encoded string copied to the clipboard' });
 
 const decodeInput = ref('Hello%20world%20%3A)');
-
+const decodeOutput = computed(() => withDefaultOnError(() => decodeURIComponent(decodeInput.value), ''));
-const decodeOutput = computed(() => {
-  try {
-    return decodeURIComponent(decodeInput.value);
-  } catch (_) {
-    return '';
-  }
-});
 
 const decodeValidation = useValidation({
   source: encodeInput,
   rules: [
     {
-      validator: (value) => {
+      validator: (value) => isNotThrowing(() => decodeURIComponent(value)),
-        try {
-          decodeURIComponent(value);
-          return true;
-        } catch (_) {
-          return false;
-        }
-      },
       message: 'Impossible to parse this string',
     },
   ],

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

@@ -27,31 +27,21 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue';
-import { SubdirectoryArrowRightRound } from '@vicons/material';
-import InputCopyable from '../../components/InputCopyable.vue';
 import { useValidation } from '@/composable/validation';
+import { isNotThrowing } from '@/utils/boolean';
+import { withDefaultOnError } from '@/utils/defaults';
+import { SubdirectoryArrowRightRound } from '@vicons/material';
+import { computed, ref } from 'vue';
+import InputCopyable from '../../components/InputCopyable.vue';
 
 const urlToParse = ref('https://me:pwd@it-tools.tech:3000/url-parser?key1=value&key2=value2#the-hash');
-const urlParsed = computed<URL | undefined>(() => {
+
-  try {
+const urlParsed = computed(() => withDefaultOnError(() => new URL(urlToParse.value), undefined));
-    return new URL(urlToParse.value);
-  } catch (_) {
-    return undefined;
-  }
-});
 const validation = useValidation({
   source: urlToParse,
   rules: [
     {
-      validator: (value) => {
+      validator: (value) => isNotThrowing(() => new URL(value)),
-        try {
-          new URL(value);
-          return true;
-        } catch (_) {
-          return false;
-        }
-      },
       message: 'Invalid url',
     },
   ],

src/utils/base64.test.ts

@@ -0,0 +1,69 @@
+import { describe, expect, it } from 'vitest';
+import { base64ToText, isValidBase64, removePotentialDataAndMimePrefix, textToBase64 } from './base64';
+
+describe('base64 utils', () => {
+  describe('textToBase64', () => {
+    it('should convert string into base64', () => {
+      expect(textToBase64('')).to.eql('');
+      expect(textToBase64('a')).to.eql('YQ==');
+      expect(textToBase64('lorem ipsum')).to.eql('bG9yZW0gaXBzdW0=');
+      expect(textToBase64('-1')).to.eql('LTE=');
+    });
+  });
+
+  describe('base64ToText', () => {
+    it('should convert base64 into text', () => {
+      expect(base64ToText('')).to.eql('');
+      expect(base64ToText('YQ==')).to.eql('a');
+      expect(base64ToText('bG9yZW0gaXBzdW0=')).to.eql('lorem ipsum');
+      expect(base64ToText('data:text/plain;base64,bG9yZW0gaXBzdW0=')).to.eql('lorem ipsum');
+      expect(base64ToText('LTE=')).to.eql('-1');
+    });
+
+    it('should throw for incorrect base64 string', () => {
+      expect(() => base64ToText('a')).to.throw('Incorrect base64 string');
+      expect(() => base64ToText(' ')).to.throw('Incorrect base64 string');
+      expect(() => base64ToText('é')).to.throw('Incorrect base64 string');
+      // missing final '='
+      expect(() => base64ToText('bG9yZW0gaXBzdW0')).to.throw('Incorrect base64 string');
+    });
+  });
+
+  describe('isValidBase64', () => {
+    it('should return true for correct base64 string', () => {
+      expect(isValidBase64('')).to.eql(true);
+      expect(isValidBase64('bG9yZW0gaXBzdW0=')).to.eql(true);
+      expect(isValidBase64('LTE=')).to.eql(true);
+      expect(isValidBase64('YQ==')).to.eql(true);
+      expect(isValidBase64('data:text/plain;base64,YQ==')).to.eql(true);
+    });
+
+    it('should return false for incorrect base64 string', () => {
+      expect(isValidBase64('a')).to.eql(false);
+      expect(isValidBase64(' ')).to.eql(false);
+      expect(isValidBase64('é')).to.eql(false);
+      expect(isValidBase64('data:text/plain;notbase64,YQ==')).to.eql(false);
+      // missing final '='
+      expect(isValidBase64('bG9yZW0gaXBzdW0')).to.eql(false);
+    });
+
+    it('should return false for untrimmed correct base64 string', () => {
+      expect(isValidBase64('bG9yZW0gaXBzdW0= ')).to.eql(false);
+      expect(isValidBase64(' LTE=')).to.eql(false);
+      expect(isValidBase64(' YQ== ')).to.eql(false);
+    });
+  });
+
+  describe('removePotentialDataAndMimePrefix', () => {
+    it('should remove data prefix of string', () => {
+      expect(removePotentialDataAndMimePrefix('')).to.eql('');
+      expect(removePotentialDataAndMimePrefix('lorem ipsum')).to.eql('lorem ipsum');
+      expect(removePotentialDataAndMimePrefix('bG9yZW0gaXBzdW0=')).to.eql('bG9yZW0gaXBzdW0=');
+      expect(removePotentialDataAndMimePrefix('data:image/jpeg;base64,lorem')).to.eql('lorem');
+      expect(removePotentialDataAndMimePrefix('data:image/jpeg;notbase64,lorem')).to.eql(
+        'data:image/jpeg;notbase64,lorem',
+      );
+      expect(removePotentialDataAndMimePrefix('data:unknownmime;base64,lorem')).to.eql('lorem');
+    });
+  });
+});