valknar/home
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: docus

Browse Source
This commit is contained in:
Sebastian Krüger
2025-10-08 13:54:19 +02:00
parent 47539d8cc8
commit 223cc2ac6a
31 changed files with 2476 additions and 1820 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
Projects/kompose/docs/pages/docs/[...slug].vue Normal file
View File

@@ -0,0 +1,143 @@
<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>

234
Projects/kompose/docs/pages/index.vue Normal file
View File

@@ -0,0 +1,234 @@
<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>