kmuc-dev-cli
Version:
Complete development CLI for modern web projects - From init to deploy, Docker, CI/CD, testing, and more
571 lines (501 loc) • 18.6 kB
HTML
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KMUC Dev CLI - Dokumentation v2.1.0</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
--primary: #6366f1;
--secondary: #8b5cf6;
--accent: #ec4899;
--bg-dark: #0f172a;
--bg-card: #1e293b;
--text: #f1f5f9;
--text-dim: #94a3b8;
--border: #334155;
--success: #10b981;
--warning: #f59e0b;
}
body {
font-family: 'Segoe UI', sans-serif;
background: linear-gradient(135deg, var(--bg-dark) 0%, #1a202c 100%);
color: var(--text);
line-height: 1.6;
}
.container { max-width: 1200px; margin: 0 auto; padding: 2rem; }
header {
text-align: center;
padding: 3rem 0;
border-bottom: 2px solid var(--border);
margin-bottom: 2rem;
}
.logo { font-size: 3rem; margin-bottom: 1rem; }
h1 {
font-size: 2.5rem;
background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.version-badge {
display: inline-block;
padding: 0.25rem 1rem;
background: var(--primary);
border-radius: 1rem;
font-size: 0.85rem;
margin-top: 1rem;
}
.section {
background: var(--bg-card);
border-radius: 1rem;
padding: 2rem;
margin-bottom: 2rem;
border: 1px solid var(--border);
}
h2 {
color: var(--primary);
font-size: 2rem;
margin-bottom: 1.5rem;
}
h3 {
color: var(--secondary);
font-size: 1.3rem;
margin: 1.5rem 0 1rem 0;
}
.command-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 1.5rem;
margin: 2rem 0;
}
.command-card {
background: var(--bg-dark);
padding: 1.5rem;
border-radius: 0.75rem;
border: 1px solid var(--border);
}
.command-card h4 {
color: var(--primary);
font-size: 1.2rem;
margin-bottom: 0.5rem;
}
.command-card code {
background: rgba(99, 102, 241, 0.1);
padding: 0.2rem 0.5rem;
border-radius: 0.25rem;
color: var(--accent);
font-size: 0.9rem;
}
.new-badge {
background: var(--success);
color: white;
padding: 0.15rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.75rem;
margin-left: 0.5rem;
}
.code-block {
background: var(--bg-dark);
border: 1px solid var(--border);
border-radius: 0.5rem;
padding: 1rem;
margin: 1rem 0;
overflow-x: auto;
}
.code-block code {
color: var(--success);
font-family: 'Courier New', monospace;
}
.feature-list {
list-style: none;
padding-left: 0;
}
.feature-list li {
padding: 0.5rem 0;
padding-left: 1.5rem;
position: relative;
}
.feature-list li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--success);
font-weight: bold;
}
footer {
text-align: center;
padding: 2rem 0;
color: var(--text-dim);
border-top: 1px solid var(--border);
margin-top: 3rem;
}
.search-container {
max-width: 600px;
margin: 2rem auto;
}
.search-box {
width: 100%;
padding: 1rem 1.5rem;
background: var(--bg-card);
border: 2px solid var(--border);
border-radius: 2rem;
color: var(--text);
font-size: 1rem;
outline: none;
transition: all 0.3s;
}
.search-box:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.search-box::placeholder {
color: var(--text-dim);
}
.hidden {
display: none ;
}
.highlight {
background-color: rgba(236, 72, 153, 0.3);
padding: 0.1rem 0.2rem;
border-radius: 0.2rem;
}
.no-results {
text-align: center;
padding: 3rem;
color: var(--text-dim);
}
</style>
</head>
<body>
<div class="container">
<header>
<div class="logo">🚀</div>
<h1>KMUC Dev CLI</h1>
<p style="color: var(--text-dim); margin-top: 0.5rem;">
Complete development toolkit from init to deploy
</p>
<span class="version-badge">v2.1.0</span>
<div class="search-container">
<input
type="text"
id="searchBox"
class="search-box"
placeholder="🔍 Suche nach Befehlen, Features oder Technologien..."
autocomplete="off"
/>
</div>
</header>
<div id="noResults" class="no-results hidden">
<h3>Keine Ergebnisse gefunden</h3>
<p>Versuche einen anderen Suchbegriff</p>
</div>
<section class="section">
<h2>📚 Core Commands</h2>
<h3>Project Lifecycle</h3>
<div class="command-grid">
<div class="command-card">
<h4><code>kmuc init</code></h4>
<p>Interaktive Projekt-Initialisierung mit Docker-Setup</p>
<ul class="feature-list">
<li>Dockerfile generieren</li>
<li>docker-compose.yml erstellen</li>
<li>Framework-spezifisch optimiert</li>
</ul>
</div>
<div class="command-card">
<h4><code>kmuc publish</code></h4>
<p>Build & deploy automatisch</p>
<ul class="feature-list">
<li>Docker Images bauen</li>
<li>Container starten</li>
<li>Status prüfen</li>
</ul>
</div>
<div class="command-card">
<h4><code>kmuc dev</code></h4>
<p>Development Mode starten</p>
<ul class="feature-list">
<li>Hot-reload mit Volumes</li>
<li>Debug-Ports (9229, 5678)</li>
<li>Live log streaming</li>
</ul>
</div>
</div>
<h3>Container Management</h3>
<div class="command-grid">
<div class="command-card">
<h4><code>kmuc status [--watch]</code></h4>
<p>Container Status Dashboard</p>
<ul class="feature-list">
<li>CPU & Memory usage</li>
<li>Health indicators</li>
<li>Live updates (--watch)</li>
</ul>
</div>
<div class="command-card">
<h4><code>kmuc logs [--detailed]</code></h4>
<p>Intelligente Log-Ansicht</p>
<ul class="feature-list">
<li>Gefiltert nach Wichtigkeit</li>
<li>Farbcodiert</li>
<li>Detaillierte Option</li>
</ul>
</div>
<div class="command-card">
<h4><code>kmuc update [--force]</code></h4>
<p>Smart Image Updates</p>
<ul class="feature-list">
<li>Prüft Verfügbarkeit</li>
<li>Auto-Backup</li>
<li>Rolling updates</li>
</ul>
</div>
<div class="command-card">
<h4><code>kmuc clean [--all]</code></h4>
<p>Docker Ressourcen aufräumen</p>
<ul class="feature-list">
<li>Interaktive Auswahl</li>
<li>Stopped containers</li>
<li>Dangling images</li>
</ul>
</div>
</div>
<h3>Database Tools</h3>
<div class="command-grid">
<div class="command-card">
<h4><code>kmuc db:connect</code></h4>
<p>Auto-connect zur Datenbank</p>
<ul class="feature-list">
<li>Auto-Detection (PostgreSQL, MongoDB, MySQL, Redis)</li>
<li>Credentials aus .env</li>
<li>Richtige CLI öffnen</li>
</ul>
</div>
<div class="command-card">
<h4><code>kmuc backup</code></h4>
<p>Backup-System</p>
<ul class="feature-list">
<li>Create/Restore/List/Delete</li>
<li>Container + Volumes + DB</li>
<li>Timestamped snapshots</li>
</ul>
</div>
</div>
<h3>Monitoring & Health</h3>
<div class="command-grid">
<div class="command-card">
<h4><code>kmuc health</code></h4>
<p>System Health Check</p>
<ul class="feature-list">
<li>Docker Engine check</li>
<li>Container status</li>
<li>Database health</li>
<li>Port checks</li>
<li>Disk space</li>
</ul>
</div>
</div>
<h3>SSL Management</h3>
<div class="command-grid">
<div class="command-card">
<h4><code>kmuc ssl:status</code></h4>
<p>Zertifikat Status</p>
<ul class="feature-list">
<li>Ablaufdatum anzeigen</li>
<li>Warnung bei bald ablaufend</li>
</ul>
</div>
<div class="command-card">
<h4><code>kmuc ssl:renew</code></h4>
<p>SSL erneuern</p>
<ul class="feature-list">
<li>Let's Encrypt integration</li>
<li>Auto/Manual/Dry-run</li>
</ul>
</div>
<div class="command-card">
<h4><code>kmuc ssl:auto</code></h4>
<p>Auto-Renewal Setup</p>
<ul class="feature-list">
<li>Cron-Job einrichten</li>
<li>Zeitplan konfigurieren</li>
</ul>
</div>
</div>
<h3>CI/CD Integration</h3>
<div class="command-grid">
<div class="command-card">
<h4><code>kmuc ci:github</code></h4>
<p>GitHub Actions Generator</p>
<ul class="feature-list">
<li>Test/Build/Deploy Workflow</li>
<li>Docker Hub Push</li>
<li>Auto-detect Projekt-Typ</li>
</ul>
</div>
<div class="command-card">
<h4><code>kmuc ci:gitlab</code></h4>
<p>GitLab CI Generator</p>
<ul class="feature-list">
<li>Multi-stage Pipeline</li>
<li>Registry Integration</li>
</ul>
</div>
</div>
</section>
<section class="section">
<h2>🚀 Quick Start</h2>
<div class="code-block">
<code>
# 1. Initialize project<br>
cd my-project<br>
kmuc init<br>
<br>
# 2. Deploy<br>
kmuc publish<br>
<br>
# 3. Monitor<br>
kmuc status --watch
</code>
</div>
</section>
<section class="section">
<h2>🛠️ Common Workflows</h2>
<h3>Daily Development</h3>
<div class="code-block">
<code>
kmuc dev # Start dev environment<br>
kmuc logs # Watch logs<br>
kmuc status # Check status
</code>
</div>
<h3>Before Deployment</h3>
<div class="code-block">
<code>
kmuc health # Verify all healthy<br>
kmuc backup # Create backup<br>
kmuc update # Get latest images<br>
kmuc publish # Deploy
</code>
</div>
<h3>Maintenance</h3>
<div class="code-block">
<code>
kmuc ssl:renew # Renew certificates<br>
kmuc clean # Free up space<br>
kmuc status # Verify everything running
</code>
</div>
</section>
<section class="section">
<h2>🎨 Supported Technologies</h2>
<h3>Frameworks</h3>
<ul class="feature-list">
<li>Express.js, Next.js, React (Vite), Node.js</li>
<li>Static sites with nginx</li>
</ul>
<h3>Databases</h3>
<ul class="feature-list">
<li>PostgreSQL 16 Alpine</li>
<li>MongoDB 7</li>
<li>MySQL 8</li>
<li>Redis 7 Alpine</li>
</ul>
<h3>Infrastructure</h3>
<ul class="feature-list">
<li>Docker & Docker Compose</li>
<li>nginx Reverse Proxy</li>
<li>Let's Encrypt SSL/TLS</li>
<li>GitHub Actions & GitLab CI</li>
</ul>
</section>
<footer>
<p><strong>KMUC Dev CLI</strong> v2.1.0</p>
<p style="margin-top: 0.5rem;">Made with ❤️ by KMUC Digital</p>
<p style="margin-top: 0.5rem; color: var(--text-dim);">
MIT License - Private & Non-Commercial Use Only
</p>
</footer>
</div>
<script>
const searchBox = document.getElementById('searchBox');
const sections = document.querySelectorAll('.section');
const commandCards = document.querySelectorAll('.command-card');
const noResults = document.getElementById('noResults');
searchBox.addEventListener('input', function(e) {
const searchTerm = e.target.value.toLowerCase().trim();
if (searchTerm === '') {
// Zeige alles
sections.forEach(section => section.classList.remove('hidden'));
commandCards.forEach(card => card.classList.remove('hidden'));
noResults.classList.add('hidden');
removeHighlights();
return;
}
let hasResults = false;
// Durchsuche alle Command Cards
commandCards.forEach(card => {
const text = card.textContent.toLowerCase();
if (text.includes(searchTerm)) {
card.classList.remove('hidden');
hasResults = true;
highlightText(card, searchTerm);
} else {
card.classList.add('hidden');
removeHighlights(card);
}
});
// Zeige/Verstecke Sections basierend auf sichtbaren Cards
sections.forEach(section => {
const visibleCards = section.querySelectorAll('.command-card:not(.hidden)');
if (visibleCards.length > 0) {
section.classList.remove('hidden');
} else {
section.classList.add('hidden');
}
});
// Zeige "Keine Ergebnisse" wenn nichts gefunden
if (!hasResults) {
noResults.classList.remove('hidden');
} else {
noResults.classList.add('hidden');
}
});
function highlightText(element, term) {
// Entferne alte Highlights
removeHighlights(element);
const walker = document.createTreeWalker(
element,
NodeFilter.SHOW_TEXT,
null,
false
);
const nodesToReplace = [];
while (walker.nextNode()) {
const node = walker.currentNode;
if (node.nodeValue.toLowerCase().includes(term)) {
nodesToReplace.push(node);
}
}
nodesToReplace.forEach(node => {
const text = node.nodeValue;
const regex = new RegExp(`(${term})`, 'gi');
const highlighted = text.replace(regex, '<span class="highlight">$1</span>');
const span = document.createElement('span');
span.innerHTML = highlighted;
node.parentNode.replaceChild(span, node);
});
}
function removeHighlights(element = document.body) {
const highlights = element.querySelectorAll('.highlight');
highlights.forEach(highlight => {
const parent = highlight.parentNode;
parent.replaceChild(document.createTextNode(highlight.textContent), highlight);
parent.normalize();
});
}
</script>
</body>
</html>