ngn/dumb
1
0
Fork 0
Code Issues 1 Pull Requests 3 Actions Packages Activity

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

Browse Source
This commit is contained in:
rramiachraf 2024-06-10 12:16:11 +01:00
parent e6e9d5b16d
commit 355b721069
6 changed files with 94 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
data/search.go
View File

@ -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 {

4
style/artist.css
View File

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

6
style/lyrics.css
View File

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

61
style/search.css
View File

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

19
utils/url.go Normal file
View File

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

62
views/search.templ
View File

@ -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>
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) }
/>
<div>
<span>{ s.Result.ArtistNames }</span>
<h2>{ s.Result.Title }</h2>
</div>
</a>
}
<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="Song image"
/>
<div>
<span>{ s.Result.ArtistNames }</span>
<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>