- {[
- {
- q: 'App shows "Configuring" after deployment',
- a: 'Check the app\'s logs in Dozzle or Portainer. Verify the port isn\'t already in use. Make sure volume mounts have correct permissions.',
- },
- {
- q: 'SSL certificate not issued',
- a: 'Verify your DNS is pointed to your server\'s IP. Check that ports 80 and 443 are open. Give Caddy 1-2 minutes after first deploy.',
- },
- {
- q: "Can't access app after deployment",
- a: 'Try the subdomain directly (DNS may need to propagate). Check Caddy routing rules in the dashboard. Verify the container is running in Portainer.',
- },
- {
- q: 'License won\'t activate',
- a: 'Make sure the machine is connected to the internet. Check the machine\'s clock is set correctly. Try deactivating the old machine first if moving to a new server.',
- },
- {
- q: 'Subscriptions not activating after payment',
- a: 'The Stripe webhook can take a few minutes to arrive. If it doesn\'t arrive within 10 minutes, contact support with your Stripe payment reference.',
- },
- ].map(({ q, a }) => (
+ {troubleshooting.map(({ q, a }) => (
{q}
{a}
diff --git a/src/app/docs/quick-search/page.tsx b/src/app/docs/quick-search/page.tsx
new file mode 100644
index 0000000..40f769a
--- /dev/null
+++ b/src/app/docs/quick-search/page.tsx
@@ -0,0 +1,58 @@
+import TutorialLayout from '../_components/TutorialLayout';
+
+const quickSearch = {
+ title: 'Quick Search',
+ icon: '🔍',
+ description: 'Find services and settings instantly with keyboard shortcuts. Press Ctrl+K to open, arrow keys to navigate.',
+ heroScreenshot: '/tutorials/screenshots/05-quick-search/light/02-quick-search-open.png',
+ steps: [
+ {
+ title: 'Open Quick Search',
+ body: 'Quick Search is accessed via a modal. Press Ctrl+K (or Cmd+K on Mac) to open it. Alternatively, you can access it from the dashboard header or menu if available.',
+ screenshot: '/tutorials/screenshots/05-quick-search/light/02-quick-search-open.png',
+ },
+ {
+ title: 'The Quick Search Interface',
+ body: 'When opened, the Quick Search modal appears centered on your screen with a search input field at the top. Below the input, keyboard shortcut hints are displayed: ESC to close, ↑↓ to navigate, Enter to select, and Esc to close again.',
+ screenshot: '/tutorials/screenshots/05-quick-search/light/02-quick-search-open.png',
+ },
+ {
+ title: 'Search for Services or Settings',
+ body: 'Click on the search input field and start typing. Quick Search supports fuzzy matching and shows results as you type. Search for service names (Plex, Gitea, Nextcloud), settings (backup, theme, notifications), or dashboard features (logs, stats, docker).',
+ screenshot: '/tutorials/screenshots/05-quick-search/light/03-quick-search-typed.png',
+ },
+ {
+ title: 'Navigate and Select Results',
+ body: 'Use the keyboard to navigate through search results: ↑/↓ arrows move the selection highlight up or down, Enter selects and opens the highlighted item, and ESC closes the Quick Search modal without selecting anything. Result types include services, settings pages, dashboard features, and documentation links.',
+ },
+ ],
+ troubleshooting: [
+ {
+ issue: "Quick Search doesn't open",
+ solution: 'Try the keyboard shortcut (Ctrl+K or Cmd+K). If it still doesn\'t open, the feature may not be available in your version.',
+ },
+ {
+ issue: 'No results appearing',
+ solution: 'Try shorter search terms or check your spelling. Results depend on what services and settings are configured.',
+ },
+ {
+ issue: "Can't select with Enter",
+ solution: 'Make sure a result is highlighted (has keyboard focus) before pressing Enter.',
+ },
+ ],
+};
+
+export default function QuickSearchPage() {
+ return (
+
+ );
+}
diff --git a/src/app/docs/stats-monitoring/page.tsx b/src/app/docs/stats-monitoring/page.tsx
new file mode 100644
index 0000000..f24c8d4
--- /dev/null
+++ b/src/app/docs/stats-monitoring/page.tsx
@@ -0,0 +1,60 @@
+import TutorialLayout from '../_components/TutorialLayout';
+
+const statsMonitoring = {
+ title: 'Stats Monitoring',
+ icon: '📊',
+ description: 'Track CPU, memory, network, and disk usage in real-time. View live stats, 24h summaries, and set up alerts.',
+ heroScreenshot: '/tutorials/screenshots/07-stats-monitoring/light/02-stats-modal-open.png',
+ steps: [
+ {
+ title: 'Access the Resource Monitor',
+ body: 'The Stats monitoring is found in the STATUS section of the dashboard. Navigate to STATUS and click on Stats to open the Resource Monitor.',
+ screenshot: '/tutorials/screenshots/07-stats-monitoring/light/01-dashboard.png',
+ },
+ {
+ title: 'The Stats Modal Interface',
+ body: 'The Stats modal opens showing the 📊 Resource Monitor with a description: "Real-time and historical CPU, memory, network, and disk usage for containers." The modal has three tabs: Live Stats (real-time metrics), 24h Summary (aggregated over 24 hours), and Alerts (notifications).',
+ screenshot: '/tutorials/screenshots/07-stats-monitoring/light/02-stats-modal-open.png',
+ },
+ {
+ title: 'View Live Stats',
+ body: 'The Live Stats tab shows real-time resource usage for each container: CPU usage percentage, memory usage (used vs. available), network I/O rates, and disk I/O rates. The display auto-refreshes every 5 seconds. Use the 🔄 Refresh Now button to manually trigger a refresh. High CPU (>80%) sustained may indicate performance issues.',
+ },
+ {
+ title: 'Check 24h Summary',
+ body: 'The 24h Summary tab shows aggregated statistics over the past 24 hours: peak CPU usage, average memory usage, total network traffic, and disk usage trends. This view helps identify resource usage patterns and plan for capacity needs.',
+ },
+ {
+ title: 'View Alerts',
+ body: 'The Alerts tab shows any resource-related alerts: high CPU warnings, memory pressure alerts, disk space warnings, and network issues. Alerts help you stay on top of problems before they cause service disruptions. Configure alert thresholds in Settings if available.',
+ },
+ ],
+ troubleshooting: [
+ {
+ issue: 'Stats show "Loading container stats..."',
+ solution: 'No containers are running, or Docker is not responding. Check that Docker is running and containers are active.',
+ },
+ {
+ issue: 'Auto-refresh not working',
+ solution: 'Click "🔄 Refresh Now" manually. Check that the Docker daemon is responding.',
+ },
+ {
+ issue: 'Missing container in stats',
+ solution: 'Container may have stopped. Check container status in Portainer or via the Docker CLI.',
+ },
+ ],
+};
+
+export default function StatsMonitoringPage() {
+ return (
+
+ );
+}
diff --git a/src/app/docs/theme-customization/page.tsx b/src/app/docs/theme-customization/page.tsx
new file mode 100644
index 0000000..433c077
--- /dev/null
+++ b/src/app/docs/theme-customization/page.tsx
@@ -0,0 +1,62 @@
+import TutorialLayout from '../_components/TutorialLayout';
+
+const themeCustomization = {
+ title: 'Theme Customization',
+ icon: '🎨',
+ description: 'Customize the dashboard with 10 built-in presets (Dark, Nord, Dracula, Ocean, and more) or build your own color scheme from scratch.',
+ heroScreenshot: '/tutorials/screenshots/03-theme-customization/light/04-theme-builder-open.png',
+ steps: [
+ {
+ title: 'Open the Theme Builder',
+ body: '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). Click the 🎨 Light button or the Customize text to open the Theme Builder modal.',
+ screenshot: '/tutorials/screenshots/03-theme-customization/light/01-light-theme-dashboard.png',
+ },
+ {
+ title: 'Explore the Theme Builder',
+ body: 'The Theme Builder modal opens with several sections: a preset list (Dark, Light, Blue, Black, Nord, Dracula, Solarized Dark, Solarized Light, Taxi, Ocean), a preview card showing secondary text and accent button samples, and status indicators (Online/Offline). You can also rename your theme and see its current configuration.',
+ screenshot: '/tutorials/screenshots/03-theme-customization/light/04-theme-builder-open.png',
+ },
+ {
+ title: 'Select a Base Theme',
+ body: 'Click on one of the preset themes (e.g., "Dark") to start from that base. The preview card updates to reflect the selected preset\'s colors and styling. This gives you a starting point that you can then fine-tune.',
+ screenshot: '/tutorials/screenshots/03-theme-customization/dark/05-dark-preset-selected.png',
+ },
+ {
+ title: 'Customize Colors (Optional)',
+ body: 'Below the presets, find granular color controls organized into sections: Base Colors (Background, Card, Text, Muted Text, Border), Accent Colors (Accent, Accent Strong), and Status Colors (OK Background, OK Text, Error Bg, Error Text). Each field is editable — click on a color swatch or enter a hex value.',
+ },
+ {
+ title: 'Save Your Theme',
+ body: 'When satisfied with your customizations, click Save Theme at the bottom of the modal. The theme is applied to your dashboard immediately. Click Cancel to discard changes, or ✕ to close the modal without saving. You can also use Import and Export to backup or share themes.',
+ },
+ ],
+ troubleshooting: [
+ {
+ issue: 'Theme builder button not visible',
+ solution: 'Scroll to top of dashboard — the button is in the top bar next to the settings gear.',
+ },
+ {
+ issue: 'Preset click not working',
+ solution: 'Try clicking directly on the preset name text, or scroll to ensure the preset list is fully visible.',
+ },
+ {
+ issue: 'Theme not saving',
+ solution: 'Ensure you click "Save Theme" before closing the modal. If the issue persists, try a different browser.',
+ },
+ ],
+};
+
+export default function ThemeCustomizationPage() {
+ return (
+
+ );
+}
diff --git a/src/app/docs/viewing-logs/page.tsx b/src/app/docs/viewing-logs/page.tsx
new file mode 100644
index 0000000..0bc7cbb
--- /dev/null
+++ b/src/app/docs/viewing-logs/page.tsx
@@ -0,0 +1,57 @@
+import TutorialLayout from '../_components/TutorialLayout';
+
+const viewingLogs = {
+ title: 'Viewing Logs',
+ icon: '📋',
+ description: 'Monitor your services with real-time log streaming. Filter by line count, pause live updates, and search through logs.',
+ heroScreenshot: '/tutorials/screenshots/04-viewing-logs/light/02-logs-modal-open.png',
+ steps: [
+ {
+ title: 'Access the Logs Viewer',
+ body: 'The Logs viewer is found in the TOOLS section of the dashboard. Look for a "Logs" button (📋 Logs) in the TOOLS section. Click on it to open the logs viewer modal.',
+ screenshot: '/tutorials/screenshots/04-viewing-logs/light/01-dashboard.png',
+ },
+ {
+ title: 'The Logs Modal Interface',
+ body: 'The logs modal displays: a DNS Logs title, a "Show" dropdown to control line count (25, 50, 100, or 200 lines), live streaming controls (📡 Live and ⏸️ Pause buttons), and a close button (✕). The main content area shows the actual log entries with timestamps, service names, and messages.',
+ screenshot: '/tutorials/screenshots/04-viewing-logs/light/02-logs-modal-open.png',
+ },
+ {
+ title: 'Use Live Log Streaming',
+ body: 'Click the 📡 Live button to enable real-time log streaming. New log entries appear automatically at the top or bottom of the list. Click ⏸️ Pause to stop auto-updating so you can scroll through logs without new entries pushing content around.',
+ },
+ {
+ title: 'Control Log Volume',
+ body: 'Use the "Show" dropdown to control how many log lines are displayed at once. Choose 25 for a quick overview, 50 for the default view, 100 for more context, or 200 for detailed analysis. Fewer lines load faster and are easier to read.',
+ },
+ ],
+ troubleshooting: [
+ {
+ issue: 'Logs show "Loading logs..."',
+ solution: 'No services are running, or services haven\'t generated logs yet. Check that your services are actually running in Docker.',
+ },
+ {
+ issue: 'Log entries not appearing',
+ solution: 'Live streaming may be paused — click 📡 Live to resume. Also check that the service is producing logs.',
+ },
+ {
+ issue: "Can't scroll through logs",
+ solution: 'Make sure pause (⏸️ Pause) is enabled to prevent new entries from continuously pushing content.',
+ },
+ ],
+};
+
+export default function ViewingLogsPage() {
+ return (
+
+ );
+}