Wordpress is in

site/src/pages/blog/category/[slug].astro

@@ -0,0 +1,54 @@
+---
+import BlogLayout from "../../../layouts/BlogLayout.astro";
+import BlogPostCard from "../../../components/BlogPostCard.astro";
+import { readContentCache } from "../../../lib/content/cache";
+import {
+  wordpressCategories,
+  wordpressPostsByCategorySlug,
+} from "../../../lib/content/selectors";
+
+export async function getStaticPaths() {
+  const cache = await readContentCache();
+  return wordpressCategories(cache).map((c) => ({
+    params: { slug: c.slug },
+  }));
+}
+
+const cache = await readContentCache();
+const categories = wordpressCategories(cache);
+
+const slug = Astro.params.slug || "";
+const activeCategory = categories.find((c) => c.slug === slug);
+const posts = wordpressPostsByCategorySlug(cache, slug);
+
+if (!activeCategory) {
+  // If the category doesn't exist, there will be no static route generated.
+  // But keep runtime behavior explicit.
+  return new Response(null, { status: 404 });
+}
+---
+
+<BlogLayout
+  title={`${activeCategory.name} | Blog | SanthoshJ`}
+  description={`Posts in category: ${activeCategory.name}`}
+  canonicalPath={`/blog/category/${activeCategory.slug}`}
+  categories={categories}
+  activeCategorySlug={activeCategory.slug}
+>
+  <section class="section">
+    <div class="section-header">
+      <h2>{activeCategory.name}</h2>
+      <span class="muted">{posts.length} post{posts.length === 1 ? "" : "s"}</span>
+    </div>
+
+    {posts.length > 0 ? (
+      <div class="blog-grid">
+        {posts.map((p) => (
+          <BlogPostCard post={p} />
+        ))}
+      </div>
+    ) : (
+      <div class="empty">No posts in this category yet.</div>
+    )}
+  </section>
+</BlogLayout>

site/src/pages/blog/index.astro

@@ -0,0 +1,54 @@
+---
+import BlogLayout from "../../layouts/BlogLayout.astro";
+import BlogPostCard from "../../components/BlogPostCard.astro";
+import { readContentCache } from "../../lib/content/cache";
+import { wordpressCategories, wordpressPages, wordpressPosts } from "../../lib/content/selectors";
+
+const cache = await readContentCache();
+const categories = wordpressCategories(cache);
+const posts = wordpressPosts(cache);
+const pages = wordpressPages(cache);
+---
+
+<BlogLayout
+  title="Blog | SanthoshJ"
+  description="Latest posts from my WordPress blog."
+  canonicalPath="/blog"
+  categories={categories}
+>
+  <section class="section">
+    <div class="section-header">
+      <h2>Latest posts</h2>
+      <span class="muted">{posts.length} post{posts.length === 1 ? "" : "s"}</span>
+    </div>
+
+    {posts.length > 0 ? (
+      <div class="blog-grid">
+        {posts.map((p) => (
+          <BlogPostCard post={p} />
+        ))}
+      </div>
+    ) : (
+      <div class="empty">No blog posts yet. Configure WordPress and run <code>npm run fetch-content</code>.</div>
+    )}
+  </section>
+
+  {pages.length > 0 ? (
+    <section class="section">
+      <div class="section-header">
+        <h2>Pages</h2>
+        <a class="muted" href="/blog/pages">
+          Browse pages →
+        </a>
+      </div>
+      <div class="empty">
+        {pages.slice(0, 6).map((p) => (
+          <div>
+            <a href={`/blog/page/${p.slug}`}>{p.title}</a>
+          </div>
+        ))}
+      </div>
+    </section>
+  ) : null}
+</BlogLayout>
+

site/src/pages/blog/page/[slug].astro

