chore(release): 2.11.0

.github/workflows/ci.yml

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

CHANGELOG.md

@@ -2,6 +2,35 @@
 
 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.11.0](https://github.com/CorentinTh/it-tools/compare/v2.10.3...v2.11.0) (2022-08-19)
+
+
+### Features
+
+* added colored share card ([ab7483b](https://github.com/CorentinTh/it-tools/commit/ab7483b5c2bd5aee1b8b609597c22b7b7b55606d))
+* **new-tool:** meta tag generator ([164e32b](https://github.com/CorentinTh/it-tools/commit/164e32b4428b8dfaaddcefa06b767a8af94573a9))
+
+
+### Bug Fixes
+
+* **deps:** added missing optional deps ([4975590](https://github.com/CorentinTh/it-tools/commit/49755909bdaea9399e51b67fbd1a6d071acd3182))
+* removed colored card border ([7c449f4](https://github.com/CorentinTh/it-tools/commit/7c449f4f2d491ce58726c5419a74dc295fa92905))
+
+
+### Refactors
+
+* **colored-card:** added transition on like hover ([da17696](https://github.com/CorentinTh/it-tools/commit/da17696293270005b1b7ec4aafc0df7496f602c7))
+* **share:** updated share meta ([5222bd5](https://github.com/CorentinTh/it-tools/commit/5222bd5d04ad089ba4cbade399dada55e29dcde5))
+
+### [2.10.3](https://github.com/CorentinTh/it-tools/compare/v2.10.2...v2.10.3) (2022-08-14)
+
+
+### Refactors
+
+* **share:** new share banner ([fcf4cfe](https://github.com/CorentinTh/it-tools/commit/fcf4cfe64d4c1c3814137c8ff23b83a1ca0d502d))
+* **share:** updated twitter meta tags ([992f96b](https://github.com/CorentinTh/it-tools/commit/992f96b48a89e2793ccf75fb9e28b2ec7b7f62b6))
+* **validation:** simplified validation management with helpers ([f54223f](https://github.com/CorentinTh/it-tools/commit/f54223fb0aaedbd101b5d3dc4176053533bb936a))
+
 ### [2.10.2](https://github.com/CorentinTh/it-tools/compare/v2.10.1...v2.10.2) (2022-08-04)
 
 

index.html

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "it-tools",
-  "version": "2.10.2",
+  "version": "2.11.0",
   "description": "Collection of handy online tools for developers, with great UX. ",
   "keywords": [
     "productivity",
@@ -32,66 +32,70 @@
   },
   "dependencies": {
     "@it-tools/bip39": "^0.0.4",
+    "@it-tools/oggen": "^1.3.0",
     "@vicons/material": "^0.12.0",
     "@vicons/tabler": "^0.12.0",
-    "@vueuse/core": "^8.2.1",
-    "@vueuse/head": "^0.7.5",
+    "@vueuse/core": "^8.9.4",
+    "@vueuse/head": "^0.7.9",
     "bcryptjs": "^2.4.3",
     "change-case": "^4.1.2",
-    "colord": "^2.9.2",
+    "colord": "^2.9.3",
     "cron-validator": "^1.3.1",
-    "cronstrue": "^2.2.0",
+    "cronstrue": "^2.11.0",
     "crypto-js": "^4.1.1",
-    "date-fns": "^2.28.0",
+    "date-fns": "^2.29.1",
     "figue": "^1.2.0",
-    "highlight.js": "^11.5.1",
+    "highlight.js": "^11.6.0",
+    "json5": "^2.2.1",
     "lodash": "^4.17.21",
-    "mathjs": "^10.6.0",
+    "mathjs": "^10.6.4",
     "mime-types": "^2.1.35",
-    "naive-ui": "^2.31.0",
-    "pinia": "^2.0.11",
-    "plausible-tracker": "^0.3.5",
-    "qrcode": "^1.5.0",
+    "naive-ui": "^2.32.1",
+    "pinia": "^2.0.18",
+    "plausible-tracker": "^0.3.8",
+    "qrcode": "^1.5.1",
     "randombytes": "^2.1.0",
     "sql-formatter": "^8.2.0",
     "uuid": "^8.3.2",
-    "vue": "^3.2.31",
-    "vue-router": "^4.0.12"
+    "vue": "^3.2.37",
+    "vue-router": "^4.1.3"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "^1.1.0",
+    "@rushstack/eslint-patch": "^1.1.4",
     "@types/bcryptjs": "^2.4.2",
     "@types/crypto-js": "^4.1.1",
-    "@types/jsdom": "^16.2.14",
+    "@types/jsdom": "^16.2.15",
+    "@types/lodash": "^4.14.183",
     "@types/mime-types": "^2.1.1",
-    "@types/node": "^16.11.25",
-    "@types/qrcode": "^1.4.2",
+    "@types/node": "^16.11.49",
+    "@types/qrcode": "^1.4.3",
     "@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",
+    "@typescript-eslint/parser": "^5.33.1",
+    "@vitejs/plugin-vue": "^2.3.4",
+    "@vitejs/plugin-vue-jsx": "^1.3.10",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^10.0.0",
-    "@vue/test-utils": "^2.0.0-rc.18",
+    "@vue/test-utils": "^2.0.2",
     "@vue/tsconfig": "^0.1.3",
-    "c8": "^7.11.0",
-    "eslint": "^8.5.0",
+    "c8": "^7.12.0",
+    "eslint": "^8.22.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-import-resolver-typescript": "^3.4.0",
+    "eslint-import-resolver-typescript": "^3.4.2",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-vue": "^8.2.0",
+    "eslint-plugin-vue": "^8.7.1",
     "jsdom": "^19.0.0",
-    "less": "^4.1.2",
-    "prettier": "^2.6.2",
-    "standard-version": "^9.3.2",
+    "less": "^4.1.3",
+    "prettier": "^2.7.1",
+    "standard-version": "^9.5.0",
     "start-server-and-test": "^1.14.0",
     "typescript": "~4.5.5",
-    "vite": "^2.9.1",
+    "vite": "^2.9.15",
     "vite-plugin-md": "^0.12.4",
     "vite-plugin-pwa": "^0.11.13",
-    "vite-svg-loader": "^3.2.0",
+    "vite-svg-loader": "^3.4.0",
     "vitest": "^0.13.1",
-    "vue-tsc": "^0.31.4"
+    "vue-tsc": "^0.31.4",
+    "workbox-window": "^6.5.4"
   }
 }

src/components/ColoredCard.vue

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

src/components/TextareaCopyable.vue

@@ -33,10 +33,12 @@ import { useClipboard, useElementSize } from '@vueuse/core';
 import hljs from 'highlight.js/lib/core';
 import jsonHljs from 'highlight.js/lib/languages/json';
 import sqlHljs from 'highlight.js/lib/languages/sql';
+import xmlHljs from 'highlight.js/lib/languages/xml';
 import { ref, toRefs } from 'vue';
 
 hljs.registerLanguage('sql', sqlHljs);
 hljs.registerLanguage('json', jsonHljs);
+hljs.registerLanguage('html', xmlHljs);
 
 const props = withDefaults(
   defineProps<{

src/pages/Home.page.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { toolsWithCategory } from '@/tools';
+import { Heart } from '@vicons/tabler';
 import { useHead } from '@vueuse/head';
+import ColoredCard from '../components/ColoredCard.vue';
 import ToolCard from '../components/ToolCard.vue';
 
 useHead({ title: 'IT Tools - Handy online tools for developers' });
@@ -9,6 +11,27 @@ 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>
+        <colored-card title="You like it-tools?" :icon="Heart">
+          Give us a star on
+          <a
+            href="https://github.com/CorentinTh/it-tools"
+            rel="noopener"
+            target="_blank"
+            aria-label="IT-Tools' github repository"
+            >github</a
+          >
+          or follow us on
+          <a
+            href="https://twitter.com/ittoolsdottech"
+            rel="noopener"
+            target="_blank"
+            aria-label="IT-Tools' twitter account"
+            >twitter</a
+          >! Thank you
+          <n-icon :component="Heart" />
+        </colored-card>
+      </n-gi>
       <n-gi v-for="tool in toolsWithCategory" :key="tool.name">
         <tool-card :tool="tool" />
       </n-gi>

src/plugins/naive.plugin.ts

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

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

@@ -60,6 +60,7 @@
 <script setup lang="ts">
 import { useCopy } from '@/composable/copy';
 import { useValidation } from '@/composable/validation';
+import { isNotThrowing } from '@/utils/boolean';
 import { withDefaultOnError } from '@/utils/defaults';
 import {
   chineseSimplifiedWordList,
@@ -98,11 +99,7 @@ const passphraseInput = ref('');
 const language = ref<keyof typeof languages>('English');
 const passphrase = computed({
   get() {
-    try {
-      return entropyToMnemonic(entropy.value, languages[language.value]);
-    } catch (_) {
-      return passphraseInput.value;
-    }
+    return withDefaultOnError(() => entropyToMnemonic(entropy.value, languages[language.value]), passphraseInput.value);
   },
   set(value: string) {
     passphraseInput.value = value;
@@ -128,14 +125,7 @@ const mnemonicValidation = useValidation({
   source: passphrase,
   rules: [
     {
-      validator: (value) => {
-        try {
-          mnemonicToEntropy(value, languages[language.value]);
-          return true;
-        } catch (_) {
-          return false;
-        }
-      },
+      validator: (value) => isNotThrowing(() => mnemonicToEntropy(value, languages[language.value])),
       message: 'Invalid mnemonic',
     },
   ],

src/tools/index.ts

@@ -22,6 +22,7 @@ import { tool as baseConverter } from './integer-base-converter';
 import { tool as jsonViewer } from './json-viewer';
 import { tool as loremIpsumGenerator } from './lorem-ipsum-generator';
 import { tool as mathEvaluator } from './math-evaluator';
+import { tool as metaTagGenerator } from './meta-tag-generator';
 import { tool as qrCodeGenerator } from './qr-code-generator';
 import { tool as randomPortGenerator } from './random-port-generator';
 import { tool as romanNumeralConverter } from './roman-numeral-converter';
@@ -55,7 +56,7 @@ export const toolsByCategory: ToolCategory[] = [
   {
     name: 'Web',
     icon: LockOpen,
-    components: [urlEncoder, htmlEntities, urlParser, deviceInformation, basicAuthGenerator],
+    components: [urlEncoder, htmlEntities, urlParser, deviceInformation, basicAuthGenerator, metaTagGenerator],
   },
   {
     name: 'Images',

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -60,6 +60,7 @@
 <script setup lang="ts">
 import { useCopy } from '@/composable/copy';
 import { useValidation } from '@/composable/validation';
+import { isNotThrowing } from '@/utils/boolean';
 import { withDefaultOnError } from '@/utils/defaults';
 import { computed, ref } from 'vue';
 
@@ -70,14 +71,7 @@ const encodedValidation = useValidation({
   source: encodeInput,
   rules: [
     {
-      validator: (value) => {
-        try {
-          encodeURIComponent(value);
-          return true;
-        } catch (_) {
-          return false;
-        }
-      },
+      validator: (value) => isNotThrowing(() => encodeURIComponent(value)),
       message: 'Impossible to parse this string',
     },
   ],
@@ -92,14 +86,7 @@ const decodeValidation = useValidation({
   source: encodeInput,
   rules: [
     {
-      validator: (value) => {
-        try {
-          decodeURIComponent(value);
-          return true;
-        } catch (_) {
-          return false;
-        }
-      },
+      validator: (value) => isNotThrowing(() => decodeURIComponent(value)),
       message: 'Impossible to parse this string',
     },
   ],

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

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

src/utils/boolean.test.ts

@@ -0,0 +1,16 @@
+import _ from 'lodash';
+import { describe, expect, it } from 'vitest';
+import { isNotThrowing } from './boolean';
+
+describe('boolean utils', () => {
+  describe('isNotThrowing', () => {
+    it('should return if the call throws or false otherwise', () => {
+      expect(isNotThrowing(_.noop)).to.eql(true);
+      expect(
+        isNotThrowing(() => {
+          throw new Error();
+        }),
+      ).to.eql(false);
+    });
+  });
+});

src/utils/boolean.ts

@@ -0,0 +1,10 @@
+export { isNotThrowing };
+
+function isNotThrowing(cb: () => unknown): boolean {
+  try {
+    cb();
+    return true;
+  } catch (_) {
+    return false;
+  }
+}