chore(release): 2.11.0

chore: updated ci workflow to handle pnpm
refactor(colored-card): added transition on like hover
2025-11-02 13:03:16 +00:00 · 2022-08-19 17:47:34 +02:00 · 2022-08-19 17:42:46 +02:00 · 2022-08-19 17:40:13 +02:00 · 2022-08-19 17:40:00 +02:00 · 2022-08-18 10:53:23 +02:00
30 changed files with 7978 additions and 20678 deletions
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -7,32 +7,21 @@ jobs:
    runs-on: ubuntu-latest
    steps:
-      - name: Checkout
+      - uses: actions/checkout@v3
-        uses: actions/checkout@master
+      - run: corepack enable
-        with:
+      - uses: actions/setup-node@v3
          fetch-depth: 0
      - name: Setup node env
        uses: actions/setup-node@v3.0.0
        with:
          node-version: 16
-
+          cache: 'pnpm'
      - name: Cache node_modules
        uses: actions/cache@v2
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-
      - name: Install dependencies
-        run: npm ci
+        run: pnpm i
      - name: Run linters
-        run: npm run lint
+        run: pnpm lint
      - name: Run unit test
-        run: npm run test
+        run: pnpm test
      - name: Build the app
-        run: npm run build
+        run: pnpm build
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,26 @@
 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)
--- a/index.html
+++ b/index.html
@@ -31,11 +31,9 @@
      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="https://it-tools.tech/banner.png" />
+    <meta property="og:image" content="https://it-tools.tech/banner.png?v=2" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:domain" content="it-tools.tech" />
    <meta name="twitter:url" content="https://it-tools.tech/" />
    <meta name="twitter:site" content="@ittoolsdottech" />
    <meta name="twitter:creator" content="@cthmsst" />
@@ -44,7 +42,7 @@
      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="https://it-tools.tech/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>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "it-tools",
-  "version": "2.10.3",
+  "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/core": "^8.9.4",
-    "@vueuse/head": "^0.7.5",
+    "@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",
+    "naive-ui": "^2.32.1",
-    "pinia": "^2.0.11",
+    "pinia": "^2.0.18",
-    "plausible-tracker": "^0.3.5",
+    "plausible-tracker": "^0.3.8",
-    "qrcode": "^1.5.0",
+    "qrcode": "^1.5.1",
    "randombytes": "^2.1.0",
    "sql-formatter": "^8.2.0",
    "uuid": "^8.3.2",
-    "vue": "^3.2.31",
+    "vue": "^3.2.37",
-    "vue-router": "^4.0.12"
+    "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/node": "^16.11.49",
-    "@types/qrcode": "^1.4.2",
+    "@types/qrcode": "^1.4.3",
    "@types/randombytes": "^2.0.0",
    "@types/uuid": "^8.3.4",
-    "@typescript-eslint/parser": "^5.32.0",
+    "@typescript-eslint/parser": "^5.33.1",
-    "@vitejs/plugin-vue": "^2.2.2",
+    "@vitejs/plugin-vue": "^2.3.4",
-    "@vitejs/plugin-vue-jsx": "^1.3.7",
+    "@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",
+    "c8": "^7.12.0",
-    "eslint": "^8.5.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",
+    "less": "^4.1.3",
-    "prettier": "^2.6.2",
+    "prettier": "^2.7.1",
-    "standard-version": "^9.3.2",
+    "standard-version": "^9.5.0",
    "start-server-and-test": "^1.14.0",
    "typescript": "~4.5.5",
-    "vite": "^2.9.1",
+    "vite": "^2.9.15",
    "vite-plugin-md": "^0.12.4",
    "vite-plugin-pwa": "^0.11.13",
-    "vite-svg-loader": "^3.2.0",
+    "vite-svg-loader": "^3.4.0",
    "vitest": "^0.13.1",
-    "vue-tsc": "^0.31.4"
+    "vue-tsc": "^0.31.4",
    "workbox-window": "^6.5.4"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/components/ColoredCard.vue
