🌙 MoonMDS

Moon Markdown Display System - A beautiful, modern markdown file viewer built with Next.js, shadcn/ui, and Framer Motion.

✨ Features

📂 File Directory - Browse all markdown files in a beautiful grid
🎨 Theme Support - Light, dark, and system themes
📱 Responsive Design - Works on all devices
🔍 Search & Filter - Find files quickly with search and tag filters
📄 Pagination - Navigate large collections easily
🔗 Native Share - Share using device's native share functionality
⬅️ Easy Navigation - Back button and breadcrumbs
💅 Code Highlighting - Syntax highlighting for 100+ languages
📑 Table of Contents - Auto-generated from headings
⚡ Fast - Optimized performance with Next.js

🚀 Getting Started

Prerequisites

Node.js 18+
npm or yarn

Installation

hljs bash
# Clone the repository
git clone https://github.com/your-username/moonmds.git
cd moonmds

# Install dependencies
npm install

# Start development server
npm run dev

Open http://localhost:3000 to view the app.

Adding Markdown Files

Simply add .md files to the root directory or any subdirectory. They'll automatically appear in the file browser.

Frontmatter Support

Add frontmatter to your markdown files for enhanced metadata:

hljs markdown
---
title: My Document Title
description: A brief description of the document
date: 2024-01-10
tags: [tag1, tag2, tag3]
---

# Document Content

Your markdown content here...

🛠️ Tech Stack

Technology	Purpose
Next.js 15	React framework
shadcn/ui	UI components
Tailwind CSS	Styling
Framer Motion	Animations
react-markdown	Markdown parsing
highlight.js	Syntax highlighting

📁 Project Structure

moonmds/
├── src/
│   ├── app/
│   │   ├── layout.tsx       # Root layout
│   │   ├── page.tsx         # Home page (file list)
│   │   ├── not-found.tsx    # 404 page
│   │   └── view/[...slug]/  # Document viewer
│   ├── components/
│   │   ├── ui/              # shadcn/ui components
│   │   ├── markdown-renderer.tsx
│   │   ├── file-card.tsx
│   │   ├── share-button.tsx
│   │   └── ...
│   └── lib/
│       ├── markdown.ts      # Markdown utilities
│       └── utils.ts         # General utilities
├── docs/                    # Sample markdown files
└── package.json

🎨 Customization

Themes

Modify the color scheme in src/app/globals.css:

hljs css
:root {
  --primary: oklch(0.55 0.25 280);  /* Purple */
  --accent: oklch(0.65 0.2 340);    /* Pink */
  /* ... other variables */
}

Components

All UI components are in src/components/ui/ and can be customized as needed.

📄 License

MIT License - feel free to use this project for personal or commercial purposes.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Made with 💜 and lots of ☕