Show annotations in between lyrics

annotations.go

@@ -25,6 +25,28 @@ type annotationsResponse struct {
 
 func annotationsHandler(w http.ResponseWriter, r *http.Request) {
 	id := mux.Vars(r)["id"]
+
+	if data, err := getCache(id); err == nil {
+
+		response, err := json.Marshal(data)
+
+		if err != nil {
+			logger.Errorf("could not marshal json: %s\n", err)
+			w.WriteHeader(http.StatusInternalServerError)
+			render("error", w, map[string]string{
+				"Status": "500",
+				"Error":  "Could not parse genius api response",
+			})
+			return
+		}
+		w.Header().Set("content-type", "application/json")
+		_, err = w.Write(response)
+		if err != nil {
+			logger.Errorln("Error sending response: ", err)
+		}
+		return
+	}
+
 	url := fmt.Sprintf("https://genius.com/api/referents/%s?text_format=html", id)
 	resp, err := sendRequest(url)
 
@@ -88,6 +110,7 @@ func annotationsHandler(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
+	setCache(id, body)
 	_, err = w.Write(response)
 	if err != nil {
 		logger.Errorln("Error sending response: ", err)

static/script.js

@@ -15,6 +15,11 @@ document.querySelectorAll("#lyrics a").forEach(item => {
 function getAnnotation(e) {
 	e.preventDefault()
 	const uri = e.target.parentElement.getAttribute("href")
+	const presentAnnotation = document.getElementById(uri)
+	if (presentAnnotation) {
+		presentAnnotation.remove()
+		return
+	}
 
 	xhr = new XMLHttpRequest()
 	xhr.open("GET", uri + "/annotations")
@@ -22,7 +27,11 @@ function getAnnotation(e) {
 	xhr.onreadystatechange = function() {
 		if (this.readyState == 4 && this.status == 200) {
 			const parsedReponse = JSON.parse(this.responseText)
-			document.getElementById("annotations").innerHTML = parsedReponse.html
+			const annotationDiv = document.createElement('div');
+			annotationDiv.innerHTML = parsedReponse.html
+			annotationDiv.id = uri
+			annotationDiv.className = "annotation"
+			e.target.parentElement.insertAdjacentElement('afterend', annotationDiv)
 		}
 	}
 }

static/style.css

@@ -56,7 +56,7 @@ body {
 	cursor: initial;
 }
 
-#lyrics a {
+#lyrics a, .annotation {
 	background-color: #ddd;
 	color: inherit;
 }
@@ -147,15 +147,23 @@ a {
 	gap: 0.5rem;
 }
 
-#about p, #annotations p, #annotations h2 {
+#about p {
 	font-size: 1.4rem;
 	color: #171717;
 	line-height: 1.8rem;
 	cursor: pointer;
 }
 
-#annotations blockquote {
+.annotation {
-  background-color: #272d44;
+  padding: 1rem;
+}
+
+.annotation img {
+  max-width: 100%;
+}
+
+.annotation ul {
+  padding-left: 1em;
 }
 
 .hidden {
@@ -329,11 +337,12 @@ footer a:hover {
 		color: #ccc;
 	}
 
-	#lyrics a {
+	#lyrics a, .annotation {
 		background-color: #272d44;
 		color: inherit;
 	}
 
+
 	#lyrics a:hover {
 		background-color: #32384f;
 	}
@@ -352,16 +361,10 @@ footer a:hover {
 	}
 
 	#about p,
-  #annotations p,
-  #annotations h2,
 	#credits summary {
 		color: #ccc;
 	}
 
-	#annotations blockquote {
-		background-color: #272d44;
-	}
-
 	#home h1, #error h1 {
 		color: #eee;
 	}

views/lyrics.tmpl

@@ -17,8 +17,6 @@
 			</div>
 			<div id="lyrics">{{.Lyrics}}</div>
 			<div id="info">
-				<div id="annotations">
-				</div>
 				<div id="about">
 					<h1 id="title">About</h1>
 					<p class="hidden" id="full_about">{{index .About 0}}</p>