feat: improve lyrics page UI

data/lyrics.go

@@ -10,14 +10,17 @@ import (
 )
 
 type Song struct {
-	Artist      string
-	Title       string
-	Image       string
-	Lyrics      string
-	Credits     map[string]string
-	About       [2]string
-	Album       string
-	LinkToAlbum string
+	Artist  string
+	Title   string
+	Image   string
+	Lyrics  string
+	Credits map[string]string
+	About   [2]string
+	Album   struct {
+		URL   string
+		Name  string
+		Image string
+	}
 }
 
 type songResponse struct {
@@ -30,8 +33,9 @@ type songResponse struct {
 				Plain string
 			}
 			Album struct {
-				Url  string `json:"url"`
-				Name string `json:"name"`
+				URL   string `json:"url"`
+				Name  string `json:"name"`
+				Image string `json:"cover_art_url"`
 			}
 			CustomPerformances []customPerformance `json:"custom_performances"`
 		}
@@ -83,8 +87,9 @@ func (s *Song) parseSongData(doc *goquery.Document) {
 		s.About[0] = songData.Description.Plain
 		s.About[1] = truncateText(songData.Description.Plain)
 		s.Credits = make(map[string]string)
-		s.Album = songData.Album.Name
-		s.LinkToAlbum = strings.Replace(songData.Album.Url, "https://genius.com", "", -1)
+		s.Album.Name = songData.Album.Name
+		s.Album.URL = strings.Replace(songData.Album.URL, "https://genius.com", "", -1)
+		s.Album.Image = ExtractImageURL(songData.Album.Image)
 
 		for _, perf := range songData.CustomPerformances {
 			var artists []string

static/style.css

@@ -53,7 +53,6 @@ body {
 
 #lyrics a {
 	color: inherit;
-	cursor: initial;
 }
 
 #lyrics a, .annotation {
@@ -84,7 +83,7 @@ a {
 #metadata {
 	display: flex;
 	flex-direction: column;
-	gap: 0.5rem;
+	gap: 2rem;
 	flex-basis: 0;
 }
 
@@ -99,17 +98,25 @@ a {
 	font-weight: 500;
 }
 
+#metadata-info {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+}
+
 #album-artwork {
-	width: 20rem;
+	width: 24rem;
 	border-radius: 3px;
 	box-shadow: 0 1px 1px #ddd;
-	max-width: 200px;
 }
 
 #container {
-	display: flex;
-	padding: 5rem 10rem;
-	gap: 5rem;
+	display: grid;
+	padding: 5rem 0;
+	grid-template-columns: 24rem 1fr 24rem;
+	max-width: 1024px;
+	margin: auto;
+	gap: 4rem;
 }
 
 #credits {
@@ -129,6 +136,12 @@ a {
 	color: #1e1e1e;
 }
 
+#lyrics-album-container {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+}
+
 #album-tracklist{
 	display: flex;
 	flex-direction: column;
@@ -214,6 +227,7 @@ a {
 @media screen and (max-width: 900px) {
 	#container {
 		padding: 3rem 2rem;
+		display: flex;
 		flex-direction: column;
 		gap: 3rem;
 	}

views/lyrics.templ

@@ -9,10 +9,11 @@ templ LyricsPage(s data.Song) {
 	@layout(fmt.Sprintf("%s - %s lyrics", s.Artist, s.Title)) {
 		<div id="container">
 			<div id="metadata">
-				<a href={ templ.URL(s.LinkToAlbum) }><img id="album-artwork" src={ data.ExtractImageURL(s.Image) }/></a>
-				<h2>{ s.Artist }</h2>
-				<h1>{ s.Title }</h1>
-				<a href={ templ.URL(s.LinkToAlbum) }><h2>{ s.Album }</h2></a>
+				<img id="album-artwork" src={ data.ExtractImageURL(s.Image) }/>
+				<div id="metadata-info">
+					<h2>{ s.Artist }</h2>
+					<h1>{ s.Title }</h1>
+				</div>
 			</div>
 			<div id="lyrics">
 				@templ.Raw(s.Lyrics)
@@ -32,6 +33,14 @@ templ LyricsPage(s data.Song) {
 						</details>
 					}
 				</div>
+				if s.Album.Name != "" {
+					<div id="lyrics-album-container">
+						<h1 id="title">{ s.Album.Name }</h1>
+						<a href={ templ.URL(s.Album.URL) }>
+							<img title={ "Album: " + s.Album.Name } id="album-artwork" src={ s.Album.Image }/>
+						</a>
+					</div>
+				}
 			</div>
 		</div>
 	}