Footnote

import ui/theme.qwe use theme_cssuse ui/footnote.qweroute GET / = <html><head><style>{theme_css}</style></head><body class="ui-root">...</body></html>

view FootnoteDemo() =    <div.demo-stack id="footnote-demo">        <p style="margin: 0; font: 15px/1.6 var(--ui-font)">            Pages render on the server<Footnote n={1}/> and their components resume in the browser<Footnote n={2}/>, so a            page shows at once. Forms work without any script<Footnote n={3}/>.        </p>        <FootnoteList notes={[            "Every route, on every request; cached views aside.",            <span>Only once a component is <em>reached</em>: hovered, touched or focused.</span>,            "Every field is a real input with a name, so a plain form posts it.",        ]}/>    </div>

// Footnote: a numbered reference in the text, linked to its note in a list at the// end, which links back. Footnote is the mark; FootnoteList the notes.////   <p>Pages render on the server<Footnote n={1}/> and resume in the browser<Footnote n={2}/>.</p>//   <FootnoteList notes={["Every route, every time.", <span>Only once a component is <em>reached</em>.</span>]}/>//// Footnote: n, the number (its note is the nth in the list). id: a prefix shared by// the marks and the list ("fn"): the mark is #fnref1 and the note #fn1; give each// article on a page its own.// FootnoteList: notes, in order, text or HTML; each ends with a ↩ link back to its// mark. label: the heading over them ("Footnotes"). id as above. The one being looked// at (:target) is highlighted. The roles are the digital-publishing ones screen// readers know (doc-noteref, doc-endnotes, doc-endnote).import ui/theme.qwe use ui_clslet footnote_css = css`.ui-footnote-ref { font-size: .75em; line-height: 0; vertical-align: super; }.ui-footnote-ref a { padding: 0 2px; border-radius: 3px; color: var(--ui-accent); font-weight: 600; text-decoration: none; }.ui-footnote-ref a:hover { text-decoration: underline; }.ui-footnote-ref a:focus-visible { outline: none; box-shadow: var(--ui-focus); }.ui-footnote-ref:target a { background: var(--ui-accent-soft); }.ui-footnote-list { margin: 24px 0 0; padding-top: 12px; border-top: 1px solid var(--ui-border); font: 14px/1.5 var(--ui-font); color: var(--ui-muted); }.ui-footnote-label { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ui-muted); }.ui-footnote-list ol { margin: 0; padding-left: 1.6em; }.ui-footnote-list li { padding: 2px 4px; margin: 2px -4px; border-radius: var(--ui-radius-sm); overflow-wrap: anywhere; }.ui-footnote-list li::marker { font-weight: 600; color: var(--ui-accent); }.ui-footnote-list li:target { background: var(--ui-accent-soft); color: var(--ui-fg); }.ui-footnote-back { margin-left: 6px; border-radius: 3px; color: var(--ui-accent); text-decoration: none; }.ui-footnote-back:hover { text-decoration: underline; }.ui-footnote-back:focus-visible { outline: none; box-shadow: var(--ui-focus); }`view Footnote(n: int, id: str = "fn", class: str? = null) {    style global footnote_css    <sup class={ui_cls(["ui-footnote-ref", class])} id={`${id}ref${n}`}>        <a href={`#${id}${n}`} role="doc-noteref" aria-label={`Footnote ${n}`}>{n}</a>    </sup>}view FootnoteList(notes: list = [], id: str = "fn", label: str = "Footnotes", class: str? = null) {    style global footnote_css    <section class={ui_cls(["ui-footnote-list", class])} role="doc-endnotes" aria-labelledby={`${id}-label`}>        <h2.ui-footnote-label id={`${id}-label`}>{label}</h2>        <ol>            {for [i, note] in enumerate(notes) => <li id={`${id}${i + 1}`} role="doc-endnote">                {note}                <a.ui-footnote-back href={`#${id}ref${i + 1}`} aria-label={`Back to reference ${i + 1}`}>↩</a>            </li>}        </ol>    </section>}