+++ b/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>
--- a/src/components/TextareaCopyable.vue
+++ b/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<{
--- a/src/pages/Home.page.vue
+++ b/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>
--- a/src/plugins/naive.plugin.ts
+++ b/src/plugins/naive.plugin.ts
@@ -1,60 +1,62 @@
 import {
  create,
  NAlert,
  NAutoComplete,
  NButton,
  NConfigProvider,
  NCard,
-  NInput,
+  NCode,
  NColorPicker,
  NInputNumber,
  NSpace,
  NH1,
  NForm,
  NFormItem,
  NTimePicker,
  NText,
  NIcon,
  NSwitch,
  NCollapseTransition,
  NGrid,
  NGridItem,
  NPopconfirm,
  NSlider,
  NCollapse,
  NCollapseItem,
-  NProgress,
+  NCollapseTransition,
-  NAutoComplete,
+  NColorPicker,
-  NSelect,
+  NConfigProvider,
-  NUpload,
+  NDatePicker,
-  NEmpty,
+  NDivider,
  NModal,
  NTooltip,
  NAlert,
  NP,
  NH2,
  NDropdown,
  NDynamicInput,
  NEllipsis,
  NEmpty,
  NForm,
  NFormItem,
  NGradientText,
  NGrid,
  NGridItem,
  NH1,
  NH2,
  NH3,
  NIcon,
  NImage,
  NInput,
  NInputGroup,
  NInputGroupLabel,
  NInputNumber,
  NLayout,
  NLayoutSider,
  NMenu,
  NMessageProvider,
  NModal,
  NP,
  NPageHeader,
  NPopconfirm,
  NProgress,
  NResult,
  NH3,
  NEllipsis,
  NTag,
  NInputGroup,
  NInputGroupLabel,
  NDivider,
  NStatistic,
  NTable,
  NUploadDragger,
  NImage,
  NScrollbar,
-  NGradientText,
+  NSelect,
-  NCode,
+  NSlider,
-  NDatePicker,
+  NSpace,
  NStatistic,
  NSwitch,
  NTable,
  NTag,
  NText,
  NTimePicker,
  NTooltip,
  NUpload,
  NUploadDragger,
 } from 'naive-ui';
 const components = [
  NDynamicInput,
  NDatePicker,
  NCode,
  NGradientText,
--- a/src/tools/index.ts
+++ b/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',
--- a/src/tools/meta-tag-generator/OGSchemaType.type.ts
+++ b/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)[];
 }
--- a/src/tools/meta-tag-generator/index.ts
+++ b/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,
 });
--- a/src/tools/meta-tag-generator/meta-tag-generator.vue
+++ b/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>
--- a/src/tools/meta-tag-generator/og-schemas/article.ts
+++ b/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...' },
  ],
 };
--- a/src/tools/meta-tag-generator/og-schemas/book.ts
+++ b/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...' },
  ],
 };
--- a/src/tools/meta-tag-generator/og-schemas/image.ts
+++ b/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',
    },
  ],
 };
--- a/src/tools/meta-tag-generator/og-schemas/index.ts
+++ b/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,
 };
--- a/src/tools/meta-tag-generator/og-schemas/musicAlbum.ts
+++ b/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...',
    },
  ],
 };
--- a/src/tools/meta-tag-generator/og-schemas/musicPlaylist.ts
+++ b/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...' },
  ],
 };
--- a/src/tools/meta-tag-generator/og-schemas/musicRadioStation.ts
+++ b/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...' },
  ],
 };
--- a/src/tools/meta-tag-generator/og-schemas/musicSong.ts
+++ b/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',
    },
  ],
 };
--- a/src/tools/meta-tag-generator/og-schemas/profile.ts
+++ b/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' },
  ],
 };
--- a/src/tools/meta-tag-generator/og-schemas/twitter.ts
+++ b/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',
    },
  ],
 };
--- a/src/tools/meta-tag-generator/og-schemas/videoEpisode.ts
+++ b/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...' },
  ],
 };
--- a/src/tools/meta-tag-generator/og-schemas/videoMovie.ts
+++ b/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...' },
  ],
 };
--- a/src/tools/meta-tag-generator/og-schemas/videoOther.ts
+++ b/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],
 };
--- a/src/tools/meta-tag-generator/og-schemas/videoTVShow.ts
+++ b/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],
 };
--- a/src/tools/meta-tag-generator/og-schemas/website.ts
+++ b/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',
    },
  ],
 };
--- a/src/utils/boolean.test.ts
+++ b/src/utils/boolean.test.ts
@@ -1,10 +1,11 @@
 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(() => {})).to.eql(true);
+      expect(isNotThrowing(_.noop)).to.eql(true);
      expect(
        isNotThrowing(() => {
          throw new Error();
Author	SHA1	Message	Date
Corentin Thomasset	737319edf1	chore(release): 2.11.0	2022-08-19 17:47:34 +02:00
Corentin Thomasset	a77a82f5a2	chore: updated ci workflow to handle pnpm	2022-08-19 17:42:46 +02:00
Corentin Thomasset	da17696293	refactor(colored-card): added transition on like hover	2022-08-19 17:40:13 +02:00
Corentin Thomasset	164e32b442	feat(new-tool): meta tag generator	2022-08-19 17:40:00 +02:00
Corentin Thomasset	49755909bd	fix(deps): added missing optional deps	2022-08-18 10:53:23 +02:00
Corentin Thomasset	44d653b1f2	chore(deps): switched to pnpm	2022-08-18 10:35:22 +02:00
Corentin Thomasset	7c449f4f2d	fix: removed colored card border	2022-08-17 17:33:44 +02:00
Corentin Thomasset	ab7483b5c2	feat: added colored share card	2022-08-17 17:06:48 +02:00
Corentin THOMASSET	5222bd5d04	refactor(share): updated share meta	2022-08-16 15:22:41 +02:00