first commit

Made-with: Cursor

frontend/app/blog/[slug]/BlogPostClient.tsx

@@ -0,0 +1,400 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import Link from "next/link";
+import { ArrowLeft, Heart, Send } from "lucide-react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { api } from "@/lib/api";
+import { formatDate } from "@/lib/utils";
+import { hasNostrExtension, getPublicKey, signEvent, publishEvent, shortenPubkey, fetchNostrProfile, type NostrProfile } from "@/lib/nostr";
+import { Navbar } from "@/components/public/Navbar";
+import { Footer } from "@/components/public/Footer";
+import type { Components } from "react-markdown";
+
+interface Post {
+  id: string;
+  slug: string;
+  title: string;
+  content: string;
+  excerpt?: string;
+  authorName?: string;
+  authorPubkey?: string;
+  publishedAt?: string;
+  createdAt?: string;
+  nostrEventId?: string;
+  categories?: { category: { id: string; name: string; slug: string } }[];
+}
+
+interface NostrReply {
+  id: string;
+  pubkey: string;
+  content: string;
+  created_at: number;
+}
+
+const markdownComponents: Components = {
+  h1: ({ children }) => (
+    <h1 className="text-3xl font-bold text-on-surface mb-4 mt-10">{children}</h1>
+  ),
+  h2: ({ children }) => (
+    <h2 className="text-2xl font-bold text-on-surface mb-4 mt-8">{children}</h2>
+  ),
+  h3: ({ children }) => (
+    <h3 className="text-xl font-bold text-on-surface mb-3 mt-6">{children}</h3>
+  ),
+  h4: ({ children }) => (
+    <h4 className="text-lg font-semibold text-on-surface mb-2 mt-4">{children}</h4>
+  ),
+  p: ({ children }) => (
+    <p className="text-on-surface-variant leading-relaxed mb-6">{children}</p>
+  ),
+  a: ({ href, children }) => (
+    <a
+      href={href}
+      className="text-primary hover:underline"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {children}
+    </a>
+  ),
+  ul: ({ children }) => (
+    <ul className="list-disc ml-6 mb-6 space-y-2 text-on-surface-variant">{children}</ul>
+  ),
+  ol: ({ children }) => (
+    <ol className="list-decimal ml-6 mb-6 space-y-2 text-on-surface-variant">{children}</ol>
+  ),
+  li: ({ children }) => (
+    <li className="leading-relaxed">{children}</li>
+  ),
+  blockquote: ({ children }) => (
+    <blockquote className="border-l-4 border-primary/30 pl-4 italic text-on-surface-variant mb-6">
+      {children}
+    </blockquote>
+  ),
+  code: ({ className, children }) => {
+    const isBlock = className?.includes("language-");
+    if (isBlock) {
+      return (
+        <code className={`${className} block`}>
+          {children}
+        </code>
+      );
+    }
+    return (
+      <code className="bg-surface-container-high px-2 py-1 rounded text-sm text-primary">
+        {children}
+      </code>
+    );
+  },
+  pre: ({ children }) => (
+    <pre className="bg-surface-container-highest p-4 rounded-lg overflow-x-auto mb-6 text-sm">
+      {children}
+    </pre>
+  ),
+  img: ({ src, alt }) => (
+    <img src={src} alt={alt || ""} className="rounded-lg max-w-full mb-6" />
+  ),
+  hr: () => <hr className="border-surface-container-high my-8" />,
+  table: ({ children }) => (
+    <div className="overflow-x-auto mb-6">
+      <table className="w-full text-left text-on-surface-variant">{children}</table>
+    </div>
+  ),
+  th: ({ children }) => (
+    <th className="px-4 py-2 font-semibold text-on-surface bg-surface-container-high">
+      {children}
+    </th>
+  ),
+  td: ({ children }) => (
+    <td className="px-4 py-2">{children}</td>
+  ),
+};
+
+function ArticleSkeleton() {
+  const widths = [85, 92, 78, 95, 88, 72, 90, 83];
+  return (
+    <div className="animate-pulse max-w-3xl mx-auto">
+      <div className="flex gap-2 mb-6">
+        <div className="h-5 w-20 bg-surface-container-high rounded-full" />
+        <div className="h-5 w-16 bg-surface-container-high rounded-full" />
+      </div>
+      <div className="h-12 w-3/4 bg-surface-container-high rounded mb-4" />
+      <div className="h-12 w-1/2 bg-surface-container-high rounded mb-8" />
+      <div className="h-5 w-48 bg-surface-container-high rounded mb-16" />
+      <div className="space-y-4">
+        {widths.map((w, i) => (
+          <div
+            key={i}
+            className="h-4 bg-surface-container-high rounded"
+            style={{ width: `${w}%` }}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default function BlogPostClient({ slug }: { slug: string }) {
+  const [post, setPost] = useState<Post | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [liked, setLiked] = useState(false);
+  const [likeCount, setLikeCount] = useState(0);
+  const [comment, setComment] = useState("");
+  const [replies, setReplies] = useState<NostrReply[]>([]);
+  const [hasNostr, setHasNostr] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [authorProfile, setAuthorProfile] = useState<NostrProfile | null>(null);
+
+  useEffect(() => {
+    setHasNostr(hasNostrExtension());
+  }, []);
+
+  useEffect(() => {
+    if (!slug) return;
+    setLoading(true);
+    setError(null);
+    api
+      .getPost(slug)
+      .then((data) => {
+        setPost(data);
+        if (data?.authorPubkey) {
+          fetchNostrProfile(data.authorPubkey)
+            .then((profile) => setAuthorProfile(profile))
+            .catch(() => {});
+        }
+      })
+      .catch((err) => setError(err.message))
+      .finally(() => setLoading(false));
+  }, [slug]);
+
+  useEffect(() => {
+    if (!slug) return;
+    api.getPostReactions(slug)
+      .then((data) => setLikeCount(data.count))
+      .catch(() => {});
+
+    api.getPostReplies(slug)
+      .then((data) => setReplies(data.replies || []))
+      .catch(() => {});
+  }, [slug]);
+
+  const handleLike = useCallback(async () => {
+    if (liked || !post?.nostrEventId || !hasNostr) return;
+    try {
+      const pubkey = await getPublicKey();
+      const reactionEvent = {
+        kind: 7,
+        created_at: Math.floor(Date.now() / 1000),
+        tags: [["e", post.nostrEventId], ["p", post.authorPubkey || ""]],
+        content: "+",
+        pubkey,
+      };
+      const signedReaction = await signEvent(reactionEvent);
+      await publishEvent(signedReaction);
+      setLiked(true);
+      setLikeCount((c) => c + 1);
+    } catch {
+      // User rejected or extension unavailable
+    }
+  }, [liked, post, hasNostr]);
+
+  const handleComment = useCallback(async () => {
+    if (!comment.trim() || !post?.nostrEventId || !hasNostr) return;
+    setSubmitting(true);
+    try {
+      const pubkey = await getPublicKey();
+      const replyEvent = {
+        kind: 1,
+        created_at: Math.floor(Date.now() / 1000),
+        tags: [["e", post.nostrEventId, "", "reply"], ["p", post.authorPubkey || ""]],
+        content: comment.trim(),
+        pubkey,
+      };
+      const signed = await signEvent(replyEvent);
+      await publishEvent(signed);
+      setReplies((prev) => [
+        ...prev,
+        {
+          id: signed.id || Date.now().toString(),
+          pubkey,
+          content: comment.trim(),
+          created_at: Math.floor(Date.now() / 1000),
+        },
+      ]);
+      setComment("");
+    } catch {
+      // User rejected or extension unavailable
+    } finally {
+      setSubmitting(false);
+    }
+  }, [comment, post, hasNostr]);
+
+  const categories = post?.categories?.map((c) => c.category) || [];
+
+  return (
+    <>
+      <Navbar />
+
+      <div className="min-h-screen">
+        <div className="max-w-3xl mx-auto px-8 pt-12 pb-24">
+          <Link
+            href="/blog"
+            className="inline-flex items-center gap-2 text-on-surface-variant hover:text-primary transition-colors mb-12 text-sm font-medium"
+          >
+            <ArrowLeft size={16} />
+            Back to Blog
+          </Link>
+
+          {loading && <ArticleSkeleton />}
+
+          {error && (
+            <div className="bg-error-container/20 text-error rounded-xl p-6">
+              Failed to load post: {error}
+            </div>
+          )}
+
+          {!loading && !error && post && (
+            <>
+              <header className="mb-16">
+                {categories.length > 0 && (
+                  <div className="flex flex-wrap gap-2 mb-6">
+                    {categories.map((cat) => (
+                      <span
+                        key={cat.id}
+                        className="px-3 py-1 text-xs font-bold uppercase tracking-widest text-primary bg-primary/10 rounded-full"
+                      >
+                        {cat.name}
+                      </span>
+                    ))}
+                  </div>
+                )}
+
+                <h1 className="text-4xl md:text-5xl font-black tracking-tight leading-tight mb-6">
+                  {post.title}
+                </h1>
+
+                <div className="flex items-center gap-3 text-sm text-on-surface-variant/60">
+                  {(authorProfile || post.authorName || post.authorPubkey) && (
+                    <div className="flex items-center gap-2.5">
+                      {authorProfile?.picture && (
+                        <img
+                          src={authorProfile.picture}
+                          alt={authorProfile.name || post.authorName || "Author"}
+                          className="w-8 h-8 rounded-full object-cover bg-zinc-800 shrink-0"
+                          onError={(e) => { (e.target as HTMLImageElement).style.display = "none"; }}
+                        />
+                      )}
+                      <span className="font-medium text-on-surface-variant">
+                        {authorProfile?.name || post.authorName || shortenPubkey(post.authorPubkey!)}
+                      </span>
+                    </div>
+                  )}
+                  {(post.publishedAt || post.createdAt) && (
+                    <>
+                      {(authorProfile || post.authorName || post.authorPubkey) && (
+                        <span className="text-on-surface-variant/30">·</span>
+                      )}
+                      <span>
+                        {formatDate(post.publishedAt || post.createdAt!)}
+                      </span>
+                    </>
+                  )}
+                </div>
+              </header>
+
+              <article className="mb-16">
+                <ReactMarkdown
+                  remarkPlugins={[remarkGfm]}
+                  components={markdownComponents}
+                >
+                  {post.content}
+                </ReactMarkdown>
+              </article>
+
+              <section className="bg-surface-container-low rounded-xl p-8 mb-16">
+                <div className="flex items-center gap-6 mb-8">
+                  <button
+                    onClick={handleLike}
+                    disabled={!hasNostr}
+                    title={hasNostr ? "Like this post" : "Install a Nostr extension to interact"}
+                    className={`flex items-center gap-2 px-4 py-2 rounded-lg transition-colors ${
+                      liked
+                        ? "bg-primary/20 text-primary"
+                        : hasNostr
+                          ? "bg-surface-container-high text-on-surface hover:bg-surface-bright"
+                          : "bg-surface-container-high text-on-surface/40 cursor-not-allowed"
+                    }`}
+                  >
+                    <Heart size={18} fill={liked ? "currentColor" : "none"} />
+                    <span className="font-semibold">{likeCount}</span>
+                  </button>
+                  {!hasNostr && (
+                    <span className="text-on-surface-variant/50 text-xs">
+                      Install a Nostr extension to like and comment
+                    </span>
+                  )}
+                </div>
+
+                <h3 className="text-lg font-bold mb-6">
+                  Comments {replies.length > 0 && `(${replies.length})`}
+                </h3>
+
+                {hasNostr && (
+                  <div className="flex gap-3 mb-8">
+                    <textarea
+                      value={comment}
+                      onChange={(e) => setComment(e.target.value)}
+                      placeholder="Share your thoughts..."
+                      rows={3}
+                      className="flex-1 bg-surface-container-highest text-on-surface rounded-lg p-4 resize-none placeholder:text-on-surface-variant/40 focus:outline-none focus:ring-1 focus:ring-primary/40"
+                    />
+                    <button
+                      onClick={handleComment}
+                      disabled={!comment.trim() || submitting}
+                      className="self-end px-4 py-3 bg-primary text-on-primary rounded-lg font-semibold hover:scale-105 transition-transform disabled:opacity-30 disabled:cursor-not-allowed"
+                    >
+                      <Send size={18} />
+                    </button>
+                  </div>
+                )}
+
+                {replies.length > 0 ? (
+                  <div className="space-y-6">
+                    {replies.map((r) => (
+                      <div
+                        key={r.id}
+                        className="bg-surface-container-high rounded-lg p-4"
+                      >
+                        <div className="flex items-center gap-2.5 mb-2">
+                          <span className="font-semibold text-xs font-mono text-on-surface-variant/70">
+                            {shortenPubkey(r.pubkey)}
+                          </span>
+                          <span className="text-on-surface-variant/30">·</span>
+                          <span className="text-xs text-on-surface-variant/50">
+                            {formatDate(new Date(r.created_at * 1000))}
+                          </span>
+                        </div>
+                        <p className="text-on-surface-variant text-sm leading-relaxed">
+                          {r.content}
+                        </p>
+                      </div>
+                    ))}
+                  </div>
+                ) : (
+                  <p className="text-on-surface-variant/50 text-sm">
+                    No comments yet. Be the first to share your thoughts.
+                  </p>
+                )}
+              </section>
+            </>
+          )}
+        </div>
+      </div>
+
+      <Footer />
+    </>
+  );
+}

frontend/app/blog/[slug]/page.tsx

@@ -0,0 +1,84 @@
+import type { Metadata } from "next";
+import BlogPostClient from "./BlogPostClient";
+import { BlogPostingJsonLd, BreadcrumbJsonLd } from "@/components/public/JsonLd";
+
+const apiUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:4000/api";
+
+async function fetchPost(slug: string) {
+  try {
+    const res = await fetch(`${apiUrl}/posts/${slug}`, {
+      next: { revalidate: 300 },
+    });
+    if (!res.ok) return null;
+    return res.json();
+  } catch {
+    return null;
+  }
+}
+
+interface Props {
+  params: Promise<{ slug: string }>;
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { slug } = await params;
+  const post = await fetchPost(slug);
+  if (!post) {
+    return { title: "Post Not Found" };
+  }
+
+  const description =
+    post.excerpt ||
+    `Read "${post.title}" on the Belgian Bitcoin Embassy blog.`;
+  const author = post.authorName || "Belgian Bitcoin Embassy";
+  const ogImageUrl = `/og?title=${encodeURIComponent(post.title)}&type=blog`;
+
+  return {
+    title: post.title,
+    description,
+    openGraph: {
+      type: "article",
+      title: post.title,
+      description,
+      publishedTime: post.publishedAt || post.createdAt,
+      authors: [author],
+      images: [{ url: ogImageUrl, width: 1200, height: 630, alt: post.title }],
+    },
+    twitter: {
+      card: "summary_large_image",
+      title: post.title,
+      description,
+      images: [ogImageUrl],
+    },
+    alternates: { canonical: `/blog/${slug}` },
+  };
+}
+
+export default async function BlogDetailPage({ params }: Props) {
+  const { slug } = await params;
+  const post = await fetchPost(slug);
+
+  return (
+    <>
+      {post && (
+        <>
+          <BlogPostingJsonLd
+            title={post.title}
+            description={post.excerpt || `Read "${post.title}" on the Belgian Bitcoin Embassy blog.`}
+            slug={slug}
+            publishedAt={post.publishedAt || post.createdAt}
+            authorName={post.authorName}
+          />
+          <BreadcrumbJsonLd
+            items={[
+              { name: "Home", href: "/" },
+              { name: "Blog", href: "/blog" },
+              { name: post.title, href: `/blog/${slug}` },
+            ]}
+          />
+        </>
+      )}
+      <BlogPostClient slug={slug} />
+    </>
+  );
+}

frontend/app/blog/layout.tsx

@@ -0,0 +1,17 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Blog - Curated Bitcoin Content from Nostr",
+  description:
+    "Read curated Bitcoin articles from the Nostr network. Education, technical analysis, and community insights from the Belgian Bitcoin Embassy.",
+  openGraph: {
+    title: "Blog - Belgian Bitcoin Embassy",
+    description:
+      "Curated Bitcoin content from the Nostr network. Education, analysis, and insights.",
+  },
+  alternates: { canonical: "/blog" },
+};
+
+export default function BlogLayout({ children }: { children: React.ReactNode }) {
+  return children;
+}

frontend/app/blog/page.tsx

@@ -0,0 +1,283 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import Link from "next/link";
+import { ArrowRight, ArrowLeft, ChevronRight } from "lucide-react";
+import { api } from "@/lib/api";
+import { formatDate } from "@/lib/utils";
+import { Navbar } from "@/components/public/Navbar";
+import { Footer } from "@/components/public/Footer";
+
+interface Post {
+  id: string;
+  slug: string;
+  title: string;
+  excerpt?: string;
+  content?: string;
+  author?: string;
+  authorPubkey?: string;
+  publishedAt?: string;
+  createdAt?: string;
+  categories?: { id: string; name: string; slug: string }[];
+  featured?: boolean;
+}
+
+interface Category {
+  id: string;
+  name: string;
+  slug: string;
+}
+
+function PostCardSkeleton() {
+  return (
+    <div className="bg-surface-container-low rounded-xl overflow-hidden animate-pulse">
+      <div className="p-6 space-y-4">
+        <div className="flex gap-2">
+          <div className="h-5 w-16 bg-surface-container-high rounded-full" />
+          <div className="h-5 w-20 bg-surface-container-high rounded-full" />
+        </div>
+        <div className="h-7 w-3/4 bg-surface-container-high rounded" />
+        <div className="space-y-2">
+          <div className="h-4 w-full bg-surface-container-high rounded" />
+          <div className="h-4 w-2/3 bg-surface-container-high rounded" />
+        </div>
+        <div className="flex justify-between items-center pt-4">
+          <div className="h-4 w-32 bg-surface-container-high rounded" />
+          <div className="h-4 w-24 bg-surface-container-high rounded" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function FeaturedPostSkeleton() {
+  return (
+    <div className="bg-surface-container-low rounded-xl overflow-hidden animate-pulse mb-12">
+      <div className="p-8 md:p-12 space-y-4">
+        <div className="h-5 w-24 bg-surface-container-high rounded-full" />
+        <div className="h-10 w-2/3 bg-surface-container-high rounded" />
+        <div className="space-y-2 max-w-2xl">
+          <div className="h-4 w-full bg-surface-container-high rounded" />
+          <div className="h-4 w-full bg-surface-container-high rounded" />
+          <div className="h-4 w-1/2 bg-surface-container-high rounded" />
+        </div>
+        <div className="h-4 w-48 bg-surface-container-high rounded" />
+      </div>
+    </div>
+  );
+}
+
+export default function BlogPage() {
+  const [posts, setPosts] = useState<Post[]>([]);
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [activeCategory, setActiveCategory] = useState<string>("all");
+  const [page, setPage] = useState(1);
+  const [total, setTotal] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const limit = 9;
+
+  useEffect(() => {
+    api.getCategories().then(setCategories).catch(() => {});
+  }, []);
+
+  useEffect(() => {
+    setLoading(true);
+    setError(null);
+    api
+      .getPosts({
+        category: activeCategory === "all" ? undefined : activeCategory,
+        page,
+        limit,
+      })
+      .then(({ posts: data, total: t }) => {
+        setPosts(data);
+        setTotal(t);
+      })
+      .catch((err) => setError(err.message))
+      .finally(() => setLoading(false));
+  }, [activeCategory, page]);
+
+  const totalPages = Math.ceil(total / limit);
+  const featured = posts.find((p) => p.featured);
+  const regularPosts = featured ? posts.filter((p) => p.id !== featured.id) : posts;
+
+  return (
+    <>
+      <Navbar />
+
+      <div className="min-h-screen">
+        <header className="pt-24 pb-16 px-8">
+          <div className="max-w-7xl mx-auto">
+            <p className="uppercase tracking-[0.2em] text-primary mb-4 font-semibold text-sm">
+              From the Nostr Network
+            </p>
+            <h1 className="text-5xl md:text-7xl font-black tracking-tighter mb-4">
+              Blog
+            </h1>
+            <p className="text-xl text-on-surface-variant max-w-xl leading-relaxed">
+              Curated Bitcoin content from the Nostr network
+            </p>
+          </div>
+        </header>
+
+        <div className="max-w-7xl mx-auto px-8 mb-12">
+          <div className="flex flex-wrap gap-3">
+            <button
+              onClick={() => { setActiveCategory("all"); setPage(1); }}
+              className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+                activeCategory === "all"
+                  ? "bg-primary text-on-primary"
+                  : "bg-surface-container-high text-on-surface hover:bg-surface-bright"
+              }`}
+            >
+              All
+            </button>
+            {categories.map((cat) => (
+              <button
+                key={cat.id}
+                onClick={() => { setActiveCategory(cat.slug); setPage(1); }}
+                className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+                  activeCategory === cat.slug
+                    ? "bg-primary text-on-primary"
+                    : "bg-surface-container-high text-on-surface hover:bg-surface-bright"
+                }`}
+              >
+                {cat.name}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <div className="max-w-7xl mx-auto px-8 pb-24">
+          {error && (
+            <div className="bg-error-container/20 text-error rounded-xl p-6 mb-8">
+              Failed to load posts: {error}
+            </div>
+          )}
+
+          {loading ? (
+            <>
+              <FeaturedPostSkeleton />
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                {Array.from({ length: 6 }).map((_, i) => (
+                  <PostCardSkeleton key={i} />
+                ))}
+              </div>
+            </>
+          ) : posts.length === 0 ? (
+            <div className="text-center py-24">
+              <p className="text-2xl font-bold text-on-surface-variant mb-2">
+                No posts yet
+              </p>
+              <p className="text-on-surface-variant/60">
+                Check back soon for curated Bitcoin content.
+              </p>
+            </div>
+          ) : (
+            <>
+              {featured && page === 1 && (
+                <Link
+                  href={`/blog/${featured.slug}`}
+                  className="block bg-surface-container-low rounded-xl overflow-hidden mb-12 group hover:bg-surface-container-high transition-colors"
+                >
+                  <div className="p-8 md:p-12">
+                    <span className="inline-block px-3 py-1 text-xs font-bold uppercase tracking-widest text-primary bg-primary/10 rounded-full mb-6">
+                      Featured
+                    </span>
+                    <h2 className="text-3xl md:text-4xl font-black tracking-tight mb-4 group-hover:text-primary transition-colors">
+                      {featured.title}
+                    </h2>
+                    {featured.excerpt && (
+                      <p className="text-on-surface-variant text-lg leading-relaxed max-w-2xl mb-6">
+                        {featured.excerpt}
+                      </p>
+                    )}
+                    <div className="flex items-center gap-4 text-sm text-on-surface-variant/60">
+                      {featured.author && <span>{featured.author}</span>}
+                      {featured.publishedAt && (
+                        <span>{formatDate(featured.publishedAt)}</span>
+                      )}
+                    </div>
+                  </div>
+                </Link>
+              )}
+
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
+                {regularPosts.map((post) => (
+                  <Link
+                    key={post.id}
+                    href={`/blog/${post.slug}`}
+                    className="group flex flex-col bg-zinc-900 border border-zinc-800 rounded-xl p-6 hover:border-zinc-700 hover:-translate-y-0.5 hover:shadow-xl transition-all duration-200"
+                  >
+                    {post.categories && post.categories.length > 0 && (
+                      <div className="flex flex-wrap gap-2 mb-4">
+                        {post.categories.map((cat) => (
+                          <span
+                            key={cat.id}
+                            className="text-primary text-[10px] uppercase tracking-widest font-bold"
+                          >
+                            {cat.name}
+                          </span>
+                        ))}
+                      </div>
+                    )}
+
+                    <h3 className="font-bold text-base mb-3 leading-snug group-hover:text-primary transition-colors">
+                      {post.title}
+                    </h3>
+
+                    {post.excerpt && (
+                      <p className="text-on-surface-variant text-sm leading-relaxed mb-5 flex-1 line-clamp-3">
+                        {post.excerpt}
+                      </p>
+                    )}
+
+                    <div className="flex items-center justify-between mt-auto pt-4 border-t border-zinc-800/60">
+                      <div className="flex items-center gap-2 text-xs text-on-surface-variant/50">
+                        {post.author && <span>{post.author}</span>}
+                        {post.author && (post.publishedAt || post.createdAt) && <span>·</span>}
+                        {(post.publishedAt || post.createdAt) && (
+                          <span>
+                            {formatDate(post.publishedAt || post.createdAt!)}
+                          </span>
+                        )}
+                      </div>
+                      <span className="text-primary text-xs font-semibold flex items-center gap-1.5 group-hover:gap-2.5 transition-all">
+                        Read <ArrowRight size={12} />
+                      </span>
+                    </div>
+                  </Link>
+                ))}
+              </div>
+
+              {totalPages > 1 && (
+                <div className="flex items-center justify-center gap-4 mt-16">
+                  <button
+                    onClick={() => setPage((p) => Math.max(1, p - 1))}
+                    disabled={page === 1}
+                    className="flex items-center gap-2 px-5 py-2.5 rounded-lg bg-surface-container-high text-on-surface font-medium transition-colors hover:bg-surface-bright disabled:opacity-30 disabled:cursor-not-allowed"
+                  >
+                    <ArrowLeft size={16} /> Previous
+                  </button>
+                  <span className="text-sm text-on-surface-variant">
+                    Page {page} of {totalPages}
+                  </span>
+                  <button
+                    onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
+                    disabled={page === totalPages}
+                    className="flex items-center gap-2 px-5 py-2.5 rounded-lg bg-surface-container-high text-on-surface font-medium transition-colors hover:bg-surface-bright disabled:opacity-30 disabled:cursor-not-allowed"
+                  >
+                    Next <ChevronRight size={16} />
+                  </button>
+                </div>
+              )}
+            </>
+          )}
+        </div>
+      </div>
+
+      <Footer />
+    </>
+  );
+}