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

feat: add trailer, characters, and recommendations to anime details

Browse Source
This commit is contained in:
mkelvers
2026-05-04 20:19:58 +02:00
parent d1433f54e2
commit c976e99f5a
5 changed files with 222 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
templates/anime.gohtml
View File

@@ -43,10 +43,10 @@
{{template "watchlist_actions" dict "Anime" $anime "User" .User "Status" .Status}}
<div class="mt-12 flex flex-col gap-12 lg:flex-row">
<div class="grow">
<section class="max-w-4xl">
<h2 class="mb-4 text-lg font-normal text-neutral-300">Synopsis</h2>
<div class="flex flex-col gap-12 lg:flex-row">
<div class="grow lg:max-w-4xl">
<section>
<h2 class="mb-4 mt-2 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)}}
<button id="synopsis-toggle" class="mt-2 text-sm font-normal text-neutral-400 transition-colors hover:text-white md:hidden" onclick="
@@ -63,17 +63,31 @@
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>
{{if $anime.Trailer.YoutubeID}}
<section class="mt-12">
<h2 class="mb-6 text-lg font-normal text-neutral-300">Trailer</h2>
<div class="aspect-video w-full bg-white/5 ring-1 ring-white/10">
<iframe
src="https://www.youtube.com/embed/{{$anime.Trailer.YoutubeID}}"
class="h-full w-full"
allowfullscreen
loading="lazy">
</iframe>
</div>
</section>
{{end}}
{{if $anime.Background}}
<section class="mt-12">
<h2 class="mb-4 text-lg font-normal text-neutral-300">Background</h2>
<div class="border-l border-white/5 pl-6 text-sm italic leading-relaxed text-neutral-400 whitespace-pre-line">
{{$anime.Background}}
</div>
</section>
{{end}}
</div>
<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>
@@ -183,6 +197,28 @@
</div>
</div>
{{if .Characters}}
<div class="mt-12 w-full">
<h2 class="mb-6 text-lg font-normal text-neutral-300">Characters & Cast</h2>
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
{{range (slice .Characters 0 (min (len .Characters) 10))}}
<div class="flex gap-3 bg-white/[0.02] p-3 ring-1 ring-white/5">
<div class="h-16 w-12 shrink-0 overflow-hidden bg-white/5">
<img src="{{.Character.Images.Jpg.ImageURL}}" alt="{{.Character.Name}}" class="h-full w-full object-cover" loading="lazy" />
</div>
<div class="flex flex-col justify-center overflow-hidden">
<span class="truncate text-sm font-medium text-neutral-200">{{.Character.Name}}</span>
<span class="truncate text-xs text-neutral-500">{{.Role}}</span>
{{if .VoiceActors}}
<span class="mt-1 truncate text-[11px] text-neutral-400">{{(index .VoiceActors 0).Person.Name}}</span>
{{end}}
</div>
</div>
{{end}}
</div>
</div>
{{end}}
<div class="w-full">
<div hx-get="/api/watch-order?animeId={{$anime.MalID}}" hx-trigger="load">
<div class="mt-8 flex items-center gap-3 text-neutral-400">
@@ -191,5 +227,21 @@
</div>
</div>
</div>
{{if .Recommendations}}
<div class="mt-12 w-full">
<h2 class="mb-6 text-lg font-normal text-neutral-300">Recommendations</h2>
<div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
{{range (slice .Recommendations 0 (min (len .Recommendations) 8))}}
<a href="/anime/{{.Entry.MalID}}" class="group flex flex-col gap-2">
<div class="aspect-2/3 overflow-hidden bg-white/5 shadow-md">
<img src="{{.Entry.Images.Webp.LargeImageURL}}" alt="{{.Entry.Title}}" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" loading="lazy" />
</div>
<span class="truncate text-xs font-medium text-neutral-400 transition-colors group-hover:text-white">{{.Entry.Title}}</span>
</a>
{{end}}
</div>
</div>
{{end}}
</div>
{{end}}