Add getting started tutorials for DashCaddy
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
This commit is contained in:
Krystie
385
public/tutorials/dashcaddy-getting-started.html
Normal file
385
public/tutorials/dashcaddy-getting-started.html
Normal file
@@ -0,0 +1,385 @@
|
|||||||
|
<!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>
|
||||||
175
public/tutorials/dashcaddy-getting-started.md
Normal file
175
public/tutorials/dashcaddy-getting-started.md
Normal file
@@ -0,0 +1,175 @@
|
|||||||
|
# DashCaddy Getting Started Guide
|
||||||
|
|
||||||
|
A practical guide to getting started with DashCaddy — the self-hosted app dashboard.
|
||||||
|
|
||||||
|
## Table of Contents
|
||||||
|
|
||||||
|
1. [Getting Started](#getting-started) — First-time setup and configuration
|
||||||
|
2. [Theme Customization](#theme-customization) — Customize the dashboard appearance
|
||||||
|
3. [Viewing Logs](#viewing-logs) — Monitor service logs in real-time
|
||||||
|
4. [Quick Search](#quick-search) — Fast access to services and settings
|
||||||
|
5. [Backup & Restore](#backup--restore) — Protect your configuration
|
||||||
|
6. [Monitoring Resources](#monitoring-resources) — Track CPU, memory, and disk usage
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Getting Started
|
||||||
|
|
||||||
|
Learn how to log in, configure your timezone, and choose a deployment mode.
|
||||||
|
|
||||||
|
[Read full tutorial](tutorials/01-getting-started.md)
|
||||||
|
|
||||||
|
**What you'll learn:**
|
||||||
|
- How to log in with TOTP authentication
|
||||||
|
- How to select your timezone
|
||||||
|
- How to choose a deployment mode (Simple, Home Lab, Public, Custom)
|
||||||
|
- How to complete or skip the initial setup wizard
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Theme Customization
|
||||||
|
|
||||||
|
Make DashCaddy your own with custom themes and colors.
|
||||||
|
|
||||||
|
[Read full tutorial](tutorials/02-theme-customization.md)
|
||||||
|
|
||||||
|
**What you'll learn:**
|
||||||
|
- How to open the Theme Builder
|
||||||
|
- How to use preset themes (Dark, Light, Nord, Dracula, etc.)
|
||||||
|
- How to customize colors for backgrounds, text, accents, and status indicators
|
||||||
|
- How to save, import, and export themes
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Viewing Logs
|
||||||
|
|
||||||
|
Monitor your services with real-time log streaming.
|
||||||
|
|
||||||
|
[Read full tutorial](tutorials/03-viewing-logs.md)
|
||||||
|
|
||||||
|
**What you'll learn:**
|
||||||
|
- How to access the logs viewer
|
||||||
|
- How to navigate and filter log entries
|
||||||
|
- How to use live log streaming
|
||||||
|
- How to control the number of displayed log lines
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Quick Search
|
||||||
|
|
||||||
|
Find services and settings instantly.
|
||||||
|
|
||||||
|
[Read full tutorial](tutorials/04-quick-search.md)
|
||||||
|
|
||||||
|
**What you'll learn:**
|
||||||
|
- How to open Quick Search (Ctrl+K / Cmd+K)
|
||||||
|
- How to search for services and settings
|
||||||
|
- How to navigate and select results with keyboard shortcuts
|
||||||
|
- Keyboard shortcuts: ESC, ↑↓ Navigate, Enter Select
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Backup & Restore
|
||||||
|
|
||||||
|
Protect your configuration with full backups.
|
||||||
|
|
||||||
|
[Read full tutorial](tutorials/05-backup-restore.md)
|
||||||
|
|
||||||
|
**What you'll learn:**
|
||||||
|
- How to create a manual backup
|
||||||
|
- What's included in a full backup (services, credentials, themes)
|
||||||
|
- How to restore from a backup file
|
||||||
|
- How to set up automated backups
|
||||||
|
- How to view backup history
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Monitoring Resources
|
||||||
|
|
||||||
|
Track CPU, memory, network, and disk usage in real-time.
|
||||||
|
|
||||||
|
[Read full tutorial](tutorials/06-stats-monitoring.md)
|
||||||
|
|
||||||
|
**What you'll learn:**
|
||||||
|
- How to access the Resource Monitor
|
||||||
|
- How to interpret live stats and historical summaries
|
||||||
|
- How to set up alerts for resource thresholds
|
||||||
|
- Understanding CPU, memory, network, and disk metrics
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Common Tasks
|
||||||
|
|
||||||
|
### Adding Your First App
|
||||||
|
|
||||||
|
> **Note:** App deployment requires the app catalog to be configured with your DashCaddy instance.
|
||||||
|
|
||||||
|
1. Navigate to **TOOLS** → **App Selector**
|
||||||
|
2. Browse available apps or use Quick Search
|
||||||
|
3. Select an app template
|
||||||
|
4. Configure the app settings (URL, subdomain, credentials)
|
||||||
|
5. Deploy and verify
|
||||||
|
|
||||||
|
### Checking Service Health
|
||||||
|
|
||||||
|
1. Navigate to **STATUS** → **Health Status**
|
||||||
|
2. View the health overview for all services
|
||||||
|
3. Check individual service status cards
|
||||||
|
4. Review any active incidents
|
||||||
|
|
||||||
|
### Updating Services
|
||||||
|
|
||||||
|
1. Navigate to **ADMIN** → **Updates**
|
||||||
|
2. View available updates
|
||||||
|
3. Review changelogs and release notes
|
||||||
|
4. Apply updates to individual services or all at once
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Keyboard Shortcuts
|
||||||
|
|
||||||
|
| Shortcut | Action |
|
||||||
|
|----------|--------|
|
||||||
|
| `Ctrl+K` / `Cmd+K` | Open Quick Search |
|
||||||
|
| `↑` / `↓` | Navigate in Quick Search |
|
||||||
|
| `Enter` | Select in Quick Search |
|
||||||
|
| `ESC` | Close modal / Cancel |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Troubleshooting
|
||||||
|
|
||||||
|
### Can't log in with TOTP
|
||||||
|
- Ensure your device clock is synchronized (TOTP is time-based)
|
||||||
|
- Try regenerating the code — they expire every 30 seconds
|
||||||
|
- Contact your administrator if the code is consistently rejected
|
||||||
|
|
||||||
|
### Dashboard shows no services
|
||||||
|
- Services need to be added via the App Selector
|
||||||
|
- Check that Docker is running on your server
|
||||||
|
- Verify network connectivity to your services
|
||||||
|
|
||||||
|
### Logs show "Loading..."
|
||||||
|
- The service may not have generated any logs yet
|
||||||
|
- Check that the service is actually running
|
||||||
|
- Verify the logging system is configured correctly
|
||||||
|
|
||||||
|
### Theme changes not saving
|
||||||
|
- Click "Save Theme" before closing the Theme Builder
|
||||||
|
- Check browser console for JavaScript errors
|
||||||
|
- Try a different browser if issues persist
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Next Steps
|
||||||
|
|
||||||
|
- [ ] Complete the initial setup wizard
|
||||||
|
- [ ] Add your first service via App Selector
|
||||||
|
- [ ] Customize the theme to your liking
|
||||||
|
- [ ] Set up automated backups
|
||||||
|
- [ ] Explore the Admin section for advanced settings
|
||||||
|
- [ ] Join the community for tips and support
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
*This guide was created for DashCaddy version as deployed on test.dashcaddy.net*
|
||||||
69
public/tutorials/issues.md
Normal file
69
public/tutorials/issues.md
Normal file
@@ -0,0 +1,69 @@
|
|||||||
|
# Issues and Notes
|
||||||
|
|
||||||
|
## Test Instance Observations
|
||||||
|
|
||||||
|
### App Selector Empty
|
||||||
|
The App Selector modal opens but shows no apps in the grid. The "Choose an App" message appears with just a Cancel button. This could mean:
|
||||||
|
- The test instance doesn't have app templates loaded
|
||||||
|
- The app catalog API isn't responding
|
||||||
|
- The apps need to be fetched from a backend that's not configured
|
||||||
|
|
||||||
|
**Impact:** Could not complete "Deploy Your First App" workflow
|
||||||
|
|
||||||
|
**Workaround:** App selector needs backend/app catalog to be configured
|
||||||
|
|
||||||
|
### Menu Navigation Issues
|
||||||
|
The TOOLS, STATUS, and ADMIN sections in the dashboard have expandable menus. Clicking on section headers (like "TOOLS") didn't expand the menu via standard click methods in headless Chrome.
|
||||||
|
|
||||||
|
**Impact:** Could not navigate to some features through normal menu interaction
|
||||||
|
|
||||||
|
**Workaround:** Used JavaScript to directly show modals by manipulating CSS display property
|
||||||
|
|
||||||
|
### Theme Switching Not Working Properly
|
||||||
|
The "🎨 Light" button in the top bar appears to be a display of current theme rather than a toggle. Clicking it doesn't switch themes.
|
||||||
|
|
||||||
|
**Impact:** Theme workflow only partially captured - theme builder modal opens but theme switching via the quick button doesn't work
|
||||||
|
|
||||||
|
**Workaround:** Use Theme Builder modal to change themes
|
||||||
|
|
||||||
|
### Logs/Services Show "Loading..."
|
||||||
|
Some services show "Loading logs..." or "Loading container stats..." which suggests the backend APIs aren't returning data in the test instance.
|
||||||
|
|
||||||
|
**Impact:** Could see the UI for these features but not actual data
|
||||||
|
|
||||||
|
**Workaround:** Document UI even when no data is present
|
||||||
|
|
||||||
|
## Technical Observations
|
||||||
|
|
||||||
|
### Puppeteer/Chromium Issues
|
||||||
|
- Background Chromium processes were being killed by SIGKILL
|
||||||
|
- Some clickable elements weren't being recognized as clickable by puppeteer
|
||||||
|
- Had to use JavaScript clicks (`element.click()` via `page.evaluate()`) for some interactions
|
||||||
|
|
||||||
|
### Session Management
|
||||||
|
- TOTP codes expire every 30 seconds
|
||||||
|
- Had to generate fresh TOTP for each session
|
||||||
|
- Used `process.exit(0)` to avoid graceful cleanup issues that triggered process kills
|
||||||
|
|
||||||
|
## Screenshots Captured
|
||||||
|
|
||||||
|
### Workflows Documented:
|
||||||
|
1. **Getting Started** - Setup wizard, timezone, deployment mode (partial)
|
||||||
|
2. **Theme Customization** - Theme builder modal, presets (partial)
|
||||||
|
3. **Viewing Logs** - Complete workflow
|
||||||
|
4. **Quick Search** - Complete workflow
|
||||||
|
5. **Backup & Restore** - Complete workflow (UI)
|
||||||
|
6. **Stats Monitoring** - Complete workflow (UI)
|
||||||
|
|
||||||
|
### Workflows Not Fully Documented:
|
||||||
|
1. **Deploy First App** - App selector empty, couldn't complete
|
||||||
|
2. **Dark Theme Toggle** - Theme builder works but quick toggle doesn't
|
||||||
|
3. **Service Status Cards** - Not deeply explored
|
||||||
|
4. **Smart Arr Setup** - Not explored
|
||||||
|
|
||||||
|
## Recommendations
|
||||||
|
|
||||||
|
1. App Selector needs app catalog/backend to show templates
|
||||||
|
2. Menu expansion should be tested with real user interaction
|
||||||
|
3. Test instance should have some sample services running to show actual data in logs/stats
|
||||||
|
4. Consider adding a "demo mode" with fake data for tutorial purposes
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 166 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 166 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 159 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 159 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 160 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 166 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 166 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 166 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 166 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 166 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 176 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 176 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 175 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 176 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 176 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 174 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 135 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 174 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 174 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 175 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 130 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 128 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 174 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
BIN
public/tutorials/screenshots/06-test-home.png
Normal file
BIN
public/tutorials/screenshots/06-test-home.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 174 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 140 KiB |
BIN
public/tutorials/screenshots/dashboard-main.png
Normal file
BIN
public/tutorials/screenshots/dashboard-main.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 175 KiB |
BIN
public/tutorials/screenshots/dashboard.png
Normal file
BIN
public/tutorials/screenshots/dashboard.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 166 KiB |
BIN
public/tutorials/screenshots/error-state.png
Normal file
BIN
public/tutorials/screenshots/error-state.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 166 KiB |
BIN
public/tutorials/screenshots/test-home.png
Normal file
BIN
public/tutorials/screenshots/test-home.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
90
src/tutorials/01-getting-started.md
Normal file
90
src/tutorials/01-getting-started.md
Normal file
@@ -0,0 +1,90 @@
|
|||||||
|
# Getting Started with DashCaddy
|
||||||
|
|
||||||
|
This tutorial walks you through the initial setup of DashCaddy — logging in, configuring your timezone, and choosing a deployment mode. By the end, you'll have your dashboard ready to use.
|
||||||
|
|
||||||
|
**Prerequisites:** Access to a DashCaddy instance with TOTP credentials.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Step 1: Access the Dashboard
|
||||||
|
|
||||||
|
Navigate to your DashCaddy instance URL (e.g., `https://test.dashcaddy.net/`). You'll be greeted with a TOTP authentication overlay asking for a 6-digit code.
|
||||||
|
|
||||||
|
**What you should see:**
|
||||||
|
- A centered 6-digit input field
|
||||||
|
- The DashCaddy logo above the input
|
||||||
|
- An empty error message area below
|
||||||
|
|
||||||
|
Generate your TOTP code using your authenticator app (the secret was provided during account setup) and enter the 6 digits. The inputs auto-advance as you type each digit.
|
||||||
|
|
||||||
|
**Troubleshooting:**
|
||||||
|
- If you see "Invalid code" error, check that your device clock is synchronized (TOTP is time-based)
|
||||||
|
- If the input doesn't accept digits, refresh the page and try again
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Step 2: Select Your Timezone
|
||||||
|
|
||||||
|
After successful login, the Setup Wizard appears. The first step asks for your timezone.
|
||||||
|
|
||||||
|
**What you should see:**
|
||||||
|
- Welcome message: "Welcome to DashCaddy! 🎉"
|
||||||
|
- "Let's set up your self-hosted app dashboard. This will only take a few minutes."
|
||||||
|
- "Your Timezone" dropdown with a long list of timezones
|
||||||
|
|
||||||
|
Scroll or search for your timezone in the dropdown (e.g., "America/Los_Angeles" for Pacific time). Click to select it.
|
||||||
|
|
||||||
|
Screenshot: `screenshots/01-getting-started/light/02-timezone-selected.png`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Step 3: Choose Deployment Mode
|
||||||
|
|
||||||
|
After setting your timezone, click **Continue →** to proceed to the deployment mode selection.
|
||||||
|
|
||||||
|
**What you should see:**
|
||||||
|
- "Professional Home Lab Setup" (default selection)
|
||||||
|
- Options for:
|
||||||
|
- **🚀 Simple** — Access apps via IP:Port only. No DNS or SSL setup needed.
|
||||||
|
- **🏠 Professional Home Lab** — Custom TLD + Private DNS + Internal CA. Full HTTPS with your own certificate authority.
|
||||||
|
- **🌍 Public Server** — Real domain + Public DNS + Let's Encrypt. Internet-accessible with trusted SSL.
|
||||||
|
- **⚙️ Custom** — I'll configure everything myself. Full control over every setting.
|
||||||
|
|
||||||
|
Screenshot: `screenshots/01-getting-started/light/03-deployment-mode-selection.png`
|
||||||
|
|
||||||
|
Choose the mode that matches your setup:
|
||||||
|
- For home lab use without a domain: **Simple**
|
||||||
|
- For a home lab with custom domain (e.g., `.home`): **Professional Home Lab**
|
||||||
|
- For a public server with real domain: **Public Server**
|
||||||
|
- For maximum control: **Custom**
|
||||||
|
|
||||||
|
Click **Continue →** to proceed or **← Back** to return to the previous step.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Step 4: Complete or Skip Setup
|
||||||
|
|
||||||
|
Depending on your chosen mode, you may see additional configuration screens. You can:
|
||||||
|
|
||||||
|
- Fill in the requested information and click **Continue →**
|
||||||
|
- Or click **Skip Setup** to postpone configuration and access the dashboard immediately
|
||||||
|
|
||||||
|
**What you should see:**
|
||||||
|
After completing or skipping setup, you'll see the main dashboard with:
|
||||||
|
- Weather widget at top left
|
||||||
|
- Clock showing current time
|
||||||
|
- Status cards in the main area
|
||||||
|
- Navigation sections: STATUS, TOOLS, ADMIN
|
||||||
|
|
||||||
|
Screenshot: `screenshots/01-getting-started/light/01-initial-dashboard.png`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Common Issues
|
||||||
|
|
||||||
|
| Issue | Solution |
|
||||||
|
|-------|----------|
|
||||||
|
| TOTP code rejected | Ensure your device time is correct; try regenerating the code |
|
||||||
|
| Setup wizard shows no apps | The wizard is for initial configuration; apps are added via TOOLS → App Selector |
|
||||||
|
| Timezone not saving | The timezone should auto-save; refresh and check if it persisted |
|
||||||
|
| "Continue" button not clickable | Try scrolling down — the button may be below the viewport |
|
||||||
118
src/tutorials/02-theme-customization.md
Normal file
118
src/tutorials/02-theme-customization.md
Normal file
@@ -0,0 +1,118 @@
|
|||||||
|
# Customizing the Dashboard Theme
|
||||||
|
|
||||||
|
DashCaddy includes a powerful theme builder that lets you customize colors, accents, and visual elements. This tutorial shows how to access and use the theme builder.
|
||||||
|
|
||||||
|
**Prerequisites:** Logged into DashCaddy dashboard.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Step 1: Open the Theme Builder
|
||||||
|
|
||||||
|
Locate the theme button in the top bar of the dashboard. It's represented by a 🎨 icon with the text "Light" (showing your current theme).
|
||||||
|
|
||||||
|
**What you should see:**
|
||||||
|
- Top bar with: Weather widget, Clock, Settings gear, Theme toggle (🎨 Light), License badge
|
||||||
|
|
||||||
|
Click the **🎨 Light** button (or click **Customize** text if visible) to open the Theme Builder modal.
|
||||||
|
|
||||||
|
Screenshot: `screenshots/03-theme-customization/light/01-light-theme-dashboard.png`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Step 2: Explore the Theme Builder
|
||||||
|
|
||||||
|
The Theme Builder modal opens with several sections:
|
||||||
|
|
||||||
|
**Header:**
|
||||||
|
- Theme Builder title
|
||||||
|
- Edit dropdown (currently editing "New Theme")
|
||||||
|
- Delete button
|
||||||
|
- Name field for your theme
|
||||||
|
|
||||||
|
**Start From Presets:**
|
||||||
|
A list of built-in theme presets you can start from:
|
||||||
|
- **Dark** — Dark background with light text
|
||||||
|
- **Light** — Light background
|
||||||
|
- **Blue** — Blue-tinted theme
|
||||||
|
- **Black** — Pure black background
|
||||||
|
- **Nord** — Nord color palette
|
||||||
|
- **Dracula** — Dracula color scheme
|
||||||
|
- **Solarized Dark** / **Solarized Light** — Solarized themes
|
||||||
|
- **Taxi** — Yellow-tinted theme
|
||||||
|
- **Ocean** — Ocean blue theme
|
||||||
|
|
||||||
|
**Preview Area:**
|
||||||
|
A sample card showing how your theme looks, including:
|
||||||
|
- Secondary text preview
|
||||||
|
- Accent Button preview
|
||||||
|
- Status indicators (Online/Offline)
|
||||||
|
|
||||||
|
Screenshot: `screenshots/03-theme-customization/light/04-theme-builder-open.png`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Step 3: Select a Base Theme
|
||||||
|
|
||||||
|
Click on one of the preset themes (e.g., "Dark") to start from that base. The preview will update to show how the selected preset looks.
|
||||||
|
|
||||||
|
**What you should see:**
|
||||||
|
The preview card updates to reflect the selected preset's colors. The "Start from" selection highlights your choice.
|
||||||
|
|
||||||
|
Screenshot: `screenshots/03-theme-customization/dark/05-dark-preset-selected.png`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Step 4: Customize Colors (Optional)
|
||||||
|
|
||||||
|
Below the presets, you'll find granular color controls organized into sections:
|
||||||
|
|
||||||
|
**Base Colors:**
|
||||||
|
- Background — Main background color
|
||||||
|
- Card — Card/panel background color
|
||||||
|
- Text — Primary text color
|
||||||
|
- Muted Text — Secondary/hint text color
|
||||||
|
- Border — Border and divider color
|
||||||
|
|
||||||
|
**Accent Colors:**
|
||||||
|
- Accent — Primary accent color (buttons, links, highlights)
|
||||||
|
- Accent Strong — Deeper accent for emphasis
|
||||||
|
|
||||||
|
**Status Colors:**
|
||||||
|
- OK Background — Background for success/OK indicators
|
||||||
|
- OK Text — Text color for success states
|
||||||
|
- Error Bg — Background for error indicators
|
||||||
|
- Error Text — Text color for error states
|
||||||
|
|
||||||
|
Each color field is editable — click on a color swatch or enter a hex value to customize.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Step 5: Save Your Theme
|
||||||
|
|
||||||
|
When you're satisfied with your customizations:
|
||||||
|
|
||||||
|
1. Click **Save Theme** at the bottom of the modal
|
||||||
|
2. The theme will be applied to your dashboard immediately
|
||||||
|
3. Click **Cancel** to discard changes, or **✕** to close the modal
|
||||||
|
|
||||||
|
Screenshot: `screenshots/03-theme-customization/dark/02-dark-theme-dashboard.png`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Importing and Exporting Themes
|
||||||
|
|
||||||
|
The Theme Builder supports theme import/export for backup or sharing:
|
||||||
|
|
||||||
|
- **Import** — Load a previously exported theme file (.json)
|
||||||
|
- **Export** — Download your current theme as a file for backup or sharing
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Common Issues
|
||||||
|
|
||||||
|
| Issue | Solution |
|
||||||
|
|-------|----------|
|
||||||
|
| Theme builder button not visible | Scroll to top of dashboard — the button is in the top bar |
|
||||||
|
| Colors not updating in preview | Click directly on a color swatch to edit it |
|
||||||
|
| Theme not saving | Ensure you click "Save Theme" before closing the modal |
|
||||||
|
| Preset click not working | Try clicking directly on the preset name text |
|
||||||
88
src/tutorials/03-viewing-logs.md
Normal file
88
src/tutorials/03-viewing-logs.md
Normal file
@@ -0,0 +1,88 @@
|
|||||||
|
# Viewing Service Logs
|
||||||
|
|
||||||
|
DashCaddy provides a centralized log viewer that lets you monitor logs from your services in real-time. This tutorial shows how to access and use the logs viewer.
|
||||||
|
|
||||||
|
**Prerequisites:** Logged into DashCaddy dashboard with running services.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Step 1: Access the Logs Viewer
|
||||||
|
|
||||||
|
The Logs viewer is found in the TOOLS section of the dashboard.
|
||||||
|
|
||||||
|
**What you should see:**
|
||||||
|
- Dashboard with navigation sections: STATUS, TOOLS, ADMIN
|
||||||
|
- Various cards and widgets in the main area
|
||||||
|
|
||||||
|
Look for a "Logs" button (📋 Logs) in the TOOLS section of the dashboard. Note that some menu items may require clicking on the section header (like "TOOLS") to expand the menu first.
|
||||||
|
|
||||||
|
Screenshot: `screenshots/04-viewing-logs/light/01-dashboard.png`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Step 2: The Logs Modal
|
||||||
|
|
||||||
|
Click on **Logs** to open the logs viewer modal.
|
||||||
|
|
||||||
|
**What you should see:**
|
||||||
|
- **Title:** DNS Logs (or relevant service name)
|
||||||
|
- **Show dropdown:** Options to show 25, 50, 100, or 200 log lines
|
||||||
|
- **Live/Controls:** Live streaming toggle (📡 Live) and pause button (⏸️ Pause)
|
||||||
|
- **Close button:** ✕ in the top right
|
||||||
|
- **Log content area:** Shows the actual log entries
|
||||||
|
|
||||||
|
Screenshot: `screenshots/04-viewing-logs/light/02-logs-modal-open.png`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Step 3: Understanding the Log Display
|
||||||
|
|
||||||
|
The log viewer shows:
|
||||||
|
- **Timestamp** — When each log entry was created
|
||||||
|
- **Service** — Which service generated the entry
|
||||||
|
- **Message** — The actual log content
|
||||||
|
|
||||||
|
**Log Line Options:**
|
||||||
|
Use the "Show" dropdown to control how many log lines are displayed at once:
|
||||||
|
- 25 lines — For quick overview
|
||||||
|
- 50 lines — Default view
|
||||||
|
- 100 lines — For more context
|
||||||
|
- 200 lines — For detailed analysis
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Step 4: Live Log Streaming
|
||||||
|
|
||||||
|
DashCaddy supports real-time log streaming:
|
||||||
|
|
||||||
|
**To enable live streaming:**
|
||||||
|
- Click the **📡 Live** button to start streaming logs in real-time
|
||||||
|
- New log entries will appear automatically at the top or bottom of the list
|
||||||
|
|
||||||
|
**To pause streaming:**
|
||||||
|
- Click **⏸️ Pause** to stop auto-updating
|
||||||
|
- This lets you scroll through logs without new entries pushing content
|
||||||
|
|
||||||
|
**What you should see:**
|
||||||
|
When live streaming is active, new log entries appear automatically. The "Loading logs..." message will be replaced with actual log data if logs are available from your services.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Step 5: Filtering and Navigation
|
||||||
|
|
||||||
|
The log viewer supports keyboard navigation:
|
||||||
|
- Use **↑/↓ arrow keys** to navigate through log entries
|
||||||
|
- **Enter** to select an entry (if applicable)
|
||||||
|
- **Esc** to close the modal
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Common Issues
|
||||||
|
|
||||||
|
| Issue | Solution |
|
||||||
|
|-------|----------|
|
||||||
|
| Logs show "Loading logs..." | No services are running, or services haven't generated logs yet |
|
||||||
|
| Can't find Logs button | The button may be in a collapsed menu — click on "TOOLS" section header to expand |
|
||||||
|
| Log entries not appearing | Live streaming may be paused — click 📡 Live to resume |
|
||||||
|
| Too many logs | Use the "Show" dropdown to limit displayed lines |
|
||||||
|
| Can't scroll through logs | Make sure pause (⏸️ Pause) is enabled to prevent new entries from pushing content |
|
||||||
86
src/tutorials/04-quick-search.md
Normal file
86
src/tutorials/04-quick-search.md
Normal file
@@ -0,0 +1,86 @@
|
|||||||
|
# Using Quick Search
|
||||||
|
|
||||||
|
DashCaddy's Quick Search feature provides instant access to services, settings, and apps across your dashboard. This tutorial shows how to use it.
|
||||||
|
|
||||||
|
**Prerequisites:** Logged into DashCaddy dashboard.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Step 1: Open Quick Search
|
||||||
|
|
||||||
|
Quick Search is accessed via a modal that can be triggered in two ways:
|
||||||
|
|
||||||
|
**Method 1: Keyboard shortcut**
|
||||||
|
- Press **Ctrl+K** (or **Cmd+K** on Mac) to open Quick Search
|
||||||
|
|
||||||
|
**Method 2: Via the UI**
|
||||||
|
- The Quick Search modal can be accessed from the dashboard header or menu
|
||||||
|
|
||||||
|
Screenshot: `screenshots/05-quick-search/light/01-dashboard.png`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Step 2: The Quick Search Modal
|
||||||
|
|
||||||
|
When opened, the Quick Search modal appears centered on your screen with a search input field.
|
||||||
|
|
||||||
|
**What you should see:**
|
||||||
|
- Search input field at the top
|
||||||
|
- Keyboard shortcut hints below the input:
|
||||||
|
- **ESC** — Close the modal
|
||||||
|
- **↑↓ Navigate** — Move between search results
|
||||||
|
- **Enter Select** — Select the highlighted result
|
||||||
|
- **Esc Close** — Another reminder to close with Escape
|
||||||
|
|
||||||
|
Screenshot: `screenshots/05-quick-search/light/02-quick-search-open.png`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Step 3: Search for Services or Settings
|
||||||
|
|
||||||
|
Click on the search input field and start typing. Quick Search supports fuzzy matching and will show results as you type.
|
||||||
|
|
||||||
|
**What to search for:**
|
||||||
|
- Service names (e.g., "Plex", "Gitea", "Nextcloud")
|
||||||
|
- Settings names (e.g., "backup", "theme", "notifications")
|
||||||
|
- Dashboard features (e.g., "logs", "stats", "docker")
|
||||||
|
|
||||||
|
Screenshot: `screenshots/05-quick-search/light/03-quick-search-typed.png`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Step 4: Navigate and Select Results
|
||||||
|
|
||||||
|
Use the keyboard to navigate through search results:
|
||||||
|
|
||||||
|
1. **↑/↓ arrows** — Move the selection highlight up or down through results
|
||||||
|
2. **Enter** — Select and open the highlighted item
|
||||||
|
3. **ESC** — Close the Quick Search modal without selecting anything
|
||||||
|
|
||||||
|
**Result types may include:**
|
||||||
|
- Services (apps you've deployed)
|
||||||
|
- Settings pages
|
||||||
|
- Dashboard features and modals
|
||||||
|
- Documentation links
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Step 5: Quick Actions
|
||||||
|
|
||||||
|
Depending on the selected result, Quick Search can:
|
||||||
|
- Open a service's management modal
|
||||||
|
- Navigate to a settings page
|
||||||
|
- Open a specific dashboard feature
|
||||||
|
- Show detailed information about a service
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Common Issues
|
||||||
|
|
||||||
|
| Issue | Solution |
|
||||||
|
|-------|----------|
|
||||||
|
| Quick Search doesn't open | Try the keyboard shortcut (Ctrl+K/Cmd+K) |
|
||||||
|
| No results appearing | Try shorter search terms; check spelling |
|
||||||
|
| Results not relevant | Quick Search may need services to be configured first |
|
||||||
|
| Can't select with Enter | Make sure a result is highlighted (has focus) |
|
||||||
|
| Modal won't close | Press ESC to close; if it doesn't work, click outside the modal |
|
||||||
108
src/tutorials/05-backup-restore.md
Normal file
108
src/tutorials/05-backup-restore.md
Normal file
@@ -0,0 +1,108 @@
|
|||||||
|
# Backup & Restore Your Configuration
|
||||||
|
|
||||||
|
DashCaddy includes a comprehensive backup system that saves your entire configuration — services, credentials, themes, and settings — into a single file. This tutorial shows how to create backups and restore from them.
|
||||||
|
|
||||||
|
**Prerequisites:** Logged into DashCaddy dashboard.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Step 1: Access the Backup Modal
|
||||||
|
|
||||||
|
The Backup feature is found in the TOOLS section of the dashboard.
|
||||||
|
|
||||||
|
**What you should see:**
|
||||||
|
- Dashboard with STATUS, TOOLS, ADMIN navigation
|
||||||
|
- Service cards and widgets
|
||||||
|
|
||||||
|
Navigate to the TOOLS section and click on **Backup** to open the Backup & Restore modal.
|
||||||
|
|
||||||
|
Screenshot: `screenshots/06-backup-restore/light/01-dashboard.png`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Step 2: The Backup Modal
|
||||||
|
|
||||||
|
The Backup modal opens with three tabs and detailed information about what gets backed up.
|
||||||
|
|
||||||
|
**What you should see:**
|
||||||
|
- **Title:** 💾 Backup & Restore
|
||||||
|
- **Description:** "Full backup of your entire DashCaddy setup — server config, credentials, themes, and browser preferences in one file."
|
||||||
|
- **Tab buttons:** Manual, Automated, History
|
||||||
|
|
||||||
|
Screenshot: `screenshots/06-backup-restore/light/02-backup-modal-open.png`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Step 3: Manual Backup (Export)
|
||||||
|
|
||||||
|
The **Manual** tab is selected by default and contains export options.
|
||||||
|
|
||||||
|
**What you should see:**
|
||||||
|
- **📤 Export Backup** section with description:
|
||||||
|
- "Downloads everything — services, Caddyfile, credentials, encryption key, themes, and all browser preferences."
|
||||||
|
- **⬇️ Download Full Backup** button
|
||||||
|
|
||||||
|
**To create a manual backup:**
|
||||||
|
1. Click **⬇️ Download Full Backup**
|
||||||
|
2. Your browser will download a backup file (typically `.tar.gz` or similar archive)
|
||||||
|
3. Save this file in a safe location
|
||||||
|
|
||||||
|
The backup file includes:
|
||||||
|
- All service configurations
|
||||||
|
- Caddy reverse proxy configuration
|
||||||
|
- Encrypted credentials
|
||||||
|
- Encryption keys
|
||||||
|
- Custom themes
|
||||||
|
- Browser preferences and settings
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Step 4: Restore from Backup
|
||||||
|
|
||||||
|
The **📥 Restore Backup** section lets you restore from a previously saved backup file.
|
||||||
|
|
||||||
|
**To restore from backup:**
|
||||||
|
1. Click the upload/restore button (may be labeled differently in your version)
|
||||||
|
2. Select your backup file from your computer
|
||||||
|
3. Confirm the restore operation when prompted
|
||||||
|
4. Wait for the restore process to complete
|
||||||
|
|
||||||
|
**⚠️ Warning:** Restoring a backup will replace your current configuration. Make sure to:
|
||||||
|
- Export your current configuration first (if needed)
|
||||||
|
- Verify the backup file is from a trusted source
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Step 5: Automated Backups
|
||||||
|
|
||||||
|
The **Automated** tab lets you schedule regular backups.
|
||||||
|
|
||||||
|
**What you might see:**
|
||||||
|
- Backup schedule configuration
|
||||||
|
- Options for backup frequency (daily, weekly, etc.)
|
||||||
|
- Backup retention settings
|
||||||
|
|
||||||
|
Configure automated backups to ensure you always have recent restore points available.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Step 6: Backup History
|
||||||
|
|
||||||
|
The **History** tab shows previous backup operations.
|
||||||
|
|
||||||
|
**What you might see:**
|
||||||
|
- List of past backups
|
||||||
|
- Timestamps for each backup
|
||||||
|
- Restore options for individual backups
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Common Issues
|
||||||
|
|
||||||
|
| Issue | Solution |
|
||||||
|
|-------|----------|
|
||||||
|
| Download button not working | Check browser popup blocker; try a different browser |
|
||||||
|
| Backup file won't upload | Ensure you're uploading the correct file format; check file size limits |
|
||||||
|
| Restore fails | Verify the backup file is complete and not corrupted |
|
||||||
|
| Automated backup not running | Check that the DashCaddy service is running; verify schedule settings |
|
||||||
|
| Forgotten encryption key | Without the encryption key from backup, some credentials may not restore |
|
||||||
113
src/tutorials/06-stats-monitoring.md
Normal file
113
src/tutorials/06-stats-monitoring.md
Normal file
@@ -0,0 +1,113 @@
|
|||||||
|
# Monitoring Resources with Stats
|
||||||
|
|
||||||
|
DashCaddy's Stats feature provides real-time and historical monitoring of CPU, memory, network, and disk usage for your containers. This tutorial shows how to access and interpret the monitoring data.
|
||||||
|
|
||||||
|
**Prerequisites:** Logged into DashCaddy dashboard with Docker containers running.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Step 1: Access the Stats Modal
|
||||||
|
|
||||||
|
The Stats monitoring is found in the STATUS section of the dashboard.
|
||||||
|
|
||||||
|
**What you should see:**
|
||||||
|
- Dashboard with STATUS, TOOLS, ADMIN navigation
|
||||||
|
- Various service cards and status indicators
|
||||||
|
|
||||||
|
Navigate to the STATUS section and click on **Stats** to open the Resource Monitor.
|
||||||
|
|
||||||
|
Screenshot: `screenshots/07-stats-monitoring/light/01-dashboard.png`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Step 2: The Stats Modal
|
||||||
|
|
||||||
|
The Stats modal opens with resource monitoring data organized into tabs.
|
||||||
|
|
||||||
|
**What you should see:**
|
||||||
|
- **Title:** 📊 Resource Monitor
|
||||||
|
- **Description:** "Real-time and historical CPU, memory, network, and disk usage for containers."
|
||||||
|
- **Tabs:** Live Stats, 24h Summary, Alerts
|
||||||
|
|
||||||
|
Screenshot: `screenshots/07-stats-monitoring/light/02-stats-modal-open.png`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Step 3: Live Stats View
|
||||||
|
|
||||||
|
The **Live Stats** tab shows real-time resource usage.
|
||||||
|
|
||||||
|
**What you might see:**
|
||||||
|
- Container list with real-time metrics
|
||||||
|
- CPU usage percentage per container
|
||||||
|
- Memory usage (used/available)
|
||||||
|
- Network I/O rates
|
||||||
|
- Disk I/O rates
|
||||||
|
- Auto-refresh indicator: "Auto-refresh every 5s"
|
||||||
|
|
||||||
|
**Refresh controls:**
|
||||||
|
- **🔄 Refresh Now** — Manually trigger a refresh of all stats
|
||||||
|
- Automatic refresh can be paused if needed
|
||||||
|
|
||||||
|
Screenshot: `screenshots/07-stats-monitoring/light/02-stats-modal-open.png`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Step 4: 24h Summary View
|
||||||
|
|
||||||
|
The **24h Summary** tab shows aggregated statistics over the past 24 hours.
|
||||||
|
|
||||||
|
**What you might see:**
|
||||||
|
- Peak CPU usage
|
||||||
|
- Average memory usage
|
||||||
|
- Total network traffic
|
||||||
|
- Disk usage trends
|
||||||
|
- Historical graphs if available
|
||||||
|
|
||||||
|
This view helps identify resource usage patterns and plan for capacity needs.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Step 5: Alerts View
|
||||||
|
|
||||||
|
The **Alerts** tab shows any resource-related alerts.
|
||||||
|
|
||||||
|
**What you might see:**
|
||||||
|
- High CPU warnings
|
||||||
|
- Memory pressure alerts
|
||||||
|
- Disk space warnings
|
||||||
|
- Network issues
|
||||||
|
|
||||||
|
Alerts help you stay on top of problems before they cause service disruptions.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Understanding the Metrics
|
||||||
|
|
||||||
|
**CPU Usage:**
|
||||||
|
- Shows percentage of CPU being used by each container
|
||||||
|
- High CPU (>80%) sustained may indicate performance issues
|
||||||
|
|
||||||
|
**Memory Usage:**
|
||||||
|
- Shows RAM used vs. available
|
||||||
|
- Watch for containers with memory limits approaching capacity
|
||||||
|
|
||||||
|
**Network I/O:**
|
||||||
|
- Bytes/packets in and out
|
||||||
|
- Helps identify unexpected network activity
|
||||||
|
|
||||||
|
**Disk I/O:**
|
||||||
|
- Read/write speeds
|
||||||
|
- Important for storage-heavy workloads
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Common Issues
|
||||||
|
|
||||||
|
| Issue | Solution |
|
||||||
|
|-------|----------|
|
||||||
|
| Stats show "Loading container stats..." | No containers running, or Docker is not responding |
|
||||||
|
| Auto-refresh not working | Click "🔄 Refresh Now" manually; check Docker daemon |
|
||||||
|
| Missing container in stats | Container may have stopped; check container status |
|
||||||
|
| Network stats show zeros | Network monitoring may not be enabled for that container |
|
||||||
|
| High CPU alerts | Check which container is using resources; consider resource limits |
|
||||||
Reference in New Issue
Block a user