feat: banner plays video, opens lightbox with image+video; remove gallery and works counter
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
+31
-113
@@ -55,37 +55,46 @@
|
||||
{{- end -}}
|
||||
|
||||
|
||||
<!-- Date + reading info -->
|
||||
<div class="flex flex-wrap items-center gap-6">
|
||||
<time class="label text-fog" datetime="{{ .Date.Format "2006-01-02" }}">
|
||||
{{- .Date.Format "January 2, 2006" -}}
|
||||
</time>
|
||||
{{- $imgCount := len (.Resources.Match "[0-9]*.png") -}}
|
||||
{{- $itemCount := $imgCount -}}
|
||||
{{- if and (eq $imgCount 0) .Params.items -}}{{- $itemCount = len .Params.items -}}{{- end -}}
|
||||
{{- if gt $itemCount 0 -}}
|
||||
<span class="label text-fog">{{ $itemCount }} {{ if eq $itemCount 1 }}Work{{ else }}Works{{ end }}</span>
|
||||
{{- end -}}
|
||||
</div>
|
||||
<!-- Date -->
|
||||
<time class="label text-fog" datetime="{{ .Date.Format "2006-01-02" }}">
|
||||
{{- .Date.Format "January 2, 2006" -}}
|
||||
</time>
|
||||
</header>
|
||||
|
||||
<!-- ── GRADIENT DIVIDER ──────────────────────────────────────── -->
|
||||
<div class="gradient-line mb-0"></div>
|
||||
|
||||
<!-- ── BANNER MEDIA — bundle banner.png → 01.png → .Params.banner ── -->
|
||||
<!-- ── BANNER MEDIA — video if available, lightbox on click ──── -->
|
||||
{{- $bannerImg := .Resources.GetMatch "banner.png" -}}
|
||||
{{- if not $bannerImg -}}{{- $bannerImg = .Resources.GetMatch "01.png" -}}{{- end -}}
|
||||
{{- if $bannerImg -}}
|
||||
<div class="w-full overflow-hidden mb-16 md:mb-24" style="height: clamp(320px, 60vh, 75vh)">
|
||||
{{- partial "img.html" (dict "res" $bannerImg "widths" (slice 1200 1800) "sizes" "100vw" "class" "w-full h-full object-cover object-center" "alt" .Title "loading" "eager") -}}
|
||||
</div>
|
||||
{{- else -}}
|
||||
{{- with .Params.banner -}}
|
||||
<div class="w-full overflow-hidden mb-16 md:mb-24" style="height: clamp(320px, 60vh, 75vh)">
|
||||
{{- partial "media.html" (dict "media" . "class" "w-full h-full object-cover object-center" "lazy" false) -}}
|
||||
</div>
|
||||
{{- $stem := $bannerImg.Name | strings.TrimSuffix ".png" -}}
|
||||
{{- $bannerVid := $.Resources.GetMatch (printf "%s.mp4" $stem) -}}
|
||||
{{- $webp := $bannerImg.Resize "1200x webp" -}}
|
||||
{{- $lbItems := slice (dict "img" $webp.RelPermalink "video" "") -}}
|
||||
{{- if $bannerVid -}}
|
||||
{{- $lbItems = $lbItems | append (dict "img" $webp.RelPermalink "video" $bannerVid.RelPermalink) -}}
|
||||
{{- end -}}
|
||||
|
||||
<div
|
||||
class="w-full overflow-hidden mb-16 md:mb-24 cursor-zoom-in"
|
||||
style="height: clamp(320px, 60vh, 75vh)"
|
||||
x-data="{ items: {{ $lbItems | jsonify }} }"
|
||||
@click="$dispatch('lightbox:open', { items, idx: 0 })"
|
||||
>
|
||||
{{- if $bannerVid -}}
|
||||
<video
|
||||
class="w-full h-full object-cover object-center pointer-events-none"
|
||||
src="{{ $bannerVid.RelPermalink }}"
|
||||
poster="{{ $bannerImg.RelPermalink }}"
|
||||
autoplay
|
||||
loop
|
||||
muted
|
||||
playsinline
|
||||
></video>
|
||||
{{- else -}}
|
||||
{{- partial "img.html" (dict "res" $bannerImg "widths" (slice 1200 1800) "sizes" "100vw" "class" "w-full h-full object-cover object-center pointer-events-none" "alt" .Title "loading" "eager") -}}
|
||||
{{- end -}}
|
||||
</div>
|
||||
{{- end -}}
|
||||
|
||||
|
||||
@@ -134,97 +143,6 @@
|
||||
{{- end -}}
|
||||
-->
|
||||
|
||||
<!-- ── GALLERY ───────────────────────────────────────────────── -->
|
||||
{{- $bundleImages := .Resources.Match "[0-9]*.png" -}}
|
||||
{{- $legacyItems := slice -}}
|
||||
{{- with .Params.items -}}{{- $legacyItems = . -}}{{- end -}}
|
||||
{{- if or $bundleImages $legacyItems -}}
|
||||
<section class="gutter-x pb-24 md:pb-32" aria-label="Gallery">
|
||||
<div class="max-w-5xl mx-auto">
|
||||
{{- if $bundleImages -}}
|
||||
{{- /* Pre-compute lightbox items so Alpine gets a static JSON array */ -}}
|
||||
{{- $lbItems := slice -}}
|
||||
{{- range $bundleImages -}}
|
||||
{{- $stem := .Name | strings.TrimSuffix ".png" -}}
|
||||
{{- $video := $.Resources.GetMatch (printf "%s.mp4" $stem) -}}
|
||||
{{- $webp := .Resize "1200x webp" -}}
|
||||
{{- $entry := dict "img" $webp.RelPermalink "video" "" -}}
|
||||
{{- if $video -}}{{- $entry = dict "img" $webp.RelPermalink "video" $video.RelPermalink -}}{{- end -}}
|
||||
{{- $lbItems = $lbItems | append $entry -}}
|
||||
{{- end -}}
|
||||
|
||||
|
||||
<div x-data="{ items: {{ $lbItems | jsonify }} }">
|
||||
<div class="flex items-center gap-5 mb-10">
|
||||
<span class="badge badge-gradient">Gallery</span>
|
||||
<span class="label text-fog"
|
||||
>{{ len $bundleImages }} {{ if eq (len $bundleImages) 1 }}work{{ else }}works{{ end }}</span
|
||||
>
|
||||
<div class="flex-1 gradient-line ml-2"></div>
|
||||
</div>
|
||||
|
||||
<div class="columns-1 sm:columns-2 lg:columns-3 gap-5 space-y-5">
|
||||
{{- range $i, $img := $bundleImages -}}
|
||||
{{- $stem := $img.Name | strings.TrimSuffix ".png" -}}
|
||||
{{- $video := $.Resources.GetMatch (printf "%s.mp4" $stem) -}}
|
||||
<figure
|
||||
class="break-inside-avoid group card-comic cursor-zoom-in"
|
||||
@click="$dispatch('lightbox:open', { items, idx: {{ $i }} })"
|
||||
>
|
||||
<div class="card-media min-h-48">
|
||||
{{- if $video -}}
|
||||
<video
|
||||
class="w-full pointer-events-none"
|
||||
src="{{ $video.RelPermalink }}"
|
||||
poster="{{ $img.RelPermalink }}"
|
||||
autoplay
|
||||
loop
|
||||
muted
|
||||
playsinline
|
||||
></video>
|
||||
{{- else -}}
|
||||
{{- partial "img.html" (dict "res" $img "widths" (slice 800 1200) "sizes" "(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw" "class" "w-full pointer-events-none") -}}
|
||||
{{- end -}}
|
||||
</div>
|
||||
</figure>
|
||||
{{- end -}}
|
||||
</div>
|
||||
</div>
|
||||
{{- else -}}
|
||||
<!-- Legacy front-matter items -->
|
||||
<div class="flex items-center gap-5 mb-10">
|
||||
<span class="badge badge-gradient">Gallery</span>
|
||||
<span class="label text-fog"
|
||||
>{{ len $legacyItems }} {{ if eq (len $legacyItems) 1 }}work{{ else }}works{{ end }}</span
|
||||
>
|
||||
<div class="flex-1 gradient-line ml-2"></div>
|
||||
</div>
|
||||
<div x-data="{ selected: null }" class="columns-1 sm:columns-2 lg:columns-3 gap-5 space-y-5">
|
||||
{{- range $i, $item := $legacyItems -}}
|
||||
<figure
|
||||
class="break-inside-avoid group cursor-pointer card-comic"
|
||||
@click="selected = selected === {{ $i }} ? null : {{ $i }}"
|
||||
>
|
||||
<div class="card-media">
|
||||
{{- partial "media.html" (dict "media" $item "class" "w-full") -}}
|
||||
</div>
|
||||
{{- with $item.description -}}
|
||||
<figcaption
|
||||
class="px-4 py-3 text-fog text-sm leading-relaxed font-body transition-colors group-hover:text-chalk"
|
||||
>
|
||||
{{ . }}
|
||||
</figcaption>
|
||||
{{- end -}}
|
||||
</figure>
|
||||
{{- end -}}
|
||||
</div>
|
||||
{{- end -}}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
{{- end -}}
|
||||
|
||||
|
||||
<!-- ── TAGS ─────────────────────────────────────────────────── -->
|
||||
{{- with .Params.tags -}}
|
||||
<footer class="gutter-x border-t border-zinc pt-10 pb-20">
|
||||
|
||||
Reference in New Issue
Block a user