chore(release): 2.10.2

* Device information page styling fix

I was checking out your site, and really like it! already added to my bookmarks, and when I was on the Device Information page I noticed the `p` and `y` in the words 1 dppx and landscape-primary were cut off and my ocd kicked in to tweak it.
The fix was to remove the line height set on the value, and then to keep the spacing how it was just moving it up 5px seemed to do the trick.

I'm using Firefox 102.0.1 on Windows 11. I'll attach some pics so you can see the before and after.

I've never messed with vue, but after looking at this file here ya make me want to check it out more. I love how its keeping it all together in one file.
Might also need to rebuild it the site after this change, but you get the point. 

Awesome site!

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

Co-authored-by: Corentin THOMASSET <corentin.thomasset74@gmail.com>

.eslintrc.cjs

@@ -7,23 +7,28 @@ 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,
-        semi: true,
-        tabWidth: 2,
-        trailingComma: 'all',
-        printWidth: 120,
+        js: 'never',
+        ts: 'never',
       },
     ],
   },

.prettierrc

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

CHANGELOG.md

@@ -2,6 +2,83 @@
 
 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.10.2](https://github.com/CorentinTh/it-tools/compare/v2.10.1...v2.10.2) (2022-08-04)
+
+
+### Refactors
+
+* **dry:** mutualised duplicated code with withDefaultOnError ([f6cd9b7](https://github.com/CorentinTh/it-tools/commit/f6cd9b76d38800e1a1f63d07152fc96cda562795))
+* **home:** removed new tool first sort ([d30cd8a](https://github.com/CorentinTh/it-tools/commit/d30cd8a9abc3298c0a0b05f249e54318bb4537f2))
+* **json-prettifier:** more permissive json parser ([8089c60](https://github.com/CorentinTh/it-tools/commit/8089c60000000c42c821c6586c128d3d2b248885))
+* **lint:** added import rules ([208a373](https://github.com/CorentinTh/it-tools/commit/208a373fd08ac550778745eb6e4536bf02537da7))
+
+### [2.10.1](https://github.com/CorentinTh/it-tools/compare/v2.10.0...v2.10.1) (2022-08-04)
+
+
+### Bug Fixes
+
+* **bip39-generator:** cleared an issue with the mnemonic validation ([ca7cb44](https://github.com/CorentinTh/it-tools/commit/ca7cb4438972ca09f28a6a40332ec94ceaa4aab4))
+* **import:** removed auto added weird .js extension ([fda0b0c](https://github.com/CorentinTh/it-tools/commit/fda0b0ca25c1733542a4e797ac1a2150c546a660))
+
+
+### Refactors
+
+* **base64:** mutualized base64 functions into global utilities ([447bdf2](https://github.com/CorentinTh/it-tools/commit/447bdf2148098d70ba309e13d9b1e846b5064da1))
+* **chronometer:** improved chronometer precision ([e48d60b](https://github.com/CorentinTh/it-tools/commit/e48d60b1ed19279f48441743f7ed69e8fd915011))
+
+## [2.10.0](https://github.com/CorentinTh/it-tools/compare/v2.9.2...v2.10.0) (2022-08-03)
+
+
+### Features
+
+* **hash-text:** digest base selector ([#254](https://github.com/CorentinTh/it-tools/issues/254)) ([422b6eb](https://github.com/CorentinTh/it-tools/commit/422b6eb05a2fb5e7eec816a6bd2d37b53e4a6bdc))
+* **new-tool:** an svg placeholder image generator ([129f74c](https://github.com/CorentinTh/it-tools/commit/129f74c371eaf09fdc3a19afb709cee40b7aaf7f))
+* **new-tool:** hmac generator ([1bc6380](https://github.com/CorentinTh/it-tools/commit/1bc6380c6fdd7a9b500422a54bc508ab5557eb46))
+
+
+### Bug Fixes
+
+* **base64-to-string:** prevent validation error ([8a9e788](https://github.com/CorentinTh/it-tools/commit/8a9e7888dec41364c8c17b1234adcdc0616612b0))
+* **bip39-generator:** typo in validation message ([7570ad9](https://github.com/CorentinTh/it-tools/commit/7570ad965602233f860b9e03177a5b9dacf1b034))
+* **eta-calculator:** clamp inputs ([#249](https://github.com/CorentinTh/it-tools/issues/249)) ([531a25c](https://github.com/CorentinTh/it-tools/commit/531a25c1c4892835633ba5635c6ee48e1fbef31c))
+* **wording:** removed spaces before ponctuation ([#252](https://github.com/CorentinTh/it-tools/issues/252)) ([5f03619](https://github.com/CorentinTh/it-tools/commit/5f03619ab44c0b35455c46698ec37d79e87555b5))
+
+
+### Refactors
+
+* **base64-to-file:** clean validation to convert base64 to file ([750a76b](https://github.com/CorentinTh/it-tools/commit/750a76b00fb79c0e9c2851c112141158ee0ffab1))
+* **display:** mutualized code display ([0be33fb](https://github.com/CorentinTh/it-tools/commit/0be33fb337e8d82474922c0fdf9555aa328cd729))
+* **lint:** externalization of prettier for simpler IDE support ([02c4963](https://github.com/CorentinTh/it-tools/commit/02c49635315661ca08deb0859c5ba33113368b9b))
+* **validation:** simplified validation system ([77b5b0c](https://github.com/CorentinTh/it-tools/commit/77b5b0cab50a05dcb419ce87d74517d82e7cd2c0))
+
+### [2.9.2](https://github.com/CorentinTh/it-tools/compare/v2.9.1...v2.9.2) (2022-07-28)
+
+
+### Bug Fixes
+
+* **base64-file:** fixed url slug ([412de23](https://github.com/CorentinTh/it-tools/commit/412de23796babbc080b0768a75029ff2ddf2acfc))
+* **device-information:** handle of unknown values ([4f599b6](https://github.com/CorentinTh/it-tools/commit/4f599b699901a93444bcc67cbb3b3556a0561ae4))
+* **device-information:** prevent unwanted y-truncature of text  ([138149e](https://github.com/CorentinTh/it-tools/commit/138149e6f0be91255907a6083887898e5c68882e))
+
+
+### Refactors
+
+* **base64-file:** fixed typo ([1a22d55](https://github.com/CorentinTh/it-tools/commit/1a22d55b3c48f58b05b5a50de4fea260e781fbef))
+
+### [2.9.1](https://github.com/CorentinTh/it-tools/compare/v2.9.0...v2.9.1) (2022-07-25)
+
+
+### Refactors
+
+* **base64:** split base64 text and file conversion in two tools + base64 to file ([e6953d1](https://github.com/CorentinTh/it-tools/commit/e6953d1b67b81a6d3c19973b706f29637c421f98))
+
+## [2.9.0](https://github.com/CorentinTh/it-tools/compare/v2.8.0...v2.9.0) (2022-07-25)
+
+
+### Features
+
+* **new-tool:** added a basic auth generator ([bdee93a](https://github.com/CorentinTh/it-tools/commit/bdee93a9e45c6b46e7f75cdcbe1907f138722dca))
+
 ## [2.8.0](https://github.com/CorentinTh/it-tools/compare/v2.7.0...v2.8.0) (2022-07-24)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "it-tools",
-  "version": "2.8.0",
+  "version": "2.10.2",
   "description": "Collection of handy online tools for developers, with great UX. ",
   "keywords": [
     "productivity",
@@ -47,6 +47,7 @@
     "highlight.js": "^11.5.1",
     "lodash": "^4.17.21",
     "mathjs": "^10.6.0",
+    "mime-types": "^2.1.35",
     "naive-ui": "^2.31.0",
     "pinia": "^2.0.11",
     "plausible-tracker": "^0.3.5",
@@ -62,10 +63,12 @@
     "@types/bcryptjs": "^2.4.2",
     "@types/crypto-js": "^4.1.1",
     "@types/jsdom": "^16.2.14",
+    "@types/mime-types": "^2.1.1",
     "@types/node": "^16.11.25",
     "@types/qrcode": "^1.4.2",
     "@types/randombytes": "^2.0.0",
     "@types/uuid": "^8.3.4",
+    "@typescript-eslint/parser": "^5.32.0",
     "@vitejs/plugin-vue": "^2.2.2",
     "@vitejs/plugin-vue-jsx": "^1.3.7",
     "@vue/eslint-config-prettier": "^7.0.0",
@@ -74,6 +77,9 @@
     "@vue/tsconfig": "^0.1.3",
     "c8": "^7.11.0",
     "eslint": "^8.5.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-import-resolver-typescript": "^3.4.0",
+    "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-vue": "^8.2.0",
     "jsdom": "^19.0.0",
     "less": "^4.1.2",

src/App.vue

@@ -1,9 +1,9 @@
 <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();

src/components/TextareaCopyable.vue

@@ -0,0 +1,98 @@
+<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 { ref, toRefs } from 'vue';
+
+hljs.registerLanguage('sql', sqlHljs);
+hljs.registerLanguage('json', jsonHljs);
+
+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/composable/downloadBase64.ts

@@ -1,11 +1,36 @@
+import { extension as getExtensionFromMime } from 'mime-types';
 import type { Ref } from 'vue';
 
-export function useDownloadFileFromBase64({ source, filename = 'file' }: { source: Ref<string>; filename?: string }) {
+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 base64String = source.value;
+
+      if (base64String === '') {
+        throw new Error('Base64 string is empty');
+      }
+
+      const cleanFileName = filename ?? `file.${getFileExtensionFromBase64({ base64String })}`;
+
       const a = document.createElement('a');
-      a.href = source.value;
-      a.download = filename;
+      a.href = base64String;
+      a.download = cleanFileName;
       a.click();
     },
   };

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> = {
-  validator: (value: T) => boolean;
-  message: string;
-};
+type ValidatorReturnType = unknown;
 
-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], () => {
-    state.message = '';
-    state.status = undefined;
+  watch(
+    [source],
+    () => {
+      state.message = '';
+      state.status = undefined;
 
-    for (const rule of rules) {
-      if (isFalsyOrHasThrown(() => rule.validator(source.value))) {
-        state.message = rule.message;
-        state.status = 'error';
+      for (const rule of rules) {
+        if (isFalsyOrHasThrown(() => rule.validator(source.value))) {
+          state.message = rule.message;
+          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

@@ -4,14 +4,14 @@ import { 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 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';
+import SearchBar from '../components/SearchBar.vue';
+import HeroGradient from '../assets/hero-gradient.svg?component';
+import MenuLayout from '../components/MenuLayout.vue';
+import NavbarButtons from '../components/NavbarButtons.vue';
 
 const themeVars = useThemeVars();
 const route = useRoute();

src/layouts/tool.layout.vue

@@ -1,10 +1,10 @@
 <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 BaseLayout from './base.layout.vue';
 
 const route = useRoute();
 const theme = useThemeVars();

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,7 +1,7 @@
 <script setup lang="ts">
 import { toolsWithCategory } from '@/tools';
-import ToolCard from '../components/ToolCard.vue';
 import { useHead } from '@vueuse/head';
+import ToolCard from '../components/ToolCard.vue';
 
 useHead({ title: 'IT Tools - Handy online tools for developers' });
 </script>
@@ -9,13 +9,7 @@ useHead({ title: 'IT Tools - Handy online tools for developers' });
 <template>
   <div class="home-page">
     <n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
-      <n-gi
-        v-for="tool in [
-          ...toolsWithCategory.filter(({ isNew }) => isNew),
-          ...toolsWithCategory.filter(({ isNew }) => !isNew),
-        ]"
-        :key="tool.name"
-      >
+      <n-gi v-for="tool in toolsWithCategory" :key="tool.name">
         <tool-card :tool="tool" />
       </n-gi>
     </n-grid>

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

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

@@ -1,9 +1,16 @@
 <template>
-  <n-card title="Text to base64">
-    <n-input v-model:value="textInput" type="textarea" placeholder="Put your string here..." />
-    <n-input :value="textBase64" type="textarea" readonly />
+  <n-card title="Base64 to file">
+    <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="copyTextBase64()"> Copy </n-button>
+      <n-button :disabled="base64Input === '' || !base64InputValidation.isValid" secondary @click="downloadFile()">
+        Download file
+      </n-button>
     </n-space>
   </n-card>
 
@@ -17,7 +24,7 @@
       </n-upload-dragger>
     </n-upload>
 
-    <n-input :value="fileBase64" type="textarea" readonly />
+    <n-input :value="fileBase64" type="textarea" readonly placeholder="File in base64 will be here" />
     <n-space justify="center">
       <n-button secondary @click="copyFileBase64()"> Copy </n-button>
     </n-space>
@@ -26,14 +33,35 @@
 
 <script setup lang="ts">
 import { useCopy } from '@/composable/copy';
-import { useBase64 } from '@vueuse/core';
+import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
+import { useValidation } from '@/composable/validation';
+import { isValidBase64 } from '@/utils/base64';
 import { Upload } from '@vicons/tabler';
-import { ref, type Ref } from 'vue';
+import { useBase64 } from '@vueuse/core';
 import type { UploadFileInfo } from 'naive-ui';
+import { ref, type Ref } from 'vue';
 
-const textInput = ref('');
-const { base64: textBase64 } = useBase64(textInput);
-const { copy: copyTextBase64 } = useCopy({ source: textBase64, text: 'Base64 string copied to the clipboard' });
+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-file-converter/index.ts

@@ -2,11 +2,10 @@ import { FileDigit } from '@vicons/tabler';
 import { defineTool } from '../tool';
 
 export const tool = defineTool({
-  name: 'Base64 converter',
-  path: '/base64-converter',
+  name: 'Base64 file converter',
+  path: '/base64-file-converter',
   description: "Convert string, files or images into a it's base64 representation.",
   keywords: ['base64', 'converter', 'upload', 'image', 'file', 'conversion', 'web', 'data', 'format'],
-  component: () => import('./base64-converter.vue'),
+  component: () => import('./base64-file-converter.vue'),
   icon: FileDigit,
-  redirectFrom: ['/file-to-base64', '/base64-string-converter'],
 });

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

@@ -0,0 +1,57 @@
+<template>
+  <n-card title="String to base64">
+    <n-form-item label="String to encode">
+      <n-input v-model:value="textInput" type="textarea" placeholder="Put your string here..." rows="5" />
+    </n-form-item>
+
+    <n-form-item label="Base64 of string">
+      <n-input
+        :value="base64Output"
+        type="textarea"
+        readonly
+        placeholder="The base64 encoding of your string will be here"
+        rows="5"
+      />
+    </n-form-item>
+
+    <n-space justify="center">
+      <n-button secondary @click="copyTextBase64()"> Copy base64 </n-button>
+    </n-space>
+  </n-card>
+
+  <n-card title="Base64 to string">
+    <n-form-item label="Base64 string to decode" v-bind="b64Validation.attrs">
+      <n-input v-model:value="base64Input" type="textarea" placeholder="Your base64 string..." rows="5" />
+    </n-form-item>
+
+    <n-form-item label="Decoded string">
+      <n-input :value="textOutput" type="textarea" readonly placeholder="The decoded string will be here" rows="5" />
+    </n-form-item>
+
+    <n-space justify="center">
+      <n-button secondary @click="copyText()"> Copy decoded string </n-button>
+    </n-space>
+  </n-card>
+</template>
+
+<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(() => textToBase64(textInput.value));
+const { copy: copyTextBase64 } = useCopy({ source: base64Output, text: 'Base64 string copied to the clipboard' });
+
+const base64Input = ref('');
+const textOutput = computed(() => withDefaultOnError(() => base64ToText(base64Input.value.trim()), ''));
+const { copy: copyText } = useCopy({ source: textOutput, text: 'String copied to the clipboard' });
+const b64Validation = useValidation({
+  source: base64Input,
+  rules: [{ message: 'Invalid base64 string', validator: (value) => isValidBase64(value.trim()) }],
+});
+</script>
+
+<style lang="less" scoped></style>

src/tools/base64-string-converter/index.ts

@@ -0,0 +1,12 @@
+import { FileDigit } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Base64 string encoder/decoder',
+  path: '/base64-string-converter',
+  description: 'Simply encode and decode string into a their base64 representation.',
+  keywords: ['base64', 'converter', 'conversion', 'web', 'data', 'format', 'atob', 'btoa'],
+  component: () => import('./base64-string-converter.vue'),
+  icon: FileDigit,
+  redirectFrom: ['/file-to-base64', '/base64-converter'],
+});

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

@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <n-form-item label="Username">
+      <n-input v-model:value="username" placeholder="Your username..." clearable />
+    </n-form-item>
+    <n-form-item label="Password">
+      <n-input
+        v-model:value="password"
+        placeholder="Your password..."
+        type="password"
+        show-password-on="click"
+        clearable
+      />
+    </n-form-item>
+
+    <br />
+    <n-card>
+      <n-statistic label="Authorization header:" class="header">
+        <n-scrollbar x-scrollable style="max-width: 550px; margin-bottom: -10px; padding-bottom: 10px" trigger="none">
+          {{ header }}
+        </n-scrollbar>
+      </n-statistic>
+    </n-card>
+    <br />
+    <n-space justify="center">
+      <n-button secondary @click="copy">Copy header</n-button>
+    </n-space>
+  </div>
+</template>
+
+<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 ${textToBase64(`${username.value}:${password.value}`)}`);
+
+const { copy } = useCopy({ source: header, text: 'Header copied to the clipboard' });
+</script>
+
+<style lang="less" scoped>
+::v-deep(.n-statistic-value__content) {
+  font-family: monospace;
+  font-size: 17px !important;
+  white-space: nowrap;
+}
+</style>

src/tools/basic-auth-generator/index.ts

@@ -0,0 +1,21 @@
+import { PasswordRound } from '@vicons/material';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Basic auth generator',
+  path: '/basic-auth-generator',
+  description: 'Generate a base64 basic auth header from an username and a password.',
+  keywords: [
+    'basic',
+    'auth',
+    'generator',
+    'username',
+    'password',
+    'base64',
+    'authentication',
+    'header',
+    'authorization',
+  ],
+  component: () => import('./basic-auth-generator.vue'),
+  icon: PasswordRound,
+});

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

@@ -59,24 +59,25 @@
 
 <script setup lang="ts">
 import { useCopy } from '@/composable/copy';
-import { ref, computed } from 'vue';
+import { useValidation } from '@/composable/validation';
+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,
@@ -105,12 +106,7 @@ const passphrase = computed({
   },
   set(value: string) {
     passphraseInput.value = value;
-
-    try {
-      entropy.value = mnemonicToEntropy(value, languages[language.value]);
-    } catch (_) {
-      entropy.value = '';
-    }
+    entropy.value = withDefaultOnError(() => mnemonicToEntropy(value, languages[language.value]), '');
   },
 });
 
@@ -123,7 +119,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',
     },
   ],
 });
@@ -134,7 +130,7 @@ const mnemonicValidation = useValidation({
     {
       validator: (value) => {
         try {
-          mnemonicToEntropy(value);
+          mnemonicToEntropy(value, languages[language.value]);
           return true;
         } catch (_) {
           return false;

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/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(formatChronometerTime({ elapsed: 123456, msPerUnit: 100 })).toEqual('03:25:45.600');
-      expect(formatChronometerTime({ elapsed: 12345600 })).toEqual('03:25:45.600');
+      expect(formatMs(0)).toEqual('00:00.000');
+      expect(formatMs(1)).toEqual('00:00.001');
+      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 }) {
-  const elapsedMs = elapsed * msPerUnit;
-
-  const ms = elapsedMs % 1000;
-  const secs = ((elapsedMs - ms) / 1000) % 60;
-  const mins = (((elapsedMs - ms) / 1000 - secs) / 60) % 60;
-  const hrs = (((elapsedMs - ms) / 1000 - secs) / 60 - mins) / 60;
+export function formatMs(msTotal: number) {
+  const ms = msTotal % 1000;
+  const secs = ((msTotal - ms) / 1000) % 60;
+  const mins = (((msTotal - ms) / 1000 - secs) / 60) % 60;
+  const hrs = (((msTotal - 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 { formatChronometerTime } from './chronometer.service';
+import { useRafFn } from '@vueuse/core';
+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/device-information/device-information.vue

@@ -1,16 +1,17 @@
 <template>
   <n-card v-for="{ name, information } in sections" :key="name" :title="name">
     <n-grid cols="1 400:2" x-gap="12" y-gap="12">
-      <n-gi v-for="{ label, value } in information" :key="label" class="information">
+      <n-gi v-for="{ label, value: { value } } in information" :key="label" class="information">
         <n-card :bordered="false" embedded>
           <div class="label">
             {{ label }}
           </div>
 
           <div class="value">
-            <n-ellipsis>
-              {{ value.value }}
+            <n-ellipsis v-if="value">
+              {{ value }}
             </n-ellipsis>
+            <div v-else class="undefined-value">unknown</div>
           </div>
         </n-card>
       </n-gi>
@@ -89,7 +90,10 @@ const sections = [
   .value {
     font-size: 20px;
     font-weight: 400;
-    line-height: 1;
+  }
+
+  .undefined-value {
+    opacity: 0.8;
   }
 }
 </style>

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(
-  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lacus metus blandit dolor lacus natoque ad fusce aliquam velit.',
-);
-const hashText = (algo: AlgoNames, value: string) => algos[algo](value).toString();
+function formatWithEncoding(words: lib.WordArray, encoding: Encoding) {
+  if (encoding === 'Bin') {
+    return convertHexToBin(words.toString(enc.Hex));
+  }
+
+  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,7 +1,9 @@
 import { LockOpen } from '@vicons/tabler';
 import type { ToolCategory } from './tool';
 
-import { tool as base64Converter } from './base64-converter';
+import { tool as base64FileConverter } from './base64-file-converter';
+import { tool as base64StringConverter } from './base64-string-converter';
+import { tool as basicAuthGenerator } from './basic-auth-generator';
 import { tool as bcrypt } from './bcrypt';
 import { tool as bip39 } from './bip39-generator';
 import { tool as caseConverter } from './case-converter';
@@ -14,6 +16,7 @@ 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';
@@ -23,6 +26,7 @@ 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';
@@ -33,7 +37,7 @@ export const toolsByCategory: ToolCategory[] = [
   {
     name: 'Crypto',
     icon: LockOpen,
-    components: [tokenGenerator, hashText, bcrypt, uuidGenerator, cypher, bip39],
+    components: [tokenGenerator, hashText, bcrypt, uuidGenerator, cypher, bip39, hmacGenerator],
   },
   {
     name: 'Converter',
@@ -42,7 +46,8 @@ export const toolsByCategory: ToolCategory[] = [
       dateTimeConverter,
       baseConverter,
       romanNumeralConverter,
-      base64Converter,
+      base64StringConverter,
+      base64FileConverter,
       colorConverter,
       caseConverter,
     ],
@@ -50,7 +55,12 @@ export const toolsByCategory: ToolCategory[] = [
   {
     name: 'Web',
     icon: LockOpen,
-    components: [urlEncoder, htmlEntities, qrCodeGenerator, urlParser, deviceInformation],
+    components: [urlEncoder, htmlEntities, urlParser, deviceInformation, basicAuthGenerator],
+  },
+  {
+    name: 'Images',
+    icon: LockOpen,
+    components: [qrCodeGenerator, svgPlaceholderGenerator],
   },
   {
     name: 'Development',

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

@@ -67,9 +67,9 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
+import { useStyleStore } from '@/stores/style.store';
 import { convertBase } from './integer-base-converter.model';
 import InputCopyable from '../../components/InputCopyable.vue';
-import { useStyleStore } from '@/stores/style.store';
 
 const styleStore = useStyleStore();
 

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`">
-      <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>
+    <textarea-copyable :value="cleanJson" language="json" :follow-height-of="inputElement" />
   </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 hljs from 'highlight.js/lib/core';
-import json from 'highlight.js/lib/languages/json';
+import { withDefaultOnError } from '@/utils/defaults';
+import JSON5 from 'json5';
 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(() => {
-  try {
-    return JSON.stringify(JSON.parse(rawJson.value), null, 3);
-  } catch (_) {
-    return '';
-  }
-});
-
-const { copy } = useCopy({ source: cleanJson });
+const cleanJson = computed(() => withDefaultOnError(() => JSON.stringify(JSON5.parse(rawJson.value), null, 3), ''));
 
 const rawJsonValidation = useValidation({
   source: rawJson,
   rules: [
     {
-      validator: (v) => v === '' || JSON.parse(v),
-      message: 'Invalid json',
+      validator: (v) => v === '' || JSON5.parse(v),
+      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(() => {
-  try {
-    return evaluate(expression.value) ?? '';
-  } catch (_) {
-    return '';
-  }
-});
+const result = computed(() => withDefaultOnError(() => evaluate(expression.value) ?? '', ''));
 </script>
 
 <style lang="less" scoped></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/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`">
-      <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>
+    <textarea-copyable :value="prettySQL" language="sql" :follow-height-of="inputElement" />
   </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/url-encoder/url-encoder.vue

@@ -60,16 +60,11 @@
 <script setup lang="ts">
 import { useCopy } from '@/composable/copy';
 import { useValidation } from '@/composable/validation';
+import { withDefaultOnError } from '@/utils/defaults';
 import { computed, ref } from 'vue';
 
 const encodeInput = ref('Hello world :)');
-const encodeOutput = computed(() => {
-  try {
-    return encodeURIComponent(encodeInput.value);
-  } catch (_) {
-    return '';
-  }
-});
+const encodeOutput = computed(() => withDefaultOnError(() => encodeURIComponent(encodeInput.value), ''));
 
 const encodedValidation = useValidation({
   source: encodeInput,
@@ -91,14 +86,7 @@ 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(() => {
-  try {
-    return decodeURIComponent(decodeInput.value);
-  } catch (_) {
-    return '';
-  }
-});
+const decodeOutput = computed(() => withDefaultOnError(() => decodeURIComponent(decodeInput.value), ''));
 
 const decodeValidation = useValidation({
   source: encodeInput,

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

@@ -29,17 +29,13 @@
 <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 { withDefaultOnError } from '@/utils/defaults';
+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 {
-    return new URL(urlToParse.value);
-  } catch (_) {
-    return undefined;
-  }
-});
+
+const urlParsed = computed(() => withDefaultOnError(() => new URL(urlToParse.value), undefined));
 const validation = useValidation({
   source: urlToParse,
   rules: [

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

src/utils/base64.ts

@@ -0,0 +1,33 @@
+export { textToBase64, base64ToText, isValidBase64, removePotentialDataAndMimePrefix };
+
+function textToBase64(str: string) {
+  return window.btoa(str);
+}
+
+function base64ToText(str: string) {
+  if (!isValidBase64(str)) {
+    throw new Error('Incorrect base64 string');
+  }
+
+  const cleanStr = removePotentialDataAndMimePrefix(str);
+
+  try {
+    return window.atob(cleanStr);
+  } catch (_) {
+    throw new Error('Incorrect base64 string');
+  }
+}
+
+function removePotentialDataAndMimePrefix(str: string) {
+  return str.replace(/^data:.*?;base64,/, '');
+}
+
+function isValidBase64(str: string) {
+  const cleanStr = removePotentialDataAndMimePrefix(str);
+
+  try {
+    return window.btoa(window.atob(cleanStr)) === cleanStr;
+  } catch (err) {
+    return false;
+  }
+}

src/utils/defaults.test.ts

@@ -0,0 +1,16 @@
+import { describe, expect, it } from 'vitest';
+import { withDefaultOnError } from './defaults';
+
+describe('defaults util', () => {
+  describe('withDefaultOnError', () => {
+    it('should return the callback or the default one if the callback throws', () => {
+      expect(withDefaultOnError(() => 'original', 'default')).to.eql('original');
+    });
+
+    expect(
+      withDefaultOnError(() => {
+        throw '';
+      }, 'default'),
+    ).to.eql('default');
+  });
+});

src/utils/defaults.ts

@@ -0,0 +1,9 @@
+export { withDefaultOnError };
+
+function withDefaultOnError<A, B>(cb: () => A, defaultValue: B): A | B {
+  try {
+    return cb();
+  } catch (_) {
+    return defaultValue;
+  }
+}