From d60bcf612848389180c15367a10b01babc0353f4 Mon Sep 17 00:00:00 2001
From: Julien Danjou <julien@danjou.info>
Date: Wed, 13 May 2026 18:43:33 +0200
Subject: [PATCH] feat(changelog): group entries by day on the index

Same-day entries now share a single date heading instead of each
carrying its own date pill, so days with many releases (e.g. 6 on
2026-05-06) read as one batch rather than a stack of disconnected
cards. Individual entries keep their permalinks.

Closes MRGFY-7274

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Change-Id: I9d610f63923ae5e8206bff0011234f31f48a8149
---
 src/components/changelog/ChangelogCard.astro  | 25 ++-----
 .../changelog/ChangelogMarquee.astro          | 26 +-------
 src/pages/changelog/index.astro               | 60 ++++++++---------
 src/util/changelog.ts                         | 65 +++++++++++--------
 4 files changed, 73 insertions(+), 103 deletions(-)

diff --git a/src/components/changelog/ChangelogCard.astro b/src/components/changelog/ChangelogCard.astro
index 4935b8ec70..bb0db4da55 100644
--- a/src/components/changelog/ChangelogCard.astro
+++ b/src/components/changelog/ChangelogCard.astro
@@ -1,20 +1,15 @@
 ---
 import type { CollectionEntry } from 'astro:content';
-import { formatDate, getProductAccent, renderInlineMarkdown } from '~/util/changelog';
+import { getProductAccent, renderInlineMarkdown } from '~/util/changelog';
 
 interface Props {
   entry: CollectionEntry<'changelog'>;
 }
 
 const { entry } = Astro.props;
-const { title, description, date, tags } = entry.data;
+const { title, description, tags } = entry.data;
 const primaryTag = tags[0];
 const accent = getProductAccent(primaryTag);
-
-const monthDay = new Date(date).toLocaleDateString('en-US', {
-  month: 'short',
-  day: 'numeric',
-});
 ---
 
 <article
