Initial support for annotations

annotation.go

@@ -0,0 +1,54 @@
+package main
+
+import (
+	"encoding/json"
+	"fmt"
+	"net/http"
+
+	"github.com/gorilla/mux"
+)
+
+type annotationResponse struct {
+	Response struct {
+		Referent struct {
+			Classification string
+			Annotations    []annotation
+		}
+	}
+}
+
+type annotation struct {
+	Body struct {
+		HTML string
+	}
+}
+
+type annotationResult struct {
+	Classification string
+	Annotations    []annotation
+}
+
+func annotationHandler(w http.ResponseWriter, r *http.Request) {
+	v := mux.Vars(r)
+	u := fmt.Sprintf("https://genius.com/api/referents/%s?text_format=html", v["id"])
+
+	res, err := sendRequest(u)
+	if err != nil {
+		//TODO handle err
+	}
+
+	defer res.Body.Close()
+
+	var data annotationResponse
+	decoder := json.NewDecoder(res.Body)
+	err = decoder.Decode(&data)
+	if err != nil {
+		//TODO handle err
+	}
+
+	w.Header().Set("content-type", "application/json")
+	w.WriteHeader(200)
+	result := annotationResult{data.Response.Referent.Classification, data.Response.Referent.Annotations}
+	encoder := json.NewEncoder(w)
+	encoder.Encode(&result)
+}

main.go

@@ -33,6 +33,7 @@ func main() {
 
 	r.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) { render("home", w, nil) })
 	r.HandleFunc("/search", searchHandler).Methods("GET")
+	r.HandleFunc("/annotation/{id}", annotationHandler).Methods("GET")
 	r.HandleFunc("/{id}-lyrics", lyricsHandler)
 	r.HandleFunc("/images/{filename}.{ext}", proxyHandler)
 	r.PathPrefix("/static/").Handler(http.StripPrefix("/static/", http.FileServer(http.Dir("static"))))

static/script.js

@@ -12,8 +12,32 @@ document.querySelectorAll("#lyrics a").forEach(item => {
 	item.addEventListener("click", getAnnotation)
 })
 
-function getAnnotation(e) {
-	e.preventDefault()
-	//const uri = e.target.parentElement.getAttribute("href")
-	console.log("Annotations are not yet implemented!")
+//const annotationContainer = document.getElementById("annotation-container")
+/**
+annotationContainer.onclick = (e) => {
+	const isVisible = e.target.style.display !== "none"
+	if (isVisible) {
+		e.target.style.display = "none"
+	}
+}
+**/
+
+const card = document.getElementById("annotation")
+
+async function getAnnotation(e) {
+	e.preventDefault()
+	const path = e.target.parentElement.getAttribute("href")
+	const annotationId = path.match(/\/(\d+)\/.*$/)[1]
+	console.log(e.offsetLeft)
+
+	try {
+		const res = await fetch(`/annotation/${annotationId}`)
+		const data = await res.json()
+		card.style.top = `${e.offsetY}px`
+		card.style.left = `${e.offsetX}px`
+		card.style.display = "block"
+		card.innerHTML = data.Annotations[0].Body.HTML
+	} catch (e) {
+		console.error(e)
+	}
 }

static/style.css

@@ -53,10 +53,8 @@ body {
 
 #lyrics a {
 	color: inherit;
-	cursor: initial;
 }
 
-/*** NOT YET IMPLEMENTED
 #lyrics a {
 	background-color: #ddd;
 	color: inherit;
@@ -65,7 +63,6 @@ body {
 #lyrics a:hover {
 	background-color: #ccc;
 }
-***/
 
 nav {
 	background-color: #ffcd38;
@@ -311,6 +308,28 @@ footer a:hover {
 	width: 8rem;
 	border-radius: 5px;
 }
+/**
+#annotation-container {
+	height: 100vh;
+	width: 100vw;
+	position: fixed;
+	top: 0;
+	left: 0;
+	display: none;
+}
+**/
+#annotation {
+	background: white;
+	box-shadow: 0 2px 3px #4d4d4d63;
+	border-radius: 5px;
+	padding: 2rem;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	margin-top: 2rem;
+	display: none;
+}
 
 /* dark mode */
 @media (prefers-color-scheme: dark) {

views/lyrics.tmpl

@@ -16,6 +16,7 @@
 				<h1>{{.Title}}</h1>
 			</div>
 			<div id="lyrics">{{.Lyrics}}</div>
+			<article id="annotation"></article>
 			<div id="info">
 				<div id="about">
 					<h1 id="title">About</h1>