From c5aaef248d504f640fe53355acaca78f2c14691e Mon Sep 17 00:00:00 2001
From: kodinaka30-ship-it <kodinaka30@gmail.com>
Date: Mon, 27 Jul 2026 17:52:12 +0100
Subject: [PATCH] feat(blog): add MDX blog engine and first post (#71)

---
 package.json                        |   3 +-
 scripts/rss.ts                      | 101 ++++++++++
 scripts/sitemap.ts                  |  12 ++
 src/App.tsx                         |   3 +
 src/__tests__/blog.test.tsx         |  34 ++++
 src/components/Footer.tsx           |   1 +
 src/components/Header.tsx           |  13 ++
 src/content/blog/wave-7-kickoff.mdx |  67 +++++++
 src/i18n/en.json                    |   3 +-
 src/i18n/es.json                    |   3 +-
 src/pages/Blog.tsx                  | 282 ++++++++++++++++++++++++++++
 src/utils/blog.ts                   |  60 ++++++
 src/vite-env.d.ts                   |  13 ++
 vite.config.ts                      |  14 +-
 14 files changed, 605 insertions(+), 4 deletions(-)
 create mode 100644 scripts/rss.ts
 create mode 100644 src/__tests__/blog.test.tsx
 create mode 100644 src/content/blog/wave-7-kickoff.mdx
 create mode 100644 src/pages/Blog.tsx
 create mode 100644 src/utils/blog.ts

diff --git a/package.json b/package.json
index 10cab71..3fbaa83 100644
--- a/package.json
+++ b/package.json
@@ -5,8 +5,9 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc -b && vite build && node scripts/inline-css.js && tsx scripts/og.ts && tsx scripts/sitemap.ts",
+    "build": "tsc -b && vite build && node scripts/inline-css.js && tsx scripts/og.ts && tsx scripts/sitemap.ts && tsx scripts/rss.ts",
     "og:generate": "tsx scripts/og.ts",
+    "rss:generate": "tsx scripts/rss.ts",
     "preview": "vite preview",
     "test": "vitest run",
     "test:a11y": "vitest run src/__tests__/a11y.test.tsx",
diff --git a/scripts/rss.ts b/scripts/rss.ts
new file mode 100644
index 0000000..e23f9f4
--- /dev/null
+++ b/scripts/rss.ts
@@ -0,0 +1,101 @@
+import { writeFileSync, readdirSync, readFileSync, existsSync } from 'fs';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const rootDir = join(__dirname, '..');
+const distDir = join(rootDir, 'dist');
+const publicDir = join(rootDir, 'public');
+const blogDir = join(rootDir, 'src', 'content', 'blog');
+const siteUrl = 'https://usewraith.xyz';
+
+interface PostMetadata {
+  title: string;
+  date: string;
+  author: string;
+  excerpt: string;
+  slug: string;
+}
+
+function parseFrontmatter(content: string): Partial<PostMetadata> {
+  const match = content.match(/^---\r?\n([\s\S]*?)\r?\n---/);
+  if (!match) return {};
+  const yaml = match[1];
+  const metadata: Record<string, string> = {};
+
+  yaml.split('\n').forEach((line) => {
+    const colonIdx = line.indexOf(':');
+    if (colonIdx > -1) {
+      const key = line.slice(0, colonIdx).trim();
+      let value = line.slice(colonIdx + 1).trim();
+      if ((value.startsWith('"') && value.endsWith('"')) || (value.startsWith("'") && value.endsWith("'"))) {
+        value = value.slice(1, -1);
+      }
+      metadata[key] = value;
+    }
+  });
+
+  return {
+    title: metadata.title,
+    date: metadata.date,
+    author: metadata.author,
+    excerpt: metadata.excerpt,
+  };
+}
+
+try {
+  const posts: PostMetadata[] = [];
+
+  if (existsSync(blogDir)) {
+    const files = readdirSync(blogDir).filter((f) => f.endsWith('.mdx'));
+    for (const file of files) {
+      const slug = file.replace(/\.mdx$/, '');
+      const content = readFileSync(join(blogDir, file), 'utf8');
+      const meta = parseFrontmatter(content);
+      if (meta.title && meta.date) {
+        posts.push({
+          title: meta.title,
+          date: meta.date,
+          author: meta.author || 'Wraith Team',
+          excerpt: meta.excerpt || '',
+          slug,
+        });
+      }
+    }
+  }
+
+  posts.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+
+  const rssFeed = `<?xml version="1.0" encoding="UTF-8"?>
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+  <channel>
+    <title>Wraith Protocol Blog</title>
+    <link>${siteUrl}/blog</link>
+    <description>Announcements, technical deep dives, and product updates from Wraith Protocol.</description>
+    <language>en-us</language>
+    <atom:link href="${siteUrl}/feed.xml" rel="self" type="application/rss+xml"/>
+${posts
+  .map(
+    (post) => `    <item>
+      <title><![CDATA[${post.title}]]></title>
+      <link>${siteUrl}/blog/${post.slug}</link>
+      <guid>${siteUrl}/blog/${post.slug}</guid>
+      <pubDate>${new Date(post.date).toUTCString()}</pubDate>
+      <description><![CDATA[${post.excerpt}]]></description>
+    </item>`,
+  )
+  .join('\n')}
+  </channel>
+</rss>`;
+
+  if (existsSync(distDir)) {
+    writeFileSync(join(distDir, 'feed.xml'), rssFeed, 'utf8');
+    writeFileSync(join(distDir, 'rss.xml'), rssFeed, 'utf8');
+  }
+  writeFileSync(join(publicDir, 'feed.xml'), rssFeed, 'utf8');
+  writeFileSync(join(publicDir, 'rss.xml'), rssFeed, 'utf8');
+
+  console.log(`RSS feed generated successfully with ${posts.length} posts.`);
+} catch (error) {
+  console.error('Failed to generate RSS feed:', error);
+}
diff --git a/scripts/sitemap.ts b/scripts/sitemap.ts
index a9da622..0225b6e 100644
--- a/scripts/sitemap.ts
+++ b/scripts/sitemap.ts
@@ -33,6 +33,18 @@ try {
   }
 
   const routes = getRoutes(distDir);
+  
+  const blogDir = join(rootDir, 'src', 'content', 'blog');
+  if (existsSync(blogDir)) {
+    const blogFiles = readdirSync(blogDir).filter((f) => f.endsWith('.mdx'));
+    if (!routes.includes('/blog')) routes.push('/blog');
+    for (const f of blogFiles) {
+      const slug = f.replace(/\.mdx$/, '');
+      const blogRoute = `/blog/${slug}`;
+      if (!routes.includes(blogRoute)) routes.push(blogRoute);
+    }
+  }
+
   const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
 ${routes
diff --git a/src/App.tsx b/src/App.tsx
index aab59e5..253af6f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -26,6 +26,7 @@ const Stellar = lazy(() => import('./pages/Stellar'));
 const Roadmap = lazy(() => import('./pages/Roadmap'));
 const CaseStudies = lazy(() => import('./pages/CaseStudies'));
 const Careers = lazy(() => import('./pages/Careers'));
+const Blog = lazy(() => import('./pages/Blog'));
 const NotFound = lazy(() => import('./pages/NotFound'));
 
 function Home() {
@@ -68,6 +69,8 @@ export default function App() {
           <Route path="/privacy" element={<Privacy />} />
           <Route path="/use-cases" element={<UseCases />} />
           <Route path="/roadmap" element={<Roadmap />} />
+          <Route path="/blog" element={<Blog />} />
+          <Route path="/blog/:slug" element={<Blog />} />
           <Route path="/case-studies" element={<CaseStudies />} />
           <Route path="/case-studies/:slug" element={<CaseStudies />} />
           {/* Wrap Stellar with Layout */}
diff --git a/src/__tests__/blog.test.tsx b/src/__tests__/blog.test.tsx
new file mode 100644
index 0000000..0dceeea
--- /dev/null
+++ b/src/__tests__/blog.test.tsx
@@ -0,0 +1,34 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import App from '../App';
+import { getAllPosts, getPostBySlug } from '../utils/blog';
+
+describe('Blog utility & page', () => {
+  it('loads blog posts correctly', () => {
+    const posts = getAllPosts();
+    expect(posts.length).toBeGreaterThan(0);
+    expect(posts[0].slug).toBe('wave-7-kickoff');
+  });
+
+  it('retrieves post by slug', () => {
+    const post = getPostBySlug('wave-7-kickoff');
+    expect(post).toBeDefined();
+    expect(post?.title).toContain('Wave 7 Kick-off');
+  });
+
+  it('renders blog index page', async () => {
+    window.history.replaceState({}, '', '/blog');
+    render(<App />);
+
+    expect(await screen.findByRole('heading', { name: /wraith protocol blog/i, level: 1 })).toBeInTheDocument();
+    expect(screen.getByText(/wave 7 kick-off/i)).toBeInTheDocument();
+  });
+
+  it('renders blog single post page', async () => {
+    window.history.replaceState({}, '', '/blog/wave-7-kickoff');
+    render(<App />);
+
+    expect(await screen.findByRole('heading', { name: /wave 7 kick-off/i, level: 1 })).toBeInTheDocument();
+    expect(screen.getByText(/welcome to/i)).toBeInTheDocument();
+  });
+});
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 6f2a402..8a4e442 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -123,6 +123,7 @@ export default function Footer() {
         { label: t('footer.resources.erc6538'), href: 'https://eips.ethereum.org/EIPS/eip-6538' },
         { label: t('footer.resources.security'), href: 'https://docs.usewraith.xyz/security' },
         { label: t('footer.resources.press'), href: '/press' },
+        { label: 'Blog', href: '/blog' },
         { label: 'Stellar Integration', href: '/stellar' },
         { label: 'Careers', href: '/careers' },
       ],
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 2f8f05a..ef468c2 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -144,6 +144,12 @@ export default function Header() {
           >
             {t('header.nav.roadmap')}
           </Link>
+          <Link
+            to="/blog"
+            className="font-body text-[13px] text-outline transition-colors duration-150 hover:text-on-surface-variant"
+          >
+            {t('header.nav.blog')}
+          </Link>
         </nav>
 
         <div className="hidden items-center gap-3 md:flex">
@@ -298,6 +304,13 @@ export default function Header() {
             >
               {t('header.nav.roadmap')}
             </Link>
+            <Link
+              to="/blog"
+              onClick={closeMenu}
+              className="font-body text-[13px] text-outline transition-colors duration-150 hover:text-on-surface-variant"
+            >
+              {t('header.nav.blog')}
+            </Link>
             <a
               href="https://github.com/wraith-protocol"
               target="_blank"
diff --git a/src/content/blog/wave-7-kickoff.mdx b/src/content/blog/wave-7-kickoff.mdx
new file mode 100644
index 0000000..fb16bed
--- /dev/null
+++ b/src/content/blog/wave-7-kickoff.mdx
@@ -0,0 +1,67 @@
+---
+title: "Wave 7 Kick-off + What We Shipped in Wave 6"
+date: "2026-07-27"
+author: "Wraith Protocol Team"
+excerpt: "Announcing the start of Wave 7 alongside a recap of Wave 6 milestones: EVM stealth transactions, SDK v1.4 release, Stellar ecosystem integrations, and TEE privacy enhancements."
+tags: ["announcements", "wave-7", "wave-6", "stealth-payments", "sdk"]
+---
+
+Welcome to **Wave 7** of Wraith Protocol development! 
+
+Over the past wave, our focus was on expanding privacy guarantees across both EVM and non-EVM chains, improving developer experience with our TypeScript SDK, and strengthening our privacy-preserving infrastructure.
+
+Here is a look back at what we shipped in **Wave 6**, followed by what to expect in **Wave 7**.
+
+---
+
+## 🚀 What We Shipped in Wave 6
+
+### 1. EVM Stealth Address Expansion
+We successfully delivered full support for ERC-5564 stealth payment generations across multiple EVM networks. Users can now execute stealth transfers without revealing linked recipient addresses on-chain.
+
+- **Zero Linkability:** Built-in ephemeral pubkey derivation ensures sender-recipient privacy.
+- **Gas Optimizations:** Reduced contract interaction overhead by ~25% using streamlined cryptographic primitives.
+
+### 2. SDK v1.4 Release
+The `@wraith-protocol/sdk` package received major performance and developer experience updates:
+- **Unified Multichain API:** One intuitive interface for EVM chains and Stellar.
+- **Automatic Stealth Key Derivation:** Instant generation of stealth addresses with a single function call.
+- **Enhanced Type Safety:** Comprehensive TypeScript definitions for all chain adapters.
+
+```typescript
+import { buildSendStealth } from '@wraith-protocol/sdk/chains/evm';
+
+const { transaction } = buildSendStealth({
+  recipientMetaAddress: 'st:eth:0x...',
+  amount: '0.1',
+  chain: 'horizen',
+});
+```
+
+### 3. TEE Privacy Enclave (Spectre) Upgrades
+Our hardware enclave architecture—Spectre—received critical security and latency enhancements:
+- Attestation verification workflows for remote nodes.
+- Faster scanning rates for stealth outputs across supported networks.
+
+---
+
+## 🎯 What's Coming in Wave 7
+
+With Wave 7 officially underway, our primary objectives focus on scaling usability and developer adoption:
+
+1. **Stellar Ecosystem Expansion:** Deepening integration with Soroban smart contracts and expanding grant-funded privacy primitives.
+2. **Automated Scanning Agents:** TEE-managed AI agents capable of background balance scanning and stealth token claim automation.
+3. **Developer Tools & Console:** Launching key management dashboards and analytics for privacy-focused dApps.
+4. **Additional Chain Support:** Expanding our testnets for Solana and Base stealth address bridging.
+
+---
+
+## 🛠️ Get Involved
+
+Wraith Protocol is open source and built for the privacy-first web.
+
+- **Documentation:** Check out the [Wraith Docs](https://docs.usewraith.xyz).
+- **GitHub:** Explore our open-source repositories on [GitHub](https://github.com/wraith-protocol).
+- **Demo:** Try stealth transactions live on the [Wraith Demo](https://demo.usewraith.xyz).
+
+Stay tuned for regular updates as Wave 7 unfolds!
diff --git a/src/i18n/en.json b/src/i18n/en.json
index bfa2753..1eeb610 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -11,7 +11,8 @@
       "console": "Console",
       "press": "Press",
       "useCases": "Use Cases",
-      "roadmap": "Roadmap"
+      "roadmap": "Roadmap",
+      "blog": "Blog"
     },
     "launchApp": "Launch App",
     "github": "GitHub ↗",
diff --git a/src/i18n/es.json b/src/i18n/es.json
index 1f4ca21..a341fc8 100644
--- a/src/i18n/es.json
+++ b/src/i18n/es.json
@@ -11,7 +11,8 @@
       "console": "Consola",
       "press": "Prensa",
       "useCases": "Casos de uso",
-      "roadmap": "Hoja de ruta"
+      "roadmap": "Hoja de ruta",
+      "blog": "Blog"
     },
     "launchApp": "Abrir app",
     "github": "GitHub ↗",
diff --git a/src/pages/Blog.tsx b/src/pages/Blog.tsx
new file mode 100644
index 0000000..a054b33
--- /dev/null
+++ b/src/pages/Blog.tsx
@@ -0,0 +1,282 @@
+import { useMemo } from 'react';
+import { Link, useParams, useSearchParams } from 'react-router-dom';
+import Layout from '../components/Layout';
+import { getAllPosts, getAllTags, getPostBySlug, BlogPost } from '../utils/blog';
+
+function SinglePost({ post }: { post: BlogPost }) {
+  const formattedDate = post.date
+    ? new Intl.DateTimeFormat('en-US', {
+        month: 'long',
+        day: 'numeric',
+        year: 'numeric',
+      }).format(new Date(post.date))
+    : '';
+
+  const structuredData = {
+    '@context': 'https://schema.org',
+    '@type': 'BlogPosting',
+    headline: post.title,
+    description: post.excerpt,
+    datePublished: post.date,
+    author: {
+      '@type': 'Organization',
+      name: post.author,
+    },
+    publisher: {
+      '@type': 'Organization',
+      name: 'Wraith Protocol',
+      logo: {
+        '@type': 'ImageObject',
+        url: 'https://usewraith.xyz/logo.png',
+      },
+    },
+    mainEntityOfPage: {
+      '@type': 'WebPage',
+      '@id': `https://usewraith.xyz/blog/${post.slug}`,
+    },
+  };
+
+  const PostComponent = post.Component;
+
+  return (
+    <Layout>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
+      />
+      <article className="mx-auto max-w-3xl px-6 py-12 md:px-12 md:py-16">
+        <Link
+          to="/blog"
+          className="mb-8 inline-flex items-center gap-2 font-body text-[13px] text-outline transition-colors hover:text-on-surface"
+        >
+          ← Back to Blog
+        </Link>
+
+        {/* Post Header */}
+        <header className="mb-10 border-b border-outline-variant-30 pb-8">
+          <div className="mb-4 flex flex-wrap items-center gap-2">
+            {post.tags.map((tag) => (
+              <Link
+                key={tag}
+                to={`/blog?tag=${encodeURIComponent(tag)}`}
+                className="border border-outline-variant-30 bg-surface-container px-2.5 py-1 font-mono text-[11px] text-outline transition-colors hover:border-outline hover:text-on-surface"
+              >
+                #{tag}
+              </Link>
+            ))}
+          </div>
+
+          <h1 className="mb-4 font-heading text-3xl font-bold tracking-tight text-on-surface sm:text-4xl">
+            {post.title}
+          </h1>
+
+          <div className="flex items-center gap-3 font-mono text-[12px] text-outline">
+            <span>{post.author}</span>
+            <span>•</span>
+            <time dateTime={post.date}>{formattedDate}</time>
+          </div>
+        </header>
+
+        {/* Post Content */}
+        <div className="blog-content font-body text-[15px] leading-relaxed text-on-surface-variant space-y-6">
+          <PostComponent />
+        </div>
+
+        {/* Post Footer */}
+        <footer className="mt-16 border-t border-outline-variant-30 pt-8">
+          <div className="flex items-center justify-between">
+            <Link
+              to="/blog"
+              className="inline-flex items-center gap-2 font-body text-[13px] text-outline transition-colors hover:text-on-surface"
+            >
+              ← Back to all posts
+            </Link>
+          </div>
+        </footer>
+      </article>
+    </Layout>
+  );
+}
+
+function BlogIndex() {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const activeTag = searchParams.get('tag') || 'all';
+
+  const allPosts = useMemo(() => getAllPosts(), []);
+  const allTags = useMemo(() => getAllTags(), []);
+
+  const filteredPosts = useMemo(() => {
+    if (activeTag === 'all') return allPosts;
+    return allPosts.filter((post) => post.tags.includes(activeTag));
+  }, [allPosts, activeTag]);
+
+  const structuredData = {
+    '@context': 'https://schema.org',
+    '@type': 'Blog',
+    name: 'Wraith Protocol Blog',
+    description: 'Updates, technical insights, and announcements from Wraith Protocol.',
+    url: 'https://usewraith.xyz/blog',
+    blogPost: filteredPosts.map((post) => ({
+      '@type': 'BlogPosting',
+      headline: post.title,
+      description: post.excerpt,
+      datePublished: post.date,
+      url: `https://usewraith.xyz/blog/${post.slug}`,
+    })),
+  };
+
+  return (
+    <Layout>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
+      />
+      <div className="mx-auto max-w-5xl px-6 py-12 md:px-12 md:py-16">
+        {/* Header */}
+        <div className="mb-12 flex flex-col gap-4 border-b border-outline-variant-30 pb-8">
+          <span className="font-mono text-[10px] font-semibold uppercase tracking-[2px] text-outline">
+            Blog & Announcements
+          </span>
+          <h1 className="font-heading text-3xl font-bold tracking-tight text-on-surface sm:text-4xl">
+            Wraith Protocol Blog
+          </h1>
+          <p className="max-w-2xl font-body text-[15px] text-on-surface-variant">
+            Technical deep dives, protocol updates, and ecosystem news from the Wraith team.
+          </p>
+        </div>
+
+        {/* Tag Filters */}
+        <div className="mb-10 flex flex-wrap items-center gap-2">
+          <button
+            onClick={() => setSearchParams({})}
+            className={`border px-3 py-1.5 font-mono text-[12px] transition-colors ${
+              activeTag === 'all'
+                ? 'border-primary bg-primary text-surface font-semibold'
+                : 'border-outline-variant-30 bg-surface-container text-outline hover:border-outline hover:text-on-surface'
+            }`}
+          >
+            All Posts ({allPosts.length})
+          </button>
+          {allTags.map((tag) => (
+            <button
+              key={tag}
+              onClick={() => setSearchParams({ tag })}
+              className={`border px-3 py-1.5 font-mono text-[12px] transition-colors ${
+                activeTag === tag
+                  ? 'border-primary bg-primary text-surface font-semibold'
+                  : 'border-outline-variant-30 bg-surface-container text-outline hover:border-outline hover:text-on-surface'
+              }`}
+            >
+              #{tag}
+            </button>
+          ))}
+        </div>
+
+        {/* Post Grid / List */}
+        {filteredPosts.length === 0 ? (
+          <div className="border border-outline-variant-30 bg-surface-container px-8 py-16 text-center">
+            <p className="font-body text-[15px] text-outline">
+              No posts found under #{activeTag}.
+            </p>
+            <button
+              onClick={() => setSearchParams({})}
+              className="mt-4 font-mono text-[12px] text-primary underline"
+            >
+              Show all posts
+            </button>
+          </div>
+        ) : (
+          <div className="flex flex-col divide-y divide-outline-variant-30 border-t border-b border-outline-variant-30">
+            {filteredPosts.map((post) => {
+              const formattedDate = post.date
+                ? new Intl.DateTimeFormat('en-US', {
+                    month: 'short',
+                    day: 'numeric',
+                    year: 'numeric',
+                  }).format(new Date(post.date))
+                : '';
+
+              return (
+                <article
+                  key={post.slug}
+                  className="group flex flex-col gap-4 py-8 transition-colors hover:bg-surface-container/30 px-2 sm:px-4"
+                >
+                  <div className="flex items-center gap-3 font-mono text-[11px] text-outline">
+                    <time dateTime={post.date}>{formattedDate}</time>
+                    <span>•</span>
+                    <span>{post.author}</span>
+                  </div>
+
+                  <Link to={`/blog/${post.slug}`} className="block">
+                    <h2 className="font-heading text-xl font-bold tracking-tight text-on-surface group-hover:text-primary transition-colors">
+                      {post.title}
+                    </h2>
+                  </Link>
+
+                  <p className="font-body text-[14px] leading-relaxed text-on-surface-variant">
+                    {post.excerpt}
+                  </p>
+
+                  <div className="flex flex-wrap items-center justify-between gap-4 pt-2">
+                    <div className="flex flex-wrap items-center gap-2">
+                      {post.tags.map((tag) => (
+                        <button
+                          key={tag}
+                          onClick={(e) => {
+                            e.preventDefault();
+                            setSearchParams({ tag });
+                          }}
+                          className="border border-outline-variant-30 bg-surface-container px-2 py-0.5 font-mono text-[10px] text-outline transition-colors hover:border-outline hover:text-on-surface"
+                        >
+                          #{tag}
+                        </button>
+                      ))}
+                    </div>
+
+                    <Link
+                      to={`/blog/${post.slug}`}
+                      className="font-mono text-[12px] font-semibold text-primary group-hover:translate-x-1 transition-transform inline-flex items-center gap-1"
+                    >
+                      Read post →
+                    </Link>
+                  </div>
+                </article>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </Layout>
+  );
+}
+
+export default function Blog() {
+  const { slug } = useParams<{ slug?: string }>();
+
+  if (slug) {
+    const post = getPostBySlug(slug);
+    if (!post) {
+      return (
+        <Layout>
+          <div className="mx-auto max-w-3xl px-6 py-24 text-center">
+            <h1 className="font-heading text-3xl font-bold text-on-surface mb-4">
+              Post Not Found
+            </h1>
+            <p className="font-body text-[15px] text-outline mb-8">
+              The blog post &quot;{slug}&quot; could not be found.
+            </p>
+            <Link
+              to="/blog"
+              className="inline-flex h-10 items-center justify-center bg-primary px-6 font-heading text-[12px] font-semibold uppercase tracking-[1.5px] text-surface transition-[filter] hover:brightness-110"
+            >
+              Return to Blog
+            </Link>
+          </div>
+        </Layout>
+      );
+    }
+    return <SinglePost post={post} />;
+  }
+
+  return <BlogIndex />;
+}
diff --git a/src/utils/blog.ts b/src/utils/blog.ts
new file mode 100644
index 0000000..d5a5619
--- /dev/null
+++ b/src/utils/blog.ts
@@ -0,0 +1,60 @@
+import type { ComponentType } from 'react';
+
+export interface BlogPostFrontmatter {
+  title: string;
+  date: string;
+  author: string;
+  excerpt: string;
+  tags: string[];
+}
+
+export interface BlogPost {
+  slug: string;
+  title: string;
+  date: string;
+  author: string;
+  excerpt: string;
+  tags: string[];
+  Component: ComponentType;
+}
+
+interface MDXModule {
+  default: ComponentType;
+  frontmatter: BlogPostFrontmatter;
+}
+
+const modules = import.meta.glob<MDXModule>('/src/content/blog/*.mdx', { eager: true });
+
+export function getAllPosts(): BlogPost[] {
+  return Object.entries(modules)
+    .map(([filepath, mod]) => {
+      const filename = filepath.split('/').pop() || '';
+      const slug = filename.replace(/\.mdx$/, '');
+      const frontmatter = mod.frontmatter || {};
+
+      return {
+        slug,
+        title: frontmatter.title || slug,
+        date: frontmatter.date || '',
+        author: frontmatter.author || 'Wraith Team',
+        excerpt: frontmatter.excerpt || '',
+        tags: Array.isArray(frontmatter.tags) ? frontmatter.tags : [],
+        Component: mod.default,
+      };
+    })
+    .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+}
+
+export function getPostBySlug(slug: string): BlogPost | undefined {
+  const posts = getAllPosts();
+  return posts.find((p) => p.slug === slug);
+}
+
+export function getAllTags(): string[] {
+  const posts = getAllPosts();
+  const tagSet = new Set<string>();
+  posts.forEach((post) => {
+    post.tags.forEach((tag) => tagSet.add(tag));
+  });
+  return Array.from(tagSet).sort();
+}
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index 11f02fe..d807ab3 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -1 +1,14 @@
 /// <reference types="vite/client" />
+
+declare module '*.mdx' {
+  import type { ComponentType } from 'react';
+  export const frontmatter: {
+    title: string;
+    date: string;
+    author: string;
+    excerpt: string;
+    tags: string[];
+  };
+  const Component: ComponentType;
+  export default Component;
+}
diff --git a/vite.config.ts b/vite.config.ts
index ecca98e..72177c8 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -3,9 +3,21 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import tailwindcss from '@tailwindcss/vite';
+import mdx from '@mdx-js/rollup';
+import remarkFrontmatter from 'remark-frontmatter';
+import remarkMdxFrontmatter from 'remark-mdx-frontmatter';
 
 export default defineConfig({
-  plugins: [react(), tailwindcss()],
+  plugins: [
+    {
+      enforce: 'pre',
+      ...mdx({
+        remarkPlugins: [remarkFrontmatter, remarkMdxFrontmatter],
+      }),
+    },
+    react(),
+    tailwindcss(),
+  ],
   test: {
     environment: 'jsdom',
     setupFiles: './src/test/setup.ts',