From 7a17d4c538adf2169eaa2e29a89a614541b5d722 Mon Sep 17 00:00:00 2001
From: Krishna Ayyalasomayajula <krishna@ayyalasomayajula.net>
Date: Mon, 1 Jun 2026 22:50:10 -0500
Subject: [PATCH] feat: cover image display + date formatting + footer spacing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- PostCard: render coverImage above meta/content with lazy loading
- Post detail: render coverImage below title with lazy loading
- Format dates via toLocaleDateString (e.g. Jan 15, 2025)
- Footer top margin: mt-20 → mt-16
---
 app/posts/[slug]/page.tsx    | 10 +++++++++-
 components/blog/PostCard.tsx | 12 +++++++++++-
 components/layout/Footer.tsx |  2 +-
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/app/posts/[slug]/page.tsx b/app/posts/[slug]/page.tsx
index 021b3f5..9c5ae53 100644
--- a/app/posts/[slug]/page.tsx
+++ b/app/posts/[slug]/page.tsx
@@ -44,7 +44,7 @@ export default async function PostPage({ params }: { params: Promise<{ slug: str
         <div className="grid grid-cols-1 lg:grid-cols-[1fr_200px] gap-8">
           <article>
             <header className="mb-12">
-              <time className="font-mono text-sm text-ink-soft">{post.date}</time>
+              <time className="font-mono text-sm text-ink-soft">{new Date(post.date).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })}</time>
               <h1 className="heading-xl text-ink mt-3 mb-2">
                 {post.title}
               </h1>
@@ -52,6 +52,14 @@ export default async function PostPage({ params }: { params: Promise<{ slug: str
                 {post.author && <span>by {post.author}</span>}
                 <span>{post.readingTime} min read</span>
               </div>
+              {post.coverImage && (
+                <img
+                  src={post.coverImage}
+                  alt={post.title}
+                  className="w-full h-64 object-cover rounded-xl my-6"
+                  loading="lazy"
+                />
+              )}
               {post.tags.length > 0 && (
                 <div className="flex flex-wrap gap-2 mt-4">
                   {post.tags.map((tag) => (
diff --git a/components/blog/PostCard.tsx b/components/blog/PostCard.tsx
index d199dbc..f9c621d 100644
--- a/components/blog/PostCard.tsx
+++ b/components/blog/PostCard.tsx
@@ -4,7 +4,7 @@ import Link from 'next/link';
 import { m } from 'motion/react';
 import type { PostMeta } from '@/lib/posts';
 
-export function PostCard({ slug, title, date, excerpt, tags = [], author, readingTime, index = 0 }: PostMeta & { index?: number }) {
+export function PostCard({ slug, title, date, excerpt, tags = [], author, readingTime, index = 0, coverImage }: PostMeta & { index?: number }) {
   return (
     <m.article
       initial={{ opacity: 0, y: 20 }}
@@ -14,6 +14,16 @@ export function PostCard({ slug, title, date, excerpt, tags = [], author, readin
       className="group relative scroll-mt-20 rounded-xl border border-border bg-canvas p-6 transition-all hover:border-border/80 hover:shadow-card"
     >
       <Link href={`/posts/${slug}/`} className="block">
+        {coverImage && (
+          <div className="mb-4 overflow-hidden rounded-lg">
+            <img
+              src={coverImage}
+              alt={title}
+              className="w-full h-40 object-cover"
+              loading="lazy"
+            />
+          </div>
+        )}
         <div className="flex items-center gap-3 text-xs text-ink-soft mb-3">
           <time className="font-mono">{date}</time>
           {author && <span className="text-ink-soft/70">·</span>}
diff --git a/components/layout/Footer.tsx b/components/layout/Footer.tsx
index afe4f35..47770f7 100644
--- a/components/layout/Footer.tsx
+++ b/components/layout/Footer.tsx
@@ -1,6 +1,6 @@
 export function Footer() {
   return (
-    <footer className="border-t border-border mt-20 py-8 text-center">
+    <footer className="border-t border-border mt-16 py-8 text-center">
       <p className="font-mono text-sm text-ink-soft">
         © {new Date().getFullYear()} blog. All rights reserved.
       </p>