From 8f838a20e65cb91f8a6dd2c398f832a2abb52f64 Mon Sep 17 00:00:00 2001
From: rramiachraf <51409801+rramiachraf@users.noreply.github.com>
Date: Thu, 2 May 2024 13:09:09 +0100
Subject: [PATCH] feat: show track numbers on album tracklist

---
 data/album.go     |  7 ++++---
 style/album.css   | 22 ++++++++++++++++++++++
 views/album.templ |  9 ++++++---
 3 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/data/album.go b/data/album.go
index 6940857..ba2fec6 100644
--- a/data/album.go
+++ b/data/album.go
@@ -17,8 +17,9 @@ type Album struct {
 }
 
 type Track struct {
-	Title string
-	Url   string
+	Title  string
+	Url    string
+	Number int
 }
 
 type albumMetadata struct {
@@ -65,7 +66,7 @@ func (a *Album) parseAlbumData(doc *goquery.Document) error {
 
 	for _, track := range albumMetadataFromPage.AlbumAppearances {
 		url := strings.Replace(track.Song.Url, "https://genius.com", "", -1)
-		a.Tracks = append(a.Tracks, Track{Title: track.Song.Title, Url: url})
+		a.Tracks = append(a.Tracks, Track{Title: track.Song.Title, Url: url, Number: track.TrackNumber})
 	}
 
 	return nil
diff --git a/style/album.css b/style/album.css
index 59335b3..c2041ac 100644
--- a/style/album.css
+++ b/style/album.css
@@ -12,3 +12,25 @@
 	flex-shrink: 0;
 	flex-grow: 1;
 }
+
+#album-single-track {
+	display: grid;
+	grid-template-columns: 3rem 1fr;
+	gap: 1rem;
+	align-items: center;
+	justify-content: center;
+}
+
+#album-single-track p {
+	color: #181d31;
+	font-weight: 500;
+}
+
+#album-single-track small {
+	font-size: 1.5rem;
+	color: #333;
+}
+
+#album-single-track:hover p {
+	text-decoration: underline;
+}
diff --git a/views/album.templ b/views/album.templ
index 3cb49fe..1e6d9c6 100644
--- a/views/album.templ
+++ b/views/album.templ
@@ -10,12 +10,15 @@ templ AlbumPage(a data.Album) {
 		<div id="container">
 			<div id="metadata">
 				<img id="album-artwork" src={ data.ExtractImageURL(a.Image) } alt="Album image"/>
-				<h2>{ a.Artist }</h2>
-				<h1>{ a.Name }</h1>
+				<div id="metadata-info">
+					<h2>{ a.Artist }</h2>
+					<h1>{ a.Name }</h1>
+				</div>
 			</div>
 			<div id="album-tracklist">
 				for _, t := range a.Tracks {
-					<a href={ templ.URL(t.Url) }>
+					<a href={ templ.URL(t.Url) } id="album-single-track">
+						<small>{ fmt.Sprintf("%d", t.Number) }</small>
 						<p>{ t.Title }</p>
 					</a>
 				}