Skip to content

docs: lead README with a product showcase (screenshots + GIFs) - #1

Merged
josephmqiu merged 3 commits into
masterfrom
docs/readme-product-showcase
Jun 29, 2026
Merged

josephmqiu merged 3 commits into
masterfrom
docs/readme-product-showcase

Conversation

@josephmqiu

Copy link
Copy Markdown
Owner

What & why

Restructure the README to sell the product first, then keep the engineering docs below.

  • Top half (product): centered title + tagline, badges (release / platforms / MIT), a nav bar, a full-width dashboard hero, a Features showcase where each capability has its own demo GIF (issue → batch-issue → search/filter → period reports → mobile QR lookup), an "everything else" feature list, and a Download table.
  • Bottom half (engineering): the existing Tech Stack, Getting Started, Scripts, Project Structure, Testing, CI Policy, Documentation, Design, Contributing, and License — preserved, below a "🛠️ For developers" divider.

Adds the committed media (docs/media/: 2 hero stills + 5 GIFs) and a scripted, reproducible pipeline (scripts/media/) to regenerate it. Also fixes a latent crash in the demo seeder that surfaced while producing the data.

How it was tested

  • Ran scripts/seed-demo-data.ts end-to-end against .dev-data (49 items, 20 personnel, ~3.6k movements, alerts) — the previous channel_summary crash is gone.
  • Verified all five GIFs render real content in a headless browser, the README structure/anchors resolve, image paths resolve, and the dynamic badges resolve to real values (release v0.3.0, license MIT).
  • npm run verifyN/A: no src/ runtime/UI code changed (README + media assets + a standalone scripts/ dev tool that isn't imported by the app or the test suite; eslint src/ does not cover scripts/).
  • npm run test:e2eN/A: no behavior/UI change.
  • Added/updated tests — N/A: docs + a dev-only script, not covered by the app suite.
  • Updated CHANGELOG.md ([Unreleased]).

Notes for reviewers

  • GIF capture method: the browser preview at a wide viewport, which is pixel-identical to the Electron renderer (the only data-platform-specific CSS lives in @media (max-width: …) blocks, inert ≥1280px). Stills are retina 2×; GIFs are downscaled aspect-preserving (scale=W:-2, never squished) with leading page-load frames auto-trimmed.
  • Currency/theme: USD, dark theme, demo data anchored to "today" so the dashboard 30-day activity and reports are populated.
  • The seed-script fix is a genuine pre-existing bug (it inserted into the low_stock_alerts.channel_summary column an earlier migration dropped). It's included here because it was needed to generate the demo data — happy to split it into its own PR if you'd prefer.
  • The regenerable WebM sources are gitignored under docs/media/raw/ and kept locally for a future MP4 walkthrough.

Checklist

  • Diff is focused (README/media showcase + the seeding fix that enabled it)
  • Matches surrounding code style and conventions
  • If UI changed, it follows DESIGN.mdN/A (no app UI changed)
  • If translations changed, en and zh-CN are in key parity — N/A

🤖 Generated with Claude Code

josephmqiu and others added 2 commits June 29, 2026 11:04
Add scripts/media/{capture.mjs,encode.sh,set-currency.mjs} to drive the
browser preview with Playwright and encode optimized, looping GIFs (ffmpeg
palette pipeline, aspect-preserving) for the README.

Also fix scripts/seed-demo-data.ts: it still inserted into the
low_stock_alerts.channel_summary column that an earlier migration dropped,
so the seeder crashed partway through. Add SEED_DB_PATH / SEED_ASSUME_YES /
SEED_END_DATE env overrides so the .dev-data browser-preview database can be
seeded with current demo data without touching real app data.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Restructure the README into two halves: a product-first top (hero shot,
badges, a feature showcase with demo GIFs, and a download table) and a
developer/engineering bottom (tech stack, getting started, scripts, testing,
CI, docs, contributing) with the existing content preserved.

Add docs/media/ — two hero stills and five demo GIFs (issue, batch-issue,
inventory search/filter, period reports, and the mobile QR lookup), captured
at full resolution in the dark theme with USD pricing. gitignore
docs/media/raw/ — the regenerable WebM sources are kept locally for a
future MP4 walkthrough.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

@chatgpt-codex-connector chatgpt-codex-connector 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.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: ab1d89f073

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread scripts/media/encode.sh Outdated
Under `set -euo pipefail`, the blackdetect grep pipeline returns non-zero
when a clip starts directly on content (no leading-black frame), which aborted
the whole encoder before the `start=${start:-0}` fallback could apply. Swallow
the pipeline's exit with `|| true` so such clips encode from timestamp 0.

Addresses Codex review on PR #1.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@josephmqiu
josephmqiu merged commit 2e8b34b into master Jun 29, 2026
1 check passed
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