Flow

A minimal, elegant personal blog built with Astro. Fast, clean, and focused on content.

Tech Stack

• Astro 5 - Static site generator with View Transitions
• React 19 - Interactive components
• Tailwind CSS 4 - Styling
• Shadcn UI - UI components
• MDX - Enhanced markdown support

Quick Start

# Install dependencies
npm install

# Start dev server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

Features

• 🎨 Light/Dark Mode - Auto-persisted theme preference
• ⚡ View Transitions - Smooth page navigation with iOS Chrome polyfill
• 🔍 Global Search - Full-text search across all articles
• 📱 Fully Responsive - Mobile-first design
• 📝 MDX Support - Write with components in markdown
• 🏷️ Categories & Tags - Organized content structure
• 📖 Table of Contents - Auto-generated for articles
• 🖼️ Image Zoom - Click-to-expand images with pan/zoom
• 📋 Code Copy - One-click code copying for developer experience
• 📜 Changelog Timeline - Visual history of site updates
• ⬆️ Back to Top - Smooth scroll button

Project Structure

src/
├── components/     # React & Astro components
├── content/        # MDX articles
├── data/           # Site configuration
├── layouts/        # Page layouts
├── pages/          # Route pages
└── styles/         # Global styles

• 🎨浅色/深色模式- 自动保存主题偏好
• ⚡查看过渡效果- 使用 iOS Chrome polyfill 实现流畅的页面导航
• 🔍全局搜索- 对所有文章进行全文搜索
• 📱完全响应式- 移动优先设计
• 📝 MDX 支持- 在 Markdown 中使用组件编写
• 🏷️分类和标签- 有序的内容结构
• 📖文章目录- 自动生成
• 🖼️图片缩放- 点击即可放大图片并进行平移/缩放
• 📋代码复制- 一键复制代码，提升开发者体验
• 📜更新日志时间线- 网站更新的可视化历史记录
• ⬆️返回顶部- 平滑滚动按钮

License

MIT