refactor(announcements): Move duplicate markdown code into utils/markdown.js

web/app/package-lock.json

@@ -11,10 +11,10 @@
         "chart.js": "^4.5.1",
         "chartjs-adapter-date-fns": "^3.0.0",
         "chartjs-plugin-annotation": "^3.1.0",
-        "date-fns": "^4.1.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "core-js": "^3.45.0",
+        "date-fns": "^4.1.0",
         "dompurify": "^3.3.0",
         "lucide-vue-next": "^0.539.0",
         "marked": "^16.4.1",
@@ -90,7 +90,6 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.18.10.tgz",
       "integrity": "sha512-JQM6k6ENcBFKVtWvLavlvi/mPcpYZ3+R+2EySDEMSMbp7Mn4FexlbbJVrx2R7Ijhr01T8gyqrOaABWIOgxeUyw==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "^2.1.0",
         "@babel/code-frame": "^7.18.6",
@@ -2700,7 +2699,6 @@
       "integrity": "sha512-nV7tYQLe7YsTtzFrfOMIHc5N2hp5lHG2rpYr0aNja9rNljdgcPZLyQRb2YRivTHqTv7lI962UXFURcpStHgyFw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/helper-compilation-targets": "^7.12.16",
         "@soda/friendly-errors-webpack-plugin": "^1.8.0",
@@ -3297,7 +3295,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -3379,7 +3376,6 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -3860,7 +3856,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001733",
         "electron-to-chromium": "^1.5.199",
@@ -4611,7 +4606,6 @@
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.1.tgz",
       "integrity": "sha512-yB5CNFa14MbPJcomwNh3wLThtkZgcNyI2bNMRt8iE5Z8Vwl7f8vQXFAzn2HDOJvtDq2NTZBUGMSUNNyrv3/+cw==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "icss-utils": "^5.1.0",
         "postcss": "^8.4.7",
@@ -4691,7 +4685,6 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
       "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "json-schema-traverse": "^1.0.0",
@@ -5374,7 +5367,6 @@
       "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
@@ -5532,7 +5524,6 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
       "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "json-schema-traverse": "^1.0.0",
