feat(article): quote image generator with mobile bottom bar and license gate#5968
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Let readers select text in an article and generate a shareable quote
image (download as JPG / Web Share). Extends the existing
TextSelectionPopover with a second button next to "quote to comment".
- New component: src/components/QuoteImageDialog (Card / Content / presets / gql)
- 6 neutral color presets + 3 sizes (1:1, 4:5, 9:16) with platform hints
- auto font-scaling + 80-char cap so long selections never overflow
- QR code (qrcode) links back to the article; rendered via html-to-image
- 七日書 (WritingChallenge) articles automatically swap the Matters
wordmark for the seven-day-book logo (silent detection via campaigns)
- TextSelectionPopover: add icon-only "金句圖" button, thread article in
- ArticleDetail/Content + gql: pass article + spread QuoteImageArticle fragment
- analytics: register quote_image_* click events
- deps: html-to-image, qrcode (+ @types/qrcode)
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- TextSelectionPopover: new variant='bottomBar' for mobile — fixed bottom action bar (Quote / Quote card) so it never fights with the iOS/Android native selection menu; selection detected via debounced selectionchange - mount bottomBar on ArticleDetail/Content under Media lessThan md (previously the feature was desktop-only) - license gate: hide quote-card button when article license is ARR (all rights reserved) unless the viewer is the author; CC licenses pass (card already quotes faithfully with author + link attribution) - add license to QuoteImageArticle fragment Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…Discussion - route.ts: widen CommentArgs.type union and ToPathArgs.commentDetail with campaignDiscussion / campaign, and handle it in toPath, matching the generated CommentType enum (backend added campaignDiscussion) - sync package-lock.json with html-to-image / qrcode / @types/qrcode deps introduced by this branch - QuoteImageDialog: fix formatjs enforce-id hashes, stylelint property ordering / modern color notation, and use the wired closeDialog prop - TextSelectionPopover: refresh formatjs enforce-id hashes - regenerate extracted lang/*.json messages Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The popover was gated on contentContainer.current in render; assigning a ref does not trigger a re-render, so it only appeared after an unrelated re-render (e.g. scroll). Gate on a mounted flag set in an effect instead. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
mashbean
force-pushed
the
feat/quote-image-generator
branch
from
933b02f to
dd8b60e
Compare
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
2 participants
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.
Upstream CI mirror of #5965（原 PR 來自 fork yingshinlee，fork 觸發的 CI 拿不到 secrets、build required check 不會跑）。
此 PR 從 thematters/matters-web 內部分支開啟，讓 CI 能在帶 secrets 的 context 跑、codegen 抓 server.matters.icu 的新 schema（campaign discussion / quote wall 後端已於今日部署上 staging）。
內容與 #5965 相同。Co-Authored-By: Claude Fable 5