Public / Developer spec
Share mockup: option B (gift button)
Article with the existing share icons unchanged and a gift-link button ("Share full article") added next to them.
When it shows
- The gift pill shows only when the article is paywalled AND the viewer is a subscriber (assumed: gift links are a subscriber benefit; confirm). The mockup uses data-paywalled and data-subscriber on .cno-share; the real check should be server-side, not a CSS hide
- The share icon / icon row always shows; its link is the public canonical URL
- The Mockup controls panel (bottom right) and its checkboxes are mockup scaffolding only
Copy
- Gift pill label: Share full article (hidden on phones; the icon stays)
- Gift popover: title Gift Articles; text Give free access to this article.
- Share popover (option A): title Share Options; text Share a link that only subscribers can access.
- Rows in both popovers, in order: Copy link, Email, Bluesky, LinkedIn, Reddit. Copy link is new; WhatsApp was removed
Share URLs
- Regular: canonical URL. Gift: canonical URL plus the gift token (mock: ?gift=demo-token-0000)
- Email: regular uses the existing /forward/node/{nid}; gift uses mailto:?subject={title}&body={url}
- Bluesky: https://bsky.app/intent/compose?text={title} {url}
- LinkedIn: https://www.linkedin.com/shareArticle?mini=true&url={url}&title={title}
- Reddit: https://reddit.com/submit?url={url}&title={title} (all values URL-encoded)
- Copy link: copies the URL for that popover (gift URL in the gift popover) and shows the toast Link copied for 1.8s; falls back to a hidden textarea + execCommand when the Clipboard API is missing
Interaction
- Desktop (hover:hover and pointer:fine): opens 120ms after hover, closes 250ms after the pointer leaves unless pinned by a click
- Click or tap toggles; a click on a popover opened by hover pins it open; a second click closes it
- Esc closes and returns focus to the button; a click outside closes; only one popover is open at a time
- Accessibility: buttons use aria-haspopup, aria-expanded and aria-controls; popovers are role=dialog with an aria-label; visible 2px focus ring (--cno-blue-dark); every row is a real link or button
Layout and breakpoint
- Popover: opens 0.625rem below the button, left-aligned to it, width 18rem (max 100vw - 2.5rem), z-index 40; shifted left when it would leave the viewport (12px margin) and the caret follows the button centre
- Phones (max-width 639px): the gift pill becomes a 1.875rem round icon; the share icon calls navigator.share({title, url}) when available and falls back to the popover
- All sizes, colours and transitions are the site's own --cno-* properties; see share.css (nothing hard-coded except the popover shadow)
Open questions
- Gift links: how many per subscriber, or unlimited? Do they expire or can they be revoked? Which service issues the token (and is it per share or per article)?
- What exactly marks an article as paywalled and a viewer as a subscriber on the live site (the saved page's Piano tp-* classes were removed in this mockup)?
- The Share Options text says a link only subscribers can access, but the public share link works for anyone: confirm the intended copy
- Tracking: should share and gift clicks be reported (and to what)?
- Should the lower share block and the footer row get the same treatment?
- More networks later (Facebook, X, Threads, WhatsApp) would be a separate task: add a row to NETWORKS in share.js
Option B layout
- Keeps the current icon row under the headline and adds the gift pill after it (label hidden below 640px)
- Phones (<640px): the icon row is hidden and replaced by one share icon (device share sheet, popover as fallback) with the gift icon beside it, as the developer notes suggest
- Not changed: the larger share block lower in the article and the footer row (WhatsApp removed there for consistency)
Files and references
| Route | /public/cno-article-share/option-b (served in place from cno-article-share/) |
|---|---|
| Source files | cno-article-share/option-b.htmlcno-article-share/share.jscno-article-share/share.css |
| Components used | Gift pill Share icon and popover Toast Typography Colour |
| Design tokens | tokens.css fonts.css tokens.json DESIGN-TOKENS.md Token reference |
| AI files | AGENTS.md components.md design-tokens.md All AI files (.zip) AI files page |
| Claude skill | SKILL.md rules.md check.py starter.html Skill (.zip) |
| Notes |
|