12<html lang="en">3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=device-width, initial-scale=1">6<title>nobel lanthanides</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="../praseodymium/praseodymium.js"></script>15<script src="../cerium/cerium.js"></script>16<style>17 :root { color-scheme:light dark; }18 body { margin:0; font:15px/1.5 system-ui, sans-serif; background:var(--n-bg); color:var(--n-fg); }19 main { max-width:640px; margin:0 auto; padding:40px 20px 80px; }20 h2 { font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--n-muted); margin:32px 0 12px; }21 .row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }22 pre { font-size:12px; white-space:pre-wrap; overflow-wrap:anywhere; background:color-mix(in srgb, var(--n-line) 40%, transparent); padding:12px; border-radius:8px; }23 /* A page rule beats cerium's layered default. */24 #themed { --n-accent:rgb(200, 30, 60); }25</style>26</head>27<body>28<script>relay && document.body.setAttribute("nhy-relay", relay)</script>29<main>30 <h1>lanthanides</h1>31 <form id="profile" class="row" nxe-publish nxe-kind="0">32 <input name="name" placeholder="name" value="Ada">33 <input name="about" placeholder="about" value="Counting engines.">34 <input name="picture" placeholder="picture URL">35 <button>Publish kind 0</button>36 </form>3738 <section id="praseodymium">39 <h2>praseodymium: cards, chips, avatars, copy</h2>40 <article id="card" npr-card=""></article>41 <h2>hand-written card (left alone)</h2>42 <article id="hand" npr-card=""><b nrn-field="name">my own markup</b></article>43 <h2>chip and avatar</h2>44 <p>Mentioned: <span id="chip" npr-chip=""></span></p>45 <div class="row"><img id="avatar" npr-avatar="" alt=""> <button id="copy" npr-copy="hello nobel">copy "hello nobel"</button></div>46 <h2>markup("card", pk)</h2>47 <pre id="markup"></pre>48 </section>4950 <section id="cerium">51 <h2>cerium: page CSS overrides the theme</h2>52 <p id="themed"><button npr-copy="themed" npr-copied>copied state in a custom accent</button></p>53 </section>54</main>55<script>56 // One local key (helium's); its kind 0 comes from the form. Every preset points at it.57 let pk = helium.pub(helium.key())58 for (let a of ["npr-card", "npr-chip", "npr-avatar"]) document.querySelectorAll(`[${a}=""]`).forEach((el)=>el.setAttribute(a, neon.encode("npub", pk)))59 hand.setAttribute("nrn-profile", pk)60 markup.textContent = praseodymium.markup("card", pk)61 // Profiles are kind 0 events whose content is JSON, so build it from the form's filled fields.62 profile.addEventListener("nhy:config", (evt)=>{63 evt.detail.cfg.event.content = JSON.stringify(Object.fromEntries([...new FormData(profile)].filter(([, v])=>v)))64 })65</script>66</body>67</html>