Show updated date on blog post cards (#8013)

Thread an optional updatedAt field from post frontmatter through the card
builders to the PostCard UI, rendering "Updated {date}" alongside the
original publish date (separated by a "|" when both are present). Surfaces
refresh dates on the series and home listings.

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-authored-by: Ankur Datta <64993082+ankur-arch@users.noreply.github.com>

Author: 3 people

apps/blog/src/app/(blog)/page.tsx

@@ -90,12 +90,21 @@ export default async function BlogHome() {
       }
     }
 
+    let updatedAtISO: string | null = null;
+    if (data.updatedAt) {
+      const updatedObj = new Date(data.updatedAt);
+      if (!isNaN(updatedObj.getTime())) {
+        updatedAtISO = updatedObj.toISOString();
+      }
+    }
+
     const authors = getAllAuthors(post);
 
     return {
       url: withBlogBasePath(post.url),
       title: data.title as string,
       date: dateISO,
+      updatedAt: updatedAtISO,
       excerpt: data.metaDescription as string,
       author: authors[0] ?? null,
       authors,

apps/blog/src/app/(blog)/series/[key]/page.tsx

@@ -21,6 +21,7 @@ function buildCardItems(seriesKey: string): BlogCardItem[] {
     const data = post.data as {
       title?: string;
       date?: Date | string;
+      updatedAt?: Date | string;
       metaDescription?: string;
       authors?: string[];
       heroImagePath?: string;
@@ -36,6 +37,14 @@ function buildCardItems(seriesKey: string): BlogCardItem[] {
       }
     }
 
+    let updatedAtISO: string | null = null;
+    if (data.updatedAt) {
+      const updatedObj = new Date(data.updatedAt);
+      if (!Number.isNaN(updatedObj.getTime())) {
+        updatedAtISO = updatedObj.toISOString();
+      }
+    }
+
     const authors = Array.isArray(data.authors)
       ? data.authors.filter((a): a is string => typeof a === "string")
       : [];
@@ -44,6 +53,7 @@ function buildCardItems(seriesKey: string): BlogCardItem[] {
       url: withBlogBasePath(post.url),
       title: data.title ?? "",
       date: dateISO,
+      updatedAt: updatedAtISO,
       excerpt: data.metaDescription,
       author: authors[0] ?? null,
       authors,

apps/blog/src/components/BlogGrid.tsx

@@ -4,6 +4,7 @@ export type BlogCardItem = {
   url: string;
   title: string;
   date: string; // ISO string
+  updatedAt?: string | null; // ISO string
   excerpt?: string | null;
   author?: string | null;
   authors?: string[] | null;

apps/blog/src/components/PostCard.tsx

@@ -13,6 +13,7 @@ type PostCardItem = {
   url: string;
   title: string;
   date: string;
+  updatedAt?: string | null;
   excerpt?: string | null;
   author?: string | null;
   authors?: string[] | null;
@@ -50,6 +51,7 @@ export function PostCard({
     url: post.url,
     title: post.title,
     date: formatDate(new Date(post.date).toISOString()),
+    updatedAt: post.updatedAt ? formatDate(new Date(post.updatedAt).toISOString()) : null,
     excerpt: post.excerpt,
     author,
     authors: authorProfiles,

apps/blog/src/lib/post-card-item.ts

@@ -26,16 +26,24 @@ export function toBlogCardItem(page: BlogPage): BlogCardItem {
     heroImagePath?: string;
     heroImageAlt?: string;
     tags?: string[];
+    updatedAt?: Date | string;
   };
   const authors = Array.isArray(data.authors)
     ? data.authors.filter((name): name is string => typeof name === "string")
     : [];
   const time = getPostTime(page);
 
+  let updatedAtISO: string | null = null;
+  if (data.updatedAt) {
+    const updated = new Date(data.updatedAt);
+    if (!Number.isNaN(updated.getTime())) updatedAtISO = updated.toISOString();
+  }
+
   return {
     url: withBlogBasePath(page.url),
     title: data.title ?? "",
     date: time ? new Date(time).toISOString() : "",
+    updatedAt: updatedAtISO,
     excerpt: data.metaDescription ?? null,
     author: authors[0] ?? null,
     authors,

packages/ui/src/components/post-card.tsx

@@ -8,6 +8,7 @@ export type PostCardItem = {
   url: string;
   title: string;
   date: string;
+  updatedAt?: string | null;
   excerpt?: string | null;
   author?: AuthorProfile | null;
   authors?: AuthorProfile[] | null;
@@ -64,6 +65,14 @@ export function PostCard({
         <div className="eyebrow flex gap-2 items-center">
           {post.badge && <Badge color="success" label={post.badge} className="w-fit text-xs" />}
           {post.date && <span className="text-xs text-foreground-neutral-weak">{post.date}</span>}
+          {post.date && post.updatedAt && (
+            <span className="text-xs text-foreground-neutral-weak" aria-hidden="true">
+              |
+            </span>
+          )}
+          {post.updatedAt && (
+            <span className="text-xs text-foreground-neutral-weak">Updated {post.updatedAt}</span>
+          )}
         </div>
         {post.title && <h2 className={titleClassName}>{post.title}</h2>}
         {post.excerpt && <p className={excerptClassName}>{post.excerpt}</p>}