@gurupanguji

Semantic Collections Implementation Spec

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this spec task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Convert the remaining repeated content blocks in the archive and review pages into semantic lists without changing the visual layout.

Architecture: Keep the shared footer/nav work as-is and limit this pass to repeated collections that readers should be able to traverse as lists. The main changes live in the archive page, the reviews index, and review subpages where related-link clusters currently use generic container elements around repeated links.

Tech Stack: Jekyll, Liquid, HTML5 semantic elements, site CSS.

---

Overview

This issue covers the remaining repeated-content containers that are still rendered as generic div-based groups or standalone repeated links. The goal is to expose list semantics for assistive technologies while preserving the current visual design and spacing.

In Scope

1. Blog Archive List

File: blog/index.html

The archive entries should be rendered as a semantic list rather than a plain stack of anchors inside a generic wrapper.

Expected shape:

<div class="blog-archive">
  <ul class="archive-list">
    <li>
      <a class="archive-item" href="">
        ...
      </a>
    </li>
  </ul>
</div>

Requirements:

• The list must not show bullets or extra indentation.
• The existing flex layout of each archive row must remain unchanged.
• Pagination stays outside the list and continues to render as-is.

2. Review Collection Cards

File: reviews/index.html

The repeated review cards in the cameras and lenses sections should be represented as list items.

Expected shape:

<ul class="review-list">
  <li>
    <a href="camera/fujifilm/x100vi/index.html" class="review-card-link">
      <figure class="review-entry wide" style="margin: 0;">
        ...
      </figure>
    </a>
  </li>
</ul>

Requirements:

• The list container should preserve the current grid layout.
• Each repeated card should remain a single clickable unit.
• The “coming soon” cards should use the same list structure.
• Visual treatment must remain identical.

3. Review Inspirations

File: reviews/index.html

The inspiration links are a repeated set of outbound resources and should be a semantic list.

Expected shape:

<ul class="inspiration-list">
  <li>
    <a class="inspiration-item" href="...">
      ...
    </a>
  </li>
</ul>

Requirements:

• Preserve the existing card-like visual treatment.
• Keep outbound link attributes and UTM parameters untouched.

4. Related Reading / Related Links

Files: reviews/camera/fujifilm/x100vi/index.html, reviews/camera/leica/m11-p/index.html, and any similar review subpages that contain repeated sibling links in a related-links block

Where a related-links block contains multiple sibling links, convert it to a semantic list inside a labeled navigation region.

Expected shape:

<nav class="related-links" aria-label="Related reading">
  <ul>
    <li><a href="...">...</a></li>
    <li><a href="...">...</a></li>
  </ul>
</nav>

Requirements:

• Only repeat-link groups should be converted.
• Single standalone links can stay as they are.
• The label should clearly describe the purpose of the block.

Out of Scope

• Shared footer markup and shared nav markup.
• Breadcrumbs and heading-hierarchy fixes. Those remain tracked in issue #212.
• Active navigation state via aria-current. That remains tracked in issue #213.
• Any broader landmark refactors not directly tied to repeated collections.

Accessibility and Visual Constraints

• Do not introduce bullets, number markers, or extra left padding.
• Preserve the current spacing between cards and link rows.
• Do not change the visual hierarchy of headings.
• Keep focus states and hover states intact.

Verification

• Confirm blog/index.html still renders the archive rows visually unchanged.
• Confirm reviews/index.html still renders the review grid and inspiration section without bullets or spacing regressions.
• Confirm related-links blocks on review subpages still look the same after being wrapped in list semantics.
• Confirm the rendered HTML uses list semantics for each repeated collection.

Acceptance Criteria

• Archive rows, review collections, and inspiration blocks are semantic lists.
• Related-link groups use list semantics where they represent repeated items.
• The rendered site does not gain new visual artifacts.
• Existing shared footer/nav code remains untouched.