abqari 1.1.0

data/app/views/layouts/photo.html.erb

@@ -0,0 +1,100 @@
+---
+layout: application
+---
+<!--
+  Layout for a single image-centric post — a photograph with caption,
+  location, and equipment metadata. Use it by setting `layout: photo` in
+  the post's front matter:
+
+      ---
+      layout: photo
+      title: Pistachio Man
+      caption: A man at a small shop selling pistachios.
+      date: 2025-07-21
+      city: Fayzabad
+      country: Afghanistan
+      camera: Leica Q2
+      series: Afghanistan 2025
+      image: /assets/photos/20250721-af-L1020343.webp
+      ---
+
+  Plays well with two Abqari taxonomies most photo blogs want:
+
+    taxonomies:
+      countries: { field: country, permalink: /country/:slug/, layout: country_index }
+      series:    { field: series,  permalink: /series/:slug/,  layout: series_index }
+
+  The `country` and `series` links below resolve to those auto-generated
+  taxonomy pages.
+-->
+<article class="photo">
+  <%== render 'partials/draft_banner' %>
+  <%== render 'partials/future_banner' %>
+  <%== render 'partials/back_to_index' %>
+
+  <% if page.frontmatter['image'] %>
+    <img class="photo__image"
+         src="<%= sanitized_url(page.frontmatter['image']) %>"
+         alt="<%= page.frontmatter['caption'] || page.title %>"
+         fetchpriority="high">
+  <% end %>
+
+  <header>
+    <h1 class="photo__title"><%= page.title %></h1>
+    <% if page.frontmatter['caption'] %>
+      <p class="photo__caption"><%= page.frontmatter['caption'] %></p>
+    <% end %>
+  </header>
+
+  <%# <dl> with each term/definition pair wrapped in a <div> — modern
+      pattern that lets CSS lay each row out as a flex/grid pair without
+      JS or :has() gymnastics. Both forms are valid HTML; this one is
+      easier to style row-by-row. %>
+  <dl class="photo__meta">
+    <% if page.date %>
+      <div>
+        <dt>Date</dt>
+        <dd><time datetime="<%= page.date.iso8601 %>"><%= local_time(page.date) %></time></dd>
+      </div>
+    <% end %>
+
+    <% if page.frontmatter['city'] || page.frontmatter['country'] %>
+      <div>
+        <dt>Location</dt>
+        <dd>
+          <%= page.frontmatter['city'] %><%= ', ' if page.frontmatter['city'] && page.frontmatter['country'] %>
+          <% if page.frontmatter['country'] %>
+            <a href="<%= taxonomy_url('countries', page.frontmatter['country']) %>"><%= page.frontmatter['country'] %></a>
+          <% end %>
+        </dd>
+      </div>
+    <% end %>
+
+    <% if page.frontmatter['camera'] %>
+      <div>
+        <dt>Camera</dt>
+        <dd><%= page.frontmatter['camera'] %><% if page.frontmatter['type'] %> (<%= page.frontmatter['type'] %>)<% end %></dd>
+      </div>
+    <% end %>
+
+    <% if page.frontmatter['series'] %>
+      <div>
+        <dt>Series</dt>
+        <dd><a href="<%= taxonomy_url('photos_series', page.frontmatter['series']) %>"><%= page.frontmatter['series'] %></a></dd>
+      </div>
+    <% end %>
+  </dl>
+
+  <%== page.content %>
+</article>
+
+<%# Related photos — driven by `collections.photos.related.match_by`
+    (defaults to series + country + tags, in priority order). The
+    partial renders nothing when there are no matches, so the photo
+    page just ends after the article. %>
+<%== render 'partials/related_items' %>
+
+<%# Schema.org ImageObject — surfaces the photo to Google Images
+    with caption, location, date, and credit metadata. Renders nothing
+    when the page has no `image:` frontmatter. %>
+<%== render 'partials/image_object_jsonld' %>

data/app/views/layouts/photos_archive.html.erb

