feat(share): capture a surface as a shareable image - #6609
Closed
tomeredlich wants to merge 1 commit into
Closed
Conversation
Puts the snapshot capture path on main so the surfaces that want a snapshot can add one without carrying the machinery themselves. captureShareImage rasterizes a DOM node through snapdom at a fixed 1200x630 and brands it. SnapshotButton is the control on top: it plays the shutter, captures, and writes the PNG to the clipboard with the link beside it as text, so a rich composer takes the image and a plain one takes the link. A browser that refuses the clipboard write gets the download instead, and a failed capture reports rather than throws. Nothing renders SnapshotButton yet. The surfaces that will are drawn in Features / Snapshot / Surfaces in Storybook. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
Author
|
Folded into #6610, which now carries the capture path and the hot-take placements together against |
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.
Puts the snapshot capture path on
main, so the surfaces that want a snapshot can add one without each carrying the machinery. Standalone — no dependency on #6556.What lands
captureShareImage.ts— rasterizes a DOM node through@zumer/snapdomat a fixed 1200×630 and brands it. Takes an element or a ref.copyShareImage.ts— writes the PNG to the clipboard with the link beside it astext/plain, so a rich composer takes the image and a plain one takes the link. The blob is handed toClipboardItemas a promise rather than awaited first, because Safari only honours a clipboard write inside the task that handled the gesture.downloadShareImage.ts— the fallback when the clipboard refuses.shutterSound.ts+shutter.mp3— one sharedAudioelement; a rejected autoplay never fails the capture.SnapshotButton.tsx— the control on top of all of it, with the shutter-sweep animation andSnapshotIcon.What is deliberately not here
The snapshot cards (
SnapshotFrame,PollSnapshotCard,HighlightTextSnapshotCard,snapshotGradient,snapshotText) stay on #6556. They describe what a particular surface captures; this PR is only the path that captures it. Same for the unrelatedutilities.cssanimations on that branch — only the shutter sweep came across.Nothing renders it yet
SnapshotButtonhas no caller onmainafter this merges. That is the point of porting the infra first: the placements that will use it are drawn inFeatures / Snapshot / Surfacesin Storybook (#6569), and land as follow-ups.SnapshotIconalso appears on #6569. Whichever merges first, the other drops it in a rebase — it is 4 small files.Testing
SnapshotButton.spec.tsx: copies and reports it, falls back to download when the clipboard refuses, reports a failed capture rather than throwing, and names both halves when a link is passed.copyShareImage.spec.tscame across with the code.typecheck-strict-changedclean, shared lint clean.@zumer/snapdomonly — verified--frozen-lockfileaccepts it unchanged.Preview domain
https://claude-snapshot-capture-infra.preview.app.daily.dev