david/homelab-dashboard
Watch
1
0
Fork
You've already forked homelab-dashboard
 0
Code Issues Pull requests Projects Releases 93 Packages 1 Wiki Activity Actions
Page: Documentation Screenshots
Pages
Changelog Container Registry Dense View Design Language Documentation Screenshots Grimmory Home Kavita Lab View Module Setup Navidrome Notifications Plex Proxmox Roadmap SABnzbd Security Hardening Seerr Requests Storage Health UniFi Network Uptime Kuma Wallboard White Labeling qBittorrent
3 Documentation Screenshots
David Spitzer edited this page 2026-10-14 15:04:05 -07:00
Table of contents

Documentation Screenshots

Screenshots make the setup pages much easier to follow, but they should be real captures from the lab or from the dashboard itself. Do not use generated or vendor-marketing images as proof of where a setting lives.

Screenshot Rules

  • Redact API keys, passwords, webhook URLs, SNMP community strings, Plex tokens, and session cookies.
  • Redact public IP addresses, serial numbers, license IDs, and hostnames you do not want published.
  • Prefer full-panel screenshots over tiny cropped controls so the path is obvious.
  • Keep filenames lowercase with hyphens.
  • Add a short caption under each image explaining exactly what the user should check.

Recommended Screenshot Set

Page Screenshot Purpose
Module Setup dashboard-admin-module-list.png Shows where integration settings live.
Storage Health dashboard-storage-settings-asustor.png Shows ASUSTOR 1/2 fields in dashboard admin.
Storage Health asustor-adm-services-snmp.png Shows where ADM SNMP settings live.
Storage Health asustor-adm-snmp-v2-community.png Shows SNMP v1/v2 service and community field, with the community redacted.
Storage Health dashboard-storage-card-asustor.png Shows successful ASUSTOR polling on the dashboard.
Storage Health unifi-snmp-settings.png Shows UniFi SNMP v1/v2c enabled, with the community redacted.
Storage Health dashboard-storage-settings-unifi-nas.png Shows UniFi NAS 1/2 SNMP fields in dashboard admin.
Storage Health dashboard-storage-card-unifi-nas.png Shows successful UniFi NAS polling on the dashboard.
Proxmox proxmox-api-token-permissions.png Shows required token permissions.
UniFi Network unifi-api-key-create.png Shows API key creation or Site Manager key location.
Uptime Kuma uptime-kuma-status-page-url.png Shows the status page URL copied into the dashboard.
Plex dashboard-plex-sign-in.png Shows the Sign in with Plex flow.
Seerr Requests seerr-api-key.png Shows where the API key is copied from, with the key redacted.
Kavita kavita-auth-key.png Shows the Kavita auth key location, with the key redacted.
Grimmory grimmory-komga-api-settings.png Shows Komga-compatible API/OPDS user settings.
Navidrome navidrome-user-settings.png Shows the user account used by the Subsonic API.
Notifications dashboard-notification-destinations.png Shows notification destinations and test-send status.
Security Hardening dashboard-security-audit.png Shows session timeout, password change, and audit events.
Lab View dashboard-lab-view.png Shows the wall-board layout.

Generated Screenshots (Demo Mode)

Screenshots of the dashboard itself are generated from a temporary demo instance, so they never contain real hosts, tokens or addresses. Run:

npm run build
npm run docs:screenshots

The script starts two throwaway servers with DASHBOARD_DEMO set (one all-normal, one with three issues), renders every view at full resolution using Chrome or Edge, fills each admin form with fictional example values such as https://pve1.example.lan:8006, and writes the images to docs/images/ in the repository. Copy them into this wiki's images/ folder when they change. Set CHROME_PATH to use another browser.

Image Used on
wallboard-issues.png, wallboard-normal.png Wallboard
dashboard-dense.png, dashboard-dense-expanded.png Dense View
dashboard-classic.png Lab View and the repository README
admin-<module>.png (one per module) each module's page, in a Dashboard Admin Form section
admin-white-label.png, admin-users.png, admin-recovery.png, admin-integration-health.png, admin-security-audit.png White Labeling and Security Hardening

These are captures of the real dashboard UI with demo data, so they follow the rules above. They only show where a setting lives inside the dashboard. They do not replace real captures of other products' screens (Proxmox, ADM, UniFi, Kavita, and so on).

Markdown Pattern

Use this pattern once a screenshot has been added to the wiki repository:

![ASUSTOR SNMP settings](images/asustor-adm-services-snmp.png)

ADM `Services > SNMP` with SNMP v1/v2 enabled. Redact the community string before publishing.

Current Gaps

  • ASUSTOR ADM screenshots need to be captured from the actual NAS UI.
  • Screenshots of other products' screens (the Proxmox API token page, UniFi API key page, Kavita Auth Key page, SABnzbd and qBittorrent settings, and so on) require credentials or local-only access and should be captured from inside the lab, with secrets redacted. The setup pages describe those steps in text until real captures exist.
  • Dashboard screenshots are now generated from demo data (see above), so those no longer need manual capture.