feat: show track numbers on album tracklist

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

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;
+}

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>
 				}