wip

.eslintrc-auto-import.json

@@ -136,7 +136,6 @@
     "useDeviceOrientation": true,
     "useDevicePixelRatio": true,
     "useDevicesList": true,
-    "useDialog": true,
     "useDisplayMedia": true,
     "useDocumentVisibility": true,
     "useDraggable": true,
@@ -169,7 +168,6 @@
     "useKeyModifier": true,
     "useLastChanged": true,
     "useLink": true,
-    "useLoadingBar": true,
     "useLocalStorage": true,
     "useMagicKeys": true,
     "useManualRefHistory": true,
@@ -177,7 +175,6 @@
     "useMediaQuery": true,
     "useMemoize": true,
     "useMemory": true,
-    "useMessage": true,
     "useMounted": true,
     "useMouse": true,
     "useMouseInElement": true,
@@ -185,7 +182,6 @@
     "useMutationObserver": true,
     "useNavigatorLanguage": true,
     "useNetwork": true,
-    "useNotification": true,
     "useNow": true,
     "useObjectUrl": true,
     "useOffsetPagination": true,

.gitignore

@@ -31,3 +31,5 @@ coverage
 /test-results/
 /playwright-report/
 /playwright/.cache/
+
+.vite-ssg-temp

auto-imports.d.ts

@@ -133,7 +133,6 @@ declare global {
   const useDeviceOrientation: typeof import('@vueuse/core')['useDeviceOrientation']
   const useDevicePixelRatio: typeof import('@vueuse/core')['useDevicePixelRatio']
   const useDevicesList: typeof import('@vueuse/core')['useDevicesList']
-  const useDialog: typeof import('naive-ui')['useDialog']
   const useDisplayMedia: typeof import('@vueuse/core')['useDisplayMedia']
   const useDocumentVisibility: typeof import('@vueuse/core')['useDocumentVisibility']
   const useDraggable: typeof import('@vueuse/core')['useDraggable']
@@ -166,7 +165,6 @@ declare global {
   const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier']
   const useLastChanged: typeof import('@vueuse/core')['useLastChanged']
   const useLink: typeof import('vue-router')['useLink']
-  const useLoadingBar: typeof import('naive-ui')['useLoadingBar']
   const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
   const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys']
   const useManualRefHistory: typeof import('@vueuse/core')['useManualRefHistory']
@@ -174,7 +172,6 @@ declare global {
   const useMediaQuery: typeof import('@vueuse/core')['useMediaQuery']
   const useMemoize: typeof import('@vueuse/core')['useMemoize']
   const useMemory: typeof import('@vueuse/core')['useMemory']
-  const useMessage: typeof import('naive-ui')['useMessage']
   const useMounted: typeof import('@vueuse/core')['useMounted']
   const useMouse: typeof import('@vueuse/core')['useMouse']
   const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
@@ -182,7 +179,6 @@ declare global {
   const useMutationObserver: typeof import('@vueuse/core')['useMutationObserver']
   const useNavigatorLanguage: typeof import('@vueuse/core')['useNavigatorLanguage']
   const useNetwork: typeof import('@vueuse/core')['useNetwork']
-  const useNotification: typeof import('naive-ui')['useNotification']
   const useNow: typeof import('@vueuse/core')['useNow']
   const useObjectUrl: typeof import('@vueuse/core')['useObjectUrl']
   const useOffsetPagination: typeof import('@vueuse/core')['useOffsetPagination']
@@ -396,7 +392,6 @@ declare module 'vue' {
     readonly useDeviceOrientation: UnwrapRef<typeof import('@vueuse/core')['useDeviceOrientation']>
     readonly useDevicePixelRatio: UnwrapRef<typeof import('@vueuse/core')['useDevicePixelRatio']>
     readonly useDevicesList: UnwrapRef<typeof import('@vueuse/core')['useDevicesList']>
-    readonly useDialog: UnwrapRef<typeof import('naive-ui')['useDialog']>
     readonly useDisplayMedia: UnwrapRef<typeof import('@vueuse/core')['useDisplayMedia']>
     readonly useDocumentVisibility: UnwrapRef<typeof import('@vueuse/core')['useDocumentVisibility']>
     readonly useDraggable: UnwrapRef<typeof import('@vueuse/core')['useDraggable']>
@@ -429,7 +424,6 @@ declare module 'vue' {
     readonly useKeyModifier: UnwrapRef<typeof import('@vueuse/core')['useKeyModifier']>
     readonly useLastChanged: UnwrapRef<typeof import('@vueuse/core')['useLastChanged']>
     readonly useLink: UnwrapRef<typeof import('vue-router')['useLink']>
-    readonly useLoadingBar: UnwrapRef<typeof import('naive-ui')['useLoadingBar']>
     readonly useLocalStorage: UnwrapRef<typeof import('@vueuse/core')['useLocalStorage']>
     readonly useMagicKeys: UnwrapRef<typeof import('@vueuse/core')['useMagicKeys']>
     readonly useManualRefHistory: UnwrapRef<typeof import('@vueuse/core')['useManualRefHistory']>
@@ -437,7 +431,6 @@ declare module 'vue' {
     readonly useMediaQuery: UnwrapRef<typeof import('@vueuse/core')['useMediaQuery']>
     readonly useMemoize: UnwrapRef<typeof import('@vueuse/core')['useMemoize']>
     readonly useMemory: UnwrapRef<typeof import('@vueuse/core')['useMemory']>
-    readonly useMessage: UnwrapRef<typeof import('naive-ui')['useMessage']>
     readonly useMounted: UnwrapRef<typeof import('@vueuse/core')['useMounted']>
     readonly useMouse: UnwrapRef<typeof import('@vueuse/core')['useMouse']>
     readonly useMouseInElement: UnwrapRef<typeof import('@vueuse/core')['useMouseInElement']>
@@ -445,7 +438,6 @@ declare module 'vue' {
     readonly useMutationObserver: UnwrapRef<typeof import('@vueuse/core')['useMutationObserver']>
     readonly useNavigatorLanguage: UnwrapRef<typeof import('@vueuse/core')['useNavigatorLanguage']>
     readonly useNetwork: UnwrapRef<typeof import('@vueuse/core')['useNetwork']>
-    readonly useNotification: UnwrapRef<typeof import('naive-ui')['useNotification']>
     readonly useNow: UnwrapRef<typeof import('@vueuse/core')['useNow']>
     readonly useObjectUrl: UnwrapRef<typeof import('@vueuse/core')['useObjectUrl']>
     readonly useOffsetPagination: UnwrapRef<typeof import('@vueuse/core')['useOffsetPagination']>

components.d.ts

@@ -16,53 +16,19 @@ declare module '@vue/runtime-core' {
     InputCopyable: typeof import('./src/components/InputCopyable.vue')['default']
     MenuIconItem: typeof import('./src/components/MenuIconItem.vue')['default']
     MenuLayout: typeof import('./src/components/MenuLayout.vue')['default']
-    NAlert: typeof import('naive-ui')['NAlert']
-    NAutoComplete: typeof import('naive-ui')['NAutoComplete']
     NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
     NButton: typeof import('naive-ui')['NButton']
     NCard: typeof import('naive-ui')['NCard']
-    NCheckbox: typeof import('naive-ui')['NCheckbox']
-    NCode: typeof import('naive-ui')['NCode']
-    NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
-    NColorPicker: typeof import('naive-ui')['NColorPicker']
-    NConfigProvider: typeof import('naive-ui')['NConfigProvider']
-    NDatePicker: typeof import('naive-ui')['NDatePicker']
-    NDivider: typeof import('naive-ui')['NDivider']
-    NDynamicInput: typeof import('naive-ui')['NDynamicInput']
     NEllipsis: typeof import('naive-ui')['NEllipsis']
-    NForm: typeof import('naive-ui')['NForm']
-    NFormItem: typeof import('naive-ui')['NFormItem']
     NGi: typeof import('naive-ui')['NGi']
     NGrid: typeof import('naive-ui')['NGrid']
     NH1: typeof import('naive-ui')['NH1']
-    NH2: typeof import('naive-ui')['NH2']
     NH3: typeof import('naive-ui')['NH3']
-    NH4: typeof import('naive-ui')['NH4']
     NIcon: typeof import('naive-ui')['NIcon']
-    NImage: typeof import('naive-ui')['NImage']
-    NInput: typeof import('naive-ui')['NInput']
-    NInputGroup: typeof import('naive-ui')['NInputGroup']
-    NInputGroupLabel: typeof import('naive-ui')['NInputGroupLabel']
-    NInputNumber: typeof import('naive-ui')['NInputNumber']
-    NLayout: typeof import('naive-ui')['NLayout']
-    NLayoutSider: typeof import('naive-ui')['NLayoutSider']
-    NMenu: typeof import('naive-ui')['NMenu']
-    NP: typeof import('naive-ui')['NP']
-    NPageHeader: typeof import('naive-ui')['NPageHeader']
-    NProgress: typeof import('naive-ui')['NProgress']
-    NResult: typeof import('naive-ui')['NResult']
-    NScrollbar: typeof import('naive-ui')['NScrollbar']
-    NSelect: typeof import('naive-ui')['NSelect']
-    NSlider: typeof import('naive-ui')['NSlider']
     NSpace: typeof import('naive-ui')['NSpace']
-    NStatistic: typeof import('naive-ui')['NStatistic']
-    NSwitch: typeof import('naive-ui')['NSwitch']
-    NTable: typeof import('naive-ui')['NTable']
     NTag: typeof import('naive-ui')['NTag']
     NText: typeof import('naive-ui')['NText']
     NTooltip: typeof import('naive-ui')['NTooltip']
-    NUpload: typeof import('naive-ui')['NUpload']
-    NUploadDragger: typeof import('naive-ui')['NUploadDragger']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SearchBar: typeof import('./src/components/SearchBar.vue')['default']

package.json

@@ -2,6 +2,7 @@
   "name": "it-tools",
   "version": "2023.4.14-dbad773",
   "description": "Collection of handy online tools for developers, with great UX. ",
+  "type": "module",
   "keywords": [
     "productivity",
     "converter",
@@ -21,7 +22,7 @@
   },
   "scripts": {
     "dev": "vite",
-    "build": "vue-tsc --noEmit && vite build",
+    "build": "vue-tsc --noEmit && vite-ssg build",
     "preview": "vite preview --port 5050",
     "test": "npm run test:unit",
     "test:unit": "vitest --environment jsdom",
@@ -42,7 +43,6 @@
     "@vicons/material": "^0.12.0",
     "@vicons/tabler": "^0.12.0",
     "@vueuse/core": "^8.9.4",
-    "@vueuse/head": "^0.7.13",
     "@vueuse/router": "^9.13.0",
     "bcryptjs": "^2.4.3",
     "change-case": "^4.1.2",
@@ -54,7 +54,6 @@
     "date-fns": "^2.29.3",
     "figue": "^1.2.0",
     "fuse.js": "^6.6.2",
-    "hash-wasm": "^4.9.0",
     "highlight.js": "^11.7.0",
     "json5": "^2.2.3",
     "jwt-decode": "^3.1.2",
@@ -74,7 +73,6 @@
     "ua-parser-js": "^1.0.35",
     "uuid": "^8.3.2",
     "vue": "^3.2.47",
-    "vue-router": "^4.1.6",
     "yaml": "^2.2.1"
   },
   "devDependencies": {
@@ -83,7 +81,7 @@
     "@types/bcryptjs": "^2.4.2",
     "@types/crypto-js": "^4.1.1",
     "@types/jsdom": "^16.2.15",
-    "@types/lodash": "^4.14.192",
+    "@types/lodash": "^4.14.194",
     "@types/mime-types": "^2.1.1",
     "@types/netmask": "^2.0.0",
     "@types/node": "^16.18.23",
@@ -95,12 +93,13 @@
     "@types/uuid": "^8.3.4",
     "@typescript-eslint/parser": "^5.58.0",
     "@unocss/eslint-config": "^0.50.8",
-    "@vitejs/plugin-vue": "^2.3.4",
+    "@vitejs/plugin-vue": "^4.1.0",
     "@vitejs/plugin-vue-jsx": "^1.3.10",
     "@vue/eslint-config-prettier": "^7.1.0",
     "@vue/eslint-config-typescript": "^10.0.0",
     "@vue/test-utils": "^2.3.2",
     "@vue/tsconfig": "^0.1.3",
+    "@vueuse/head": "^1.1.23",
     "c8": "^7.13.0",
     "consola": "^3.0.2",
     "eslint": "^8.38.0",
@@ -112,16 +111,18 @@
     "less": "^4.1.3",
     "prettier": "^2.8.7",
     "start-server-and-test": "^1.15.4",
-    "typescript": "~4.5.5",
+    "typescript": "~4.9.5",
     "unocss": "^0.50.8",
-    "unplugin-auto-import": "^0.15.2",
+    "unplugin-auto-import": "^0.15.3",
     "unplugin-vue-components": "^0.24.1",
-    "vite": "^2.9.15",
+    "vite": "^4.2.1",
-    "vite-plugin-md": "^0.12.4",
+    "vite-plugin-md": "^0.21.5",
-    "vite-plugin-pwa": "^0.11.13",
+    "vite-plugin-pwa": "^0.14.7",
+    "vite-ssg": "^0.22.2",
     "vite-svg-loader": "^3.6.0",
-    "vitest": "^0.13.1",
+    "vitest": "^0.30.1",
-    "vue-tsc": "^0.31.4",
+    "vue-router": "^4.1.6",
+    "vue-tsc": "^1.2.0",
     "workbox-window": "^6.5.4",
     "zx": "^7.2.1"
   }

src/App.vue

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

src/components/CollapsibleToolMenu.vue

@@ -14,7 +14,6 @@
 
         <n-menu
           class="menu"
-          :value="(route.name as string)"
           :collapsed-width="64"
           :collapsed-icon-size="22"
           :options="tools"
@@ -32,7 +31,7 @@ import { ChevronRight } from '@vicons/tabler';
 import { useStorage } from '@vueuse/core';
 import { useThemeVars } from 'naive-ui';
 import { toRefs, computed, h } from 'vue';
-import { RouterLink, useRoute } from 'vue-router';
+import { RouterLink } from 'vue-router';
 import MenuIconItem from './MenuIconItem.vue';
 
 const props = withDefaults(defineProps<{ toolsByCategory?: ToolCategory[] }>(), { toolsByCategory: () => [] });

src/components/ColoredCard.vue

@@ -6,12 +6,12 @@
     <n-h3 class="title">
       <n-ellipsis>{{ title }}</n-ellipsis>
     </n-h3>
-
+    <!-- 
     <div class="description">
       <n-ellipsis :line-clamp="2" :tooltip="false">
         <slot />
       </n-ellipsis>
-    </div>
+    </div> -->
   </n-card>
 </template>
 

src/components/SearchBar.vue

@@ -7,7 +7,6 @@ import { SearchRound } from '@vicons/material';
 import { useMagicKeys, whenever } from '@vueuse/core';
 import type { NInput } from 'naive-ui';
 import { computed, h, ref } from 'vue';
-import { useRouter } from 'vue-router';
 import SearchBarItem from './SearchBarItem.vue';
 
 const toolToOption = (tool: Tool) => ({ label: tool.name, value: tool.path, tool });

src/layouts/base.layout.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { NIcon, useThemeVars } from 'naive-ui';
 import { computed } from 'vue';
-import { RouterLink } from 'vue-router';
 import { Heart, Menu2, Home2 } from '@vicons/tabler';
 import { toolsByCategory } from '@/tools';
 import { useStyleStore } from '@/stores/style.store';

src/layouts/tool.layout.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { useRoute } from 'vue-router';
 import { useHead } from '@vueuse/head';
 import type { HeadObject } from '@vueuse/head';
 import { computed } from 'vue';

src/main.ts

@@ -1,25 +1,30 @@
-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 { ViteSSG } from 'vite-ssg';
 import { plausible } from './plugins/plausible.plugin';
 
 import 'virtual:uno.css';
 
-registerSW();
+// import { naive } from './plugins/naive.plugin';
-
-import { naive } from './plugins/naive.plugin';
 
 import App from './App.vue';
-import router from './router';
+import { routes } from './router';
+import { config } from './config';
+// import { useToolStore } from './tools/tools.store';
 
-const app = createApp(App);
+export const createApp = ViteSSG(
+  // the root component
+  App,
+  // vue-router options
+  { routes, base: config.app.baseUrl },
+  // function to have custom setups
+  async ({ app, router, routes, isClient, initialState }) => {
+    // install plugins etc.
+    const pinia = createPinia();
+    app.use(pinia);
 
-app.use(createPinia());
-app.use(createHead());
-app.use(router);
-app.use(naive);
     app.use(plausible);
-
+    // import { registerSW } from 'virtual:pwa-register';
-app.mount('#app');
+    // registerSW();
+  },
+);

src/pages/Home.page.vue

@@ -12,6 +12,38 @@ useHead({ title: 'IT Tools - Handy online tools for developers' });
 </script>
 
 <template>
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum voluptatibus, voluptatum excepturi quidem ipsam
+  dignissimos sit eius illo corrupti, provident aliquam quaerat nostrum obcaecati velit ratione neque possimus beatae
+  quod?
+
+  <n-grid v-if="config.showBanner" x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
+    <n-gi>
+      aa
+      <colored-card title="You like it-tools?" :icon="Heart">
+        Give us a star on
+        <!-- <a
+          href="https://github.com/CorentinTh/it-tools"
+          rel="noopener"
+          target="_blank"
+          aria-label="IT-Tools' GitHub repository"
+          >GitHub</a
+        >
+        or follow us on
+        <a
+          href="https://twitter.com/ittoolsdottech"
+          rel="noopener"
+          target="_blank"
+          aria-label="IT-Tools' Twitter account"
+          >Twitter</a
+        >! Thank you
+        <n-icon :component="Heart" /> -->
+      </colored-card>
+    </n-gi>
+  </n-grid>
+
+  <n-button>a</n-button>
+
+  <!--
   <div class="home-page">
     <div class="grid-wrapper">
       <n-grid v-if="config.showBanner" x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
@@ -67,7 +99,7 @@ useHead({ title: 'IT Tools - Handy online tools for developers' });
         </n-gi>
       </n-grid>
     </div>
-  </div>
+  </div> -->
 </template>
 
 <style scoped lang="less">

src/plugins/plausible.plugin.ts

@@ -21,7 +21,7 @@ function createPlausibleInstance({
     trackLocalhost: boolean;
   };
 }) {
-  if (config.isTrackerEnabled) {
+  if (config.isTrackerEnabled && !import.meta.env.SSR) {
     return Plausible(config);
   }
 

src/router.ts

@@ -1,39 +1,38 @@
-import { createRouter, createWebHistory } from 'vue-router';
+import type { RouteRecordRaw } from 'vue-router';
-import { layouts } from './layouts/index';
 import HomePage from './pages/Home.page.vue';
+// import { layouts } from './layouts/index';
 import NotFound from './pages/404.page.vue';
-import { tools } from './tools';
+// import { tools } from './tools';
-import { config } from './config';
 
-const toolsRoutes = tools.map(({ path, name, component, ...config }) => ({
+// const toolsRoutes = tools.map(({ path, name, component, ...config }) => ({
-  path,
+//   path,
-  name,
+//   name,
-  component,
+//   component,
-  meta: { isTool: true, layout: layouts.toolLayout, name, ...config },
+//   meta: { isTool: true, layout: layouts.toolLayout, name, ...config },
-}));
+// }));
-const toolsRedirectRoutes = tools
+// const toolsRedirectRoutes = tools
-  .filter(({ redirectFrom }) => redirectFrom && redirectFrom.length > 0)
+//   .filter(({ redirectFrom }) => redirectFrom && redirectFrom.length > 0)
-  .flatMap(
+//   .flatMap(
-    ({ path, redirectFrom }) => redirectFrom?.map((redirectSource) => ({ path: redirectSource, redirect: path })) ?? [],
+//     ({ path, redirectFrom }) => redirectFrom?.map((redirectSource) => ({ path: redirectSource, redirect: path })) ?? [],
-  );
+//   );
+//
+// console.log({ toolsRoutes, toolsRedirectRoutes });
 
-const router = createRouter({
+const routes: RouteRecordRaw[] = [
-  history: createWebHistory(config.app.baseUrl),
+  // ...toolsRoutes,
-  routes: [
+  // ...toolsRedirectRoutes,
   {
     path: '/',
     name: 'home',
     component: HomePage,
   },
-    {
+  // {
-      path: '/about',
+  //   path: '/about',
-      name: 'about',
+  //   name: 'about',
-      component: () => import('./pages/About.vue'),
+  //   component: () => import('./pages/About.vue'),
-    },
+  // },
-    ...toolsRoutes,
-    ...toolsRedirectRoutes,
-    { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
-  ],
-});
 
-export default router;
+  // { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
+];
+
+export { routes };

src/tools/argon2-hash-generator/argon2-hash-generator.e2e.spec.ts

@@ -1,37 +0,0 @@
-import { test, expect } from '@playwright/test';
-
-test.describe('Tool - Argon2 hash generator', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto('/argon2-hash-generator');
-  });
-
-  test('Has correct title', async ({ page }) => {
-    await expect(page).toHaveTitle('Argon2 hash generator - IT Tools');
-  });
-
-  test('hash a string a verify that the result match', async ({ page }) => {
-    await page.getByTestId('input').fill('azerty');
-
-    await new Promise((resolve) => setTimeout(resolve, 500));
-    const hash = await page.getByTestId('hash').inputValue();
-
-    await page.getByTestId('compare-string').fill('azerty');
-    await page.getByTestId('compare-hash').fill(hash);
-
-    await new Promise((resolve) => setTimeout(resolve, 500));
-    const doTheyMatch = await page.getByTestId('do-they-match').innerText();
-
-    expect(doTheyMatch.trim()).toEqual('Yes');
-  });
-
-  test('hash a string a verify that the does not result match another string', async ({ page }) => {
-    await page.getByTestId('input').fill('azerty');
-    const hash = await page.getByTestId('hash').inputValue();
-
-    await page.getByTestId('compare-string').fill('NOT AZERTY');
-    await page.getByTestId('compare-hash').fill(hash);
-    const doTheyMatch = await page.getByTestId('do-they-match').innerText();
-
-    expect(doTheyMatch.trim()).toEqual('No');
-  });
-});

src/tools/argon2-hash-generator/argon2-hash-generator.vue

@@ -1,107 +0,0 @@
-<template>
-  <n-card title="Hash">
-    <n-form label-width="120">
-      <n-form-item label="Your string: " label-placement="left">
-        <n-input
-          v-model:value="input"
-          placeholder="Your string to bcrypt..."
-          autocomplete="off"
-          autocorrect="off"
-          autocapitalize="off"
-          spellcheck="false"
-          :input-props="{
-            'data-test-id': 'input',
-          }"
-        />
-      </n-form-item>
-      <n-form-item label="Iteration: " label-placement="left">
-        <n-input-number v-model:value="iterations" placeholder="Iterations..." min="0" w-full />
-      </n-form-item>
-      <n-form-item label="Memory size: " label-placement="left">
-        <n-input-number v-model:value="memorySize" placeholder="Memory size..." min="0" w-full />
-      </n-form-item>
-      <n-input
-        :value="hashed"
-        readonly
-        style="text-align: center"
-        placeholder="Set a string to hash above..."
-        :input-props="{
-          'data-test-id': 'hash',
-        }"
-      />
-    </n-form>
-    <br />
-    <n-space justify="center">
-      <n-button secondary @click="copy"> Copy hash </n-button>
-    </n-space>
-  </n-card>
-
-  <n-card title="Compare string with hash">
-    <n-form label-width="120">
-      <n-form-item label="Your string: " label-placement="left">
-        <n-input
-          v-model:value="compareString"
-          placeholder="Your string to compare..."
-          autocomplete="off"
-          autocorrect="off"
-          autocapitalize="off"
-          spellcheck="false"
-          :input-props="{
-            'data-test-id': 'compare-string',
-          }"
-        />
-      </n-form-item>
-      <n-form-item label="Your hash: " label-placement="left">
-        <n-input
-          v-model:value="compareHash"
-          placeholder="Your hash to compare..."
-          autocomplete="off"
-          autocorrect="off"
-          autocapitalize="off"
-          spellcheck="false"
-          :input-props="{
-            'data-test-id': 'compare-hash',
-          }"
-        />
-      </n-form-item>
-      <n-form-item label="Do they match ? " label-placement="left" :show-feedback="false">
-        <span data-test-id="do-they-match">
-          <n-tag v-if="compareMatch" :bordered="false" type="success" round>Yes</n-tag>
-          <n-tag v-else :bordered="false" type="error" round>No</n-tag>
-        </span>
-      </n-form-item>
-    </n-form>
-  </n-card>
-</template>
-
-<script setup lang="ts">
-import { useCopy } from '@/composable/copy';
-import { argon2id, argon2Verify } from 'hash-wasm';
-
-const input = ref('');
-const iterations = ref(32);
-const memorySize = ref(512);
-const hashLength = ref(32);
-
-const hashed = computedAsync(
-  async () =>
-    argon2id({
-      password: input.value,
-      salt: window.crypto.getRandomValues(new Uint8Array(16)),
-      parallelism: 1,
-      iterations: iterations.value,
-      memorySize: memorySize.value,
-      hashLength: hashLength.value,
-      outputType: 'encoded',
-    }),
-  '',
-);
-const { copy } = useCopy({ source: hashed, text: 'Hashed string copied to the clipboard' });
-
-const compareString = ref('');
-const compareHash = ref('');
-const compareMatch = computedAsync(
-  () => argon2Verify({ password: compareString.value, hash: compareHash.value }),
-  false,
-);
-</script>

src/tools/argon2-hash-generator/index.ts

@@ -1,12 +0,0 @@
-import { Lock } from '@vicons/tabler';
-import { defineTool } from '../tool';
-
-export const tool = defineTool({
-  name: 'Argon2 hash generator',
-  path: '/argon2-hash-generator',
-  description: 'Hash and compare string (password) using Argon2',
-  keywords: ['argon2', 'hash', 'generator', 'password', 'salt', 'crypto', 'security'],
-  component: () => import('./argon2-hash-generator.vue'),
-  icon: Lock,
-  createdAt: new Date('2023-04-16'),
-});

src/tools/bcrypt/bcrypt.vue

@@ -37,7 +37,7 @@
       <n-form-item label="Your hash: " label-placement="left">
         <n-input
           v-model:value="compareHash"
-          placeholder="Your hash to compare..."
+          placeholder="Your hahs to compare..."
           autocomplete="off"
           autocorrect="off"
           autocapitalize="off"
@@ -45,8 +45,9 @@
         />
       </n-form-item>
       <n-form-item label="Do they match ? " label-placement="left" :show-feedback="false">
-        <n-tag v-if="compareMatch" :bordered="false" type="success" round>Yes</n-tag>
+        <div class="compare-result" :class="{ positive: compareMatch }">
-        <n-tag v-else :bordered="false" type="error" round>No</n-tag>
+          {{ compareMatch ? 'Yes' : 'No' }}
+        </div>
       </n-form-item>
     </n-form>
   </n-card>
@@ -56,6 +57,9 @@
 import { computed, ref } from 'vue';
 import { hashSync, compareSync } from 'bcryptjs';
 import { useCopy } from '@/composable/copy';
+import { useThemeVars } from 'naive-ui';
+
+const themeVars = useThemeVars();
 
 const input = ref('');
 const saltCount = ref(10);
@@ -66,3 +70,13 @@ const compareString = ref('');
 const compareHash = ref('');
 const compareMatch = computed(() => compareSync(compareString.value, compareHash.value));
 </script>
+
+<style lang="less" scoped>
+.compare-result {
+  color: v-bind('themeVars.errorColor');
+
+  &.positive {
+    color: v-bind('themeVars.successColor');
+  }
+}
+</style>

src/tools/index.ts

@@ -1,141 +1,132 @@
-import { tool as base64FileConverter } from './base64-file-converter';
+// import { tool as base64FileConverter } from './base64-file-converter';
-import { tool as base64StringConverter } from './base64-string-converter';
+// import { tool as base64StringConverter } from './base64-string-converter';
-import { tool as basicAuthGenerator } from './basic-auth-generator';
+// import { tool as basicAuthGenerator } from './basic-auth-generator';
-import { tool as argon2HashGenerator } from './argon2-hash-generator';
+// import { tool as httpStatusCodes } from './http-status-codes';
-import { tool as httpStatusCodes } from './http-status-codes';
+// import { tool as yamlToJson } from './yaml-to-json-converter';
-import { tool as yamlToJson } from './yaml-to-json-converter';
+// import { tool as jsonToYaml } from './json-to-yaml-converter';
-import { tool as jsonToYaml } from './json-to-yaml-converter';
+// import { tool as ipv6UlaGenerator } from './ipv6-ula-generator';
-import { tool as ipv6UlaGenerator } from './ipv6-ula-generator';
+// import { tool as ipv4AddressConverter } from './ipv4-address-converter';
-import { tool as ipv4AddressConverter } from './ipv4-address-converter';
+// import { tool as benchmarkBuilder } from './benchmark-builder';
-import { tool as benchmarkBuilder } from './benchmark-builder';
+// import { tool as userAgentParser } from './user-agent-parser';
-import { tool as userAgentParser } from './user-agent-parser';
+// import { tool as ipv4SubnetCalculator } from './ipv4-subnet-calculator';
-import { tool as ipv4SubnetCalculator } from './ipv4-subnet-calculator';
+// import { tool as dockerRunToDockerComposeConverter } from './docker-run-to-docker-compose-converter';
-import { tool as dockerRunToDockerComposeConverter } from './docker-run-to-docker-compose-converter';
+// import { tool as htmlWysiwygEditor } from './html-wysiwyg-editor';
-import { tool as htmlWysiwygEditor } from './html-wysiwyg-editor';
+// import { tool as rsaKeyPairGenerator } from './rsa-key-pair-generator';
-import { tool as rsaKeyPairGenerator } from './rsa-key-pair-generator';
+// import { tool as textToNatoAlphabet } from './text-to-nato-alphabet';
-import { tool as textToNatoAlphabet } from './text-to-nato-alphabet';
+// import { tool as slugifyString } from './slugify-string';
-import { tool as slugifyString } from './slugify-string';
+// import { tool as keycodeInfo } from './keycode-info';
-import { tool as keycodeInfo } from './keycode-info';
+// import { tool as jsonMinify } from './json-minify';
-import { tool as jsonMinify } from './json-minify';
+// import { tool as bcrypt } from './bcrypt';
-import { tool as bcrypt } from './bcrypt';
+// import { tool as bip39 } from './bip39-generator';
-import { tool as bip39 } from './bip39-generator';
+// import { tool as caseConverter } from './case-converter';
-import { tool as caseConverter } from './case-converter';
+// import { tool as chmodCalculator } from './chmod-calculator';
-import { tool as chmodCalculator } from './chmod-calculator';
+// import { tool as chronometer } from './chronometer';
-import { tool as chronometer } from './chronometer';
+// import { tool as colorConverter } from './color-converter';
-import { tool as colorConverter } from './color-converter';
+// import { tool as crontabGenerator } from './crontab-generator';
-import { tool as crontabGenerator } from './crontab-generator';
+// import { tool as dateTimeConverter } from './date-time-converter';
-import { tool as dateTimeConverter } from './date-time-converter';
+// import { tool as deviceInformation } from './device-information';
-import { tool as deviceInformation } from './device-information';
+// import { tool as cypher } from './encryption';
-import { tool as cypher } from './encryption';
+// import { tool as etaCalculator } from './eta-calculator';
-import { tool as etaCalculator } from './eta-calculator';
+// import { tool as gitMemo } from './git-memo';
-import { tool as gitMemo } from './git-memo';
+// import { tool as hashText } from './hash-text';
-import { tool as hashText } from './hash-text';
+// import { tool as hmacGenerator } from './hmac-generator';
-import { tool as hmacGenerator } from './hmac-generator';
+// import { tool as htmlEntities } from './html-entities';
-import { tool as htmlEntities } from './html-entities';
+// import { tool as baseConverter } from './integer-base-converter';
-import { tool as baseConverter } from './integer-base-converter';
+// import { tool as jsonViewer } from './json-viewer';
-import { tool as jsonViewer } from './json-viewer';
+// import { tool as jwtParser } from './jwt-parser';
-import { tool as jwtParser } from './jwt-parser';
+// import { tool as loremIpsumGenerator } from './lorem-ipsum-generator';
-import { tool as loremIpsumGenerator } from './lorem-ipsum-generator';
+// import { tool as mathEvaluator } from './math-evaluator';
-import { tool as mathEvaluator } from './math-evaluator';
+// import { tool as metaTagGenerator } from './meta-tag-generator';
-import { tool as metaTagGenerator } from './meta-tag-generator';
+// import { tool as mimeTypes } from './mime-types';
-import { tool as mimeTypes } from './mime-types';
+// import { tool as otpCodeGeneratorAndValidator } from './otp-code-generator-and-validator';
-import { tool as otpCodeGeneratorAndValidator } from './otp-code-generator-and-validator';
+// import { tool as qrCodeGenerator } from './qr-code-generator';
-import { tool as qrCodeGenerator } from './qr-code-generator';
+// import { tool as randomPortGenerator } from './random-port-generator';
-import { tool as randomPortGenerator } from './random-port-generator';
+// import { tool as romanNumeralConverter } from './roman-numeral-converter';
-import { tool as romanNumeralConverter } from './roman-numeral-converter';
+// import { tool as sqlPrettify } from './sql-prettify';
-import { tool as sqlPrettify } from './sql-prettify';
+// import { tool as svgPlaceholderGenerator } from './svg-placeholder-generator';
-import { tool as svgPlaceholderGenerator } from './svg-placeholder-generator';
+// import { tool as temperatureConverter } from './temperature-converter';
-import { tool as temperatureConverter } from './temperature-converter';
+// import { tool as textStatistics } from './text-statistics';
-import { tool as textStatistics } from './text-statistics';
+// import { tool as tokenGenerator } from './token-generator';
-import { tool as tokenGenerator } from './token-generator';
 import type { ToolCategory } from './tools.types';
-import { tool as urlEncoder } from './url-encoder';
+// import { tool as urlEncoder } from './url-encoder';
-import { tool as urlParser } from './url-parser';
+// import { tool as urlParser } from './url-parser';
-import { tool as uuidGenerator } from './uuid-generator';
+// import { tool as uuidGenerator } from './uuid-generator';
-import { tool as macAddressLookup } from './mac-address-lookup';
+// import { tool as macAddressLookup } from './mac-address-lookup';
 
 export const toolsByCategory: ToolCategory[] = [
   {
     name: 'Crypto',
     components: [
-      tokenGenerator,
+      /* tokenGenerator, hashText, bcrypt, uuidGenerator, cypher, bip39, hmacGenerator, rsaKeyPairGenerator*/
-      hashText,
-      bcrypt,
-      argon2HashGenerator,
-      uuidGenerator,
-      cypher,
-      bip39,
-      hmacGenerator,
-      rsaKeyPairGenerator,
     ],
   },
-  {
+  // {
-    name: 'Converter',
+  //   name: 'Converter',
-    components: [
+  //   components: [
-      dateTimeConverter,
+  //     dateTimeConverter,
-      baseConverter,
+  //     baseConverter,
-      romanNumeralConverter,
+  //     romanNumeralConverter,
-      base64StringConverter,
+  //     base64StringConverter,
-      base64FileConverter,
+  //     base64FileConverter,
-      colorConverter,
+  //     colorConverter,
-      caseConverter,
+  //     caseConverter,
-      textToNatoAlphabet,
+  //     textToNatoAlphabet,
-      yamlToJson,
+  //     yamlToJson,
-      jsonToYaml,
+  //     jsonToYaml,
-    ],
+  //   ],
-  },
+  // },
-  {
+  // {
-    name: 'Web',
+  //   name: 'Web',
-    components: [
+  //   components: [
-      urlEncoder,
+  //     urlEncoder,
-      htmlEntities,
+  //     htmlEntities,
-      urlParser,
+  //     urlParser,
-      deviceInformation,
+  //     deviceInformation,
-      basicAuthGenerator,
+  //     basicAuthGenerator,
-      metaTagGenerator,
+  //     metaTagGenerator,
-      otpCodeGeneratorAndValidator,
+  //     otpCodeGeneratorAndValidator,
-      mimeTypes,
+  //     mimeTypes,
-      jwtParser,
+  //     jwtParser,
-      keycodeInfo,
+  //     keycodeInfo,
-      slugifyString,
+  //     slugifyString,
-      htmlWysiwygEditor,
+  //     htmlWysiwygEditor,
-      userAgentParser,
+  //     userAgentParser,
-      httpStatusCodes,
+  //     httpStatusCodes,
-    ],
+  //   ],
-  },
+  // },
-  {
+  // {
-    name: 'Images',
+  //   name: 'Images',
-    components: [qrCodeGenerator, svgPlaceholderGenerator],
+  //   components: [qrCodeGenerator, svgPlaceholderGenerator],
-  },
+  // },
-  {
+  // {
-    name: 'Development',
+  //   name: 'Development',
-    components: [
+  //   components: [
-      gitMemo,
+  //     gitMemo,
-      randomPortGenerator,
+  //     randomPortGenerator,
-      crontabGenerator,
+  //     crontabGenerator,
-      jsonViewer,
+  //     jsonViewer,
-      jsonMinify,
+  //     jsonMinify,
-      sqlPrettify,
+  //     sqlPrettify,
-      chmodCalculator,
+  //     chmodCalculator,
-      dockerRunToDockerComposeConverter,
+  //     dockerRunToDockerComposeConverter,
-    ],
+  //   ],
-  },
+  // },
-  {
+  // {
-    name: 'Network',
+  //   name: 'Network',
-    components: [ipv4SubnetCalculator, ipv4AddressConverter, macAddressLookup, ipv6UlaGenerator],
+  //   components: [ipv4SubnetCalculator, ipv4AddressConverter, macAddressLookup, ipv6UlaGenerator],
-  },
+  // },
-  {
+  // {
-    name: 'Math',
+  //   name: 'Math',
-    components: [mathEvaluator, etaCalculator],
+  //   components: [mathEvaluator, etaCalculator],
-  },
+  // },
-  {
+  // {
-    name: 'Measurement',
+  //   name: 'Measurement',
-    components: [chronometer, temperatureConverter, benchmarkBuilder],
+  //   components: [chronometer, temperatureConverter, benchmarkBuilder],
-  },
+  // },
-  {
+  // {
-    name: 'Text',
+  //   name: 'Text',
-    components: [loremIpsumGenerator, textStatistics],
+  //   components: [loremIpsumGenerator, textStatistics],
-  },
+  // },
 ];
 
 export const tools = toolsByCategory.flatMap(({ components }) => components);

vite.config.ts

@@ -15,15 +15,9 @@ import Unocss from 'unocss/vite';
 export default defineConfig({
   plugins: [
     AutoImport({
-      imports: [
+      imports: ['vue', 'vue-router', '@vueuse/core'],
-        'vue',
-        'vue-router',
-        '@vueuse/core',
-        {
-          'naive-ui': ['useDialog', 'useMessage', 'useNotification', 'useLoadingBar'],
-        },
-      ],
       vueTemplate: true,
+      dts: true,
       eslintrc: {
         enabled: true,
       },
@@ -77,6 +71,21 @@ export default defineConfig({
     }),
     Unocss(),
   ],
+
+  ssgOptions: {
+    script: 'async',
+    format: 'cjs',
+    formatting: 'prettify',
+  },
+
+  ssr: {
+    noExternal: ['lodash', 'date-fns'],
+    //   noExternal: Object.keys(pkg.dependencies || {}),
+  },
+  optimizeDeps: {
+    include: ['naive-ui'],
+  },
+
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),