This commit is contained in:
2025-10-08 17:56:29 +02:00
parent 223cc2ac6a
commit fcac39a5ae
53 changed files with 14593 additions and 1514 deletions

8
.zshrc
View File

@@ -120,3 +120,11 @@ source $ZSH/oh-my-zsh.sh
# _home_pull
cd "$HOME/$(cat $HOME/.last_pwd)" &>/dev/null
# pnpm
export PNPM_HOME="/home/valknar/.local/share/pnpm"
case ":$PATH:" in
*":$PNPM_HOME:"*) ;;
*) export PATH="$PNPM_HOME:$PATH" ;;
esac
# pnpm end

View File

@@ -1,27 +1,24 @@
# Nuxt
.nuxt
# Nuxt dev/build outputs
.output
.env
.data
.nuxt
.nitro
.cache
dist
# Node
# Node dependencies
node_modules
*.log*
# Logs
logs
*.log
# Misc
.DS_Store
.vscode
.fleet
.idea
# Build
.output
.nuxt
# Cache
.cache
# Temp
*.tmp
*.bak
*.swp
# pnpm
pnpm-lock.yaml
# Local env files
.env
.env.*
!.env.example

View File

@@ -0,0 +1 @@
hoist=true

View File

@@ -1,257 +1,75 @@
# Kompose Documentation
# Nuxt Minimal Starter
Modern, stylish documentation site for Kompose built with Nuxt Content and featuring a funky dark theme with orange and purple gradients.
Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
## 🎨 Features
## Setup
-**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
Make sure to install dependencies:
```bash
# Install dependencies
# npm
npm install
# pnpm
pnpm install
# Start development server
pnpm run dev
# yarn
yarn install
# Open http://localhost:3000
# bun
bun install
```
### Production Build
## Development Server
Start the development server on `http://localhost:3000`:
```bash
# Generate static site
pnpm run generate
# npm
npm run dev
# Preview production build
pnpm run preview
# pnpm
pnpm dev
# yarn
yarn dev
# bun
bun run dev
```
### Docker Deployment
## Production
Build the application for production:
```bash
# Build and start the docs container
cd /path/to/kompose
./kompose.sh docs up -d --build
# npm
npm run build
# View logs
./kompose.sh docs logs -f
# pnpm
pnpm build
# yarn
yarn build
# bun
bun run build
```
## 📁 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:
Locally preview production build:
```bash
# Rebuild and redeploy
./kompose.sh docs down
./kompose.sh docs up -d --build
# npm
npm run preview
# pnpm
pnpm preview
# yarn
yarn preview
# bun
bun run preview
```
### 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
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

View File

@@ -1,46 +0,0 @@
<template>
<div class="min-h-screen bg-dark-950 text-gray-100">
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</div>
</template>
<script setup>
useHead({
htmlAttrs: {
class: 'dark'
}
})
</script>
<style>
@import '@/assets/css/main.css';
/* Custom scrollbar */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
@apply bg-dark-900;
}
::-webkit-scrollbar-thumb {
@apply bg-gradient-to-b from-primary-500 to-accent-500 rounded-full;
}
::-webkit-scrollbar-thumb:hover {
@apply from-primary-400 to-accent-400;
}
/* Selection */
::selection {
@apply bg-primary-500/30 text-white;
}
::-moz-selection {
@apply bg-primary-500/30 text-white;
}
</style>

View File

@@ -0,0 +1,6 @@
<template>
<div>
<NuxtRouteAnnouncer />
<NuxtWelcome />
</div>
</template>

View File

@@ -1,214 +0,0 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
html {
@apply scroll-smooth;
}
body {
@apply bg-dark-950 text-gray-100 antialiased;
}
/* Typography improvements */
h1, h2, h3, h4, h5, h6 {
@apply font-bold tracking-tight;
}
h1 {
@apply text-5xl md:text-6xl lg:text-7xl;
}
h2 {
@apply text-4xl md:text-5xl;
}
h3 {
@apply text-3xl md:text-4xl;
}
}
@layer components {
/* Gradient text */
.gradient-text {
@apply bg-gradient-to-r from-primary-400 via-accent-400 to-primary-500 bg-clip-text text-transparent;
}
.gradient-text-hero {
@apply bg-gradient-hero bg-clip-text text-transparent animate-gradient-xy;
}
/* Glass morphism */
.glass {
@apply backdrop-blur-lg bg-white/5 border border-white/10;
}
.glass-dark {
@apply backdrop-blur-lg bg-black/30 border border-white/5;
}
/* Glow effects */
.glow-box {
@apply shadow-glow-cyber;
}
.glow-text {
@apply animate-glow;
}
/* Button styles */
.btn {
@apply px-6 py-3 rounded-lg font-semibold transition-all duration-300 transform hover:scale-105 active:scale-95;
}
.btn-primary {
@apply btn bg-gradient-primary text-white shadow-glow-orange hover:shadow-lg;
}
.btn-accent {
@apply btn bg-gradient-accent text-white shadow-glow-purple hover:shadow-lg;
}
.btn-ghost {
@apply btn border-2 border-primary-500/50 text-primary-400 hover:bg-primary-500/10 hover:border-primary-400;
}
/* Card styles */
.card {
@apply rounded-xl p-6 transition-all duration-300;
}
.card-glass {
@apply card glass hover:bg-white/10;
}
.card-glow {
@apply card bg-dark-900 border border-primary-500/20 hover:border-primary-500/40 hover:shadow-glow-cyber;
}
/* Code block improvements */
.prose pre {
@apply relative overflow-hidden;
}
.prose pre::before {
content: '';
@apply absolute inset-0 bg-gradient-shine opacity-0 hover:opacity-100 transition-opacity duration-500 pointer-events-none;
animation: shimmer 2s linear infinite;
}
/* Link styles */
.link-fancy {
@apply relative inline-block text-primary-400 hover:text-primary-300 transition-colors;
}
.link-fancy::after {
content: '';
@apply absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-primary transition-all duration-300;
}
.link-fancy:hover::after {
@apply w-full;
}
/* Sidebar */
.sidebar-link {
@apply block px-4 py-2 rounded-lg text-gray-400 hover:text-white hover:bg-white/5 transition-all duration-200;
}
.sidebar-link.active {
@apply text-white bg-gradient-to-r from-primary-500/20 to-accent-500/20 border-l-4 border-primary-500;
}
/* Search box */
.search-box {
@apply w-full px-4 py-3 bg-dark-900 border border-dark-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 transition-all;
}
/* Table of contents */
.toc-link {
@apply text-sm text-gray-400 hover:text-primary-400 transition-colors py-1 border-l-2 border-dark-700 pl-4 hover:border-primary-500;
}
.toc-link.active {
@apply text-primary-400 border-primary-500;
}
}
@layer utilities {
/* Gradient animations */
.animate-gradient {
background-size: 200% 200%;
animation: gradient 8s ease infinite;
}
/* Perspective utilities */
.perspective-1000 {
perspective: 1000px;
}
.transform-style-3d {
transform-style: preserve-3d;
}
/* Shimmer effect */
.shimmer {
@apply relative overflow-hidden;
}
.shimmer::after {
content: '';
@apply absolute inset-0 bg-gradient-shine;
animation: shimmer 2s infinite;
}
}
/* Markdown content improvements */
.prose {
@apply max-w-none;
}
.prose img {
@apply rounded-lg shadow-lg;
}
.prose table {
@apply w-full border-collapse;
}
.prose th {
@apply bg-dark-800 text-primary-400 font-semibold py-3 px-4 text-left border-b-2 border-primary-500/30;
}
.prose td {
@apply py-3 px-4 border-b border-dark-700;
}
.prose tr:hover {
@apply bg-white/5;
}
/* Copy button for code blocks */
.copy-button {
@apply absolute top-2 right-2 p-2 rounded-md bg-dark-800 text-gray-400 hover:text-white hover:bg-dark-700 transition-all opacity-0 group-hover:opacity-100;
}
/* Loading states */
.loading-dots {
@apply inline-flex space-x-1;
}
.loading-dots span {
@apply w-2 h-2 bg-primary-500 rounded-full animate-pulse;
animation-delay: calc(var(--i) * 150ms);
}
/* Hero section decorations */
.hero-decoration {
@apply absolute pointer-events-none;
}
.hero-blob {
@apply absolute w-96 h-96 bg-gradient-radial from-primary-500/30 to-transparent rounded-full blur-3xl animate-pulse-slow;
}

View File

@@ -1,31 +0,0 @@
#!/bin/bash
# Build script for Kompose documentation
set -e
echo "🎨 Building Kompose Documentation..."
echo ""
# Check if pnpm is installed
if ! command -v pnpm &> /dev/null; then
echo "❌ pnpm is not installed. Installing pnpm..."
npm install -g pnpm@9.0.0
fi
# Install dependencies
echo "📦 Installing dependencies..."
pnpm install
# Generate static site
echo "🔨 Generating static site..."
pnpm run generate
echo ""
echo "✅ Build complete!"
echo "📁 Output directory: .output/public"
echo ""
echo "To preview locally:"
echo " pnpm run preview"
echo ""
echo "To deploy with Docker:"
echo " ./kompose.sh docs up -d --build"

