Files
William Valentin c48cd87d16
Some checks failed
Build Multi-Arch Container Image / test (push) Has been cancelled
Build Multi-Arch Container Image / build-and-push (push) Has been cancelled
Build Multi-Arch Container Image / security-scan (push) Has been cancelled
Build Multi-Arch Container Image / deploy-staging (push) Has been cancelled
Build Multi-Arch Container Image / deploy-production (push) Has been cancelled
Nightly Build / notify-results (push) Has been cancelled
Nightly Build / check-changes (push) Has been cancelled
Nightly Build / nightly-tests (3.10) (push) Has been cancelled
Nightly Build / nightly-tests (3.11) (push) Has been cancelled
Nightly Build / nightly-tests (3.12) (push) Has been cancelled
Nightly Build / nightly-tests (3.8) (push) Has been cancelled
Nightly Build / nightly-tests (3.9) (push) Has been cancelled
Nightly Build / build-nightly (push) Has been cancelled
Nightly Build / performance-test (push) Has been cancelled
Nightly Build / security-scan-nightly (push) Has been cancelled
Nightly Build / cleanup-old-nightlies (push) Has been cancelled
feat(frontend): add theme switcher with light dark and system modes
2025-09-21 20:28:33 -07:00

402 lines
17 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CLI - {{ app_name }}</title>
<link rel="icon" type="image/svg+xml" href="/static/img/favicon.svg" />
<link rel="icon" type="image/svg+xml" sizes="16x16" href="/static/img/favicon-16x16.svg" />
<link rel="alternate icon" href="/static/img/favicon.svg" />
<link rel="apple-touch-icon" href="/static/img/icon-192x192.svg" />
<link rel="manifest" href="/static/img/site.webmanifest" />
<meta name="theme-color" content="#0d6efd" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-title" content="{{ app_name }}" />
<script>
(function () {
const storageKey = 'unitforge-theme';
try {
const stored = localStorage.getItem(storageKey);
const theme = stored === 'light' || stored === 'dark' ? stored : 'system';
const root = document.documentElement;
root.setAttribute('data-theme-preference', theme);
if (theme === 'light' || theme === 'dark') {
root.setAttribute('data-theme', theme);
} else {
root.removeAttribute('data-theme');
}
const meta = document.querySelector('meta[name="theme-color"]');
if (meta) {
const prefersDark = typeof window !== 'undefined' &&
window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches;
const appliedTheme = theme === 'system' ? (prefersDark ? 'dark' : 'light') : theme;
meta.setAttribute('content', appliedTheme === 'dark' ? '#0b1120' : '#0d6efd');
}
} catch (error) {
console.warn('Theme bootstrap failed:', error);
}
})();
</script>
<meta name="description" content="{{ app_name }} CLI — command-line interface to create, validate, and manage systemd unit files." />
<link href="/static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="/static/vendor/fontawesome/css/all.min.css" />
<link href="/static/css/style.css" rel="stylesheet" />
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="/">
<i class="fas fa-cogs me-2"></i>{{ app_name }}
</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/editor">Editor</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/templates">Templates</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="/cli">CLI</a>
</li>
</ul>
<ul class="navbar-nav align-items-lg-center gap-2 mt-3 mt-lg-0 ms-lg-3">
<li class="nav-item dropdown">
<button
class="btn btn-outline-light dropdown-toggle w-100 w-lg-auto"
id="themeDropdown"
type="button"
data-bs-toggle="dropdown"
aria-expanded="false"
data-theme-toggle
>
<i class="fas fa-circle-half-stroke me-2" data-theme-icon></i>
<span data-theme-label>System</span>
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
<li>
<button
class="dropdown-item d-flex align-items-center"
type="button"
data-theme-option="light"
role="menuitemradio"
aria-checked="false"
>
<i class="fas fa-sun me-2 text-warning"></i>
Light
</button>
</li>
<li>
<button
class="dropdown-item d-flex align-items-center"
type="button"
data-theme-option="dark"
role="menuitemradio"
aria-checked="false"
>
<i class="fas fa-moon me-2 text-info"></i>
Dark
</button>
</li>
<li>
<button
class="dropdown-item d-flex align-items-center"
type="button"
data-theme-option="system"
role="menuitemradio"
aria-checked="true"
>
<i class="fas fa-circle-half-stroke me-2 text-secondary"></i>
System
</button>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ api_docs_url }}" target="_blank">
<i class="fas fa-book me-1"></i>API Docs
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ github_url }}" target="_blank">
<i class="fab fa-github me-1"></i>GitHub
</a>
</li>
</ul>
</div>
</div>
</nav>
<header class="hero-section bg-light py-5">
<div class="container">
<div class="row align-items-center g-4">
<div class="col-lg-7">
<h1 class="display-5 fw-bold mb-3">
<i class="fas fa-terminal me-2"></i>{{ app_name }} CLI
</h1>
<p class="lead mb-4">
A powerful command-line interface to create, validate, and manage systemd unit files.
The CLI ships with the backend sub-project and uses the same reliable core as the web app.
</p>
<div class="d-flex gap-3">
<a href="{{ github_url }}" target="_blank" class="btn btn-primary">
<i class="fab fa-github me-2"></i>View on GitHub
</a>
<a href="#install" class="btn btn-outline-primary">
<i class="fas fa-download me-2"></i>Installation
</a>
</div>
</div>
<div class="col-lg-5">
<div class="card border-0 shadow-sm code-preview">
<div class="card-header text-white" style="background: linear-gradient(135deg, var(--primary-color), #0b5ed7);">
<div class="d-flex align-items-center justify-content-between">
<div>
<i class="fas fa-rocket me-2"></i>
<strong>Quick Start</strong>
</div>
<span class="badge bg-light text-primary">CLI</span>
</div>
</div>
<div class="card-body">
<pre class="mb-0"><code># From the repository root
pip install -e .
# Show help
unitforge --help
# Validate a unit file
unitforge validate /etc/systemd/system/myapp.service -v -w
</code></pre>
</div>
</div>
</div>
</div>
</div>
</header>
<main class="container my-5">
<section id="install" class="mb-5">
<h2 class="h3 mb-3">Installation</h2>
<div class="row g-4">
<div class="col-md-6">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body">
<h3 class="h5">From repository (editable)</h3>
<p class="text-muted mb-3">
Install directly from the repository so changes are picked up automatically.
</p>
<pre class="bg-dark text-light p-3 rounded"><code>pip install -e .</code></pre>
<button class="btn btn-sm btn-outline-light mt-2" data-copy="pip install -e .">
<i class="fas fa-copy me-1"></i>Copy
</button>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body">
<h3 class="h5">Verify installation</h3>
<p class="text-muted mb-3">
Use the built-in version and help commands to confirm the CLI is available.
</p>
<pre class="bg-dark text-light p-3 rounded"><code>unitforge --version
unitforge --help</code></pre>
<div class="d-flex gap-2 mt-2">
<button class="btn btn-sm btn-outline-light" data-copy="unitforge --version">
<i class="fas fa-copy me-1"></i>Copy version
</button>
<button class="btn btn-sm btn-outline-light" data-copy="unitforge --help">
<i class="fas fa-copy me-1"></i>Copy help
</button>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="commands" class="mb-5">
<h2 class="h3 mb-3">Common Commands</h2>
<div class="row g-4">
<div class="col-lg-6">
<div class="card border-0 shadow-sm h-100">
<div class="card-body">
<h3 class="h5"><i class="fas fa-check-circle text-success me-2"></i>Validate</h3>
<p class="text-muted">
Validate an existing systemd unit file. Add <code>-v</code> for verbose
details and <code>-w</code> to include warnings.
</p>
<pre class="bg-dark text-light p-3 rounded"><code>unitforge validate /etc/systemd/system/myapp.service -v -w</code></pre>
<button class="btn btn-sm btn-outline-light" data-copy="unitforge validate /etc/systemd/system/myapp.service -v -w">
<i class="fas fa-copy me-1"></i>Copy
</button>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card border-0 shadow-sm h-100">
<div class="card-body">
<h3 class="h5"><i class="fas fa-plus-circle text-primary me-2"></i>Create</h3>
<p class="text-muted">
Create a new unit file from scratch with helpful flags and validation.
</p>
<pre class="bg-dark text-light p-3 rounded"><code>unitforge create \
--type service \
--name myapp \
--exec-start "/usr/bin/myapp" \
--restart on-failure \
--output myapp.service \
--validate-output</code></pre>
<button class="btn btn-sm btn-outline-light" data-copy="unitforge create --type service --name myapp --exec-start &quot;/usr/bin/myapp&quot; --restart on-failure --output myapp.service --validate-output">
<i class="fas fa-copy me-1"></i>Copy
</button>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card border-0 shadow-sm h-100">
<div class="card-body">
<h3 class="h5"><i class="fas fa-layer-group text-info me-2"></i>Templates</h3>
<p class="text-muted mb-2">
Explore and generate units from curated templates.
</p>
<pre class="bg-dark text-light p-3 rounded"><code># List templates
unitforge template list
# Show details
unitforge template show webapp
# Generate (non-interactive)
unitforge template generate webapp \
--param name=mywebapp \
--param exec_start="/usr/bin/node server.js" \
--param user=www-data \
--param working_directory=/opt/mywebapp \
--validate-output
# Generate (interactive)
unitforge template generate webapp --interactive</code></pre>
<div class="d-flex gap-2 mt-2">
<button class="btn btn-sm btn-outline-light" data-copy="unitforge template list">
<i class="fas fa-copy me-1"></i>Copy list
</button>
<button class="btn btn-sm btn-outline-light" data-copy="unitforge template show webapp">
<i class="fas fa-copy me-1"></i>Copy show
</button>
<button class="btn btn-sm btn-outline-light" data-copy="unitforge template generate webapp --interactive">
<i class="fas fa-copy me-1"></i>Copy interactive
</button>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card border-0 shadow-sm h-100">
<div class="card-body">
<h3 class="h5"><i class="fas fa-info-circle text-secondary me-2"></i>Info</h3>
<p class="text-muted">
Extract metadata and section/key counts from a unit file.
</p>
<pre class="bg-dark text-light p-3 rounded"><code>unitforge info myapp.service</code></pre>
<button class="btn btn-sm btn-outline-light" data-copy="unitforge info myapp.service">
<i class="fas fa-copy me-1"></i>Copy
</button>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="card border-0 shadow-sm">
<div class="card-body">
<h3 class="h5"><i class="fas fa-edit text-warning me-2"></i>Edit</h3>
<p class="text-muted">
Modify values in an existing unit file by setting or removing keys.
</p>
<pre class="bg-dark text-light p-3 rounded"><code>unitforge edit source.service dest.service \
--set Service.ExecStart=/usr/bin/myapp \
--set Unit.Description="My Service" \
--remove Service.Environment \
--validate-output</code></pre>
<button class="btn btn-sm btn-outline-light" data-copy="unitforge edit source.service dest.service --set Service.ExecStart=/usr/bin/myapp --set Unit.Description=&quot;My Service&quot; --remove Service.Environment --validate-output">
<i class="fas fa-copy me-1"></i>Copy
</button>
</div>
</div>
</div>
</div>
</section>
<section id="tips" class="mb-5">
<h2 class="h3 mb-3">Tips</h2>
<ul class="list-group">
<li class="list-group-item">
Use <code>--validate-output</code> after generation or editing to catch issues early.
</li>
<li class="list-group-item">
Prefer interactive template generation (<code>--interactive</code>) to fill required fields smoothly.
</li>
<li class="list-group-item">
The CLI is part of the backend package. See the repository for the backend/CLI source:
<a href="{{ github_url }}" target="_blank">{{ github_url }}</a>
</li>
</ul>
</section>
</main>
<footer class="bg-dark text-light py-4 mt-5">
<div class="container">
<div class="row">
<div class="col-md-6">
<p class="fw-bold mb-0"><i class="fas fa-cogs me-2"></i>{{ app_name }}</p>
<p class="text-muted small">{{ app_description }}.</p>
</div>
<div class="col-md-6 text-md-end">
<div class="d-flex justify-content-md-end gap-3">
<a href="{{ api_docs_url }}" class="text-light text-decoration-none">
<i class="fas fa-book me-1"></i>API Docs
</a>
<a href="{{ github_url }}" class="text-light text-decoration-none">
<i class="fab fa-github me-1"></i>GitHub
</a>
</div>
<div class="mt-2 small">
<span class="me-2">
<i class="fas fa-code-branch me-1"></i>Open Source
<span class="badge bg-success ms-2">OSI</span>
</span>
<span>
Licensed under
<a href="https://www.gnu.org/licenses/gpl-3.0.en.html" target="_blank" rel="noopener" class="text-decoration-underline text-light">GPL-3.0-or-later</a>
</span>
</div>
</div>
</div>
</div>
</footer>
<script src="/static/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="/static/js/main.js"></script>
</body>
</html>