bar/layouts/recipes/single.html

{{ define "main" }}
  {{- $img          := .Resources.GetMatch "cocktail.*" -}}
  {{- $ingredients  := .Params.ingredients | default (slice) -}}
  {{- $measures     := .Params.ingredientMeasures | default (slice) -}}
  {{- $categories   := .Params.categories | default (slice) -}}
  {{- $glasses      := .Params.glasses | default (slice) -}}

  {{/* Split instructions into numbered steps */}}
  {{- $steps := split .Content "\n" -}}

  {{/* Related: same category via where, shuffle, exclude self */}}
  {{- $related := where .Site.RegularPages "Params.categories" "intersect" $categories -}}
  {{- $related = where $related "Title" "ne" .Title -}}
  {{- $related = first 4 (shuffle $related) -}}

<article class="max-w-[1280px] mx-auto px-8 max-[860px]:px-5 pb-10">

  <!-- Breadcrumbs -->
  <nav class="flex gap-[11px] items-center font-mono text-[11px] tracking-[0.1em] uppercase text-ink-faint pt-10 pb-7 flex-wrap">
    <a href="/" class="text-ink-mute hover:text-gold-2 transition-colors duration-[160ms]">Bar Pivoine</a>
    <span>/</span>
    <a href="/recipes/" class="text-ink-mute hover:text-gold-2 transition-colors duration-[160ms]">Cellar</a>
    <span>/</span>
    <span class="text-gold">{{ .Title }}</span>
  </nav>

  <!-- Detail grid -->
  <div class="grid grid-cols-[0.92fr_1.08fr] gap-14 items-start max-[900px]:grid-cols-1 max-[900px]:gap-8">

    <!-- Left: sticky art frame -->
    <div class="sticky top-24 max-[900px]:static">
      <div class="relative aspect-square rounded-[18px] overflow-hidden border border-warm/18 shadow-[0_50px_90px_-45px_#000] frame-overlay">
        {{- if $img -}}
          {{- partial "img.html" (dict
            "res"    $img
            "widths" (slice 800 1200)
            "sizes"  "(max-width: 900px) 100vw, 45vw"
            "class"  "w-full h-full object-cover"
            "alt"    .Title
            "loading" "eager"
          ) -}}
        {{- else -}}
          <img
            src="{{ .Params.drinkThumbnail }}"
            alt="{{ .Title }}"
            loading="eager"
            decoding="sync"
            class="w-full h-full object-cover"
          />
        {{- end -}}
      </div>
      <!-- Caption -->
      <div class="pt-[14px] px-1 font-mono text-[11px] tracking-[0.1em] uppercase text-ink-mute">
        <span>{{ range $glasses }}{{ . }}{{ end }}</span>
      </div>
    </div>

    <!-- Right: info column -->
    <div>
      <!-- Category eyebrow -->
      <div class="eyebrow">{{ range first 1 $categories }}{{ . }}{{ end }}</div>

      <!-- Title -->
      <h1 class="display text-[clamp(48px,6vw,84px)] mt-[14px]">{{ .Title }}</h1>

      <!-- Chips -->
      <div class="flex flex-wrap gap-[9px] mt-[26px] mb-2">
        {{- with .Params.alcoholic -}}
          <span class="chip"><span class="dot"></span>{{ . }}</span>
        {{- end -}}
        {{- range $categories -}}
          <a href="/categories/{{ . | urlize }}/" class="chip"><span class="dot"></span>{{ . }}</a>
        {{- end -}}
        {{- range $glasses -}}
          <a href="/glasses/{{ . | urlize }}/" class="chip"><span class="dot"></span>{{ . }}</a>
        {{- end -}}
      </div>

      <!-- Two columns: ingredients + method -->
      <div class="grid grid-cols-[1fr_1.15fr] gap-11 mt-10 max-[900px]:grid-cols-1 max-[900px]:gap-8">

        <!-- Ingredients -->
        <div>
          <h4 class="font-mono text-[11px] tracking-[0.2em] uppercase text-gold mb-[18px] pb-3 border-b border-warm/10">Ingredients</h4>
          <ul class="list-none m-0 p-0">
            {{- range $i, $ingredient := $ingredients -}}
              <li class="flex justify-between items-baseline gap-3.5 py-3 border-b border-warm/[0.05]">
                <a
                  href="/ingredients/{{ $ingredient | urlize }}/"
                  class="font-serif text-[20px] text-ink transition-colors duration-[160ms] hover:text-gold-2"
                >{{ $ingredient }}</a>
                <span class="font-mono text-[12px] text-ink-mute text-right whitespace-nowrap tracking-[0.02em]">
                  {{- if lt $i (len $measures) -}}{{ index $measures $i }}{{- else -}}&nbsp;{{- end -}}
                </span>
              </li>
            {{- end -}}
          </ul>
        </div>

        <!-- Method -->
        <div>
          <h4 class="font-mono text-[11px] tracking-[0.2em] uppercase text-gold mb-[18px] pb-3 border-b border-warm/10">Method</h4>
          <ol class="list-none m-0 p-0">
            {{ .Content }}
          </ol>
        </div>

      </div>
    </div>

  </div>
</article>

  <!-- ══ RELATED ════════════════════════════════════════════════════════════ -->
  {{- if gt (len $related) 0 -}}
  <div class="max-w-[1280px] mx-auto px-8 max-[860px]:px-5 mt-[84px] pt-[10px]">

    <div class="flex items-end justify-between gap-6 mb-[38px]">
      <div>
        <div class="eyebrow">From the same shelf</div>
        <h2 class="font-serif font-medium text-[clamp(34px,5vw,56px)] leading-none tracking-[-0.015em] mt-[10px] mb-0">You may also pour</h2>
      </div>
    </div>

    <div class="grid [grid-template-columns:repeat(auto-fill,minmax(258px,1fr))] gap-[22px] max-[560px]:[grid-template-columns:repeat(auto-fill,minmax(150px,1fr))] max-[560px]:gap-3.5">
      {{- range $related -}}
        {{- partial "cocktail-card.html" . -}}
      {{- end -}}
    </div>
  </div>
  {{- end -}}

{{ end }}