pivoine.art/layouts/posts/single.html

{{- define "page-background" -}}
{{- with .Params.background -}}
<div class="fixed inset-0 -z-10 overflow-hidden" aria-hidden="true">
  {{- partial "media.html" (dict "media" . "class" "w-full h-full object-cover opacity-[0.15] blur-md scale-110" "lazy" false) -}}
  <div class="absolute inset-0" style="background: rgba(5,5,16,0.7)"></div>
</div>
{{- end -}}
{{- end -}}

{{- define "main" -}}

<!-- ── ARTICLE HEADER ────────────────────────────────────────── -->
<header class="gutter-x pt-36 pb-12 max-w-5xl mx-auto relative overflow-hidden">

  <!-- Faded decorative category text -->
  {{- with index .Params.categories 0 -}}
  <div class="graffiti-tag absolute -top-2 -right-4 select-none pointer-events-none"
    style="-webkit-text-stroke-color: rgba(155,0,255,0.08);" aria-hidden="true">{{ . }}</div>
  {{- end -}}

  <!-- Categories -->
  {{- with .Params.categories -}}
  <div class="flex flex-wrap gap-2 mb-6">
    {{- range . -}}
    <a
      href="/categories/{{ . | urlize }}/"
      class="badge badge-outline hover:bg-heat hover:text-white hover:border-heat transition-all"
    >{{ . }}</a>
    {{- end -}}
  </div>
  {{- end -}}

  <!-- Title -->
  <h1 class="font-display text-5xl md:text-7xl lg:text-8xl text-paper text-balance mb-8 leading-none">
    {{- .Title -}}
  </h1>

  <!-- Description -->
  {{- with .Description -}}
  <p class="text-chalk text-xl md:text-2xl max-w-2xl mb-10 leading-relaxed text-pretty font-body font-light">
    {{ . }}
  </p>
  {{- end -}}

  <!-- Author byline -->
  {{- with .Params.author -}}
    {{- $authorPage := site.GetPage (printf "authors/%s" .) -}}
    {{- with $authorPage -}}
      {{- partial "author-card.html" . -}}
    {{- end -}}
  {{- 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>

</header>

<!-- ── GRADIENT DIVIDER ──────────────────────────────────────── -->
<div class="gradient-line mb-0"></div>

<!-- ── BANNER MEDIA — bundle banner.png → 01.png → .Params.banner ── -->
{{- $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>
{{- end -}}{{- end -}}

<!-- ── PROSE BODY ────────────────────────────────────────────── -->
{{- with .Content -}}
<article class="gutter-x mb-20 md:mb-28">
  <div class="max-w-5xl mx-auto">
    <div class="max-w-3xl prose-editorial">
      {{ . }}
    </div>
  </div>
</article>
{{- 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">
  <div class="max-w-5xl mx-auto flex flex-wrap gap-3 items-center">
    <span class="label text-fog">Tagged:</span>
    {{- range . -}}
    <a
      href="/tags/{{ . | urlize }}/"
      class="badge badge-outline hover:bg-heat hover:text-white hover:border-heat transition-all"
    ># {{ . }}</a>
    {{- end -}}
  </div>
</footer>
{{- end -}}

<!-- ── RELATED POSTS ─────────────────────────────────────────── -->
{{- $related := .Site.RegularPages.Related . | first 3 -}}
{{- with $related -}}
<section class="bg-concrete border-t border-zinc gutter-x py-16 md:py-24 spray-bg">
  <div class="max-w-5xl mx-auto">
  <div class="flex items-center gap-5 mb-10">
    <h2 class="font-display text-3xl md:text-4xl text-paper leading-none">
      More <span class="text-gradient">Drops</span>
    </h2>
    <div class="flex-1 gradient-line ml-2"></div>
  </div>
  <div class="grid grid-cols-1 sm:grid-cols-3 gap-5">
    {{- range . -}}
    {{- partial "post-card.html" . -}}
    {{- end -}}
  </div>
  </div>
</section>
{{- end -}}

{{- end -}}