@@ -0,0 +1,101 @@
+---
+layout: application
+---
+<!--
+  Photos archive — the canonical full grid of every photo, newest
+  first, paginated. Pairs with `photos_index.html.erb` (the modular
+  landing). When `collections.photos.archive.enabled: true`, the
+  front photos page becomes a curated landing and this page holds
+  the full list.
+
+  Wire it up by creating `content/photos-archive.md` (NOT inside
+  `content/photos/` — that would make the page a photo itself) with:
+
+      ---
+      title: Archive
+      description: Every photo on the site, newest first.
+      layout: photos_archive
+      permalink: /photos/archive/
+      paginate: true
+      paginate_collection: photos
+      ---
+
+  `paginate: true` reads the page count from
+  `collections.photos.pagination.per_page` in config/site.yml — the
+  canonical place to tune photo pagination site-wide. Set an explicit
+  integer (`paginate: 12`) here only when you need to deviate per-page.
+
+  `paginate_collection: photos` is **required** — without it the
+  paginator falls back to the default `'posts'` collection and the
+  archive would silently show posts instead of photos. (The fall-
+  back exists because the legacy `content/posts-archive.md` predates
+  the `paginate_collection:` key.)
+
+  Card-display toggles (`show_location`, `show_date`, `show_camera`,
+  `show_caption`, `cols`, `caption_truncate`) come from
+  `collections.photos.index` — the archive uses the same visual
+  vocabulary as the landing's "Latest photos" row, just every photo
+  and paginated.
+-->
+<%
+  description = page.frontmatter['description']
+  cfg = (site.collection_config('photos')['index'] || {})
+  show_location = cfg.fetch('show_location', true)
+  show_date     = cfg.fetch('show_date',     true)
+  show_camera   = cfg.fetch('show_camera',   false)
+  show_caption  = cfg.fetch('show_caption',  false)
+  cols          = cfg['cols'].to_i
+  cols          = nil unless [2, 3, 4].include?(cols)
+
+  photos = page.paginator&.posts || site.collection('photos')
+%>
+<article>
+  <header>
+    <h1><%= page.title || 'Photos archive' %></h1>
+    <% if description && !description.to_s.empty? %>
+      <p class="lede"><%= description %></p>
+    <% end %>
+  </header>
+  <% if page.content && !page.content.to_s.strip.empty? %>
+    <div class="index-intro"><%== page.content %></div>
+  <% end %>
+
+  <% if photos.any? %>
+    <ul class="gallery-index<%= " gallery-index--cols-#{cols}" if cols %>">
+      <% photos.each_with_index do |photo, idx| %>
+        <% tint = "gallery-index__cover--tint-#{(idx % 4) + 1}" %>
+        <li>
+          <a href="<%= sanitized_url(photo.url) %>">
+            <div class="gallery-index__cover <%= tint %>">
+              <% if photo.frontmatter['image'] %>
+                <img src="<%= sanitized_url(bundle_asset_url_for(photo, photo.frontmatter['image'])) %>"
+                     alt="<%= photo.frontmatter['caption'] || photo.title %>"
+                     width="1200" height="1200"
+                     loading="lazy"
+                     decoding="async">
+              <% end %>
+            </div>
+            <span class="gallery-index__title"><%= photo.title %></span>
+            <% if show_location && (photo.frontmatter['city'] || photo.frontmatter['country']) %>
+              <span class="gallery-index__location">
+                <%= [photo.frontmatter['city'], photo.frontmatter['country']].compact.join(', ') %>
+              </span>
+            <% end %>
+            <% if show_date && photo.date %>
+              <span class="gallery-index__date">
+                <time datetime="<%= photo.date.iso8601 %>"><%= local_time(photo.date) %></time>
+              </span>
+            <% end %>
+            <% if show_camera && photo.frontmatter['camera'] %>
+              <span class="gallery-index__camera"><%= photo.frontmatter['camera'] %></span>
+            <% end %>
+            <% if show_caption && photo.frontmatter['caption'] %>
+              <span class="gallery-index__caption"><%= truncate(photo.frontmatter['caption'], length: cfg.fetch('caption_truncate', 100)) %></span>
+            <% end %>
+          </a>
+        </li>
+      <% end %>
+    </ul>
+    <%== render 'partials/pagination', paginator: page.paginator %>
+  <% end %>
+</article>

