🔴 europium.js - note embeds

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.

Generated markup

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>

Attributes

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.

Events

event	cancel to	detail
neu:missing	skip setting neu-missing	id

Rendering reports through xenon's nxe:swapped on the article.

API

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.