diff --git a/public/tutorials/dashcaddy-getting-started.html b/public/tutorials/dashcaddy-getting-started.html new file mode 100644 index 0000000..ccce71c --- /dev/null +++ b/public/tutorials/dashcaddy-getting-started.html @@ -0,0 +1,385 @@ + + + + + + DashCaddy Getting Started Guide + + + +
+

DashCaddy Getting Started Guide

+

A practical guide to getting started with DashCaddy — the self-hosted app dashboard.

+ +
+

Table of Contents

+ +
+ +

Getting Started

+
+

First-Time Setup

+

Learn how to log in, configure your timezone, and choose a deployment mode.

+

What you'll learn:

+ + Read full tutorial → +
+ +

Theme Customization

+
+

Customize the Dashboard

+

Make DashCaddy your own with custom themes and colors.

+

What you'll learn:

+ + Read full tutorial → +
+ +

Viewing Logs

+
+

Monitor Service Logs

+

Monitor your services with real-time log streaming.

+

What you'll learn:

+ + Read full tutorial → +
+ + +
+

Fast Access to Everything

+

Find services and settings instantly.

+

What you'll learn:

+ + Read full tutorial → +
+ +

Backup & Restore

+
+

Protect Your Configuration

+

Create full backups of your entire DashCaddy setup.

+

What you'll learn:

+ + Read full tutorial → +
+ +

Monitoring Resources

+
+

Track System Performance

+

Monitor CPU, memory, network, and disk usage in real-time.

+

What you'll learn:

+ + Read full tutorial → +
+ +

Keyboard Shortcuts

+ + + + + + + + + + + + + + + + + + + + + + + + + +
ShortcutAction
Ctrl+K / Cmd+KOpen Quick Search
↑ / ↓Navigate in Quick Search
EnterSelect in Quick Search
ESCClose modal / Cancel
+ +

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. +
  2. Browse available apps or use Quick Search
    3. +
  3. Select an app template
    4. +
  4. Configure the app settings (URL, subdomain, credentials)
    5. +
  5. Deploy and verify
    6. +
+ +

Checking Service Health

+
    +
  1. Navigate to STATUS → Health Status
    2. +
  2. View the health overview for all services
    3. +
  3. Check individual service status cards
    4. +
  4. Review any active incidents
    5. +
+ +

Updating Services

+
    +
  1. Navigate to ADMIN → Updates
    2. +
  2. View available updates
    3. +
  3. Review changelogs and release notes
    4. +
  4. Apply updates to individual services or all at once
    5. +
+ +

Troubleshooting

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
IssueSolution
Can't log in with TOTPEnsure your device clock is synchronized (TOTP is time-based). Try regenerating the code — they expire every 30 seconds.
Dashboard shows no servicesServices need to be added via the App Selector. Check that Docker is running on your server.
Logs show "Loading..."The service may not have generated any logs yet. Check that the service is actually running.
Theme changes not savingClick "Save Theme" before closing the Theme Builder. Try a different browser if issues persist.
+ +

Next Steps

