index.jsx

1import { mount, useShelves } from '../lib/app.jsx';2import { Grid, Shell } from '../kit/ui/chrome.jsx';3import { sidebar } from '../lib/tree.js';4import site from '../lib/site.js';56const GROUPS = site.shelves.reduce((groups, shelf) => {7  const last = groups[groups.length - 1];8  if (last && last.name === shelf.group) last.shelves.push(shelf);9  else groups.push({ name: shelf.group, shelves: [shelf] });10  return groups;11}, []);1213const CONTENTS = GROUPS.flatMap((group) => [14  { id: group.name.toLowerCase(), text: group.name, level: 2 },15  ...group.shelves.map((shelf) => ({ id: shelf.key, text: shelf.title, level: 3 })),16]);1718const slug = (href) => href.split('/').filter(Boolean)[1];1920const tile = (node) => ({21  ...node,22  figure: { dark: `/figures/demo-${slug(node.href)}-dark.png`, light: `/figures/demo-${slug(node.href)}-light.png` },23});2425function Shelf({ shelf, nodes }) {26  if (!nodes.length) return null;27  return (28    <>29      <div className="shelf" id={shelf.key}>30        <h2>{shelf.title}</h2>31        <p>{shelf.blurb}</p>32      </div>33      <Grid nodes={nodes.map(tile)} />34    </>35  );36}3738function App() {39  const shelves = useShelves();40  const held = (key) => shelves.find((one) => one.key === key)?.nodes ?? [];41  return (42    <Shell route="/demos/" title="The eyes of MrlyMath" lead="Every number and pixel on these pages comes out of the Rust crates through wasm. The browser only draws." tree={sidebar({ demos: shelves })} contents={CONTENTS} wide>43      {GROUPS.map((group) => (44        <section key={group.name} id={group.name.toLowerCase()}>45          <h2 className="group">{group.name}</h2>46          {group.shelves.map((shelf) => <Shelf key={shelf.key} shelf={shelf} nodes={held(shelf.key)} />)}47        </section>48      ))}49    </Shell>50  );51}5253mount(<App />);