feat: redesign posts page with single-page list format

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: sajal2692

src/components/Breadcrumbs.astro

@@ -7,9 +7,9 @@ const currentUrlPath = Astro.url.pathname.replace(/\/+$/, "");
 const breadcrumbList = currentUrlPath.split("/").slice(1);
 
 // if breadcrumb is Home > Posts > 1 <etc>
-// replace Posts with Posts (page number)
+// replace Posts with just Posts (no page number since we removed pagination)
 breadcrumbList[0] === "posts" &&
-  breadcrumbList.splice(0, 2, `Posts (page ${breadcrumbList[1] || 1})`);
+  breadcrumbList.splice(0, 2, `Posts`);
 
 // if breadcrumb is Home > Tags > [tag] > [page] <etc>
 // replace [tag] > [page] with [tag] (page number)

src/pages/posts/index.astro

@@ -1,18 +1,62 @@
 ---
 import { getCollection } from "astro:content";
-import Posts from "@layouts/Posts.astro";
+import Layout from "@layouts/Layout.astro";
+import Main from "@layouts/Main.astro";
+import Header from "@components/Header.astro";
+import Footer from "@components/Footer.astro";
 import getSortedPosts from "@utils/getSortedPosts";
-import getPagination from "@utils/getPagination";
+import { SITE } from "@config";
 
 const posts = await getCollection("blog");
-
 const sortedPosts = getSortedPosts(posts);
-
-const pagination = getPagination({
-  posts: sortedPosts,
-  page: 1,
-  isIndex: true,
-});
 ---
 
-<Posts {...pagination} />
+<Layout title={`Posts | ${SITE.title}`}>
+  <Header activeNav="posts" />
+  <Main pageTitle="Blogs" pageDesc="Here I document my experiments with AI engineering, insights from building intelligent systems and share deep dives on latest paradigms.">
+    <ul class="posts-list">
+      {
+        sortedPosts.map(({ data, slug }) => (
+          <li class="post-item">
+            <span class="post-date">{data.pubDatetime.toLocaleDateString("en-US", { 
+              day: "2-digit", 
+              month: "short", 
+              year: "numeric" 
+            })}</span>
+            <span class="post-separator">»</span>
+            <a href={`/posts/${slug}`} class="post-title">
+              {data.title}
+            </a>
+          </li>
+        ))
+      }
+    </ul>
+  </Main>
+  <Footer />
+</Layout>
+
+<style>
+  .posts-list {
+    @apply list-none p-0 m-0;
+  }
+  
+  .post-item {
+    @apply mb-2 flex items-center;
+  }
+  
+  .post-date {
+    @apply text-skin-base opacity-70 mr-2 whitespace-nowrap;
+  }
+  
+  .post-separator {
+    @apply text-skin-base opacity-70 mr-2;
+  }
+  
+  .post-title {
+    @apply text-skin-accent no-underline;
+  }
+  
+  .post-title:hover {
+    @apply underline;
+  }
+</style>