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:
@@ -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.
|
||||
Reference in New Issue
Block a user