@@ -0,0 +1,49 @@
+---
+import BlogLayout from "../../../layouts/BlogLayout.astro";
+import { readContentCache } from "../../../lib/content/cache";
+import { wordpressCategories, wordpressPageBySlug, wordpressPages } from "../../../lib/content/selectors";
+
+export async function getStaticPaths() {
+  const cache = await readContentCache();
+  return wordpressPages(cache).map((page) => ({
+    params: { slug: page.slug },
+  }));
+}
+
+const cache = await readContentCache();
+const categories = wordpressCategories(cache);
+
+const slug = Astro.params.slug || "";
+const page = wordpressPageBySlug(cache, slug);
+
+if (!page) {
+  return new Response(null, { status: 404 });
+}
+
+const metaDescription = (page.excerpt || "").slice(0, 160);
+---
+
+<BlogLayout
+  title={`${page.title} | Blog | SanthoshJ`}
+  description={metaDescription || "Blog page"}
+  canonicalPath={`/blog/page/${page.slug}`}
+  categories={categories}
+  ogImageUrl={page.featuredImageUrl}
+>
+  <section class="section">
+    <div class="section-header">
+      <h2 style="margin: 0;">{page.title}</h2>
+      <a class="muted" href="/blog">Back →</a>
+    </div>
+    {page.featuredImageUrl ? (
+      <img
+        src={page.featuredImageUrl}
+        alt=""
+        loading="lazy"
+        style="width: 100%; max-height: 420px; object-fit: cover; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.12);"
+      />
+    ) : null}
+    <div class="prose" set:html={page.contentHtml} />
+  </section>
+</BlogLayout>
+

site/src/pages/blog/pages.astro

@@ -0,0 +1,37 @@
+---
+import BlogLayout from "../../layouts/BlogLayout.astro";
+import { readContentCache } from "../../lib/content/cache";
+import { wordpressCategories, wordpressPages } from "../../lib/content/selectors";
+
+const cache = await readContentCache();
+const categories = wordpressCategories(cache);
+const pages = wordpressPages(cache);
+---
+
+<BlogLayout
+  title="Blog Pages | SanthoshJ"
+  description="Pages from my WordPress site."
+  canonicalPath="/blog/pages"
+  categories={categories}
+  activeCategorySlug="__pages"
+>
+  <section class="section">
+    <div class="section-header">
+      <h2>Pages</h2>
+      <span class="muted">{pages.length} page{pages.length === 1 ? "" : "s"}</span>
+    </div>
+
+    {pages.length > 0 ? (
+      <div class="empty">
+        {pages.map((p) => (
+          <div style="padding: 6px 0;">
+            <a href={`/blog/page/${p.slug}`}>{p.title}</a>
+          </div>
+        ))}
+      </div>
+    ) : (
+      <div class="empty">No pages yet.</div>
+    )}
+  </section>
+</BlogLayout>
+

site/src/pages/blog/post/[slug].astro

@@ -0,0 +1,52 @@
+---
+import BlogLayout from "../../../layouts/BlogLayout.astro";
+import { readContentCache } from "../../../lib/content/cache";
+import { wordpressCategories, wordpressPostBySlug, wordpressPosts } from "../../../lib/content/selectors";
+
+export async function getStaticPaths() {
+  const cache = await readContentCache();
+  return wordpressPosts(cache).map((post) => ({
+    params: { slug: post.slug },
+  }));
+}
+
+const cache = await readContentCache();
+const categories = wordpressCategories(cache);
+
+const slug = Astro.params.slug || "";
+const post = wordpressPostBySlug(cache, slug);
+
+if (!post) {
+  return new Response(null, { status: 404 });
+}
+
+const metaDescription = (post.excerpt || "").slice(0, 160);
+---
+
+<BlogLayout
+  title={`${post.title} | Blog | SanthoshJ`}
+  description={metaDescription || "Blog post"}
+  canonicalPath={`/blog/post/${post.slug}`}
+  categories={categories}
+  ogImageUrl={post.featuredImageUrl}
+>
+  <section class="section">
+    <div class="section-header">
+      <h2 style="margin: 0;">{post.title}</h2>
+      <a class="muted" href="/blog">Back →</a>
+    </div>
+    <p class="muted" style="margin-top: 0;">
+      {new Date(post.publishedAt).toLocaleDateString()}
+    </p>
+    {post.featuredImageUrl ? (
+      <img
+        src={post.featuredImageUrl}
+        alt=""
+        loading="lazy"
+        style="width: 100%; max-height: 420px; object-fit: cover; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.12);"
+      />
+    ) : null}
+    <div class="prose" set:html={post.contentHtml} />
+  </section>
+</BlogLayout>
+