Fix screenshot thumbnail crop and dead issue deep-link before public launch - #11
Merged
Merged
Conversation
…launch An independent pre-launch audit (verify-pageflag) found two real bugs and a doc-vs-config mismatch on the otherwise-working documented install path: - The pin thumbnail used object-fit: cover in a 160x100 box against full-page html2canvas captures, which crops to blank whitespace for any page with normal content below the fold - exactly the pages this tool targets. Switched to object-fit: contain with a click-through to the full screenshot (dashboard and the public review page). - Issues filed via the GitHub/Linear integrations link back to /projects/:id/pins/:id, a route the dashboard never defined, so the "one click to see it in Pageflag" link always 404'd to the site list. Added the route, and it's compounded by .env.example's DASHBOARD_ORIGIN defaulting to the Vite dev port (:5173) instead of docker-compose.yml's own :4000 fallback - corrected the default and documented it as a third day-one env var. - Added a dashboard route test covering the deep link, the exact gap that let it ship unnoticed (no dashboard route/component tests existed). - Softened the README/SECURITY.md language around the GHCR image and "latest release" since no tag has been cut yet. CI already triggers on `main`, this repo's actual default branch, so no branch-mismatch fix was needed there. Cutting a v1.0.0 tag to publish the first GHCR image was left undone: this GitHub account's Actions runs are currently failing account-wide on a billing/spending-limit error unrelated to this repo's workflows, so a tag push right now would not produce a working image - see AGENTS.md's Release section. Verified with a from-scratch `docker compose build --no-cache` + `up`, then reproduced the full signup -> project -> widget embed -> pin -> dashboard flow in a real browser against a throwaway tall page, confirming the thumbnail now shows real content and the deep link resolves instead of redirecting home. Full local suite: npm run build, npm run lint, prettier --check, and npm test all pass (47/47 tests, widget/dashboard/server). Claude-Session: https://claude.ai/code/session_01TAaR4rVcXzNPKYVm213pye
6 tasks done
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
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
An independent pre-launch audit (verify-pageflag) followed only the README on a clean worktree, confirmed the core Docker/widget/dashboard flow genuinely works, and ranked four things to fix before making this repo public. This PR addresses all of them that are within a code/docs change's reach.
Fixed:
object-fit: coverin a fixed 160×100px box against full-pagehtml2canvascaptures. For any page with normal content below the fold (i.e. most real marketing pages), this crops to a blank whitespace band, hiding the very feature the README leads with. Switched toobject-fit: containand wrapped the thumbnail in a click-through link to the full screenshot, in both the dashboard's pin list and the public review page./projects/:id/pins/:id, a route the dashboard never defined, so "one click to see it in Pageflag" always landed on the site list instead. Added the route (it now scrolls to and highlights the target pin). This was compounded by.env.example'sDASHBOARD_ORIGINdefaulting to the Vite dev port (:5173) instead ofdocker-compose.yml's own:4000fallback — corrected the default and documentedDASHBOARD_ORIGINas a third "day one" env var in the README.dashboard/test/routing.test.tsx), the exact coverage gap the audit named as the reason chore(deps): bump softprops/action-gh-release from 2.6.2 to 3.0.2 #2 shipped unnoticed (zero dashboard route/component tests existed before this).Checked, not changed:
ci.ymlalready triggers onmain, andmainis genuinely this repo's default branch. Nothing to fix.v1.0.0tag right now would triggerrelease.ymland hit the same wall without producing a working image, so I left it for whoever can clear the billing block — documented inAGENTS.md's Release section, and softened the README/SECURITY.md text in the meantime so they don't promise an image that doesn't exist.What I ran
npm ci→npm run build(all 3 workspaces) →npm run lint→npx prettier --check .→ all clean.make test-db && npm test: 47/47 passing (9 widget, 8 dashboard incl. the new routing test, 30 server).docker compose build --no-cache app && docker compose up -dfrom a freshly generated.env(viacp .env.example .envper the README) — confirmedDASHBOARD_ORIGINnow resolves to:4000inside the container.html2canvascapture (33,947-byte POST body), and confirmed in the dashboard that the thumbnail shows real page content instead of a blank crop, and that navigating directly to/projects/:id/pins/:idresolves to that pin instead of redirecting home. Same click-through screenshot fix verified on the public/review/:tokenpage.Test plan
npm run build/npm run lint/prettier --checkcleannpm test— 47/47 passing across all three workspacesdocker compose build --no-cache+upsucceeds🤖 Generated with Claude Code
https://claude.ai/code/session_01TAaR4rVcXzNPKYVm213pye