Repository navigation
site: add a shareable supporter card behind a flag - #468
Merged
Merged
Conversation
After a confirmed signature, /principles can show a share panel with a
1080x1350 feed card and a 1080x1920 Stories card. Both are the same image
for every supporter and carry no personal data. They are built at build
time with next/og from fonts kept in the repo and the brand mark file.
NEXT_PUBLIC_PDPP_SHARE_CARD=1 turns on the panel and the
/principles/card/{feed,story} routes. With any other value the panel is
not rendered and the routes return 404. Production stays off until the
mark use is cleared with LF Decentralized Trust.
Assisted-by: AI
Signed-off-by: Tim Nunamaker <tnunamak@gmail.com>
Replace the vendored font files with unmodified copies from the Inter 4.1 and Source Serif 4.005 releases, add both upstream licence files, and annotate them as OFL-1.1 in REUSE.toml. Assisted-by: AI Signed-off-by: Tim Nunamaker <tnunamak@gmail.com>
The flag is on only for "true", matching siteFlags. Assisted-by: AI Signed-off-by: Tim Nunamaker <tnunamak@gmail.com>
The card now uses the concept surface: the header wordmark path in the primary colour, flat paper background, ink and ink-soft text, square corners and 1px border-colour rules, Source Serif 4 and Inter. The old copper and blue mark, cream gradients and oklch rewriting are gone. Assisted-by: AI Signed-off-by: Tim Nunamaker <tnunamak@gmail.com>
The card image links nowhere, so a post made from it carried no link, and on desktop Share only copied the page link. The panel now shows the caption with a Copy caption button, and offers Download image, Download for Stories, Copy image, Post on X, Post on LinkedIn and, only where the browser can share files, Share. Post on X opens a prefilled post and downloads the card to attach. LinkedIn takes no text, so its button downloads the card and copies the caption. The old link-only fallback is gone. Assisted-by: AI Signed-off-by: Tim Nunamaker <tnunamak@gmail.com>
…oo:' Assisted-by: AI Signed-off-by: Tim Nunamaker <tnunamak@gmail.com>
The panel no longer draws its own box, the card has no divider rules, and the call to action is plain text: a picture cannot be tapped, so it should not look like a button. The caption carries the real link. Assisted-by: AI Signed-off-by: Tim Nunamaker <tnunamak@gmail.com>
Assisted-by: AI Signed-off-by: Tim Nunamaker <tnunamak@gmail.com>
Assisted-by: AI Signed-off-by: Tim Nunamaker <tnunamak@gmail.com>
Assisted-by: AI Signed-off-by: Tim Nunamaker <tnunamak@gmail.com>
Assisted-by: AI Signed-off-by: Tim Nunamaker <tnunamak@gmail.com>
The flag accepts only "true" since it was aligned with the other site flags; three test names still said 1. Assisted-by: AI Signed-off-by: Tim Nunamaker <tnunamak@gmail.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This was referenced Nov 6, 2026
This branch was successfully deployed
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
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.
After signing the Principles, a supporter has no ready-made image or caption to share, so telling others means making their own.
This PR adds a share card: one image, the same for every supporter, with the copy the brand owner supplied ("My data, my rules.", a line about the pledge, "Sign the pledge → pdpp.dev" and #PDPP) and the PDPP wordmark. It comes in two sizes, 1080x1350 for a feed post and 1080x1920 for Stories. The words and sizes are declared once in
apps/site/src/lib/share-card/copy.ts. The card contains nothing about the signer, and the panel records nothing about who shares it.The images are drawn at build time by
next/og, which renders JSX to a PNG, and served at/principles/card/feedand/principles/card/story. Any other path under/principles/card/is a 404. The renderer (share-card/render.tsx) uses the header wordmark's own SVG path, now exported unchanged fromicons.tsx, so the mark on the card is the mark on the site. The colours are the hex values of the site's light-scheme tokens, because the renderer cannot parse theoklch()values the stylesheet uses.next/ogneeds font files as bytes, so the PR vendors four TTF files copied unmodified from the upstream Inter 4.1 and Source Serif 4.005 releases. Both are under OFL-1.1: the licence texts sit beside the fonts and inLICENSES/, andREUSE.tomlannotates the files.After a confirmed signature (
/principles?signed=confirmed), the status message is followed by a panel (share-card-panel.tsx) with the card, a caption with a Copy control, "Download image", "Download for Stories", "Copy image", "Post on X", "Post on LinkedIn", and "Share…" where the browser can share files. The X post text leads with the hashtag because X appends the link after the text.The card and its routes sit behind
NEXT_PUBLIC_PDPP_SHARE_CARD, off unless set totruelike the other site flags. With the flag off, the panel does not render and both routes return 404. Keep the flag off in production until LF Decentralized Trust clears the use of the PDPP mark on a shareable image.One change is not behind the flag. Once a signature is pending or confirmed,
/principlesno longer shows the empty signing form under the status message, because a fresh form there reads as an invitation to sign again. Error states still show the form so the person can retry. This takes effect when the site deploys, whatever the flag.This PR and #469 each add a flag function to the end of
apps/site/src/lib/site-config.ts, so whichever merges second will need that conflict resolved, keeping both functions.Verified: the site's
verifyscript (types, tests, lint, production build) passes on this branch alone and merged with #467 and #469. Tests render both PNG sizes and check their dimensions, check the routes return 404 with the flag off, and check the panel's copy and links.reuse lintpasses with the vendored fonts.Not verified:
Assisted-by: AI