Fix homepage P1 findings from #898: CTA hierarchy, star-repo copy, guide-path order/numbering - #899
Merged
Merged
Conversation
…ide-path order/numbering Implements the 7 P1 findings from issue #898's homepage audit: - Hero CTA hierarchy (finding 1): promote "Start a new project" (primary) to first position with a single "Read quick start" secondary; demote "Star on GitHub"/"Join Slack" into the existing trust-links row as text links. Simplifies the hero/final-CTA button grid from a 3-column off-center layout to a balanced 2-column grid. - Final CTA duplication (finding 2): reduce from 4 buttons to 2 (install + Slack), dropping the quick-start/star duplicates of the hero CTAs. - Final CTA heading (finding 3): "Star SHAFT on GitHub." -> "Generate your first SHAFT project.", matching its own primary button instead of contradicting it. - Star-repo copy consistency (finding 4): three places disagreed about whether starring is gated on a successful run. Removed the internal CTA-policy bullet from the leader audience lane (replaced with an actual leader-facing evidence-trail point), retitled guide path #5 from "Inspect Allure and star SHAFT" / "Star after success" to "Inspect the Allure report" / "Open reporting" pointing at /docs/features/reporting, and dropped the "after the sample test produces evidence" conditional from the final CTA body. - Guide-paths order (finding 5): moved GuidePathSection immediately after AudienceSection instead of 6th of 7 sections. - Guide-paths numbering (finding 6): removed the 01-05 prefix and chevron from path cards, which are mutually-exclusive alternatives, not a sequence. evidenceLoop's numbering/chevrons are untouched since that group genuinely is sequential. - Dropped ARIA names on generic containers (finding 9): added role="group" to the 7 div/p elements carrying aria-label/ aria-labelledby that assistive tech was silently discarding. Also recaptures test-screenshots/01-homepage-before-chat.png, which predated the current index.tsx entirely (issue #898 pre-flight item). Updated tests/homepage-performance.test.js and tests/e2e/homepage.spec.js assertions that pinned the removed/changed CSS and CTA hooks, per the issue's documented test impact for each finding. Ref #898 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01JcDusFExgWXGEySD34aRXT
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
shaft-engine | 5328764 | Commit Preview URL Branch Preview URL |
Jul 27 2026, 10:55 AM |
MohabMohie
enabled auto-merge (squash)
July 27, 2026 11:10
7 tasks
MohabMohie
added a commit
that referenced
this pull request
Jul 27, 2026
…tion gaps, reveal stagger, ParticleBackground drift/dead code (#900) Fast-follow to #899, covering the P2 subset from #898's audit: - Hero outside <main> (finding 10): moved <Hero /> to be the first child of <main> instead of a sibling before it. The page's only <h1> and all hero CTAs were previously unreachable via Docusaurus's "Skip to main content" link (main:first-of-type). - .loopStep hover-lift not neutralized under prefers-reduced-motion (finding 12): added .loopStep/.loopStep:hover to the existing reduced-motion reset alongside .pathCard/.proofCard. - useHoverGlow ignores prefers-reduced-motion entirely (finding 13): added an early-return guard mirroring useScrollReveal's existing check, plus a `[data-hover-glow]::before { transition: none; transform: none; }` reduced-motion override so the 260ms scaling radial-gradient hover effect stops for users who asked for less motion (ParticleBackground already handled this correctly; this was the one motion system on the page that didn't). - Reveal stagger computed from global document order (finding 15): useScrollReveal capped delay at Math.min(globalIndex * 34, 240) -- dead for every card group past the first (~20 [data-reveal] elements site-wide, cap bites at index 8). Now computed per element's position within its own parent, so every group (surface/proof/path cards) gets its own 0-136ms cascade instead of popping in at an identical capped delay. - ParticleBackground design-language drift (finding 22): the heroMode===false branch hardcoded '37, 194, 160' (#25c2a0), the stock Docusaurus green -- not in DESIGN_LANGUAGE.md's palette at all. Replaced with '76, 194, 255' (--site-color-primary-rgb, dark theme), matching the same token already used correctly in the heroMode branch. - ~300 lines of dead particle-worker code (finding 24): deleted the ENABLE_PARTICLE_WORKERS=false-gated worker path (unreachable -- both call sites always pass heroMode, and workers were never wired to depend on it either), its two message-type interfaces, four refs, and src/components/ParticleBackground/particleWorker.ts (216 lines) entirely. Behavior is unchanged: supportsWorker was always false. Test evidence (TDD -- new/changed assertions written and watched RED against the pre-fix source first, then GREEN after implementing): - tests/homepage-performance.test.js: static assertions for all 5 findings (hero/<main> ordering, reduced-motion CSS text, reveal stagger source shape, ParticleBackground palette + dead-code removal). - tests/e2e/homepage.spec.js: hero-h1-inside-<main> assertion added to the existing onboarding-links test; two new behavioral tests -- reduced-motion neutralizes .loopStep hover transform and the hover-glow pseudo-element transition, and reveal-delay is computed per group (68ms/136ms) rather than a shared global-index cap (240ms) for two groups that would have collided under the old code. Ref #898 Claude-Session: https://claude.ai/code/session_01JcDusFExgWXGEySD34aRXT Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
7 tasks
MohabMohie
added a commit
that referenced
this pull request
Jul 27, 2026
…p close, grid breakpoints/subgrid, contrast/motion/perf cleanup (#901) Second P2 fast-follow to #899/#900. Covers the 9 P2 findings from #898's homepage audit those PRs explicitly deferred (7, 8, 11, 14, 16, 17, 19, 20, 21). Branched fresh from origin/master (post-#900) in an isolated worktree. Findings addressed: - 7: evidence loop read as a straight line, not a loop -- added a closing "Improve loops back to Execute" affordance with a rotate-left icon under the grid instead of silently terminating at the 5th card. - 8: no copyable dependency coordinate anywhere on the page -- added a <dependency> XML snippet (Docusaurus CodeBlock, built-in copy button) in the guide-paths intro, sourcing the version from the existing releases.json single source of truth (not hardcoded). - 11: .loopStep::after ('>') and .handledPanel li::before ('+') used bare CSS content strings, announced by screen readers -- switched both to the alt-text form (content: '>' / ''). - 14: composited-contrast coverage stopped short of the hero/final secondary buttons and .heroTrustLinks. Added a border-contrast measurement (WCAG 1.4.11, composites the border's own rgba over the sampled backdrop rather than sub-pixel-sampling the 1px stroke) plus a text-contrast case for the trust links. The border case caught a real borderline failure -- 0.42 alpha measured 2.94:1; raised to 0.48 (~3.4:1) per the issue's own guidance to adjust alpha, not text color. - 16: will-change: opacity, transform sat permanently on ~20 reveal elements for the page's whole lifetime -- removed; transitions still promote their own layer for the transition's duration. - 17: useHoverGlow forced a synchronous layout read on every pointermove across 28 elements -- now caches the rect once on pointerenter and reuses it in the pointermove handler. - 19: the 5-column path/loop/badge grids collapsed straight from 5 to 1 column at 980px, leaving ~150px-wide cards in the 981-1180px band -- added an intermediate 2-column step at 1180px. - 20: .audienceLane/.loopStep pinned content rows to fixed heights (2.1rem/4.4rem and 1.8rem/3rem), which a 3rd description line or a multi-word loop title would overflow -- replaced with CSS subgrid so cross-card row alignment now follows content instead of a guessed cap. - 21: height: 3.45rem on CTA buttons whose labels are explicitly allowed to wrap (white-space: normal) -- changed to min-height. Not in scope for this PR (per dispatch): P3 findings 23, 25-29, and finding 18 (scroll-reveal roll-back), which the issue itself frames as an owner decision, not a bug -- left untouched. Test impact / evidence (TDD): every new/changed assertion was written and watched RED against the pre-fix source first. - tests/homepage-performance.test.js: static assertions for all 9 findings (will-change absence, alt-text content strings, min-height, pointerenter caching, the 1180px breakpoint's presence, subgrid rows, the loop-return copy/testid, the dependency-snippet import/testid, and the still-single "Maven Central" occurrence). - tests/e2e/composited-contrast.spec.js: new border-contrast helper (compositeOver + measureBorderContrast) and two new tests (secondary CTA border, hero trust links text). - tests/e2e/homepage.spec.js: extended the existing mobile CTA-overflow check to also catch vertical overflow, added a dedicated 800px test for the previously-unguarded 761-900px wrap band, and a parametrized test at 1000/1100/1180px confirming the path/loop grids sit at 2-4 columns with no horizontal page overflow. - Recaptured test-screenshots/01-homepage-before-chat.png against the live built site (reduced-motion emulated so below-the-fold sections aren't mid-reveal) to keep it current. Test plan: - [x] node tests/homepage-performance.test.js -- watched RED per finding, then GREEN - [x] npx tsc --noEmit -p tsconfig.json -- clean - [x] npm run build -- clean production build - [x] npx playwright test tests/e2e/homepage.spec.js tests/e2e/composited-contrast.spec.js tests/e2e/hash-scroll-sync.spec.js -- 20/20 pass, headless, against docusaurus serve on the fresh build (includes the border-contrast test that caught the real 2.94:1 failure before the alpha fix) - [x] npm run test:docs (docs-loader, docs-quality, design-contrast 9/9 WCAG pairs, duplicate-check) -- pass, no regressions - [x] npm run test:release-template, npm run test:history -- pass - [x] Full-page + close-up screenshots captured against the live built site to visually confirm the dependency snippet, evidence-loop return note, 2-column grid at 1100px, and the more visible secondary-button border Ref #898 🤖 Generated with [Claude Code](https://claude.com/claude-code) Claude-Session: https://claude.ai/code/session_019wEoJduy4Q4jfHWejcizCe Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
MohabMohie
added a commit
that referenced
this pull request
Jul 27, 2026
… dead centring CSS, hover-glow selector leak, code-sample colors, small consistency items Picks up the remaining P3 items after #899/#900/#901: findings 23, 25, 26, 27, 28, 29. - Finding 23: AudienceSection had no section-level heading at all (the real outlier among four alignment treatments). Gave it an eyebrow + <h2> + id matching its sibling sections, demoted lane titles from <h2> to <h3> so the heading outline is no longer promoted to section level. Kept the existing centered/left-aligned split for the other sections as-is to keep the diff reviewable, matching PR #901's own precedent. - Finding 25: merged 6 selectors (.pathCard small, .loopStep small, .footerBadges strong, .finalKicker, .proofGrid, .proofCard) that were each split across two distant blocks of the same file, preserving declaration order so no computed style changes. - Finding 26: removed the dead ::after optical-centring spacer and the inert text-align: center on hero/final CTA buttons (they render left-aligned icon+label; neither declaration did anything). - Finding 27: scoped every `[data-hover-glow]` CSS selector under a `.hoverGlow` module class so the styling cannot leak globally out of this page's CSS module onto any future `data-hover-glow` element elsewhere on the site. - Finding 28: gave `.codeAnnotation`/`.codeKeyword` their own color-mix values (65%/50% primary-into-on-dark, same technique as the existing `.codeString`) instead of sharing muted with `.codeCall`, so the Java sample's 5 token classes render 5 distinct colors instead of 3. Both percentages hand-verified against the WCAG relative-luminance formula (>=4.5:1 in both themes) before use. - Finding 29 (six small items): external links now consistently open in a new tab with a visible arrow-icon affordance; the self-referential "SHAFT" wordmark link (/ to /) is now a non-interactive span; heroMeta no longer restates Java 25/MIT/Allure native already in footerBadges; .allureGrid .sectionHeading no longer sits above vertical center; .heroGrid (display: block) renamed to .heroLayout; the dense 32-word hero sub-copy sentence naming four products is tightened. TDD: added ~25 new assertions to tests/homepage-performance.test.js, each watched RED against the pre-fix source, then GREEN after the corresponding fix. Updated composited-contrast.spec.js where my changes directly affect existing assertions (.audienceLane h2->h3, heroBrand no longer an <a>, comment accuracy). Test plan: - node tests/homepage-performance.test.js -- pass - npx tsc --noEmit -p tsconfig.json -- clean - npm run build -- clean production build - npx playwright test tests/e2e/homepage.spec.js tests/e2e/composited-contrast.spec.js tests/e2e/hash-scroll-sync.spec.js -- 20/20 pass - npm run test:docs (docs-loader, docs-quality, design-contrast 9/9 WCAG pairs, duplicate-check) -- pass - npm run test:release-template, npm run test:history -- pass - Recaptured test-screenshots/01-homepage-before-chat.png against the live built site, per this repo's convention - Full-page and close-up screenshots (audience section, hero trust links, code proof, footer, allure grid) visually confirmed Ref #898 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_019wEoJduy4Q4jfHWejcizCe
8 tasks
MohabMohie
added a commit
that referenced
this pull request
Jul 27, 2026
* Fix homepage P3 findings from #898: heading alignment, duplicate CSS, dead centring CSS, hover-glow selector leak, code-sample colors, small consistency items Picks up the remaining P3 items after #899/#900/#901: findings 23, 25, 26, 27, 28, 29. - Finding 23: AudienceSection had no section-level heading at all (the real outlier among four alignment treatments). Gave it an eyebrow + <h2> + id matching its sibling sections, demoted lane titles from <h2> to <h3> so the heading outline is no longer promoted to section level. Kept the existing centered/left-aligned split for the other sections as-is to keep the diff reviewable, matching PR #901's own precedent. - Finding 25: merged 6 selectors (.pathCard small, .loopStep small, .footerBadges strong, .finalKicker, .proofGrid, .proofCard) that were each split across two distant blocks of the same file, preserving declaration order so no computed style changes. - Finding 26: removed the dead ::after optical-centring spacer and the inert text-align: center on hero/final CTA buttons (they render left-aligned icon+label; neither declaration did anything). - Finding 27: scoped every `[data-hover-glow]` CSS selector under a `.hoverGlow` module class so the styling cannot leak globally out of this page's CSS module onto any future `data-hover-glow` element elsewhere on the site. - Finding 28: gave `.codeAnnotation`/`.codeKeyword` their own color-mix values (65%/50% primary-into-on-dark, same technique as the existing `.codeString`) instead of sharing muted with `.codeCall`, so the Java sample's 5 token classes render 5 distinct colors instead of 3. Both percentages hand-verified against the WCAG relative-luminance formula (>=4.5:1 in both themes) before use. - Finding 29 (six small items): external links now consistently open in a new tab with a visible arrow-icon affordance; the self-referential "SHAFT" wordmark link (/ to /) is now a non-interactive span; heroMeta no longer restates Java 25/MIT/Allure native already in footerBadges; .allureGrid .sectionHeading no longer sits above vertical center; .heroGrid (display: block) renamed to .heroLayout; the dense 32-word hero sub-copy sentence naming four products is tightened. TDD: added ~25 new assertions to tests/homepage-performance.test.js, each watched RED against the pre-fix source, then GREEN after the corresponding fix. Updated composited-contrast.spec.js where my changes directly affect existing assertions (.audienceLane h2->h3, heroBrand no longer an <a>, comment accuracy). Test plan: - node tests/homepage-performance.test.js -- pass - npx tsc --noEmit -p tsconfig.json -- clean - npm run build -- clean production build - npx playwright test tests/e2e/homepage.spec.js tests/e2e/composited-contrast.spec.js tests/e2e/hash-scroll-sync.spec.js -- 20/20 pass - npm run test:docs (docs-loader, docs-quality, design-contrast 9/9 WCAG pairs, duplicate-check) -- pass - npm run test:release-template, npm run test:history -- pass - Recaptured test-screenshots/01-homepage-before-chat.png against the live built site, per this repo's convention - Full-page and close-up screenshots (audience section, hero trust links, code proof, footer, allure grid) visually confirmed Ref #898 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_019wEoJduy4Q4jfHWejcizCe * fix(tests): avoid constructing RegExp from href literals in external-link check CodeQL flagged two href string literals (central.sonatype.com, opensource.googleblog.com) as "Incomplete regular expression for hostnames" because they get interpolated into new RegExp() -- even though the existing .replace() escape already neutralizes all regex metachars. Rather than fight CodeQL's sanitizer recognition, drop the regex construction entirely: locate the anchor tag via plain indexOf/lastIndexOf substring search and check target/rel on the extracted tag slice. Verified equivalent pass/fail behavior on the positive case, missing-target/rel case, and missing-href case. --------- Co-authored-by: Claude Sonnet 5 <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
Implements the 7 P1 findings from #898's static audit of the marketing homepage (
src/pages/index.tsx+index.module.css). P2/P3 findings are intentionally left for a fast-follow PR to keep this diff reviewable — see below for what's deferred and why.Findings addressed
Start a new project(primary) promoted to first position with oneRead quick startsecondary;Star on GitHub/Join Slackdemoted into the.heroTrustLinksrow as text links (icons kept). Hero/final-CTA action grid simplified from an off-center 3-column layout (max-width: 780px+grid-column: 2hack) to a balanced 2-column grid (max-width: 560px).Start a new project(primary) +Join Slack(secondary). Dropped the duplicateRead quick start/Star on GitHub.Star SHAFT on GitHub.→Generate your first SHAFT project., matching the primary action beneath it.index.tsx:62) and replaced it with an actual leader-facing point about the Allure evidence trail; retitled guide path #5 fromInspect Allure and star SHAFT/Star after successtoInspect the Allure report/Open reporting, repointed to/docs/features/reporting; dropped the "after the sample test produces evidence" conditional from the final CTA body.<GuidePathSection />moved to immediately after<AudienceSection />..pathCard::afterchevron (mutually-exclusive alternatives, not a sequence).evidenceLoop's numbering/chevrons are untouched — that group genuinely is sequential.aria-label/aria-labelledbyon genericdiv/pelements, silently dropped by ATrole="group"to each of the 7 locations named in the issue (codeCompare,heroMeta,heroTrustLinks,pathGrid,proofGrid,evidenceLoop,footerBadges).Also recaptured
test-screenshots/01-homepage-before-chat.png(the pre-flight item in #898 — it predated the currentindex.tsxrewrite entirely).Test impact (per the issue's own notes)
tests/homepage-performance.test.js: updated themax-width: 780px/grid-column: 2CSS-string assertions to the newmax-width: 560pxtwo-column layout; removed the now-nonexistentlanding-cta-quickstart/landing-cta-starhook assertions; added assertions locking in the new copy (final-CTA heading, dropped star-gating language, retitled guide path update java version #5, path-card numbering removed while evidence-loop numbering is preserved).tests/e2e/homepage.spec.js: removed thelanding-cta-quickstarthref assertion for the now-removed final-CTA button.tests/e2e/composited-contrast.spec.jsortests/homepage-performance.test.js'sMaven Central/token-color/reduced-motion/overflow-xguards — none of this diff touches those surfaces.Deliberately skipped (not in this PR)
<main>, decorative CSS content strings, reduced-motion gaps, contrast test coverage gaps, reveal-stagger/will-change/pointer-thrash perf items,DESIGN_LANGUAGE.mddrift inParticleBackground, dead worker code, etc.) — planned as a fast-follow PR referencing Landing page (src/pages/index.tsx) enhancement & polish audit #898, to keep this diff reviewable per the issue author's own preference.height→min-height) — the issue itself flags these as needing live-viewport confirmation, not just source reading.homepage.spec.js:197-203,homepage-performance.test.js:75) is unmodified.Read quick startan in-page anchor to#guide-paths" idea mentioned under finding 5 was not taken — it isn't required by the core finding (just the section reorder), and doing so would changehomepage.spec.js:74-78's asserted navigation target for no stated benefit.Test plan
node tests/homepage-performance.test.js— pass (watched RED against the pre-change source first, then GREEN after implementing)npx playwright test tests/e2e/homepage.spec.js tests/e2e/composited-contrast.spec.js tests/e2e/hash-scroll-sync.spec.js— 12/12 pass, headless, against a freshnpm run build+docusaurus servenpm run test:docs(docs-loader, docs-quality, design-contrast, duplicate-check, etc.) — pass, no regressionsnpm run test:release-template,npm run test:history— passnpx tsc --noEmit— cleantest-screenshots/01-homepage-before-chat.pngin this diff)🤖 Generated with Claude Code
https://claude.ai/code/session_01JcDusFExgWXGEySD34aRXT