View File

@@ -1,38 +0,0 @@
<template>
<div class="relative group">
<slot />
<button
@click="copyCode"
class="absolute top-2 right-2 p-2 rounded-md bg-dark-800 text-gray-400 hover:text-white hover:bg-dark-700 transition-all opacity-0 group-hover:opacity-100"
:class="{ '!opacity-100': copied }"
>
<Icon v-if="!copied" name="lucide:copy" class="w-4 h-4" />
<Icon v-else name="lucide:check" class="w-4 h-4 text-green-500" />
</button>
</div>
</template>
<script setup>
import { ref } from 'vue'
const props = defineProps({
code: {
type: String,
required: true
}
})
const copied = ref(false)
const copyCode = async () => {
try {
await navigator.clipboard.writeText(props.code)
copied.value = true
setTimeout(() => {
copied.value = false
}, 2000)
} catch (err) {
console.error('Failed to copy code:', err)
}
}
</script>

View File

@@ -0,0 +1,62 @@
---
title: Configuration
description: Configure Kompose and your stacks
---
# Configuration
### Root Configuration (`.env`)
Global settings shared across all stacks:
```bash
# Network Configuration
NETWORK_NAME=kompose
# Database Connection (default values)
DB_USER=dbuser
DB_PASSWORD=secretpassword
DB_PORT=5432
DB_HOST=postgres
# Admin Settings
ADMIN_EMAIL=admin@example.com
# Email/SMTP Settings
EMAIL_TRANSPORT=smtp
EMAIL_FROM=noreply@example.com
EMAIL_SMTP_HOST=smtp.example.com
EMAIL_SMTP_PORT=465
EMAIL_SMTP_USER=smtp@example.com
EMAIL_SMTP_PASSWORD=smtppassword
```
### Stack Configuration (`<stack>/.env`)
Stack-specific settings:
```bash
# Stack Identification
COMPOSE_PROJECT_NAME=blog
# Docker Image
DOCKER_IMAGE=joseluisq/static-web-server:latest
# Traefik Configuration
TRAEFIK_HOST=example.com
# Application Settings
APP_PORT=80
```
### Configuration Precedence
```
CLI Overrides (-e flag)
Stack .env
Root .env
Compose defaults
```

View File

@@ -0,0 +1,30 @@
---
title: Database Operations
description: Export, import, and manage PostgreSQL databases
---
# Database Operations
- **Automated backups**: Export PostgreSQL databases with timestamped dumps
- **Smart imports**: Auto-detect latest dumps or specify exact files
- **Drop & recreate**: Safe database import with connection termination
- **Cleanup utilities**: Keep only the latest dumps, remove old backups
- **Hook integration**: Custom pre/post operations for each database action
### 🪝 Extensibility
- **Custom hooks**: Define `pre_db_export`, `post_db_export`, `pre_db_import`, `post_db_import`
- **Stack-specific logic**: Each stack can have unique operational requirements
- **Environment access**: Hooks inherit all environment variables
- **Dry-run aware**: Test hook execution without side effects
### 🌐 Network Management
- **Unified network**: All stacks communicate on a single Docker network
- **CLI overrides**: Change network on-the-fly without editing configs
- **Traefik integration**: Seamless reverse proxy setup with proper network awareness
- **Multi-network support**: Special stacks can have additional internal networks
### 🔧 Environment Control
- **Global overrides**: Set environment variables via CLI flags
- **Layered configs**: Root `.env` + stack `.env` + CLI overrides
- **Precedence rules**: CLI > Stack > Root configuration hierarchy
- **Real-time changes**: No need to edit files for temporary overrides

View File

@@ -0,0 +1,91 @@
---
title: Hooks System
description: Extend Kompose with custom hooks
---
# Hooks System
Extend Kompose functionality with custom hooks for each stack.
### Available Hooks
| Hook | Timing | Arguments | Use Case |
|------|--------|-----------|----------|
| `hook_pre_db_export` | Before DB export | None | Prepare data, export schemas |
| `hook_post_db_export` | After DB export | `$1` = dump file path | Cleanup, notifications |
| `hook_pre_db_import` | Before DB import | `$1` = dump file path | Prepare environment, schema setup |
| `hook_post_db_import` | After DB import | `$1` = dump file path | Restart services, clear caches |
### Creating Hooks
Create `<stack>/hooks.sh`:
```bash
#!/usr/bin/env bash
# Export schema before database export
hook_pre_db_export() {
echo " Exporting application schema..."
docker exec sexy_api npx directus schema snapshot --yes ./schema.yaml
return 0 # 0 = success, 1 = failure
}
# Apply schema before database import
hook_pre_db_import() {
local dump_file="$1"
echo " Applying schema snapshot..."
docker exec sexy_api npx directus schema apply --yes ./schema.yaml
return 0
}
# Restart service after import
hook_post_db_import() {
local dump_file="$1"
echo " Restarting application..."
docker restart sexy_api
return 0
}
```
### Real-World Example: Directus (sexy stack)
The `sexy` stack uses hooks for Directus schema management:
**Export Flow:**
1. `pre_db_export`: Export Directus schema snapshot
2. Database export creates SQL dump
3. Result: Both database dump + schema snapshot
**Import Flow:**
1. `pre_db_import`: Apply Directus schema from snapshot
2. Database import loads SQL dump
3. `post_db_import`: Restart Directus container
4. Result: Fully synchronized schema + data
### Testing Hooks
```bash
# Preview hook execution
./kompose.sh sexy db:export --dry-run
# Execute with hooks
./kompose.sh sexy db:export
# Import with hooks
./kompose.sh sexy db:import
```
### Hook Best Practices
**DO:**
- Return 0 for success, 1 for failure
- Use indented output: `echo " Message"`
- Make non-critical operations return 0
- Check container status before `docker exec`
- Test in dry-run mode first
**DON'T:**
- Assume containers are running
- Use blocking operations without timeouts
- Forget error handling
- Hardcode paths or credentials

View File

@@ -0,0 +1,29 @@
---
title: User Guide
description: Comprehensive guide to using Kompose
---
# User Guide
Learn everything you need to know about using Kompose effectively.
## Getting Started
- [Quick Start](/docs/guide/quick-start) - Get up and running in minutes
- [Installation](/docs/installation) - Detailed installation instructions
## Core Concepts
- [Stack Management](/docs/guide/stack-management) - Managing multiple Docker Compose stacks
- [Database Operations](/docs/guide/database) - Backup, restore, and maintain databases
- [Hooks System](/docs/guide/hooks) - Extend functionality with custom hooks
- [Network Architecture](/docs/guide/network) - Understanding networking in Kompose
## Configuration
- [Configuration Guide](/docs/guide/configuration) - Configure Kompose and stacks
- [Environment Variables](/docs/reference/environment) - All available environment variables
## Troubleshooting
- [Common Issues](/docs/guide/troubleshooting) - Solutions to common problems

View File

@@ -0,0 +1,52 @@
---
title: Network Architecture
description: Understanding Kompose network design
---
# Network Architecture
### Single Network Design
All stacks communicate through a unified Docker network:
```
┌─────────────────────────────────────────────────┐
│ kompose Network (Bridge) │
│ │
│ ┌───────┐ ┌───────┐ ┌──────┐ ┌──────┐ │
│ │ Blog │ │ News │ │ Auth │ │ Data │ │
│ └───────┘ └───────┘ └──────┘ └──────┘ │
│ │ │ │ │ │
│ ┌───────────────────────────────────────┐ │
│ │ Traefik (Reverse Proxy) │ │
│ └───────────────────────────────────────┘ │
│ │ │
└────────────────────┼────────────────────────────┘
┌──────┴──────┐
│ Internet │
└─────────────┘
```
### Network Configuration
**Default network:** `kompose` (defined in root `.env`)
**Override network:**
```bash
# Temporary override
./kompose.sh --network staging "*" up -d
# Permanent override
echo "NETWORK_NAME=production" >> .env
```
### Special Network Cases
**trace stack** - Dual network setup:
- `kompose` - External access via Traefik
- `signoz` - Internal component communication
**vpn stack** - Dual network setup:
- `kompose` - Web UI access
- `wg` - WireGuard tunnel network

View File

@@ -0,0 +1,29 @@
---
title: Quick Start
description: Get started with Kompose in minutes
---
# Quick Start
```bash
# Clone the repository
git clone https://github.com/yourusername/kompose.git
cd kompose
# Make kompose executable
chmod +x kompose.sh
# List all stacks
./kompose.sh --list
# Start everything
./kompose.sh "*" up -d
# View logs from specific stacks
./kompose.sh "blog,news" logs -f
# Export all databases
./kompose.sh "*" db:export
# That's it! 🎉
```

View File

