Skip to content

refactor(homepage): simplify clipboard and gallery interactions [Codex] - #1362

Open
jderochervlk wants to merge 6 commits into
perf/homepage-font-loadingfrom
refactor/homepage-interactions
Open

jderochervlk wants to merge 6 commits into
perf/homepage-font-loadingfrom
refactor/homepage-interactions

Conversation

@jderochervlk

@jderochervlk jderochervlk commented Sep 19, 2026

Copy link
Copy Markdown
Collaborator

Context

The homepage's copy controls create and remove DOM nodes from an effect, and its gallery carries an unused automatic timer mode plus a JavaScript transition dependency. This fourth layer of stack #1359 follows #1360 and contributes to #1354.

Changes

  • extract the install instructions and copy button into focused ReScript modules
  • use the native Clipboard API through a typed result boundary, with declarative pending, success, and failure states exposed through independent live status regions
  • reset copy feedback using a callback-ref timer with cleanup, removing the effect and temporary textarea/selection manipulation
  • remove the unused gallery timer mode and Headless UI transition; retain the fade in CSS with reduced-motion support
  • use keyboard-accessible gallery buttons with selected state and reset removed selections across empty, shortened, and restored image lists
  • cover clipboard permission denial/recovery, repeated copying, keyboard selection, and feedback behavior; preserve existing responsive screenshot baselines and remove their obsolete fixed animation wait

Measured Impact

Compared with the font-loading layer using the same production build settings:

Metric Before After
Initial JavaScript, raw bytes 1,422,735 1,408,132
Initial JavaScript, gzip bytes 279,574 273,627
Initial CSS, raw bytes 82,065 82,094
Initial CSS, gzip bytes 14,806 14,906
Prerendered body elements 410 409

The native gallery fade and accessible copy feedback add 100 compressed CSS bytes while removing 5,947 compressed JavaScript bytes overall. Initial asset request counts and media counts are unchanged. Both homepage interaction effects are removed.

@jderochervlk
jderochervlk added this pull request to stack #1359 September 19, 2026 16:23
@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Sep 19, 2026

Copy link
Copy Markdown

Deploying with  Cloudflare Workers  Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status Name Latest Commit Preview URL Updated (UTC)
✅ Deployment successful!
View logs
guide b64eccc Commit Preview URL

Branch Preview URL
Sep 20 2026, 02:45 PM

@jderochervlk jderochervlk changed the title refactor(homepage): simplify clipboard and gallery interactions refactor(homepage): simplify clipboard and gallery interactions [Codex] Sep 19, 2026
@github-actions

github-actions Bot commented Sep 19, 2026

Copy link
Copy Markdown
Contributor

Lighthouse baseline

Compared with target branch perf/homepage-font-loading at commit a068819. Scores are the median of 3 runs against the deployed Cloudflare preview.

Category Target Current Change
Performance 79 79 0
Accessibility 74 74 0
Best practices 100 100 0
SEO 50 50 0

Download the full Lighthouse reports and baseline

Commit d02ecbb · Cloudflare preview

@jderochervlk
jderochervlk marked this pull request as ready for review September 19, 2026 16:34
@chatgpt-codex-connector

chatgpt-codex-connector Bot commented Sep 19, 2026

Copy link
Copy Markdown

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review Status Commit Review trigger
📝 Code Review Completed 2026-09-20T14:48:12.210210Z b64eccc New commits
ℹ️ 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" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

@jderochervlk
jderochervlk marked this pull request as draft September 19, 2026 16:35

@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: 58a23c2941

ℹ️ 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 apps/docs/app/routes/LandingPageCopyButton.res Outdated
Comment thread apps/docs/scripts/homepage-performance-budget.json Outdated
Comment thread apps/docs/src/components/ImageGallery.res
@jderochervlk
jderochervlk force-pushed the refactor/homepage-interactions branch from 58a23c2 to 1acc537 Compare September 19, 2026 16:48
jderochervlk added a commit that referenced this pull request Sep 19, 2026
Persist the first-photo fallback when the selected index disappears, so shrinking or emptying the list cannot revive stale selection on regrowth. Cover both transitions without introducing an effect.

Addresses PR #1362 review comment 4053846691.
jderochervlk added a commit that referenced this pull request Sep 19, 2026
Keep persistent live regions beside the copy controls, independent of their disabled state. Reuse the existing positioned copy box and keep noninteractive feedback click-through so clipboard failure can be retried without adding DOM wrappers.

Extend the real-browser clipboard flow to require sibling status regions and exposed failure and disabled-success feedback. Addresses PR #1362 review comment 4053846682.
@jderochervlk
jderochervlk marked this pull request as ready for review September 19, 2026 17:18
@jderochervlk
jderochervlk force-pushed the refactor/homepage-interactions branch from 0c3cab1 to f9d92c6 Compare September 19, 2026 21:52
@jderochervlk
jderochervlk force-pushed the refactor/homepage-interactions branch from f9d92c6 to 7d54dfb Compare September 19, 2026 22:52
@jderochervlk

Copy link
Copy Markdown
Collaborator Author

@codex

@chatgpt-codex-connector

Copy link
Copy Markdown

Codex Review: Didn't find any major issues. Another round soon, please!

Reviewed commit: 92ff56aedd

ℹ️ 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 apps/docs/e2e/homepage/homepage-interactions.cy.js Outdated
Comment thread apps/docs/src/components/LandingPageCopyButton.res
Extract install controls, use the typed Clipboard API with declarative status, and remove clipboard and gallery effects. Replace gallery transitions with native reduced-motion-aware CSS and keyboard-accessible controls.

Cover retries, feedback reset, pending writes, gallery bounds, real clipboard permission recovery, and keyboard selection. Keep existing visual baselines and record measured bundle and DOM changes.
Persist the first-photo fallback when the selected index disappears, so shrinking or emptying the list cannot revive stale selection on regrowth. Cover both transitions without introducing an effect.

Addresses PR #1362 review comment 4053846691.
Keep persistent live regions beside the copy controls, independent of their disabled state. Reuse the existing positioned copy box and keep noninteractive feedback click-through so clipboard failure can be retried without adding DOM wrappers.

Extend the real-browser clipboard flow to require sibling status regions and exposed failure and disabled-success feedback. Addresses PR #1362 review comment 4053846682.
Exercise native keyboard gallery selection, clipboard rejection and recovery, and repeated copying of both install commands. Addresses PR #1355 comment 4054821928.
Replace the handwritten homepage interaction spec with a typed ReScript source and add the minimal Cypress bindings it requires.
Keep app/routes limited to React Router route modules for the homepage interaction files introduced in this layer.
@github-actions

Copy link
Copy Markdown
Contributor

Docs preview

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