feat: linkify game description

components/content/ProseA.vue

@@ -3,7 +3,7 @@
   <NuxtLink
     :href="href"
     :target="target"
-    class="text-text-link underline visited:text-text-visited hover:no-underline"
+    class="link"
   >
     <slot />
   </NuxtLink>

package.json

@@ -52,12 +52,15 @@
     "@vee-validate/valibot": "^4.13.2",
     "@vuepic/vue-datepicker": "^9.0.1",
     "date-fns": "^3.3.1",
+    "linkify-html": "^4.1.3",
+    "linkifyjs": "^4.1.3",
     "radix-vue": "^1.2.2",
     "sass": "^1.70.0",
     "valibot": "^0.33.3",
     "vee-validate": "^4.12.4",
     "vue-advanced-cropper": "^2.8.8",
-    "vue-toast-notification": "^3"
+    "vue-toast-notification": "^3",
+    "xss": "^1.0.15"
   },
   "peerDependencies": {
     "eslint": ">=9.0.0"

pages/entry/[gameId]/index.vue

@@ -148,7 +148,12 @@ const loadFallbackImage = (e: Event) => {
           {{ game.place }}
         </div>
       </div>
-      <ProseP>{{ game.description }}</ProseP>
+      <p
+        v-linkify
+        class="my-4 whitespace-pre-wrap break-keep break-anywhere body"
+      >
+        {{ game.description }}
+      </p>
       <div
         v-if="canEdit"
         class="w-full flex justify-center"

plugins/00.linkify.ts

@@ -0,0 +1,24 @@
+import linkifyHtml from 'linkify-html'
+import type { Opts } from 'linkifyjs'
+import xss from 'xss'
+
+const linkify = (raw: string, options?: Opts) => {
+  const defaultOptions: Opts = {
+    className: 'link',
+  }
+  options = { ...defaultOptions, ...options }
+
+  const safeHtml = xss(raw)
+  return linkifyHtml(safeHtml, options)
+}
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.directive<HTMLElement, Opts>('linkify', {
+    beforeMount(el, binding) {
+      el.innerHTML = linkify(el.innerHTML, binding.value)
+    },
+    updated(el, binding) {
+      el.innerHTML = linkify(el.innerHTML, binding.value)
+    },
+  })
+})

unocss.config.ts

@@ -186,6 +186,7 @@ export default defineConfig({
     'body': 'text-body-m md:text-body-l',
     'label': 'text-label-m md:text-label-l',
     'caption': 'text-caption-l md:text-caption-m',
+    'link': 'text-text-link underline visited:text-text-visited hover:no-underline break-anywhere',
   },
   rules: [
     [