Blog

source.config.ts

@@ -1,10 +1,15 @@
-import { defineConfig, defineDocs } from 'fumadocs-mdx/config';
+import {
-import { metaSchema, pageSchema } from 'fumadocs-core/source/schema';
+  defineCollections,
+  defineConfig,
+  defineDocs,
+} from "fumadocs-mdx/config";
+import { metaSchema, pageSchema } from "fumadocs-core/source/schema";
+import { z } from "zod";
 
 // You can customize Zod schemas for frontmatter and `meta.json` here
 // see https://fumadocs.dev/docs/mdx/collections
 export const docs = defineDocs({
-  dir: 'content/docs',
+  dir: "content/docs",
   docs: {
     schema: pageSchema,
     postprocess: {
@@ -16,6 +21,16 @@ export const docs = defineDocs({
   },
 });
 
+export const blogPosts = defineCollections({
+  type: "doc",
+  dir: "content/blog",
+  // add required frontmatter properties
+  schema: pageSchema.extend({
+    author: z.string(),
+    date: z.string().date().or(z.date()),
+  }),
+});
+
 export default defineConfig({
   mdxOptions: {
     // MDX options

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

@@ -0,0 +1,95 @@
+import { notFound } from "next/navigation";
+import Link from "next/link";
+import defaultMdxComponents from "fumadocs-ui/mdx";
+import { blog } from "@/lib/source";
+import { ChevronLeft, Calendar, User, Clock } from "lucide-react";
+import { calculateReadingTime } from "@/lib/utils/reading-time";
+
+export default async function Page(props: {
+  params: Promise<{ slug: string }>;
+}) {
+  const params = await props.params;
+  const page = blog.getPage([params.slug]);
+
+  if (!page) notFound();
+
+  const text = await page.data.getText("raw");
+
+  const Mdx = page.data.body;
+
+  const readingTime = calculateReadingTime(text);
+
+  return (
+    <main className="container max-w-4xl py-10 lg:py-16 mx-auto">
+      {/* Navigation & Breadcrumbs */}
+      <Link
+        href="/blog"
+        className="group mb-8 flex items-center text-sm font-medium text-fd-muted-foreground hover:text-fd-foreground transition-colors"
+      >
+        <ChevronLeft className="mr-1 h-4 w-4 transition-transform group-hover:-translate-x-1" />
+        Back to Blog
+      </Link>
+
+      {/* Header Section */}
+      <header className="mb-10 space-y-4">
+        <h1 className="text-4xl font-extrabold tracking-tight lg:text-5xl">
+          {page.data.title}
+        </h1>
+        <p className="text-xl text-fd-muted-foreground leading-relaxed">
+          {page.data.description}
+        </p>
+
+        <div className="flex flex-wrap items-center gap-6 pt-4 text-sm text-fd-muted-foreground border-b border-fd-border pb-8">
+          <div className="flex items-center gap-2">
+            <User className="h-4 w-4" />
+            <span className="font-medium text-fd-foreground">
+              {page.data.author}
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            <Calendar className="h-4 w-4" />
+            <time dateTime={page.data.date.toString()}>
+              {new Date(page.data.date).toLocaleDateString("en-US", {
+                month: "long",
+                day: "numeric",
+                year: "numeric",
+              })}
+            </time>
+          </div>
+          <div className="flex items-center gap-2">
+            <Clock className="h-4 w-4" />
+            <span>{readingTime}</span>
+          </div>
+        </div>
+      </header>
+
+      {/* Content Layout */}
+      <div className="flex flex-col lg:flex-row gap-12">
+        <article className="prose prose-fd min-w-0 flex-1">
+          <Mdx components={{ ...defaultMdxComponents }} />
+        </article>
+
+        {/* Optional Sidebar (TOC or Newsletter) */}
+        {/* <aside className="hidden lg:block w-64 shrink-0">
+          <div className="sticky top-24 space-y-8">
+            <div className="rounded-lg border bg-fd-card p-6">
+              <h4 className="mb-2 font-semibold">Join the newsletter</h4>
+              <p className="text-xs text-fd-muted-foreground mb-4">
+                Get the latest updates directly in your inbox.
+              </p>
+              <button className="w-full bg-fd-primary text-fd-primary-foreground text-xs py-2 rounded-md font-medium">
+                Subscribe
+              </button>
+            </div>
+          </div>
+        </aside> */}
+      </div>
+    </main>
+  );
+}
+
+export function generateStaticParams(): { slug: string }[] {
+  return blog.getPages().map((page) => ({
+    slug: page.slugs[0],
+  }));
+}

src/app/blog/layout.tsx

@@ -0,0 +1,6 @@
+import { HomeLayout } from "fumadocs-ui/layouts/home";
+import { baseOptions } from "@/lib/layout.shared";
+
+export default function Layout({ children }: LayoutProps<"/">) {
+  return <HomeLayout {...baseOptions()}>{children}</HomeLayout>;
+}

src/app/blog/page.tsx

@@ -0,0 +1,59 @@
+import Link from "next/link";
+import { blog } from "@/lib/source";
+import { Calendar, ArrowRight } from "lucide-react";
+
+export default function Blog() {
+  // Sort posts by date (descending) so the newest is always first
+  const posts = [...blog.getPages()].sort(
+    (a, b) => new Date(b.data.date).getTime() - new Date(a.data.date).getTime(),
+  );
+
+  return (
+    <main className="container max-w-5xl py-12 lg:py-20 mx-auto">
+      <div className="flex flex-col items-start gap-4 mb-12">
+        <h1 className="text-4xl font-extrabold tracking-tight lg:text-5xl">
+          Writing & Insights
+        </h1>
+        <p className="text-xl text-fd-muted-foreground">
+          Thoughts on software, design, and building for the web.
+        </p>
+      </div>
+
+      <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+        {posts.map((post) => (
+          <Link
+            key={post.url}
+            href={post.url}
+            className="group relative flex flex-col space-y-3 rounded-2xl border border-fd-border bg-fd-card p-5 transition-all hover:bg-fd-accent/50 hover:shadow-xl"
+          >
+            {/* Date Tag */}
+            <div className="flex items-center gap-2 text-xs font-medium text-fd-muted-foreground">
+              <Calendar className="h-3 w-3" />
+              {new Date(post.data.date).toLocaleDateString("en-US", {
+                month: "short",
+                day: "numeric",
+                year: "numeric",
+              })}
+            </div>
+
+            {/* Title & Description */}
+            <div className="flex-1">
+              <h2 className="text-xl font-bold leading-snug group-hover:text-fd-primary transition-colors">
+                {post.data.title}
+              </h2>
+              <p className="line-clamp-3 text-sm leading-relaxed text-fd-muted-foreground">
+                {post.data.description}
+              </p>
+            </div>
+
+            {/* "Read More" Footer */}
+            <div className="flex items-center text-sm font-semibold text-fd-primary">
+              Read Article
+              <ArrowRight className="ml-1 h-4 w-4 transition-transform group-hover:translate-x-1" />
+            </div>
+          </Link>
+        ))}
+      </div>
+    </main>
+  );
+}

src/lib/source.ts

@@ -1,7 +1,8 @@
-import { docs } from 'collections/server';
+import { blogPosts, docs } from "collections/server";
-import { loader } from 'fumadocs-core/source';
+import { loader } from "fumadocs-core/source";
-import { lucideIconsPlugin } from 'fumadocs-core/source/lucide-icons';
+import { lucideIconsPlugin } from "fumadocs-core/source/lucide-icons";
-import { docsContentRoute, docsImageRoute, docsRoute } from './shared';
+import { docsContentRoute, docsImageRoute, docsRoute } from "./shared";
+import { toFumadocsSource } from "fumadocs-mdx/runtime/server";
 
 // See https://fumadocs.dev/docs/headless/source-api for more info
 export const source = loader({
@@ -10,28 +11,33 @@ export const source = loader({
   plugins: [lucideIconsPlugin()],
 });
 
-export function getPageImage(page: (typeof source)['$inferPage']) {
+export function getPageImage(page: (typeof source)["$inferPage"]) {
-  const segments = [...page.slugs, 'image.png'];
+  const segments = [...page.slugs, "image.png"];
 
   return {
     segments,
-    url: `${docsImageRoute}/${segments.join('/')}`,
+    url: `${docsImageRoute}/${segments.join("/")}`,
   };
 }
 
-export function getPageMarkdownUrl(page: (typeof source)['$inferPage']) {
+export function getPageMarkdownUrl(page: (typeof source)["$inferPage"]) {
-  const segments = [...page.slugs, 'content.md'];
+  const segments = [...page.slugs, "content.md"];
 
   return {
     segments,
-    url: `${docsContentRoute}/${segments.join('/')}`,
+    url: `${docsContentRoute}/${segments.join("/")}`,
   };
 }
 
-export async function getLLMText(page: (typeof source)['$inferPage']) {
+export async function getLLMText(page: (typeof source)["$inferPage"]) {
-  const processed = await page.data.getText('processed');
+  const processed = await page.data.getText("processed");
 
   return `# ${page.data.title} (${page.url})
 
 ${processed}`;
 }
+
+export const blog = loader({
+  baseUrl: "/blog",
+  source: toFumadocsSource(blogPosts, []),
+});

src/lib/utils/reading-time.ts

@@ -0,0 +1,16 @@
+export function calculateReadingTime(content: string): string {
+  const WPM = 225; // Average adult reading speed
+
+  // 1. Strip HTML tags and Markdown syntax (simplified)
+  const plainText = content
+    .replace(/[#*`~_\[\]()]/g, "") // Remove common MD symbols
+    .replace(/<[^>]*>/g, ""); // Remove HTML tags
+
+  // 2. Count words
+  const words = plainText.trim().split(/\s+/).length;
+
+  // 3. Calculate minutes
+  const minutes = Math.ceil(words / WPM);
+
+  return `${minutes} min read`;
+}