@tinyvolt/pie 0.0.0-stage → 0.2.0

package/.nvmrc

@@ -0,0 +1 @@
+24.21.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 TinyVolt
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,69 @@
-# Temporary Holding Version
+<img src="public/logo.svg" alt="pie-ssg logo" width="96">
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+# pie-ssg
+
+[![npm](https://img.shields.io/npm/v/@tinyvolt/pie)](https://www.npmjs.com/package/@tinyvolt/pie)
+[![license](https://img.shields.io/github/license/TinyVolt/pie-ssg)](LICENSE)
+
+A Markdown-based SSG for interactive science explainers
+
+See the [roadmap](ROADMAP.md) for planned features and [documentation](DOCS.md) for existing features.
+
+## Create a site
+
+```sh
+npx @tinyvolt/pie init my-site
+cd my-site
+npm install
+npm run dev
+```
+
+With pnpm:
+
+```sh
+pnpx @tinyvolt/pie init my-site
+cd my-site
+pnpm install
+pnpm dev
+```
+
+Leave out `my-site` and it asks for a folder name. The folder must not exist yet, or be empty.
+
+The site installs the app as the `@tinyvolt/pie` package. To update it:
+
+```sh
+npm install @tinyvolt/pie@latest
+```
+
+Requires Node 24. Package: [@tinyvolt/pie](https://www.npmjs.com/package/@tinyvolt/pie).
+
+## Developing pie-ssg
+
+Requires Node 24 (see `.nvmrc`) and pnpm.
+
+```sh
+nvm use
+corepack enable
+pnpm install
+```
+
+## Usage
+
+```sh
+pnpm dev       # start the dev server
+pnpm build     # build to .output/
+pnpm start     # run the built server
+pnpm preview   # preview the build with vite
+```
+
+## Publishing
+
+Bump `version` in `package.json`, then at the repo root:
+
+```sh
+npm whoami
+npm login # if npm whoami fails
+npm publish --dry-run   # list the files without publishing
+npm publish
+git tag pie@<version> && git push origin pie@<version>
+```

package/functions/midpoint.ts

@@ -0,0 +1,29 @@
+import { Node2NodeFunc } from '~/lib/nodes/functions/Node2NodeFunc';
+import { AnyNode, PointNode } from '~/lib/nodes/state/Node';
+import { add, div, ref, scalar } from '~/lib/nodes/jax';
+
+/**
+ * The point halfway between two points. Called from Python as `pie.midpoint(p1, p2)`.
+ * @param point1 - First point
+ * @param point2 - Second point
+ * @returns Point node
+ * @auxiliaryNodes None
+ */
+export const Midpoint: Node2NodeFunc = {
+  keyword: 'midpoint', outputType: 'Point',
+  parameters: [{ name: 'point1', type: 'Point' }, { name: 'point2', type: 'Point' }],
+  compute(inputs: AnyNode[]) {
+    const p1 = inputs[0] as PointNode;
+    const p2 = inputs[1] as PointNode;
+    return {
+      main: {
+        type: 'Point',
+        x: div(add(ref(p1.x), ref(p2.x)), scalar(2)),
+        y: div(add(ref(p1.y), ref(p2.y)), scalar(2)),
+      },
+    };
+  },
+};
+
+/** Docs category for the functions defined in this file. */
+export const category = 'Custom';

package/functions/square.ts

@@ -0,0 +1,20 @@
+import { Node2NodeFunc } from '~/lib/nodes/functions/Node2NodeFunc';
+import { AnyNode } from '~/lib/nodes/state/Node';
+
+/**
+ * An axis-aligned square, drawn by the `Square` node type in `nodes/square.tsx`. Called from Python as `pie.square(center, side)`.
+ * @param center - Center point of the square
+ * @param side - Side length
+ * @returns Square node
+ * @auxiliaryNodes None
+ */
+export const Square: Node2NodeFunc = {
+  keyword: 'square', outputType: 'Square',
+  parameters: [{ name: 'center', type: 'Point' }, { name: 'side', type: 'Scalar' }],
+  compute(inputs: AnyNode[]) {
+    return { main: { type: 'Square', center: inputs[0], side: inputs[1] } };
+  },
+};
+
+/** Docs category for the functions defined in this file. */
+export const category = 'Custom';

package/init/index.js

@@ -0,0 +1,87 @@
+#!/usr/bin/env node
+// `npx @tinyvolt/pie init [dir]`: creates a new pie-ssg site in `dir`, which installs this package.
+import fs from 'node:fs';
+import path from 'node:path';
+import readline from 'node:readline/promises';
+
+const DEFAULT_DIR = 'pie-site';
+const USAGE = 'Usage: npx @tinyvolt/pie init [dir]';
+// This package's root. Its example site is where a new site starts.
+const root = path.resolve(import.meta.dirname, '..');
+
+// Package path -> path in the new site.
+const FILES = {
+  'pages': 'pages',
+  'functions': 'functions',
+  'nodes': 'nodes',
+  'styles': 'styles',
+  'layouts': 'layouts',
+  'public': 'public',
+  'site.yml': 'site.yml',
+  '.nvmrc': '.nvmrc',
+  // Named so tools working on this repo don't load them. npm drops `.gitignore` from packages.
+  'init/site-agents.md': 'AGENTS.md',
+  'init/site-vite.config.ts': 'vite.config.ts',
+  'init/site-tsconfig.json': 'tsconfig.json',
+  'init/site-gitignore': '.gitignore',
+};
+
+async function askDir() {
+  const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
+  const answer = await rl.question(`Project folder (${DEFAULT_DIR}): `);
+  rl.close();
+  return answer.trim() || DEFAULT_DIR;
+}
+
+/** A valid npm package name from the folder name: lowercase, other characters -> `-`. */
+const toPackageName = (name) =>
+  name.toLowerCase().replace(/[^a-z0-9._~-]+/g, '-').replace(/^[._-]+/, '') || DEFAULT_DIR;
+
+const [command, dirArg] = process.argv.slice(2);
+if (command !== 'init') {
+  console.error(USAGE);
+  process.exit(1);
+}
+
+const dir = dirArg || (await askDir());
+const target = path.resolve(dir);
+
+if (fs.existsSync(target) && fs.readdirSync(target).length > 0) {
+  console.error(`${dir} already exists and is not empty. Pick another folder.`);
+  process.exit(1);
+}
+
+for (const [from, to] of Object.entries(FILES)) {
+  fs.cpSync(path.join(root, from), path.join(target, to), { recursive: true });
+}
+// Claude Code reads `CLAUDE.md`; `@AGENTS.md` loads the guide from there.
+fs.writeFileSync(path.join(target, 'CLAUDE.md'), '@AGENTS.md\n');
+
+// The site depends on this exact version, plus its peers at the exact versions it was tested with.
+// pnpm only lets a site see its own dependencies, so `vite` (the CLI, the config) and `solid-js` (JSX in `nodes/`) are listed here.
+// `--configLoader runner` lets Vite load `@tinyvolt/pie/vite`: Node won't strip TypeScript types under `node_modules`.
+const app = JSON.parse(fs.readFileSync(path.join(root, 'package.json'), 'utf8'));
+const vite = (command) => `vite ${command} --configLoader runner`;
+const pkg = {
+  name: toPackageName(path.basename(target)),
+  type: 'module',
+  scripts: {
+    dev: vite('dev'),
+    build: vite('build'),
+    start: app.scripts.start,
+    preview: vite('preview'),
+  },
+  dependencies: { [app.name]: app.version, ...app.peerDependencies },
+  devDependencies: { '@types/node': app.devDependencies['@types/node'], typescript: app.devDependencies.typescript },
+  engines: app.engines,
+};
+fs.writeFileSync(path.join(target, 'package.json'), JSON.stringify(pkg, null, 2) + '\n');
+
+const usesPnpm = (process.env.npm_config_user_agent ?? '').startsWith('pnpm');
+console.log(`
+Created ${dir}. Next:
+
+  cd ${/\s/.test(dir) ? `"${dir}"` : dir}
+  ${usesPnpm ? 'pnpm install' : 'npm install'}
+  ${usesPnpm ? 'pnpm dev' : 'npm run dev'}
+`);

package/init/site-agents.md

@@ -0,0 +1,257 @@
+[fully written by an agent except this line]
+# pie-ssg site
+
+This folder is a site made with [pie-ssg](https://github.com/TinyVolt/pie-ssg): a Markdown-based static site generator for interactive science explainers. Pages are Markdown. Readers can run Python in the page and draw on a canvas.
+
+Requires Node 24.
+
+```sh
+npm run dev       # dev server
+npm run build     # build to .output/; also runs the checks listed under "Build checks"
+npm run start     # run the built server
+npm run preview   # preview the build with vite
+```
+
+## Where things go
+
+| Folder / file | What it holds |
+| --- | --- |
+| `pages/` | Markdown pages. `pages/a/b.md` is served at `/a/b`. |
+| `functions/` | Your own TypeScript functions, called from Python as `pie.<keyword>(...)`. |
+| `nodes/` | Your own node types: what a node holds and how it is drawn. |
+| `layouts/` | Optional overrides: `header.tsx` (top of every page) and `index.tsx` (homepage, `/`). |
+| `styles/` | CSS. Every `.css` file here loads after the built-in styles, so it wins. |
+| `public/` | Static files, served as-is. |
+| `site.yml` | Site settings. |
+| `node_modules/@tinyvolt/pie/src/` | The pie-ssg app itself, installed as the `@tinyvolt/pie` package. `~/` in imports means this folder. |
+
+Do the work in the folders above. Don't edit `node_modules/@tinyvolt/pie/`: installing or updating the package replaces it.
+
+## site.yml
+
+Flat `key: value` lines. Values may be quoted. A key may appear only once.
+
+- `title` (required): shown in the header and in every browser tab title.
+- `url`: where the site is deployed, e.g. `https://example.com`. Needed for `sitemap.xml`, `robots.txt`, canonical links and `og:url`; without it the build skips them and warns.
+- `description`: shown in search results and link previews for a page with no `description` of its own.
+
+## Pages
+
+A page is a `.md` file under `pages/`. `/pages` lists every page.
+
+Optional frontmatter at the very top, as flat `key: value` lines:
+
+```md
+---
+title: Circles
+canvas: left
+---
+```
+
+- `title`: the tab title. Empty means the tab shows the site title alone.
+- `description`: shown in search results and link previews. Empty means `site.yml`'s `description`.
+- `canvas`: `left`, `right`, `top`, `bottom` or `none` (default). Adds a canvas on that side of the page.
+
+Other keys are ignored. A bad value fails the build, and shows an error screen in dev.
+
+Math uses KaTeX: `$…$` inline, and `$$…$$` on its own lines for a display block.
+
+A page's URL must not match a route in `node_modules/@tinyvolt/pie/src/routes/` (`/`, `/pages`). For example, `pages/pages.md` fails the build.
+
+## Python editors
+
+A `python-editor` code fence becomes a runnable editor with Run and Stop buttons. A plain `python` fence is only highlighted code.
+
+````md
+```python-editor
+a = pie.point(1, 2, out='a')
+r = pie.scalar(1, out='r')
+pie.circle(a, r)
+```
+````
+
+- Python runs in the browser with Pyodide 0.28.2. `pie` is already imported.
+- All editors on one page share the same Python variables and the same canvas.
+- `import numpy`, `scipy`, `matplotlib` and other [Pyodide packages](https://pyodide.org/en/0.28.2/usage/packages-in-pyodide.html) load on first use.
+- `plt.show()` shows matplotlib figures under the editor.
+- `` ```python-editor collapsed `` starts the editor collapsed: only its toolbar shows until the reader expands it. Other words after `python-editor` are ignored.
+
+## Drawing on the canvas: `pie.*`
+
+Each `pie.<keyword>(...)` call makes a node: one thing the page tracks, such as a point or a circle. Nodes are drawn on the canvas. When a node changes, every node built from it updates.
+
+`out='<id>'` names a node. Calling again with the same `out` replaces that node, and everything built from it updates:
+
+```python
+pie.scalar(3, out='r')   # the circle above now has radius 3
+```
+
+Common mistake: `center = pie.point(1, 2)` does not give the node the id `center`. It gets an automatic id. Use `pie.point(1, 2, out='center')`.
+
+`fill='<color>'` and `stroke='<color>'` color a node, e.g. `pie.circle(a, r, fill='orange', stroke='#333')`:
+
+- A color is any CSS color (`'red'`, `'#ff0000'`, `'rgb(255, 0, 0)'`) or `'none'`. A bad color raises an error.
+- Every node the call makes gets the colors, including extra nodes such as the center point of `ellipse_from_foci`.
+- A node shows only the colors its render function draws with. A point uses only `fill`, a line only `stroke`. For `partial`'s arrow, `stroke` colors the line and `fill` the head.
+
+`unit` is a system node: a scalar holding the pixels per grid unit (default 50). Changing it changes the grid unit, e.g. `pie.scalar(80, out='unit')`.
+
+Built-in functions:
+
+| Call | Makes |
+| --- | --- |
+| `pie.scalar(value)` | a number |
+| `pie.text(value, x, y, font_size, w, h)` | a string; drawn centered at (x, y) only if both are given. All optional: `value` `''`, `font_size` 12 (pixels), `w` and `h` 0. `w`/`h`: 0 and 0 = one line, no box; above 0 = fixed size; -1 = fits the text, at most 5 |
+| `pie.point(x, y)` | a point |
+| `pie.line(p1, p2)` | a line |
+| `pie.distance(p1, p2)` | a number |
+| `pie.triangle(v1, v2, v3)` | a triangle |
+| `pie.circle(center, radius)` | a circle |
+| `pie.ellipse(center, radius_x, radius_y, rotation)` | an ellipse; rotation in degrees |
+| `pie.ellipse_from_foci(f1, f2, string_length)` | an ellipse |
+| `pie.arc(center, radius, start_angle, end_angle)` | an arc; angles in degrees |
+| `pie.bezier_quadratic(p1, control, p2)` | a curve |
+| `pie.bezier_cubic(p1, control1, control2, p2)` | a curve |
+| `pie.partial(target, var)` | the derivative of scalar `target` with respect to `var`. `var` is a scalar node (gives a number) or a point node (gives an arrow at the point). |
+
+Arguments can be nodes or plain numbers. Passing an array where one item is expected runs the function once per item (except `partial`).
+
+### Side effects
+
+These change existing nodes instead of making a new one. They run once, when called.
+
+| Call | Does |
+| --- | --- |
+| `pie.clear()` | removes every node and resets `unit` (pixels per grid unit) to 50 |
+| `pie.translate_point_to(p, x, y)` | moves point `p` to (x, y) |
+| `pie.translate_point_by(p, dx, dy)` | moves point `p` by (dx, dy) |
+| `pie.translate_scalar_to(s, value)` | sets scalar `s` to `value` |
+| `pie.translate_scalar_by(s, delta)` | adds `delta` to scalar `s` |
+| `pie.set_fill(node, color)` | sets `node`'s fill |
+| `pie.set_stroke(node, color)` | sets `node`'s stroke |
+| `pie.hide(node)` | stops drawing `node` |
+| `pie.show(node)` | draws a hidden `node` again |
+| `pie.remove(node)` | removes `node`; nodes built from it are removed too |
+
+- `p`, `s` or `node` can be an array: every item changes.
+- A moved node stops following the nodes it was built from. Nodes built from it follow the move. A moved point keeps its colors.
+- The four `translate_*` calls take `animate=True`: the value moves to its new value over half a second instead of jumping. The call returns when the move ends, so a loop of animated calls plays one after another. An array's items move together. Other calls raise an error if passed `animate`.
+
+### Lifting a Python function: `pie.lift`
+
+`pie.lift(f, out_type)` turns a plain Python function into one that takes nodes and returns a node. It reruns when its input nodes change. `out_type` is one of `pie.Scalar`, `pie.Point`, `pie.Text` (or `str`), `pie.Array[pie.Scalar]`, `pie.Array[pie.Point]`.
+
+```python
+import numpy as np
+linspace = pie.lift(np.linspace, out_type=pie.Array[pie.Scalar])
+n = pie.scalar(5, out='n')
+xs = linspace(0, n, 5)
+pie.point(xs, 0)          # 5 points from 0 to 5; set `n` again and they move
+```
+
+A lifted function also takes `fill` and `stroke`, e.g. `linspace(0, n, 5, fill='red')`.
+
+Limits:
+
+- A lifted function can't call `pie.*` or index arrays.
+- `pie.partial` can't differentiate through a lifted function.
+
+## Your own functions: `functions/`
+
+Each `functions/**/*.ts` file exports one or more `Node2NodeFunc` objects. Each becomes `pie.<keyword>` in Python. Copy `functions/midpoint.ts` as a starting point:
+
+```ts
+import { Node2NodeFunc } from '~/lib/nodes/functions/Node2NodeFunc';
+import { AnyNode, PointNode } from '~/lib/nodes/state/Node';
+import { add, div, ref, scalar } from '~/lib/nodes/jax';
+
+export const Midpoint: Node2NodeFunc = {
+  keyword: 'midpoint', outputType: 'Point',
+  parameters: [{ name: 'point1', type: 'Point' }, { name: 'point2', type: 'Point' }],
+  compute(inputs: AnyNode[]) {
+    const p1 = inputs[0] as PointNode;
+    const p2 = inputs[1] as PointNode;
+    return {
+      main: { type: 'Point', x: div(add(ref(p1.x), ref(p2.x)), scalar(2)), y: div(add(ref(p1.y), ref(p2.y)), scalar(2)) },
+    };
+  },
+};
+```
+
+- `compute` returns an object whose `main` entry is the output node. Other entries are extra nodes drawn alongside it.
+- Do the math with the helpers in `~/lib/nodes/jax` (`add`, `sub`, `mul`, `div`, `sqrt`, `sin`, `cos`, `atan2`, …), not plain JS operators. Wrap a node's number field in `ref(...)` before using it. These keep `pie.partial` working on your function.
+- Node types and their fields are in `node_modules/@tinyvolt/pie/src/lib/nodes/state/Node.ts`.
+- A file can also export a `SideEffectFunc` (same module as `Node2NodeFunc`): `keyword`, `parameters`, and `run(inputs, store)`, which changes the store instead of returning nodes. See `node_modules/@tinyvolt/pie/src/lib/nodes/functions/sideEffects.ts`.
+- A keyword used twice, by two of your files or by yours and a built-in, fails the build.
+
+## Your own node types: `nodes/`
+
+Each `nodes/**/*.{ts,tsx}` file exports one or more `NodeDefinition` objects. Each adds a node type that functions can output and the canvas draws. Copy `nodes/square.tsx` as a starting point:
+
+```tsx
+import type { Accessor } from 'solid-js';
+import type { Node, NodeDefinition, PointNode, ScalarNode } from '~/lib/nodes/state/Node';
+import { num } from '~/lib/nodes/jax';
+
+export interface SquareNode extends Node {
+  type: 'Square';
+  center: PointNode;
+  side: ScalarNode;
+}
+
+// Adds 'Square' to the node types, so functions can take and return it.
+declare module '~/lib/nodes/state/Node' {
+  interface NodeTypeMap {
+    Square: SquareNode;
+  }
+}
+
+const renderSquare = (square: Accessor<SquareNode>) => {
+  const side = () => num(square().side.value);
+  return (
+    <rect
+      x={num(square().center.x) - side() / 2}
+      y={num(square().center.y) - side() / 2}
+      width={side()}
+      height={side()}
+      fill={square().fill ?? 'none'} stroke={square().stroke ?? 'currentColor'}
+      stroke-width={2} vector-effect="non-scaling-stroke"
+    />
+  );
+};
+
+export const Square: NodeDefinition<SquareNode> = { type: 'Square', prefix: 'sq', render: renderSquare };
+```
+
+- `type`: the type name. It must match the interface's `type`.
+- `prefix`: the start of automatic ids: `sq` gives `sq0`, `sq1`, …. Default: the type name in lower case.
+- `render(node, unit)`: returns Solid SVG elements, in grid units. `node()` returns the node's current data. Call it inside the JSX attributes, so the drawing updates when the node changes. `unit` is pixels per grid unit: divide by it for a size that stays fixed on screen. Leave `render` out for a node that isn't drawn.
+- `num(...)` turns a node's number field into a plain JS number.
+- `node().fill` and `node().stroke` hold the colors set from Python, or `undefined`. Use them before your default, e.g. `fill={square().fill ?? 'none'}`. A render function that doesn't read them ignores them.
+- The `declare module` block is needed so that a `Node2NodeFunc` accepts the type in `outputType` and `parameters`.
+- Python makes a node of your type through a function in `functions/`. `functions/square.ts` adds `pie.square(center, side)`.
+- The built-in node types are in `node_modules/@tinyvolt/pie/src/lib/nodes/state/Node.ts`, and their render functions are in `node_modules/@tinyvolt/pie/src/lib/nodes/render/renderLogic.tsx`.
+- A type name used twice, by two of your files or by yours and a built-in, fails the build.
+
+## Layouts: `layouts/`
+
+- `layouts/header.tsx`: replaces the header on every page.
+- `layouts/index.tsx`: replaces the homepage.
+
+Each must `export default` a Solid component (Solid JSX: `class`, not `className`). Delete the file to get the built-in one back. `header.tsx` shows how to read `site.yml`: `import site from "../site.yml"`.
+
+## Styles: `styles/`
+
+Change the CSS variables in `styles/theme.css` (colors, fonts, text width), or add rules, e.g. `main h1 { color: crimson; }`.
+
+## Build checks
+
+`npm run build` fails, with a message naming the file, when:
+
+- a page's frontmatter or `site.yml` has a bad line or value, or `site.yml` has no `title`
+- a page's URL matches a route in `node_modules/@tinyvolt/pie/src/routes/`
+- a `functions/` keyword is used twice
+- a `nodes/` type name is used twice
+- a `layouts/` file has no default export
+
+Run `npm run build` after a change to confirm it.

package/init/site-gitignore

@@ -0,0 +1,28 @@
+dist
+.wrangler
+.output
+.vercel
+.netlify
+.vinxi
+app.config.timestamp_*.js
+
+# Environment
+.env
+.env*.local
+
+# dependencies
+/node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+*.launch
+.settings/
+
+# System Files
+.DS_Store
+Thumbs.db
+
+# Python
+__pycache__/

package/init/site-tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "allowJs": true,
+    "strict": true,
+    "noEmit": true,
+    "types": ["vite/client", "node"],
+    "isolatedModules": true,
+    "paths": {
+      "~/*": ["./node_modules/@tinyvolt/pie/src/*"]
+    }
+  },
+  "include": ["**/*", "node_modules/@tinyvolt/pie/src/global.d.ts"]
+}

package/init/site-vite.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from "vite";
+import { pie } from "@tinyvolt/pie/vite";
+
+export default defineConfig({
+  plugins: [pie()],
+});

package/layouts/header.tsx

@@ -0,0 +1,16 @@
+import site from "../site.yml";
+
+/** The site name and nav links, shown at the top of every page. */
+export default function Header() {
+  return (
+    <header class="site-header">
+      <a class="site-header-title" href="/">
+        {site.title}
+      </a>
+      <nav class="site-header-nav">
+        <a href="/about">About</a>
+        <a href="/pages">Pages</a>
+      </nav>
+    </header>
+  );
+}

package/layouts/index.tsx

@@ -0,0 +1,10 @@
+/** The homepage, at `/`. */
+export default function Home() {
+  return (
+    <main>
+      <h1>pie-ssg</h1>
+      <h2>A Markdown-based SSG for interactive science explainers</h2>
+      <a href="/pages">Pages</a>
+    </main>
+  );
+}

package/nodes/square.tsx

@@ -0,0 +1,36 @@
+import type { Accessor } from 'solid-js';
+import type { Node, NodeDefinition, PointNode, ScalarNode } from '~/lib/nodes/state/Node';
+import { num } from '~/lib/nodes/jax';
+
+/** An axis-aligned square. Made from Python with `pie.square(center, side)`, see `functions/square.ts`. */
+export interface SquareNode extends Node {
+  type: 'Square';
+  center: PointNode;
+  side: ScalarNode;
+}
+
+// Adds 'Square' to the node types, so functions can take and return it.
+declare module '~/lib/nodes/state/Node' {
+  interface NodeTypeMap {
+    Square: SquareNode;
+  }
+}
+
+const renderSquare = (square: Accessor<SquareNode>) => {
+  const side = () => num(square().side.value);
+
+  return (
+    <rect
+      x={num(square().center.x) - side() / 2}
+      y={num(square().center.y) - side() / 2}
+      width={side()}
+      height={side()}
+      fill={square().fill ?? 'none'}
+      stroke={square().stroke ?? 'currentColor'}
+      stroke-width={2}
+      vector-effect="non-scaling-stroke"
+    />
+  );
+};
+
+export const Square: NodeDefinition<SquareNode> = { type: 'Square', prefix: 'sq', render: renderSquare };