praseodymium.js is a set of profile presets: a card, a chip and an avatar. Each preset only writes the markup you could have written yourself from radon and neon attributes, then lets those libraries fill it in. If the element already has children, nothing is generated and you keep your own markup.
<article npr-card="npub1..."></article>
<p>Thanks to <span npr-chip="npub1..."></span></p>
<img npr-avatar="npub1..." alt="">
<button npr-copy="npub1...">copy</button>
The card and chip get the markup below, radon fills the name, picture, NIP-05 and about, and the button copies its text to the clipboard.
PK is the hex pubkey and NPUB its npub (hex without neon.js). SHORT is the npub cut to npub1abcd…wxyz, shown until radon has a name. Every piece carries npr-part, the styling hook cerium.js uses.
npr-card:
<img npr-avatar="PK" npr-part="avatar" alt=""><b nrn-profile="PK" nrn-field="name" npr-part="name">SHORT</b><span nrn-profile="PK" nrn-field="nip05" npr-part="nip05"></span><p nrn-profile="PK" nrn-field="about" npr-part="about"></p><button npr-copy="NPUB" npr-part="copy">SHORT</button>
npr-chip:
<img npr-avatar="PK" npr-part="avatar" alt=""><b nrn-profile="PK" nrn-field="name" npr-part="name">SHORT</b>
npr-avatar generates nothing. It adds nrn-profile="PK", nrn-field="picture" (unless already set) and, if there is no src yet, an identicon src: a 5x5 mirrored SVG data URI colored from the pubkey. A picture that fails to load falls back to the identicon.
| attribute | description |
|---|---|
npr-card |
Pubkey (hex, or npub/nprofile with neon.js). Empty element: fills it with the card markup. Changing the pubkey regenerates it |
npr-chip |
Pubkey. Empty element: fills it with the chip markup (inline avatar and name) |
npr-avatar |
Pubkey, on an <img>. Adds radon's attributes and the identicon fallback |
npr-copy |
Text to copy on click. Works on any element |
npr-copied |
Set by praseodymium for 1.5s after a copy |
npr-part |
Names each generated piece: avatar, name, nip05, about, copy |
npr-ignore |
praseodymium skips this element and its descendants |
Elements with children (a <template> counts) are left as written. window.nprCfg = {copied} sets how long npr-copied stays, in ms.
| event | cancel to | detail |
|---|---|---|
npr:render |
keep the element as it is | kind, pubkey, html (change it to insert something else) |
npr:copy |
skip copying | text (can be changed) |
npr:copied |
text |
| function | returns |
|---|---|
praseodymium.markup(kind, pubkey) |
the HTML string for "card" or "chip", to copy into a page |
praseodymium.process(el) |
initializes presets on and under el (new elements are picked up on their own) |
praseodymium.face(hex) |
the identicon data URI |
Requires radon.js to fill profiles. Style it with cerium.js, or with your own rules on [npr-part].
praseodymium.js (3.2/1.3kb raw/brotli), prefix npr-, needs hydrogen, radon