+ + + +
+ + diff --git a/public/tutorials/dashcaddy-getting-started.md b/public/tutorials/dashcaddy-getting-started.md new file mode 100644 index 0000000..8cc7d51 --- /dev/null +++ b/public/tutorials/dashcaddy-getting-started.md @@ -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* diff --git a/public/tutorials/issues.md b/public/tutorials/issues.md new file mode 100644 index 0000000..3ced94b --- /dev/null +++ b/public/tutorials/issues.md @@ -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 diff --git a/public/tutorials/screenshots/01-getting-started/light/01-initial-dashboard.png b/public/tutorials/screenshots/01-getting-started/light/01-initial-dashboard.png new file mode 100644 index 0000000..3cb1abb Binary files /dev/null and b/public/tutorials/screenshots/01-getting-started/light/01-initial-dashboard.png differ diff --git a/public/tutorials/screenshots/01-getting-started/light/02-timezone-selected.png b/public/tutorials/screenshots/01-getting-started/light/02-timezone-selected.png new file mode 100644 index 0000000..1f291f2 Binary files /dev/null and b/public/tutorials/screenshots/01-getting-started/light/02-timezone-selected.png differ diff --git a/public/tutorials/screenshots/01-getting-started/light/03-deployment-mode-selection.png b/public/tutorials/screenshots/01-getting-started/light/03-deployment-mode-selection.png new file mode 100644 index 0000000..e71c00c Binary files /dev/null and b/public/tutorials/screenshots/01-getting-started/light/03-deployment-mode-selection.png differ diff --git a/public/tutorials/screenshots/01-getting-started/light/03-step-2-deployment-mode.png b/public/tutorials/screenshots/01-getting-started/light/03-step-2-deployment-mode.png new file mode 100644 index 0000000..e0a2c87 Binary files /dev/null and b/public/tutorials/screenshots/01-getting-started/light/03-step-2-deployment-mode.png differ diff --git a/public/tutorials/screenshots/01-getting-started/light/05-after-simple-select.png b/public/tutorials/screenshots/01-getting-started/light/05-after-simple-select.png new file mode 100644 index 0000000..f05dc2b Binary files /dev/null and b/public/tutorials/screenshots/01-getting-started/light/05-after-simple-select.png differ diff --git a/public/tutorials/screenshots/02-deploy-app/light/01-app-selector-open.png b/public/tutorials/screenshots/02-deploy-app/light/01-app-selector-open.png new file mode 100644 index 0000000..fc59af2 Binary files /dev/null and b/public/tutorials/screenshots/02-deploy-app/light/01-app-selector-open.png differ diff --git a/public/tutorials/screenshots/02-deploy-app/light/01-apps-loaded.png b/public/tutorials/screenshots/02-deploy-app/light/01-apps-loaded.png new file mode 100644 index 0000000..0f7a8a7 Binary files /dev/null and b/public/tutorials/screenshots/02-deploy-app/light/01-apps-loaded.png differ diff --git a/public/tutorials/screenshots/02-deploy-app/light/01-dashboard-before.png b/public/tutorials/screenshots/02-deploy-app/light/01-dashboard-before.png new file mode 100644 index 0000000..078d30d Binary files /dev/null and b/public/tutorials/screenshots/02-deploy-app/light/01-dashboard-before.png differ diff --git a/public/tutorials/screenshots/02-deploy-app/light/02-app-selector-modal.png b/public/tutorials/screenshots/02-deploy-app/light/02-app-selector-modal.png new file mode 100644 index 0000000..a0a1430 Binary files /dev/null and b/public/tutorials/screenshots/02-deploy-app/light/02-app-selector-modal.png differ diff --git a/public/tutorials/screenshots/02-deploy-app/light/02-available-clicked.png b/public/tutorials/screenshots/02-deploy-app/light/02-available-clicked.png new file mode 100644 index 0000000..cefa94b Binary files /dev/null and b/public/tutorials/screenshots/02-deploy-app/light/02-available-clicked.png differ diff --git a/public/tutorials/screenshots/03-theme-customization/dark/02-dark-theme-dashboard.png b/public/tutorials/screenshots/03-theme-customization/dark/02-dark-theme-dashboard.png new file mode 100644 index 0000000..58ef128 Binary files /dev/null and b/public/tutorials/screenshots/03-theme-customization/dark/02-dark-theme-dashboard.png differ diff --git a/public/tutorials/screenshots/03-theme-customization/dark/05-dark-preset-selected.png b/public/tutorials/screenshots/03-theme-customization/dark/05-dark-preset-selected.png new file mode 100644 index 0000000..9f17425 Binary files /dev/null and b/public/tutorials/screenshots/03-theme-customization/dark/05-dark-preset-selected.png differ diff --git a/public/tutorials/screenshots/03-theme-customization/light/01-light-theme-dashboard.png b/public/tutorials/screenshots/03-theme-customization/light/01-light-theme-dashboard.png new file mode 100644 index 0000000..9c7e9cf Binary files /dev/null and b/public/tutorials/screenshots/03-theme-customization/light/01-light-theme-dashboard.png differ diff --git a/public/tutorials/screenshots/03-theme-customization/light/03-back-to-light.png b/public/tutorials/screenshots/03-theme-customization/light/03-back-to-light.png new file mode 100644 index 0000000..5fb6120 Binary files /dev/null and b/public/tutorials/screenshots/03-theme-customization/light/03-back-to-light.png differ diff --git a/public/tutorials/screenshots/03-theme-customization/light/04-theme-builder-open.png b/public/tutorials/screenshots/03-theme-customization/light/04-theme-builder-open.png new file mode 100644 index 0000000..2985274 Binary files /dev/null and b/public/tutorials/screenshots/03-theme-customization/light/04-theme-builder-open.png differ diff --git a/public/tutorials/screenshots/04-viewing-logs/light/01-dashboard.png b/public/tutorials/screenshots/04-viewing-logs/light/01-dashboard.png new file mode 100644 index 0000000..7faa9ff Binary files /dev/null and b/public/tutorials/screenshots/04-viewing-logs/light/01-dashboard.png differ diff --git a/public/tutorials/screenshots/04-viewing-logs/light/02-logs-modal-open.png b/public/tutorials/screenshots/04-viewing-logs/light/02-logs-modal-open.png new file mode 100644 index 0000000..fd8dfb8 Binary files /dev/null and b/public/tutorials/screenshots/04-viewing-logs/light/02-logs-modal-open.png differ diff --git a/public/tutorials/screenshots/04-viewing-logs/light/02-tools-expanded.png b/public/tutorials/screenshots/04-viewing-logs/light/02-tools-expanded.png new file mode 100644 index 0000000..f4d1ecb Binary files /dev/null and b/public/tutorials/screenshots/04-viewing-logs/light/02-tools-expanded.png differ diff --git a/public/tutorials/screenshots/04-viewing-logs/light/03-logs-modal-open.png b/public/tutorials/screenshots/04-viewing-logs/light/03-logs-modal-open.png new file mode 100644 index 0000000..b48d9a5 Binary files /dev/null and b/public/tutorials/screenshots/04-viewing-logs/light/03-logs-modal-open.png differ diff --git a/public/tutorials/screenshots/05-quick-search/light/01-dashboard.png b/public/tutorials/screenshots/05-quick-search/light/01-dashboard.png new file mode 100644 index 0000000..e11b32c Binary files /dev/null and b/public/tutorials/screenshots/05-quick-search/light/01-dashboard.png differ diff --git a/public/tutorials/screenshots/05-quick-search/light/02-quick-search-open.png b/public/tutorials/screenshots/05-quick-search/light/02-quick-search-open.png new file mode 100644 index 0000000..40a555b Binary files /dev/null and b/public/tutorials/screenshots/05-quick-search/light/02-quick-search-open.png differ diff --git a/public/tutorials/screenshots/05-quick-search/light/03-quick-search-typed.png b/public/tutorials/screenshots/05-quick-search/light/03-quick-search-typed.png new file mode 100644 index 0000000..5befdc9 Binary files /dev/null and b/public/tutorials/screenshots/05-quick-search/light/03-quick-search-typed.png differ diff --git a/public/tutorials/screenshots/06-backup-restore/light/01-dashboard.png b/public/tutorials/screenshots/06-backup-restore/light/01-dashboard.png new file mode 100644 index 0000000..45af591 Binary files /dev/null and b/public/tutorials/screenshots/06-backup-restore/light/01-dashboard.png differ diff --git a/public/tutorials/screenshots/06-backup-restore/light/02-backup-modal-open.png b/public/tutorials/screenshots/06-backup-restore/light/02-backup-modal-open.png new file mode 100644 index 0000000..66d39e3 Binary files /dev/null and b/public/tutorials/screenshots/06-backup-restore/light/02-backup-modal-open.png differ diff --git a/public/tutorials/screenshots/06-test-home.png b/public/tutorials/screenshots/06-test-home.png new file mode 100644 index 0000000..6770a5a Binary files /dev/null and b/public/tutorials/screenshots/06-test-home.png differ diff --git a/public/tutorials/screenshots/07-stats-monitoring/light/01-dashboard.png b/public/tutorials/screenshots/07-stats-monitoring/light/01-dashboard.png new file mode 100644 index 0000000..01c0b0c Binary files /dev/null and b/public/tutorials/screenshots/07-stats-monitoring/light/01-dashboard.png differ diff --git a/public/tutorials/screenshots/07-stats-monitoring/light/02-stats-modal-open.png b/public/tutorials/screenshots/07-stats-monitoring/light/02-stats-modal-open.png new file mode 100644 index 0000000..15d145e Binary files /dev/null and b/public/tutorials/screenshots/07-stats-monitoring/light/02-stats-modal-open.png differ diff --git a/public/tutorials/screenshots/dashboard-main.png b/public/tutorials/screenshots/dashboard-main.png new file mode 100644 index 0000000..cb28f68 Binary files /dev/null and b/public/tutorials/screenshots/dashboard-main.png differ diff --git a/public/tutorials/screenshots/dashboard.png b/public/tutorials/screenshots/dashboard.png new file mode 100644 index 0000000..2cc51c6 Binary files /dev/null and b/public/tutorials/screenshots/dashboard.png differ diff --git a/public/tutorials/screenshots/error-state.png b/public/tutorials/screenshots/error-state.png new file mode 100644 index 0000000..5ee4da8 Binary files /dev/null and b/public/tutorials/screenshots/error-state.png differ diff --git a/public/tutorials/screenshots/test-home.png b/public/tutorials/screenshots/test-home.png new file mode 100644 index 0000000..c1a01eb Binary files /dev/null and b/public/tutorials/screenshots/test-home.png differ diff --git a/src/tutorials/01-getting-started.md b/src/tutorials/01-getting-started.md new file mode 100644 index 0000000..fc9b0f4 --- /dev/null +++ b/src/tutorials/01-getting-started.md @@ -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 | diff --git a/src/tutorials/02-theme-customization.md b/src/tutorials/02-theme-customization.md new file mode 100644 index 0000000..407c1a5 --- /dev/null +++ b/src/tutorials/02-theme-customization.md @@ -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 | diff --git a/src/tutorials/03-viewing-logs.md b/src/tutorials/03-viewing-logs.md new file mode 100644 index 0000000..a026478 --- /dev/null +++ b/src/tutorials/03-viewing-logs.md @@ -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 | diff --git a/src/tutorials/04-quick-search.md b/src/tutorials/04-quick-search.md new file mode 100644 index 0000000..8a5e042 --- /dev/null +++ b/src/tutorials/04-quick-search.md @@ -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 | diff --git a/src/tutorials/05-backup-restore.md b/src/tutorials/05-backup-restore.md new file mode 100644 index 0000000..7283fc9 --- /dev/null +++ b/src/tutorials/05-backup-restore.md @@ -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 | diff --git a/src/tutorials/06-stats-monitoring.md b/src/tutorials/06-stats-monitoring.md new file mode 100644 index 0000000..7131fd9 --- /dev/null +++ b/src/tutorials/06-stats-monitoring.md @@ -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 |