🪞 praseodymium.js - profiles you can see

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.

Generated markup

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.

Attributes

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.

Events

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

API

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].