diff --git a/data/search.go b/data/search.go index d78ce41..8490941 100644 --- a/data/search.go +++ b/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 { diff --git a/style/artist.css b/style/artist.css index 9cbec55..06f64b2 100644 --- a/style/artist.css +++ b/style/artist.css @@ -66,3 +66,7 @@ #artist-section h2 { font-size: 2rem; } + +.dark #artist-section h2 { + color: #ddd; +} diff --git a/style/lyrics.css b/style/lyrics.css index 972ed6a..99db93a 100644 --- a/style/lyrics.css +++ b/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; } diff --git a/style/search.css b/style/search.css index f791ff9..70fd4c6 100644 --- a/style/search.css +++ b/style/search.css @@ -15,13 +15,19 @@ #search-results { display: flex; flex-direction: column; - gap: 1rem; + gap: 4rem; } -#search-results h1 { - text-align: center; - color: #111; - font-size: 2.5rem; +#search-results h2 { + color: #222; + font-size: 1.8rem; + 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 { - 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 { +.dark #search-page h2 { color: #eee; } @@ -103,7 +72,7 @@ border: 1px solid #888; } -.dark #search-item h2 { +.dark #search-item h3 { color: #ddd; } diff --git a/utils/url.go b/utils/url.go new file mode 100644 index 0000000..c3454d4 --- /dev/null +++ b/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 +} diff --git a/views/search.templ b/views/search.templ index 7daf62c..01d6896 100644 --- a/views/search.templ +++ b/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) {
for _, s := range r.Sections { if s.Type == "song" { -

Songs

- for _, s := range s.Hits { - - { -
- { s.Result.ArtistNames } -

{ s.Result.Title }

-
-
- } +
+

Songs

+ for _, s := range s.Hits { + + Song image +
+ { s.Result.ArtistNames } +

{ s.Result.Title }

+
+
+ } +
+ } + if s.Type == "album" { +
+

Albums

+ for _, a := range s.Hits { + + Album image +
+

{ a.Result.AlbumName }

+
+
+ } +
+ } + if s.Type == "artist" { +
+

Artists

+ for _, a := range s.Hits { + + Artist image +
+

{ a.Result.ArtistName }

+
+
+ } +
} }