perf: book cover loads faster

- Transform and compress cover images
- Add minimal height to covers, so they don't collapse before loading


Former-commit-id: fcace16ee86edc7969bf98de89a15d526c35dcec

1 files changed, 15 insertions, 1 deletions

diff --git a/layouts/_partials/items/book.html b/layouts/_partials/items/book.html
index 26c7d2d3..5b6e61c2 100644
--- a/layouts/_partials/items/book.html
+++ b/layouts/_partials/items/book.html
@@ -1,5 +1,19 @@
 {{ $ctx := .ctx }}
 {{ $NoViewTransition := (or .NoViewTransition false) }}
+
+<!-- Transform cover images via Cloudflare URL patterns -->
+{{ $splitURL := split $ctx.Params.cover "/" }}
+{{ $cover := "" }}
+{{ $i := 0 }}
+{{ range $splitURL }}
+    {{ if eq $i 3 }}
+        {{ $cover = printf "%s%s" $cover "cdn-cgi/image/width=150,quality=75/" }}
+    {{ end }}
+    {{ $cover = printf "%s%s/" $cover . }}
+    {{ $i = add $i 1 }}
+{{ end }}
+{{ $cover = strings.TrimSuffix "/" $cover }}
+
 <div{{ if eq .Params.rating 1 }} class="opacity-50 z-0"{{ end }}
   {{ if not $NoViewTransition }}style="view-transition-name: book-{{ $ctx.File.UniqueID }}"{{ end }}>
   <a href="{{ $ctx.Permalink }}"
@@ -10,7 +24,7 @@
       {{ if eq $ctx.Params.rating 1 }} relative
       {{ else if eq $ctx.Params.rating 5 }} border-amber-300 shadow-amber-200 shadow-xl
       {{ else }} border-white{{ end }}">
-    <img class="lazy w-full block" src="{{ $ctx.Params.cover }}" />
+    <img class="lazy w-full block min-h-[120px] bg-neutral-500" src="{{ $cover }}" />
     {{ if eq $ctx.Params.rating 1 }}
     <div class="absolute z-1 top-[25%] left-[25%] h-[50%] w-[50%]"
         style="background-image: url('https://r2.eltr.ac/uPic/2025/05/thumbs-down.png');