home/Projects/kompose/docs/README.md

# Kompose Documentation

Modern, stylish documentation site for Kompose built with Nuxt Content and featuring a funky dark theme with orange and purple gradients.

## 🎨 Features

- ✨ **Modern Dark Theme** - Funky design with orange and purple gradients
- 📝 **Markdown Support** - Write documentation in Markdown
- 🔍 **Full-Text Search** - Search through all documentation
- 📱 **Responsive Design** - Works perfectly on all devices
- 🎯 **Table of Contents** - Auto-generated navigation
- 🎨 **Syntax Highlighting** - Beautiful code blocks with multiple language support
- 🚀 **Static Generation** - Fast, SEO-friendly static site
- 📊 **PWA Ready** - Progressive Web App capabilities

## 🚀 Quick Start

### Development

```bash
# Install dependencies
pnpm install

# Start development server
pnpm run dev

# Open http://localhost:3000
```

### Production Build

```bash
# Generate static site
pnpm run generate

# Preview production build
pnpm run preview
```

### Docker Deployment

```bash
# Build and start the docs container
cd /path/to/kompose
./kompose.sh docs up -d --build

# View logs
./kompose.sh docs logs -f
```

## 📁 Project Structure

```
docs/
├── assets/              # Static assets and global CSS
│   └── css/
│       └── main.css     # Custom Tailwind styles
├── components/          # Vue components
├── content/            # Markdown documentation
│   └── docs/           # Documentation pages
│       └── index.md
├── layouts/            # Page layouts
│   └── default.vue     # Main layout with sidebar
├── pages/              # Application pages
│   ├── index.vue       # Homepage
│   └── docs/
│       └── [...slug].vue  # Documentation pages
├── public/             # Static files
├── app.vue            # App entry point
├── nuxt.config.ts     # Nuxt configuration
├── tailwind.config.js # Tailwind configuration
├── package.json       # Dependencies
├── Dockerfile         # Docker build configuration
├── nginx.conf         # Nginx configuration
└── compose.yaml       # Docker Compose configuration
```

## 📝 Writing Documentation

Documentation files are stored in `content/docs/` directory as Markdown files.

### Creating a New Page

1. Create a new `.md` file in `content/docs/`:

```markdown
---
title: Your Page Title
description: Brief description of the page
---

# Your Page Title

Your content goes here...
```

2. The page will be automatically available at `/docs/your-file-name`

### Frontmatter Options

```yaml
---
title: Page Title          # Required: Page title
description: Description   # Optional: Meta description
---
```

### Markdown Features

#### Code Blocks

\`\`\`bash
./kompose.sh "*" up -d
\`\`\`

#### Alerts

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

#### Tables

| Column 1 | Column 2 |
|----------|----------|
| Value 1  | Value 2  |

#### Links

[Link Text](/docs/page)

## 🎨 Customizing the Theme

### Colors

Edit `tailwind.config.js` to customize colors:

```js
theme: {
  extend: {
    colors: {
      primary: {
        500: '#f97316',  // Orange
        // ... other shades
      },
      accent: {
        500: '#a855f7',  // Purple
        // ... other shades
      }
    }
  }
}
```

### Styles

Global styles are in `assets/css/main.css`. You can modify:
- Gradient effects
- Typography
- Component styles
- Animations

## 🔍 Search Configuration

Search is powered by Nuxt Content's built-in search. To customize:

```ts
// nuxt.config.ts
content: {
  experimental: {
    search: {
      indexed: true,
      // Add search configuration
    }
  }
}
```

## 🌐 Deployment

The site is automatically built and deployed via Docker when using Kompose:

```bash
# Rebuild and redeploy
./kompose.sh docs down
./kompose.sh docs up -d --build
```

### Environment Variables

Configure in `docs/.env`:

```env
COMPOSE_PROJECT_NAME=docs
TRAEFIK_HOST=docs.example.com
APP_PORT=80
```

## 📦 Dependencies

- **Nuxt 3** - Vue framework
- **Nuxt Content** - File-based CMS
- **Tailwind CSS** - Utility-first CSS framework
- **@nuxt/icon** - Icon component
- **@vueuse/nuxt** - Vue composition utilities

## 🛠️ Development Tips

### Hot Reload

The development server supports hot module replacement. Changes to components, pages, and markdown files will be reflected immediately.

### TypeScript

The project uses TypeScript. Type definitions are automatically generated by Nuxt.

### Adding Components

Create components in `components/` directory. They'll be auto-imported:

```vue
<!-- components/MyComponent.vue -->
<template>
  <div>My Component</div>
</template>
```

Use in pages:

```vue
<template>
  <MyComponent />
</template>
```

## 🎯 Features Roadmap

- [ ] Advanced search with filters
- [ ] Dark/light mode toggle
- [ ] API documentation generator
- [ ] Interactive code examples
- [ ] Version selector
- [ ] Multi-language support

## 📄 License

MIT License - see the main Kompose repository for details.

## 🤝 Contributing

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

---

Made with ❤️ and ☕ by the Kompose Community