From e46207da3c68822fc109c737ec3038067c7ef77a Mon Sep 17 00:00:00 2001
From: Suradet Pratomsak <pharmacistsabot@gmail.com>
Date: Sun, 2 Aug 2026 20:11:44 +0700
Subject: [PATCH 1/4] feat: add RSS feed, series, tag index, and category index

- Install @astrojs/rss and create /rss.xml endpoint with full post data
- Add RSS auto-discovery link in BaseLayout head
- Add optional series field to blog content schema
- Tag series frontmatter to Frontend Roadmap and Haskell posts
- Create series utility for grouping and nav (prev/next)
- Create /blog/series index page and /[series] dynamic page
- Create /blog/tags index page with tag cloud and post counts
- Create /blog/categories index page with category grid
---
 bun.lock                                      |  19 +++
 package.json                                  |   1 +
 src/content.config.ts                         |   1 +
 .../index.mdx                                 |   1 +
 .../index.mdx                                 |   1 +
 src/content/blog/haskell-ep1/index.mdx        |   1 +
 src/content/blog/haskell-ep2/index.mdx        |   1 +
 src/layouts/BaseLayout.astro                  |   1 +
 src/pages/blog/categories/index.astro         |  92 ++++++++++++
 src/pages/blog/series/[series].astro          | 113 +++++++++++++++
 src/pages/blog/series/index.astro             | 134 ++++++++++++++++++
 src/pages/blog/tags/index.astro               |  99 +++++++++++++
 src/pages/rss.xml.ts                          |  27 ++++
 src/utils/series.ts                           |  58 ++++++++
 14 files changed, 549 insertions(+)
 create mode 100644 src/pages/blog/categories/index.astro
 create mode 100644 src/pages/blog/series/[series].astro
 create mode 100644 src/pages/blog/series/index.astro
 create mode 100644 src/pages/blog/tags/index.astro
 create mode 100644 src/pages/rss.xml.ts
 create mode 100644 src/utils/series.ts

diff --git a/bun.lock b/bun.lock
index 7a1aacb..ce84fb4 100644
--- a/bun.lock
+++ b/bun.lock
@@ -6,6 +6,7 @@
       "dependencies": {
         "@astrojs/check": "^0.9.9",
         "@astrojs/mdx": "^7.0.0",
+        "@astrojs/rss": "^4.0.19",
         "@astrojs/sitemap": "^3.7.2",
         "@astrojs/vercel": "^11.0.0",
         "@iconify-json/fa6-brands": "^1.2.6",
@@ -83,6 +84,8 @@
 
     "@astrojs/prism": ["@astrojs/prism@4.0.2", "", { "dependencies": { "prismjs": "^1.30.0" } }, "sha512-KTivpmnz6lDsC6o9H4+DNm2SrE/GHzw8cNAvEJwAvUT+eoaEnn/4NtbDNfRRaxaJHdp15gf+tfHAWiXR4wB3BA=="],
 
+    "@astrojs/rss": ["@astrojs/rss@4.0.19", "", { "dependencies": { "fast-xml-parser": "^5.5.7", "piccolore": "^0.1.3", "zod": "^4.3.6" } }, "sha512-e+z5wYeYtffQdHQO8c2tkSd2JEBdAuRXJV4ZEU5IxkYeE6e39woDd7nw1PH1Kk2tEYNCYuKdylnnbhGmt61awA=="],
+
     "@astrojs/sitemap": ["@astrojs/sitemap@3.7.2", "", { "dependencies": { "sitemap": "^9.0.0", "stream-replace-string": "^2.0.0", "zod": "^4.3.6" } }, "sha512-PqkzkcZTb5ICiyIR8VoKbIAP/laNRXi5tw616N1Ckk+40oNB8Can1AzVV56lrbC5GKSZFCyJYUVYqVivMisvpA=="],
 
     "@astrojs/telemetry": ["@astrojs/telemetry@3.3.2", "", { "dependencies": { "ci-info": "^4.4.0", "dset": "^3.1.4", "is-docker": "^4.0.0", "is-wsl": "^3.1.1", "which-pm-runs": "^1.1.0" } }, "sha512-j8DNruA8ors99Al39RYZPJK4DC1bKkoNm93mAMuBhY9TCNC4R8n1q7ovFnJ5qhGh5Lsh7pa1gpQVpYpsJPeTHQ=="],
@@ -359,6 +362,8 @@
 
     "@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@1.1.5", "", { "dependencies": { "@tybys/wasm-util": "^0.10.2" }, "peerDependencies": { "@emnapi/core": "^1.7.1", "@emnapi/runtime": "^1.7.1" } }, "sha512-AWPoBRJ9tsnVhor4sjO7rkni+7p+2IAEFj6cx06UgP10jkQHqay/36uRV/bFkgrh18D9vb4cr8Q0Pthskgzy+Q=="],
 
+    "@nodable/entities": ["@nodable/entities@3.0.0", "", {}, "sha512-8L9xFeTYKhm49xfIypoe2W5wV1m/3Z58kT+7kR9A8OyFxcPduI4VmxaUMQyKYrRjUoLLSXv6EKKID5Tvj9cUVw=="],
+
     "@nodelib/fs.scandir": ["@nodelib/fs.scandir@2.1.5", "", { "dependencies": { "@nodelib/fs.stat": "2.0.5", "run-parallel": "^1.1.9" } }, "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g=="],
 
     "@nodelib/fs.stat": ["@nodelib/fs.stat@2.0.5", "", {}, "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A=="],
@@ -693,6 +698,8 @@
 
     "anymatch": ["anymatch@3.1.3", "", { "dependencies": { "normalize-path": "^3.0.0", "picomatch": "^2.0.4" } }, "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw=="],
 
+    "anynum": ["anynum@1.0.1", "", {}, "sha512-N6//FLET/tXYNM/F6ABca1oH6fWB+KlTt909Le28WMDBk8oaT4vY17DCrwg2MvmuqUKt3Ni4N5dGJ/EoBgcO6A=="],
+
     "are-docs-informative": ["are-docs-informative@0.0.2", "", {}, "sha512-ixiS0nLNNG5jNQzgZJNoUpBKdo9yTYZMGJ+QgT2jmjR7G7+QHRCc4v6LQ3NgE7EBJq+o0ams3waJwkrlBom8Ig=="],
 
     "arg": ["arg@5.0.2", "", {}, "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="],
@@ -1031,6 +1038,10 @@
 
     "fast-wrap-ansi": ["fast-wrap-ansi@0.2.0", "", { "dependencies": { "fast-string-width": "^3.0.2" } }, "sha512-rLV8JHxTyhVmFYhBJuMujcrHqOT2cnO5Zxj37qROj23CP39GXubJRBUFF0z8KFK77Uc0SukZUf7JZhsVEQ6n8w=="],
 
+    "fast-xml-builder": ["fast-xml-builder@1.3.0", "", { "dependencies": { "path-expression-matcher": "^1.6.2", "xml-naming": "^0.3.0" } }, "sha512-F74cZEdCvuw9P41GAC3rod4X04jjWGM1JPEv/GWSqFTWLsdyMSBMBMlm9Hk3GLBgLBbdBNY8yee0pQh2RBVESQ=="],
+
+    "fast-xml-parser": ["fast-xml-parser@5.10.1", "", { "dependencies": { "@nodable/entities": "^3.0.0", "fast-xml-builder": "^1.2.0", "is-unsafe": "^2.0.0", "path-expression-matcher": "^1.6.2", "strnum": "^2.4.1", "xml-naming": "^0.3.0" }, "bin": { "fxparser": "src/cli/cli.js" } }, "sha512-IEMIf7298kXuZSRFoGfMYrl7is8LpavODgbNz1cwIudv7KwVFnuU+UsMporfq6PD6aXSlawZlARiA3UywCTfMw=="],
+
     "fastq": ["fastq@1.20.1", "", { "dependencies": { "reusify": "^1.0.4" } }, "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw=="],
 
     "fault": ["fault@2.0.1", "", { "dependencies": { "format": "^0.2.0" } }, "sha512-WtySTkS4OKev5JtpHXnib4Gxiurzh5NCGvWrFaZ34m6JehfTUhKZvn9njTfw48t6JumVQOmrKqpmGcdwxnhqBQ=="],
@@ -1179,6 +1190,8 @@
 
     "is-plain-obj": ["is-plain-obj@4.1.0", "", {}, "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg=="],
 
+    "is-unsafe": ["is-unsafe@2.0.0", "", {}, "sha512-2LdV822R+wmI86unXA93WCFpL6g+av8ynWk0nrHyJqGop5VoocYsSLFgN8jrfalT6iGeLNM4KXuVSsULP53kEA=="],
+
     "is-wsl": ["is-wsl@3.1.1", "", { "dependencies": { "is-inside-container": "^1.0.0" } }, "sha512-e6rvdUCiQCAuumZslxRJWR/Doq4VpPR82kqclvcS0efgt430SlGIk05vdCN58+VrzgtIcfNODjozVielycD4Sw=="],
 
     "isexe": ["isexe@2.0.0", "", {}, "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="],
@@ -1485,6 +1498,8 @@
 
     "path-exists": ["path-exists@4.0.0", "", {}, "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="],
 
+    "path-expression-matcher": ["path-expression-matcher@1.6.2", "", {}, "sha512-enSlaiat05iasnzmgNxRj8reFdj3puY2QpNgP1aPIaVfT6nn9ICuPoFlKHk8EN22HcwewshO+mN2DGbkCEOtqQ=="],
+
     "path-key": ["path-key@3.1.1", "", {}, "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="],
 
     "path-scurry": ["path-scurry@2.0.2", "", { "dependencies": { "lru-cache": "^11.0.0", "minipass": "^7.1.2" } }, "sha512-3O/iVVsJAPsOnpwWIeD+d6z/7PmqApyQePUtCndjatj/9I5LylHvt5qluFaBT3I5h3r1ejfR056c+FCv+NnNXg=="],
