add credits and song description section

lyrics.go

@@ -2,7 +2,6 @@ package main
 
 import (
 	"fmt"
-	"log"
 	"net/http"
 	"path"
 	"text/template"
@@ -12,20 +11,19 @@ import (
 )
 
 type song struct {
-	Artist string
-	Title  string
-	Image  string
-	Lyrics string
+	Artist  string
+	Title   string
+	Image   string
+	Lyrics  string
+	Credits map[string]string
+	About   string
 }
 
 func (s *song) parseLyrics(doc *goquery.Document) {
 	doc.Find("[data-lyrics-container='true']").Each(func(i int, ss *goquery.Selection) {
-		h, err := ss.Html()
-		if err != nil {
-			log.Println(err)
+		if h, err := ss.Html(); err == nil {
+			s.Lyrics += h
 		}
-
-		s.Lyrics += h
 	})
 }
 
@@ -41,9 +39,27 @@ func (s *song) parseMetadata(doc *goquery.Document) {
 	s.Artist = artist
 }
 
+func (s *song) parseCredits(doc *goquery.Document) {
+	credits := make(map[string]string)
+
+	doc.Find("[class*='SongInfo__Credit']").Each(func(i int, ss *goquery.Selection) {
+		key := ss.Children().First().Text()
+		value := ss.Children().Last().Text()
+		credits[key] = value
+	})
+
+	s.Credits = credits
+}
+
+func (s *song) parseAbout(doc *goquery.Document) {
+	s.About = doc.Find("[class*='SongDescription__Content']").Text()
+}
+
 func (s *song) parse(doc *goquery.Document) {
 	s.parseLyrics(doc)
 	s.parseMetadata(doc)
+	s.parseCredits(doc)
+	s.parseAbout(doc)
 }
 
 func lyricsHandler(w http.ResponseWriter, r *http.Request) {

static/style.css

@@ -77,7 +77,6 @@ a {
 	display: flex;
 	flex-direction: column;
 	gap: 0.5rem;
-	text-align: center;
 }
 
 #metadata h1 {
@@ -98,8 +97,48 @@ a {
 }
 
 #container {
-	display: flex;
+	display: grid;
+	grid-template-columns: 1fr 3fr 1fr;
 	padding: 2rem;
-	gap: 5rem;
-	justify-content: center;
+}
+
+#credits {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+}
+
+#title {
+	font-size: 2rem;
+	color: #1B1A17;
+}
+
+#credits summary {
+	font-size: 1.4rem;
+	cursor: pointer;
+	color: #1E1E1E;
+}
+
+#credits p {
+	font-size: 1.3rem;
+	padding: 0.5rem;
+	color: #171717;
+}
+
+#info {
+	display: flex;
+	flex-direction: column;
+	gap: 2rem;
+}
+
+#about {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+}
+
+#about p {
+	font-size: 1.4rem;
+	color: #171717;
+	line-height: 1.8rem;
 }

views/lyrics.tmpl

@@ -15,6 +15,21 @@
 				<h1>{{.Title}}</h1>
 			</div>
 			<div id="lyrics">{{.Lyrics}}</div>
+			<div id="info">
+				<div id="about">
+					<h1 id="title">About</h1>
+					<p>{{.About}}</p>
+				</div>
+				<div id="credits">
+					<h1 id="title">Credits</h1>
+					{{range $key, $val := .Credits}}
+						<details>
+							<summary>{{$key}}</summary>
+							<p>{{$val}}</p>
+						</details>
+					{{end}} 
+				</div>
+			</div>
 		</div>
 	</body>
 </html>