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

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>