feat: improve annotation UI and set iframes into anchor tags

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 {
+	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)
+			}
+		})
+
+		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\/`)
-	clean := re.ReplaceAllString(body, "/images/")
+				pSrc := re.ReplaceAllString(src, "/images/")
+				s.SetAttr("src", pSrc)
+			}
+		})
 
-	re = regexp.MustCompile(`https?:\/\/[a-z]*.?genius.com`)
-	clean = re.ReplaceAllString(clean, "")
+		if source, err := doc.Html(); err == nil {
+			body = source
+		}
+	}
 
-	return clean
+	re := regexp.MustCompile(`https?:\/\/[a-z]*.?genius.com`)
+	return re.ReplaceAllString(body, "")
 }

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;
 }