blinkers
A simple self-host service providing API keys for tightly scoped alterations to your atproto records blinkers.dev
atproto api
Star 3
Fork 0
Watch

Carry the diagram's icons as tokens, reorder the guide, and call blinkers from the browser #21

Merged byjp.me
targeting main from diagram-easing
Merged opened by and assigned to byjp.me
targeting main from diagram-easing

This reworks the homepage diagram so that each icon moves as one solid token, and it gives the site one design system. It also reorders and extends the setup guide. Blinkers now answers calls from web pages, so the guide can make a real call to the reader's instance.

Diagram #

  • One timeline. A single anime.js timeline drives the loop. Dots ease between stops and hold for 250ms at each one, and each box glows for a window centred on the dot's stop.
  • Icons are tokens. Each icon slides between rows, and it pushes the others aside only when it must. It flips over to change face. The key drops into the environment box, turns into its ACCESS_* entry and then into ✓, and the ✓ merges into the dot, which turns green.
  • Captions. Each caption is a sentence that stands on its own, with a mark for "in progress" or "done".
  • Step mode. It stops on both sides of every flip, and shows a sentence that says why the icon turned.
  • A new request each loop. The loop starts with the dot in the app's box and fades the dot out at the end. Lit routes are solid amber.
  • Phones. Wires and dots run down the middle of each box, the caption sits under the play/pause control, and the control's tooltip sits above it.

Design system #

  • Type. Display type is self-hosted Bricolage Grotesque.
  • Tokens. Colour, type and code share one set of tokens, in light and dark themes.
  • The sheet. The guide sits on a raised sheet. Its header band holds the title, the tabs and the step summary.
  • Selection. The selected tab and its diagram number share amber. All other tabs and numbers are purple.
  • Controls. Every control has hover, focus and active states, and touch targets reach 44px. Code is copied only from a visible button.
  • Docs.
    • The docs nav folds on small screens.
    • The docs index is a plain list.
    • The docs use one key, host, DID and lens name throughout.

Guide #

  • Order. The guide is titled "Set up your own instance", and its steps are Publish, Configure, Deploy, Call, so the variables are ready before the reader deploys.
  • Configure.
    • The handle field is gone once the reader signs in.
    • The example key can be made again.
    • The block works unedited as Docker's --env-file.
  • Deploy. A switch chooses Docker (the default), Railway or the CLI.
  • Call.
    • A switch chooses the getView or putView example.
    • A button makes that call from the browser and shows the response.
    • putView asks before it writes.
    • The button is disabled while the host is example.<tld>.

Server #

The XRPC routes and /xrpc/_health send CORS headers:

  • any origin;
  • the methods GET, POST and OPTIONS;
  • the request headers authorization and content-type;
  • no credentials.

Keys travel in a header, not a cookie, so a wildcard origin lets a page do nothing it couldn't already do with the key.

This needs a release, from .changeset/browser-calls.md.

CI and docs #

The STE gate (Vale) now lints every docs page. Its include glob never matched in a directory sweep, so it had been passing without checking anything. This also fixes the six over-long sentences that the gate then found.

Notes for review #

  • Merging deploys the site. The Call button can reach an instance only when that instance runs 0.1.5, which the next release PR cuts. Until then, the button shows "No response".
  • Not yet tested:
    • the Railway route's railway variable set $(cat ~/blinkers.env) line, because it was not run against Railway;
    • a call to a loopback instance from the https site. Chrome may ask for permission first, and other browsers may block it as mixed content.
Commits 0