@@ -7700,15 +7691,15 @@
       }
     },
     "node_modules/marked": {
-      "version": "12.0.2",
+      "version": "16.4.2",
-      "resolved": "https://registry.npmjs.org/marked/-/marked-12.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-16.4.2.tgz",
-      "integrity": "sha512-qXUm7e/YKFoqFPYPa3Ukg9xlI5cyAtGmyEIzMfW//m6kXwCy2Ps9DYf5ioijFKQ8qyuscrHoY04iJGctu2Kg0Q==",
+      "integrity": "sha512-TI3V8YYWvkVf3KJe1dRkpnjs68JUPyEa5vjKrp1XEEJUAOaQc+Qj+L1qWbPd0SJuAdQkFU0h73sXXqwDYxsiDA==",
       "license": "MIT",
       "bin": {
         "marked": "bin/marked.js"
       },
       "engines": {
-        "node": ">= 18"
+        "node": ">= 20"
       }
     },
     "node_modules/mdn-data": {
@@ -7856,7 +7847,6 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
       "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "json-schema-traverse": "^1.0.0",
@@ -8682,7 +8672,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -10844,7 +10833,6 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.18.tgz",
       "integrity": "sha512-7W4Y4ZbMiQ3SEo+m9lnoNpV9xG7QVMLa+/0RFwwiAVkeYoyGXqWE85jabU4pllJNUzqfLShJ5YLptewhCWUgNA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@vue/compiler-dom": "3.5.18",
         "@vue/compiler-sfc": "3.5.18",
@@ -11132,7 +11120,6 @@
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.74.0.tgz",
       "integrity": "sha512-A2InDwnhhGN4LYctJj6M1JEaGL7Luj6LOmyBHjcI8529cm5p6VXiTIW2sn6ffvEAKmveLzvu4jrihwXtPojlAA==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@types/eslint-scope": "^3.7.3",
         "@types/estree": "^0.0.51",
@@ -11318,7 +11305,6 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
       "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "json-schema-traverse": "^1.0.0",
@@ -11427,7 +11413,6 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
       "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "json-schema-traverse": "^1.0.0",
@@ -11934,7 +11919,6 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.18.10.tgz",
       "integrity": "sha512-JQM6k6ENcBFKVtWvLavlvi/mPcpYZ3+R+2EySDEMSMbp7Mn4FexlbbJVrx2R7Ijhr01T8gyqrOaABWIOgxeUyw==",
       "dev": true,
-      "peer": true,
       "requires": {
         "@ampproject/remapping": "^2.1.0",
         "@babel/code-frame": "^7.18.6",
@@ -13845,7 +13829,6 @@
       "resolved": "https://registry.npmjs.org/@vue/cli-service/-/cli-service-5.0.8.tgz",
       "integrity": "sha512-nV7tYQLe7YsTtzFrfOMIHc5N2hp5lHG2rpYr0aNja9rNljdgcPZLyQRb2YRivTHqTv7lI962UXFURcpStHgyFw==",
       "dev": true,
-      "peer": true,
       "requires": {
         "@babel/helper-compilation-targets": "^7.12.16",
         "@soda/friendly-errors-webpack-plugin": "^1.8.0",
@@ -14340,8 +14323,7 @@
       "version": "8.15.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
-      "dev": true,
+      "dev": true
-      "peer": true
     },
     "acorn-import-assertions": {
       "version": "1.8.0",
@@ -14399,7 +14381,6 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
       "dev": true,
-      "peer": true,
       "requires": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -14741,7 +14722,6 @@
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.25.2.tgz",
       "integrity": "sha512-0si2SJK3ooGzIawRu61ZdPCO1IncZwS8IzuX73sPZsXW6EQ/w/DAfPyKI8l1ETTCr2MnvqWitmlCUxgdul45jA==",
       "dev": true,
-      "peer": true,
       "requires": {
         "caniuse-lite": "^1.0.30001733",
         "electron-to-chromium": "^1.5.199",
@@ -15281,7 +15261,6 @@
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.1.tgz",
       "integrity": "sha512-yB5CNFa14MbPJcomwNh3wLThtkZgcNyI2bNMRt8iE5Z8Vwl7f8vQXFAzn2HDOJvtDq2NTZBUGMSUNNyrv3/+cw==",
       "dev": true,
-      "peer": true,
       "requires": {
         "icss-utils": "^5.1.0",
         "postcss": "^8.4.7",
@@ -15323,7 +15302,6 @@
           "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
           "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
           "dev": true,
-          "peer": true,
           "requires": {
             "fast-deep-equal": "^3.1.1",
             "json-schema-traverse": "^1.0.0",
@@ -15834,7 +15812,6 @@
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.1.tgz",
       "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==",
       "dev": true,
-      "peer": true,
       "requires": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
@@ -16074,7 +16051,6 @@
           "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
           "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
           "dev": true,
-          "peer": true,
           "requires": {
             "fast-deep-equal": "^3.1.1",
             "json-schema-traverse": "^1.0.0",
@@ -17539,9 +17515,9 @@
       }
     },
     "marked": {
-      "version": "12.0.2",
+      "version": "16.4.2",
-      "resolved": "https://registry.npmjs.org/marked/-/marked-12.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-16.4.2.tgz",
-      "integrity": "sha512-qXUm7e/YKFoqFPYPa3Ukg9xlI5cyAtGmyEIzMfW//m6kXwCy2Ps9DYf5ioijFKQ8qyuscrHoY04iJGctu2Kg0Q=="
+      "integrity": "sha512-TI3V8YYWvkVf3KJe1dRkpnjs68JUPyEa5vjKrp1XEEJUAOaQc+Qj+L1qWbPd0SJuAdQkFU0h73sXXqwDYxsiDA=="
     },
     "mdn-data": {
       "version": "2.0.14",
@@ -17648,7 +17624,6 @@
           "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
           "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
           "dev": true,
-          "peer": true,
           "requires": {
             "fast-deep-equal": "^3.1.1",
             "json-schema-traverse": "^1.0.0",
@@ -18259,7 +18234,6 @@
       "version": "8.5.6",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
       "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
-      "peer": true,
       "requires": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -19792,7 +19766,6 @@
       "version": "3.5.18",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.18.tgz",
       "integrity": "sha512-7W4Y4ZbMiQ3SEo+m9lnoNpV9xG7QVMLa+/0RFwwiAVkeYoyGXqWE85jabU4pllJNUzqfLShJ5YLptewhCWUgNA==",
-      "peer": true,
       "requires": {
         "@vue/compiler-dom": "3.5.18",
         "@vue/compiler-sfc": "3.5.18",
@@ -19806,7 +19779,7 @@
       "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-5.3.2.tgz",
       "integrity": "sha512-NrkbRRoYshbXbWqJkTN6InoDVwVb90C0R7eAVgMWcB9dPikbruaOoTFjFYHE/+tNPdIe6qdLCDjfjPHQ0fw4jw==",
       "requires": {}
-    }, 
+    },
     "vue-eslint-parser": {
       "version": "9.4.3",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.4.3.tgz",
@@ -20002,7 +19975,6 @@
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.74.0.tgz",
       "integrity": "sha512-A2InDwnhhGN4LYctJj6M1JEaGL7Luj6LOmyBHjcI8529cm5p6VXiTIW2sn6ffvEAKmveLzvu4jrihwXtPojlAA==",
       "dev": true,
-      "peer": true,
       "requires": {
         "@types/eslint-scope": "^3.7.3",
         "@types/estree": "^0.0.51",
@@ -20151,7 +20123,6 @@
           "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
           "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
           "dev": true,
-          "peer": true,
           "requires": {
             "fast-deep-equal": "^3.1.1",
             "json-schema-traverse": "^1.0.0",
@@ -20230,7 +20201,6 @@
           "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
           "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
           "dev": true,
-          "peer": true,
           "requires": {
             "fast-deep-equal": "^3.1.1",
             "json-schema-traverse": "^1.0.0",

web/app/src/components/AnnouncementBanner.vue

@@ -130,9 +130,8 @@
 
 <script setup>
 import { computed, ref } from 'vue'
-import { marked } from 'marked'
-import DOMPurify from 'dompurify'
 import { XCircle, AlertTriangle, Info, CheckCircle, Circle, ChevronDown } from 'lucide-vue-next'
+import { formatAnnouncementMessage } from '@/utils/markdown'
 
 // Props
 const props = defineProps({
@@ -237,55 +236,6 @@ const getTypeClasses = (type) => {
   return typeConfigs[type] || typeConfigs.none
 }
 
-const escapeHtml = (value) => {
-  if (value === null || value === undefined) {
-    return ''
-  }
-
-  return String(value)
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-    .replace(/'/g, '&#39;')
-}
-
-const renderer = new marked.Renderer()
-
-renderer.link = (tokenOrHref, title, text) => {
-  const tokenObject = typeof tokenOrHref === 'object' && tokenOrHref !== null
-    ? tokenOrHref
-    : null
-
-  const href = tokenObject ? tokenObject.href : tokenOrHref
-  const resolvedTitle = tokenObject ? tokenObject.title : title
-  const resolvedText = tokenObject ? tokenObject.text : text
-
-  const url = escapeHtml(href || '')
-  const titleAttribute = resolvedTitle ? ` title="${escapeHtml(resolvedTitle)}"` : ''
-  const linkText = resolvedText || ''
-
-  return `<a href="${url}" target="_blank" rel="noopener noreferrer"${titleAttribute}>${linkText}</a>`
-}
-
-marked.use({
-  renderer,
-  breaks: true,
-  gfm: true,
-  headerIds: false,
-  mangle: false
-})
-
-const formatAnnouncementMessage = (message) => {
-  if (!message) {
-    return ''
-  }
-
-  const markdown = String(message)
-  const html = marked.parse(markdown)
-  return DOMPurify.sanitize(html, { ADD_ATTR: ['target', 'rel'] })
-}
-
 const formatDate = (dateString) => {
   const date = new Date(dateString)
   const today = new Date()
@@ -349,22 +299,4 @@ const formatFullTimestamp = (timestamp) => {
     margin-left: 1.5rem;
   }
 }
-
-.announcement-content :deep(a) {
-  color: #1d4ed8;
-  text-decoration: underline;
-  font-weight: 500;
-}
-
-.announcement-content :deep(a:hover) {
-  color: #1e40af;
-}
-
-.dark .announcement-content :deep(a) {
-  color: #60a5fa;
-}
-
-.dark .announcement-content :deep(a:hover) {
-  color: #93c5fd;
-}
 </style>

web/app/src/components/PastAnnouncements.vue

@@ -70,9 +70,8 @@
 
 <script setup>
 import { ref, computed } from 'vue'
-import { marked } from 'marked'
-import DOMPurify from 'dompurify'
 import { XCircle, AlertTriangle, Info, CheckCircle, Circle, ChevronDown } from 'lucide-vue-next'
+import { formatAnnouncementMessage } from '@/utils/markdown'
 
 // Props
 const props = defineProps({
@@ -181,55 +180,6 @@ const getTypeClasses = (type) => {
   return typeConfigs[type] || typeConfigs.none
 }
 
-const escapeHtml = (value) => {
-  if (value === null || value === undefined) {
-    return ''
-  }
-
-  return String(value)
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-    .replace(/'/g, '&#39;')
-}
-
-const renderer = new marked.Renderer()
-
-renderer.link = (tokenOrHref, title, text) => {
-  const tokenObject = typeof tokenOrHref === 'object' && tokenOrHref !== null
-    ? tokenOrHref
-    : null
-
-  const href = tokenObject ? tokenObject.href : tokenOrHref
-  const resolvedTitle = tokenObject ? tokenObject.title : title
-  const resolvedText = tokenObject ? tokenObject.text : text
-
-  const url = escapeHtml(href || '')
-  const titleAttribute = resolvedTitle ? ` title="${escapeHtml(resolvedTitle)}"` : ''
-  const linkText = resolvedText || ''
-
-  return `<a href="${url}" target="_blank" rel="noopener noreferrer"${titleAttribute}>${linkText}</a>`
-}
-
-marked.use({
-  renderer,
-  breaks: true,
-  gfm: true,
-  headerIds: false,
-  mangle: false
-})
-
-const formatAnnouncementMessage = (message) => {
-  if (!message) {
-    return ''
-  }
-
-  const markdown = String(message)
-  const html = marked.parse(markdown)
-  return DOMPurify.sanitize(html, { ADD_ATTR: ['target', 'rel'] })
-}
-
 const formatDate = (dateString) => {
   const date = new Date(dateString)
   return date.toLocaleDateString('en-US', {
@@ -260,23 +210,3 @@ const formatFullTimestamp = (timestamp) => {
   })
 }
 </script>
-
-<style scoped>
-.past-announcements :deep(a) {
-  color: #1d4ed8;
-  text-decoration: underline;
-  font-weight: 500;
-}
-
-.past-announcements :deep(a:hover) {
-  color: #1e40af;
-}
-
-.dark .past-announcements :deep(a) {
-  color: #60a5fa;
-}
-
-.dark .past-announcements :deep(a:hover) {
-  color: #93c5fd;
-}
-</style>

web/app/src/components/ui/badge/Badge.vue

@@ -7,7 +7,7 @@
 <script setup>
 /* eslint-disable no-undef */
 import { cva } from 'class-variance-authority'
-import { combineClasses } from '@/lib/utils'
+import { combineClasses } from '@/utils/misc'
 
 defineProps({
   variant: {

web/app/src/components/ui/button/Button.vue

@@ -10,7 +10,7 @@
 <script setup>
 /* eslint-disable no-undef */
 import { cva } from 'class-variance-authority'
-import { combineClasses } from '@/lib/utils'
+import { combineClasses } from '@/utils/misc'
 
 defineProps({
   variant: {

web/app/src/components/ui/card/Card.vue

@@ -5,5 +5,5 @@
 </template>
 
 <script setup>
-import { combineClasses } from '@/lib/utils'
+import { combineClasses } from '@/utils/misc'
 </script>

web/app/src/components/ui/card/CardContent.vue

@@ -5,5 +5,5 @@
 </template>
 
 <script setup>
-import { combineClasses } from '@/lib/utils'
+import { combineClasses } from '@/utils/misc'
 </script>

web/app/src/components/ui/card/CardHeader.vue

@@ -5,5 +5,5 @@
 </template>
 
 <script setup>
-import { combineClasses } from '@/lib/utils'
+import { combineClasses } from '@/utils/misc'
 </script>

web/app/src/components/ui/card/CardTitle.vue

@@ -5,5 +5,5 @@
 </template>
 
 <script setup>
-import { combineClasses } from '@/lib/utils'
+import { combineClasses } from '@/utils/misc'
 </script>

web/app/src/components/ui/input/Input.vue

@@ -11,7 +11,7 @@
 
 <script setup>
 /* eslint-disable no-undef */
-import { combineClasses } from '@/lib/utils'
+import { combineClasses } from '@/utils/misc'
 
 defineProps({
   modelValue: {

web/app/src/utils/markdown.js

@@ -0,0 +1,46 @@
+import { marked } from 'marked'
+import DOMPurify from 'dompurify'
+
+const escapeHtml = (value) => {
+  if (value === null || value === undefined) {
+    return ''
+  }
+  return String(value)
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;')
+}
+
+const renderer = new marked.Renderer()
+
+renderer.link = (tokenOrHref, title, text) => {
+  const tokenObject = typeof tokenOrHref === 'object' && tokenOrHref !== null
+    ? tokenOrHref
+    : null
+  const href = tokenObject ? tokenObject.href : tokenOrHref
+  const resolvedTitle = tokenObject ? tokenObject.title : title
+  const resolvedText = tokenObject ? tokenObject.text : text
+  const url = escapeHtml(href || '')
+  const titleAttribute = resolvedTitle ? ` title="${escapeHtml(resolvedTitle)}"` : ''
+  const linkText = resolvedText || ''
+  return `<a href="${url}" target="_blank" rel="noopener noreferrer" class="text-blue-700 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 underline font-medium"${titleAttribute}>${linkText}</a>`
+}
+
+marked.use({
+  renderer,
+  breaks: true,
+  gfm: true,
+  headerIds: false,
+  mangle: false
+})
+
+export const formatAnnouncementMessage = (message) => {
+  if (!message) {
+    return ''
+  }
+  const markdown = String(message)
+  const html = marked.parse(markdown)
+  return DOMPurify.sanitize(html, { ADD_ATTR: ['target', 'rel'] })
+}