@@ -0,0 +1,26 @@
---
title: Stack Management
description: Learn how to manage multiple Docker Compose stacks
---
# Stack Management
```bash
# Start stacks
./kompose.sh <pattern> up -d
# Stop stacks
./kompose.sh <pattern> down
# View logs
./kompose.sh <pattern> logs -f
# Restart stacks
./kompose.sh <pattern> restart
# Check status
./kompose.sh <pattern> ps
# Pull latest images
./kompose.sh <pattern> pull
```

View File

@@ -0,0 +1,115 @@
---
title: Troubleshooting
description: Common issues and solutions
---
# Troubleshooting
### Common Issues
#### 🚫 404 Error from Traefik
**Problem:** Websites return 404 even though containers are running
**Solution:**
```bash
# Check Traefik logs
docker logs proxy_app
# Verify network configuration
docker network inspect kompose
# Restart proxy and affected stacks
./kompose.sh proxy down && ./kompose.sh proxy up -d
./kompose.sh blog restart
```
**Debug:**
```bash
# Check Traefik dashboard
http://your-server:8080
# Verify container labels
docker inspect blog_app | grep traefik
```
#### 💾 Database Import Fails
**Problem:** `db:import` command fails
**Common causes:**
1. **Active connections** - Solved automatically (kompose terminates connections)
2. **Missing dump file** - Check file path
3. **Insufficient permissions** - Check DB_USER permissions
4. **Wrong database** - Verify DB_NAME in stack `.env`
**Solution:**
```bash
# Check database connectivity
docker exec data_postgres psql -U $DB_USER -l
# Verify dump file exists
ls -lh news/*.sql
# Check logs for detailed error
./kompose.sh news db:import 2>&1 | tee import.log
```
#### 🔌 Container Won't Connect to Network
**Problem:** Container fails to join kompose network
**Solution:**
```bash
# Recreate network
docker network rm kompose
docker network create kompose
# Restart all stacks
./kompose.sh "*" down
./kompose.sh "*" up -d
```
#### 🪝 Hooks Not Executing
**Problem:** Custom hooks aren't running
**Checklist:**
- [ ] `hooks.sh` file exists in stack directory
- [ ] `hooks.sh` is executable: `chmod +x <stack>/hooks.sh`
- [ ] Function names match: `hook_pre_db_export`, etc.
- [ ] Functions return 0 (success) or 1 (failure)
**Test:**
```bash
# Dry-run shows hook execution
./kompose.sh sexy db:export --dry-run
# Check if hooks.sh exists
./kompose.sh --list | grep hooks
```
### Debug Mode
Enable verbose logging:
```bash
# View Traefik debug logs
docker logs -f proxy_app
# Check environment variables
./kompose.sh news ps
docker exec news_backend env
# Inspect running containers
docker ps -a
docker inspect <container_name>
```
### Getting Help
1. **Check logs:** `./kompose.sh <stack> logs`
2. **Use dry-run:** `./kompose.sh --dry-run <pattern> <command>`
3. **List stacks:** `./kompose.sh --list`
4. **Read help:** `./kompose.sh --help`
5. **Open an issue:** [GitHub Issues](https://github.com/yourusername/kompose/issues)

View File

@@ -7,23 +7,50 @@ description: Learn about Kompose, your Docker Compose Symphony Conductor for man
**Kompose** is a powerful Bash orchestration tool for managing multiple Docker Compose stacks with style and grace. Think of it as a conductor for your Docker symphony - each stack plays its part, and Kompose makes sure they're all in harmony.
## Why Kompose?
**Kompose** is a powerful Bash orchestration tool for managing multiple Docker Compose stacks with style and grace. Think of it as a conductor for your Docker symphony - each stack plays its part, and Kompose makes sure they're all in harmony.
### Why Kompose?
🎯 **One Command to Rule Them All** - Manage dozens of stacks with a single command
🔄 **Database Wizardry** - Export, import, and clean up PostgreSQL databases like a boss
🎪 **Hook System** - Extend functionality with custom pre/post operation hooks
🌐 **Network Maestro** - Smart network management with CLI overrides
🔐 **Environment Juggler** - Override any environment variable on the fly
🎨 **Beautiful Output** - Color-coded logs and status indicators
🧪 **Dry-Run Mode** - Test changes before applying them
## Quick Example
### 🎼 Stack Management
- **Pattern-based selection**: Target stacks with globs, comma-separated lists, or wildcards
- **Bulk operations**: Execute commands across multiple stacks simultaneously
- **Status monitoring**: Visual feedback with color-coded success/failure indicators
- **Smart filtering**: Include/exclude stacks with flexible pattern matching
### 💾 Database Operations
- **Automated backups**: Export PostgreSQL databases with timestamped dumps
- **Smart imports**: Auto-detect latest dumps or specify exact files
- **Drop & recreate**: Safe database import with connection termination
- **Cleanup utilities**: Keep only the latest dumps, remove old backups
- **Hook integration**: Custom pre/post operations for each database action
### 🪝 Extensibility
- **Custom hooks**: Define `pre_db_export`, `post_db_export`, `pre_db_import`, `post_db_import`
- **Stack-specific logic**: Each stack can have unique operational requirements
- **Environment access**: Hooks inherit all environment variables
- **Dry-run aware**: Test hook execution without side effects
### 🌐 Network Management
- **Unified network**: All stacks communicate on a single Docker network
- **CLI overrides**: Change network on-the-fly without editing configs
- **Traefik integration**: Seamless reverse proxy setup with proper network awareness
- **Multi-network support**: Special stacks can have additional internal networks
### 🔧 Environment Control
- **Global overrides**: Set environment variables via CLI flags
- **Layered configs**: Root `.env` + stack `.env` + CLI overrides
- **Precedence rules**: CLI > Stack > Root configuration hierarchy
- **Real-time changes**: No need to edit files for temporary overrides
## Quick Start
```bash
# Start all stacks
@@ -39,27 +66,23 @@ description: Learn about Kompose, your Docker Compose Symphony Conductor for man
./kompose.sh --network staging "*" up -d
```
## Key Features
## Documentation Sections
### Stack Management
### Getting Started
- [Installation Guide](/docs/installation) - Set up Kompose on your system
- [Quick Start](/docs/guide/quick-start) - Get up and running in minutes
Pattern-based selection allows you to target stacks with globs, comma-separated lists, or wildcards. Execute commands across multiple stacks simultaneously with visual feedback and color-coded success/failure indicators.
### User Guide
- [Stack Management](/docs/guide/stack-management) - Managing multiple stacks
- [Database Operations](/docs/guide/database) - Backup and restore databases
- [Hooks System](/docs/guide/hooks) - Extend with custom hooks
- [Configuration](/docs/guide/configuration) - Configure Kompose and stacks
- [Network Architecture](/docs/guide/network) - Understanding networking
- [Troubleshooting](/docs/guide/troubleshooting) - Common issues and solutions
### Database Operations
### Stack Reference
- [All Stacks](/docs/stacks) - Detailed documentation for each stack
Automated backups with timestamped dumps, smart imports that auto-detect latest dumps, and safe database operations with connection termination. Keep your storage clean with cleanup utilities.
### Hooks System
Extend Kompose with custom hooks for each stack. Define `pre_db_export`, `post_db_export`, `pre_db_import`, and `post_db_import` hooks to add stack-specific logic.
### Network Management
All stacks communicate through a unified Docker network. Override the network on-the-fly via CLI without editing configs, with seamless Traefik integration.
## Next Steps
- [Installation Guide](/docs/installation)
- [Quick Start Tutorial](/docs/quick-start)
- [Stack Management](/docs/guide/stack-management)
- [Database Operations](/docs/guide/database)
### Reference
- [CLI Reference](/docs/reference/cli) - Complete command reference
- [Environment Variables](/docs/reference/environment) - All configuration options

View File

@@ -237,7 +237,7 @@ sudo systemctl enable docker
Now that Kompose is installed, you can:
1. [Start with the Quick Start Guide](/docs/quick-start)
1. [Start with the Quick Start Guide](/docs/guide/quick-start)
2. [Learn about Stack Management](/docs/guide/stack-management)
3. [Explore Database Operations](/docs/guide/database)
4. [Set up Custom Hooks](/docs/guide/hooks)
@@ -277,4 +277,4 @@ rm -rf /path/to/kompose
---
**Need Help?** Check out the [Troubleshooting Guide](/docs/troubleshooting) or [open an issue](https://github.com/yourusername/kompose/issues) on GitHub.
**Need Help?** Check out the [Troubleshooting Guide](/docs/guide/troubleshooting) or [open an issue](https://github.com/yourusername/kompose/issues) on GitHub.

View File

@@ -0,0 +1,202 @@
---
title: CLI Reference
description: Complete command-line interface reference
---
# CLI Reference
Complete reference for all Kompose CLI commands and options.
## Synopsis
```bash
./kompose.sh [OPTIONS] <PATTERN> <COMMAND> [ARGS...]
```
## Options
### Global Options
| Option | Short | Description |
|--------|-------|-------------|
| `--help` | `-h` | Show help message |
| `--list` | `-l` | List all available stacks |
| `--dry-run` | `-n` | Preview actions without executing |
| `--network <n>` | | Override network name |
| `-e <KEY=VALUE>` | | Set environment variable |
### Examples
```bash
# Show help
./kompose.sh --help
# List all stacks
./kompose.sh --list
# Dry run mode
./kompose.sh --dry-run "*" up -d
# Override network
./kompose.sh --network staging "*" up -d
# Set environment variable
./kompose.sh -e DB_HOST=localhost news up -d
```
## Stack Patterns
### Pattern Syntax
- `*` - All stacks
- `stack1,stack2,stack3` - Specific stacks (comma-separated)
- `stack` - Single stack
### Examples
```bash
# All stacks
./kompose.sh "*" up -d
# Multiple specific stacks
./kompose.sh "auth,blog,news" logs -f
# Single stack
./kompose.sh proxy restart
```
## Docker Compose Commands
Any Docker Compose command can be passed through:
```bash
# Start services
./kompose.sh <pattern> up -d
# Stop services
./kompose.sh <pattern> down
# View logs
./kompose.sh <pattern> logs -f
# Restart services
./kompose.sh <pattern> restart
# Pull images
./kompose.sh <pattern> pull
# Check status
./kompose.sh <pattern> ps
# Execute commands
./kompose.sh <pattern> exec <service> <command>
```
## Database Commands
### db:export
Export PostgreSQL database to SQL dump file.
```bash
./kompose.sh <pattern> db:export
```
**Output:** `<stack-dir>/<db-name>_YYYYMMDD_HHMMSS.sql`
### db:import
Import PostgreSQL database from SQL dump file.
```bash
# Import latest dump (auto-detected)
./kompose.sh <stack> db:import
# Import specific dump file
./kompose.sh <stack> db:import path/to/dump.sql
```
**⚠️ WARNING:** Drops and recreates the database!
### db:cleanup
Remove old database dump files (keeps only the latest).
```bash
./kompose.sh <pattern> db:cleanup
```
## Exit Codes
| Code | Meaning |
|------|---------|
| 0 | Success |
| 1 | General error |
| 2 | Missing required arguments |
| 3 | No matching stacks |
## Environment Variables
Environment variables can be set via:
1. Root `.env` file
2. Stack `.env` file
3. CLI `-e` flag (highest priority)
### Precedence
```
CLI (-e flag) > Stack .env > Root .env > Compose defaults
```
## Examples
### Daily Workflow
```bash
# Morning: Start everything
./kompose.sh "*" up -d
# Check status
./kompose.sh "*" ps
# View logs
./kompose.sh "*" logs --tail=50
# Evening: Backup databases
./kompose.sh "*" db:export
./kompose.sh "*" db:cleanup
```
### Deployment
```bash
# Pull latest images
./kompose.sh "*" pull
# Backup before update
./kompose.sh "*" db:export
# Restart with new images
./kompose.sh "*" down
./kompose.sh "*" up -d
# Verify health
./kompose.sh "*" ps
```
### Development
```bash
# Start dev environment
./kompose.sh "data,proxy,news" up -d
# Override for testing
./kompose.sh -e DB_NAME=test_db news up -d
# Watch logs
./kompose.sh news logs -f
# Clean up
./kompose.sh news down
```

View File

@@ -0,0 +1,147 @@
---
title: Environment Variables
description: Complete reference for all environment variables
---
# Environment Variables
Complete reference for all environment variables used in Kompose.
## Global Variables
These are set in the root `.env` file and available to all stacks.
### Network Configuration
| Variable | Default | Description |
|----------|---------|-------------|
| `NETWORK_NAME` | `kompose` | Docker network name |
### Database Configuration
| Variable | Default | Description |
|----------|---------|-------------|
| `DB_USER` | - | PostgreSQL username |
| `DB_PASSWORD` | - | PostgreSQL password |
| `DB_PORT` | `5432` | PostgreSQL port |
| `DB_HOST` | `postgres` | PostgreSQL host |
### Admin Settings
| Variable | Default | Description |
|----------|---------|-------------|
| `ADMIN_EMAIL` | - | Administrator email |
| `ADMIN_PASSWORD` | - | Administrator password |
### Email/SMTP Settings
| Variable | Default | Description |
|----------|---------|-------------|
| `EMAIL_TRANSPORT` | `smtp` | Email transport method |
| `EMAIL_FROM` | - | Default sender address |
| `EMAIL_SMTP_HOST` | - | SMTP server hostname |
| `EMAIL_SMTP_PORT` | `465` | SMTP server port |
| `EMAIL_SMTP_USER` | - | SMTP username |
| `EMAIL_SMTP_PASSWORD` | - | SMTP password |
## Stack-Specific Variables
These are set in individual stack `.env` files.
### Common Stack Variables
| Variable | Description |
|----------|-------------|
| `COMPOSE_PROJECT_NAME` | Stack project name |
| `TRAEFIK_HOST` | Domain for Traefik routing |
| `APP_PORT` | Internal application port |
### Auth Stack (Keycloak)
| Variable | Description |
|----------|-------------|
| `KC_ADMIN_USERNAME` | Keycloak admin username |
| `KC_ADMIN_PASSWORD` | Keycloak admin password |
| `KC_DB_NAME` | Keycloak database name |
### News Stack (Letterspace)
| Variable | Description |
|----------|-------------|
| `JWT_SECRET` | JWT signing secret |
| `DB_NAME` | Newsletter database name |
| `NODE_ENV` | Node environment (production/development) |
### Sexy Stack (Directus)
| Variable | Description |
|----------|-------------|
| `KEY` | Directus encryption key |
| `SECRET` | Directus secret key |
| `ADMIN_EMAIL` | Directus admin email |
| `ADMIN_PASSWORD` | Directus admin password |
## Configuration Precedence
Environment variables follow this priority order:
1. **CLI Override** (`-e` flag) - Highest priority
2. **Stack .env** - Stack-specific settings
3. **Root .env** - Global defaults
4. **Compose File** - Docker Compose defaults
### Example
```bash
# Root .env
DB_HOST=postgres
# news/.env
DB_HOST=news-postgres # Overrides root
# CLI
./kompose.sh -e DB_HOST=localhost news up -d # Overrides both
```
## Best Practices
### Security
- ✅ Use strong, random passwords
- ✅ Never commit `.env` files to version control
- ✅ Use `.env.example` as template
- ✅ Rotate secrets regularly
### Organization
- ✅ Document custom variables
- ✅ Group related variables
- ✅ Use consistent naming
- ✅ Keep defaults in root `.env`
## Generating Secrets
### Random Passwords
```bash
# OpenSSL
openssl rand -hex 32
# UUID
uuidgen
# Base64
openssl rand -base64 32
```
### JWT Secrets
```bash
openssl rand -hex 64
```
### Encryption Keys
```bash
openssl rand -base64 32
```

View File

@@ -0,0 +1,28 @@
---
title: Reference Documentation
description: Complete reference documentation for Kompose
---
# Reference Documentation
Complete reference documentation for all aspects of Kompose.
## Command Line
- [CLI Reference](/docs/reference/cli) - All commands and options
- [Stack Patterns](/docs/reference/cli#stack-patterns) - Pattern matching syntax
## Configuration
- [Environment Variables](/docs/reference/environment) - All environment variables
- [Configuration Files](/docs/guide/configuration) - File structure and precedence
## Stack Reference
- [Stack Documentation](/docs/stacks) - Detailed docs for each stack
## Advanced Topics
- [Network Architecture](/docs/guide/network) - Network design and configuration
- [Hook System](/docs/guide/hooks) - Writing custom hooks
- [Database Operations](/docs/guide/database) - Advanced database management

View File

@@ -1,3 +1,8 @@
---
title: Auth Stack - The Bouncer at Your Digital Club
description: "You shall not pass... without proper credentials!"
---
# 🔐 Auth Stack - The Bouncer at Your Digital Club
> *"You shall not pass... without proper credentials!"* - Keycloak, probably

View File

@@ -1,3 +1,8 @@
---
title: <20> Auto Stack - Your Ansible Automation Wingman
description: "Automating the boring stuff since... well, today!"
---
# 🤖 Auto Stack - Your Ansible Automation Wingman
> *"Automating the boring stuff since... well, today!"* - Semaphore UI
@@ -80,7 +85,7 @@ Three volumes keep your data safe:
## Health Checks
### Semaphore UI
### Semaphore API Ping
Every 30 seconds: "Hey, you still awake?"
```bash
curl -f http://localhost:3000/api/ping

View File

@@ -1,3 +1,8 @@
---
title: Blog Stack - Your Lightning-Fast Static Site Delivery
description: "Speed is my middle name"
---
# 📝 Blog Stack - Your Lightning-Fast Static Site Delivery
> *"Speed is my middle name"* - Static Web Server

View File

@@ -1,3 +1,8 @@
---
title: ⛓ Chain Stack - Workflow Automation Powerhouse
description: "If you can dream it, you can automate it!"
---
# ⛓️ Chain Stack - Workflow Automation Powerhouse
> *"If you can dream it, you can automate it!"* - n8n philosophy

View File

@@ -1,3 +1,8 @@
---
title: <20> Chat Stack - Your Personal Notification HQ
description: "Ding! You've got... pretty much everything"
---
# 💬 Chat Stack - Your Personal Notification HQ
> *"Ding! You've got... pretty much everything"* - Gotify

View File

@@ -1,3 +1,8 @@
---
title: <20> Code Stack - Your Private GitHub Alternative
description: "Give them Git, make them great!"
---
# 🦊 Code Stack - Your Private GitHub Alternative
> *"Give them Git, make them great!"* - Some wise developer

View File

@@ -1,3 +1,8 @@
---
title: Homepage Dashboard (Dash)
description: Documentation for the dash stack
---
# Homepage Dashboard (Dash)
This directory contains the configuration for the [Homepage](https://gethomepage.dev) dashboard service, which provides a centralized view of all kompose.sh services.

View File

@@ -1,3 +1,8 @@
---
title: Data Stack - The Memory Palace of Your Infrastructure
description: "In data we trust... and backup, and replicate, and backup again"
---
# 🗄️ Data Stack - The Memory Palace of Your Infrastructure
> *"In data we trust... and backup, and replicate, and backup again"* - Every DBA Ever
@@ -116,7 +121,7 @@ ADMIN_PASSWORD=your_password
## First Time Setup 🚀
### PostgreSQL
### Postgres
1. **Create a new database**:
```bash
@@ -132,7 +137,7 @@ ADMIN_PASSWORD=your_password
- Login with admin credentials
- Right-click "Databases" → Create → Database
### Redis
### Redis cache
Redis works out of the box! No setup needed. Just start using it:
```bash
@@ -279,7 +284,7 @@ Your pgAdmin settings and configurations.
## Performance Tips 💡
### PostgreSQL
### PostgresSQL Server
1. **Indexes**: Create them on frequently queried columns
```sql
@@ -296,7 +301,7 @@ Your pgAdmin settings and configurations.
VACUUM ANALYZE;
```
### Redis
### Redis Service
1. **Use Appropriate Data Structures**: Lists, Sets, Hashes, etc.
2. **Set Expiration**: Don't let cache grow forever
@@ -351,13 +356,13 @@ pgbouncer:
## Monitoring & Metrics
### PostgreSQL
### PostgreSQL Server
- **pg_stat_statements**: Track slow queries
- **pg_stat_user_tables**: Table statistics
- **pg_stat_database**: Database-level stats
### Redis
### Redis System
- **INFO** command: Comprehensive stats
- **SLOWLOG**: Track slow commands

View File

@@ -1,3 +1,8 @@
---
title: <20> Dock Stack - Your Docker Compose Command Center
description: "Making Docker Compose actually fun since 2023"
---
# 🐳 Dock Stack - Your Docker Compose Command Center
> *"Making Docker Compose actually fun since 2023"* - Dockge

View File

@@ -1,3 +1,8 @@
---
title: <20> Home Stack - Your Smart Home Command Center
description: "Home is where the automation is!"
---
# 🏠 Home Stack - Your Smart Home Command Center
> *"Home is where the automation is!"* - Every Home Assistant user

View File

@@ -0,0 +1,53 @@
---
title: Stack Reference
description: Detailed documentation for all Kompose stacks
---
# Stack Reference
This section contains detailed documentation for each stack in the Kompose ecosystem.
## Available Stacks
- [Auth](/docs/stacks/auth)
- [Auto](/docs/stacks/auto)
- [Blog](/docs/stacks/blog)
- [Chain](/docs/stacks/chain)
- [Chat](/docs/stacks/chat)
- [Code](/docs/stacks/code)
- [Dash](/docs/stacks/dash)
- [Data](/docs/stacks/data)
- [Dock](/docs/stacks/dock)
- [Home](/docs/stacks/home)
- [Link](/docs/stacks/link)
- [News](/docs/stacks/news)
- [Proxy](/docs/stacks/proxy)
- [Sexy](/docs/stacks/sexy)
- [Trace](/docs/stacks/trace)
- [Track](/docs/stacks/track)
- [Vault](/docs/stacks/vault)
- [Vpn](/docs/stacks/vpn)
## Stack Categories
### Infrastructure Stacks
Core infrastructure services that other stacks depend on:
- [Data](/docs/stacks/data) - PostgreSQL & Redis databases
- [Proxy](/docs/stacks/proxy) - Traefik reverse proxy
- [Trace](/docs/stacks/trace) - SigNoz observability
- [Vault](/docs/stacks/vault) - Vaultwarden password manager
- [VPN](/docs/stacks/vpn) - WireGuard VPN
### Application Stacks
Production application services:
- [Auth](/docs/stacks/auth) - Keycloak authentication
- [Blog](/docs/stacks/blog) - Static website server
- [News](/docs/stacks/news) - Letterspace newsletter platform
- [Sexy](/docs/stacks/sexy) - Directus CMS
### Utility Stacks
Management and monitoring tools:
- [Dock](/docs/stacks/dock) - Dockge Docker UI
- [Chat](/docs/stacks/chat) - Gotify notifications
- [Track](/docs/stacks/track) - Umami analytics
- [Auto](/docs/stacks/auto) - Semaphore CI/CD

View File

@@ -1,3 +1,8 @@
---
title: <20> Link Stack - Bookmark Manager
description: Documentation for the link stack
---
# 🔗 Link Stack - Bookmark Manager
Complete documentation for Linkwarden is available in the artifacts.

View File

@@ -1,3 +1,8 @@
---
title: News Stack - Your Self-Hosted Newsletter Empire
description: "Forget MailChimp, we're going full indie!"
---
# 📰 News Stack - Your Self-Hosted Newsletter Empire
> *"Forget MailChimp, we're going full indie!"* - Letterspace

View File

@@ -1,3 +1,8 @@
---
title: Proxy Stack - The Traffic Cop of Your Infrastructure
description: "Beep beep! Make way for HTTPS traffic!"
---
# 🚦 Proxy Stack - The Traffic Cop of Your Infrastructure
> *"Beep beep! Make way for HTTPS traffic!"* - Traefik

View File

@@ -1,3 +1,8 @@
---
title: <20> Sexy Stack - Your Headless CMS Runway
description: "We make content management look good!"
---
# 💅 Sexy Stack - Your Headless CMS Runway
> *"We make content management look good!"* - Directus + SvelteKit

View File

@@ -1,3 +1,8 @@
---
title: <20> Trace Stack - Your Observability Command Center
description: "When your app goes boom, we tell you why!"
---
# 🔍 Trace Stack - Your Observability Command Center
> *"When your app goes boom, we tell you why!"* - SigNoz

View File

@@ -1,3 +1,8 @@
---
title: <20> Track Stack - Your Privacy-First Analytics HQ
description: "We count visitors, not cookies!"
---
# 📊 Track Stack - Your Privacy-First Analytics HQ
> *"We count visitors, not cookies!"* - Umami Analytics

View File

@@ -1,3 +1,8 @@
---
title: Vault Stack - Your Password Fort Knox
description: "One password to rule them all!"
---
# 🔐 Vault Stack - Your Password Fort Knox
> *"One password to rule them all!"* - Vaultwarden

View File

@@ -1,3 +1,8 @@
---
title: <20> VPN Stack - Your Encrypted Tunnel to Freedom
description: "The internet, but make it private!"
---
# 🔌 VPN Stack - Your Encrypted Tunnel to Freedom
> *"The internet, but make it private!"* - WireGuard

View File

View File

@@ -1,222 +0,0 @@
<template>
<div class="flex flex-col min-h-screen">
<!-- Header -->
<header class="sticky top-0 z-50 w-full border-b border-dark-800 glass-dark">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex h-16 items-center justify-between">
<!-- Logo -->
<NuxtLink to="/" class="flex items-center space-x-3 group">
<div class="text-3xl font-bold gradient-text group-hover:scale-110 transition-transform">
KOMPOSE
</div>
</NuxtLink>
<!-- Navigation -->
<nav class="hidden md:flex items-center space-x-6">
<NuxtLink to="/docs" class="link-fancy text-sm font-medium">
Documentation
</NuxtLink>
<NuxtLink to="/api" class="link-fancy text-sm font-medium">
API Reference
</NuxtLink>
<NuxtLink to="/examples" class="link-fancy text-sm font-medium">
Examples
</NuxtLink>
<a href="https://github.com/yourusername/kompose" target="_blank"
class="text-gray-400 hover:text-white transition-colors">
<Icon name="lucide:github" class="w-5 h-5" />
</a>
</nav>
<!-- Mobile menu button -->
<button @click="mobileMenuOpen = !mobileMenuOpen" class="md:hidden text-gray-400 hover:text-white">
<Icon :name="mobileMenuOpen ? 'lucide:x' : 'lucide:menu'" class="w-6 h-6" />
</button>
</div>
</div>
<!-- Mobile menu -->
<Transition
enter-active-class="transition duration-200 ease-out"
enter-from-class="opacity-0 scale-95"
enter-to-class="opacity-100 scale-100"
leave-active-class="transition duration-100 ease-in"
leave-from-class="opacity-100 scale-100"
leave-to-class="opacity-0 scale-95"
>
<div v-show="mobileMenuOpen" class="md:hidden border-t border-dark-800 bg-dark-900 p-4">
<nav class="flex flex-col space-y-3">
<NuxtLink @click="mobileMenuOpen = false" to="/docs" class="text-gray-300 hover:text-white">
Documentation
</NuxtLink>
<NuxtLink @click="mobileMenuOpen = false" to="/api" class="text-gray-300 hover:text-white">
API Reference
</NuxtLink>
<NuxtLink @click="mobileMenuOpen = false" to="/examples" class="text-gray-300 hover:text-white">
Examples
</NuxtLink>
</nav>
</div>
</Transition>
</header>
<div class="flex-1 flex">
<!-- Sidebar -->
<aside class="hidden lg:block w-64 border-r border-dark-800 overflow-y-auto sticky top-16 h-[calc(100vh-4rem)]">
<div class="p-6 space-y-6">
<!-- Search -->
<div class="relative">
<Icon name="lucide:search" class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
<input
type="search"
placeholder="Search docs..."
class="w-full pl-10 pr-4 py-2 bg-dark-900 border border-dark-700 rounded-lg text-sm focus:outline-none focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20"
/>
</div>
<!-- Navigation sections -->
<nav class="space-y-6">
<div v-for="section in navigation" :key="section.title">
<h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">
{{ section.title }}
</h3>
<ul class="space-y-1">
<li v-for="item in section.items" :key="item.to">
<NuxtLink :to="item.to" class="sidebar-link">
{{ item.label }}
</NuxtLink>
</li>
</ul>
</div>
</nav>
</div>
</aside>
<!-- Main content -->
<main class="flex-1 overflow-x-hidden">
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8 max-w-5xl">
<slot />
</div>
</main>
<!-- Table of contents -->
<aside class="hidden xl:block w-64 border-l border-dark-800 overflow-y-auto sticky top-16 h-[calc(100vh-4rem)]">
<div class="p-6">
<h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">
On This Page
</h3>
<nav class="space-y-2">
<a
v-for="link in toc"
:key="link.id"
:href="`#${link.id}`"
class="toc-link"
:class="{ active: activeId === link.id }"
:style="{ paddingLeft: `${(link.depth - 2) * 12 + 16}px` }"
>
{{ link.text }}
</a>
</nav>
</div>
</aside>
</div>
<!-- Footer -->
<footer class="border-t border-dark-800 bg-dark-950">
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div class="col-span-1 md:col-span-2">
<div class="text-2xl font-bold gradient-text mb-4">KOMPOSE</div>
<p class="text-gray-400 text-sm mb-4">
Your Docker Compose Symphony Conductor
</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-primary-400 transition-colors">
<Icon name="lucide:github" class="w-5 h-5" />
</a>
<a href="#" class="text-gray-400 hover:text-primary-400 transition-colors">
<Icon name="lucide:twitter" class="w-5 h-5" />
</a>
</div>
</div>
<div>
<h4 class="text-sm font-semibold text-white mb-4">Documentation</h4>
<ul class="space-y-2 text-sm">
<li><NuxtLink to="/docs" class="text-gray-400 hover:text-white">Getting Started</NuxtLink></li>
<li><NuxtLink to="/docs/guide" class="text-gray-400 hover:text-white">Guide</NuxtLink></li>
<li><NuxtLink to="/api" class="text-gray-400 hover:text-white">API Reference</NuxtLink></li>
</ul>
</div>
<div>
<h4 class="text-sm font-semibold text-white mb-4">Community</h4>
<ul class="space-y-2 text-sm">
<li><a href="#" class="text-gray-400 hover:text-white">GitHub</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Discord</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Twitter</a></li>
</ul>
</div>
</div>
<div class="border-t border-dark-800 mt-8 pt-8 text-center text-sm text-gray-400">
<p>&copy; 2025 Kompose. Made with and </p>
</div>
</div>
</footer>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const mobileMenuOpen = ref(false)
const activeId = ref('')
const toc = ref([])
const navigation = [
{
title: 'Getting Started',
items: [
{ label: 'Introduction', to: '/docs' },
{ label: 'Installation', to: '/docs/installation' },
{ label: 'Quick Start', to: '/docs/quick-start' },
]
},
{
title: 'Guide',
items: [
{ label: 'Stack Management', to: '/docs/guide/stack-management' },
{ label: 'Database Operations', to: '/docs/guide/database' },
{ label: 'Hooks System', to: '/docs/guide/hooks' },
{ label: 'Network Architecture', to: '/docs/guide/network' },
]
},
{
title: 'Reference',
items: [
{ label: 'Configuration', to: '/docs/reference/configuration' },
{ label: 'CLI Commands', to: '/docs/reference/cli' },
{ label: 'Environment Variables', to: '/docs/reference/env' },
]
}
]
// Table of contents intersection observer
onMounted(() => {
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
activeId.value = entry.target.id
}
})
},
{ rootMargin: '-80px 0px -80% 0px' }
)
document.querySelectorAll('h2, h3').forEach((heading) => {
observer.observe(heading)
})
})
</script>