data/app/views/layouts/photos_index.html.erb

@@ -0,0 +1,204 @@
+---
+layout: application
+---
+<!--
+  Photos landing — modular front page for the photos collection.
+  Mirrors the pattern of `posts_index.html.erb`: a curated landing
+  rather than an exhaustive grid. The full paginated list lives at
+  `photos_archive.html.erb` when `archive.enabled: true` (the default).
+
+  Sections, each independently toggleable in
+  `collections.photos.index` in config/site.yml:
+
+      display_showcase  — full-bleed "featured photo" block at the top
+                          (also requires `showcase: true` on one photo's
+                          frontmatter)
+
+      latest:           — row of recent photos, same visual as the home
+        enabled: true     page's _photo_gallery module
+        count: 8
+
+      series:           — row of tiles, one per series
+        enabled: true
+        limit: 8          max tiles before truncating; nil = show all
+        all_url:          optional destination for "View all" link
+
+      countries:        — same shape as `series`, keyed on country
+        enabled: true
+        limit: 8
+        all_url:
+
+  The archive link ("View all N photos →") appears below the body
+  when `archive.enabled: true`, pointing at the page configured via
+  `permalink: /photos/archive/` (conventionally `content/photos-archive.md`
+  with `layout: photos_archive`).
+
+  Page markdown body (any prose under the frontmatter) renders directly
+  below the header — same position as `posts_index` and
+  `publications_index` — wrapped in `<div class="index-intro">` so the
+  CSS can give it a uniform bottom gap. The wrapper only renders when
+  body content is present; leave the body empty for a widget-only
+  landing with no extra gap.
+
+  Sites that prefer the legacy single-grid view should set
+  `layout: gallery_index` in `content/photos/index.md` — the old
+  layout is still available unchanged.
+-->
+<%
+  description = page.frontmatter['description']
+  cfg         = site.collection_config('photos')
+  index_cfg   = cfg['index']   || {}
+  archive_cfg = cfg['archive'] || {}
+  archive_on  = archive_cfg.fetch('enabled', true)
+
+  display_showcase = index_cfg.fetch('display_showcase', false)
+  latest_cfg       = index_cfg['latest']    || {}
+  series_cfg       = index_cfg['series']    || {}
+  countries_cfg    = index_cfg['countries'] || {}
+
+  show_location = index_cfg.fetch('show_location', true)
+  show_date     = index_cfg.fetch('show_date',     true)
+  show_camera   = index_cfg.fetch('show_camera',   false)
+  show_caption  = index_cfg.fetch('show_caption',  false)
+  cols          = index_cfg['cols'].to_i
+  cols          = nil unless [2, 3, 4].include?(cols)
+
+  all_photos   = site.collection('photos')
+  total_photos = all_photos.size
+
+  # Showcase — opt-in via `display_showcase: true` AND `showcase: true`
+  # on one photo's frontmatter. First match wins. Removed from the
+  # "latest" row below so it doesn't appear twice.
+  showcase_photo = nil
+  if display_showcase
+    showcase_photo = all_photos.find { |p| p.frontmatter['showcase'] == true }
+  end
+
+  # Latest photos. Excludes the showcase so the section doesn't repeat
+  # the featured image. Sites with very few photos may end up with an
+  # empty row when the showcase is the only recent photo — the section
+  # falls back to no-op rather than rendering an empty grid.
+  latest_on    = latest_cfg.fetch('enabled', true)
+  latest_count = latest_cfg.fetch('count', 8).to_i
+  latest_photos = if latest_on
+                    pool = all_photos.reject { |p| p == showcase_photo }
+                    pool.first(latest_count)
+                  else
+                    []
+                  end
+
+  archive_url = "#{collection_index_url('photos')}archive/"
+%>
+<article>
+  <header>
+    <h1><%= page.title || 'Photos' %></h1>
+    <% if description && !description.to_s.empty? %>
+      <p class="lede"><%= description %></p>
+    <% end %>
+  </header>
+  <% if page.content && !page.content.to_s.strip.empty? %>
+    <div class="index-intro"><%== page.content %></div>
+  <% end %>
+
+  <% if showcase_photo %>
+    <section class="photo-showcase" aria-label="Featured photo">
+      <a class="photo-showcase__link" href="<%= sanitized_url(showcase_photo.url) %>">
+        <% if (img = showcase_photo.frontmatter['image']) %>
+          <img class="photo-showcase__image"
+               src="<%= sanitized_url(bundle_asset_url_for(showcase_photo, img)) %>"
+               alt="<%= showcase_photo.frontmatter['caption'] || showcase_photo.title %>"
+               loading="eager"
+               fetchpriority="high">
+        <% end %>
+      </a>
+      <div class="photo-showcase__caption">
+        <p class="photo-showcase__eyebrow">Featured</p>
+        <h2 class="photo-showcase__title"><%= showcase_photo.title %></h2>
+        <% if (cap = showcase_photo.frontmatter['caption']) && !cap.to_s.empty? %>
+          <p class="photo-showcase__text"><%= cap %></p>
+        <% end %>
+        <% if showcase_photo.frontmatter['city'] || showcase_photo.frontmatter['country'] %>
+          <p class="photo-showcase__meta">
+            <%= [showcase_photo.frontmatter['city'], showcase_photo.frontmatter['country']].compact.join(', ') %>
+          </p>
+        <% end %>
+      </div>
+    </section>
+  <% end %>
+
+  <% if latest_photos.any? %>
+    <section class="photos-section" aria-label="Latest photos">
+      <%# `home-module__*` header classes are deliberately reused here —
+          the home modules' CSS comment notes the heading-row + CTA
+          pattern is shared. Keeps the visual rhythm identical to the
+          home page's latest-photos module without forking the styles. %>
+      <header class="home-module__header">
+        <h2 class="home-module__heading">Latest photos</h2>
+        <% if archive_on %>
+          <a class="home-module__see-all" href="<%= sanitized_url(archive_url) %>">View all &rarr;</a>
+        <% end %>
+      </header>
+      <ul class="gallery-index<%= " gallery-index--cols-#{cols}" if cols %>">
+        <% latest_photos.each_with_index do |photo, idx| %>
+          <% tint = "gallery-index__cover--tint-#{(idx % 4) + 1}" %>
+          <li>
+            <a href="<%= sanitized_url(photo.url) %>">
+              <div class="gallery-index__cover <%= tint %>">
+                <% if photo.frontmatter['image'] %>
+                  <img src="<%= sanitized_url(bundle_asset_url_for(photo, photo.frontmatter['image'])) %>"
+                       alt="<%= photo.frontmatter['caption'] || photo.title %>"
+                       width="1200" height="1200"
+                       loading="lazy"
+                       decoding="async">
+                <% end %>
+              </div>
+              <span class="gallery-index__title"><%= photo.title %></span>
+              <% if show_location && (photo.frontmatter['city'] || photo.frontmatter['country']) %>
+                <span class="gallery-index__location">
+                  <%= [photo.frontmatter['city'], photo.frontmatter['country']].compact.join(', ') %>
+                </span>
+              <% end %>
+              <% if show_date && photo.date %>
+                <span class="gallery-index__date">
+                  <time datetime="<%= photo.date.iso8601 %>"><%= local_time(photo.date) %></time>
+                </span>
+              <% end %>
+              <% if show_camera && photo.frontmatter['camera'] %>
+                <span class="gallery-index__camera"><%= photo.frontmatter['camera'] %></span>
+              <% end %>
+              <% if show_caption && photo.frontmatter['caption'] %>
+                <span class="gallery-index__caption"><%= truncate(photo.frontmatter['caption'], length: index_cfg.fetch('caption_truncate', 100)) %></span>
+              <% end %>
+            </a>
+          </li>
+        <% end %>
+      </ul>
+    </section>
+  <% end %>
+
+  <% if series_cfg.fetch('enabled', true) %>
+    <%== render 'partials/taxonomy_row',
+                heading: 'Series',
+                taxonomy: 'photos_series',
+                collection: 'photos',
+                limit: series_cfg['limit'],
+                all_url: series_cfg['all_url'],
+                cols_class: cols %>
+  <% end %>
+
+  <% if countries_cfg.fetch('enabled', true) %>
+    <%== render 'partials/taxonomy_row',
+                heading: 'Countries',
+                taxonomy: 'countries',
+                collection: 'photos',
+                limit: countries_cfg['limit'],
+                all_url: countries_cfg['all_url'],
+                cols_class: cols %>
+  <% end %>
+
+  <% if archive_on && total_photos.positive? %>
+    <p class="photos-index__more">
+      <a href="<%= sanitized_url(archive_url) %>">View all <%= total_photos %> photos &rarr;</a>
+    </p>
+  <% end %>
+</article>

