Personal Blog

A minimal, modern personal blog built with Next.js 14, TypeScript, TailwindCSS, and MDX.

Features

• ✅ Next.js 14 with App Router
• ✅ TypeScript for type safety
• ✅ TailwindCSS for styling
• ✅ MDX for content authoring
• ✅ Posts System with frontmatter support
• ✅ Tags & Categories for content organization
• ✅ Reading Time calculation
• ✅ Table of Contents auto-generated from headings
• ✅ RSS Feed at /feed.xml
• ✅ Dark/Light Mode toggle
• ✅ SEO Optimized with metadata and Open Graph

Project Structure

├── app/                    # Next.js App Router pages
│   ├── layout.tsx         # Root layout with theme provider
│   ├── page.tsx           # Home page (posts listing)
│   ├── posts/[slug]/      # Individual post pages
│   ├── tags/[tag]/        # Tag filtered pages
│   ├── categories/[category]/ # Category filtered pages
│   └── feed.xml/          # RSS feed route
├── components/            # React components
│   ├── header.tsx         # Site header with navigation
│   ├── footer.tsx         # Site footer
│   ├── theme-toggle.tsx   # Dark/light mode toggle
│   ├── theme-provider.tsx # Theme context provider
│   ├── mdx-content.tsx   # MDX content renderer
│   └── table-of-contents.tsx # TOC component
├── content/               # Blog content
│   └── posts/            # MDX blog posts
├── lib/                  # Utility functions
│   ├── posts.ts          # Post fetching and parsing
│   └── utils.ts          # Helper functions
└── public/               # Static assets

Getting Started

1. Install dependencies:

   npm install

2. Run the development server:

   npm run dev

3. Open http://localhost:3000 in your browser

Creating Posts

Create a new .mdx file in content/posts/ with frontmatter:

---
title: Your Post Title
date: 2024-01-15
excerpt: A brief description of your post
tags: [tag1, tag2]
categories: [category1]
---

# Your Post Title

Your content here...

Key Files Explained

app/layout.tsx

Root layout that wraps all pages. Includes:

• Theme provider for dark/light mode
• Header and Footer components
• SEO metadata configuration

lib/posts.ts

Core utility for managing blog posts:

• getPosts(): Fetches all posts, parses frontmatter, calculates reading time
• getPost(slug): Fetches a single post by slug
• Handles MDX file parsing with gray-matter

components/mdx-content.tsx

Renders MDX content using react-markdown with:

• GitHub Flavored Markdown support
• Proper styling via Tailwind typography plugin

components/table-of-contents.tsx

Client component that:

• Scans the page for headings (h2-h4)
• Generates a navigation menu
• Links to anchor IDs created by rehype-slug

app/feed.xml/route.ts

RSS feed generator that:

• Fetches all posts
• Formats them as RSS XML
• Accessible at /feed.xml

tailwind.config.ts

Tailwind configuration with:

• Dark mode support (class strategy)
• Typography plugin for prose styling
• Custom color scheme (black & white)

Customization

Update Site Metadata

Edit app/layout.tsx to change:

• Site title and description
• Open Graph metadata
• Twitter card settings

Change Theme Colors

Modify app/globals.css CSS variables:

:root {
  --background: 0 0% 100%; /* Light mode */
  --foreground: 0 0% 0%;
}

.dark {
  --background: 0 0% 0%; /* Dark mode */
  --foreground: 0 0% 100%;
}

Add More Pages

Create new routes in app/ directory:

• app/about/page.tsx → /about
• app/contact/page.tsx → /contact

Build for Production

npm run build
npm start

Environment Variables

Optional: Set NEXT_PUBLIC_SITE_URL for RSS feed:

NEXT_PUBLIC_SITE_URL=https://yourdomain.com

License

MIT