A personal blog and notes management system built with Next.js, TypeScript, and Tailwind CSS. This application allows you to organize your thoughts, share knowledge, and manage your files in a clean, modern interface inspired by the React documentation.
- 📝 File-based Content Management: Manage content by adding Markdown files to the content directory
- 📋 Hierarchical Organization: Organize posts and notes in nested directory structures
- 🔍 Full-text Search: Search across all articles with keyword highlighting
- 📱 Responsive Design: Works perfectly on desktop and mobile devices
- 🎨 Modern UI: Clean, professional interface inspired by React docs
- 🧭 Smart Navigation: Auto-expanding sidebar with current page highlighting
- 📄 Article Navigation: Previous/Next article navigation with progress tracking
- Node.js 18+
- npm or yarn
- Clone the repository:
git clone <your-repo-url>
cd testblog- Install dependencies:
npm install- Run the development server:
npm run dev- Open http://localhost:3000 in your browser.
├── content/ # Markdown content files
│ ├── docs/ # Documentation articles
│ ├── notes/ # Personal notes
│ └── posts/ # Blog posts
├── src/
│ ├── app/ # Next.js app directory
│ │ ├── globals.css # Global styles
│ │ ├── layout.tsx # Root layout
│ │ ├── page.tsx # Home page
│ │ ├── HomeClient.tsx # Home page client component
│ │ ├── content/ # Dynamic content pages
│ │ └── api/ # API routes
│ ├── components/ # React components
│ │ ├── Header.tsx # Navigation header
│ │ ├── Sidebar.tsx # Sidebar navigation
│ │ ├── Search.tsx # Search functionality
│ │ ├── ArticleNavigation.tsx # Article navigation
│ │ └── LayoutClient.tsx # Layout client component
│ ├── contexts/ # React contexts
│ │ └── SidebarContext.tsx # Sidebar state management
│ ├── lib/ # Utility functions
│ │ ├── markdown.ts # Markdown processing
│ │ └── utils.ts # Helper functions
│ └── types/ # TypeScript type definitions
│ └── index.ts # Type definitions
└── home.png # Homepage screenshot
This application uses a file-based content management system. To add new content:
- Create Markdown files in the
content/directory - Organize by folders: Use subdirectories like
posts/,notes/,docs/to categorize content - Add frontmatter: Include metadata at the top of each Markdown file:
---
title: "Your Article Title"
date: "2024-01-01"
category: "Tutorial"
tags: ["react", "nextjs"]
excerpt: "Brief description of your article"
---
# Your Article Content
Write your content here using Markdown syntax...- Home Page: Shows all content organized by directory structure
- Sidebar: Displays hierarchical file tree with auto-expansion
- Search: Use
Ctrl+Kor click the search button to find articles - Article Navigation: Navigate between articles using Previous/Next buttons
- Posts: Blog posts and articles in
content/posts/ - Notes: Personal notes and quick references in
content/notes/ - Docs: Documentation and guides in
content/docs/ - Nested Structure: Create subdirectories for better organization (e.g.,
posts/react/,notes/javascript/)
The application uses Tailwind CSS for styling. You can customize the appearance by modifying:
tailwind.config.ts- Tailwind configurationsrc/app/globals.css- Global styles- Component-specific styles in individual component files
The default color scheme uses:
- Primary: React Blue (#61dafb)
- Background: White (#ffffff)
- Text: Dark Gray (#333333)
- Accent: Light Gray (#f8f9fa)
- Create new components in
src/components/ - Add new pages in
src/app/ - Define types in
src/types/index.ts - Add utility functions in
src/lib/utils.ts
- Next.js 15 - React framework with App Router
- TypeScript - Type safety
- Tailwind CSS - Utility-first CSS framework
- Lucide React - Beautiful icon library
- React 18 - UI library with hooks
- Gray Matter - Frontmatter parsing
- Remark - Markdown processing
- React Context - State management
- Fork the repository
- Create a feature branch
- Make your changes
- Submit a pull request
This project is open source and available under the MIT License.
If you have any questions or need help, please open an issue on GitHub.