From 470039d9e9497252c86cfc1dae96678d00c453a1 Mon Sep 17 00:00:00 2001
From: mkelvers <mikkelelvers@outlook.com>
Date: Tue, 9 Jun 2026 19:10:16 +0200
Subject: [PATCH] refactor: use posterURL in templates

---
 templates/anime.gohtml                 |  7 +---
 templates/components/anime_card.gohtml |  7 +---
 templates/renderer.go                  | 46 ++++++++++++++------------
 templates/schedule.gohtml              |  7 +---
 templates/watch.gohtml                 | 20 +++++------
 5 files changed, 37 insertions(+), 50 deletions(-)

diff --git a/templates/anime.gohtml b/templates/anime.gohtml
index dcfef2b..9a9da3e 100644
--- a/templates/anime.gohtml
+++ b/templates/anime.gohtml
@@ -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>
diff --git a/templates/components/anime_card.gohtml b/templates/components/anime_card.gohtml
index 08418b6..98ed7c5 100644
--- a/templates/components/anime_card.gohtml
+++ b/templates/components/anime_card.gohtml
@@ -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}}
 
diff --git a/templates/renderer.go b/templates/renderer.go
index 023f2c1..d457acd 100644
--- a/templates/renderer.go
+++ b/templates/renderer.go
@@ -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")
diff --git a/templates/schedule.gohtml b/templates/schedule.gohtml
index 44f0950..b261831 100644
--- a/templates/schedule.gohtml
+++ b/templates/schedule.gohtml
@@ -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}}"
diff --git a/templates/watch.gohtml b/templates/watch.gohtml
index e89d5bf..3cc83d0 100644
--- a/templates/watch.gohtml
+++ b/templates/watch.gohtml
@@ -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}}