PostShare

Two buttons at the end of a post. Copy link copies the address and says so. Share poster opens a dialog with a poster of the post: the cover, the title, the description, the site and the date, and a QR code of the address, to download or hand to the system’s share sheet.

Its parts work on their own:

When to use

Once per post, under the copyright card.

On a page

<PostShare title={title} description={description} url={url} site="Field Notes"
  date="2026-03-04" cover={coverUrl} filename="hairlines" />

<Button variant="secondary" iconLeft="link">Copy link</Button>
<Dialog id="note" title="A title">…<Fragment slot="actions">…</Fragment></Dialog>
<Snackbar id="toast" />   <!-- toast.show("Saved") -->

Anatomy

The poster is 1080 by 1440 in the colours of the theme it sits in, drawn again when the theme changes: the cover over the top 9:16 of its width, or the cream card; the title in the display serif, up to three lines; the description in the sans; then a hairline, the site’s name, the date, a coral mark, and the QR code at the right, always dark on a light tile, since not every scanner reads a light code on a dark ground. It is SharePoster, which PostShare draws when the dialog first opens, after its fonts have loaded; on its own it draws at once, and its element has draw() and blob().

Dialog is a centred card that swings in from the diagonal. Snackbar is one line at the bottom, on the inverse surface.

Variants

Prop	Values
`cover`	The cover’s URL; without it, the cream card
`filename`	The PNG’s name
`variant` (Button)	`primary`, `secondary`, `secondary-on-dark` or `text`
`size` (Dialog)	`sm` (420px), `md` (560px) or `lg` (720px)
`depth` (Dialog)	`tilt`, `lift` or `none`

States

State	What changes
Link copied	“Link copied” for four seconds; “Couldn’t copy the link” if the browser refuses
Sharing files possible	The dialog also has Share, for the system’s share sheet

Accessibility

The poster’s canvas is an image named after the post. The dialog is a native modal with its title as its name; Escape, the scrim and the close button close it. The snackbar is a polite live region.

API

PostShare.astro, SharePoster.astro, Button.astro, Dialog.astro and Snackbar.astro. Button, Dialog and Snackbar are ported from the handoff; the handoff has no share component. The QR code comes from the qrcode package.

PostLicense.