refactor: use posterURL in templates

This commit is contained in:
2026-06-09 19:10:16 +02:00
parent ea518a7d0a
commit 470039d9e9
5 changed files with 37 additions and 50 deletions

View File

@@ -120,12 +120,7 @@
<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-background-surface shadow-(--shadow-card) ring-1 ring-black/10">
{{$imageUrl := "https://placehold.co/400x600?text=No+Image"}}
{{if $anime.Images.Webp.LargeImageURL}}
{{$imageUrl = $anime.Images.Webp.LargeImageURL}}
{{else if $anime.Images.Jpg.LargeImageURL}}
{{$imageUrl = $anime.Images.Jpg.LargeImageURL}}
{{end}}
{{$imageUrl := posterURL $anime.Images.Webp.LargeImageURL $anime.Images.Jpg.LargeImageURL 400 600}}
<img src="{{$imageUrl}}" alt="{{$anime.Title}}" class="h-full w-full object-cover" />
</div>
</div>

View File

@@ -7,12 +7,7 @@
{{$hasTopBadge := .HasTopBadge}}
{{$dataId := printf "id-%d" $anime.MalID}}
{{$imageUrl := "https://placehold.co/400x600?text=No+Image"}}
{{if $anime.Images.Webp.LargeImageURL}}
{{$imageUrl = $anime.Images.Webp.LargeImageURL}}
{{else if $anime.Images.Jpg.LargeImageURL}}
{{$imageUrl = $anime.Images.Jpg.LargeImageURL}}
{{end}}
{{$imageUrl := posterURL $anime.Images.Webp.LargeImageURL $anime.Images.Jpg.LargeImageURL 400 600}}
{{$displayTitle := $anime.DisplayTitle}}

View File

