Skip to content

Commit f050240

Browse files
mstrhakrmstrhakr
committed
Add comprehensive guidelines for contributing screenshots to documentation
1 parent e2787c3 commit f050240

1 file changed

Lines changed: 186 additions & 0 deletions

File tree

‎assets/images/screenshots/README.md‎

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
# Screenshots Directory
2+
3+
This folder contains screenshots used throughout the Unraid Plugin Development documentation.
4+
5+
## Contributing Screenshots
6+
7+
When adding screenshots, please follow these guidelines:
8+
9+
### File Naming
10+
- Use **kebab-case** (lowercase with hyphens): `plugin-manager-details.png`
11+
- Use descriptive names that match the list below
12+
- Always use `.png` format
13+
14+
### Image Quality
15+
- **Width**: 1200-1400px for full-page, 600-800px for detail shots
16+
- **Format**: PNG with reasonable compression
17+
- **Theme**: Use dark theme for consistency (unless demonstrating themes)
18+
- Remove any personal information before uploading
19+
20+
### Tips
21+
- Use a clean Unraid installation or VM
22+
- Crop to focus on relevant UI elements
23+
- Add annotations (arrows, boxes) sparingly if needed
24+
25+
---
26+
27+
## Required Screenshots
28+
29+
Check off items as you add them. The filename must match exactly for the documentation to display it correctly.
30+
31+
### Homepage
32+
| Status | Filename | Description |
33+
|:------:|----------|-------------|
34+
| ⬜ | `unraid-plugins-overview.png` | The Unraid web interface showing the Plugins page with installed plugins and the Community Applications icon |
35+
36+
### Introduction (`docs/introduction.md`)
37+
| Status | Filename | Description |
38+
|:------:|----------|-------------|
39+
| ⬜ | `plugins-page-overview.png` | The Unraid Plugins page showing installed plugins with version numbers, update status, and action buttons |
40+
| ⬜ | `plugin-vs-docker-comparison.png` | Side-by-side comparison showing a plugin settings page vs a Docker container management view |
41+
42+
### Getting Started (`docs/getting-started.md`)
43+
| Status | Filename | Description |
44+
|:------:|----------|-------------|
45+
| ⬜ | `hello-world-complete.png` | The completed Hello World plugin settings page in the Unraid UI, showing the message input field and Apply/Done buttons |
46+
| ⬜ | `page-file-rendered.png` | How a .page file renders in the Unraid Settings menu - showing the form layout, input field styling, and inline help block expanded |
47+
| ⬜ | `plugin-install-success.png` | The Unraid Settings sidebar showing a plugin entry with its icon, AND/OR terminal output from a successful plugin installation |
48+
| ⬜ | `github-release-example.png` | GitHub releases page showing a plugin release with the .txz and .plg files attached as assets |
49+
50+
### PLG File Reference (`docs/plg-file.md`)
51+
| Status | Filename | Description |
52+
|:------:|----------|-------------|
53+
| ⬜ | `plugin-manager-details.png` | The Unraid Plugin Manager showing a plugin's details panel with version, author, support link, and changelog visible |
54+
| ⬜ | `plugin-changelog-display.png` | The changelog/changes section displayed in the Unraid Plugin Manager when you click on a plugin's version history |
55+
56+
### Page Files Reference (`docs/page-files.md`)
57+
| Status | Filename | Description |
58+
|:------:|----------|-------------|
59+
| ⬜ | `page-file-anatomy.png` | Annotated screenshot showing how a .page file's header attributes map to the rendered UI (icon, title, menu placement) |
60+
| ⬜ | `menu-sections-overview.png` | The Unraid sidebar showing different menu sections (Main, Settings, Tools, Utilities) with plugin entries highlighted |
61+
| ⬜ | `standard-settings-page.png` | A standard settings page rendered in Unraid showing the Dynamix form styling with labels, inputs, inline help, and buttons |
62+
| ⬜ | `utility-page-example.png` | A utility page in Unraid showing a custom tool interface with action buttons and output display area |
63+
| ⬜ | `header-xmenu-example.png` | The Unraid header bar showing an xmenu item (like Docker or VMs) with the dropdown or page it opens |
64+
| ⬜ | `dynamix-markdown-form.png` | A form showing the Dynamix markdown syntax rendered - labels on the left, inputs on the right, with inline help |
65+
66+
### File System Layout (`docs/filesystem.md`)
67+
| Status | Filename | Description |
68+
|:------:|----------|-------------|
69+
| ⬜ | `boot-config-plugins-dir.png` | Unraid terminal or file manager showing the /boot/config/plugins/ directory structure with several installed plugins |
70+
| ⬜ | `usb-plugins-directory.png` | File listing of /boot/config/plugins/ showing multiple plugin folders with .plg files and subdirectories |
71+
| ⬜ | `emhttp-plugins-directory.png` | File listing of /usr/local/emhttp/plugins/[plugin]/ showing the typical plugin structure (.page files, scripts/, php/) |
72+
73+
### Event System (`docs/events.md`)
74+
| Status | Filename | Description |
75+
|:------:|----------|-------------|
76+
| ⬜ | `event-syslog-output.png` | Syslog output showing event script execution during array start - displaying the sequence of events and plugin responses |
77+
78+
### Plugin Command Reference (`docs/plugin-command.md`)
79+
| Status | Filename | Description |
80+
|:------:|----------|-------------|
81+
| ⬜ | `plugin-command-help.png` | Terminal showing the plugin command help output or a plugin installation in progress |
82+
| ⬜ | `plugin-install-output.png` | Terminal output showing a successful plugin installation with download progress and confirmation message |
83+
84+
### Notifications System (`docs/core/notifications-system.md`)
85+
| Status | Filename | Description |
86+
|:------:|----------|-------------|
87+
| ⬜ | `notification-levels.png` | The Unraid notification panel showing examples of normal (blue), warning (yellow), and alert (red) notifications |
88+
89+
### Dynamix Framework (`docs/core/dynamix-framework.md`)
90+
| Status | Filename | Description |
91+
|:------:|----------|-------------|
92+
| ⬜ | `dynamix-display-settings.png` | The Unraid Display Settings page showing the various preferences that populate $Dynamix (date format, temperature scale, theme) |
93+
| ⬜ | `theme-variations.png` | A plugin page shown in multiple Unraid themes (black, white, azure) demonstrating theme-aware styling |
94+
95+
### nchan/WebSocket Integration (`docs/core/nchan-websocket.md`)
96+
| Status | Filename | Description |
97+
|:------:|----------|-------------|
98+
| ⬜ | `nchan-devtools.png` | Browser DevTools Network tab showing a WebSocket or EventSource connection to an Unraid nchan channel |
99+
100+
### Form Controls (`docs/ui/form-controls.md`)
101+
| Status | Filename | Description |
102+
|:------:|----------|-------------|
103+
| ⬜ | `form-controls-overview.png` | An Unraid settings page showing the standard form layout with labels, inputs, and buttons styled correctly |
104+
| ⬜ | `toggle-switch-styles.png` | Side-by-side showing the standard Yes/No dropdown toggle and the CSS-based toggle switch in Unraid |
105+
| ⬜ | `share-selector-dropdown.png` | A dropdown showing Unraid shares populated from shares.ini with typical share names |
106+
| ⬜ | `file-tree-picker.png` | The Unraid file tree picker expanded, showing the folder hierarchy under /mnt/user/ |
107+
108+
### Icons and Styling (`docs/ui/icons-and-styling.md`)
109+
| Status | Filename | Description |
110+
|:------:|----------|-------------|
111+
| ⬜ | `sidebar-icons.png` | The Unraid sidebar showing various plugin icons, demonstrating the icon style and sizing |
112+
| ⬜ | `status-indicators.png` | Examples of Unraid's status indicators showing online (green), offline (red), and warning (yellow) states |
113+
| ⬜ | `theme-comparison.png` | Same plugin page shown in both light and dark themes, demonstrating theme-aware styling |
114+
115+
### Tab Pages (`docs/ui/tab-pages.md`)
116+
| Status | Filename | Description |
117+
|:------:|----------|-------------|
118+
| ⬜ | `tabbed-interface.png` | An Unraid plugin with multiple tabs visible (e.g., General, Advanced, About), showing the tab styling and content area |
119+
120+
### Dashboard Tiles (`docs/ui/dashboard-tiles.md`)
121+
| Status | Filename | Description |
122+
|:------:|----------|-------------|
123+
| ⬜ | `dashboard-tiles-overview.png` | The Unraid dashboard showing various plugin tiles - including status tiles, metric displays, and action buttons |
124+
| ⬜ | `tile-types-examples.png` | Examples of different tile types: a status tile showing service running/stopped, a metric tile, and an action tile with a button |
125+
126+
### Community Applications (`docs/distribution/community-applications.md`)
127+
| Status | Filename | Description |
128+
|:------:|----------|-------------|
129+
| ⬜ | `ca-plugin-browser.png` | The Community Applications interface showing the plugin browser with categories, search, and plugin cards |
130+
| ⬜ | `ca-plugin-icons.png` | Examples of good plugin icons as they appear in the CA interface - showing proper sizing and visibility |
131+
132+
### Debugging Techniques (`docs/advanced/debugging-techniques.md`)
133+
| Status | Filename | Description |
134+
|:------:|----------|-------------|
135+
| ⬜ | `browser-devtools.png` | Browser DevTools open on an Unraid plugin page, showing the Console and Network tabs for debugging |
136+
| ⬜ | `syslog-plugin-output.png` | Terminal showing syslog output with plugin log messages highlighted |
137+
138+
### Build and Packaging (`docs/build-and-packaging.md`)
139+
| Status | Filename | Description |
140+
|:------:|----------|-------------|
141+
| ⬜ | `github-actions-build.png` | GitHub Actions workflow running for a plugin, showing the build and release steps |
142+
143+
### Example Plugins (`docs/examples.md`)
144+
| Status | Filename | Description |
145+
|:------:|----------|-------------|
146+
| ⬜ | `example-plugins-collage.png` | A collage or grid showing screenshots of popular Unraid plugins (Compose Manager, User Scripts, CA, etc.) |
147+
148+
---
149+
150+
## Summary
151+
152+
| Section | Count |
153+
|---------|:-----:|
154+
| Homepage | 1 |
155+
| Introduction | 2 |
156+
| Getting Started | 4 |
157+
| PLG File Reference | 2 |
158+
| Page Files Reference | 6 |
159+
| File System Layout | 3 |
160+
| Event System | 1 |
161+
| Plugin Command | 2 |
162+
| Notifications System | 1 |
163+
| Dynamix Framework | 2 |
164+
| nchan/WebSocket | 1 |
165+
| Form Controls | 4 |
166+
| Icons and Styling | 3 |
167+
| Tab Pages | 1 |
168+
| Dashboard Tiles | 2 |
169+
| Community Applications | 2 |
170+
| Debugging Techniques | 2 |
171+
| Build and Packaging | 1 |
172+
| Example Plugins | 1 |
173+
| **TOTAL** | **41** |
174+
175+
---
176+
177+
## How to Update This List
178+
179+
When you add a screenshot:
180+
1. Change `⬜` to `✅` in the Status column
181+
2. Commit both the image and this updated README
182+
3. The documentation will automatically display your new screenshot
183+
184+
## Questions?
185+
186+
Open an issue on the [GitHub repository](https://github.com/mstrhakr/unraid-plugin-docs/issues) if you need clarification on any screenshot.

0 commit comments

Comments
 (0)