From c7cb4615862c8d885e3aa3d26fecf0e249692175 Mon Sep 17 00:00:00 2001
From: Sebastian Martinez <me@sebastinez.dev>
Date: Thu, 5 Jan 2023 12:41:20 +0100
Subject: [PATCH] Convert URLs in project descriptions to anchor tags

Signed-off-by: Sebastian Martinez <me@sebastinez.dev>
---
 src/views/projects/ProjectMeta.svelte | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/views/projects/ProjectMeta.svelte b/src/views/projects/ProjectMeta.svelte
index 33440500e..589208715 100644
--- a/src/views/projects/ProjectMeta.svelte
+++ b/src/views/projects/ProjectMeta.svelte
@@ -3,12 +3,17 @@
 
   import Avatar from "@app/components/Avatar.svelte";
   import Clipboard from "@app/components/Clipboard.svelte";
+  import DOMPurify from "dompurify";
   import Link from "@app/components/Link.svelte";
   import ProjectLink from "@app/components/ProjectLink.svelte";
   import { formatSeedId } from "@app/lib/utils";
 
   export let project: Project;
   export let peer: PeerId | null = null;
+
+  const linkifyDescription = (text: string) => {
+    return text.replaceAll(/(https?:\/\/[^\s]+)/g, `<a href="$1">$1</a>`);
+  };
 </script>
 
 <style>
@@ -52,6 +57,10 @@
     margin: 1rem 0 1.5rem 0;
   }
 
+  .description :global(a) {
+    border-bottom: 1px solid var(--color-foreground-6);
+  }
+
   .content {
     padding: 0 2rem 0 8rem;
   }
@@ -112,5 +121,7 @@
     <span class="truncate">{project.id}</span>
     <Clipboard small text={project.id} />
   </div>
-  <div class="description">{project.description}</div>
+  <div class="description">
+    {@html DOMPurify.sanitize(linkifyDescription(project.description))}
+  </div>
 </header>