Share links

Share buttons from social networks usually come as a script from the network itself, which then sees every visitor of every page they're on. q.e.d.'s share row on episode pages (#053) loads nothing from anywhere:

Teilen: Mastodon · Bluesky · E-Mail · Link kopieren · Mehr …

Links where links do

Bluesky and email need no script at all, just an address with the text in it:

https://bsky.app/intent/compose?text=Folge%201%20https%3A%2F%2F…
mailto:?subject=Folge%201&body=https%3A%2F%2F…

Text in an address has to be percent-encoded: a space becomes %20, a / %2F, an ü (two bytes in UTF-8) %C3%BC. url_encode in crates/qed-core/src/generator.rs does it byte by byte: letters, digits and -_.~ stay, everything else becomes %XX. That's the "unreserved" set of RFC 3986, the one set no part of an address treats specially.

Buttons only where they work

Three things need JavaScript: copying the link, the device's share menu, and Mastodon. Mastodon has no central share address; every server has its own (https://fosstodon.org/share?text=…), so the button asks the reader for theirs once and remembers it in the browser. The usual alternative, a share service in between, is a third party again.

These buttons are written into the page with the hidden attribute. Without JavaScript they stay hidden, and the plain links are all there is: nothing that doesn't work. assets/share.js (q.e.d.'s own, a few dozen lines) shows each button only if the browser can do what it needs:

if (kind === "native" && !navigator.share) return;
if (kind === "copy" && !(navigator.clipboard && navigator.clipboard.writeText)) return;
button.hidden = false;

That's progressive enhancement: the page works as plain HTML, and the script adds to it where it can, instead of the page depending on the script. What each button needs (the address, the text, the question for the Mastodon server, in the site's language) sits in data- attributes, so one script file serves every page and no inline <script> is needed. See hidden, the Web Share API and data attributes.

In Elixir terms, the plain links are what a LiveView renders on the first, static request; the script is what the socket adds once it connects. If it never connects, the page still makes sense.