Skip to content

docs: show the UI in the readme - #47

Merged
ThePrismSystem merged 2 commits into
mainfrom
docs/readme-screenshots
Aug 7, 2026
Merged

docs: show the UI in the readme#47
ThePrismSystem merged 2 commits into
mainfrom
docs/readme-screenshots

Conversation

@ThePrismSystem

Copy link
Copy Markdown
Owner

Summary

The readme described the app but never showed it, so the only way to find out what beans-web looks like was to install a Go binary and point it at your projects. Adds three screenshots covering the main tour.

Changes

  • Adds a Screenshots section after the intro: the overview, a project's nested bean list, and a bean's detail view
  • Ships a light and a dark variant of each behind <picture> + prefers-color-scheme, so the shot matches the theme the reader already has GitHub set to
  • Corrects the pnpm version in the prerequisites — the bump to pnpm 11 in chore(deps): apply pending renovate updates #46 left it saying 10

The three shots were picked to show something the prose cannot: that beans nest by parent (a milestone expanding into epics, features and bugs), and that a bean's fields and relationships are editable inline rather than through a form.

Usage

Nothing to use — but the demo data is reproducible rather than hand-made. Screenshots were taken against a throwaway GIT_ROOT seeded with five projects and 42 beans spread across every type, status and priority, with dates spread over eight months so the analytics series has a real shape. No real project data appears in them.

How to validate

The images are worth actually looking at rather than trusting:

  1. Open the readme on this branch and confirm all three render, in order, under Screenshots.
  2. Flip your GitHub appearance between light and dark (Settings → Appearance) and reload — each screenshot should swap to match. This is the part that silently breaks if a srcset path is wrong, since the <img> fallback still renders.
  3. Check the alt text on each by viewing the raw markdown; all three describe the content rather than repeating the caption.

Related links

Adds three screenshots — the overview, a project's nested bean list, and a
bean's detail view — so the readme shows what the app looks like before
someone installs a Go binary and points it at their projects.

Each one ships a light and a dark variant behind a <picture> element, so
the shot matches the theme the reader is already viewing GitHub in.

Also corrects the pnpm version the prerequisites mention, which the
dependency bump to pnpm 11 left behind.
@codecov

codecov Bot commented Aug 7, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

@codecov

codecov Bot commented Aug 7, 2026

Copy link
Copy Markdown

Bundle Report

Bundle size has no change ✅

Quantizes to an 8-bit palette and squeezes losslessly, taking the six
images from 1296 KB to 492 KB. Flat UI screenshots carry few enough
colours that the palette is effectively lossless here; checked at full
resolution that small monospace text, hairlines and badge borders are
unchanged.
@ThePrismSystem
ThePrismSystem merged commit e5c7709 into main Aug 7, 2026
12 checks passed
@ThePrismSystem
ThePrismSystem deleted the docs/readme-screenshots branch August 7, 2026 04:21
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