From e1b3885680124ef5b0250be6999a7b37c445fd14 Mon Sep 17 00:00:00 2001
From: rramiachraf <51409801+rramiachraf@users.noreply.github.com>
Date: Tue, 5 Mar 2024 22:01:32 +0100
Subject: [PATCH] feat: improve annotation UI and set iframes into anchor tags

---
 handlers/annotations.go | 30 +++++++++++++++++++++++++-----
 static/style.css        | 15 +++++++++++++++
 2 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/handlers/annotations.go b/handlers/annotations.go
index 33a526c..252f039 100644
--- a/handlers/annotations.go
+++ b/handlers/annotations.go
@@ -7,7 +7,9 @@ import (
 	"fmt"
 	"net/http"
 	"regexp"
+	"strings"
 
+	"github.com/PuerkitoBio/goquery"
 	"github.com/gorilla/mux"
 	"github.com/rramiachraf/dumb/data"
 	"github.com/rramiachraf/dumb/views"
@@ -82,11 +84,29 @@ func Annotations(l *logrus.Logger) http.HandlerFunc {
 }
 
 func cleanBody(body string) string {
-	re := regexp.MustCompile(`(?i)https:\/\/images\.(rapgenius|genius)\.com\/`)
-	clean := re.ReplaceAllString(body, "/images/")
+	if doc, err := goquery.NewDocumentFromReader(strings.NewReader(body)); err == nil {
+		doc.Find("iframe").Each(func(i int, s *goquery.Selection) {
+			src, exists := s.Attr("src")
+			if exists {
+				html := fmt.Sprintf(`<a id="iframed-link" href="%s">Link</a>`, src)
+				s.ReplaceWithHtml(html)
+			}
+		})
 
-	re = regexp.MustCompile(`https?:\/\/[a-z]*.?genius.com`)
-	clean = re.ReplaceAllString(clean, "")
+		doc.Find("img").Each(func(i int, s *goquery.Selection) {
+			src, exists := s.Attr("src")
+			if exists {
+				re := regexp.MustCompile(`(?i)https:\/\/images\.(rapgenius|genius)\.com\/`)
+				pSrc := re.ReplaceAllString(src, "/images/")
+				s.SetAttr("src", pSrc)
+			}
+		})
 
-	return clean
+		if source, err := doc.Html(); err == nil {
+			body = source
+		}
+	}
+
+	re := regexp.MustCompile(`https?:\/\/[a-z]*.?genius.com`)
+	return re.ReplaceAllString(body, "")
 }
diff --git a/static/style.css b/static/style.css
index b583791..6125f70 100644
--- a/static/style.css
+++ b/static/style.css
@@ -152,6 +152,12 @@ a {
 	flex-grow: 1;
 }
 
+.annotation #iframed-link{
+	font-weight: 500;
+	background-color: #ffcd38;
+	padding: 2px 6px;
+}
+
 #credits p {
 	font-size: 1.3rem;
 	padding: 0.5rem;
@@ -180,6 +186,10 @@ a {
 
 .annotation {
   padding: 1rem;
+  border-radius: 4px;
+  background: #eee;
+  border: 1px solid #ddd;
+  color: #222;
 }
 
 .annotation img {
@@ -187,6 +197,11 @@ a {
   height: auto;
 }
 
+.annotation a {
+	background: none;
+	font-weight: 500;
+}
+
 .annotation ul {
   padding-left: 1em;
 }