fix: display albums and artists on the search page, and also few css fixes

data/search.go

@@ -11,6 +11,11 @@ type result struct {
 	Title       string
 	Path        string
 	Thumbnail   string `json:"song_art_image_thumbnail_url"`
+	ArtistImage string `json:"image_url"`
+	ArtistName  string `json:"name"`
+	URL         string `json:"url"`
+	AlbumImage  string `json:"cover_art_url"`
+	AlbumName   string `json:"full_title"`
 }
 
 type hits []struct {

style/artist.css

@@ -66,3 +66,7 @@
 #artist-section h2 {
 	font-size: 2rem;
 }
+
+.dark #artist-section h2 {
+	color: #ddd;
+}

style/lyrics.css

@@ -47,13 +47,13 @@
 	flex-basis: 0;
 }
 
-#about {
+#description {
 	display: flex;
 	flex-direction: column;
 	gap: 0.5rem;
 }
 
-#about p {
+#description p {
 	font-size: 1.4rem;
 	color: #171717;
 	line-height: 1.8rem;
@@ -121,7 +121,7 @@
 	color: #ddd;
 }
 
-.dark #about p,
+.dark #description p,
 .dark #credits summary {
 	color: #ccc;
 }

style/search.css

@@ -15,13 +15,19 @@
 #search-results {
 	display: flex;
 	flex-direction: column;
-	gap: 1rem;
+	gap: 4rem;
 }
 
-#search-results h1 {
+#search-results h2 {
-	text-align: center;
+	color: #222;
-	color: #111;
+	font-size: 1.8rem;
-	font-size: 2.5rem;
+	font-weight: 500;
+}
+
+#search-section {
+	display: flex;
+	flex-direction: column; 
+	gap: 1rem;
 }
 
 #search-item {
@@ -34,9 +40,9 @@
 	box-shadow: 0 1px 1px #ddd;
 }
 
-#search-item h2 {
+#search-item h3 {
 	font-size: 1.8rem;
-	color: #222;
+	color: #333;
 }
 
 #search-item span {
@@ -58,44 +64,7 @@
 	color: #222;
 }
 
-#search-results {
+.dark #search-page h2 {
-	display: flex;
-	flex-direction: column;
-	gap: 1rem;
-}
-
-#search-results h1 {
-	text-align: center;
-	color: #111;
-	font-size: 2.5rem;
-}
-
-#search-item {
-	display: flex;
-	height: 8rem;
-	border: 1px solid #eee;
-	border-radius: 5px;
-	gap: 1rem;
-	padding: 1rem;
-	box-shadow: 0 1px 1px #ddd;
-}
-
-#search-item h2 {
-	font-size: 1.8rem;
-	color: #222;
-}
-
-#search-item span {
-	font-size: 1.3rem;
-	color: #333;
-}
-
-#search-item img {
-	width: 8rem;
-	border-radius: 5px;
-}
-
-.dark #search-page h1 {
 	color: #eee;
 }
 
@@ -103,7 +72,7 @@
 	border: 1px solid #888;
 }
 
-.dark #search-item h2 {
+.dark #search-item h3 {
 	color: #ddd;
 }
 

utils/url.go

@@ -0,0 +1,19 @@
+package utils
+
+import (
+	"net/url"
+	"strings"
+)
+
+func TrimURL(u string) string {
+	uu, err := url.Parse(u)
+	if err != nil {
+		return ""
+	}
+
+	if strings.HasPrefix(uu.Path, "/") {
+		return uu.Path
+	}
+
+	return "/" + uu.Path
+}

views/search.templ

@@ -1,8 +1,8 @@
 package views
 
 import (
-	"fmt"
 	"github.com/rramiachraf/dumb/data"
+	"github.com/rramiachraf/dumb/utils"
 )
 
 templ SearchPage(r data.SearchResults) {
@@ -14,19 +14,53 @@ templ SearchPage(r data.SearchResults) {
 			<div id="search-results">
 				for _, s := range r.Sections {
 					if s.Type == "song" {
-						<h1>Songs</h1>
+						<div id="search-section">
+							<h2>Songs</h2>
 							for _, s := range s.Hits {
 								<a id="search-item" href={ templ.URL(s.Result.Path) }>
 									<img
 										src={ data.ExtractImageURL(s.Result.Thumbnail) }
-									alt={ fmt.Sprintf("%s image", s.Result.Title) }
+										alt="Song image"
 									/>
 									<div>
 										<span>{ s.Result.ArtistNames }</span>
-									<h2>{ s.Result.Title }</h2>
+										<h3>{ s.Result.Title }</h3>
 									</div>
 								</a>
 							}
+						</div>
+					}
+					if s.Type == "album" {
+						<div id="search-section">
+							<h2>Albums</h2>
+							for _, a := range s.Hits {
+								<a id="search-item" href={ templ.URL(utils.TrimURL(a.Result.URL)) }>
+									<img
+										src={ data.ExtractImageURL(a.Result.AlbumImage) }
+										alt="Album image"
+									/>
+									<div>
+										<h3>{ a.Result.AlbumName }</h3>
+									</div>
+								</a>
+							}
+						</div>
+					}
+					if s.Type == "artist" {
+						<div id="search-section">
+							<h2>Artists</h2>
+							for _, a := range s.Hits {
+								<a id="search-item" href={ templ.URL(utils.TrimURL(a.Result.URL)) }>
+									<img
+										src={ data.ExtractImageURL(a.Result.ArtistImage) }
+										alt="Artist image"
+									/>
+									<div>
+										<h3>{ a.Result.ArtistName }</h3>
+									</div>
+								</a>
+							}
+						</div>
 					}
 				}
 			</div>