docs: add an animated LNURL-pay flow diagram to the project page - #39
Merged
Conversation
Two graphics replace the prose walkthrough on the landing page: - an address-anatomy figure showing that bob@example.com is just a domain and a path, i.e. plain HTTPS - a seven-step sequence diagram between the payer's wallet, this library and your node, with a travelling packet, per-step captions and prev/pause/next controls The animation autoplays only while the diagram is on screen, stops when the tab is hidden, and is off by default under prefers-reduced-motion, where the diagram still works as a static stepper. No external assets.
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.
Summary
Adds two graphics to the project page so a reader can see how a Lightning Address works
instead of parsing four paragraphs about it.
Address anatomy
A static figure that makes the central point: a Lightning Address is not new protocol.
bob@example.comsplits into the domain you control and a well-known path, which joininto the URL a wallet opens — the URL this library answers.
Payment flow
A seven-step sequence diagram between the payer's wallet, your domain (highlighted as
"this library") and your node:
GET /.well-known/lnurlp/bobGET /bob?amount=2000POST /api/v1/paymentsto your backend{ "pr": "lnbc20n1p…" }to the walletA packet travels along the active arrow, the step is described underneath in plain
language, and the surrounding copy calls out which steps the library answers and that the
sats never pass through it.
Behaviour
IntersectionObserver), stops whenthe tab is hidden.
‹ / Pause / ›plus numbered step buttons; any manual interaction stops autoplay forgood.
prefers-reduced-motion: reduceautoplay is off and the packet does not animate —the diagram still works as a manual stepper.
light/dark handling as the rest of the page.
Verification
Rendered headless (Chrome) in both colour schemes and at narrow widths:
scrollWidth == clientWidth, no offending elements<code>now wraps (overflow-wrap: anywhere) so long URLs cannot push the pagesideways on a phone
Also adds the CHANGELOG entry for the Pages site, which #38 did not include.
Test plan
node --check, 7 captions ↔ 7 diagram stepscomposer test-allunaffected and green