refactor(about, i18n): improved i18n dx with markdown (#753)

components.d.ts

@@ -43,6 +43,8 @@ declare module '@vue/runtime-core' {
     CLabel: typeof import('./src/ui/c-label/c-label.vue')['default']
     CLink: typeof import('./src/ui/c-link/c-link.vue')['default']
     'CLink.demo': typeof import('./src/ui/c-link/c-link.demo.vue')['default']
+    CMarkdown: typeof import('./src/ui/c-markdown/c-markdown.vue')['default']
+    'CMarkdown.demo': typeof import('./src/ui/c-markdown/c-markdown.demo.vue')['default']
     CModal: typeof import('./src/ui/c-modal/c-modal.vue')['default']
     'CModal.demo': typeof import('./src/ui/c-modal/c-modal.demo.vue')['default']
     CModalValue: typeof import('./src/ui/c-modal-value/c-modal-value.vue')['default']

locales/en.yml

@@ -26,21 +26,23 @@ home:
     lightMode: 'Light mode'
     mode: 'Toggle dark/light mode'
 about:
-  h1: 'About IT-Tools'
+  content: >
-  h1p1: 'This wonderful website, made with ❤ by'
+    # About IT-Tools
-  h1p2: ", aggregates useful tools for developer and people working in IT. If you find it useful, please feel free to share it to people you think may find it useful too and don''t forget to bookmark it in your shortcut bar!"
+
-  h1p3: 'IT Tools is open-source (under the MIT license) and free, and will always be, but it costs me money to host and renew the domain name. If you want to support my work, and encourage me to add more tools, please consider supporting by'
+    This wonderful website, made with ❤ by [Corentin Thomasset](https://github.com/CorentinTh) , aggregates useful tools for developer and people working in IT. If you find it useful, please feel free to share it to people you think may find it useful too and don't forget to bookmark it in your shortcut bar!
-  h1p4: 'sponsoring me'
+
-  h2: Technologies
+    IT Tools is open-source (under the MIT license) and free, and will always be, but it costs me money to host and renew the domain name. If you want to support my work, and encourage me to add more tools, please consider supporting by [sponsoring me](https://www.buymeacoffee.com/cthmsst).
-  h2p1: 'IT Tools is made in Vue.js (Vue 3) with the the Naive UI component library and is hosted and continuously deployed by Vercel. Third-party open-source libraries are used in some tools, you may find the complete list in the'
+
-  h2p2: 'file of the repository.'
+    ## Technologies
-  h3: 'Found a bug? A tool is missing?'
+
-  h3p1: 'If you need a tool that is currently not present here, and you think can be useful, you are welcome to submit a feature request in the'
+    IT Tools is made in Vue.js (Vue 3) with the the Naive UI component library and is hosted and continuously deployed by Vercel. Third-party open-source libraries are used in some tools, you may find the complete list in the [package.json](https://github.com/CorentinTh/it-tools/blob/main/package.json) file of the repository.
-  h3p2: 'issues section'
+
-  h3p3: 'in the GitHub repository.'
+    ## Found a bug? A tool is missing?
-  h3p4: "And if you found a bug, or something doesn''t work as expected, please file a bug report in the"
+
-  h3p5: 'issues section'
+    If you need a tool that is currently not present here, and you think can be useful, you are welcome to submit a feature request in the [issues section](https://github.com/CorentinTh/it-tools/issues/new/choose) in the GitHub repository.
-  h3p6: 'in the GitHub repository.'
+
+    And if you found a bug, or something doesn't work as expected, please file a bug report in the [issues section](https://github.com/CorentinTh/it-tools/issues/new/choose) in the GitHub repository.
+
 404:
   notFound: '404 Not Found'
   sorry: 'Sorry, this page does not seem to exist'

locales/fr.yml

@@ -25,6 +25,22 @@ home:
     darkMode: 'Mode sombre'
     lightMode: 'Mode clair'
     mode: 'Basculer le mode sombre/clair'
+about:
+  content: >
+    # À propos de IT-Tools
+
+    Ce merveilleux site, fait avec ❤ par [Corentin Thomasset](https://github.com/CorentinTh), regroupe des outils utiles pour les développeurs et les personnes travaillant dans l'informatique. Si vous le trouvez utile, n'hésitez pas à le partager et n'oubliez pas de le mettre dans vos favoris !
+
+    IT Tools est open-source (sous licence MIT) et gratuit, et le restera toujours, mais cela me coûte de l'argent pour l'héberger et renouveler le nom de domaine. Si vous voulez soutenir mon travail, et m'encourager à ajouter plus d'outils, n'hésitez pas à me [soutenir](https://www.buymeacoffee.com/cthmsst).
+
+    ## Technologies
+
+    IT Tools est fait en Vue.js (Vue 3) avec la bibliothèque de composants Naive UI et est hébergé et déployé en continu par Vercel. Des bibliothèques open-source tierces sont utilisées dans certains outils, vous pouvez trouver la liste complète dans le fichier [package.json](https://github.com/CorentinTh/it-tools/blob/main/package.json) du dépôt.
+
+    ## Vous avez trouvé un bug ? Un outil manque ?
+
+    Si vous avez besoin d'un outil qui n'est pas encore présent ici, et que vous pensez qu'il peut être utile, vous êtes invité à soumettre une demande de fonctionnalité dans la [section issue](https://github.com/CorentinTh/it-tools/issues/new/choose) du dépôt GitHub.
+
 404:
   notFound: '404 Not Found'
   sorry: "Désolé, cette page n'existe pas"

package.json

@@ -55,6 +55,7 @@
     "cronstrue": "^2.26.0",
     "crypto-js": "^4.1.1",
     "date-fns": "^2.29.3",
+    "dompurify": "^3.0.6",
     "emojilib": "^3.0.10",
     "figue": "^1.2.0",
     "fuse.js": "^6.6.2",
@@ -65,6 +66,7 @@
     "jwt-decode": "^3.1.2",
     "libphonenumber-js": "^1.10.28",
     "lodash": "^4.17.21",
+    "marked": "^10.0.0",
     "mathjs": "^11.9.1",
     "mime-types": "^2.1.35",
     "monaco-editor": "^0.43.0",
@@ -98,6 +100,7 @@
     "@tsconfig/node18": "^18.2.0",
     "@types/bcryptjs": "^2.4.2",
     "@types/crypto-js": "^4.1.1",
+    "@types/dompurify": "^3.0.5",
     "@types/jsdom": "^21.0.0",
     "@types/lodash": "^4.14.192",
     "@types/mime-types": "^2.1.1",

pnpm-lock.yaml

@@ -65,6 +65,9 @@ dependencies:
   date-fns:
     specifier: ^2.29.3
     version: 2.29.3
+  dompurify:
+    specifier: ^3.0.6
+    version: 3.0.6
   emojilib:
     specifier: ^3.0.10
     version: 3.0.10
@@ -95,6 +98,9 @@ dependencies:
   lodash:
     specifier: ^4.17.21
     version: 4.17.21
+  marked:
+    specifier: ^10.0.0
+    version: 10.0.0
   mathjs:
     specifier: ^11.9.1
     version: 11.9.1
@@ -190,6 +196,9 @@ devDependencies:
   '@types/crypto-js':
     specifier: ^4.1.1
     version: 4.1.1
+  '@types/dompurify':
+    specifier: ^3.0.5
+    version: 3.0.5
   '@types/jsdom':
     specifier: ^21.0.0
     version: 21.1.0
@@ -2423,7 +2432,7 @@ packages:
     resolution: {integrity: sha512-LrwV3f0Y6H7b7m/w1Y3bkGuR3HOiBK4QiHHW3HuRMza6MZodDQbj8Baik5/V5GiSg1/ltijS1CymVcycd1EfTw==}
     dependencies:
       '@types/markdown-it': 12.2.3
-      markdown-it: 13.0.1
+      markdown-it: 13.0.2
     dev: true
 
   /@mdit-vue/plugin-frontmatter@0.12.0:
@@ -2432,7 +2441,7 @@ packages:
       '@mdit-vue/types': 0.12.0
       '@types/markdown-it': 12.2.3
       gray-matter: 4.0.3
-      markdown-it: 13.0.1
+      markdown-it: 13.0.2
     dev: true
 
   /@mdit-vue/types@0.12.0:
@@ -2907,6 +2916,12 @@ packages:
     resolution: {integrity: sha512-BG7fQKZ689HIoc5h+6D2Dgq1fABRa0RbBWKBd9SP/MVRVXROflpm5fhwyATX5duFmbStzyzyycPB8qUYKDH3NA==}
     dev: true
 
+  /@types/dompurify@3.0.5:
+    resolution: {integrity: sha512-1Wg0g3BtQF7sSb27fJQAKck1HECM6zV1EB66j8JH9i3LCjYabJa0FSdiSgsD5K/RbrsR0SiraKacLB+T8ZVYAg==}
+    dependencies:
+      '@types/trusted-types': 2.0.3
+    dev: true
+
   /@types/estree@0.0.39:
     resolution: {integrity: sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==}
     dev: true
@@ -3353,7 +3368,7 @@ packages:
     dependencies:
       '@unhead/dom': 0.5.1
       '@unhead/schema': 0.5.1
-      '@vueuse/shared': 10.6.0(vue@3.3.4)
+      '@vueuse/shared': 10.6.1(vue@3.3.4)
       unhead: 0.5.1
       vue: 3.3.4
     transitivePeerDependencies:
@@ -3980,8 +3995,8 @@ packages:
       - vue
     dev: false
 
-  /@vueuse/shared@10.6.0(vue@3.3.4):
+  /@vueuse/shared@10.6.1(vue@3.3.4):
-    resolution: {integrity: sha512-0t4MVE18sO+/4Gh0jfeOXBTjKeV4606N9kIrDOLPjFl8Rwnlodn+QC5A4LfJuysK7aOsTMjF3KnzNeueaI0xlQ==}
+    resolution: {integrity: sha512-TECVDTIedFlL0NUfHWncf3zF9Gc4VfdxfQc8JFwoVZQmxpONhLxFrlm0eHQeidHj4rdTPL3KXJa0TZCk1wnc5Q==}
     dependencies:
       vue-demi: 0.14.6(vue@3.3.4)
     transitivePeerDependencies:
@@ -4934,6 +4949,10 @@ packages:
       domelementtype: 2.3.0
     dev: true
 
+  /dompurify@3.0.6:
+    resolution: {integrity: sha512-ilkD8YEnnGh1zJ240uJsW7AzE+2qpbOUYjacomn3AvJ6J4JhKGSZ2nh4wUIXPZrEPppaCLx5jFe8T89Rk8tQ7w==}
+    dev: false
+
   /domutils@3.1.0:
     resolution: {integrity: sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==}
     dependencies:
@@ -6842,8 +6861,9 @@ packages:
     resolution: {integrity: sha512-CkYQrPYZfWnu/DAmVCpTSX/xHpKZ80eKh2lAkyA6AJTef6bW+6JpbQZN5rofum7da+SyN1bi5ctTm+lTfcCW3g==}
     dev: true
 
-  /markdown-it@13.0.1:
+  /markdown-it@13.0.2:
-    resolution: {integrity: sha512-lTlxriVoy2criHP0JKRhO2VDG9c2ypWCsT237eDiLqi09rmbKoUetyGHq2uOIRoRS//kfoJckS0eUzzkDR+k2Q==}
+    resolution: {integrity: sha512-FtwnEuuK+2yVU7goGn/MJ0WBZMM9ZPgU9spqlFs7/A/pDIUNSOQZhUgOqYCficIuR2QaFnrt8LHqBWsbTAoI5w==}
+    hasBin: true
     dependencies:
       argparse: 2.0.1
       entities: 3.0.1
@@ -6851,6 +6871,12 @@ packages:
       mdurl: 1.0.1
       uc.micro: 1.0.6
 
+  /marked@10.0.0:
+    resolution: {integrity: sha512-YiGcYcWj50YrwBgNzFoYhQ1hT6GmQbFG8SksnYJX1z4BXTHSOrz1GB5/Jm2yQvMg4nN1FHP4M6r03R10KrVUiA==}
+    engines: {node: '>= 18'}
+    hasBin: true
+    dev: false
+
   /mathjs@11.9.1:
     resolution: {integrity: sha512-VdB9ELZ6Dwda13j5d1eCBETmPO8m9qIJETUdfZmTA9cPnXUiIk7UuoAmvxFqtfAe32XYuRugAec2Ndv0/RfRhg==}
     engines: {node: '>= 14'}
@@ -7624,7 +7650,7 @@ packages:
   /prosemirror-markdown@1.11.0:
     resolution: {integrity: sha512-yP9mZqPRstjZhhf3yykCQNE3AijxARrHe4e7esV9A+gp4cnGOH4QvrKYPpXLHspNWyvJJ+0URH+iIvV5qP1I2Q==}
     dependencies:
-      markdown-it: 13.0.1
+      markdown-it: 13.0.2
       prosemirror-model: 1.19.2
     dev: false
 
@@ -9084,7 +9110,7 @@ packages:
       '@mdit-vue/types': 0.12.0
       '@rollup/pluginutils': 5.0.2(rollup@2.79.1)
       '@types/markdown-it': 12.2.3
-      markdown-it: 13.0.1
+      markdown-it: 13.0.2
       vite: 4.4.9(@types/node@18.15.11)(less@4.1.3)
     transitivePeerDependencies:
       - rollup

src/pages/About.vue

@@ -1,63 +1,9 @@
 <script setup lang="ts">
 import { useHead } from '@vueuse/head';
-import { useTracker } from '@/modules/tracker/tracker.services';
 
 useHead({ title: 'About - IT Tools' });
-const { tracker } = useTracker();
 </script>
 
 <template>
-  <div mx-auto mt-50px max-w-600px>
+  <c-markdown :markdown="$t('about.content')" mx-auto mt-50px max-w-600px />
-    <h1>{{ $t('about.h1') }}</h1>
-    <p text-justify>
-      {{ $t('about.h1p1') }}
-      <c-link href="https://github.com/CorentinTh" target="_blank" rel="noopener">
-        Corentin Thomasset
-      </c-link>{{ $t('about.h1p2') }}
-    </p>
-    <p text-justify>
-      {{ $t('about.h1p3') }}
-      <c-link
-        href="https://www.buymeacoffee.com/cthmsst"
-        rel="noopener"
-        target="_blank"
-        @click="() => tracker.trackEvent({ eventName: 'Support button clicked' })"
-      >
-        {{ $t('about.h1p4') }}
-      </c-link>.
-    </p>
-
-    <h2>{{ $t('about.h2') }}</h2>
-    <p text-justify>
-      {{ $t('about.h2p1') }}
-      <c-link href="https://github.com/CorentinTh/it-tools/blob/main/package.json" rel="noopener" target="_blank">
-        package.json
-      </c-link>
-      {{ $t('about.h2p2') }}
-    </p>
-
-    <h2>{{ $t('about.h3') }}</h2>
-    <p text-justify>
-      {{ $t('about.h3p1') }}
-      <c-link
-        href="https://github.com/CorentinTh/it-tools/issues/new/choose"
-        rel="noopener"
-        target="_blank"
-      >
-        {{ $t('about.h3p2') }}
-      </c-link>
-      {{ $t('about.h3p3') }}
-    </p>
-    <p text-justify>
-      {{ $t('about.h3p4') }}
-      <c-link
-        href="https://github.com/CorentinTh/it-tools/issues/new/choose"
-        rel="noopener"
-        target="_blank"
-      >
-        {{ $t('about.h3p5') }}
-      </c-link>
-      {{ $t('about.h3p6') }}
-    </p>
-  </div>
 </template>

src/ui/c-markdown/c-markdown.demo.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const md = `
+# IT Tools
+
+## About
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl quis
+mollis blandit, nunc nisl aliquam nunc, vitae aliquam nisl nunc vitae nisl.
+
+- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+- Sed euismod, nisl quis mollis blandit, nunc nisl aliquam nunc, vitae aliquam nisl nunc vitae nisl.
+
+[it-tools](https://it-tools.tech)
+`;
+</script>
+
+<template>
+  <c-markdown :markdown="md" />
+</template>

src/ui/c-markdown/c-markdown.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { marked } from 'marked';
+import DomPurify from 'dompurify';
+
+const props = withDefaults(defineProps<{ markdown?: string }>(), { markdown: '' });
+const { markdown } = toRefs(props);
+
+marked.use({
+  renderer: {
+    link(href, title, text) {
+      return `<a class="text-primary transition decoration-none hover:underline" href="${href}" target="_blank" rel="noopener">${text}</a>`;
+    },
+  },
+});
+
+const html = computed(() => DomPurify.sanitize(marked(markdown.value), { ADD_ATTR: ['target'] }));
+</script>
+
+<template>
+  <div v-html="html" />
+</template>