From fac252efa98e671c3066c83781f64744bc14553a Mon Sep 17 00:00:00 2001
From: Krishna Ayyalasomayajula <krishna@ayyalasomayajula.net>
Date: Mon, 1 Jun 2026 21:37:57 -0500
Subject: [PATCH] feat: display author, tags, and reading time on post pages
 and cards

---
 app/posts/[slug]/page.tsx    | 16 +++++++++++++---
 components/blog/PostCard.tsx | 13 +++++++++++--
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/app/posts/[slug]/page.tsx b/app/posts/[slug]/page.tsx
index f8c29ba..616e70f 100644
--- a/app/posts/[slug]/page.tsx
+++ b/app/posts/[slug]/page.tsx
@@ -47,9 +47,19 @@ export default async function PostPage({ params }: { params: Promise<{ slug: str
               <h1 className="heading-xl text-ink mt-3 mb-2">
                 {post.title}
               </h1>
-              <p className="font-mono text-xs text-ink-soft">
-                {post.readingTime} min read
-              </p>
+              <div className="flex items-center gap-4 font-mono text-xs text-ink-soft">
+                {post.author && <span>by {post.author}</span>}
+                <span>{post.readingTime} min read</span>
+              </div>
+              {post.tags.length > 0 && (
+                <div className="flex flex-wrap gap-2 mt-4">
+                  {post.tags.map((tag) => (
+                    <span key={tag} className="rounded-full bg-surface px-3 py-1 text-xs font-medium text-ink-soft border border-border">
+                      {tag}
+                    </span>
+                  ))}
+                </div>
+              )}
             </header>
             <div className="prose prose-lg max-w-none">
               <MDXRemote
diff --git a/components/blog/PostCard.tsx b/components/blog/PostCard.tsx
index 7bdfce6..cbd5f3c 100644
--- a/components/blog/PostCard.tsx
+++ b/components/blog/PostCard.tsx
@@ -8,7 +8,7 @@ interface PostCardProps extends PostMeta {
   index?: number;
 }
 
-export function PostCard({ slug, title, date, excerpt, index = 0 }: PostCardProps) {
+export function PostCard({ slug, title, date, excerpt, index = 0, tags = [] }: PostCardProps) {
   return (
     <m.article
       initial={{ opacity: 0, y: 20 }}
@@ -22,8 +22,17 @@ export function PostCard({ slug, title, date, excerpt, index = 0 }: PostCardProp
         <h3 className="heading-md text-ink mt-1 mb-2 hover:text-accent transition-colors">
           {title}
         </h3>
+        {tags && tags.length > 0 && (
+          <div className="flex flex-wrap gap-1 mt-2">
+            {tags.slice(0, 3).map((tag) => (
+              <span key={tag} className="rounded bg-surface px-2 py-0.5 text-xs text-ink-soft">
+                {tag}
+              </span>
+            ))}
+          </div>
+        )}
         {excerpt && (
-          <p className="text-ink-soft leading-7">{excerpt}</p>
+          <p className="text-ink-soft leading-7 mt-2">{excerpt}</p>
         )}
       </Link>
     </m.article>