Skip to content

Fix screenshot thumbnail crop and dead issue deep-link before public launch - #11

Merged
Laaaaksh merged 1 commit into
mainfrom
fm/cleanup-pageflag
Aug 29, 2026
Merged

Laaaaksh merged 1 commit into
mainfrom
fm/cleanup-pageflag

Conversation

@Laaaaksh

Copy link
Copy Markdown
Owner

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:

  1. Screenshot thumbnail crop (§3 of the audit) — the pin-list thumbnail used object-fit: cover in a fixed 160×100px box against full-page html2canvas captures. 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 to object-fit: contain and wrapped the thumbnail in a click-through link to the full screenshot, in both the dashboard's pin list and the public review page.
  2. Dead issue deep-link (§4) — issues filed via the GitHub/Linear integrations link back to /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's DASHBOARD_ORIGIN defaulting to the Vite dev port (:5173) instead of docker-compose.yml's own :4000 fallback — corrected the default and documented DASHBOARD_ORIGIN as a third "day one" env var in the README.
  3. Dashboard route test — added a test covering the deep link (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).
  4. README/SECURITY.md wording — softened the GHCR image and "latest release" language, since no tag has been cut yet (see below).

Checked, not changed:

  • CI branch mismatch — the standing brief for this cleanup pass assumes CI triggers on a branch that isn't the repo's default. That's not the case here: ci.yml already triggers on main, and main is genuinely this repo's default branch. Nothing to fix.
  • Initial tagged release — left undone. This GitHub account's Actions runs are currently failing account-wide with a billing/spending-limit error (confirmed on the existing push-to-main CI run and every dependabot PR's CI run — each fails in ~3s with "recent account payments have failed or your spending limit needs to be increased"), unrelated to this repo's workflow config. Pushing a v1.0.0 tag right now would trigger release.yml and hit the same wall without producing a working image, so I left it for whoever can clear the billing block — documented in AGENTS.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

  • Fresh 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 -d from a freshly generated .env (via cp .env.example .env per the README) — confirmed DASHBOARD_ORIGIN now resolves to :4000 inside the container.
  • Reproduced the full flow in a real headless-Chrome browser session: signed up cold, created a project, embedded the widget on a genuinely separate-origin throwaway page with a tall (1200×2029px) layout mirroring a normal marketing page, dropped a pin with a real html2canvas capture (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/:id resolves to that pin instead of redirecting home. Same click-through screenshot fix verified on the public /review/:token page.

Test plan

  • npm run build / npm run lint / prettier --check clean
  • npm test — 47/47 passing across all three workspaces
  • Fresh docker compose build --no-cache + up succeeds
  • Manual browser walkthrough: signup → project → widget embed → pin → dashboard thumbnail (now shows real content) → deep link (now resolves) → public review link (same fix applied)

🤖 Generated with Claude Code

https://claude.ai/code/session_01TAaR4rVcXzNPKYVm213pye

…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
@Laaaaksh
Laaaaksh merged commit 544f76b into main Aug 29, 2026
0 of 2 checks 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