12<html lang="en">3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=device-width, initial-scale=1">6<title>europium demo</title>7<script src="relay.js"></script>8<script src="../neon/neon.js"></script>9<script src="../helium/helium.js"></script>10<script src="../argon/argon.js"></script>11<script src="../hydrogen/hydrogen.js"></script>12<script src="../xenon/xenon.js"></script>13<script src="../radon/radon.js"></script>14<script src="../europium/europium.js"></script>15<style>16 /* Demo page chrome only: note styling belongs to cerium.css. */17 :root { --ink:#1d1b16; --paper:#f4efe4; --line:#d8cfbd; --gas:#b91c1c; --muted:#7a7263; }18 body { margin:0; background:var(--paper); color:var(--ink); font:15px/1.5 ui-serif, Georgia, serif; }19 main { max-width:640px; margin:0 auto; padding:40px 20px 80px; }20 h1 { font:600 13px/1 ui-monospace, Menlo, monospace; letter-spacing:.12em; text-transform:uppercase; margin:0 0 4px; }21 h1 b { color:var(--gas); }22 h2 { font:12px ui-monospace, Menlo, monospace; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; margin:28px 0 8px; }23 .sub { color:var(--muted); margin:0 0 12px; font-style:italic; }24 article { border:1px solid var(--line); border-radius:8px; padding:12px 14px; background:#fffdf8; }25 article img[neu-part=avatar] { width:24px; height:24px; border-radius:50%; vertical-align:middle; }26 article [neu-part=content] { margin:6px 0; white-space:pre-wrap; overflow-wrap:anywhere; }27 article a { color:var(--gas); }28 [neu-loading], [neu-missing] { color:var(--muted); font-style:italic; }29</style>30</head>31<body>32<main>33 <h1><b>europium</b> demo</h1>34 <p class="sub">Note embeds: each article below is only <code><article neu-note="..."></code>. The page publishes a sample profile and notes first.</p>35 <h2>nevent (default markup)</h2><div id="a"></div>36 <h2>note1</h2><div id="b"></div>37 <h2>hex id</h2><div id="c"></div>38 <h2>a hand-written template, on a reply</h2><div id="d"></div>39 <h2>missing</h2><div id="e"></div>40</main>41<script>42 (async()=>{43 let sk = helium.key(), pk = helium.pub(sk), now = Date.now() / 1e3 | 044 let sign = (kind, content, tags = [])=>helium.finish({kind, created_at:now, tags, content}, sk)45 let profile = await sign(0, JSON.stringify({name:"Ada"}))46 let note = await sign(1, "hello <b>europium</b> https://example.com/x")47 let reply = await sign(1, "a reply", [["e", note.id, relay, "root"], ["p", pk]])48 for (let e of [profile, note, reply]) await hydrogen.pub(e, [relay])49 let nevent = neon.encode("nevent", {id:note.id, relays:[relay], author:pk, kind:1})50 window.demo = {note, reply, nevent, pk}51 a.innerHTML = `<article neu-note="${nevent}">loading...</article>`52 b.innerHTML = `<article neu-note="${neon.encode("note", note.id)}"></article>`53 c.innerHTML = `<article neu-note="${note.id}"></article>`54 d.innerHTML = `<article neu-note="${reply.id}"><template>55 <p neu-part="content">{content}</p>56 <a href="https://njump.me/{reply}" neu-part="link">in reply to</a>57 </template></article>`58 e.innerHTML = `<article neu-note="${"0".repeat(64)}" neu-timeout="1500">loading...</article>`59 })()60 document.addEventListener("neu:missing", (evt)=>evt.target.textContent = "note not found")61</script>62</body>63</html>