Skip to content

docs(readme): add screenshots to all READMEs#3

Merged
BlackHole1 merged 1 commit into
mainfrom
docs/readme-screenshots
Jul 2, 2026
Merged

docs(readme): add screenshots to all READMEs#3
BlackHole1 merged 1 commit into
mainfrom
docs/readme-screenshots

Conversation

@BlackHole1

Copy link
Copy Markdown
Member

Adds a Screenshots section to the root README and all nine translated READMEs so visitors can see the Mission Control overlay and the Settings panes before installing.

Each screenshot ships light and dark variants selected via <picture> + prefers-color-scheme, so they track the reader's GitHub theme. The overlay shot is language-neutral (traffic lights only) and shared everywhere; the General and Keyboard Shortcuts settings shots use the localized zh-CN captures in the Chinese READMEs and the English captures elsewhere. Because the translated READMEs live one directory deeper under docs/README/, they reference the images with ../images/ while the root uses docs/images/.

Add a Screenshots section showing the Mission Control overlay and the
General / Keyboard Shortcuts settings panes, so visitors can see what
CloseUp does before installing.

Each shot ships light and dark variants selected via `<picture>` +
`prefers-color-scheme`, so the images track the reader's GitHub theme.
The overlay shot is language-neutral (traffic lights only); the settings
shots use the localized zh-CN captures in the Chinese READMEs and the
English captures everywhere else. Translated READMEs live one directory
deeper, so they reference the images with `../images/` rather than the
root's `docs/images/`.

Signed-off-by: Kevin Cui <bh@bugs.cc>
@coderabbitai

coderabbitai Bot commented Jul 2, 2026

Copy link
Copy Markdown

Review Change Stack

Summary by CodeRabbit

  • Documentation
    • Added a new screenshots section to the main README and translated documentation pages.
    • Included centered preview images for the app’s overlay view, general settings, and keyboard shortcuts.
    • Added light and dark theme variants so screenshots display appropriately in both modes.

Walkthrough

This pull request adds a new "Screenshots" documentation section to the main README.md and to all eight localized README files (German, Spanish, French, Japanese, Portuguese-BR, Russian, Simplified Chinese, Traditional Chinese). Each section contains centered image markup embedding three screenshots—an overlay preview over the Mission Control view, a General settings screen, and a Keyboard shortcuts screen—each with light/dark variants selected via prefers-color-scheme. No code, exported entities, or public APIs are changed.

Changes

Cohort / File(s) Summary
README.md Added Screenshots section with header and embedded images (overlay, General settings, Keyboard shortcuts) with light/dark variants
docs/README/README.de.md, README.es.md, README.fr.md, README.ja.md, README.pt-BR.md, README.ru.md, README.zh-CN.md, README.zh-TW.md Added localized equivalents of the Screenshots section with the same image content and light/dark switching

Related PRs: None identified.

Suggested labels: documentation

Suggested reviewers: None identified.

Poem
A rabbit hops through docs anew,
Screenshots bloom in every hue,
Light and dark, side by side they gleam,
Nine README files, one shared dream,
Mission Control now framed in view. 🐇✨

🚥 Pre-merge checks | ✅ 4
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title matches the required format and accurately summarizes the README screenshot updates.
Description check ✅ Passed The description is directly related to adding screenshot sections across the READMEs.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
✨ Simplify code
  • Create PR with simplified code
  • Commit simplified code in branch docs/readme-screenshots

Comment @coderabbitai help to get the list of available commands.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@docs/README/README.zh-TW.md`:
- Around line 16-25: The Traditional Chinese README still references English
screenshot assets in the localized image block, so update the picture entries in
README.zh-TW to use the corresponding localized settings screenshots instead of
the settings-general-en-* and settings-shortcuts-en-* files. Keep the same
markup structure, but swap the src and srcset values in the README image section
so they match the Chinese localization pattern used elsewhere in the docs.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 58ac9e43-ec7c-4b26-95d3-ac54650e7b6d

📥 Commits

Reviewing files that changed from the base of the PR and between e7024bd and fa25c20.

⛔ Files ignored due to path filters (10)
  • docs/images/overlay-dark.png is excluded by !**/*.png
  • docs/images/overlay-light.png is excluded by !**/*.png
  • docs/images/settings-general-en-dark.png is excluded by !**/*.png
  • docs/images/settings-general-en-light.png is excluded by !**/*.png
  • docs/images/settings-general-zh-CN-dark.png is excluded by !**/*.png
  • docs/images/settings-general-zh-CN-light.png is excluded by !**/*.png
  • docs/images/settings-shortcuts-en-dark.png is excluded by !**/*.png
  • docs/images/settings-shortcuts-en-light.png is excluded by !**/*.png
  • docs/images/settings-shortcuts-zh-CN-dark.png is excluded by !**/*.png
  • docs/images/settings-shortcuts-zh-CN-light.png is excluded by !**/*.png
📒 Files selected for processing (9)
  • README.md
  • docs/README/README.de.md
  • docs/README/README.es.md
  • docs/README/README.fr.md
  • docs/README/README.ja.md
  • docs/README/README.pt-BR.md
  • docs/README/README.ru.md
  • docs/README/README.zh-CN.md
  • docs/README/README.zh-TW.md

Comment thread docs/README/README.zh-TW.md
@BlackHole1
BlackHole1 merged commit 7c8fe40 into main Jul 2, 2026
3 checks passed
@BlackHole1
BlackHole1 deleted the docs/readme-screenshots branch July 2, 2026 14:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant