feat: display author, tags, and reading time on post pages and cards

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

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>