Show annotations in between lyrics

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 {
-  background-color: #272d44;
+.annotation {
+  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;
 	}