feat: links in content display as clickable links

2 files changed, 32 insertions, 2 deletions

diff --git a/main.scm b/main.scm
index 376fbc2..f6a049c 100644
--- a/main.scm
+++ b/main.scm
@@ -179,6 +179,23 @@
 
 (define (get-opt opt opts) (find (cut equal? <> opt) opts))
 
+(define (content->sxml content)
+  (let ([r "(https://[^ ]*)"])
+    (if (irregex-search r content)
+      (let* ([starts-with-link (= 0 (irregex-match-start-index (irregex-search r content)))]
+             [texts (map (cut list 'div '(@ [class "content-text"]) <>) (irregex-split r content))]
+             [links (map (lambda (x) `(a (@ [href ,x] [class "content-link"]) ,x)) (irregex-extract r content))])
+        (define (go xs ys take-y?)
+          (cond
+            [(and (not (null-list? ys)) take-y?)
+             (cons (car ys) (go xs (cdr ys) #f))]
+            [(and (not (null-list? xs)) (not take-y?))
+             (cons (car xs) (go (cdr xs) ys #t))]
+            [else '()]
+            ))
+        (go texts links starts-with-link))
+      `(p ,content))))
+
 (define (post current-user p . opts)
     (let ([uri (post-path (id p))]
           [hide-comments-link (get-opt 'hide-comments-link opts)])
@@ -196,8 +213,8 @@
                          [style "max-width:100%;"]
                          [loading "lazy"]))
                 '())
-            (p (@ [style "min-height:0.5em;white-space:pre-wrap;"]) ,(content p))
-            (div [@ (class "post-info")]
+            (div (@ [class "content-container"]) ,(content->sxml (content p)))
+            (div (@ [class "post-info"])
                  (em "- " (a (@ [href ,(user-path (user p))]) ,(user p)))
                  (span (@ [style "float:right;"])
                        ,(if hide-comments-link '() `(a (@ [href ,uri] [style "margin-right:2px;"])
diff --git a/style.css b/style.css
index d09e1ab..4bd93b0 100644
--- a/style.css
+++ b/style.css
@@ -195,3 +195,16 @@ textarea {
       width: 100%;
   }
 }
+
+.content-container {
+    min-height:0.5em;
+    white-space:pre-wrap;
+}
+
+.content-link {
+  display: inline-block;
+}
+
+.content-text {
+  display: inline-block;
+}