📚 MDX Reader

A modern and minimalist system for managing company tutorials and documentation, built with Next.js 14, MDX and Tailwind CSS.

✨ Features

• 📝 MDX Support: Write tutorials in Markdown with React components
• 🎨 Minimalist Design: Clean and easy-to-navigate interface
• 🔍 Integrated Search: Find tutorials quickly
• 📱 Responsive: Works perfectly on all devices
• ⚡ Fast: Static generation with Next.js 14
• 🏷️ Categorization: Organize tutorials by categories and tags
• 🎯 Custom Components: Alerts, code blocks and more

🚀 Quick Start

Prerequisites

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

Installation

1. Install dependencies:

   bun install

2. Start the development server:

   bun dev

3. Open your browser at http://localhost:3000

📁 Project Structure

├── content/                 # Tutorials in MDX format
│   └── ejemplo-tutorial.mdx
├── src/
│   ├── app/                # Next.js App Router
│   │   ├── layout.tsx      # Main layout
│   │   ├── page.tsx        # Home page
│   │   └── tutorial/       # Tutorial pages
│   ├── components/         # React components
│   │   ├── Navigation.tsx  # Navigation bar
│   │   └── MDXProvider.tsx # Custom MDX provider
│   └── lib/               # Utilities
│       └── tutorials.ts   # Logic for loading tutorials
├── package.json
├── next.config.js         # Next.js configuration
├── tailwind.config.js     # Tailwind configuration
└── tsconfig.json         # TypeScript configuration

✍️ Creating a tutorial

1. Create an MDX file in the content/ folder:

   touch content/my-tutorial.mdx

2. Add metadata at the beginning of the file:

   ---
   title: "My Amazing Tutorial"
   description: "Brief description of the tutorial"
   category: "Development"
   author: "Your Name"
   lastUpdated: "2024-01-15"
   readTime: "10 min"
   tags: ["javascript", "react", "tutorial"]
   ---

3. Write your content using Markdown and MDX components:

   # My Tutorial
   
   This is a normal paragraph.
   
   <Alert type="info">
     💡 Tip: Use alerts to highlight important information.
   </Alert>
   
   ```javascript
   console.log("Hello world!")

4. Save the file - your tutorial will automatically appear on the main page.

🎨 Available components

Alerts

<Alert type="info">Important information</Alert>
<Alert type="warning">Warning</Alert>
<Alert type="success">Successful operation</Alert>
<Alert type="error">Critical error</Alert>

Code blocks with title

<CodeBlock title="package.json">
```json
{
  "name": "my-project",
  "version": "1.0.0"
}

```

🛠️ Available commands

# Development
bun dev          # Start development server
bun build        # Build for production
bun start        # Start production server
bun lint         # Run linter

# With npm
npm run dev      # Start development server
npm run build    # Build for production
npm run start    # Start production server
npm run lint     # Run linter

📝 Tutorial metadata

Each tutorial should include these metadata:

Field	Required	Description
title	✅	Tutorial title
description	✅	Brief description
category	❌	Tutorial category
author	❌	Tutorial author
lastUpdated	❌	Last update date
readTime	❌	Estimated reading time
tags	❌	Array of tags

🎯 Best practices

Content structure

• Use headers (H1, H2, H3) to organize content
• Include a clear introduction
• Divide content into logical sections
• End with a conclusion or next steps

Writing

• Use clear and concise language
• Avoid unnecessary technical jargon
• Include practical examples
• Provide context when necessary

Code

• Include complete and functional code examples
• Use comments to explain complex parts
• Specify language for syntax highlighting
• Provide both correct and incorrect examples

🤝 Contributing

1. Create a tutorial following the established guidelines
2. Make sure the content is accurate and useful
3. Request review from a colleague
4. Keep your tutorials updated

Please note that this project is released with a Code of Conduct. By participating in this project you agree to abide by its terms.

📄 License

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

---

Do you have questions or suggestions? Contact the documentation team.