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
2026-05-01 20:53:01 -07:00
parent bb69b96816
commit fbe1a7c95c
40 changed files with 1232 additions and 0 deletions

View 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>

View 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*

View 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

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 175 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: 86 KiB