feat(quote-wall): post-to-wall + campaign quote wall#5966
Closed
yingshinlee wants to merge 8 commits into
Closed
Conversation
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>
- CampaignDetail/Discussion: compact module (desktop right aside) with input box + latest 3 comments + view-all dialog; mobile renders a one-line chip entry that opens the dialog - reuse CircleComment family: CircleCommentForm/Dialog accept campaignId and type campaignDiscussion; ReplyButton/DropdownActions resolve campaign node - 240-char cap with counter on campaign comments (matches moments) - layout: cover height halved (23.26% -> 12%), side participants avatars trimmed 60 -> 12 to make room for the discussion module Co-Authored-By: Claude Fable 5 <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>
- QuoteImageDialog: 'Post to wall' button (campaign articles only) via putQuote; gentle quota-reached toast on ACTION_LIMIT_EXCEEDED - CampaignDetail/QuoteWall: compact module (desktop right aside) + chip entry (mobile) + full-wall dialog with shuffle (random refetch) - QuoteCard: sticky-note card linking back to the source article; retract action for the poster or the source article's author (soft delete) - museum link (freewriting.matters.town/memo-wall) in EXTERNAL_LINKS - mount quote wall above discussion in the campaign aside / mobile chips Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
|
@yingshinlee is attempting to deploy a commit to the DimensionDev Team on Vercel. A member of the Team first needs to authorize it. |
… frontend
- route.ts: add campaignDiscussion to CommentArgs.type union
- drop broken Extract<…, { __typename }> narrowing in Discussion + QuoteWall
(campaign generates as a single object with optional __typename -> never)
- QuoteWall gql: $first must be the constrained scalar first_Int_min_0_max_50,
not Int -- this validation error had blocked codegen for all quote types
- analytics: register quote_post_to_wall click event
- QuoteImageDialog: remove dead closeDialog prop wiring
- sync package-lock for html-to-image / @types/qrcode
- align formatjs ids, fix stylelint, extract i18n strings
Verified locally on Node 22 against staging schema:
gen:type + tsc + eslint + stylelint all pass with 0 errors.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Contributor
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.
這是什麼
金句牆前端：文章頁金句卡片加「上牆」鈕，活動頁顯示金句牆（桌機右欄／手機入口＋彈窗、洗牌、收回）。階段 3。
此分支疊在前兩個 feature 之上（含金句產生器 #5965 與留言區 #5964 的改動），且依賴後端金句牆 PR（matters-server
feat/quote-wall）。建議的合併順序：留言區後端 → 留言區前端 → 金句產生器 → 金句牆後端 → 金句牆前端。改動
components/GQL/mutations/putQuote.ts（新）PUT_QUOTE/DELETE_QUOTEcomponents/QuoteImageDialog/Content.tsxcomponents/TextSelectionPopover/index.tsxviews/CampaignDetail/QuoteWall/（新）index.tsx（精簡模組＋chip 入口）、Dialog.tsx（整面牆＋洗牌）、QuoteCard.tsx（便利貼卡＋回原文＋收回）、gql.ts、styles.module.cssviews/CampaignDetail/index.tsxcommon/enums/externalLinks.ts行為
需 node ≥ 22 跑 codegen（
PutQuoteMutation、CampaignQuotesQuery、QuoteWallQuoteFragment等型別）＋ formatjs 抽字（新文案）＋ typecheck。Draft。部署與 QA（測試站 https://matters.icu/ 先行）
桌機氣泡／手機底部列上牆、ARR 文章不可上牆（非作者）、超額提示、活動頁牆桌機右欄／手機彈窗、洗牌、回原文、收回（貼者／作者）、空牆隱藏。
🤖 Generated with Claude Code