Add auto linking in Markdown components

Signed-off-by: Sebastian Martinez <me@sebastinez.dev>

package-lock.json

@@ -20,6 +20,7 @@
         "lodash": "^4.17.21",
         "marked": "^5.1.0",
         "marked-katex-extension": "^3.0.0",
+        "marked-linkify-it": "^3.1.0",
         "md5": "^2.3.0",
         "plausible-tracker": "^0.3.8",
         "sinon": "^15.2.0",
@@ -828,6 +829,11 @@
       "resolved": "https://registry.npmjs.org/@types/katex/-/katex-0.16.0.tgz",
       "integrity": "sha512-hz+S3nV6Mym5xPbT9fnO8dDhBFQguMYpY0Ipxv06JMi1ORgnEM4M1ymWDUhUNer3ElLmT583opRo4RzxKmh9jw=="
     },
+    "node_modules/@types/linkify-it": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-3.0.2.tgz",
+      "integrity": "sha512-HZQYqbiFVWufzCwexrvh694SOim8z2d+xJl5UNamcvQFejLY/2YUtzXHYi3cHdI7PMlS8ejH2slRAOJQ32aNbA=="
+    },
     "node_modules/@types/lodash": {
       "version": "4.14.195",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.195.tgz",
@@ -2987,6 +2993,14 @@
         "node": ">=10"
       }
     },
+    "node_modules/linkify-it": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-4.0.1.tgz",
+      "integrity": "sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==",
+      "dependencies": {
+        "uc.micro": "^1.0.1"
+      }
+    },
     "node_modules/local-pkg": {
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.4.3.tgz",
@@ -3090,6 +3104,18 @@
         "marked": "^4 || ^5"
       }
     },
+    "node_modules/marked-linkify-it": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/marked-linkify-it/-/marked-linkify-it-3.1.0.tgz",
+      "integrity": "sha512-F7OcF+zvbPemwYTNW8n0C9rEhKMuWsmgTvBwblwDvMRgoK3VV5Ls+mlUzrMOCI8P3ThVq1/KVRV7MBmTWvx2lw==",
+      "dependencies": {
+        "@types/linkify-it": "^3.0.2",
+        "linkify-it": "^4.0.1"
+      },
+      "peerDependencies": {
+        "marked": "^4 || ^5"
+      }
+    },
     "node_modules/md5": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",
@@ -4421,6 +4447,11 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/uc.micro": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
+      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA=="
+    },
     "node_modules/ufo": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.1.2.tgz",

package.json

@@ -63,6 +63,7 @@
     "lodash": "^4.17.21",
     "marked": "^5.1.0",
     "marked-katex-extension": "^3.0.0",
+    "marked-linkify-it": "^3.1.0",
     "md5": "^2.3.0",
     "plausible-tracker": "^0.3.8",
     "sinon": "^15.2.0",

src/lib/markdown.ts

@@ -2,6 +2,7 @@ import type { marked } from "marked";
 
 import dompurify from "dompurify";
 import katexMarkedExtension from "marked-katex-extension";
+import markedLinkifyIt from "marked-linkify-it";
 import { Marked, Renderer as BaseRenderer } from "marked";
 
 import emojis from "@app/lib/emojis";
@@ -142,6 +143,7 @@ export class Renderer extends BaseRenderer {
 
 const markedInstance = new Marked(
   katexMarkedExtension({ throwOnError: false }),
+  markedLinkifyIt(),
   {
     extensions: [
       emojisMarkedExtension,

src/views/projects/ProjectMeta.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
   import type { BaseUrl } from "@httpd-client";
 
-  import Clipboard from "@app/components/Clipboard.svelte";
   import dompurify from "dompurify";
+
+  import Clipboard from "@app/components/Clipboard.svelte";
   import Link from "@app/components/Link.svelte";
+  import markdown from "@app/lib/markdown";
   import { formatNodeId, twemoji } from "@app/lib/utils";
 
   export let baseUrl: BaseUrl;
@@ -11,10 +13,6 @@
   export let projectDescription: string;
   export let projectId: string;
   export let projectName: string;
-
-  const linkifyDescription = (text: string) => {
-    return text.replaceAll(/(https?:\/\/[^\s]+)/g, `<a href="$1">$1</a>`);
-  };
 </script>
 
 <style>
@@ -111,6 +109,6 @@
     <Clipboard small text={projectId} />
   </div>
   <div class="description" use:twemoji>
-    {@html dompurify.sanitize(linkifyDescription(projectDescription))}
+    {@html dompurify.sanitize(markdown.parse(projectDescription))}
   </div>
 </header>