data/app/views/layouts/post.html.erb

@@ -0,0 +1,153 @@
+---
+layout: application
+---
+<!--
+  Single post detail. Theme-neutral structure with semantic class
+  hooks (`.post__meta`, `.post__hero`, `.post__tags-footer`); themes
+  style via `themes/<name>/css/app.css`.
+
+  Hero image — set `image:` in the post's frontmatter and it renders
+  between the meta line and the body. Path is sanitized; alt text
+  defaults to the post title.
+
+      ---
+      title: My Post
+      date: 2026-04-15
+      image: hero.jpg            # relative within a bundled post
+      tags: [foo, bar]
+      ---
+
+  Hero rendering is gated by `collections.posts.show.cover` in
+  config/site.yml — `photo` (the default) renders the `image:` if
+  present and nothing otherwise; `photo_or_svg` falls back to a
+  decorative initial-tile SVG; `svg` always renders the decorative
+  SVG; `none` suppresses the hero entirely. The matching enum on the
+  index card is `collections.posts.index.cover` — independent of
+  this one, so a listing can use SVG tiles while detail pages render
+  real photos (or vice versa).
+
+  Per-post override: set `cover:` in frontmatter (boolean `false`
+  for none, or one of the enum strings) to override the collection
+  default for a single post.
+
+  Tags footer renders only when the post has tags. The "Up next" and
+  "Related" partials below the article are also conditional on the
+  collection's `next:` and `related:` config; both render nothing
+  when not applicable so they degrade silently.
+-->
+<%# `h-entry` is the IndieWeb microformats2 root class for a post.
+    Combined with `p-name` (title), `dt-published` (date), `e-content`
+    (body), `p-author` / `u-author` (author info), `u-url` (canonical
+    URL), and `p-category` (tags), this lets other IndieWeb sites and
+    feed readers parse the post without needing RSS. No visual impact
+    — pure metadata via class attributes. See indieweb.org/h-entry. %>
+<article class="h-entry">
+
+  <%== render 'partials/draft_banner' %>
+  <%== render 'partials/future_banner' %>
+  <%== render 'partials/back_to_index' %>
+
+  <header>
+    <h1 class="p-name"><%= page.title %></h1>
+    <a class="u-url" href="<%= sanitized_url(page.url) %>" hidden></a>
+    <p class="post__meta">
+      <%# Date is conditional so dateless collections that share the
+          `post` layout (cookbook, glossary, anything reference-y)
+          still render. Reading time renders either way. %>
+      <% if page.date %>
+        <time class="dt-published" datetime="<%= page.date.iso8601 %>"><%= local_time(page.date) %></time>
+        ·
+      <% end %>
+      <%= reading_time(page.content) %>
+      <%# Series breadcrumb — only when the post carries both `series:`
+          and `series_position:` in frontmatter. Position renders as a
+          plain "#N" prefix; the series name links back to the series
+          taxonomy page for THIS page's collection (`series_url`
+          resolves which one — this layout is reused by cookbook,
+          glossary and any other collection, so the taxonomy can't be
+          hardcoded). Unlinked when the collection has no series
+          taxonomy configured. %>
+      <% if (sn = page.frontmatter['series']) && (sp = page.frontmatter['series_position']) %>
+        <% series_link = series_url(sn) %>
+        · #<%= sp %> in the <%== series_link ? link_to(sn, series_link) : h(sn) %> series
+      <% end %>
+    </p>
+    <%# Hero — `cover_choice_for` returns :photo / :placeholder /
+        :svg / :none based on the cover enum + frontmatter override.
+        For the show page :placeholder maps to "no hero" (a blank
+        flat-tint banner above the body doesn't read as content), so
+        we only render :photo and :svg here. %>
+    <% case cover_choice_for(page, context: :show) %>
+    <% when :photo %>
+      <%# Emits a <picture> with AVIF/WebP sources when sibling files
+          exist alongside the bundle image (convention: generate
+          `hero.avif` + `hero.webp` next to `hero.jpg`), else a plain
+          <img>. SVG sources skip <picture> entirely (no format
+          negotiation benefit). See `bundle_picture_tag` in
+          render_context.rb. %>
+      <%== bundle_picture_tag(page, page.frontmatter['image'], alt: page.title, class_: 'post__hero') %>
+    <% when :svg %>
+      <div class="post__hero post__hero--svg" aria-hidden="true">
+        <%== cover_svg_for(page) %>
+      </div>
+    <% end %>
+  </header>
+
+  <%# Auto-generated TOC — renders nothing for posts with fewer than 3
+      h2/h3 headings, so short pieces stay clean. Override threshold
+      with `min_headings: N`. %>
+  <%== render 'partials/toc' %>
+
+  <%# `e-content` wraps the post body so microformats2 parsers can
+      lift the rich body content cleanly. The div is structural-only,
+      no visual treatment. %>
+  <div class="e-content">
+    <%== page.content %>
+  </div>
+
+  <% if page.tags.any? %>
+  <footer class="post__tags-footer">
+    <p>Tagged: <%== page.tags.map { |t| link_to(t, taxonomy_url('tags', t), class: 'p-category') }.join(', ') %></p>
+  </footer>
+  <% end %>
+</article>
+
+<%# Webmentions — replies, likes, reposts, bookmarks from around the
+    web. Renders nothing when the IndieWeb integration is off or no
+    mentions exist for this URL. See partials/_webmentions for shape. %>
+<%== render 'partials/webmentions' %>
+
+<%# Testimonials about this post — pulls from data/testimonials.yml
+    entries where `collection: posts` matches this page's slug. Same
+    polymorphic mechanism the workshop and publication views use. %>
+<%== render 'partials/testimonials', subject: page, heading: 'What readers say' %>
+
+<%# "Next" section — three-way dispatch:
+    1. Post is in a series AND a next-by-position exists  →  show
+       "Next in the series" with that post.
+    2. Post is in a series AND is the last position       →  show a
+       "this is the last post in <series> series" note, then still
+       offer chronological "Up next" so the reader has somewhere to go.
+    3. Post is not in a series                             →  the
+       historical default — chronological "Up next" only.
+    All three branches degrade silently when there's nothing to link to. %>
+<%
+  in_series = page.frontmatter['series'] && page.frontmatter['series_position']
+  next_in_series_post = in_series ? site.next_in_series(page) : nil
+%>
+<% if next_in_series_post %>
+  <%== render 'partials/next_in_series' %>
+<% elsif in_series %>
+  <% series_name = page.frontmatter['series'] %>
+  <% series_link = series_url(series_name) %>
+  <aside class="series-end" aria-label="End of series">
+    <p>This is the last post in the
+      <%== series_link ? link_to(series_name, series_link) : h(series_name) %>
+      series.</p>
+  </aside>
+  <%== render 'partials/next_item' %>
+<% else %>
+  <%== render 'partials/next_item' %>
+<% end %>
+
+<%== render 'partials/related_items' %>

data/app/views/layouts/posts_archive.html.erb

@@ -0,0 +1,98 @@
+---
+layout: application
+---
+<!--
+  Posts archive — compact list of every post in the collection,
+  newest first. Pairs with `posts_index.html.erb`: when
+  `collections.posts.archive.enabled` is on, the front index shows
+  the latest N posts as full cards, and this page is the canonical
+  full list (title + date, no heroes, no descriptions).
+
+  Wire it up by creating `content/posts-archive.md` (NOT inside
+  `content/posts/` — that would make the page a post itself) with
+  this layout + an explicit permalink so the page lives at the
+  expected URL:
+
+      ---
+      title: Archive
+      description: Every post on the site, newest first.
+      layout: posts_archive
+      permalink: /posts/archive/
+      paginate: true
+      ---
+
+  Title and lede come from that file's frontmatter. The post body
+  (any markdown below the frontmatter) renders above the list.
+
+  Each entry uses the same vertical card structure as the home page's
+  "From the archive" module: title (h3) → meta line (date · reading
+  time) → short description. No hero images. Same visual rhythm as
+  the home modules — readers familiar with the home page recognise
+  the shape immediately.
+
+  Pagination: `paginate: true` reads the page count from
+  `collections.posts.pagination.per_page` in config/site.yml. Set an
+  explicit integer (`paginate: 25`) here only when this specific
+  archive needs to deviate per-page from the site-wide setting. The
+  engine generates `/posts/archive/page/2/` etc. automatically.
+-->
+<%
+  description = page.frontmatter['description']
+  posts       = page.paginator&.posts || site.collection('posts')
+%>
+<article>
+  <header>
+    <h1><%= page.title || 'Archive' %></h1>
+    <% if description && !description.to_s.empty? %>
+      <p class="lede"><%= description %></p>
+    <% end %>
+  </header>
+  <% if page.content && !page.content.to_s.strip.empty? %>
+    <div class="index-intro"><%== page.content %></div>
+  <% end %>
+
+  <% if posts.any? %>
+    <ul class="posts-archive">
+      <% posts.each do |post| %>
+        <li class="posts-archive__item">
+          <%# Cover slot. Always present so the 2-column grid (cover
+              left / body right) applies uniformly across rows with
+              and without a real hero. When the post has no image,
+              emit an inline `<svg><rect/></svg>` filled with
+              `var(--color-code-bg)` so the slot keeps the 4:3 shape;
+              when the post does have an image, the same colour also
+              backs the `<img>` so the slot is filled while the
+              hero is loading. Same pattern as `_post_list`. %>
+          <a class="posts-archive__cover" href="<%= sanitized_url(post.url) %>" aria-label="<%= post.title %>">
+            <% if (img = post.frontmatter['image']) %>
+              <img src="<%= sanitized_url(bundle_asset_url_for(post, img)) %>"
+                   alt="<%= post.title %>" loading="lazy">
+            <% else %>
+              <svg class="posts-archive__cover-placeholder" viewBox="0 0 4 3"
+                   preserveAspectRatio="none" aria-hidden="true">
+                <rect width="4" height="3" fill="currentColor"/>
+              </svg>
+            <% end %>
+          </a>
+          <div class="posts-archive__body">
+            <h3 class="posts-archive__title">
+              <a href="<%= sanitized_url(post.url) %>"><%= post.title %></a>
+            </h3>
+            <% if post.date %>
+              <p class="posts-archive__meta">
+                <time datetime="<%= post.date.iso8601 %>"><%= local_time(post.date) %></time>
+                <% if post.respond_to?(:content) && post.content.to_s.length.positive? %>
+                  · <%= reading_time(post.content) %>
+                <% end %>
+              </p>
+            <% end %>
+            <% if (desc = post.frontmatter['description'].to_s) && !desc.empty? %>
+              <p class="posts-archive__description"><%= truncate(desc, length: 160) %></p>
+            <% end %>
+          </div>
+        </li>
+      <% end %>
+    </ul>
+    <%== render 'partials/pagination', paginator: page.paginator %>
+  <% end %>
+</article>