fbe1a7c95c
Tutorials covering: - Getting Started (setup wizard, timezone, deployment modes) - Theme Customization (theme builder, presets, color customization) - Viewing Logs (log viewer, live streaming, filtering) - Quick Search (keyboard shortcuts, navigation) - Backup & Restore (manual/automated backup, restore workflow) - Stats Monitoring (resource monitor, live stats, alerts) Also includes: - Self-contained HTML getting started guide - 30+ screenshots capturing UI workflows - Issues/notes documenting test instance observations Workflows documented: - Light theme screenshots - Dark theme screenshots (partial - theme builder) - App selector (noted as empty in test instance) - Theme builder modal - Logs viewer - Quick search - Backup modal - Stats monitoring Total: 6 tutorial files, 30+ screenshots, 1 HTML guide
386 lines
11 KiB
HTML
386 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>DashCaddy Getting Started Guide</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
|
|
line-height: 1.6;
|
|
color: #333;
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
.container {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
padding: 2rem;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 0.5rem;
|
|
color: #1a1a2e;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.8rem;
|
|
margin-top: 2rem;
|
|
margin-bottom: 1rem;
|
|
color: #1a1a2e;
|
|
border-bottom: 2px solid #ddd;
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.3rem;
|
|
margin-top: 1.5rem;
|
|
margin-bottom: 0.75rem;
|
|
color: #333;
|
|
}
|
|
|
|
p {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.intro {
|
|
font-size: 1.1rem;
|
|
color: #666;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.toc {
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
padding: 1.5rem;
|
|
margin-bottom: 2rem;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.toc h2 {
|
|
margin-top: 0;
|
|
border-bottom: none;
|
|
}
|
|
|
|
.toc ul {
|
|
list-style: none;
|
|
}
|
|
|
|
.toc li {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.toc a {
|
|
color: #0066cc;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.toc a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.feature-card {
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
padding: 1.5rem;
|
|
margin-bottom: 1.5rem;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.feature-card h3 {
|
|
margin-top: 0;
|
|
color: #0066cc;
|
|
}
|
|
|
|
.feature-card p {
|
|
color: #666;
|
|
}
|
|
|
|
.feature-link {
|
|
display: inline-block;
|
|
margin-top: 0.5rem;
|
|
color: #0066cc;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.feature-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
ul, ol {
|
|
margin-left: 1.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
li {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
code {
|
|
background: #f0f0f0;
|
|
padding: 0.2rem 0.4rem;
|
|
border-radius: 3px;
|
|
font-family: 'Monaco', 'Consolas', monospace;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
kbd {
|
|
background: #e0e0e0;
|
|
padding: 0.2rem 0.5rem;
|
|
border-radius: 3px;
|
|
font-family: 'Monaco', 'Consolas', monospace;
|
|
font-size: 0.85rem;
|
|
border: 1px solid #ccc;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
th, td {
|
|
padding: 0.75rem;
|
|
text-align: left;
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
|
|
th {
|
|
background: #f5f5f5;
|
|
font-weight: 600;
|
|
}
|
|
|
|
blockquote {
|
|
border-left: 4px solid #0066cc;
|
|
padding-left: 1rem;
|
|
margin: 1rem 0;
|
|
color: #666;
|
|
font-style: italic;
|
|
}
|
|
|
|
.shortcut-table td:first-child {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
footer {
|
|
text-align: center;
|
|
margin-top: 3rem;
|
|
padding-top: 1rem;
|
|
border-top: 1px solid #ddd;
|
|
color: #666;
|
|
font-size: 0.9rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>DashCaddy Getting Started Guide</h1>
|
|
<p class="intro">A practical guide to getting started with DashCaddy — the self-hosted app dashboard.</p>
|
|
|
|
<div class="toc">
|
|
<h2>Table of Contents</h2>
|
|
<ul>
|
|
<li><a href="#getting-started">Getting Started</a> — First-time setup and configuration</li>
|
|
<li><a href="#theme-customization">Theme Customization</a> — Customize the dashboard appearance</li>
|
|
<li><a href="#viewing-logs">Viewing Logs</a> — Monitor service logs in real-time</li>
|
|
<li><a href="#quick-search">Quick Search</a> — Fast access to services and settings</li>
|
|
<li><a href="#backup-restore">Backup & Restore</a> — Protect your configuration</li>
|
|
<li><a href="#monitoring">Monitoring Resources</a> — Track CPU, memory, and disk usage</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<h2 id="getting-started">Getting Started</h2>
|
|
<div class="feature-card">
|
|
<h3>First-Time Setup</h3>
|
|
<p>Learn how to log in, configure your timezone, and choose a deployment mode.</p>
|
|
<p><strong>What you'll learn:</strong></p>
|
|
<ul>
|
|
<li>How to log in with TOTP authentication</li>
|
|
<li>How to select your timezone</li>
|
|
<li>How to choose a deployment mode (Simple, Home Lab, Public, Custom)</li>
|
|
<li>How to complete or skip the initial setup wizard</li>
|
|
</ul>
|
|
<a class="feature-link" href="tutorials/01-getting-started.html">Read full tutorial →</a>
|
|
</div>
|
|
|
|
<h2 id="theme-customization">Theme Customization</h2>
|
|
<div class="feature-card">
|
|
<h3>Customize the Dashboard</h3>
|
|
<p>Make DashCaddy your own with custom themes and colors.</p>
|
|
<p><strong>What you'll learn:</strong></p>
|
|
<ul>
|
|
<li>How to open the Theme Builder</li>
|
|
<li>How to use preset themes (Dark, Light, Nord, Dracula, etc.)</li>
|
|
<li>How to customize colors for backgrounds, text, accents, and status indicators</li>
|
|
<li>How to save, import, and export themes</li>
|
|
</ul>
|
|
<a class="feature-link" href="tutorials/02-theme-customization.html">Read full tutorial →</a>
|
|
</div>
|
|
|
|
<h2 id="viewing-logs">Viewing Logs</h2>
|
|
<div class="feature-card">
|
|
<h3>Monitor Service Logs</h3>
|
|
<p>Monitor your services with real-time log streaming.</p>
|
|
<p><strong>What you'll learn:</strong></p>
|
|
<ul>
|
|
<li>How to access the logs viewer</li>
|
|
<li>How to navigate and filter log entries</li>
|
|
<li>How to use live log streaming</li>
|
|
<li>How to control the number of displayed log lines</li>
|
|
</ul>
|
|
<a class="feature-link" href="tutorials/03-viewing-logs.html">Read full tutorial →</a>
|
|
</div>
|
|
|
|
<h2 id="quick-search">Quick Search</h2>
|
|
<div class="feature-card">
|
|
<h3>Fast Access to Everything</h3>
|
|
<p>Find services and settings instantly.</p>
|
|
<p><strong>What you'll learn:</strong></p>
|
|
<ul>
|
|
<li>How to open Quick Search (<kbd>Ctrl+K</kbd> / <kbd>Cmd+K</kbd>)</li>
|
|
<li>How to search for services and settings</li>
|
|
<li>How to navigate and select results with keyboard shortcuts</li>
|
|
</ul>
|
|
<a class="feature-link" href="tutorials/04-quick-search.html">Read full tutorial →</a>
|
|
</div>
|
|
|
|
<h2 id="backup-restore">Backup & Restore</h2>
|
|
<div class="feature-card">
|
|
<h3>Protect Your Configuration</h3>
|
|
<p>Create full backups of your entire DashCaddy setup.</p>
|
|
<p><strong>What you'll learn:</strong></p>
|
|
<ul>
|
|
<li>How to create a manual backup</li>
|
|
<li>What's included in a full backup (services, credentials, themes)</li>
|
|
<li>How to restore from a backup file</li>
|
|
<li>How to set up automated backups</li>
|
|
<li>How to view backup history</li>
|
|
</ul>
|
|
<a class="feature-link" href="tutorials/05-backup-restore.html">Read full tutorial →</a>
|
|
</div>
|
|
|
|
<h2 id="monitoring">Monitoring Resources</h2>
|
|
<div class="feature-card">
|
|
<h3>Track System Performance</h3>
|
|
<p>Monitor CPU, memory, network, and disk usage in real-time.</p>
|
|
<p><strong>What you'll learn:</strong></p>
|
|
<ul>
|
|
<li>How to access the Resource Monitor</li>
|
|
<li>How to interpret live stats and historical summaries</li>
|
|
<li>How to set up alerts for resource thresholds</li>
|
|
<li>Understanding CPU, memory, network, and disk metrics</li>
|
|
</ul>
|
|
<a class="feature-link" href="tutorials/06-stats-monitoring.html">Read full tutorial →</a>
|
|
</div>
|
|
|
|
<h2>Keyboard Shortcuts</h2>
|
|
<table class="shortcut-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Shortcut</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><kbd>Ctrl+K</kbd> / <kbd>Cmd+K</kbd></td>
|
|
<td>Open Quick Search</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>↑</kbd> / <kbd>↓</kbd></td>
|
|
<td>Navigate in Quick Search</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>Enter</kbd></td>
|
|
<td>Select in Quick Search</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>ESC</kbd></td>
|
|
<td>Close modal / Cancel</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h2>Common Tasks</h2>
|
|
|
|
<h3>Adding Your First App</h3>
|
|
<blockquote>
|
|
<strong>Note:</strong> App deployment requires the app catalog to be configured with your DashCaddy instance.
|
|
</blockquote>
|
|
<ol>
|
|
<li>Navigate to <strong>TOOLS</strong> → <strong>App Selector</strong></li>
|
|
<li>Browse available apps or use Quick Search</li>
|
|
<li>Select an app template</li>
|
|
<li>Configure the app settings (URL, subdomain, credentials)</li>
|
|
<li>Deploy and verify</li>
|
|
</ol>
|
|
|
|
<h3>Checking Service Health</h3>
|
|
<ol>
|
|
<li>Navigate to <strong>STATUS</strong> → <strong>Health Status</strong></li>
|
|
<li>View the health overview for all services</li>
|
|
<li>Check individual service status cards</li>
|
|
<li>Review any active incidents</li>
|
|
</ol>
|
|
|
|
<h3>Updating Services</h3>
|
|
<ol>
|
|
<li>Navigate to <strong>ADMIN</strong> → <strong>Updates</strong></li>
|
|
<li>View available updates</li>
|
|
<li>Review changelogs and release notes</li>
|
|
<li>Apply updates to individual services or all at once</li>
|
|
</ol>
|
|
|
|
<h2>Troubleshooting</h2>
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Issue</th>
|
|
<th>Solution</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Can't log in with TOTP</td>
|
|
<td>Ensure your device clock is synchronized (TOTP is time-based). Try regenerating the code — they expire every 30 seconds.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Dashboard shows no services</td>
|
|
<td>Services need to be added via the App Selector. Check that Docker is running on your server.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Logs show "Loading..."</td>
|
|
<td>The service may not have generated any logs yet. Check that the service is actually running.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Theme changes not saving</td>
|
|
<td>Click "Save Theme" before closing the Theme Builder. Try a different browser if issues persist.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h2>Next Steps</h2>
|
|
<ul>
|
|
<li>Complete the initial setup wizard</li>
|
|
<li>Add your first service via App Selector</li>
|
|
<li>Customize the theme to your liking</li>
|
|
<li>Set up automated backups</li>
|
|
<li>Explore the Admin section for advanced settings</li>
|
|
<li>Join the community for tips and support</li>
|
|
</ul>
|
|
|
|
<footer>
|
|
<p>This guide was created for DashCaddy version as deployed on test.dashcaddy.net</p>
|
|
</footer>
|
|
</div>
|
|
</body>
|
|
</html>
|