@@ -27,28 +27,30 @@ var Module = fx.Options(
func ProvideRenderer() (*Renderer, error) {
funcs := template.FuncMap{
"dict": dict,
"list": func(items ...any) []any { return items },
"json": jsonAttr,
"browseURL": browseURL,
"genresParams": genresParams,
"hasGenre": hasGenre,
"add": func(a, b int) int { return a + b },
"sub": func(a, b int) int { return a - b },
"mul": func(a, b float64) float64 { return a * b },
"imul": func(a, b int) int { return a * b },
"div": div,
"ceilDiv": ceilDiv,
"idiv": idiv,
"atoi": atoi,
"toFloat": func(a int) float64 { return float64(a) },
"seq": seq,
"min": func(a, b int) int { return min(a, b) },
"int": toInt,
"percent": percent,
"formatDate": formatDate,
"nextSort": nextSort,
"urlquery": url.QueryEscape,
"dict": dict,
"list": func(items ...any) []any { return items },
"json": jsonAttr,
"browseURL": browseURL,
"genresParams": genresParams,
"hasGenre": hasGenre,
"add": func(a, b int) int { return a + b },
"sub": func(a, b int) int { return a - b },
"mul": func(a, b float64) float64 { return a * b },
"imul": func(a, b int) int { return a * b },
"div": div,
"ceilDiv": ceilDiv,
"idiv": idiv,
"atoi": atoi,
"toFloat": func(a int) float64 { return float64(a) },
"seq": seq,
"min": func(a, b int) int { return min(a, b) },
"int": toInt,
"percent": percent,
"formatDate": formatDate,
"nextSort": nextSort,
"urlquery": url.QueryEscape,
"posterURL": posterURL,
"episodeRangeStart": episodeRangeStart,
}
pages, err := fs.Glob(templateFS, "*.gohtml")

View File

@@ -91,12 +91,7 @@
<div class="hidden" data-schedule-items-source>
{{range .Animes}}
{{$anime := .}}
{{$imageUrl := "https://placehold.co/200x300?text=No+Image"}}
{{if $anime.Images.Webp.LargeImageURL}}
{{$imageUrl = $anime.Images.Webp.LargeImageURL}}
{{else if $anime.Images.Jpg.LargeImageURL}}
{{$imageUrl = $anime.Images.Jpg.LargeImageURL}}
{{end}}
{{$imageUrl := posterURL $anime.Images.Webp.LargeImageURL $anime.Images.Jpg.LargeImageURL 200 300}}
<article
data-schedule-item
data-mal-id="{{$anime.MalID}}"

View File

@@ -8,7 +8,7 @@
{{if or (not $currentEpID) (eq (printf "%v" $currentEpID) "0") (eq (printf "%v" $currentEpID) "")}}{{$currentEpID = "1"}}{{end}}
{{$totalEpisodes := len $episodes}}
{{$currentEpNum := atoi $currentEpID}}
{{$rangeStart := add (imul (idiv (sub $currentEpNum 1) 100) 100) 1}}
{{$rangeStart := episodeRangeStart $currentEpNum 100}}
{{$rangeEnd := min (add $rangeStart 99) $totalEpisodes}}
<div id="watch-layout" class="flex flex-col gap-6 lg:flex-row lg:items-start lg:gap-6{{if le $totalEpisodes 100}} max-h-dvh{{end}}">
@@ -20,7 +20,7 @@
</a>
<ui-dropdown class="relative block" data-align="right" data-width="min-w-[160px]">
<div data-trigger class="cursor-pointer">
<button type="button" class="rounded-none! inline-flex h-10 items-center justify-between gap-2 bg-background-button px-4 text-sm font-normal text-foreground transition-colors hover:bg-background-button-hover focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">
<button type="button" class=" inline-flex h-10 items-center justify-between gap-2 bg-background-button px-4 text-sm font-normal text-foreground transition-colors hover:bg-background-button-hover focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">
<span id="watchlist-status-display-{{$anime.MalID}}">
{{if .WatchlistStatus}}{{if eq .WatchlistStatus "watching"}}Watching{{else if eq .WatchlistStatus "completed"}}Completed{{else if eq .WatchlistStatus "plan_to_watch"}}Plan to Watch{{else if eq .WatchlistStatus "dropped"}}Dropped{{end}}{{else}}Add to Watchlist{{end}}
</span>
@@ -93,14 +93,14 @@
<div class="flex gap-2">
{{$prevEp := sub (int $currentEpID) 1}}
{{if ge $prevEp 1}}
<a href="/anime/{{$anime.MalID}}/watch?ep={{$prevEp}}" class="rounded-none! inline-flex items-center gap-2 bg-background-button px-4 py-2 text-sm font-normal leading-none text-foreground-muted transition-colors hover:bg-background-button-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">
<a href="/anime/{{$anime.MalID}}/watch?ep={{$prevEp}}" class=" inline-flex items-center gap-2 bg-background-button px-4 py-2 text-sm font-normal leading-none text-foreground-muted transition-colors hover:bg-background-button-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">
<svg class="block h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" /></svg>
Prev
</a>
{{end}}
{{$nextEp := add (int $currentEpID) 1}}
{{if le $nextEp $totalEpisodes}}
<a href="/anime/{{$anime.MalID}}/watch?ep={{$nextEp}}" class="rounded-none! inline-flex items-center gap-2 bg-background-button px-4 py-2 text-sm font-normal leading-none text-foreground-muted transition-colors hover:bg-background-button-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">
<a href="/anime/{{$anime.MalID}}/watch?ep={{$nextEp}}" class=" inline-flex items-center gap-2 bg-background-button px-4 py-2 text-sm font-normal leading-none text-foreground-muted transition-colors hover:bg-background-button-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">
Next
<svg class="block h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /></svg>
</a>
@@ -110,7 +110,7 @@
<div class="flex justify-end" data-segment-editor-root>
<ui-dropdown class="relative block" data-align="right" data-width="min-w-[220px]">
<div data-trigger>
<button type="button" class="rounded-none! inline-flex items-center gap-2 bg-background-button px-4 py-2 text-sm font-normal leading-none text-foreground-muted transition-colors hover:bg-background-button-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">
<button type="button" class=" inline-flex items-center gap-2 bg-background-button px-4 py-2 text-sm font-normal leading-none text-foreground-muted transition-colors hover:bg-background-button-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">
<svg class="block h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="1.5"/><circle cx="5" cy="12" r="1.5"/><circle cx="19" cy="12" r="1.5"/></svg>
More
</button>
@@ -159,8 +159,8 @@
</div>
<div class="grid grid-cols-2 gap-3">
<button type="button" data-segment-mark-start class="rounded-none! px-3 py-2 bg-background-button text-sm font-normal text-foreground transition-colors hover:bg-background-button-hover focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">Mark start</button>
<button type="button" data-segment-mark-end class="rounded-none! px-3 py-2 bg-background-button text-sm font-normal text-foreground transition-colors hover:bg-background-button-hover focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">Mark end</button>
<button type="button" data-segment-mark-start class=" px-3 py-2 bg-background-button text-sm font-normal text-foreground transition-colors hover:bg-background-button-hover focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">Mark start</button>
<button type="button" data-segment-mark-end class=" px-3 py-2 bg-background-button text-sm font-normal text-foreground transition-colors hover:bg-background-button-hover focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">Mark end</button>
</div>
<div class="grid grid-cols-2 gap-3">
@@ -176,7 +176,7 @@
<div class="flex items-center justify-between">
<button type="button" data-segment-reset class="text-sm font-normal text-foreground-muted transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">Reset</button>
<button type="button" data-segment-save class="rounded-none! px-4 py-2 bg-accent text-sm font-normal text-black transition-opacity hover:opacity-90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">Save</button>
<button type="button" data-segment-save class=" px-4 py-2 bg-accent text-sm font-normal text-black transition-opacity hover:opacity-90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">Save</button>
</div>
<div data-segment-error class="hidden text-sm text-red-400"></div>
@@ -203,7 +203,7 @@
<svg class="h-4 w-4 text-foreground-muted shrink-0 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" /></svg>
</button>
</div>
<div data-content class="hidden absolute z-50 top-full mt-1 left-0 w-full bg-background-button shadow-(--shadow-card) ring-1 ring-black/10 max-h-64 overflow-y-auto [-ms-overflow-style:none] scrollbar-none [&::-webkit-scrollbar]:hidden lg:[-ms-overflow-style:auto] lg:scrollbar-thin lg:[scrollbar-color:var(--scrollbar-thumb)_var(--scrollbar-track)] lg:[&::-webkit-scrollbar]:block lg:[&::-webkit-scrollbar]:h-2 lg:[&::-webkit-scrollbar-track]:bg-(--scrollbar-track) lg:[&::-webkit-scrollbar-track]:rounded-none lg:[&::-webkit-scrollbar-thumb]:bg-(--scrollbar-thumb) lg:[&::-webkit-scrollbar-thumb]:rounded-none lg:[&::-webkit-scrollbar-thumb:hover]:bg-(--scrollbar-thumb-hover)">
<div data-content class="hidden absolute z-50 top-full mt-1 left-0 w-full bg-background-button shadow-(--shadow-card) ring-1 ring-black/10 max-h-64 overflow-y-auto scrollbar-hidden lg:scrollbar-thin lg:[scrollbar-color:var(--scrollbar-thumb)_var(--scrollbar-track)] lg:[&::-webkit-scrollbar]:block lg:[&::-webkit-scrollbar]:h-2 lg:[&::-webkit-scrollbar-track]:bg-(--scrollbar-track) lg:[&::-webkit-scrollbar-track]:rounded-none lg:[&::-webkit-scrollbar-thumb]:bg-(--scrollbar-thumb) lg:[&::-webkit-scrollbar-thumb]:rounded-none lg:[&::-webkit-scrollbar-thumb:hover]:bg-(--scrollbar-thumb-hover)">
<div class="flex flex-col py-1">
{{range .Seasons}}
<a href="/anime/{{.MalID}}/watch" class="px-4 py-2 text-left text-sm {{if .IsCurrent}}text-accent bg-accent/10{{else}}text-foreground-muted hover:bg-surface-hover{{end}} transition-colors">
@@ -271,7 +271,7 @@
{{end}}
</div>
{{else}}
<div class="flex min-h-0 flex-1 flex-col gap-1 pb-4 mt-2 overflow-y-auto [-ms-overflow-style:none] scrollbar-none [&::-webkit-scrollbar]:hidden" data-episode-list style="overscroll-behavior-y: contain">
<div class="flex min-h-0 flex-1 flex-col gap-1 pb-4 mt-2 overflow-y-auto scrollbar-hidden" data-episode-list style="overscroll-behavior-y: contain">
{{range $episodes}}
{{$isCurrent := eq (printf "%v" .Number) $currentEpID}}
{{$isFiller := .Filler}}