View File

@@ -1,115 +1,38 @@
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
compatibilityDate: '2024-04-03',
compatibilityDate: '2025-07-15',
devtools: { enabled: true },
modules: [
'@nuxt/content',
'@nuxtjs/tailwindcss',
'@nuxtjs/color-mode',
'@nuxt/icon',
'@vueuse/nuxt'
],
// Content module configuration
content: {
documentDriven: true,
highlight: {
theme: {
default: 'github-dark',
dark: 'github-dark'
},
preload: [
'bash',
'shell',
'yaml',
'json',
'markdown',
'javascript',
'typescript',
'vue',
'docker',
'sql'
]
},
markdown: {
toc: {
depth: 3,
searchDepth: 3
},
anchorLinks: true
},
// Search configuration
experimental: {
search: {
indexed: true
experimental: { nativeSqlite: true },
build: {
markdown: {
// Object syntax can be used to override default options
remarkPlugins: {
// Override remark-emoji options
'remark-emoji': {
options: {
emoticon: true
}
},
// Disable remark-gfm
'remark-gfm': false,
// Add remark-oembed
'remark-oembed': {
// Options
}
},
}
}
},
// Color mode configuration
colorMode: {
classSuffix: '',
preference: 'dark',
fallback: 'dark'
},
// Tailwind configuration
tailwindcss: {
exposeConfig: true,
viewer: true,
config: {
darkMode: 'class',
content: [
'./components/**/*.{js,vue,ts}',
'./layouts/**/*.vue',
'./pages/**/*.vue',
'./plugins/**/*.{js,ts}',
'./app.vue'
]
}
},
// App configuration
app: {
head: {
charset: 'utf-8',
viewport: 'width=device-width, initial-scale=1',
title: 'Kompose Documentation',
meta: [
{ name: 'description', content: 'Complete documentation for Kompose - Your Docker Compose Symphony Conductor' },
{ name: 'og:title', content: 'Kompose Documentation' },
{ name: 'og:description', content: 'Complete documentation for Kompose - Your Docker Compose Symphony Conductor' },
{ name: 'og:type', content: 'website' },
{ name: 'twitter:card', content: 'summary_large_image' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
}
},
// Nitro configuration for static generation
nitro: {
prerender: {
crawlLinks: true,
routes: ['/']
}
},
// Build configuration
build: {
transpile: []
},
// PWA configuration
pwa: {
manifest: {
name: 'Kompose Docs',
short_name: 'Kompose',
description: 'Kompose Documentation',
theme_color: '#f97316',
background_color: '#0a0a0a'
}
}
modules: [
'@nuxt/content',
'@nuxt/eslint',
'@nuxt/image',
'@nuxt/icon',
'@nuxt/fonts',
'@nuxt/scripts',
'nuxt-zod-i18n',
'@nuxtjs/i18n'
],
extends: ['docus']
})

View File

@@ -1,31 +1,40 @@
{
"name": "kompose-docs",
"version": "1.0.0",
"description": "Kompose Documentation Site",
"private": true,
"type": "module",
"private": true,
"scripts": {
"dev": "nuxt dev",
"build": "nuxt build",
"build": "nuxt build --extend docus",
"dev": "nuxt dev --extend docus",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
},
"dependencies": {
"@nuxt/content": "^2.13.2",
"@nuxtjs/color-mode": "^3.4.2",
"@nuxtjs/tailwindcss": "^6.12.1",
"nuxt": "^3.13.2",
"vue": "^3.5.4",
"vue-router": "^4.4.5"
"@googlemaps/markerclusterer": "^2.6.2",
"@nuxt/content": "3.7.1",
"@nuxt/eslint": "1.9.0",
"@nuxt/fonts": "0.11.4",
"@nuxt/icon": "2.0.0",
"@nuxt/image": "1.11.0",
"@nuxt/scripts": "0.12.1",
"@nuxtjs/i18n": "^10.1.0",
"@unhead/vue": "^2.0.18",
"docus": "^5.2.0",
"eslint": "^9.37.0",
"nuxt": "^4.1.3",
"nuxt-zod-i18n": "^1.12.1",
"remark-oembed": "^1.2.2",
"vue": "^3.5.22",
"vue-router": "^4.5.1",
"zod": "^3.25.76",
"zod-to-json-schema": "3.24.6"
},
"devDependencies": {
"@iconify-json/heroicons": "^1.2.0",
"@iconify-json/lucide": "^1.2.4",
"@nuxt/icon": "^1.5.2",
"@tailwindcss/typography": "^0.5.15",
"@vueuse/core": "^11.1.0",
"@vueuse/nuxt": "^11.1.0"
},
"packageManager": "pnpm@9.0.0"
"packageManager": "pnpm@10.13.1",
"pnpm": {
"onlyBuiltDependencies": [
"@tailwindcss/oxide",
"better-sqlite3",
"vue-demi"
]
}
}

View File

@@ -1,143 +0,0 @@
<template>
<div class="docs-page">
<article class="prose prose-lg max-w-none">
<ContentDoc v-slot="{ doc }">
<div>
<!-- Page header -->
<div class="mb-8 pb-8 border-b border-dark-800">
<h1 class="text-5xl font-bold gradient-text mb-4">
{{ doc.title }}
</h1>
<p v-if="doc.description" class="text-xl text-gray-400">
{{ doc.description }}
</p>
</div>
<!-- Content -->
<ContentRenderer :value="doc" class="markdown-content" />
<!-- Navigation -->
<div class="mt-16 pt-8 border-t border-dark-800 flex justify-between items-center">
<NuxtLink
v-if="doc.prev"
:to="doc.prev.path"
class="flex items-center gap-2 text-primary-400 hover:text-primary-300 transition-colors"
>
<Icon name="lucide:arrow-left" class="w-5 h-5" />
<span>{{ doc.prev.title }}</span>
</NuxtLink>
<div v-else></div>
<NuxtLink
v-if="doc.next"
:to="doc.next.path"
class="flex items-center gap-2 text-primary-400 hover:text-primary-300 transition-colors"
>
<span>{{ doc.next.title }}</span>
<Icon name="lucide:arrow-right" class="w-5 h-5" />
</NuxtLink>
<div v-else></div>
</div>
</div>
</ContentDoc>
</article>
</div>
</template>
<script setup>
definePageMeta({
layout: 'default'
})
</script>
<style scoped>
.markdown-content :deep(h2) {
@apply text-3xl font-bold text-white mt-12 mb-6 flex items-center gap-3;
}
.markdown-content :deep(h2::before) {
content: '';
@apply w-1 h-8 bg-gradient-primary rounded;
}
.markdown-content :deep(h3) {
@apply text-2xl font-semibold text-white mt-8 mb-4;
}
.markdown-content :deep(p) {
@apply text-gray-300 leading-relaxed mb-6;
}
.markdown-content :deep(ul),
.markdown-content :deep(ol) {
@apply space-y-2 mb-6;
}
.markdown-content :deep(li) {
@apply text-gray-300;
}
.markdown-content :deep(code) {
@apply bg-dark-800 text-primary-300 px-2 py-1 rounded text-sm font-mono;
}
.markdown-content :deep(pre) {
@apply bg-dark-900 border border-dark-700 rounded-lg p-6 overflow-x-auto mb-6 relative group;
}
.markdown-content :deep(pre code) {
@apply bg-transparent text-gray-300 p-0;
}
.markdown-content :deep(blockquote) {
@apply border-l-4 border-primary-500 pl-6 py-2 my-6 bg-dark-900/50 rounded-r-lg;
}
.markdown-content :deep(blockquote p) {
@apply text-gray-400 italic;
}
.markdown-content :deep(a) {
@apply text-primary-400 hover:text-primary-300 underline decoration-primary-500/30 hover:decoration-primary-400 transition-colors;
}
.markdown-content :deep(table) {
@apply w-full border-collapse mb-6;
}
.markdown-content :deep(th) {
@apply bg-dark-800 text-primary-400 font-semibold py-3 px-4 text-left border-b-2 border-primary-500/30;
}
.markdown-content :deep(td) {
@apply py-3 px-4 border-b border-dark-700;
}
.markdown-content :deep(tr:hover) {
@apply bg-white/5;
}
.markdown-content :deep(img) {
@apply rounded-lg shadow-glow-cyber my-6;
}
.markdown-content :deep(.alert) {
@apply p-4 rounded-lg mb-6 border-l-4;
}
.markdown-content :deep(.alert-info) {
@apply bg-blue-500/10 border-blue-500;
}
.markdown-content :deep(.alert-warning) {
@apply bg-yellow-500/10 border-yellow-500;
}
.markdown-content :deep(.alert-danger) {
@apply bg-red-500/10 border-red-500;
}
.markdown-content :deep(.alert-success) {
@apply bg-green-500/10 border-green-500;
}
</style>

View File

@@ -1,234 +0,0 @@
<template>
<div class="relative overflow-hidden">
<!-- Hero section -->
<section class="relative py-20 lg:py-32">
<!-- Background decorations -->
<div class="absolute top-0 left-1/4 hero-blob bg-primary-500/20 animate-float" style="animation-delay: 0s"></div>
<div class="absolute bottom-0 right-1/4 hero-blob bg-accent-500/20 animate-float" style="animation-delay: 2s"></div>
<div class="container mx-auto px-4 relative z-10">
<div class="max-w-4xl mx-auto text-center">
<!-- Main heading with gradient -->
<h1 class="text-6xl md:text-8xl font-black mb-6 gradient-text-hero">
KOMPOSE
</h1>
<p class="text-2xl md:text-3xl text-gray-300 mb-8 font-light">
Your Docker Compose Symphony Conductor
</p>
<p class="text-lg text-gray-400 mb-12 max-w-2xl mx-auto">
Manage multiple Docker Compose stacks with style and grace.
One command to rule them all, with beautiful output and powerful features.
</p>
<!-- CTA Buttons -->
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
<NuxtLink to="/docs" class="btn-primary text-lg px-8 py-4">
<span class="flex items-center gap-2">
<Icon name="lucide:book-open" class="w-5 h-5" />
Get Started
</span>
</NuxtLink>
<NuxtLink to="/docs/quick-start" class="btn-ghost text-lg px-8 py-4">
<span class="flex items-center gap-2">
<Icon name="lucide:zap" class="w-5 h-5" />
Quick Start
</span>
</NuxtLink>
</div>
<!-- Installation command -->
<div class="mt-12 glass-dark rounded-xl p-6 inline-block">
<div class="flex items-center justify-between gap-4">
<code class="text-primary-400 text-sm font-mono">
git clone https://github.com/yourusername/kompose.git
</code>
<button @click="copyCommand" class="text-gray-400 hover:text-white transition-colors">
<Icon :name="copied ? 'lucide:check' : 'lucide:copy'" class="w-5 h-5" />
</button>
</div>
</div>
</div>
</div>
</section>
<!-- Features section -->
<section class="py-20 relative">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-4xl md:text-5xl font-bold mb-4 gradient-text">
Powerful Features
</h2>
<p class="text-xl text-gray-400">
Everything you need to manage your Docker infrastructure
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div v-for="feature in features" :key="feature.title"
class="card-glow group hover:-translate-y-2">
<div class="mb-4">
<div class="w-12 h-12 rounded-lg bg-gradient-primary flex items-center justify-center">
<Icon :name="feature.icon" class="w-6 h-6 text-white" />
</div>
</div>
<h3 class="text-xl font-semibold text-white mb-3">
{{ feature.title }}
</h3>
<p class="text-gray-400">
{{ feature.description }}
</p>
</div>
</div>
</div>
</section>
<!-- Code example section -->
<section class="py-20 bg-dark-900/50">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto">
<div class="text-center mb-12">
<h2 class="text-4xl md:text-5xl font-bold mb-4 gradient-text">
Simple Yet Powerful
</h2>
<p class="text-xl text-gray-400">
Manage all your stacks with intuitive commands
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div v-for="example in examples" :key="example.title" class="card-glass">
<h3 class="text-lg font-semibold text-white mb-4 flex items-center gap-2">
<Icon name="lucide:terminal" class="w-5 h-5 text-primary-400" />
{{ example.title }}
</h3>
<pre class="bg-dark-950 p-4 rounded-lg overflow-x-auto">
<code class="text-sm text-gray-300">{{ example.code }}</code></pre>
</div>
</div>
<div class="text-center mt-12">
<NuxtLink to="/docs" class="btn-accent px-8 py-4">
<span class="flex items-center gap-2">
Explore Full Documentation
<Icon name="lucide:arrow-right" class="w-5 h-5" />
</span>
</NuxtLink>
</div>
</div>
</div>
</section>
<!-- Stats section -->
<section class="py-20">
<div class="container mx-auto px-4">
<div class="max-w-5xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
<div v-for="stat in stats" :key="stat.label"
class="text-center card-glass">
<div class="text-5xl font-bold gradient-text mb-2">
{{ stat.value }}
</div>
<div class="text-gray-400">
{{ stat.label }}
</div>
</div>
</div>
</div>
</section>
<!-- CTA section -->
<section class="py-20 relative">
<div class="absolute inset-0 bg-gradient-hero opacity-10"></div>
<div class="container mx-auto px-4 relative z-10">
<div class="max-w-3xl mx-auto text-center">
<h2 class="text-4xl md:text-5xl font-bold mb-6 text-white">
Ready to Conduct Your Docker Symphony?
</h2>
<p class="text-xl text-gray-300 mb-8">
Get started with Kompose today and simplify your Docker workflow
</p>
<NuxtLink to="/docs/installation" class="btn-primary text-lg px-8 py-4">
<span class="flex items-center gap-2">
<Icon name="lucide:download" class="w-5 h-5" />
Install Now
</span>
</NuxtLink>
</div>
</div>
</section>
</div>
</template>
<script setup>
import { ref } from 'vue'
const copied = ref(false)
const features = [
{
title: 'Stack Management',
icon: 'lucide:layers',
description: 'Manage multiple Docker Compose stacks with pattern-based selection and bulk operations.'
},
{
title: 'Database Operations',
icon: 'lucide:database',
description: 'Automated backups, smart imports, and database cleanup with PostgreSQL support.'
},
{
title: 'Hooks System',
icon: 'lucide:git-branch',
description: 'Extend functionality with custom pre/post operation hooks for each stack.'
},
{
title: 'Network Maestro',
icon: 'lucide:network',
description: 'Smart network management with CLI overrides and seamless Traefik integration.'
},
{
title: 'Environment Control',
icon: 'lucide:settings',
description: 'Override environment variables on-the-fly without editing configuration files.'
},
{
title: 'Beautiful Output',
icon: 'lucide:sparkles',
description: 'Color-coded logs, status indicators, and intuitive command-line interface.'
}
]
const examples = [
{
title: 'Start Everything',
code: './kompose.sh "*" up -d'
},
{
title: 'Export Databases',
code: './kompose.sh "*" db:export'
},
{
title: 'View Logs',
code: './kompose.sh "blog,news" logs -f'
},
{
title: 'Override Network',
code: './kompose.sh --network staging "*" up'
}
]
const stats = [
{ value: '10+', label: 'Production Stacks' },
{ value: '100%', label: 'Bash Powered' },
{ value: '1', label: 'Command to Rule Them All' }
]
const copyCommand = () => {
navigator.clipboard.writeText('git clone https://github.com/yourusername/kompose.git')
copied.value = true
setTimeout(() => {
copied.value = false
}, 2000)
}
</script>

13416
Projects/kompose/docs/pnpm-lock.yaml generated Normal file

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,3 @@
onlyBuiltDependencies:
- '@tailwindcss/oxide'
- vue-demi

View File

@@ -0,0 +1,2 @@
User-Agent: *
Disallow:

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

View File

@@ -1,168 +0,0 @@
/** @type {import('tailwindcss').Config} */
export default {
darkMode: 'class',
content: [
'./components/**/*.{js,vue,ts}',
'./layouts/**/*.vue',
'./pages/**/*.vue',
'./plugins/**/*.{js,ts}',
'./app.vue',
'./content/**/*.md'
],
theme: {
extend: {
colors: {
// Dark base colors
dark: {
50: '#f5f5f5',
100: '#e7e7e7',
200: '#d1d1d1',
300: '#b0b0b0',
400: '#888888',
500: '#6d6d6d',
600: '#5d5d5d',
700: '#4f4f4f',
800: '#454545',
900: '#3d3d3d',
950: '#0a0a0a',
},
// Orange primary colors (funky modern)
primary: {
50: '#fff7ed',
100: '#ffedd5',
200: '#fed7aa',
300: '#fdba74',
400: '#fb923c',
500: '#f97316', // Main orange
600: '#ea580c',
700: '#c2410c',
800: '#9a3412',
900: '#7c2d12',
950: '#431407',
},
// Purple accent colors
accent: {
50: '#faf5ff',
100: '#f3e8ff',
200: '#e9d5ff',
300: '#d8b4fe',
400: '#c084fc',
500: '#a855f7', // Main purple
600: '#9333ea',
700: '#7e22ce',
800: '#6b21a8',
900: '#581c87',
950: '#3b0764',
},
// Complementary colors
cyber: {
pink: '#ff0080',
cyan: '#00f5ff',
lime: '#39ff14'
}
},
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
'gradient-primary': 'linear-gradient(135deg, #f97316 0%, #fb923c 100%)',
'gradient-accent': 'linear-gradient(135deg, #a855f7 0%, #c084fc 100%)',
'gradient-hero': 'linear-gradient(135deg, #f97316 0%, #a855f7 50%, #7e22ce 100%)',
'gradient-cyber': 'linear-gradient(135deg, #f97316 0%, #ff0080 50%, #a855f7 100%)',
'gradient-dark': 'linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 100%)',
'gradient-shine': 'linear-gradient(90deg, transparent, rgba(249, 115, 22, 0.3), transparent)',
},
animation: {
'gradient': 'gradient 8s linear infinite',
'gradient-xy': 'gradient-xy 15s ease infinite',
'shimmer': 'shimmer 2s linear infinite',
'glow': 'glow 2s ease-in-out infinite alternate',
'float': 'float 6s ease-in-out infinite',
'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
},
keyframes: {
gradient: {
'0%, 100%': {
'background-size': '200% 200%',
'background-position': 'left center'
},
'50%': {
'background-size': '200% 200%',
'background-position': 'right center'
},
},
'gradient-xy': {
'0%, 100%': {
'background-size': '400% 400%',
'background-position': 'left center'
},
'50%': {
'background-size': '200% 200%',
'background-position': 'right center'
},
},
shimmer: {
'0%': { transform: 'translateX(-100%)' },
'100%': { transform: 'translateX(100%)' }
},
glow: {
'from': {
'text-shadow': '0 0 10px #f97316, 0 0 20px #f97316, 0 0 30px #f97316',
},
'to': {
'text-shadow': '0 0 20px #a855f7, 0 0 30px #a855f7, 0 0 40px #a855f7',
}
},
float: {
'0%, 100%': { transform: 'translateY(0px)' },
'50%': { transform: 'translateY(-20px)' }
}
},
boxShadow: {
'glow-orange': '0 0 20px rgba(249, 115, 22, 0.5)',
'glow-purple': '0 0 20px rgba(168, 85, 247, 0.5)',
'glow-cyber': '0 0 30px rgba(249, 115, 22, 0.3), 0 0 60px rgba(168, 85, 247, 0.3)',
'inner-glow': 'inset 0 0 20px rgba(249, 115, 22, 0.2)',
},
typography: (theme) => ({
DEFAULT: {
css: {
'--tw-prose-body': theme('colors.gray[300]'),
'--tw-prose-headings': theme('colors.white'),
'--tw-prose-links': theme('colors.primary[400]'),
'--tw-prose-bold': theme('colors.white'),
'--tw-prose-code': theme('colors.primary[300]'),
'--tw-prose-pre-bg': theme('colors.dark[900]'),
maxWidth: 'none',
color: theme('colors.gray[300]'),
a: {
color: theme('colors.primary[400]'),
'&:hover': {
color: theme('colors.primary[500]'),
},
},
'code::before': {
content: '""'
},
'code::after': {
content: '""'
},
code: {
color: theme('colors.primary[300]'),
backgroundColor: theme('colors.dark[800]'),
padding: '0.25rem 0.5rem',
borderRadius: '0.25rem',
fontWeight: '500',
},
pre: {
backgroundColor: theme('colors.dark[900]'),
border: `1px solid ${theme('colors.dark[700]')}`,
}
}
}
})
},
},
plugins: [
require('@tailwindcss/typography'),
],
}

View File

@@ -1,3 +1,18 @@
{
"extends": "./.nuxt/tsconfig.json"
// https://nuxt.com/docs/guide/concepts/typescript
"files": [],
"references": [
{
"path": "./.nuxt/tsconfig.app.json"
},
{
"path": "./.nuxt/tsconfig.server.json"
},
{
"path": "./.nuxt/tsconfig.shared.json"
},
{
"path": "./.nuxt/tsconfig.node.json"
}
]
}