Using with Astro

Import the stylesheet in your layout, then use the components like any other.

In this chapter 8 pages

Set up a layout

src/layouts/Page.astro

---
import "@dario-loi/polytope/css";
import { TopBar, ThemeToggle } from "@dario-loi/polytope/astro";
const { title } = Astro.props;
---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{title}</title>
    <script is:inline>try{var t=localStorage.getItem("ply-theme");if(t)document.documentElement.dataset.theme=t}catch(e){}</script>
  </head>
  <body>
    <TopBar brand="John Doe" links={[{ label: "Research", href: "/research/" }]}>
      <ThemeToggle />
    </TopBar>
    <slot />
  </body>
</html>

The inline script applies a saved theme before the first paint, so dark mode does not flash white.

Use components

astro

---
import { Button, Note, Equation, Machine } from "@dario-loi/polytope/astro";
---
<Button href="/paper.pdf">Read the paper</Button>
<Note>Results use five seeds.</Note>
<Equation tex="L = D - A" num={1} />
<Machine interactive />

Components that need a script (the machine, copy buttons, the theme toggle, sliders) include it themselves. Astro bundles each script once per page.

Astro settings

Astro compiles .astro files from node_modules without extra configuration. If Vite complains about an external package during the build, add this:

astro.config.mjs

export default defineConfig({
  vite: { ssr: { noExternal: ["@dario-loi/polytope"] } },
});

Deploying for free

Build with astro build and publish dist/ to GitHub Pages or Cloudflare Pages. For a GitHub Pages project site, set site and base:

export default defineConfig({
  site: "https://dario-loi.github.io",
  base: "/my-paper",
});