feat(new-tool): ed25519 key pair generator

.eslintrc.cjs

@@ -32,5 +32,6 @@ module.exports = {
         tsx: 'never',
       },
     ],
+    'import/no-unresolved': ['error', { ignore: ['^virtual:'] }],
   },
 };

.github/workflows/docker-release.yml

@@ -0,0 +1,60 @@
+name: docker-release
+
+on:
+  push:
+    branches:
+      - 'main'
+
+jobs:
+  ci:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+      - run: corepack enable
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm i
+
+      - name: Run linters
+        run: pnpm lint
+
+      - name: Run unit test
+        run: pnpm test
+
+      - name: Build the app
+        run: pnpm build
+
+  build:
+    runs-on: ubuntu-latest
+    needs:
+      - ci
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Build and push
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          file: ./Dockerfile
+          platforms: linux/amd64,linux/arm64
+          push: true
+          tags: corentinth/it-tools:latest

Dockerfile

@@ -0,0 +1,13 @@
+# build stage
+FROM node:lts-alpine as build-stage
+WORKDIR /app
+COPY . .
+RUN npm install -g pnpm
+RUN pnpm i --frozen-lockfile
+RUN pnpm build
+
+# production stage
+FROM nginx:stable-alpine as production-stage
+COPY --from=build-stage /app/dist /usr/share/nginx/html
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -8,13 +8,22 @@ Please check the [issues](https://github.com/CorentinTh/it-tools/issues) to see
 
 You have an idea of a tool? Submit a [feature request](https://github.com/CorentinTh/it-tools/issues/new?assignees=corentinth&labels=&template=feature_request.md&title=)!
 
+## Self host
+
+Self host your own version of it-tools in your homelab with docker:
+
+```sh
+docker run -d -p 8080:80 --name it-tools -it corentinth/it-tools
+
+```
+
 ## Contribute
 
-## Recommended IDE Setup
+### Recommended IDE Setup
 
 [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
 
-## Type Support for `.vue` Imports in TS
+### Type Support for `.vue` Imports in TS
 
 TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
 
@@ -25,11 +34,7 @@ If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has a
    2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
 2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
 
-## Customize configuration
+### Project Setup
-
-See [Vite Configuration Reference](https://vitejs.dev/config/).
-
-## Project Setup
 
 ```sh
 pnpm install

package.json

@@ -33,35 +33,40 @@
   "dependencies": {
     "@it-tools/bip39": "^0.0.4",
     "@it-tools/oggen": "^1.3.0",
+    "@sindresorhus/slugify": "^2.2.0",
+    "@tiptap/pm": "2.0.0-beta.220",
+    "@tiptap/starter-kit": "2.0.0-beta.220",
+    "@tiptap/vue-3": "2.0.0-beta.220",
     "@vicons/material": "^0.12.0",
     "@vicons/tabler": "^0.12.0",
     "@vueuse/core": "^8.9.4",
     "@vueuse/head": "^0.7.13",
-    "@vueuse/router": "^9.11.0",
+    "@vueuse/router": "^9.13.0",
     "bcryptjs": "^2.4.3",
     "change-case": "^4.1.2",
     "colord": "^2.9.3",
     "cron-validator": "^1.3.1",
-    "cronstrue": "^2.15.0",
+    "cronstrue": "^2.23.0",
     "crypto-js": "^4.1.1",
     "date-fns": "^2.29.3",
     "figue": "^1.2.0",
     "fuse.js": "^6.6.2",
-    "highlight.js": "^11.6.0",
+    "highlight.js": "^11.7.0",
-    "json5": "^2.2.1",
+    "json5": "^2.2.3",
     "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",
     "mathjs": "^10.6.4",
     "mime-types": "^2.1.35",
-    "naive-ui": "^2.33.5",
+    "naive-ui": "^2.34.3",
-    "pinia": "^2.0.23",
+    "node-forge": "^1.3.1",
+    "pinia": "^2.0.33",
     "plausible-tracker": "^0.3.8",
     "qrcode": "^1.5.1",
     "randombytes": "^2.1.0",
     "sql-formatter": "^8.2.0",
-    "ts-pattern": "^4.1.3",
+    "ts-pattern": "^4.2.1",
     "uuid": "^8.3.2",
-    "vue": "^3.2.45",
+    "vue": "^3.2.47",
     "vue-router": "^4.1.6"
   },
   "devDependencies": {
@@ -69,30 +74,32 @@
     "@types/bcryptjs": "^2.4.2",
     "@types/crypto-js": "^4.1.1",
     "@types/jsdom": "^16.2.15",
-    "@types/lodash": "^4.14.188",
+    "@types/lodash": "^4.14.191",
     "@types/mime-types": "^2.1.1",
-    "@types/node": "^16.18.3",
+    "@types/node": "^16.18.16",
+    "@types/node-forge": "^1.3.1",
+    "@types/prettier": "^2.7.2",
     "@types/qrcode": "^1.5.0",
     "@types/randombytes": "^2.0.0",
     "@types/uuid": "^8.3.4",
-    "@typescript-eslint/parser": "^5.42.1",
+    "@typescript-eslint/parser": "^5.55.0",
     "@vitejs/plugin-vue": "^2.3.4",
     "@vitejs/plugin-vue-jsx": "^1.3.10",
-    "@vue/eslint-config-prettier": "^7.0.0",
+    "@vue/eslint-config-prettier": "^7.1.0",
     "@vue/eslint-config-typescript": "^10.0.0",
-    "@vue/test-utils": "^2.2.2",
+    "@vue/test-utils": "^2.3.1",
     "@vue/tsconfig": "^0.1.3",
-    "c8": "^7.12.0",
+    "c8": "^7.13.0",
-    "eslint": "^8.27.0",
+    "eslint": "^8.36.0",
-    "eslint-config-prettier": "^8.5.0",
+    "eslint-config-prettier": "^8.7.0",
-    "eslint-import-resolver-typescript": "^3.5.2",
+    "eslint-import-resolver-typescript": "^3.5.3",
-    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-vue": "^8.7.1",
     "jsdom": "^19.0.0",
     "less": "^4.1.3",
-    "prettier": "^2.7.1",
+    "prettier": "^2.8.4",
     "standard-version": "^9.5.0",
-    "start-server-and-test": "^1.14.0",
+    "start-server-and-test": "^1.15.4",
     "typescript": "~4.5.5",
     "vite": "^2.9.15",
     "vite-plugin-md": "^0.12.4",

src/App.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useRoute, RouterView } from 'vue-router';
-import { darkTheme, NGlobalStyle, NMessageProvider } from 'naive-ui';
+import { darkTheme, NGlobalStyle, NMessageProvider, NNotificationProvider } from 'naive-ui';
 import { darkThemeOverrides, lightThemeOverrides } from './themes';
 import { layouts } from './layouts';
 import { useStyleStore } from './stores/style.store';
@@ -18,9 +18,11 @@ const themeOverrides = computed(() => (styleStore.isDarkTheme ? darkThemeOverrid
   <n-config-provider :theme="theme" :theme-overrides="themeOverrides">
     <n-global-style />
     <n-message-provider placement="bottom">
-      <component :is="layout">
+      <n-notification-provider placement="bottom-right">
-        <router-view />
+        <component :is="layout">
-      </component>
+          <router-view />
+        </component>
+      </n-notification-provider>
     </n-message-provider>
   </n-config-provider>
 </template>

src/components/NavbarButtons.vue

@@ -9,7 +9,7 @@
         href="https://github.com/CorentinTh/it-tools"
         rel="noopener"
         target="_blank"
-        aria-label="IT-Tools' github repository"
+        aria-label="IT-Tools' GitHub repository"
       >
         <n-icon size="25" :component="BrandGithub" />
       </n-button>
@@ -27,12 +27,12 @@
         href="https://twitter.com/ittoolsdottech"
         rel="noopener"
         target="_blank"
-        aria-label="IT Tools' twitter account"
+        aria-label="IT Tools' Twitter account"
       >
         <n-icon size="25" :component="BrandTwitter" />
       </n-button>
     </template>
-    IT Tools' twitter account
+    IT Tools' Twitter account
   </n-tooltip>
 
   <router-link to="/about" #="{ navigate, href }" custom>

src/components/ToolCard.vue

@@ -24,8 +24,9 @@
       </n-h3>
 
       <div class="description">
-        <n-ellipsis :line-clamp="2" :tooltip="false">
+        <n-ellipsis :line-clamp="2" :tooltip="false" style="min-height: 44.78px">
           {{ tool.description }}
+          <br />&nbsp;
         </n-ellipsis>
       </div>
     </n-card>

src/layouts/base.layout.vue

@@ -155,7 +155,7 @@ const menuOptions = computed<MenuGroupOption[]>(() =>
               round
               type="primary"
               tag="a"
-              href="https://github.com/sponsors/CorentinTh"
+              href="https://www.buymeacoffee.com/cthmsst"
               rel="noopener"
               target="_blank"
               class="support-button"

src/pages/About.vue

@@ -24,7 +24,7 @@ const { tracker } = useTracker();
         type="primary"
         tag="a"
         text
-        href="https://github.com/sponsors/CorentinTh"
+        href="https://www.buymeacoffee.com/cthmsst"
         rel="noopener"
         target="_blank"
         @click="() => tracker.trackEvent({ eventName: 'Support button clicked' })"
@@ -41,7 +41,7 @@ const { tracker } = useTracker();
         type="primary"
         tag="a"
         text
-        href="https://github.com/CorentinTh/it-tools/blob/master/package.json"
+        href="https://github.com/CorentinTh/it-tools/blob/main/package.json"
         rel="noopener"
         target="_blank"
       >
@@ -64,7 +64,7 @@ const { tracker } = useTracker();
       >
         issues section
       </n-button>
-      in the github repository.
+      in the GitHub repository.
     </n-p>
     <n-p>
       And if you found a bug, or something broken that doesn't work as expected, please fill a bug report in the
@@ -78,7 +78,7 @@ const { tracker } = useTracker();
       >
         issues section
       </n-button>
-      in the github repository.
+      in the GitHub repository.
     </n-p>
   </div>
 </template>

src/pages/Home.page.vue

@@ -21,16 +21,16 @@ useHead({ title: 'IT Tools - Handy online tools for developers' });
               href="https://github.com/CorentinTh/it-tools"
               rel="noopener"
               target="_blank"
-              aria-label="IT-Tools' github repository"
+              aria-label="IT-Tools' GitHub repository"
-              >github</a
+              >GitHub</a
             >
             or follow us on
             <a
               href="https://twitter.com/ittoolsdottech"
               rel="noopener"
               target="_blank"
-              aria-label="IT-Tools' twitter account"
+              aria-label="IT-Tools' Twitter account"
-              >twitter</a
+              >Twitter</a
             >! Thank you
             <n-icon :component="Heart" />
           </colored-card>

src/themes.ts

@@ -22,6 +22,10 @@ export const darkThemeOverrides: GlobalThemeOverrides = {
     primaryColorSuppl: '#36AD6AFF',
   },
 
+  Notification: {
+    color: '#333333',
+  },
+
   AutoComplete: {
     peers: {
       InternalSelectMenu: { height: '500px', color: '#1e1e1e' },
@@ -33,18 +37,18 @@ export const darkThemeOverrides: GlobalThemeOverrides = {
   },
 
   Layout: {
-    color: '#121212',
+    color: '#1c1c1c',
-    siderColor: '#1e1e1e',
+    siderColor: '#232323',
     siderBorderColor: 'transparent',
   },
 
   Card: {
-    color: '#1e1e1e',
+    color: '#232323',
-    borderColor: 'transparent',
+    borderColor: '#282828',
   },
 
   Table: {
-    tdColor: '#1e1e1e',
+    tdColor: '#232323',
     thColor: '#353535',
   },
 };

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

@@ -8,37 +8,37 @@
       <n-divider />
 
       <n-form-item label="Camelcase:">
-        <input-copyable :value="camelCase(input)" />
+        <input-copyable :value="camelCase(input, baseConfig)" />
       </n-form-item>
       <n-form-item label="Capitalcase:">
-        <input-copyable :value="capitalCase(input)" />
+        <input-copyable :value="capitalCase(input, baseConfig)" />
       </n-form-item>
       <n-form-item label="Constantcase:">
-        <input-copyable :value="constantCase(input)" />
+        <input-copyable :value="constantCase(input, baseConfig)" />
       </n-form-item>
       <n-form-item label="Dotcase:">
-        <input-copyable :value="dotCase(input)" />
+        <input-copyable :value="dotCase(input, baseConfig)" />
       </n-form-item>
       <n-form-item label="Headercase:">
-        <input-copyable :value="headerCase(input)" />
+        <input-copyable :value="headerCase(input, baseConfig)" />
       </n-form-item>
       <n-form-item label="Nocase:">
-        <input-copyable :value="noCase(input)" />
+        <input-copyable :value="noCase(input, baseConfig)" />
       </n-form-item>
       <n-form-item label="Paramcase:">
-        <input-copyable :value="paramCase(input)" />
+        <input-copyable :value="paramCase(input, baseConfig)" />
       </n-form-item>
       <n-form-item label="Pascalcase:">
-        <input-copyable :value="pascalCase(input)" />
+        <input-copyable :value="pascalCase(input, baseConfig)" />
       </n-form-item>
       <n-form-item label="Pathcase:">
-        <input-copyable :value="pathCase(input)" />
+        <input-copyable :value="pathCase(input, baseConfig)" />
       </n-form-item>
       <n-form-item label="Sentencecase:">
-        <input-copyable :value="sentenceCase(input)" />
+        <input-copyable :value="sentenceCase(input, baseConfig)" />
       </n-form-item>
       <n-form-item label="Snakecase:">
-        <input-copyable :value="snakeCase(input)" />
+        <input-copyable :value="snakeCase(input, baseConfig)" />
       </n-form-item>
     </n-form>
   </n-card>
@@ -61,6 +61,10 @@ import {
 } from 'change-case';
 import InputCopyable from '../../components/InputCopyable.vue';
 
+const baseConfig = {
+  stripRegexp: /[^A-Za-zÀ-ÖØ-öø-ÿ]+/gi,
+};
+
 const input = ref('lorem ipsum dolor sit amet');
 </script>
 

src/tools/ed25519-key-pair-generator/ed25519-key-pair-generator.service.ts

@@ -0,0 +1,14 @@
+import { pki } from 'node-forge';
+
+export { generateKeyPair };
+
+function generateKeyPair() {
+  const { privateKey, publicKey } = pki.ed25519.generateKeyPair();
+
+  console.log({ privateKey, publicKey });
+
+  return {
+    publicKeyPem: pki.publicKeyToPem(publicKey),
+    privateKeyPem: pki.privateKeyToPem(privateKey),
+  };
+}

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

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <h3>Public key</h3>
+    <textarea-copyable :value="certs.publicKeyPem" />
+  </div>
+
+  <div>
+    <h3>Private key</h3>
+    <textarea-copyable :value="certs.privateKeyPem" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
+import { withDefaultOnErrorAsync } from '@/utils/defaults';
+import { computed } from 'vue';
+import { generateKeyPair } from './ed25519-key-pair-generator.service';
+
+const emptyCerts = { publicKeyPem: '', privateKeyPem: '' };
+
+const certs = computed(() => generateKeyPair());
+</script>
+
+<style lang="less" scoped></style>

src/tools/ed25519-key-pair-generator/index.ts

@@ -0,0 +1,11 @@
+import { ArrowsShuffle } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Ed25519 key pair generator',
+  path: '/ed25519-key-pair-generator',
+  description: '',
+  keywords: ['ed25519', 'key', 'pair', 'generator'],
+  component: () => import('./ed25519-key-pair-generator.vue'),
+  icon: ArrowsShuffle,
+});

src/tools/html-wysiwyg-editor/editor/editor.vue

@@ -0,0 +1,135 @@
+<template>
+  <n-card v-if="editor" class="editor">
+    <template #header>
+      <menu-bar class="editor-header" :editor="editor" />
+      <n-divider style="margin-top: 0" />
+    </template>
+
+    <editor-content class="editor-content" :editor="editor" />
+  </n-card>
+</template>
+
+<script setup lang="ts">
+import { tryOnBeforeUnmount, useVModel } from '@vueuse/core';
+import { Editor, EditorContent } from '@tiptap/vue-3';
+import StarterKit from '@tiptap/starter-kit';
+import { useThemeVars } from 'naive-ui';
+import MenuBar from './menu-bar.vue';
+
+const themeVars = useThemeVars();
+const props = defineProps<{ html: string }>();
+const emit = defineEmits(['update:html']);
+const html = useVModel(props, 'html', emit);
+
+const editor = new Editor({
+  content: html.value,
+  extensions: [StarterKit],
+});
+
+editor.on('update', ({ editor }) => emit('update:html', editor.getHTML()));
+
+tryOnBeforeUnmount(() => {
+  editor.destroy();
+});
+</script>
+
+<style scoped lang="less">
+::v-deep(.n-card-header) {
+  padding: 0;
+}
+
+::v-deep(.ProseMirror-focused) {
+  outline: none;
+}
+</style>
+
+<style scoped lang="less">
+::v-deep(.ProseMirror) {
+  > * + * {
+    margin-top: 0.75em;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  ul,
+  ol {
+    padding: 0 1rem;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+  }
+
+  code {
+    background-color: v-bind('themeVars.codeColor');
+    padding: 2px 4px;
+    border-radius: 5px;
+    font-size: 85%;
+  }
+
+  pre {
+    background: v-bind('themeVars.codeColor');
+    font-family: monospace;
+    padding: 0.75rem 1rem;
+    border-radius: 0.5rem;
+
+    code {
+      color: inherit;
+      padding: 0;
+      background: none;
+      font-size: 0.8rem;
+    }
+  }
+
+  mark {
+    background-color: #faf594;
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+
+  hr {
+    margin: 1rem 0;
+  }
+
+  blockquote {
+    padding-left: 1rem;
+    border-left: 2px solid rgba(#0d0d0d, 0.1);
+  }
+
+  hr {
+    border: none;
+    border-top: 2px solid rgba(#0d0d0d, 0.1);
+    margin: 2rem 0;
+  }
+
+  ul[data-type='taskList'] {
+    list-style: none;
+    padding: 0;
+
+    li {
+      display: flex;
+      align-items: center;
+
+      > label {
+        flex: 0 0 auto;
+        margin-right: 0.5rem;
+        user-select: none;
+      }
+
+      > div {
+        flex: 1 1 auto;
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,22 @@
+<template>
+  <n-tooltip trigger="hover">
+    <template #trigger>
+      <n-button circle quaternary :type="isActive?.() ? 'primary' : 'default'" @click="action">
+        <template #icon>
+          <n-icon :component="icon" />
+        </template>
+      </n-button>
+    </template>
+
+    {{ title }}
+  </n-tooltip>
+</template>
+
+<script setup lang="ts">
+import { toRefs, type Component } from 'vue';
+
+const props = defineProps<{ icon: Component; title: string; action: () => void; isActive?: () => boolean }>();
+const { icon, title, action, isActive } = toRefs(props);
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,171 @@
+<template>
+  <n-space align="center" :size="0">
+    <template v-for="(item, index) in items">
+      <n-divider v-if="item.type === 'divider'" :key="`divider${index}`" vertical />
+      <menu-bar-item v-else-if="item.type === 'button'" :key="index" v-bind="item" />
+    </template>
+  </n-space>
+</template>
+
+<script setup lang="ts">
+import type { Editor } from '@tiptap/vue-3';
+import {
+  ArrowBack,
+  ArrowForwardUp,
+  Blockquote,
+  Bold,
+  ClearFormatting,
+  Code,
+  CodePlus,
+  H1,
+  H2,
+  H3,
+  H4,
+  Italic,
+  Link,
+  List,
+  ListNumbers,
+  Separator,
+  Strikethrough,
+  TextWrap,
+} from '@vicons/tabler';
+import { toRefs, type Component } from 'vue';
+import MenuBarItem from './menu-bar-item.vue';
+
+const props = defineProps<{ editor: Editor }>();
+const { editor } = toRefs(props);
+
+type MenuItem =
+  | {
+      icon: Component;
+      title: string;
+      action: () => void;
+      isActive?: () => boolean;
+      type: 'button';
+    }
+  | { type: 'divider' };
+
+const items: MenuItem[] = [
+  {
+    type: 'button',
+    icon: Bold,
+    title: 'Bold',
+    action: () => editor.value.chain().focus().toggleBold().run(),
+    isActive: () => editor.value.isActive('bold'),
+  },
+  {
+    type: 'button',
+    icon: Italic,
+    title: 'Italic',
+    action: () => editor.value.chain().focus().toggleItalic().run(),
+    isActive: () => editor.value.isActive('italic'),
+  },
+  {
+    type: 'button',
+    icon: Strikethrough,
+    title: 'Strike',
+    action: () => editor.value.chain().focus().toggleStrike().run(),
+    isActive: () => editor.value.isActive('strike'),
+  },
+  {
+    type: 'button',
+    icon: Code,
+    title: 'Inline code',
+    action: () => editor.value.chain().focus().toggleCode().run(),
+    isActive: () => editor.value.isActive('code'),
+  },
+  {
+    type: 'divider',
+  },
+  {
+    type: 'button',
+    icon: H1,
+    title: 'Heading 1',
+    action: () => editor.value.chain().focus().toggleHeading({ level: 1 }).run(),
+    isActive: () => editor.value.isActive('heading', { level: 1 }),
+  },
+  {
+    type: 'button',
+    icon: H2,
+    title: 'Heading 2',
+    action: () => editor.value.chain().focus().toggleHeading({ level: 2 }).run(),
+    isActive: () => editor.value.isActive('heading', { level: 2 }),
+  },
+  {
+    type: 'button',
+    icon: H3,
+    title: 'Heading 3',
+    action: () => editor.value.chain().focus().toggleHeading({ level: 4 }).run(),
+    isActive: () => editor.value.isActive('heading', { level: 4 }),
+  },
+  {
+    type: 'button',
+    icon: H4,
+    title: 'Heading 4',
+    action: () => editor.value.chain().focus().toggleHeading({ level: 4 }).run(),
+    isActive: () => editor.value.isActive('heading', { level: 4 }),
+  },
+  {
+    type: 'divider',
+  },
+  {
+    type: 'button',
+    icon: List,
+    title: 'Bullet list',
+    action: () => editor.value.chain().focus().toggleBulletList().run(),
+    isActive: () => editor.value.isActive('bulletList'),
+  },
+  {
+    type: 'button',
+    icon: ListNumbers,
+    title: 'Ordered list',
+    action: () => editor.value.chain().focus().toggleOrderedList().run(),
+    isActive: () => editor.value.isActive('orderedList'),
+  },
+  {
+    type: 'button',
+    icon: CodePlus,
+    title: 'Code block',
+    action: () => editor.value.chain().focus().toggleCodeBlock().run(),
+    isActive: () => editor.value.isActive('codeBlock'),
+  },
+
+  {
+    type: 'button',
+    icon: Blockquote,
+    title: 'Blockquote',
+    action: () => editor.value.chain().focus().toggleBlockquote().run(),
+    isActive: () => editor.value.isActive('blockquote'),
+  },
+  {
+    type: 'divider',
+  },
+  {
+    type: 'button',
+    icon: TextWrap,
+    title: 'Hard break',
+    action: () => editor.value.chain().focus().setHardBreak().run(),
+  },
+  {
+    type: 'button',
+    icon: ClearFormatting,
+    title: 'Clear format',
+    action: () => editor.value.chain().focus().clearNodes().unsetAllMarks().run(),
+  },
+
+  {
+    type: 'button',
+    icon: ArrowBack,
+    title: 'Undo',
+    action: () => editor.value.chain().focus().undo().run(),
+  },
+  {
+    type: 'button',
+    icon: ArrowForwardUp,
+    title: 'Redo',
+    action: () => editor.value.chain().focus().redo().run(),
+  },
+];
+</script>
+
+<style scoped></style>

src/tools/html-wysiwyg-editor/html-wysiwyg-editor.vue

@@ -0,0 +1,17 @@
+<template>
+  <editor v-model:html="html" />
+  <textarea-copyable :value="format(html, { parser: 'html', plugins: [htmlParser] })" language="html" />
+</template>
+
+<script setup lang="ts">
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
+import { ref } from 'vue';
+import { format } from 'prettier';
+import htmlParser from 'prettier/parser-html';
+import { useStorage } from '@vueuse/core';
+import Editor from './editor/editor.vue';
+
+const html = useStorage('html-wysiwyg-editor--html', '<h1>Hey!</h1><p>Welcome to this html wysiwyg editor</p>');
+</script>
+
+<style lang="less" scoped></style>

src/tools/html-wysiwyg-editor/index.ts

@@ -0,0 +1,11 @@
+import { Edit } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Html wysiwyg editor',
+  path: '/html-wysiwyg-editor',
+  description: 'Online HTML editor with feature-rich WYSIWYG editor, get the source code of the content immediately.',
+  keywords: ['html', 'wysiwyg', 'editor', 'p', 'ul', 'ol', 'converter', 'live'],
+  component: () => import('./html-wysiwyg-editor.vue'),
+  icon: Edit,
+});

src/tools/index.ts

@@ -1,6 +1,10 @@
 import { tool as base64FileConverter } from './base64-file-converter';
 import { tool as base64StringConverter } from './base64-string-converter';
 import { tool as basicAuthGenerator } from './basic-auth-generator';
+import { tool as htmlWysiwygEditor } from './html-wysiwyg-editor';
+import { tool as rsaKeyPairGenerator } from './rsa-key-pair-generator';
+import { tool as textToNatoAlphabet } from './text-to-nato-alphabet';
+import { tool as slugifyString } from './slugify-string';
 import { tool as keycodeInfo } from './keycode-info';
 import { tool as jsonMinify } from './json-minify';
 import { tool as bcrypt } from './bcrypt';
@@ -42,7 +46,7 @@ import { tool as uuidGenerator } from './uuid-generator';
 export const toolsByCategory: ToolCategory[] = [
   {
     name: 'Crypto',
-    components: [tokenGenerator, hashText, bcrypt, uuidGenerator, cypher, bip39, hmacGenerator],
+    components: [tokenGenerator, hashText, bcrypt, uuidGenerator, cypher, bip39, hmacGenerator, rsaKeyPairGenerator],
   },
   {
     name: 'Converter',
@@ -54,6 +58,7 @@ export const toolsByCategory: ToolCategory[] = [
       base64FileConverter,
       colorConverter,
       caseConverter,
+      textToNatoAlphabet,
     ],
   },
   {
@@ -69,6 +74,8 @@ export const toolsByCategory: ToolCategory[] = [
       mimeTypes,
       jwtParser,
       keycodeInfo,
+      slugifyString,
+      htmlWysiwygEditor,
     ],
   },
   {

src/tools/jwt-parser/jwt-parser.service.ts

@@ -20,7 +20,7 @@ function decodeJwt({ jwt }: { jwt: string }) {
 
 function parseClaims({ claim, value }: { claim: string; value: unknown }) {
   const claimDescription = CLAIM_DESCRIPTIONS[claim];
-  const formattedValue = _.toString(value);
+  const formattedValue = _.isPlainObject(value) ? JSON.stringify(value, null, 3) : _.toString(value);
   const friendlyValue = getFriendlyValue({ claim, value });
 
   return {

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

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

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

@@ -12,19 +12,19 @@ export const twitter: OGSchemaType = {
         { label: 'Player', value: 'player' },
       ],
       label: 'Card type',
-      placeholder: 'The twitter card type...',
+      placeholder: 'The Twitter card type...',
       key: 'twitter:card',
     },
     {
       type: 'input',
       label: 'Site account',
-      placeholder: 'The name of the twitter account of the site (ex: @ittoolsdottech)...',
+      placeholder: 'The name of the Twitter account of the site (ex: @ittoolsdottech)...',
       key: 'twitter:site',
     },
     {
       type: 'input',
       label: 'Creator acc.',
-      placeholder: 'The name of the twitter account of the creator (ex: @cthmsst)...',
+      placeholder: 'The name of the Twitter account of the creator (ex: @cthmsst)...',
       key: 'twitter:creator',
     },
   ],

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

@@ -84,7 +84,10 @@ const keyUri = computed(() => buildKeyUri({ secret: secret.value }));
 
 const { qrcode } = useQRCode({
   text: keyUri,
-  color: { background: '#00000000', foreground: computed(() => (styleStore.isDarkTheme ? '#ffffff' : '#000000')) },
+  color: {
+    background: computed(() => (styleStore.isDarkTheme ? '#ffffff' : '#00000000')),
+    foreground: '#000000',
+  },
   options: { width: 210 },
 });
 
@@ -93,7 +96,7 @@ const { attrs: secretValidationAttrs } = useValidation({
   rules: [
     {
       message: 'Secret should be a base32 string',
-      validator: (value) => value.match(/^[A-Z234567]+$/),
+      validator: (value) => value.toUpperCase().match(/^[A-Z234567]+$/),
     },
     {
       message: 'Please set a secret',

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

@@ -20,12 +20,16 @@ describe('otp functions', () => {
       expect(hexToBytes('0102030405060708090a0b0c0d0e0f')).toEqual([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);
     });
   });
-  describe('base32tohex', () => {
+  describe('base32toHex', () => {
     it('convert a base32 to hex string', () => {
       expect(base32toHex('ABCDEF')).to.eql('00443205');
       expect(base32toHex('7777')).to.eql('ffff0f');
       expect(base32toHex('JBSWY3DPEHPK3PXP')).to.eql('48656c6c6f21deadbeef');
     });
+
+    it('case does not matter', () => {
+      expect(base32toHex('ABC')).to.eql(base32toHex('abc'));
+    });
   });
 
   describe('generateHOTP', () => {

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

@@ -26,6 +26,7 @@ function base32toHex(base32: string) {
   const base32Chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ234567';
 
   const bits = base32
+    .toUpperCase() // Since base 32, we coerce lowercase to uppercase
     .replace(/=+$/, '')
     .split('')
     .map((value) => base32Chars.indexOf(value).toString(2).padStart(5, '0'))

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

@@ -30,7 +30,7 @@ import { arabicToRoman, romanToArabic } from './roman-numeral-converter.service'
 const inputNumeral = ref(42);
 const outputRoman = computed(() => arabicToRoman(inputNumeral.value));
 
-const inputRoman = ref('IVX');
+const inputRoman = ref('XLII');
 const outputNumeral = computed(() => romanToArabic(inputRoman.value));
 
 const { copy: copyRoman } = useCopy({ source: outputRoman, text: 'Roman number copied to the clipboard' });

src/tools/rsa-key-pair-generator/index.ts

@@ -0,0 +1,11 @@
+import { Certificate } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'RSA key pair generator',
+  path: '/rsa-key-pair-generator',
+  description: 'Generate new random RSA private and public key pem certificates.',
+  keywords: ['rsa', 'key', 'pair', 'generator', 'public', 'private', 'secret', 'ssh', 'pem'],
+  component: () => import('./rsa-key-pair-generator.vue'),
+  icon: Certificate,
+});

src/tools/rsa-key-pair-generator/rsa-key-pair-generator.service.ts

@@ -0,0 +1,25 @@
+import { pki } from 'node-forge';
+
+export { generateKeyPair };
+
+function generateRawPairs({ bits = 2048 }) {
+  return new Promise<pki.rsa.KeyPair>((resolve, reject) =>
+    pki.rsa.generateKeyPair({ bits }, (err, keyPair) => {
+      if (err) {
+        reject(err);
+        return;
+      }
+
+      resolve(keyPair);
+    }),
+  );
+}
+
+async function generateKeyPair(config: { bits?: number } = {}) {
+  const { privateKey, publicKey } = await generateRawPairs(config);
+
+  return {
+    publicKeyPem: pki.publicKeyToPem(publicKey),
+    privateKeyPem: pki.privateKeyToPem(privateKey),
+  };
+}

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

@@ -0,0 +1,48 @@
+<template>
+  <div style="flex: 0 0 100%">
+    <n-space item-style="flex: 1 1 0" style="margin: 0 auto; max-width: 600px" justify="center">
+      <n-form-item label="Bits :" v-bind="bitsValidationAttrs" label-placement="left" label-width="100">
+        <n-input-number v-model:value="bits" min="256" max="16384" step="8" style="width: 150px" />
+      </n-form-item>
+    </n-space>
+  </div>
+
+  <div>
+    <h3>Public key</h3>
+    <textarea-copyable :value="certs.publicKeyPem" />
+  </div>
+
+  <div>
+    <h3>Private key</h3>
+    <textarea-copyable :value="certs.privateKeyPem" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
+import { ref } from 'vue';
+import { computedAsync } from '@vueuse/core';
+import { withDefaultOnErrorAsync } from '@/utils/defaults';
+import { useValidation } from '@/composable/validation';
+import { generateKeyPair } from './rsa-key-pair-generator.service';
+
+const bits = ref(2048);
+const emptyCerts = { publicKeyPem: '', privateKeyPem: '' };
+
+const { attrs: bitsValidationAttrs } = useValidation({
+  source: bits,
+  rules: [
+    {
+      message: 'Bits should be 256 <= bits <= 16384 and be a multiple of 8',
+      validator: (value) => value >= 256 && value <= 16384 && value % 8 === 0,
+    },
+  ],
+});
+
+const certs = computedAsync(
+  () => withDefaultOnErrorAsync(() => generateKeyPair({ bits: bits.value }), emptyCerts),
+  emptyCerts,
+);
+</script>
+
+<style lang="less" scoped></style>

src/tools/slugify-string/index.ts

@@ -0,0 +1,11 @@
+import { AbcRound } from '@vicons/material';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Slugify string',
+  path: '/slugify-string',
+  description: 'Make a string url, filename and id safe.',
+  keywords: ['slugify', 'string', 'escape', 'emoji', 'special', 'character', 'space', 'trim'],
+  component: () => import('./slugify-string.vue'),
+  icon: AbcRound,
+});

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

@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <n-form-item label="Your string to slugify">
+      <n-input v-model:value="input" type="textarea" placeholder="Put your string here (ex: My file path)"></n-input>
+    </n-form-item>
+
+    <n-form-item label="Your slug">
+      <n-input
+        :value="slug"
+        type="textarea"
+        readonly
+        placeholder="You slug will be generated here (ex: my-file-path)"
+      ></n-input>
+    </n-form-item>
+
+    <n-space justify="center">
+      <n-button secondary :disabled="slug.length === 0" @click="copy">Copy slug</n-button>
+    </n-space>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import slugify from '@sindresorhus/slugify';
+import { withDefaultOnError } from '@/utils/defaults';
+import { useCopy } from '@/composable/copy';
+
+const input = ref('');
+const slug = computed(() => withDefaultOnError(() => slugify(input.value), ''));
+const { copy } = useCopy({ source: slug, text: 'Slug copied to clipboard' });
+</script>
+
+<style lang="less" scoped></style>

src/tools/text-to-nato-alphabet/index.ts

@@ -0,0 +1,11 @@
+import { Speakerphone } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Text to NATO alphabet',
+  path: '/text-to-nato-alphabet',
+  description: 'Transform text into NATO phonetic alphabet for oral transmission.',
+  keywords: ['string', 'nato', 'alphabet', 'phonetic', 'oral', 'transmission'],
+  component: () => import('./text-to-nato-alphabet.vue'),
+  icon: Speakerphone,
+});

src/tools/text-to-nato-alphabet/text-to-nato-alphabet.constants.ts

@@ -0,0 +1,28 @@
+export const natoAlphabet = [
+  'Alpha',
+  'Bravo',
+  'Charlie',
+  'Delta',
+  'Echo',
+  'Foxtrot',
+  'Golf',
+  'Hotel',
+  'India',
+  'Juliet',
+  'Kilo',
+  'Lima',
+  'Mike',
+  'November',
+  'Oscar',
+  'Papa',
+  'Quebec',
+  'Romeo',
+  'Sierra',
+  'Tango',
+  'Uniform',
+  'Victor',
+  'Whiskey',
+  'X-ray',
+  'Yankee',
+  'Zulu',
+];

src/tools/text-to-nato-alphabet/text-to-nato-alphabet.service.ts

@@ -0,0 +1,19 @@
+import { natoAlphabet } from './text-to-nato-alphabet.constants';
+
+export { textToNatoAlphabet };
+
+function getLetterPositionInAlphabet({ letter }: { letter: string }) {
+  return letter.toLowerCase().charCodeAt(0) - 'a'.charCodeAt(0);
+}
+
+function textToNatoAlphabet({ text }: { text: string }) {
+  return text
+    .split('')
+    .map((character) => {
+      const alphabetIndex = getLetterPositionInAlphabet({ letter: character });
+      const natoWord = natoAlphabet[alphabetIndex];
+
+      return natoWord ?? character;
+    })
+    .join(' ');
+}

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

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <n-form-item label="Your text to convert to NATO phonetic alphabet">
+      <n-input v-model:value="input" placeholder="Put your text here..." clearable />
+    </n-form-item>
+
+    <n-space v-if="natoText" vertical>
+      <n-text>Your text in NATO phonetic alphabet</n-text>
+      <n-card>
+        {{ natoText }}
+      </n-card>
+
+      <n-space justify="center">
+        <n-button secondary autofocus @click="copy"> Copy NATO string </n-button>
+      </n-space>
+    </n-space>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useCopy } from '@/composable/copy';
+import { computed, ref } from 'vue';
+import { textToNatoAlphabet } from './text-to-nato-alphabet.service';
+
+const input = ref('');
+const natoText = computed(() => textToNatoAlphabet({ text: input.value }));
+const { copy } = useCopy({ source: natoText, text: 'NATO alphabet string copied.' });
+</script>
+
+<style lang="less" scoped></style>

src/utils/defaults.ts

@@ -1,4 +1,4 @@
-export { withDefaultOnError };
+export { withDefaultOnError, withDefaultOnErrorAsync };
 
 function withDefaultOnError<A, B>(cb: () => A, defaultValue: B): A | B {
   try {
@@ -7,3 +7,11 @@ function withDefaultOnError<A, B>(cb: () => A, defaultValue: B): A | B {
     return defaultValue;
   }
 }
+
+async function withDefaultOnErrorAsync<A, B>(cb: () => A, defaultValue: B): Promise<Awaited<A> | B> {
+  try {
+    return await cb();
+  } catch (_) {
+    return defaultValue;
+  }
+}