Show annotations in the frontend

static/script.js

@@ -15,16 +15,14 @@ document.querySelectorAll("#lyrics a").forEach(item => {
 function getAnnotation(e) {
 	e.preventDefault()
 	const uri = e.target.parentElement.getAttribute("href")
-	console.log("Annotations are not yet implemented!", uri)
 
 	xhr = new XMLHttpRequest()
 	xhr.open("GET", uri + "/annotations")
 	xhr.send()
 	xhr.onreadystatechange = function() {
 		if (this.readyState == 4 && this.status == 200) {
-			json = JSON.parse(this.responseText)
-			alert(json.html)
-			// TODO: display annotations properly
+			const parsedReponse = JSON.parse(this.responseText)
+			document.getElementById("annotations").innerHTML = parsedReponse.html
 		}
 	}
 }

static/style.css

@@ -147,13 +147,17 @@ a {
 	gap: 0.5rem;
 }
 
-#about p {
+#about p, #annotations p, #annotations h2 {
 	font-size: 1.4rem;
 	color: #171717;
 	line-height: 1.8rem;
 	cursor: pointer;
 }
 
+#annotations blockquote {
+  background-color: #272d44;
+}
+
 .hidden {
 	display: none;
 }
@@ -348,10 +352,16 @@ 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,6 +17,8 @@
 			</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>