All examples

mount /hello = "hello.qwe"mount /orders = "orders.qwe"mount /todo = "todo.qwe"mount /notes = "notes.qwe"mount /scroll = "scroll.qwe"mount /virtual = "virtual.qwe"mount /compose = "compose.qwe"mount /layout = "layout.qwe"mount /spa = "spa.qwe"mount /life = "life.qwe"mount /storm = "storm.qwe"let examples = [    { id: "todo", path: "/todo", name: "Todo", about: "A server-rendered app with forms and a JSON API. No JavaScript." },    { id: "notes", path: "/notes", name: "Notes", about: "SQLite and a live component: open it in two tabs." },    { id: "spa", path: "/spa", name: "Shop", about: "A single-page app with live stock: open it in two tabs and buy something." },    { id: "storm", path: "/storm", name: "StateStorm", about: "A busy dashboard under a storm of random changes: press Storm." },    { id: "life", path: "/life", name: "Game of Life", about: "Conway's Game of Life, run by a timer in the browser." },    { id: "compose", path: "/compose", name: "Composition", about: "Views and components built from each other." },    { id: "layout", path: "/layout", name: "JSON layout", about: "A page described as JSON, with a live editor." },    { id: "scroll", path: "/scroll", name: "Infinite scroll", about: "100,000 rows; only what is on screen is rendered." },    { id: "virtual", path: "/virtual", name: "Virtual list", about: "1,000,000 rows of 10 columns, 20 on screen: drag the scrollbar anywhere." },    { id: "hello", path: "/hello/hello/Quillo", name: "Hello", about: "Routes, typed path params, query patterns." },    { id: "orders", path: "/orders/orders", name: "Orders API", about: "Routing on what is inside a JSON body." },]component Gallery() {    let wanted = url().query.ex    let current = find(examples, (e) => e.id == wanted) ?? first(examples)    <div.gallery>        <header>            <h1>Quillo examples</h1>            <nav.tabs>                {for e in examples =>                    <a key={e.id} href={`/?ex=${e.id}`} class={e.id == current.id && "active"} title={e.about}>{e.name}</a>}            </nav>        </header>        <div.about>            <span>{current.about}</span>            <a href={current.path} target="_blank">Open on its own ↗</a>        </div>        <iframe key={current.id} src={current.path} title={current.name}></iframe>    </div>}let accent = "#0b57d0"let style = css`* { box-sizing: border-box; }html, body { height: 100%; margin: 0; }body { font: 15px/1.4 system-ui, sans-serif; color: #222; }.gallery { display: flex; flex-direction: column; height: 100vh; }header { display: flex; align-items: center; gap: 1.5rem; padding: 0 1.25rem; border-bottom: 1px solid #e5e5e5; }h1 { font-size: 1rem; margin: 0; white-space: nowrap; }.tabs { display: flex; gap: .25rem; overflow-x: auto; }.tabs a { padding: .9rem .8rem .75rem; color: #555; text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; }.tabs a:hover { color: #000; }.tabs a.active { color: ${accent}; border-bottom-color: ${accent}; font-weight: 600; }.about { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 1.25rem; font-size: 13px; color: #666; background: #fafafa; border-bottom: 1px solid #eee; }.about a { color: ${accent}; text-decoration: none; white-space: nowrap; }iframe { flex: 1; width: 100%; border: 0; }@media (prefers-color-scheme: dark) {  body { background: #161616; color: #ddd; }  header, .about { border-color: #2a2a2a; } .about { background: #1c1c1c; color: #999; }  .tabs a { color: #aaa; } .tabs a:hover { color: #fff; }}`route GET / =    <html>        <head>            <meta charset="utf-8"/>            <meta name="viewport" content="width=device-width, initial-scale=1"/>            <title>Quillo examples</title>            <style>{style}</style>        </head>        <body><Gallery/></body>    </html>