commit 9f405067acfb0a1f3020b474ac4cbb5c5d741c3b
parent d777cb1ba933b5e0965abfa0e19d8162c6ca5068
Author: brookjeynes <me@brookjeynes.dev>
Date: Sat, 13 Jun 2026 11:56:42 +1000
ui: style artist page
Signed-off-by: brookjeynes <me@brookjeynes.dev>
Diffstat:
6 files changed, 50 insertions(+), 49 deletions(-)
diff --git a/internal/server/ui/layouts/base/base.templ b/internal/server/ui/layouts/base/base.templ
@@ -1,7 +1,7 @@
package base
templ Header() {
- <header>
+ <header role="banner">
<a href="/">lyrics</a>
<nav aria-label="Primary navigation">
<li><a href="/song/new">new song</a></li>
@@ -29,8 +29,9 @@ templ Base(params BaseParams) {
<script src="/static/js/lucide-utils.js"></script>
<script src="/static/js/toast.js" defer></script>
<script src="/static/js/string-utils.js" defer></script>
- <link rel="stylesheet" href="/static/styles.css" type="text/css"/>
+ <link rel="stylesheet" href="/static/style.css" type="text/css"/>
<link rel="stylesheet" href="/static/song.css" type="text/css"/>
+ <link rel="stylesheet" href="/static/artist.css" type="text/css"/>
<link rel="stylesheet" href="/static/minimal.css" type="text/css"/>
<link rel="stylesheet" href="/static/toast.css" type="text/css"/>
<title>{ params.Title }</title>
diff --git a/internal/server/ui/styles.css b/internal/server/ui/style.css
diff --git a/internal/server/ui/views/artist/artist.css b/internal/server/ui/views/artist/artist.css
@@ -0,0 +1,5 @@
+.album-title {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
diff --git a/internal/server/ui/views/artist/artist.templ b/internal/server/ui/views/artist/artist.templ
@@ -17,59 +17,53 @@ templ Artist(params ArtistParams) {
<span>({ *params.Artist.LatinName })</span>
}
</h1>
+ if params.Artist.Disambiguation != nil {
+ <p>{ *params.Artist.Disambiguation }</p>
+ }
</hgroup>
- if params.Artist.Disambiguation != nil {
- <p>{ *params.Artist.Disambiguation }</p>
- }
if params.Artist.Bio != nil {
<p>{ *params.Artist.Bio }</p>
}
</header>
<section>
<h2>Discography</h2>
- for _, album := range params.Albums {
- <article>
- <header>
- <hgroup>
- <h3>
- <a href={ routes.Album(album) }>{ album.Title }</a>
- </h3>
- if album.LatinTitle != nil {
- <span>({ *album.LatinTitle })</span>
- }
- </hgroup>
- <ul>
- for _, artist := range album.Artists {
- if artist.Artist.ID != params.Artist.ID {
- <li>
- <a href={ routes.Artist(artist.Artist) }>
- { artist.Artist.Name }
- if artist.Artist.LatinName != nil {
- <span>({ *artist.Artist.LatinName })</span>
- }
- </a>
- </li>
- }
- }
- </ul>
- <time datetime={ album.ReleaseDate.Format(time.DateOnly) }>{ album.ReleaseDate.Format("Jan 2, 2006") }</time>
- </header>
- <ol>
- for _, song := range album.Songs {
- <li>
- <a href={ routes.Song(song) }>
- { song.Title }
- if song.LatinTitle != nil {
- <span>({ *song.LatinTitle })</span>
+ <ol>
+ for _, album := range params.Albums {
+ <li>
+ <article>
+ <header class="album-title">
+ <h3>
+ <a href={ routes.Album(album) }>
+ { album.Title }
+ if album.LatinTitle != nil {
+ <span>({ *album.LatinTitle })</span>
+ }
+ </a>
+ </h3>
+ <time aria-label="Release date" datetime={ album.ReleaseDate.Format(time.DateOnly) }>
+ { album.ReleaseDate.Format("Jan 2, 2006") }
+ </time>
+ </header>
+ <section aria-label="Track List">
+ <ol>
+ for _, song := range album.Songs {
+ <li>
+ <a href={ routes.Song(song) }>
+ { song.Title }
+ if song.LatinTitle != nil {
+ <span>({ *song.LatinTitle })</span>
+ }
+ </a>
+ </li>
}
- </a>
- </li>
- }
- </ol>
- </article>
- }
+ </ol>
+ </section>
+ </article>
+ </li>
+ }
+ </ol>
</section>
- <section>
+ <section aria-label="Singles">
<h2>Singles</h2>
<ul>
for _, song := range params.Singles {
@@ -84,7 +78,7 @@ templ Artist(params ArtistParams) {
}
</ul>
</section>
- <section>
+ <section aria-label="Featured On">
<h2>Featured On</h2>
<ul>
for _, song := range params.Featured {
diff --git a/scripts/build-assets.sh b/scripts/build-assets.sh
@@ -12,9 +12,10 @@ mkdir -p static/vendor
cp static/vendor/*.min.js static/files/js/
-minify internal/server/ui/styles.css -o static/files/styles.css
+minify internal/server/ui/style.css -o static/files/style.css
minify internal/server/toast/toast.css -o static/files/toast.css
minify internal/server/ui/views/song/song.css -o static/files/song.css
+minify internal/server/ui/views/artist/artist.css -o static/files/artist.css
minify static/minimal.css -o static/files/minimal.css
minify internal/server/ui/js/string-utils.js -o static/files/js/string-utils.js
diff --git a/static/minimal.css b/static/minimal.css
@@ -206,7 +206,7 @@ label {
}
}
-header {
+header[role="banner"] {
display: flex;
justify-content: space-between;
gap: 15px;
