@gurupanguji

Homepage Day Timeline Design Spec

Objective

Change the homepage blog module from “latest 5 posts” to “latest 5 distinct publishing dates with posts” and render it as a grouped vertical timeline.

Scope

• Update index.html only.
• Replace the flat latest-post list with grouped day buckets.
• Introduce a left-rail timeline metaphor:
  • a date anchor on the left
  • a thin vertical thread extending downward from that date
  • the posts for that date grouped to the right
• Keep the existing hero, navigation, and footer structure unchanged.

Non-Goals

• Do not change blog/index.html in this pass.
• Do not introduce archive-wide day-group pagination.
• Do not add JavaScript for feed rendering.
• Do not change global shared CSS in assets/css/style.css unless a small shared token is clearly needed.

Context & Constraints

• The homepage currently renders the feed inline in index.html with {% for post in site.posts limit:5 %}.
• This repository builds with Jekyll and the github-pages gem stack, so the homepage solution should stay within plain Liquid plus page-scoped CSS.
• Post dates are stored and rendered in UTC (timezone: UTC in _config.yml), and new posts use +0000 front matter timestamps. This pass should group by each post’s stored publish date without introducing timezone conversion rules.
• The homepage feed should stay visually compact. It should feel like a sharp front-door summary, not a second archive page.

Data Design

The homepage should render the latest 5 distinct post dates that exist in site.posts.

Grouping Rule

• Iterate through site.posts in default reverse-chronological order.
• Derive a normalized day key from each post date with %Y-%m-%d.
• Start a new timeline group whenever the day key changes.
• Count distinct days, not posts.
• Stop rendering once 5 distinct days have been emitted.
• Within each day group, render every post from that day in reverse-chronological order as provided by site.posts.

Expected Behavior

• If one day has 3 posts, all 3 appear beneath the same date anchor.
• If the most recent 5 dates contain 11 total posts, the module renders all 11 posts.
• If recent publishing is sparse, the homepage still shows 5 date groups rather than a rolling 5-calendar-day window.

Layout Design

Desktop

• Use a left-rail composition inside the existing homepage feed module.
• Each day group contains:
  • a date column on the left
  • a narrow thread column beneath the date
  • a post list column on the right
• The date should read as the anchor point for that cluster.
• The thread should visually connect the date to the post list for that same day without implying connection across unrelated days.
• Post titles should remain the primary visual element.
• The grouped module should preserve the homepage’s premium minimal look and avoid looking like a generic changelog.

Mobile

• Collapse into a tighter single-column stack.
• Keep the date immediately above its posts.
• Preserve a shortened thread or rule so the grouping metaphor survives small screens.
• Avoid layouts that force horizontal crowding between the date and the post title.

Markup Design

The homepage feed should move from flat repeated links to nested grouped markup.

Recommended structure:

• one outer timeline container
• repeated day-group wrappers
• inside each day group:
  • a date anchor block
  • a thread element
  • a list of post links for that day

The exact class names can be chosen during implementation, but the markup should clearly separate:

• the overall timeline
• the day group
• the date label
• the thread
• the list of posts
• the individual post link

Visual Design Notes

• Reuse the current homepage type scale where possible so the feed still feels native to the page.
• Date labels should use the existing uppercase UI voice.
• The thread should be subtle, using the current border or muted palette rather than a loud accent line.
• Hover and focus behavior for post links should stay aligned with the current homepage feed behavior: slight horizontal movement and emphasis color shift are acceptable.
• Spacing between day groups should be larger than spacing between posts inside a group.

Accessibility

• The grouped feed must stay fully navigable by keyboard.
• Focus states must remain visible against both current theme finishes.
• Date labels should be plain text, not decorative images.
• The visual thread should be decorative only and should not carry meaning unavailable in the text.

Implementation Notes

• Keep the Liquid grouping logic in index.html for this pass.
• Prefer Liquid state variables such as:
  • current day key
  • rendered day count
  • whether a day group is open
• Close any open group cleanly after the loop ends.
• Keep CSS page-scoped in the existing inline <style> block for the homepage.
• Preserve the current animation posture where reasonable, but do not let animation requirements complicate the grouping logic.

Verification

• Homepage shows 5 distinct publishing dates with posts.
• All posts from each of those dates appear under the correct date anchor.
• No sixth date group is rendered.
• Single-post and multi-post days both render correctly.
• Keyboard focus remains visible on every post link.
• Mobile layout preserves clear grouping without overlap or cramped alignment.

Deferred Follow-Up

If the homepage timeline lands well, a second design and implementation pass can extend the same visual language to blog/index.html. That follow-up should separately address archive pagination by day group, because that problem is structurally different from the homepage feed change.