@@ -29,14 +24,13 @@ const monthDay = new Date(date).toLocaleDateString('en-US', {
     </h3>
     {description && <p class="card-desc">{description}</p>}
   </div>
-  <div class="card-aside">
-    <time datetime={formatDate(date)} class="card-date">{monthDay}</time>
-    {tags.length > 0 && (
+  {tags.length > 0 && (
+    <div class="card-aside">
       <div class="pills-stack">
         {tags.map((t) => <span class="card-pill">{t}</span>)}
       </div>
-    )}
-  </div>
+    </div>
+  )}
 </article>
 
 <style>
@@ -114,13 +108,6 @@ const monthDay = new Date(date).toLocaleDateString('en-US', {
     align-items: flex-end;
     padding-top: 3px;
   }
-  .card-date {
-    font-size: 0.7rem;
-    font-weight: 600;
-    color: var(--theme-text-muted);
-    white-space: nowrap;
-    letter-spacing: 0.02em;
-  }
   .pills-stack {
     display: flex;
     flex-direction: column;
diff --git a/src/components/changelog/ChangelogMarquee.astro b/src/components/changelog/ChangelogMarquee.astro
index ab91349c3a..d77bb54b5b 100644
--- a/src/components/changelog/ChangelogMarquee.astro
+++ b/src/components/changelog/ChangelogMarquee.astro
@@ -1,20 +1,15 @@
 ---
 import type { CollectionEntry } from 'astro:content';
-import { formatDate, getProductAccent, renderInlineMarkdown } from '~/util/changelog';
+import { getProductAccent, renderInlineMarkdown } from '~/util/changelog';
 
 interface Props {
   entry: CollectionEntry<'changelog'>;
 }
 
 const { entry } = Astro.props;
-const { title, description, date, tags, image } = entry.data;
+const { title, description, tags, image } = entry.data;
 const primaryTag = tags[0];
 const accent = getProductAccent(primaryTag);
-
-const monthDay = new Date(date).toLocaleDateString('en-US', {
-  month: 'short',
-  day: 'numeric',
-});
 ---
 
 <article
@@ -34,7 +29,6 @@ const monthDay = new Date(date).toLocaleDateString('en-US', {
       </h3>
       {description && <p class="marquee-desc">{description}</p>}
     </div>
-    <time datetime={formatDate(date)} class="marquee-date">{monthDay}</time>
   </div>
 </article>
 
@@ -74,10 +68,6 @@ const monthDay = new Date(date).toLocaleDateString('en-US', {
   }
   .marquee-body {
     padding: 24px 26px 24px 28px;
-    display: grid;
-    grid-template-columns: 1fr auto;
-    gap: 22px;
-    align-items: start;
   }
   .marquee-content {
     min-width: 0;
@@ -136,23 +126,11 @@ const monthDay = new Date(date).toLocaleDateString('en-US', {
     font-size: 0.92em;
     font-family: var(--font-mono);
   }
-  .marquee-date {
-    font-size: 0.75rem;
-    font-weight: 600;
-    color: var(--theme-text-muted);
-    white-space: nowrap;
-    letter-spacing: 0.02em;
-    padding-top: 3px;
-  }
 
   @media (max-width: 36rem) {
     .marquee-hero {
       height: 160px;
     }
-    .marquee-body {
-      grid-template-columns: 1fr;
-      gap: 8px;
-    }
     .marquee-title {
       font-size: 1.25rem;
     }
diff --git a/src/pages/changelog/index.astro b/src/pages/changelog/index.astro
index f716597333..1401fd7b14 100644
--- a/src/pages/changelog/index.astro
+++ b/src/pages/changelog/index.astro
@@ -7,7 +7,7 @@ import ChangelogSubscribePopover from '../../components/changelog/ChangelogSubsc
 import enterpriseReleases from '../../data/enterprise-releases.json';
 import MainLayout from '../../layouts/MainLayout.astro';
 import type { TimelineEntry } from '../../util/changelog';
-import { formatDate, groupTimelineByYearMonth, sortChangelog } from '../../util/changelog';
+import { formatDayLabel, groupTimelineByYearDay, sortChangelog } from '../../util/changelog';
 
 const ENTERPRISE_TAG = 'Enterprise';
 const entries = sortChangelog(await getCollection('changelog'));
@@ -26,7 +26,7 @@ const changelogTimeline: TimelineEntry[] = entries.map((entry) => ({
 const timelineEntries: TimelineEntry[] = [...changelogTimeline, ...releaseMarkers].sort(
   (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()
 );
-const groupedTimeline = groupTimelineByYearMonth(timelineEntries);
+const groupedTimeline = groupTimelineByYearDay(timelineEntries);
 const years = Object.keys(groupedTimeline).sort((a, b) => b.localeCompare(a));
 
 const title = 'Changelog';
@@ -60,19 +60,17 @@ const description = 'Latest product updates from Mergify.';
     </nav>
 
     {years.map((year) => {
-      const months = Object.keys(groupedTimeline[year]).sort((a, b) => {
-        const da = new Date(`${a} 1, ${year}`);
-        const db = new Date(`${b} 1, ${year}`);
-        return db.getTime() - da.getTime();
-      });
+      const days = Object.keys(groupedTimeline[year]).sort((a, b) => b.localeCompare(a));
       return (
         <section class="cl-year" data-year={year}>
           <h2 class="cl-year-heading" id={`year-${year}`}>{year}</h2>
-          {months.map((month) => (
-            <div class="cl-month-group">
-              <h3 class="cl-month-heading">{month}</h3>
+          {days.map((day) => (
+            <div class="cl-day-group">
+              <h3 class="cl-day-heading">
+                <time datetime={day}>{formatDayLabel(day)}</time>
+              </h3>
               <div class="cl-feed">
-                {groupedTimeline[year][month].map((item) => (
+                {groupedTimeline[year][day].map((item) => (
                   item.kind === 'release' ? (
                     <article
                       class="cl-release"
@@ -84,9 +82,6 @@ const description = 'Latest product updates from Mergify.';
                         <strong>Enterprise {item.version}</strong>
                         <span class="release-sub">released for self-hosted</span>
                       </span>
-                      <time datetime={formatDate(item.date)} class="release-date">
-                        {new Date(item.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
-                      </time>
                     </article>
                   ) : (
                     item.entry.data.image
@@ -127,15 +122,15 @@ const description = 'Latest product updates from Mergify.';
         });
         noResults.hidden = visible !== 0;
 
-        Array.from(document.querySelectorAll('.cl-month-group')).forEach(function (g) {
-          var any = Array.from(g.querySelectorAll('[data-tags]')).some(function (e) {
+        Array.from(document.querySelectorAll('.cl-day-group')).forEach(function (d) {
+          var any = Array.from(d.querySelectorAll('[data-tags]')).some(function (e) {
             return e.style.display !== 'none';
           });
-          g.style.display = activeTag || q ? (any ? '' : 'none') : '';
+          d.style.display = activeTag || q ? (any ? '' : 'none') : '';
         });
         Array.from(document.querySelectorAll('.cl-year')).forEach(function (y) {
-          var any = Array.from(y.querySelectorAll('.cl-month-group')).some(function (g) {
-            return g.style.display !== 'none';
+          var any = Array.from(y.querySelectorAll('.cl-day-group')).some(function (d) {
+            return d.style.display !== 'none';
           });
           y.style.display = activeTag || q ? (any ? '' : 'none') : '';
         });
@@ -295,13 +290,20 @@ const description = 'Latest product updates from Mergify.';
       padding-bottom: 10px;
       border-bottom: 1px solid var(--theme-border);
     }
-    .cl-month-heading {
-      font-size: 0.6875rem;
-      font-weight: 700;
-      text-transform: uppercase;
-      letter-spacing: 0.14em;
-      color: var(--theme-text-muted);
-      margin: 28px 0 14px;
+    .cl-day-group {
+      margin-top: 28px;
+    }
+    .cl-day-group:first-child {
+      margin-top: 18px;
+    }
+    .cl-day-heading {
+      font-size: 0.8125rem;
+      font-weight: 600;
+      color: var(--theme-text-secondary);
+      margin: 0 0 12px;
+    }
+    .cl-day-heading time {
+      color: inherit;
     }
 
     /* Feed */
@@ -336,12 +338,6 @@ const description = 'Latest product updates from Mergify.';
     .release-sub {
       color: var(--theme-text-muted);
     }
-    .release-date {
-      margin-left: auto;
-      font-weight: 600;
-      color: var(--theme-text-muted);
-      font-size: 0.7rem;
-    }
 
     .cl-no-results {
       text-align: center;
diff --git a/src/util/changelog.ts b/src/util/changelog.ts
index 909338b4b5..b15474fbbd 100644
--- a/src/util/changelog.ts
+++ b/src/util/changelog.ts
@@ -1,32 +1,6 @@
 import type { CollectionEntry } from 'astro:content';
 import { escape } from './html-entities';
 
-type DateCarrier = {
-  date: Date | string;
-};
-
-function groupByYearMonthGeneric<T extends DateCarrier>(
-  entries: T[]
-): Record<string, Record<string, T[]>> {
-  return entries.reduce(
-    (acc, entry) => {
-      const date = new Date(entry.date);
-      const year = date.getFullYear().toString();
-      const month = date.toLocaleDateString('en-US', { month: 'long' });
-
-      if (!acc[year]) {
-        acc[year] = {};
-      }
-      if (!acc[year][month]) {
-        acc[year][month] = [];
-      }
-      acc[year][month].push(entry);
-      return acc;
-    },
-    {} as Record<string, Record<string, T[]>>
-  );
-}
-
 export type TimelineEntry =
   | { kind: 'changelog'; date: Date | string; entry: CollectionEntry<'changelog'> }
   | { kind: 'release'; date: Date | string; version: string };
@@ -109,10 +83,45 @@ export function groupByYearMonth(
   );
 }
 
-export function groupTimelineByYearMonth(
+/**
+ * Group timeline entries by year and day. The day key is the ISO
+ * `YYYY-MM-DD` string, which sorts lexicographically the same as
+ * chronologically and is trivial to re-format for display. Year and day
+ * are both derived in UTC so an entry never lands under a year that
+ * disagrees with its day key (e.g., a December 31 release published at
+ * UTC midnight in a westerly zone).
+ */
+export function groupTimelineByYearDay(
   entries: TimelineEntry[]
 ): Record<string, Record<string, TimelineEntry[]>> {
-  return groupByYearMonthGeneric(entries);
+  return entries.reduce(
+    (acc, entry) => {
+      const date = new Date(entry.date);
+      const year = date.getUTCFullYear().toString();
+      const day = formatDate(entry.date);
+
+      if (!acc[year]) acc[year] = {};
+      if (!acc[year][day]) acc[year][day] = [];
+      acc[year][day].push(entry);
+      return acc;
+    },
+    {} as Record<string, Record<string, TimelineEntry[]>>
+  );
+}
+
+/**
+ * Format a date as a short, human-readable day label (e.g., "May 6").
+ * Formatted in UTC to match the UTC-based day key used for grouping —
+ * otherwise zones west of UTC would render an ISO `YYYY-MM-DD` (UTC
+ * midnight) as the previous day.
+ */
+export function formatDayLabel(date: Date | string): string {
+  const d = typeof date === 'string' ? new Date(date) : date;
+  return d.toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    timeZone: 'UTC',
+  });
 }
 
 /**