🚀 README Previewer

A professional, real-time Markdown previewer inspired by README.com with live reload, syntax highlighting, and advanced features for developers and technical writers.

✨ Features

🎨 Professional Styling

• README.com-inspired design and layout
• Beautiful syntax highlighting with Highlight.js
• Responsive design for all screen sizes
• Clean, modern typography

📝 Advanced Markdown Support

• Frontmatter processing - YAML metadata support
• Multi-language code tabs - Organize code samples
• Info boxes with emoji indicators (📘 💡 ⚠️ ✅)
• GitHub Flavored Markdown features
• Variable substitution for API documentation

⚡ Live Development

• Real-time preview with instant updates
• File watching - Auto-refresh on file changes
• Live reload via WebSockets
• Hot reloading during development

🛠️ Developer Experience

• Multiple markdown files support
• File manager with easy navigation
• Error handling and validation
• Professional code organization

🚀 Quick Start

Prerequisites

• Node.js 16.0.0 or higher
• npm 8.0.0 or higher

Installation

1. Clone the repository

   git clone https://github.com/yourusername/readme-previewer.git
   cd readme-previewer

2. Install dependencies

   npm install

3. Build the frontend

   npm run build

4. Start the server

   npm start

5. Open your browser

   http://localhost:3000
   

📖 Usage

Basic Usage

1. Place your Markdown files in the docs/ directory
2. Start the server with npm start
3. Navigate to http://localhost:3000
4. Select files from the sidebar to preview them
5. Edit files in your favorite editor - changes appear instantly!

Supported Markdown Features

Frontmatter

---
title: Your Document Title
excerpt: A brief description that appears below the title
category: documentation
---

Multi-Language Code Tabs

```javascript HTTP using JavaScript (ES6)
// Your JavaScript code here
```

```python HTTP using Python
# Your Python code here
```

Info Boxes

> 📘 **Note**
> This is an informational note box

> ⚠️ **Warning** 
> This is a warning box

> ✅ **Success**
> This indicates success

> 💡 **Tip**
> This is a helpful tip

Variable Substitution

Use {{apiKey}} and {{baseUrl}} in your documentation.

Variables are automatically replaced:

• {{apiKey}} → demo_api_key_12345
• {{baseUrl}} → https://api.opengateway.telefonica.com
• {{version}} → v1.2.0

🛠️ Development

Project Structure

readme-previewer/
├── docs/                    # Markdown files to preview
├── src/
│   ├── server/             # Server-side modules
│   │   ├── markdown-processor.js
│   │   ├── tabs-processor.js
│   │   └── file-manager.js
│   ├── App.js              # React main component
│   ├── App.css             # Styling
│   └── index.js            # React entry point
├── public/                 # Generated static files
├── server.js               # Main server file
├── webpack.config.js       # Build configuration
└── package.json

Development Commands

# Start development server with auto-restart
npm run dev

# Build for production
npm run build

# Build for development (faster)
npm run build:dev

# Watch mode for continuous building
npm run watch

# Clean generated files
npm run clean

API Endpoints

Endpoint	Method	Description
/api/files	GET	List all markdown files
/api/files/:filename	GET	Get file content and HTML
/api/preview	POST	Process markdown content

WebSocket Events

Event	Description
fileAdded	New file detected
fileChanged	File content updated
fileRemoved	File deleted

⚙️ Configuration

Environment Variables

Create a .env file in the root directory:

PORT=3000
DOCS_DIR=./docs

Customizing Variables

Edit src/server/markdown-processor.js to modify variable substitutions:

const mockVariables = {
  '{{apiKey}}': 'your_api_key',
  '{{baseUrl}}': 'https://your-api.com',
  '{{version}}': 'v2.0.0'
};

📦 Deployment

Production Build

# Build optimized production bundle
npm run build

# Start production server
NODE_ENV=production npm start

Docker Deployment

FROM node:18-alpine

WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production

COPY . .
RUN npm run build

EXPOSE 3000
CMD ["npm", "start"]

🤝 Contributing

We welcome contributions! Please follow these steps:

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Make your changes
4. Test thoroughly
5. Commit: git commit -m 'Add amazing feature'
6. Push: git push origin feature/amazing-feature
7. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Inspired by README.com design
• Built with React and Node.js
• Syntax highlighting by Highlight.js
• Markdown processing by markdown-it

---

Made with ❤️ for the developer community

⭐ Star this repo if you find it helpful!