1# 🪞 praseodymium.js - profiles you can see23praseodymium.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.45```html6<article npr-card="npub1..."></article>7<p>Thanks to <span npr-chip="npub1..."></span></p>8<img npr-avatar="npub1..." alt="">9<button npr-copy="npub1...">copy</button>10```1112The 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.1314## Generated markup1516`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.1718`npr-card`:1920```html21<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>22```2324`npr-chip`:2526```html27<img npr-avatar="PK" npr-part="avatar" alt=""><b nrn-profile="PK" nrn-field="name" npr-part="name">SHORT</b>28```2930`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.3132## Attributes3334| attribute | description |35|---|---|36| `npr-card` | Pubkey (hex, or `npub`/`nprofile` with neon.js). Empty element: fills it with the card markup. Changing the pubkey regenerates it |37| `npr-chip` | Pubkey. Empty element: fills it with the chip markup (inline avatar and name) |38| `npr-avatar` | Pubkey, on an `<img>`. Adds radon's attributes and the identicon fallback |39| `npr-copy` | Text to copy on click. Works on any element |40| `npr-copied` | Set by praseodymium for 1.5s after a copy |41| `npr-part` | Names each generated piece: `avatar`, `name`, `nip05`, `about`, `copy` |42| `npr-ignore` | praseodymium skips this element and its descendants |4344Elements with children (a `<template>` counts) are left as written. `window.nprCfg = {copied}` sets how long `npr-copied` stays, in ms.4546## Events4748| event | cancel to | detail |49|---|---|---|50| `npr:render` | keep the element as it is | `kind`, `pubkey`, `html` (change it to insert something else) |51| `npr:copy` | skip copying | `text` (can be changed) |52| `npr:copied` | | `text` |5354## API5556| function | returns |57|---|---|58| `praseodymium.markup(kind, pubkey)` | the HTML string for `"card"` or `"chip"`, to copy into a page |59| `praseodymium.process(el)` | initializes presets on and under `el` (new elements are picked up on their own) |60| `praseodymium.face(hex)` | the identicon data URI |6162Requires radon.js to fill profiles. Style it with cerium.js, or with your own rules on `[npr-part]`.