Real product screenshots in marketing BrowserFrames (Group C)#279
Open
blove wants to merge 2 commits into
Open
Real product screenshots in marketing BrowserFrames (Group C)#279blove wants to merge 2 commits into
blove wants to merge 2 commits into
Conversation
…roup C) Phase 3 of the original spec — replaces inline placeholder UI in the marketing BrowserFrames with real screenshots captured from the live cockpit.cacheplane.ai reference app. New script — apps/website/scripts/capture-screenshots.ts: - Playwright headless Chromium, 1440×900 viewport at 2× DPR - Visits cockpit.cacheplane.ai, switches through all 4 modes (Run, Code, Docs, API), screenshots the content section - Sharp pipeline: resize to max 1400 wide, encode as WebP q=85 - Idempotent — re-running overwrites the committed WebPs Captured screenshots — apps/website/public/screenshots/: - cockpit-code.webp (67K) — Code mode showing real Angular component - cockpit-docs.webp (61K) — Docs mode showing the streaming guide - cockpit-api.webp (37K) — API mode showing structured reference - cockpit-run.webp (11K) — Run mode showing the live chat surface Wired into 4 BrowserFrame slots: - Hero.tsx — collage back frame: cockpit-code.webp (front frame stays synthetic — small enough that a real shot would be illegible at that size) - page.tsx Stream FeatureBlock: cockpit-docs.webp - page.tsx Render FeatureBlock: cockpit-api.webp - pilot-to-prod/page.tsx Build block: cockpit-run.webp The Ship FeatureBlock already used LiveCockpitFrame (lazy-loaded live iframe) — unchanged. Re-running the script: pnpm tsx apps/website/scripts/capture-screenshots.ts Optional flags: --url <override> --keep-png All 35 website e2e tests pass. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
The eslint-disable-next-line @next/next/no-img-element comments added in d035751 reference a rule the project's ESLint config doesn't load — and ESLint treats a disable directive for an undefined rule as an error itself. Drops the comments. The <img> usages are intentional (real local WebP screenshots in BrowserFrames where Next.js Image's optimization isn't needed — the files are already optimized and locally served). Fixes the Website — lint / build CI failure. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Group C of the post-merge brand sweep — closes Phase 3 of the original Statusbrew refactor spec (deferred at brainstorm time). Replaces the inline ASCII-prose placeholders inside the marketing BrowserFrames with real screenshots captured from the live `cockpit.cacheplane.ai` reference app.
What's new
Capture script — `apps/website/scripts/capture-screenshots.ts`
4 committed screenshots — `apps/website/public/screenshots/`
Wired into 4 BrowserFrame slots:
The Ship FeatureBlock already used `LiveCockpitFrame` (lazy-loaded live iframe) — unchanged.
Net effect
Test plan
Re-running the script
```
pnpm tsx apps/website/scripts/capture-screenshots.ts
```
Optional flags: `--url ` to capture from a different cockpit URL, `--keep-png` to retain the intermediate PNGs for inspection.
🤖 Generated with Claude Code