docs: add screenshots section to README with composed collage

Three-panel collage (popup, before, after) generated via Pillow script.
4:3 aspect ratio, 1200px max, gradient background with drop shadows.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
2026-08-28 03:09:55 -04:00
parent 00507fe87c
commit dc31d21104
8 changed files with 263 additions and 0 deletions

View File

@@ -0,0 +1,28 @@
# README Screenshots
## Task
Add a Screenshots section to the README featuring a composed collage hero image and links to each full-size original screenshot.
## Changes Made
### New files
- `docs/make_collage.py` -- Python/Pillow script that composes the three source screenshots into an 800x600 collage image (popup left, disabled top-right, enabled bottom-right, light gray background, 4px gaps).
- `docs/reddit-extension-collage.png` -- the generated collage output.
### Modified files
- `README.md` -- added a "Screenshots" section between "What it does" and "Installation" containing the collage image, a blockquote caption describing the layout and noting RES was active during capture, and a table linking to each full-size original.
## Source screenshots
- `docs/reddit-extension-popup.png` (645x2757) -- captured by user by opening `moz-extension://<uuid>/popup/popup.html` in a Firefox tab
- `docs/reddit-extension-disabled.png` (2794x1671) -- old.reddit.com without extension
- `docs/reddit-extension-enabled.png` (2794x1671) -- old.reddit.com with extension
## Lessons Learned
- Firefox extension popups close on focus loss. Opening the popup HTML directly via `moz-extension://` URL in a regular tab is the simplest workaround for full-page captures.
- GitHub-flavored markdown cannot crop images, does not honor `rowspan`, and strips most CSS. A pre-composed collage image is the only way to get a multi-panel layout.
- Pillow's `Image.LANCZOS` resampling produces clean downscaled screenshots even at significant reduction ratios (e.g., 2794px down to ~546px).
## Follow-up
- The `docs/make_collage.py` script can be re-run if source screenshots are updated.
- Consider adding the collage script or output to `.gitignore` if the generated image shouldn't be tracked separately from sources.