europium.js is a miniature of fiatjaf's nostr-note web component: one attribute embeds a note, with its author, time, linked content and a link out. It does no fetching or rendering itself. It writes the xenon, radon and neon markup you could have written by hand, and those libraries do the work (argon caches it, too).
<article neu-note="nevent1...">loading...</article>
The article subscribes to the note's id (on its relay hints, when the nevent has some), shows loading... until it arrives, then becomes the markup below.
europium sets nxe-filter='{"ids":["<id>"]}' and nxe-swap="innerHTML" (unless already present), and nhy-relay to the nevent's relay hints plus nhyCfg.relays when neither the article nor an ancestor has one. If the article has no child elements, it appends this template (text is kept as a placeholder), then dispatches nxe:process:
<template><header neu-part="author"><img nrn-profile="{pubkey}" nrn-field="picture" neu-part="avatar" alt=""> <b nrn-profile="{pubkey}" nrn-field="name" neu-part="name">{npub}</b> <time nne-ago="{created_at}" neu-part="time">{ago}</time></header><div neu-part="content">{content}</div><a href="https://njump.me/{nevent}" neu-part="link">open</a></template>
If the article already has child elements, such as your own <template>, europium leaves the markup alone and only wires the subscription:
<article neu-note="note1..."><template>
<p neu-part="content">{content}</p>
<a href="https://njump.me/{reply}" neu-part="link">in reply to</a>
</template></article>
| attribute | description |
|---|---|
neu-note |
nevent, note (both need neon.js) or hex event id |
neu-timeout |
ms before the note counts as missing (default neuCfg.timeout or 8000) |
neu-loading |
Set by europium until the first render |
neu-missing |
Set by europium when nothing arrived in time. Cleared if the note shows up later |
neu-part |
On generated pieces: author, avatar, name, time, content, link, for styling |
neu-ignore |
europium skips this element and its descendants |
window.neuCfg = {link, timeout}: link is the prefix for the note link (default nneCfg.link, else https://njump.me/).
Templates inside [neu-note] also get {reply}: the nevent of the note's NIP-10 parent (reply marker, else root, else the last unmarked e tag), or empty.
| event | cancel to | detail |
|---|---|---|
neu:missing |
skip setting neu-missing |
id |
Rendering reports through xenon's nxe:swapped on the article.
| function | returns |
|---|---|
europium.markup(link?) |
the default template string |
europium.process(node) |
initializes [neu-note] elements in and under node (new ones are picked up automatically) |
Requires xenon.js and hydrogen.js. neon.js decodes ids and fills {content}, {npub}, {nevent}, {ago}; radon.js fills names and pictures; argon.js caches.
europium.js (2.7/1.1kb raw/brotli), prefix neu-, needs hydrogen, xenon