melosh/mal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: expand anime details with metadata and sidebar card

Browse Source
This commit is contained in:
mkelvers
2026-05-04 20:05:48 +02:00
parent 0c479860ef
commit d1433f54e2
2 changed files with 121 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
integrations/jikan/types.go
View File

@@ -65,6 +65,9 @@ type Anime struct {
Producers []NamedEntity `json:"producers"`
Themes []NamedEntity `json:"themes"`
Source string `json:"source"`
Background string `json:"background"`
Favorites int `json:"favorites"`
Members int `json:"members"`
Demographics []NamedEntity `json:"demographics"`
Licensors []NamedEntity `json:"licensors"`
Broadcast struct {
@@ -85,10 +88,22 @@ type Anime struct {
}
func (a Anime) ScoredByFormatted() string {
if a.ScoredBy == 0 {
return formatNumber(a.ScoredBy)
}
func (a Anime) MembersFormatted() string {
return formatNumber(a.Members)
}
func (a Anime) FavoritesFormatted() string {
return formatNumber(a.Favorites)
}
func formatNumber(n int) string {
if n == 0 {
return ""
}
s := fmt.Sprintf("%d", a.ScoredBy)
s := fmt.Sprintf("%d", n)
var res []string
for i := len(s); i > 0; i -= 3 {
start := i - 3

144
templates/anime.gohtml
View File

@@ -3,7 +3,7 @@
{{if .WatchlistIDs}}<script>initWatchlist({{.WatchlistIDs}})</script>{{end}}
{{$anime := .Anime}}
<div class="flex flex-col gap-10">
<div class="flex flex-col gap-10 pr-0 lg:pr-80">
<div class="flex flex-col gap-8 md:flex-row lg:gap-12">
<div class="flex w-64 shrink-0 flex-col items-center gap-6 md:w-80 md:items-start lg:w-96">
<div class="aspect-2/3 w-full overflow-hidden bg-white/5 shadow-lg">
@@ -45,7 +45,7 @@
<div class="mt-12 flex flex-col gap-12 lg:flex-row">
<div class="grow">
<section class="max-w-3xl">
<section class="max-w-4xl">
<h2 class="mb-4 text-lg font-normal text-neutral-300">Synopsis</h2>
<p id="synopsis-container" class="text-neutral-400 text-base leading-relaxed line-clamp-6 md:line-clamp-none">{{if $anime.Synopsis}}{{$anime.Synopsis}}{{else}}No synopsis available.{{end}}</p>
{{if and $anime.Synopsis (gt (len $anime.Synopsis) 400)}}
@@ -63,56 +63,120 @@
Read more
</button>
{{end}}
{{if $anime.Background}}
<section class="max-w-4xl mt-12">
<h2 class="mb-4 text-lg font-normal text-neutral-300">Background</h2>
<div class="text-neutral-400 text-sm leading-relaxed whitespace-pre-line border-l border-white/5 pl-6 italic">
{{$anime.Background}}
</div>
</section>
{{end}}
</section>
</div>
<aside class="flex shrink-0 flex-col lg:w-72">
<div class="bg-white/[0.02] p-6 ring-1 ring-white/5">
<h3 class="mb-6 text-base font-normal text-neutral-300">Information</h3>
<div class="flex flex-col gap-6 text-sm">
{{if $anime.Studios}}
<div>
<dt class="mb-1 text-xs font-normal text-neutral-500">Studios</dt>
<dd class="text-neutral-300">{{range $i, $s := $anime.Studios}}{{if $i}}, {{end}}{{$s.Name}}{{end}}</dd>
</div>
{{end}}
{{if $anime.Producers}}
<div>
<dt class="mb-1 text-xs font-normal text-neutral-500">Producers</dt>
<dd class="text-neutral-300 text-xs leading-relaxed">{{range $i, $p := $anime.Producers}}{{if $i}}, {{end}}{{$p.Name}}{{end}}</dd>
</div>
{{end}}
{{if $anime.Genres}}
<div>
<dt class="mb-1 text-xs font-normal text-neutral-500">Genres</dt>
<dd class="flex flex-wrap gap-1.5 pt-1">
{{range $anime.Genres}}
<span class="bg-white/5 px-2 py-0.5 text-[11px] font-normal text-neutral-400 ring-1 ring-white/5">{{.Name}}</span>
{{end}}
</dd>
</div>
{{end}}
{{if $anime.Duration}}
<div>
<dt class="mb-1 text-xs font-normal text-neutral-500">Duration</dt>
<dd class="text-neutral-300">{{$anime.Duration}}</dd>
</div>
{{end}}
<div class="grid grid-cols-2 gap-4">
{{if $anime.Rank}}
<aside class="fixed right-0 top-0 hidden h-screen w-80 shrink-0 flex-col overflow-y-auto border-l border-white/5 bg-neutral-950 p-10 lg:flex">
<div class="flex flex-col gap-10">
<section>
<h3 class="mb-8 text-lg font-normal text-neutral-300">Information</h3>
<div class="flex flex-col gap-8 text-sm">
{{if $anime.Studios}}
<div>
<dt class="mb-1 text-xs font-normal text-neutral-500">Rank</dt>
<dd class="text-neutral-300">#{{$anime.Rank}}</dd>
<dt class="mb-1 text-xs font-normal text-neutral-500">Studios</dt>
<dd class="text-neutral-300">{{range $i, $s := $anime.Studios}}{{if $i}}, {{end}}{{$s.Name}}{{end}}</dd>
</div>
{{end}}
{{if $anime.Producers}}
<div>
<dt class="mb-1 text-xs font-normal text-neutral-500">Producers</dt>
<dd class="text-neutral-300 text-xs leading-relaxed">{{range $i, $p := $anime.Producers}}{{if $i}}, {{end}}{{$p.Name}}{{end}}</dd>
</div>
{{end}}
{{if $anime.Licensors}}
<div>
<dt class="mb-1 text-xs font-normal text-neutral-500">Licensors</dt>
<dd class="text-neutral-300 text-xs leading-relaxed">{{range $i, $l := $anime.Licensors}}{{if $i}}, {{end}}{{$l.Name}}{{end}}</dd>
</div>
{{end}}
{{if $anime.Genres}}
<div>
<dt class="mb-1 text-xs font-normal text-neutral-500">Genres</dt>
<dd class="flex flex-wrap gap-2 pt-1">
{{range $anime.Genres}}
<span class="bg-white/5 px-2.5 py-1 text-[11px] font-normal text-neutral-400 ring-1 ring-white/5">{{.Name}}</span>
{{end}}
</dd>
</div>
{{end}}
{{if $anime.Themes}}
<div>
<dt class="mb-1 text-xs font-normal text-neutral-500">Themes</dt>
<dd class="flex flex-wrap gap-2 pt-1">
{{range $anime.Themes}}
<span class="bg-white/5 px-2.5 py-1 text-[11px] font-normal text-neutral-400 ring-1 ring-white/5">{{.Name}}</span>
{{end}}
</dd>
</div>
{{end}}
{{if $anime.Demographics}}
<div>
<dt class="mb-1 text-xs font-normal text-neutral-500">Demographics</dt>
<dd class="flex flex-wrap gap-2 pt-1">
{{range $anime.Demographics}}
<span class="bg-white/5 px-2.5 py-1 text-[11px] font-normal text-neutral-400 ring-1 ring-white/5">{{.Name}}</span>
{{end}}
</dd>
</div>
{{end}}
<div class="grid grid-cols-2 gap-4">
{{if $anime.Source}}
<div>
<dt class="mb-1 text-xs font-normal text-neutral-500">Source</dt>
<dd class="text-neutral-300">{{$anime.Source}}</dd>
</div>
{{end}}
{{if $anime.Duration}}
<div>
<dt class="mb-1 text-xs font-normal text-neutral-500">Duration</dt>
<dd class="text-neutral-300">{{$anime.Duration}}</dd>
</div>
{{end}}
</div>
<div class="grid grid-cols-2 gap-4">
{{if $anime.Rank}}
<div>
<dt class="mb-1 text-xs font-normal text-neutral-500">Rank</dt>
<dd class="text-neutral-300">#{{$anime.Rank}}</dd>
</div>
{{end}}
{{if $anime.Popularity}}
<div>
<dt class="mb-1 text-xs font-normal text-neutral-500">Popularity</dt>
<dd class="text-neutral-300">#{{$anime.Popularity}}</dd>
</div>
{{end}}
</div>
<div class="grid grid-cols-2 gap-4">
{{if $anime.MembersFormatted}}
<div>
<dt class="mb-1 text-xs font-normal text-neutral-500">Members</dt>
<dd class="text-neutral-300">{{$anime.MembersFormatted}}</dd>
</div>
{{end}}
{{if $anime.FavoritesFormatted}}
<div>
<dt class="mb-1 text-xs font-normal text-neutral-500">Favorites</dt>
<dd class="text-neutral-300">{{$anime.FavoritesFormatted}}</dd>
</div>
{{end}}
</div>
{{if $anime.ScoredByFormatted}}
<div>
<dt class="mb-1 text-xs font-normal text-neutral-500">Scored By</dt>
<dd class="text-neutral-300">{{$anime.ScoredByFormatted}}</dd>
<dd class="text-neutral-300">{{$anime.ScoredByFormatted}} users</dd>
</div>
{{end}}
</div>
</div>
</section>
</div>
</aside>
</div>