@@ -1673,6 +1688,8 @@
 
     "strip-indent": ["strip-indent@4.1.1", "", {}, "sha512-SlyRoSkdh1dYP0PzclLE7r0M9sgbFKKMFXpFRUMNuKhQSbC6VQIGzq3E0qsfvGJaUFJPGv6Ws1NZ/haTAjfbMA=="],
 
+    "strnum": ["strnum@2.4.1", "", { "dependencies": { "anynum": "^1.0.1" } }, "sha512-M9eUSMT2dCB2cTNPG7UYj6KuK7RJR2SN2+yCV/fTW3xzTCS6EaGZ5pSMgDIjB7r8zSfTGk+dvvn9rTjpVS9Mwg=="],
+
     "style-to-js": ["style-to-js@1.1.21", "", { "dependencies": { "style-to-object": "1.0.14" } }, "sha512-RjQetxJrrUJLQPHbLku6U/ocGtzyjbJMP9lCNK7Ag0CNh690nSH8woqWH9u16nMjYBAok+i7JO1NP2pOy8IsPQ=="],
 
     "style-to-object": ["style-to-object@1.0.14", "", { "dependencies": { "inline-style-parser": "0.2.7" } }, "sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw=="],
@@ -1841,6 +1858,8 @@
 
     "xml-name-validator": ["xml-name-validator@4.0.0", "", {}, "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw=="],
 
+    "xml-naming": ["xml-naming@0.3.0", "", {}, "sha512-ghig2TBE/H11aOVgmahA3MhimvkBr6JIYknH/Dhdk10nXwdbIqBJsbfMxpvFPG8bAw77gN29aQWvKpmVoPlvPQ=="],
+
     "xxhash-wasm": ["xxhash-wasm@1.1.0", "", {}, "sha512-147y/6YNh+tlp6nd/2pWq38i9h6mz/EuQ6njIrmW8D1BS5nCqs0P6DG+m6zTGnNz5I+uhZ0SHxBs9BsPrwcKDA=="],
 
     "y18n": ["y18n@5.0.8", "", {}, "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA=="],
diff --git a/package.json b/package.json
index d211c5d..5955658 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
   "dependencies": {
     "@astrojs/check": "^0.9.9",
     "@astrojs/mdx": "^7.0.0",
+    "@astrojs/rss": "^4.0.19",
     "@astrojs/sitemap": "^3.7.2",
     "@astrojs/vercel": "^11.0.0",
     "@iconify-json/fa6-brands": "^1.2.6",
diff --git a/src/content.config.ts b/src/content.config.ts
index f60e9a4..754f55e 100644
--- a/src/content.config.ts
+++ b/src/content.config.ts
@@ -11,6 +11,7 @@ const blogCollection = defineCollection({
     category: z.string(),
     tags: z.array(z.string()),
     featured: z.boolean().optional(),
+    series: z.string().optional(),
   }),
 });
 
diff --git a/src/content/blog/frontend-developer-roadmap-part-1/index.mdx b/src/content/blog/frontend-developer-roadmap-part-1/index.mdx
index 7fb7583..1ac4eb7 100644
--- a/src/content/blog/frontend-developer-roadmap-part-1/index.mdx
+++ b/src/content/blog/frontend-developer-roadmap-part-1/index.mdx
@@ -6,6 +6,7 @@ heroImage: './frontend-roadmap-part-1-cover.png'
 category: 'Frontend Frameworks' 
 tags: ['React.js', 'JavaScript', 'Web Development'] 
 featured: false
+series: 'Frontend Developer Roadmap'
 ---
 
 # Frontend Developer Roadmap (Part 1): React.js
diff --git a/src/content/blog/frontend-developer-roadmap-part-2/index.mdx b/src/content/blog/frontend-developer-roadmap-part-2/index.mdx
index 8730a69..926f760 100644
--- a/src/content/blog/frontend-developer-roadmap-part-2/index.mdx
+++ b/src/content/blog/frontend-developer-roadmap-part-2/index.mdx
@@ -6,6 +6,7 @@ heroImage: './frontend-roadmap-part-2-cover.png'
 category: 'Frontend Frameworks' 
 tags: ['Vue.js', 'JavaScript', 'Web Development'] 
 featured: false
+series: 'Frontend Developer Roadmap'
 ---
 
 # Frontend Developer Roadmap (Part 2): Vue.js
diff --git a/src/content/blog/haskell-ep1/index.mdx b/src/content/blog/haskell-ep1/index.mdx
index fb1430d..0a58e37 100644
--- a/src/content/blog/haskell-ep1/index.mdx
+++ b/src/content/blog/haskell-ep1/index.mdx
@@ -6,6 +6,7 @@ heroImage: './haskell-ep1-cover.png'
 category: 'Programming Languages'
 tags: ['Haskell', 'Functional Programming', 'Beginner'] 
 featured: true
+series: 'Haskell'
 ---
 
 <InfoBox title="ที่มาและเครดิต" type="info">
diff --git a/src/content/blog/haskell-ep2/index.mdx b/src/content/blog/haskell-ep2/index.mdx
index 5ec3cde..ef76cee 100644
--- a/src/content/blog/haskell-ep2/index.mdx
+++ b/src/content/blog/haskell-ep2/index.mdx
@@ -6,6 +6,7 @@ heroImage: "./haskell-ep2-cover.png"
 category: "Programming Languages"
 tags: ["Haskell", "Functional Programming", "GHCi", "Beginner"]
 featured: false
+series: "Haskell"
 ---
 
 ## Ready, set, go!
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index eeb6978..c332444 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -25,6 +25,7 @@ const currentYear = new Date().getFullYear();
     <link rel="manifest" href="/site.webmanifest" />
     <meta name="theme-color" content="#E5E7E0" />
     <title>{`${title} | rxdevman`}</title>
