A modern personal blog built with Next.js 14, featuring MDX support, advanced search functionality, and dark mode.

🌐 Live Demo: blog-next-gray-rho.vercel.app

• 📝 MDX Support: Write content in Markdown with React components
• 🔍 Advanced Search: Fast local search with keyboard shortcuts (Cmd+K)
• 🎨 Syntax Highlighting: Powered by Shiki with dual theme support
• 🌙 Dark Mode: System-aware dark/light theme switching
• 📊 Math & Diagrams: LaTeX math expressions and Mermaid diagrams
• 📱 Responsive Design: Mobile-first responsive layout
• ⚡ Performance: Optimized for speed and SEO
• 🎯 Accessibility: WCAG compliant with keyboard navigation

• Framework: Next.js 15 (App Router)
• Language: TypeScript
• Content: MDX
• Styling: Tailwind CSS
• Animation: Motion
• Icons: @egoist/tailwindcss-icons
• Deployment: Vercel

• Node.js 18+
• pnpm (recommended) or npm

# Clone the repository
git clone <repository-url>
cd blog-next

# Install dependencies
pnpm install

# Generate search index
pnpm generate:search-index

# Start development server
pnpm dev

# Development
pnpm dev              # Start development server
pnpm build            # Build for production
pnpm start            # Start production server
pnpm lint             # Run ESLint

# Search
pnpm generate:search-index  # Generate search index

1. Create a new .mdx file in the posts/ directory
2. Add frontmatter with metadata:

---
title: Your Post Title
summary: Brief description of your post
createdTime: 2024-01-01
tags: [tag1, tag2]
published: true
---

3. Write your content using Markdown and custom components
4. Regenerate the search index: pnpm generate:search-index

The blog supports various custom React components:

<>
  <DarkToggle />
  <LinkCard />
  <LinkPreview />
  <Mermaid />
</>;

• Real-time Search: Instant results as you type
• Keyboard Shortcuts: Quick access with Cmd+K (Mac) or Ctrl+K (Windows/Linux)
• Smart Matching: Search across titles, content, and tags
• Highlighting: Visual emphasis on matching terms
• Responsive: Works seamlessly on all devices

1. Open Search Modal:

   • Click the search icon in the navigation
   • Use keyboard shortcut: Cmd+K (Mac) or Ctrl+K (Windows/Linux)

2. Navigate Results:

   • Use arrow keys to navigate
   • Press Enter to open selected article
   • Press Esc to close

• Search Index: Generated from MDX frontmatter and content
• Local Search: Client-side search for fast performance
• API Endpoint: /api/search for search queries
• Components: Modal-based search interface

The blog provides RSS feed support for easy content subscription:

• RSS 2.0 Standard: Fully compliant RSS feed
• Auto-discovery: Browsers can automatically detect the RSS feed
• Latest Posts: Includes the 20 most recent articles
• Rich Content: Includes titles, descriptions, publication dates, and tags
• Caching: Optimized with 1-hour cache for better performance

1. RSS Feed URL: https://yourdomain.com/api/rss
2. RSS Page: Visit /rss for subscription instructions
3. Auto-discovery: Modern browsers will show RSS icon in address bar
4. RSS Readers: Compatible with Feedly, Inoreader, NetNewsWire, etc.

• API Endpoint: /api/feed generates XML feed
• Auto-discovery: Added to HTML head for browser detection
• Content: Includes post summaries and metadata
• Navigation: RSS link added to main navigation

src/
├── app/                    # Next.js App Router
│   ├── globals.css        # Global styles
│   ├── layout.tsx         # Root layout
│   ├── page.tsx          # Home page
│   ├── posts/            # Blog posts routes
│   └── api/              # API routes
├── components/           # React components
│   ├── ui/              # UI components
│   ├── search/          # Search components
│   ├── icons/           # Icon components
│   └── layout/          # Layout components
├── lib/                 # Utility functions
├── hooks/              # Custom React hooks
├── markdown/           # Markdown processing
└── types/              # TypeScript definitions
posts/                  # MDX blog posts
public/                # Static assets
├── search-index.json  # Generated search index
└── ...

The blog uses a sophisticated markdown rendering pipeline:

1. Markdown Parsing: remark-parse converts markdown to MDAST
2. Remark Plugins: Transform markdown (GFM, math, frontmatter)
3. HTML Conversion: remark-rehype converts to HAST
4. Rehype Plugins: Transform HTML (syntax highlighting, sanitization)
5. React Rendering: Convert to React elements

• Syntax Highlighting: Shiki with theme support
• Math Expressions: KaTeX rendering
• Mermaid Diagrams: Interactive diagrams
• GitHub Alerts: Note, warning, tip callouts
• Code Copying: One-click code block copying
• Auto-generated TOC: Table of contents from headings

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Deploy automatically on every push

# Build the project
pnpm build

# Start production server
pnpm start

• Code: Licensed under MIT
• Content: Licensed under CC BY-NC-SA 4.0

Inspired by:

• Anthony Fu
• Diu
• Xiaojun Zhou
• Innei
• Cali

Built with ❤️ using Next.js and TypeScript