+    <link rel="alternate" type="application/rss+xml" title="rxdevman" href="/rss.xml" />
     <script is:inline>
       (function () {
         const stored = localStorage.getItem('theme');
diff --git a/src/pages/blog/categories/index.astro b/src/pages/blog/categories/index.astro
new file mode 100644
index 0000000..e4cf690
--- /dev/null
+++ b/src/pages/blog/categories/index.astro
@@ -0,0 +1,92 @@
+---
+import { getCollection } from 'astro:content';
+
+import BaseLayout from '@/layouts/BaseLayout.astro';
+import { slugify } from '@/utils/slugify';
+
+const allPosts = await getCollection('blog');
+
+type CategoryInfo = { name: string; count: number };
+const categoryMap = new Map<string, number>();
+
+for (const post of allPosts) {
+  categoryMap.set(post.data.category, (categoryMap.get(post.data.category) ?? 0) + 1);
+}
+
+const categories: CategoryInfo[] = Array.from(categoryMap.entries())
+  .map(([name, count]) => ({ name, count }))
+  .sort((a, b) => b.count - a.count || a.name.localeCompare(b.name));
+---
+
+<BaseLayout title="Categories">
+  <div class="container">
+
+    <div class="page-header">
+      <p class="filter-label">Browse</p>
+      <h1>Categories</h1>
+      <p class="filter-subtitle">
+        {categories.length} categories across {allPosts.length} articles.
+      </p>
+    </div>
+
+    <div class="category-grid">
+      {categories.map(category => (
+        <a href={`/blog/categories/${slugify(category.name)}`} class="category-card">
+          <h2 class="category-name">{category.name}</h2>
+          <span class="category-count">
+            {category.count} article{category.count !== 1 ? 's' : ''}
+          </span>
+        </a>
+      ))}
+    </div>
+
+  </div>
+</BaseLayout>
+
+<style>
+  .page-header {
+    text-align: center;
+    margin-bottom: var(--space-12);
+    max-width: 700px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  .page-header h1 { margin-bottom: var(--space-2); }
+
+  .category-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+    gap: var(--space-4);
+    max-width: 900px;
+    margin: 0 auto;
+  }
+
+  .category-card {
+    background: var(--surface-card);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-lg);
+    padding: var(--space-6);
+    text-decoration: none;
+    transition: box-shadow var(--duration-200) var(--ease),
+      border-color var(--duration-200) var(--ease),
+      transform var(--duration-200) var(--ease);
+  }
+
+  .category-card:hover {
+    box-shadow: var(--shadow-lg);
+    border-color: var(--brand-btn-border);
+    transform: translateY(-2px);
+  }
+
+  .category-name {
+    font-size: var(--text-base);
+    color: var(--text-heading);
+    margin-bottom: var(--space-2);
+  }
+
+  .category-count {
+    font-family: var(--font-mono);
+    font-size: var(--text-xs);
+    color: var(--text-muted);
+  }
+</style>
diff --git a/src/pages/blog/series/[series].astro b/src/pages/blog/series/[series].astro
new file mode 100644
index 0000000..a993694
--- /dev/null
+++ b/src/pages/blog/series/[series].astro
@@ -0,0 +1,113 @@
+---
+import { getCollection } from 'astro:content';
+
+import BlogPostCard from '@/components/blog/BlogPostCard.astro';
+import BaseLayout from '@/layouts/BaseLayout.astro';
+import { getSeriesNav, groupPostsBySeries } from '@/utils/series';
+import { getEntrySlug, slugify } from '@/utils/slugify';
+
+export async function getStaticPaths() {
+  const allPosts = await getCollection('blog');
+  const seriesGroups = groupPostsBySeries(allPosts);
+
+  return seriesGroups.map(group => ({
+    params: { series: slugify(group.name) },
+    props: { name: group.name, posts: group.posts },
+  }));
+}
+
+const { name, posts } = Astro.props;
+const currentSlug = Astro.params.series;
+const { prev, next } = getSeriesNav(posts, currentSlug);
+---
+
+<BaseLayout title={`Series: ${name}`}>
+  <div class="container">
+
+    <div class="page-header">
+      <p class="filter-label">Series</p>
+      <h1>{name}</h1>
+      <p class="filter-subtitle">
+        {posts.length} article{posts.length !== 1 ? 's' : ''} in this series, read in order.
+      </p>
+    </div>
+
+    <div class="post-grid">
+      {posts.map(post => <BlogPostCard post={post} />)}
+    </div>
+
+    {(prev || next) && (
+      <nav class="series-nav">
+        {prev && (
+          <a href={`/blog/${getEntrySlug(prev.id)}`} class="series-nav-link series-nav-prev">
+            <span class="series-nav-label">← Previous</span>
+            <span class="series-nav-title">{prev.data.title}</span>
+          </a>
+        )}
+        <div class="series-nav-spacer" />
+        {next && (
+          <a href={`/blog/${getEntrySlug(next.id)}`} class="series-nav-link series-nav-next">
+            <span class="series-nav-label">Next →</span>
+            <span class="series-nav-title">{next.data.title}</span>
+          </a>
+        )}
+      </nav>
+    )}
+
+  </div>
+</BaseLayout>
+
+<style>
+  .page-header {
+    text-align: center;
+    margin-bottom: var(--space-12);
+    max-width: 700px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  .page-header h1 { margin-bottom: var(--space-2); }
+
+  .series-nav {
+    display: flex;
+    justify-content: space-between;
+    gap: var(--space-4);
+    margin-top: var(--space-12);
+    padding-top: var(--space-8);
+    border-top: 1px solid var(--border-default);
+  }
+
+  .series-nav-spacer { flex: 1; }
+
+  .series-nav-link {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    text-decoration: none;
+    max-width: 45%;
+    transition: color var(--duration-150) var(--ease);
+  }
+
+  .series-nav-next {
+    text-align: right;
+    margin-left: auto;
+  }
+
+  .series-nav-label {
+    font-family: var(--font-mono);
+    font-size: var(--text-xs);
+    color: var(--brand-red);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    font-weight: 600;
+  }
+
+  .series-nav-title {
+    font-size: var(--text-sm);
+    color: var(--text-secondary);
+    font-weight: 500;
+  }
+
+  .series-nav-link:hover .series-nav-title {
+    color: var(--text-heading);
+  }
+</style>
diff --git a/src/pages/blog/series/index.astro b/src/pages/blog/series/index.astro
new file mode 100644
index 0000000..3a0f093
--- /dev/null
+++ b/src/pages/blog/series/index.astro
@@ -0,0 +1,134 @@
+---
+import { getCollection } from 'astro:content';
+
+import BaseLayout from '@/layouts/BaseLayout.astro';
+import { groupPostsBySeries } from '@/utils/series';
+import { slugify } from '@/utils/slugify';
+
+const allPosts = await getCollection('blog');
+const seriesGroups = groupPostsBySeries(allPosts);
+---
+
+<BaseLayout title="Series">
+  <div class="container">
+
+    <div class="page-header">
+      <p class="filter-label">Content</p>
+      <h1>Series</h1>
+      <p class="filter-subtitle">
+        Multi-part articles grouped into learning paths.
+      </p>
+    </div>
+
+    <div class="series-list">
+      {seriesGroups.map(group => (
+        <a href={`/blog/series/${slugify(group.name)}`} class="series-card">
+          <h2 class="series-name">{group.name}</h2>
+          <p class="series-count">
+            {group.posts.length} article{group.posts.length !== 1 ? 's' : ''}
+          </p>
+          <ol class="series-posts">
+            {group.posts.map(post => (
+              <li>
+                <span class="series-post-title">{post.data.title}</span>
+                <time class="series-post-date">
+                  {post.data.pubDate.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })}
+                </time>
+              </li>
+            ))}
+          </ol>
+        </a>
+      ))}
+    </div>
+
+  </div>
+</BaseLayout>
+
+<style>
+  .page-header {
+    text-align: center;
+    margin-bottom: var(--space-12);
+    max-width: 700px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  .page-header h1 { margin-bottom: var(--space-2); }
+
+  .series-list {
+    display: grid;
+    gap: var(--space-6);
+    max-width: 700px;
+    margin: 0 auto;
+  }
+
+  .series-card {
+    background: var(--surface-card);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-lg);
+    padding: var(--space-6);
+    text-decoration: none;
+    transition: box-shadow var(--duration-200) var(--ease),
+      border-color var(--duration-200) var(--ease),
+      transform var(--duration-200) var(--ease);
+  }
+
+  .series-card:hover {
+    box-shadow: var(--shadow-lg);
+    border-color: var(--brand-btn-border);
+    transform: translateY(-2px);
+  }
+
+  .series-name {
+    font-size: var(--text-lg);
+    color: var(--text-heading);
+    margin-bottom: var(--space-1);
+  }
+
+  .series-count {
+    font-size: var(--text-sm);
+    color: var(--text-muted);
+    margin-bottom: var(--space-4);
+  }
+
+  .series-posts {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    counter-reset: series-counter;
+  }
+
+  .series-posts li {
+    counter-increment: series-counter;
+    display: flex;
+    align-items: baseline;
+    gap: var(--space-3);
+    padding: var(--space-2) 0;
+    border-bottom: 1px solid var(--border-default);
+    color: var(--text-secondary);
+    font-size: var(--text-sm);
+  }
+
+  .series-posts li:last-child {
+    border-bottom: none;
+  }
+
+  .series-posts li::before {
+    content: counter(series-counter) ".";
+    font-family: var(--font-mono);
+    font-size: var(--text-xs);
+    color: var(--text-muted);
+    min-width: 1.5rem;
+    flex-shrink: 0;
+  }
+
+  .series-post-title {
+    flex: 1;
+  }
+
+  .series-post-date {
+    font-family: var(--font-mono);
+    font-size: var(--text-xs);
+    color: var(--text-muted);
+    white-space: nowrap;
+  }
+</style>
diff --git a/src/pages/blog/tags/index.astro b/src/pages/blog/tags/index.astro
new file mode 100644
index 0000000..2f31652
--- /dev/null
+++ b/src/pages/blog/tags/index.astro
@@ -0,0 +1,99 @@
+---
+import { getCollection } from 'astro:content';
+
+import BaseLayout from '@/layouts/BaseLayout.astro';
+import { slugify } from '@/utils/slugify';
+
+const allPosts = await getCollection('blog');
+
+type TagInfo = { name: string; count: number };
+const tagMap = new Map<string, number>();
+
+for (const post of allPosts) {
+  for (const tag of post.data.tags) {
+    tagMap.set(tag, (tagMap.get(tag) ?? 0) + 1);
+  }
+}
+
+const tags: TagInfo[] = Array.from(tagMap.entries())
+  .map(([name, count]) => ({ name, count }))
+  .sort((a, b) => b.count - a.count || a.name.localeCompare(b.name));
+---
+
+<BaseLayout title="Tags">
+  <div class="container">
+
+    <div class="page-header">
+      <p class="filter-label">Browse</p>
+      <h1>Tags</h1>
+      <p class="filter-subtitle">
+        {tags.length} tags across {allPosts.length} articles.
+      </p>
+    </div>
+
+    <div class="tag-cloud">
+      {tags.map(tag => (
+        <a href={`/blog/tags/${slugify(tag.name)}`} class="tag-item">
+          <span class="tag-name">#{tag.name}</span>
+          <span class="tag-count">{tag.count}</span>
+        </a>
+      ))}
+    </div>
+
+  </div>
+</BaseLayout>
+
+<style>
+  .page-header {
+    text-align: center;
+    margin-bottom: var(--space-12);
+    max-width: 700px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  .page-header h1 { margin-bottom: var(--space-2); }
+
+  .tag-cloud {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-3);
+    justify-content: center;
+    max-width: 800px;
+    margin: 0 auto;
+  }
+
+  .tag-item {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-2) var(--space-4);
+    background: var(--surface-card);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-full);
+    text-decoration: none;
+    font-size: var(--text-sm);
+    transition: border-color var(--duration-150) var(--ease),
+      transform var(--duration-150) var(--ease),
+      box-shadow var(--duration-150) var(--ease);
+  }
+
+  .tag-item:hover {
+    border-color: var(--brand-orange);
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-sm);
+  }
+
+  .tag-name {
+    color: var(--text-primary);
+    font-weight: 500;
+  }
+
+  .tag-count {
+    font-family: var(--font-mono);
+    font-size: var(--text-xs);
+    color: var(--text-muted);
+    background: var(--surface-accent);
+    padding: 0.1em 0.45em;
+    border-radius: var(--radius-full);
+  }
+</style>
diff --git a/src/pages/rss.xml.ts b/src/pages/rss.xml.ts
new file mode 100644
index 0000000..624fe1a
--- /dev/null
+++ b/src/pages/rss.xml.ts
@@ -0,0 +1,27 @@
+import type { APIContext } from 'astro';
+
+import rss from '@astrojs/rss';
+import { getCollection } from 'astro:content';
+
+export async function GET(context: APIContext) {
+  const posts = await getCollection('blog');
+
+  const sorted = posts
+    .sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf())
+    .map(post => ({
+      title: post.data.title,
+      pubDate: post.data.pubDate,
+      description: post.data.description,
+      link: `/blog/${post.id.replace(/\/index\.(md|mdx)$/, '').replace(/\.(md|mdx)$/, '')}/`,
+      categories: [post.data.category],
+      tags: post.data.tags,
+    }));
+
+  return rss({
+    title: 'rxdevman',
+    description: 'A developer\'s living knowledge base, curated by a pharmacist turned programmer.',
+    site: context.site!,
+    items: sorted,
+    customData: '<language>en</language>',
+  });
+}
diff --git a/src/utils/series.ts b/src/utils/series.ts
new file mode 100644
index 0000000..ef05664
--- /dev/null
+++ b/src/utils/series.ts
@@ -0,0 +1,58 @@
+import type { CollectionEntry } from 'astro:content';
+
+import { getEntrySlug } from '@/utils/slugify';
+
+export type SeriesGroup = {
+  name: string;
+  posts: CollectionEntry<'blog'>[];
+};
+
+/**
+ * Group blog posts by their series field.
+ * Posts without a series are excluded.
+ */
+export function groupPostsBySeries(
+  posts: CollectionEntry<'blog'>[],
+): SeriesGroup[] {
+  const seriesMap = new Map<string, CollectionEntry<'blog'>[]>();
+
+  for (const post of posts) {
+    const series = post.data.series;
+    if (!series)
+      continue;
+
+    const existing = seriesMap.get(series) ?? [];
+    existing.push(post);
+    seriesMap.set(series, existing);
+  }
+
+  return Array.from(seriesMap.entries())
+    .map(([name, seriesPosts]) => ({
+      name,
+      posts: seriesPosts.sort(
+        (a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf(),
+      ),
+    }))
+    .sort((a, b) => a.name.localeCompare(b.name));
+}
+
+/**
+ * Get the previous and next post in a series.
+ */
+export function getSeriesNav(
+  posts: CollectionEntry<'blog'>[],
+  currentSlug: string,
+): { prev: CollectionEntry<'blog'> | null; next: CollectionEntry<'blog'> | null } {
+  const sorted = posts.sort(
+    (a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf(),
+  );
+  const idx = sorted.findIndex(p => getEntrySlug(p.id) === currentSlug);
+
+  if (idx === -1)
+    return { prev: null, next: null };
+
+  return {
+    prev: idx > 0 ? sorted[idx - 1] : null,
+    next: idx < sorted.length - 1 ? sorted[idx + 1] : null,
+  };
+}

From fe27af498e8eada288001e3041f0832793e3cada Mon Sep 17 00:00:00 2001
From: Suradet Pratomsak <pharmacistsabot@gmail.com>
Date: Sun, 2 Aug 2026 20:12:49 +0700
Subject: [PATCH 2/4] docs: mark Phase 4 items complete in ROADMAP

---
 docs/ROADMAP.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/ROADMAP.md b/docs/ROADMAP.md
index f056513..3f3d344 100644
--- a/docs/ROADMAP.md
+++ b/docs/ROADMAP.md
@@ -180,29 +180,29 @@ works; user preference persists; code blocks look correct in all themes.
 
 ---
 
-## Phase 4: Content Discovery & Organization
+## Phase 4: Content Discovery & Organization ✅
 
 Deepen exactly the content loop RxDev Man already has — write, organize,
 discover — without adding a second product.
 
-- [ ] **RSS feed** — Astro has `@astrojs/rss` integration. Generate `/rss.xml`
+- [x] **RSS feed** — Astro has `@astrojs/rss` integration. Generate `/rss.xml`
       from all published blog posts. Include full content or summary, categories,
       tags, publication date. Auto-discoverable via `<link rel="alternate">` in
       the `<head>`.
-- [ ] **Series/Collections** — a frontmatter field `series` (string) that
+- [x] **Series/Collections** — a frontmatter field `series` (string) that
       groups related posts. A `/blog/series/[series]` page that lists posts in
       order. The series name appears on the blog post card and at the top of the
       post with navigation (previous/next in series). Natural groupings: "Rust
       from Scratch", "HOSxP Development", "Git Mastery".
-- [ ] **Reading time on blog cards** — already calculated in `src/utils/reading-time.ts`,
+- [x] **Reading time on blog cards** — already calculated in `src/utils/reading-time.ts`,
       but verify it's displayed on BlogPostCard. If not, add it.
 - [ ] **"Recently Published" section on homepage** — the homepage already has
       a hero. Add a section below showing the 3 most recent posts with
       BlogPostCard, giving returning visitors an immediate entry point.
-- [ ] **Category page improvements** — the `/blog/categories/[category]` page
+- [x] **Category page improvements** — the `/blog/categories/[category]` page
       exists but may need a better layout: category description, post count, sorted
       by date.
-- [ ] **Tag cloud / tag index** — a `/blog/tags` page that lists all tags with
+- [x] **Tag cloud / tag index** — a `/blog/tags` page that lists all tags with
       post counts, linking to `/blog/tags/[tag]`. Helps readers discover content
       breadth.
 

From c65fb52722c6ecc72148a4028614c1e882ae250d Mon Sep 17 00:00:00 2001
From: Suradet Pratomsak <pharmacistsabot@gmail.com>
Date: Sun, 2 Aug 2026 20:19:48 +0700
Subject: [PATCH 3/4] feat: add blog navigation tabs to all blog pages

- Add pill-style tab bar (All / Series / Categories / Tags) to blog index
- Add same nav to series, categories, tags index pages
- Add same nav to individual [category] and [tag] pages
- Active tab highlighted with card background and shadow
---
 src/pages/blog/categories/[category].astro | 61 ++++++++++++++++++----
 src/pages/blog/categories/index.astro      | 40 ++++++++++++++
 src/pages/blog/index.astro                 | 42 +++++++++++++++
 src/pages/blog/series/index.astro          | 40 ++++++++++++++
 src/pages/blog/tags/[tag].astro            | 61 ++++++++++++++++++----
 src/pages/blog/tags/index.astro            | 40 ++++++++++++++
 6 files changed, 264 insertions(+), 20 deletions(-)

diff --git a/src/pages/blog/categories/[category].astro b/src/pages/blog/categories/[category].astro
index 42530fd..49f8e73 100644
--- a/src/pages/blog/categories/[category].astro
+++ b/src/pages/blog/categories/[category].astro
@@ -23,25 +23,66 @@ export async function getStaticPaths() {
 const { posts, displayName } = Astro.props;
 ---
 <BaseLayout title={`Posts in category: ${displayName}`}>
-  <div class="page-header">
-    <p class="filter-label">Category</p>
-    <h1>{displayName}</h1>
-    <p class="filter-subtitle">
-      Found {posts.length} article{posts.length !== 1 ? 's' : ''} on this topic.
-    </p>
-  </div>
-  <div class="post-grid">
-    {posts.map(post => <BlogPostCard post={post} />)}
+  <div class="container">
+    <div class="page-header">
+      <p class="filter-label">Category</p>
+      <h1>{displayName}</h1>
+      <p class="filter-subtitle">
+        Found {posts.length} article{posts.length !== 1 ? 's' : ''} on this topic.
+      </p>
+    </div>
+    <nav class="blog-nav" aria-label="Blog navigation">
+      <a href="/blog" class="blog-nav-link">All</a>
+      <a href="/blog/series" class="blog-nav-link">Series</a>
+      <a href="/blog/categories" class="blog-nav-link active">Categories</a>
+      <a href="/blog/tags" class="blog-nav-link">Tags</a>
+    </nav>
+    <div class="post-grid">
+      {posts.map(post => <BlogPostCard post={post} />)}
+    </div>
   </div>
 </BaseLayout>
 
 <style>
   .page-header {
     text-align: center;
-    margin-bottom: var(--space-12);
+    margin-bottom: var(--space-6);
     max-width: 700px;
     margin-left: auto;
     margin-right: auto;
   }
   .page-header h1 { margin-bottom: var(--space-2); }
+
+  .blog-nav {
+    display: flex;
+    justify-content: center;
+    gap: var(--space-1);
+    margin-bottom: var(--space-8);
+    padding: var(--space-1);
+    background: var(--surface-accent);
+    border-radius: var(--radius-full);
+    width: fit-content;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .blog-nav-link {
+    font-family: var(--font-mono);
+    font-size: var(--text-xs);
+    font-weight: 600;
+    color: var(--text-muted);
+    text-decoration: none;
+    padding: var(--space-2) var(--space-4);
+    border-radius: var(--radius-full);
+    transition: color var(--duration-150) var(--ease),
+      background var(--duration-150) var(--ease);
+  }
+
+  .blog-nav-link:hover { color: var(--text-primary); }
+
+  .blog-nav-link.active {
+    color: var(--text-heading);
+    background: var(--surface-card);
+    box-shadow: var(--shadow-sm);
+  }
 </style>
diff --git a/src/pages/blog/categories/index.astro b/src/pages/blog/categories/index.astro
index e4cf690..07a5779 100644
--- a/src/pages/blog/categories/index.astro
+++ b/src/pages/blog/categories/index.astro
@@ -29,6 +29,13 @@ const categories: CategoryInfo[] = Array.from(categoryMap.entries())
       </p>
     </div>
 
+    <nav class="blog-nav" aria-label="Blog navigation">
+      <a href="/blog" class="blog-nav-link">All</a>
+      <a href="/blog/series" class="blog-nav-link">Series</a>
+      <a href="/blog/categories" class="blog-nav-link active">Categories</a>
+      <a href="/blog/tags" class="blog-nav-link">Tags</a>
+    </nav>
+
     <div class="category-grid">
       {categories.map(category => (
         <a href={`/blog/categories/${slugify(category.name)}`} class="category-card">
@@ -53,6 +60,39 @@ const categories: CategoryInfo[] = Array.from(categoryMap.entries())
   }
   .page-header h1 { margin-bottom: var(--space-2); }
 
+  .blog-nav {
+    display: flex;
+    justify-content: center;
+    gap: var(--space-1);
+    margin-bottom: var(--space-8);
+    padding: var(--space-1);
+    background: var(--surface-accent);
+    border-radius: var(--radius-full);
+    width: fit-content;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .blog-nav-link {
+    font-family: var(--font-mono);
+    font-size: var(--text-xs);
+    font-weight: 600;
+    color: var(--text-muted);
+    text-decoration: none;
+    padding: var(--space-2) var(--space-4);
+    border-radius: var(--radius-full);
+    transition: color var(--duration-150) var(--ease),
+      background var(--duration-150) var(--ease);
+  }
+
+  .blog-nav-link:hover { color: var(--text-primary); }
+
+  .blog-nav-link.active {
+    color: var(--text-heading);
+    background: var(--surface-card);
+    box-shadow: var(--shadow-sm);
+  }
+
   .category-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index a91f883..0f29f11 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -25,6 +25,13 @@ const sortedPosts = allPosts.sort(
       </p>
     </div>
 
+    <nav class="blog-nav" aria-label="Blog navigation">
+      <a href="/blog" class="blog-nav-link active">All</a>
+      <a href="/blog/series" class="blog-nav-link">Series</a>
+      <a href="/blog/categories" class="blog-nav-link">Categories</a>
+      <a href="/blog/tags" class="blog-nav-link">Tags</a>
+    </nav>
+
     <div class="post-grid">
       {sortedPosts.map((post: CollectionEntry<'blog'>) => (
         <BlogPostCard post={post} />
@@ -38,4 +45,39 @@ const sortedPosts = allPosts.sort(
   .blog-header { text-align: center; margin: 0 auto; padding-bottom: var(--space-2); }
   .blog-header h1 { font-size: clamp(1.35rem, 2.5vw, 1.75rem); margin-bottom: var(--space-2); }
   .blog-header p { font-size: var(--text-base); color: var(--text-secondary); }
+
+  .blog-nav {
+    display: flex;
+    justify-content: center;
+    gap: var(--space-1);
+    margin-bottom: var(--space-8);
+    padding: var(--space-1);
+    background: var(--surface-accent);
+    border-radius: var(--radius-full);
+    width: fit-content;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .blog-nav-link {
+    font-family: var(--font-mono);
+    font-size: var(--text-xs);
+    font-weight: 600;
+    color: var(--text-muted);
+    text-decoration: none;
+    padding: var(--space-2) var(--space-4);
+    border-radius: var(--radius-full);
+    transition: color var(--duration-150) var(--ease),
+      background var(--duration-150) var(--ease);
+  }
+
+  .blog-nav-link:hover {
+    color: var(--text-primary);
+  }
+
+  .blog-nav-link.active {
+    color: var(--text-heading);
+    background: var(--surface-card);
+    box-shadow: var(--shadow-sm);
+  }
 </style>
diff --git a/src/pages/blog/series/index.astro b/src/pages/blog/series/index.astro
index 3a0f093..8c48834 100644
--- a/src/pages/blog/series/index.astro
+++ b/src/pages/blog/series/index.astro
@@ -20,6 +20,13 @@ const seriesGroups = groupPostsBySeries(allPosts);
       </p>
     </div>
 
+    <nav class="blog-nav" aria-label="Blog navigation">
+      <a href="/blog" class="blog-nav-link">All</a>
+      <a href="/blog/series" class="blog-nav-link active">Series</a>
+      <a href="/blog/categories" class="blog-nav-link">Categories</a>
+      <a href="/blog/tags" class="blog-nav-link">Tags</a>
+    </nav>
+
     <div class="series-list">
       {seriesGroups.map(group => (
         <a href={`/blog/series/${slugify(group.name)}`} class="series-card">
@@ -54,6 +61,39 @@ const seriesGroups = groupPostsBySeries(allPosts);
   }
   .page-header h1 { margin-bottom: var(--space-2); }
 
+  .blog-nav {
+    display: flex;
+    justify-content: center;
+    gap: var(--space-1);
+    margin-bottom: var(--space-8);
+    padding: var(--space-1);
+    background: var(--surface-accent);
+    border-radius: var(--radius-full);
+    width: fit-content;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .blog-nav-link {
+    font-family: var(--font-mono);
+    font-size: var(--text-xs);
+    font-weight: 600;
+    color: var(--text-muted);
+    text-decoration: none;
+    padding: var(--space-2) var(--space-4);
+    border-radius: var(--radius-full);
+    transition: color var(--duration-150) var(--ease),
+      background var(--duration-150) var(--ease);
+  }
+
+  .blog-nav-link:hover { color: var(--text-primary); }
+
+  .blog-nav-link.active {
+    color: var(--text-heading);
+    background: var(--surface-card);
+    box-shadow: var(--shadow-sm);
+  }
+
   .series-list {
     display: grid;
     gap: var(--space-6);
diff --git a/src/pages/blog/tags/[tag].astro b/src/pages/blog/tags/[tag].astro
index e2ffac6..705b96b 100644
--- a/src/pages/blog/tags/[tag].astro
+++ b/src/pages/blog/tags/[tag].astro
@@ -25,25 +25,66 @@ export async function getStaticPaths() {
 const { posts, displayName } = Astro.props;
 ---
 <BaseLayout title={`Posts tagged with: ${displayName}`}>
-  <div class="page-header">
-    <p class="filter-label">Tag</p>
-    <h1>#{displayName}</h1>
-    <p class="filter-subtitle">
-      Found {posts.length} article{posts.length !== 1 ? 's' : ''} with this tag.
-    </p>
-  </div>
-  <div class="post-grid">
-    {posts.map(post => <BlogPostCard post={post} />)}
+  <div class="container">
+    <div class="page-header">
+      <p class="filter-label">Tag</p>
+      <h1>#{displayName}</h1>
+      <p class="filter-subtitle">
+        Found {posts.length} article{posts.length !== 1 ? 's' : ''} with this tag.
+      </p>
+    </div>
+    <nav class="blog-nav" aria-label="Blog navigation">
+      <a href="/blog" class="blog-nav-link">All</a>
+      <a href="/blog/series" class="blog-nav-link">Series</a>
+      <a href="/blog/categories" class="blog-nav-link">Categories</a>
+      <a href="/blog/tags" class="blog-nav-link active">Tags</a>
+    </nav>
+    <div class="post-grid">
+      {posts.map(post => <BlogPostCard post={post} />)}
+    </div>
   </div>
 </BaseLayout>
 
 <style>
   .page-header {
     text-align: center;
-    margin-bottom: var(--space-12);
+    margin-bottom: var(--space-6);
     max-width: 700px;
     margin-left: auto;
     margin-right: auto;
   }
   .page-header h1 { margin-bottom: var(--space-2); }
+
+  .blog-nav {
+    display: flex;
+    justify-content: center;
+    gap: var(--space-1);
+    margin-bottom: var(--space-8);
+    padding: var(--space-1);
+    background: var(--surface-accent);
+    border-radius: var(--radius-full);
+    width: fit-content;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .blog-nav-link {
+    font-family: var(--font-mono);
+    font-size: var(--text-xs);
+    font-weight: 600;
+    color: var(--text-muted);
+    text-decoration: none;
+    padding: var(--space-2) var(--space-4);
+    border-radius: var(--radius-full);
+    transition: color var(--duration-150) var(--ease),
+      background var(--duration-150) var(--ease);
+  }
+
+  .blog-nav-link:hover { color: var(--text-primary); }
+
+  .blog-nav-link.active {
+    color: var(--text-heading);
+    background: var(--surface-card);
+    box-shadow: var(--shadow-sm);
+  }
 </style>
diff --git a/src/pages/blog/tags/index.astro b/src/pages/blog/tags/index.astro
index 2f31652..369cb0b 100644
--- a/src/pages/blog/tags/index.astro
+++ b/src/pages/blog/tags/index.astro
@@ -31,6 +31,13 @@ const tags: TagInfo[] = Array.from(tagMap.entries())
       </p>
     </div>
 
+    <nav class="blog-nav" aria-label="Blog navigation">
+      <a href="/blog" class="blog-nav-link">All</a>
+      <a href="/blog/series" class="blog-nav-link">Series</a>
+      <a href="/blog/categories" class="blog-nav-link">Categories</a>
+      <a href="/blog/tags" class="blog-nav-link active">Tags</a>
+    </nav>
+
     <div class="tag-cloud">
       {tags.map(tag => (
         <a href={`/blog/tags/${slugify(tag.name)}`} class="tag-item">
@@ -53,6 +60,39 @@ const tags: TagInfo[] = Array.from(tagMap.entries())
   }
   .page-header h1 { margin-bottom: var(--space-2); }
 
+  .blog-nav {
+    display: flex;
+    justify-content: center;
+    gap: var(--space-1);
+    margin-bottom: var(--space-8);
+    padding: var(--space-1);
+    background: var(--surface-accent);
+    border-radius: var(--radius-full);
+    width: fit-content;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .blog-nav-link {
+    font-family: var(--font-mono);
+    font-size: var(--text-xs);
+    font-weight: 600;
+    color: var(--text-muted);
+    text-decoration: none;
+    padding: var(--space-2) var(--space-4);
+    border-radius: var(--radius-full);
+    transition: color var(--duration-150) var(--ease),
+      background var(--duration-150) var(--ease);
+  }
+
+  .blog-nav-link:hover { color: var(--text-primary); }
+
+  .blog-nav-link.active {
+    color: var(--text-heading);
+    background: var(--surface-card);
+    box-shadow: var(--shadow-sm);
+  }
+
   .tag-cloud {
     display: flex;
     flex-wrap: wrap;

From a9d1b47660084a01c8d68b911d27d55687e93d2d Mon Sep 17 00:00:00 2001
From: Suradet Pratomsak <pharmacistsabot@gmail.com>
Date: Sun, 2 Aug 2026 20:37:14 +0700
Subject: [PATCH 4/4] fix: audit fixes for Phase 3 & 4 - dark mode bugs, series
 nav, blog-nav refactor

Phase 3 fixes:
- Fix var(--color-white) in Navbar active icon and hero avatar border for dark mode
- Fix ShareButtons to use data-theme selector instead of prefers-color-scheme
- Fix footer SVG hardcoded #F54E00 color to currentColor
- Add :focus-visible outline on theme toggle buttons
- Add aria-live region for theme change screen reader announcement
- Add .sr-only utility class for visually hidden content

Phase 4 fixes:
- Fix dead getSeriesNav code in [series].astro (was using series slug instead of post slug)
- Add series prev/next navigation to BlogPostLayout (articles within a series show prev/next links)
- Add BlogNav tab bar to /blog/series/[series].astro page
- Extract duplicated .blog-nav CSS (7 files) into shared BlogNav.astro component
---
 src/components/blog/BlogNav.astro          | 53 +++++++++++++++
 src/components/blog/ShareButtons.astro     |  2 +-
 src/components/layout/Navbar.astro         | 11 +++-
 src/layouts/BaseLayout.astro               |  4 +-
 src/layouts/BlogPostLayout.astro           | 75 ++++++++++++++++++++-
 src/pages/blog/categories/[category].astro | 47 +++----------
 src/pages/blog/categories/index.astro      | 47 +++----------
 src/pages/blog/index.astro                 | 49 +++-----------
 src/pages/blog/series/[series].astro       | 77 ++++------------------
 src/pages/blog/series/index.astro          | 47 +++----------
 src/pages/blog/tags/[tag].astro            | 47 +++----------
 src/pages/blog/tags/index.astro            | 47 +++----------
 src/styles/global.css                      | 16 ++++-
 13 files changed, 214 insertions(+), 308 deletions(-)
 create mode 100644 src/components/blog/BlogNav.astro

diff --git a/src/components/blog/BlogNav.astro b/src/components/blog/BlogNav.astro
new file mode 100644
index 0000000..911e7c2
--- /dev/null
+++ b/src/components/blog/BlogNav.astro
@@ -0,0 +1,53 @@
+---
+type NavItem = { href: string; label: string; active?: boolean };
+
+type Props = {
+  items: NavItem[];
+  label?: string;
+};
+
+const { items, label = 'Blog navigation' } = Astro.props;
+---
+
+<nav class="blog-nav" aria-label={label}>
+  {items.map(item => (
+    <a
+      href={item.href}
+      class:list={['blog-nav-link', { active: item.active }]}
+    >{item.label}</a>
+  ))}
+</nav>
+
+<style>
+  .blog-nav {
+    display: flex;
+    justify-content: center;
+    gap: var(--space-1);
+    margin-bottom: var(--space-8);
+    padding: var(--space-1);
+    background: var(--surface-accent);
+    border-radius: var(--radius-full);
+    width: fit-content;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .blog-nav-link {
+    font-family: var(--font-mono);
+    font-size: var(--text-xs);
+    font-weight: 600;
+    color: var(--text-muted);
+    text-decoration: none;
+    padding: var(--space-2) var(--space-4);
+    border-radius: var(--radius-full);
+    transition: color var(--duration-150) var(--ease),
+      background var(--duration-150) var(--ease);
+  }
+
+  .blog-nav-link:hover { color: var(--text-primary); }
+
+  .blog-nav-link.active {
+    color: var(--text-heading);
+    background: var(--surface-card);
+  }
+</style>
diff --git a/src/components/blog/ShareButtons.astro b/src/components/blog/ShareButtons.astro
index f52c2de..ef22f4f 100644
--- a/src/components/blog/ShareButtons.astro
+++ b/src/components/blog/ShareButtons.astro
@@ -427,7 +427,7 @@ const platforms = [
     }
   }
 
-  @media (prefers-color-scheme: dark) {
+  :global([data-theme='dark']) & {
     .share-tooltip {
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
     }
diff --git a/src/components/layout/Navbar.astro b/src/components/layout/Navbar.astro
index 833d6db..c05e5a8 100644
--- a/src/components/layout/Navbar.astro
+++ b/src/components/layout/Navbar.astro
@@ -51,6 +51,7 @@ function isActive(href: string) {
           <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" /><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
         </svg>
       </button>
+      <span id="theme-live" class="sr-only" aria-live="polite"></span>
       <button class="hamburger" id="hamburger" aria-label="Toggle navigation" aria-expanded="false" aria-controls="mobile-overlay">
         <span class="bar"></span>
         <span class="bar"></span>
@@ -141,6 +142,9 @@ function setTheme(theme: string) {
   localStorage.setItem('theme', theme);
   themeToggle?.setAttribute('aria-label', `Theme: ${theme}. Click to switch.`);
   mobileThemeToggle?.setAttribute('aria-label', `Theme: ${theme}. Click to switch.`);
+  const liveRegion = document.getElementById('theme-live');
+  if (liveRegion)
+    liveRegion.textContent = `Theme changed to ${theme}`;
 }
 
 function cycleTheme() {
@@ -554,7 +558,7 @@ if (navbar instanceof HTMLElement && hamburger instanceof HTMLButtonElement && o
   .mobile-link:hover .mobile-link-icon {
     color: var(--brand-red);
     border-color: var(--brand-red);
-    background: var(--color-white);
+    background: var(--surface-card);
   }
 
   .mobile-link.active .mobile-link-icon {
@@ -589,6 +593,11 @@ if (navbar instanceof HTMLElement && hamburger instanceof HTMLButtonElement && o
     color: var(--brand-red);
   }
 
+  .theme-toggle:focus-visible {
+    outline: 2px solid var(--brand-red);
+    outline-offset: 2px;
+  }
+
   .theme-icon { display: none; }
 
   :global([data-theme='dark']) .theme-icon--dark,
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index c332444..4eaaffb 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -72,8 +72,8 @@ const currentYear = new Date().getFullYear();
           <div class="footer-brand">
             <a href="/" class="footer-logo" aria-label="rxdevman home">
               <svg width="24" height="24" viewBox="0 0 200 200" aria-hidden="true">
-                <path d="M40 30 V170 M40 30 H110 C145 30 160 55 160 80 C160 110 140 125 110 125 H40 M110 125 L160 170" fill="none" stroke="#F54E00" stroke-width="18" stroke-linecap="round" stroke-linejoin="round" />
-                <path d="M85 65 L115 95 M115 65 L85 95" fill="none" stroke="#F54E00" stroke-width="15" stroke-linecap="round" />
+                <path d="M40 30 V170 M40 30 H110 C145 30 160 55 160 80 C160 110 140 125 110 125 H40 M110 125 L160 170" fill="none" stroke="currentColor" stroke-width="18" stroke-linecap="round" stroke-linejoin="round" />
+                <path d="M85 65 L115 95 M115 65 L85 95" fill="none" stroke="currentColor" stroke-width="15" stroke-linecap="round" />
               </svg>
               <span class="footer-logo-text">rxdevman</span>
             </a>
diff --git a/src/layouts/BlogPostLayout.astro b/src/layouts/BlogPostLayout.astro
index e00f9c2..d86c760 100644
--- a/src/layouts/BlogPostLayout.astro
+++ b/src/layouts/BlogPostLayout.astro
@@ -10,7 +10,8 @@ import Toc from '@/components/blog/Toc.astro';
 import ViewCounter from '@/components/blog/ViewCounter.astro';
 import { getAllBlogPosts } from '@/lib/blog';
 import { getRelatedPosts } from '@/utils/post-utils';
-import { slugify } from '@/utils/slugify';
+import { getSeriesNav, groupPostsBySeries } from '@/utils/series';
+import { getEntrySlug, slugify } from '@/utils/slugify';
 
 import BaseLayout from './BaseLayout.astro';
 
@@ -36,6 +37,16 @@ const postSlug = slug || slugify(title);
 const allPosts = await getAllBlogPosts();
 const relatedPosts = getRelatedPosts(allPosts, postSlug, tags, category, 3);
 
+// Compute series prev/next navigation
+const currentEntrySlug = getEntrySlug(postSlug);
+const seriesGroups = groupPostsBySeries(allPosts);
+const currentSeries = seriesGroups.find(g =>
+  g.posts.some(p => getEntrySlug(p.id) === currentEntrySlug),
+);
+const seriesNav = currentSeries
+  ? getSeriesNav(currentSeries.posts, currentEntrySlug)
+  : null;
+
 // Pre-generate the hero image URL for <link rel="preload"> to improve LCP
 const preloadHero = heroImage
   ? await getImage({ src: heroImage, width: 1200, quality: 85, format: 'webp' })
@@ -108,6 +119,24 @@ const preloadHero = heroImage
         </div>
       </footer>
 
+      {seriesNav && (seriesNav.prev || seriesNav.next) && (
+        <nav class="series-nav" aria-label={`Navigation within series: ${currentSeries?.name}`}>
+          {seriesNav.prev && (
+            <a href={`/blog/${getEntrySlug(seriesNav.prev.id)}`} class="series-nav-link series-nav-prev">
+              <span class="series-nav-label">← Previous in series</span>
+              <span class="series-nav-title">{seriesNav.prev.data.title}</span>
+            </a>
+          )}
+          <div class="series-nav-spacer" />
+          {seriesNav.next && (
+            <a href={`/blog/${getEntrySlug(seriesNav.next.id)}`} class="series-nav-link series-nav-next">
+              <span class="series-nav-label">Next in series →</span>
+              <span class="series-nav-title">{seriesNav.next.data.title}</span>
+            </a>
+          )}
+        </nav>
+      )}
+
       <RelatedPosts relatedPosts={relatedPosts} />
     </article>
   </div>
@@ -115,4 +144,48 @@ const preloadHero = heroImage
 
 <style>
   .post-header-category:hover { color: var(--brand-orange); }
+
+  .series-nav {
+    display: flex;
+    justify-content: space-between;
+    gap: var(--space-4);
+    margin-top: var(--space-8);
+    padding-top: var(--space-8);
+    border-top: 1px solid var(--border-default);
+  }
+
+  .series-nav-spacer { flex: 1; }
+
+  .series-nav-link {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    text-decoration: none;
+    max-width: 45%;
+    transition: color var(--duration-150) var(--ease);
+  }
+
+  .series-nav-next {
+    text-align: right;
+    margin-left: auto;
+  }
+
+  .series-nav-label {
+    font-family: var(--font-mono);
+    font-size: var(--text-xs);
+    color: var(--brand-red);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    font-weight: 600;
+  }
+
+  .series-nav-title {
+    font-size: var(--text-sm);
+    color: var(--text-secondary);
+    font-weight: 500;
+  }
+
+  .series-nav-link:hover .series-nav-title {
+    color: var(--text-heading);
+  }
 </style>
diff --git a/src/pages/blog/categories/[category].astro b/src/pages/blog/categories/[category].astro
index 49f8e73..87dace5 100644
--- a/src/pages/blog/categories/[category].astro
+++ b/src/pages/blog/categories/[category].astro
@@ -1,6 +1,7 @@
 ---
 import { getCollection } from 'astro:content';
 
+import BlogNav from '@/components/blog/BlogNav.astro';
 import BlogPostCard from '@/components/blog/BlogPostCard.astro';
 import BaseLayout from '@/layouts/BaseLayout.astro';
 import { slugify } from '@/utils/slugify';
@@ -31,12 +32,13 @@ const { posts, displayName } = Astro.props;
         Found {posts.length} article{posts.length !== 1 ? 's' : ''} on this topic.
       </p>
     </div>
-    <nav class="blog-nav" aria-label="Blog navigation">
-      <a href="/blog" class="blog-nav-link">All</a>
-      <a href="/blog/series" class="blog-nav-link">Series</a>
-      <a href="/blog/categories" class="blog-nav-link active">Categories</a>
-      <a href="/blog/tags" class="blog-nav-link">Tags</a>
-    </nav>
+    <BlogNav items={[
+      { href: '/blog', label: 'All' },
+      { href: '/blog/series', label: 'Series' },
+      { href: '/blog/categories', label: 'Categories', active: true },
+      { href: '/blog/tags', label: 'Tags' },
+    ]}
+    />
     <div class="post-grid">
       {posts.map(post => <BlogPostCard post={post} />)}
     </div>
@@ -52,37 +54,4 @@ const { posts, displayName } = Astro.props;
     margin-right: auto;
   }
   .page-header h1 { margin-bottom: var(--space-2); }
-
-  .blog-nav {
-    display: flex;
-    justify-content: center;
-    gap: var(--space-1);
-    margin-bottom: var(--space-8);
-    padding: var(--space-1);
-    background: var(--surface-accent);
-    border-radius: var(--radius-full);
-    width: fit-content;
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  .blog-nav-link {
-    font-family: var(--font-mono);
-    font-size: var(--text-xs);
-    font-weight: 600;
-    color: var(--text-muted);
-    text-decoration: none;
-    padding: var(--space-2) var(--space-4);
-    border-radius: var(--radius-full);
-    transition: color var(--duration-150) var(--ease),
-      background var(--duration-150) var(--ease);
-  }
-
-  .blog-nav-link:hover { color: var(--text-primary); }
-
-  .blog-nav-link.active {
-    color: var(--text-heading);
-    background: var(--surface-card);
-    box-shadow: var(--shadow-sm);
-  }
 </style>
diff --git a/src/pages/blog/categories/index.astro b/src/pages/blog/categories/index.astro
index 07a5779..15d444e 100644
--- a/src/pages/blog/categories/index.astro
+++ b/src/pages/blog/categories/index.astro
@@ -1,6 +1,7 @@
 ---
 import { getCollection } from 'astro:content';
 
+import BlogNav from '@/components/blog/BlogNav.astro';
 import BaseLayout from '@/layouts/BaseLayout.astro';
 import { slugify } from '@/utils/slugify';
 
@@ -29,12 +30,13 @@ const categories: CategoryInfo[] = Array.from(categoryMap.entries())
       </p>
     </div>
 
-    <nav class="blog-nav" aria-label="Blog navigation">
-      <a href="/blog" class="blog-nav-link">All</a>
-      <a href="/blog/series" class="blog-nav-link">Series</a>
-      <a href="/blog/categories" class="blog-nav-link active">Categories</a>
-      <a href="/blog/tags" class="blog-nav-link">Tags</a>
-    </nav>
+    <BlogNav items={[
+      { href: '/blog', label: 'All' },
+      { href: '/blog/series', label: 'Series' },
+      { href: '/blog/categories', label: 'Categories', active: true },
+      { href: '/blog/tags', label: 'Tags' },
+    ]}
+    />
 
     <div class="category-grid">
       {categories.map(category => (
@@ -60,39 +62,6 @@ const categories: CategoryInfo[] = Array.from(categoryMap.entries())
   }
   .page-header h1 { margin-bottom: var(--space-2); }
 
-  .blog-nav {
-    display: flex;
-    justify-content: center;
-    gap: var(--space-1);
-    margin-bottom: var(--space-8);
-    padding: var(--space-1);
-    background: var(--surface-accent);
-    border-radius: var(--radius-full);
-    width: fit-content;
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  .blog-nav-link {
-    font-family: var(--font-mono);
-    font-size: var(--text-xs);
-    font-weight: 600;
-    color: var(--text-muted);
-    text-decoration: none;
-    padding: var(--space-2) var(--space-4);
-    border-radius: var(--radius-full);
-    transition: color var(--duration-150) var(--ease),
-      background var(--duration-150) var(--ease);
-  }
-
-  .blog-nav-link:hover { color: var(--text-primary); }
-
-  .blog-nav-link.active {
-    color: var(--text-heading);
-    background: var(--surface-card);
-    box-shadow: var(--shadow-sm);
-  }
-
   .category-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index 0f29f11..0975ffb 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -3,6 +3,7 @@ import type { CollectionEntry } from 'astro:content';
 
 import { getCollection } from 'astro:content';
 
+import BlogNav from '@/components/blog/BlogNav.astro';
 import BlogPostCard from '@/components/blog/BlogPostCard.astro';
 import BaseLayout from '@/layouts/BaseLayout.astro';
 
@@ -25,12 +26,13 @@ const sortedPosts = allPosts.sort(
       </p>
     </div>
 
-    <nav class="blog-nav" aria-label="Blog navigation">
-      <a href="/blog" class="blog-nav-link active">All</a>
-      <a href="/blog/series" class="blog-nav-link">Series</a>
-      <a href="/blog/categories" class="blog-nav-link">Categories</a>
-      <a href="/blog/tags" class="blog-nav-link">Tags</a>
-    </nav>
+    <BlogNav items={[
+      { href: '/blog', label: 'All', active: true },
+      { href: '/blog/series', label: 'Series' },
+      { href: '/blog/categories', label: 'Categories' },
+      { href: '/blog/tags', label: 'Tags' },
+    ]}
+    />
 
     <div class="post-grid">
       {sortedPosts.map((post: CollectionEntry<'blog'>) => (
@@ -45,39 +47,4 @@ const sortedPosts = allPosts.sort(
   .blog-header { text-align: center; margin: 0 auto; padding-bottom: var(--space-2); }
   .blog-header h1 { font-size: clamp(1.35rem, 2.5vw, 1.75rem); margin-bottom: var(--space-2); }
   .blog-header p { font-size: var(--text-base); color: var(--text-secondary); }
-
-  .blog-nav {
-    display: flex;
-    justify-content: center;
-    gap: var(--space-1);
-    margin-bottom: var(--space-8);
-    padding: var(--space-1);
-    background: var(--surface-accent);
-    border-radius: var(--radius-full);
-    width: fit-content;
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  .blog-nav-link {
-    font-family: var(--font-mono);
-    font-size: var(--text-xs);
-    font-weight: 600;
-    color: var(--text-muted);
-    text-decoration: none;
-    padding: var(--space-2) var(--space-4);
-    border-radius: var(--radius-full);
-    transition: color var(--duration-150) var(--ease),
-      background var(--duration-150) var(--ease);
-  }
-
-  .blog-nav-link:hover {
-    color: var(--text-primary);
-  }
-
-  .blog-nav-link.active {
-    color: var(--text-heading);
-    background: var(--surface-card);
-    box-shadow: var(--shadow-sm);
-  }
 </style>
diff --git a/src/pages/blog/series/[series].astro b/src/pages/blog/series/[series].astro
index a993694..34beb4a 100644
--- a/src/pages/blog/series/[series].astro
+++ b/src/pages/blog/series/[series].astro
@@ -1,10 +1,11 @@
 ---
 import { getCollection } from 'astro:content';
 
+import BlogNav from '@/components/blog/BlogNav.astro';
 import BlogPostCard from '@/components/blog/BlogPostCard.astro';
 import BaseLayout from '@/layouts/BaseLayout.astro';
-import { getSeriesNav, groupPostsBySeries } from '@/utils/series';
-import { getEntrySlug, slugify } from '@/utils/slugify';
+import { groupPostsBySeries } from '@/utils/series';
+import { slugify } from '@/utils/slugify';
 
 export async function getStaticPaths() {
   const allPosts = await getCollection('blog');
@@ -17,13 +18,19 @@ export async function getStaticPaths() {
 }
 
 const { name, posts } = Astro.props;
-const currentSlug = Astro.params.series;
-const { prev, next } = getSeriesNav(posts, currentSlug);
 ---
 
 <BaseLayout title={`Series: ${name}`}>
   <div class="container">
 
+    <BlogNav items={[
+      { href: '/blog', label: 'All' },
+      { href: '/blog/series', label: 'Series', active: true },
+      { href: '/blog/categories', label: 'Categories' },
+      { href: '/blog/tags', label: 'Tags' },
+    ]}
+    />
+
     <div class="page-header">
       <p class="filter-label">Series</p>
       <h1>{name}</h1>
@@ -36,24 +43,6 @@ const { prev, next } = getSeriesNav(posts, currentSlug);
       {posts.map(post => <BlogPostCard post={post} />)}
     </div>
 
-    {(prev || next) && (
-      <nav class="series-nav">
-        {prev && (
-          <a href={`/blog/${getEntrySlug(prev.id)}`} class="series-nav-link series-nav-prev">
-            <span class="series-nav-label">← Previous</span>
-            <span class="series-nav-title">{prev.data.title}</span>
-          </a>
-        )}
-        <div class="series-nav-spacer" />
-        {next && (
-          <a href={`/blog/${getEntrySlug(next.id)}`} class="series-nav-link series-nav-next">
-            <span class="series-nav-label">Next →</span>
-            <span class="series-nav-title">{next.data.title}</span>
-          </a>
-        )}
-      </nav>
-    )}
-
   </div>
 </BaseLayout>
 
@@ -66,48 +55,4 @@ const { prev, next } = getSeriesNav(posts, currentSlug);
     margin-right: auto;
   }
   .page-header h1 { margin-bottom: var(--space-2); }
-
-  .series-nav {
-    display: flex;
-    justify-content: space-between;
-    gap: var(--space-4);
-    margin-top: var(--space-12);
-    padding-top: var(--space-8);
-    border-top: 1px solid var(--border-default);
-  }
-
-  .series-nav-spacer { flex: 1; }
-
-  .series-nav-link {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-1);
-    text-decoration: none;
-    max-width: 45%;
-    transition: color var(--duration-150) var(--ease);
-  }
-
-  .series-nav-next {
-    text-align: right;
-    margin-left: auto;
-  }
-
-  .series-nav-label {
-    font-family: var(--font-mono);
-    font-size: var(--text-xs);
-    color: var(--brand-red);
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    font-weight: 600;
-  }
-
-  .series-nav-title {
-    font-size: var(--text-sm);
-    color: var(--text-secondary);
-    font-weight: 500;
-  }
-
-  .series-nav-link:hover .series-nav-title {
-    color: var(--text-heading);
-  }
 </style>
diff --git a/src/pages/blog/series/index.astro b/src/pages/blog/series/index.astro
index 8c48834..70c17f9 100644
--- a/src/pages/blog/series/index.astro
+++ b/src/pages/blog/series/index.astro
@@ -1,6 +1,7 @@
 ---
 import { getCollection } from 'astro:content';
 
+import BlogNav from '@/components/blog/BlogNav.astro';
 import BaseLayout from '@/layouts/BaseLayout.astro';
 import { groupPostsBySeries } from '@/utils/series';
 import { slugify } from '@/utils/slugify';
@@ -20,12 +21,13 @@ const seriesGroups = groupPostsBySeries(allPosts);
       </p>
     </div>
 
-    <nav class="blog-nav" aria-label="Blog navigation">
-      <a href="/blog" class="blog-nav-link">All</a>
-      <a href="/blog/series" class="blog-nav-link active">Series</a>
-      <a href="/blog/categories" class="blog-nav-link">Categories</a>
-      <a href="/blog/tags" class="blog-nav-link">Tags</a>
-    </nav>
+    <BlogNav items={[
+      { href: '/blog', label: 'All' },
+      { href: '/blog/series', label: 'Series', active: true },
+      { href: '/blog/categories', label: 'Categories' },
+      { href: '/blog/tags', label: 'Tags' },
+    ]}
+    />
 
     <div class="series-list">
       {seriesGroups.map(group => (
@@ -61,39 +63,6 @@ const seriesGroups = groupPostsBySeries(allPosts);
   }
   .page-header h1 { margin-bottom: var(--space-2); }
 
-  .blog-nav {
-    display: flex;
-    justify-content: center;
-    gap: var(--space-1);
-    margin-bottom: var(--space-8);
-    padding: var(--space-1);
-    background: var(--surface-accent);
-    border-radius: var(--radius-full);
-    width: fit-content;
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  .blog-nav-link {
-    font-family: var(--font-mono);
-    font-size: var(--text-xs);
-    font-weight: 600;
-    color: var(--text-muted);
-    text-decoration: none;
-    padding: var(--space-2) var(--space-4);
-    border-radius: var(--radius-full);
-    transition: color var(--duration-150) var(--ease),
-      background var(--duration-150) var(--ease);
-  }
-
-  .blog-nav-link:hover { color: var(--text-primary); }
-
-  .blog-nav-link.active {
-    color: var(--text-heading);
-    background: var(--surface-card);
-    box-shadow: var(--shadow-sm);
-  }
-
   .series-list {
     display: grid;
     gap: var(--space-6);
diff --git a/src/pages/blog/tags/[tag].astro b/src/pages/blog/tags/[tag].astro
index 705b96b..8aca554 100644
--- a/src/pages/blog/tags/[tag].astro
+++ b/src/pages/blog/tags/[tag].astro
@@ -1,6 +1,7 @@
 ---
 import { getCollection } from 'astro:content';
 
+import BlogNav from '@/components/blog/BlogNav.astro';
 import BlogPostCard from '@/components/blog/BlogPostCard.astro';
 import BaseLayout from '@/layouts/BaseLayout.astro';
 import { slugify } from '@/utils/slugify'; // Re-using slugify for consistency
@@ -33,12 +34,13 @@ const { posts, displayName } = Astro.props;
         Found {posts.length} article{posts.length !== 1 ? 's' : ''} with this tag.
       </p>
     </div>
-    <nav class="blog-nav" aria-label="Blog navigation">
-      <a href="/blog" class="blog-nav-link">All</a>
-      <a href="/blog/series" class="blog-nav-link">Series</a>
-      <a href="/blog/categories" class="blog-nav-link">Categories</a>
-      <a href="/blog/tags" class="blog-nav-link active">Tags</a>
-    </nav>
+    <BlogNav items={[
+      { href: '/blog', label: 'All' },
+      { href: '/blog/series', label: 'Series' },
+      { href: '/blog/categories', label: 'Categories' },
+      { href: '/blog/tags', label: 'Tags', active: true },
+    ]}
+    />
     <div class="post-grid">
       {posts.map(post => <BlogPostCard post={post} />)}
     </div>
@@ -54,37 +56,4 @@ const { posts, displayName } = Astro.props;
     margin-right: auto;
   }
   .page-header h1 { margin-bottom: var(--space-2); }
-
-  .blog-nav {
-    display: flex;
-    justify-content: center;
-    gap: var(--space-1);
-    margin-bottom: var(--space-8);
-    padding: var(--space-1);
-    background: var(--surface-accent);
-    border-radius: var(--radius-full);
-    width: fit-content;
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  .blog-nav-link {
-    font-family: var(--font-mono);
-    font-size: var(--text-xs);
-    font-weight: 600;
-    color: var(--text-muted);
-    text-decoration: none;
-    padding: var(--space-2) var(--space-4);
-    border-radius: var(--radius-full);
-    transition: color var(--duration-150) var(--ease),
-      background var(--duration-150) var(--ease);
-  }
-
-  .blog-nav-link:hover { color: var(--text-primary); }
-
-  .blog-nav-link.active {
-    color: var(--text-heading);
-    background: var(--surface-card);
-    box-shadow: var(--shadow-sm);
-  }
 </style>
diff --git a/src/pages/blog/tags/index.astro b/src/pages/blog/tags/index.astro
index 369cb0b..9ac74ce 100644
--- a/src/pages/blog/tags/index.astro
+++ b/src/pages/blog/tags/index.astro
@@ -1,6 +1,7 @@
 ---
 import { getCollection } from 'astro:content';
 
+import BlogNav from '@/components/blog/BlogNav.astro';
 import BaseLayout from '@/layouts/BaseLayout.astro';
 import { slugify } from '@/utils/slugify';
 
@@ -31,12 +32,13 @@ const tags: TagInfo[] = Array.from(tagMap.entries())
       </p>
     </div>
 
-    <nav class="blog-nav" aria-label="Blog navigation">
-      <a href="/blog" class="blog-nav-link">All</a>
-      <a href="/blog/series" class="blog-nav-link">Series</a>
-      <a href="/blog/categories" class="blog-nav-link">Categories</a>
-      <a href="/blog/tags" class="blog-nav-link active">Tags</a>
-    </nav>
+    <BlogNav items={[
+      { href: '/blog', label: 'All' },
+      { href: '/blog/series', label: 'Series' },
+      { href: '/blog/categories', label: 'Categories' },
+      { href: '/blog/tags', label: 'Tags', active: true },
+    ]}
+    />
 
     <div class="tag-cloud">
       {tags.map(tag => (
@@ -60,39 +62,6 @@ const tags: TagInfo[] = Array.from(tagMap.entries())
   }
   .page-header h1 { margin-bottom: var(--space-2); }
 
-  .blog-nav {
-    display: flex;
-    justify-content: center;
-    gap: var(--space-1);
-    margin-bottom: var(--space-8);
-    padding: var(--space-1);
-    background: var(--surface-accent);
-    border-radius: var(--radius-full);
-    width: fit-content;
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  .blog-nav-link {
-    font-family: var(--font-mono);
-    font-size: var(--text-xs);
-    font-weight: 600;
-    color: var(--text-muted);
-    text-decoration: none;
-    padding: var(--space-2) var(--space-4);
-    border-radius: var(--radius-full);
-    transition: color var(--duration-150) var(--ease),
-      background var(--duration-150) var(--ease);
-  }
-
-  .blog-nav-link:hover { color: var(--text-primary); }
-
-  .blog-nav-link.active {
-    color: var(--text-heading);
-    background: var(--surface-card);
-    box-shadow: var(--shadow-sm);
-  }
-
   .tag-cloud {
     display: flex;
     flex-wrap: wrap;
diff --git a/src/styles/global.css b/src/styles/global.css
index 62979d0..480c63f 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -430,6 +430,19 @@
     }
   }
 
+  /* ── Screen Reader Only ── */
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
   /* ── Container ── */
   .container {
     max-width: 1200px;
@@ -1067,7 +1080,7 @@
     height: 300px;
     border-radius: var(--radius-full);
     object-fit: cover;
-    border: 4px solid var(--color-white);
+    border: 4px solid var(--surface-card);
     box-shadow:
       0 0 0 1px var(--border-default),
       0 8px 0 var(--border-default);
@@ -1244,6 +1257,7 @@
     align-items: center;
     gap: var(--space-2);
     text-decoration: none;
+    color: var(--brand-red);
   }
   .footer-logo svg {
     transition: transform var(--duration-300) var(--ease);