@tinyvolt/pie 0.0.0-stage → 0.1.0

package/src/lib/python/py/pie.py

@@ -0,0 +1,231 @@
+import json, numbers, sys, types
+from pyodide.ffi import run_sync, to_js
+from js import Object
+import bridge
+
+class Node:
+    def __init__(self, id, type):
+        self.id = id
+        self.type = type
+
+    def __repr__(self):
+        return f"{self.type}({self.id})"
+
+class Scalar(Node):
+    def __init__(self, id):
+        super().__init__(id, "Scalar")
+
+class Point(Node):
+    def __init__(self, id):
+        super().__init__(id, "Point")
+
+class Text(Node):
+    def __init__(self, id):
+        super().__init__(id, "Text")
+
+class Array(Node):
+    # `pie.Array[pie.Point]`, a type for `pie.lift`.
+    def __class_getitem__(cls, item):
+        return types.GenericAlias(cls, item)
+
+    def __init__(self, id, shape, item_type):
+        super().__init__(id, "Array")
+        self.shape = shape
+        self.item_type = item_type
+
+    def __len__(self):
+        return self.shape[0]
+
+    def __repr__(self):
+        return f"Array[{self.item_type}]({self.id}, shape={self.shape})"
+
+    def __getitem__(self, key):
+        key = key if isinstance(key, tuple) else (key,)
+        if len(key) > len(self.shape):
+            raise IndexError(f"too many indices: the array has {len(self.shape)} dimensions, got {len(key)}")
+        entries = [_index_entry(k, n) for k, n in zip(key, self.shape)]
+        # One int per dimension picks an existing item: no new node.
+        if len(entries) == len(self.shape) and all(isinstance(e, int) for e in entries):
+            position = 0
+            for e, n in zip(entries, self.shape):
+                position = position * n + e
+            _check_bridge()
+            return _node(run_sync(bridge.item(self.id, position)))
+        return _call("_index", [self, json.dumps(entries)])
+
+def _index_entry(k, n):
+    """One dimension of a key, for a dimension of size `n`: an int, or the list of ints a slice picks."""
+    if isinstance(k, slice):
+        return list(range(*k.indices(n)))
+    if isinstance(k, int):
+        if not -n <= k < n:
+            raise IndexError(f"index {k} is out of range for size {n}")
+        return k % n
+    raise TypeError(f"array indices must be ints or slices, got {type(k).__name__}")
+
+def _node(result):
+    if result.type == "Array":
+        return Array(result.id, tuple(result.shape), result.itemType)
+    if result.type == "Scalar":
+        return Scalar(result.id)
+    if result.type == "Point":
+        return Point(result.id)
+    if result.type == "Text":
+        return Text(result.id)
+    return Node(result.id, result.type)
+
+def _arg(a):
+    if isinstance(a, Node):
+        return {"id": a.id}
+    if isinstance(a, (list, tuple)):
+        return [_arg(x) for x in a]
+    return a
+
+def _call(name, args, **options):
+    """`options`: keyword arguments like `out` and `fill`. Ones that are None are left out."""
+    _check_bridge()
+    js_args = to_js([_arg(a) for a in args], dict_converter=Object.fromEntries)
+    js_options = to_js({k: v for k, v in options.items() if v is not None}, dict_converter=Object.fromEntries)
+    return _node(run_sync(bridge.call(name, js_args, js_options)))
+
+# Above 0 while a function passed to `pie.lift` runs. It can't reach the page: a rerun runs outside any block.
+_lift_depth = 0
+
+def _check_bridge():
+    if _lift_depth:
+        raise RuntimeError("pie.* calls and array indexing aren't allowed inside a function passed to pie.lift")
+
+# Type passed to `pie.lift` -> (kind, item type).
+_RETURNS = [
+    (Scalar, ("Scalar", None)),
+    (Point, ("Point", None)),
+    (Text, ("Text", None)),
+    (str, ("Text", None)),
+    (Array[Scalar], ("Array", "Scalar")),
+    (Array[Point], ("Array", "Point")),
+]
+
+class _Slot:
+    """Where node argument `index` goes in a stored call."""
+    def __init__(self, index):
+        self.index = index
+
+def lift(fn, out_type):
+    """
+    A regular Python function `fn` can be _lifted_ to accept nodes (Scalar, Point, Text and Array)
+    g = pie.lift(fn, out_type)
+    - If `fn` returns a num, `g` returns `Scalar`, out_type = `Scalar`
+    - If `fn` returns a tuple or array of len 2, `g` returns `Point`, out_type = `Point`
+    - If `fn` returns a str, `g` returns `Text`, out_type = `Text` or `str`
+    - If `fn` returns a numpy array, `g` can return `Array[Point]` or `Array[Scalar]`
+    """
+    returns = next((r for t, r in _RETURNS if out_type == t), None)
+    if returns is None:
+        raise TypeError(f"pie.lift: out_type must be pie.Scalar, pie.Point, pie.Text (or str), pie.Array[pie.Scalar] or pie.Array[pie.Point], got {out_type!r}")
+    # The page's globals: `lift` is called from a block.
+    scope = sys._getframe(1).f_globals
+    name = getattr(fn, "__name__", None)
+    # A function defined in a block is found by name, so a later `def f` is used. Anything else, e.g. np.linspace, by reference.
+    target = name if name is not None and scope.get(name) is fn else fn
+    label = name or repr(fn)
+
+    def lifted(*args, out=None, hidden=False, fill=None, stroke=None, **kwargs):
+        return _lifted_node(scope, target, label, returns, args, kwargs, out, hidden, fill, stroke)
+    lifted.__name__ = lifted.__qualname__ = f"lift({label})"
+    return lifted
+
+def _lifted_node(scope, target, label, returns, args, kwargs, out, hidden, fill, stroke):
+    _check_bridge()
+    ids = []
+    def slot(a):
+        if not isinstance(a, Node):
+            return a
+        ids.append(a.id)
+        return _Slot(len(ids) - 1)
+    # The call, with node arguments as slots. Reruns fill the slots with new values; other arguments stay as they are.
+    call = (target, label, [slot(a) for a in args], {k: slot(v) for k, v in kwargs.items()}, returns)
+    kind, item = returns
+    reply = run_sync(bridge.lift(label, to_js(ids), kind, out, fill, stroke))
+    shape, values = _evaluate(scope, call, reply.values.to_py())
+    save = {"id": reply.id, "name": label, "inputIds": ids, "kind": kind, "itemType": item, "shape": shape, "values": values, "hidden": hidden, "fill": fill, "stroke": stroke}
+    bridge.lift_save(to_js(save, dict_converter=Object.fromEntries))
+    scope.setdefault("__pie_lift__", {})[reply.id] = call
+    if kind == "Array":
+        return Array(reply.id, tuple(shape), item)
+    return {"Scalar": Scalar, "Point": Point, "Text": Text}[kind](reply.id)
+
+def _rerun(scope, node_id, values):
+    """Called by the worker when an input of node `node_id` changes. `values`: the input values, in slot order."""
+    call = scope.get("__pie_lift__", {}).get(node_id)
+    if call is None:
+        raise RuntimeError("Python was restarted, so this node can't rerun. Run the block that made it again.")
+    shape, values = _evaluate(scope, call, values)
+    return {"shape": shape, "values": values}
+
+def _evaluate(scope, call, values):
+    """Calls the function: by name, the one now named so in `scope`; otherwise the one kept."""
+    global _lift_depth
+    target, label, args, kwargs, returns = call
+    if isinstance(target, str):
+        if target not in scope:
+            raise NameError(f"name '{target}' is not defined")
+        fn = scope[target]
+    else:
+        fn = target
+    # A Scalar's value arrives as a number, a Point's as [x, y], a Text's as a str, an Array's as {shape, values}.
+    def fill(a):
+        if not isinstance(a, _Slot):
+            return a
+        v = values[a.index]
+        if isinstance(v, str):
+            return v
+        if isinstance(v, dict):
+            import numpy as np
+            return np.array(v["values"]).reshape(v["shape"])
+        return tuple(float(c) for c in v) if isinstance(v, list) else float(v)
+    _lift_depth += 1
+    try:
+        result = fn(*map(fill, args), **{k: fill(v) for k, v in kwargs.items()})
+    finally:
+        _lift_depth -= 1
+    return _check_out_type_and_flatten(label, returns, result)
+
+def _is_number(v):
+    return isinstance(v, numbers.Real)
+
+def _check_out_type_and_flatten(name, returns, result):
+    """`result` as (shape, values): every number in row-major order, a Point as x, y. A Text's values: [the string]."""
+    kind, item = returns
+    if kind == "Text":
+        if not isinstance(result, str):
+            raise TypeError(f"{name} is lifted to pie.Text, so it must return a str, got {type(result).__name__}")
+        return [], [result]
+    if kind == "Scalar":
+        if not _is_number(result):
+            raise TypeError(f"{name} is lifted to pie.Scalar, so it must return a number, got {type(result).__name__}")
+        return [], [float(result)]
+    if kind == "Point":
+        if not (isinstance(result, (tuple, list)) and len(result) == 2 and all(map(_is_number, result))):
+            raise TypeError(f"{name} is lifted to pie.Point, so it must return a tuple or list of 2 numbers, got {type(result).__name__}")
+        return [], [float(c) for c in result]
+    lifted_to = f"lifted to pie.Array[pie.{item}]"
+    np = sys.modules.get("numpy")
+    if np is None or not isinstance(result, np.ndarray):
+        raise TypeError(f"{name} is {lifted_to}, so it must return a numpy array, got {type(result).__name__}")
+    if result.dtype.kind not in "biuf":
+        raise TypeError(f"{name} is {lifted_to}, so its array must hold numbers, got dtype {result.dtype}")
+    if item == "Point" and (result.ndim < 2 or result.shape[-1] != 2):
+        raise ValueError(f"{name} is {lifted_to}, so its array's shape must end in 2, with at least 2 dimensions, got {result.shape}")
+    if result.ndim < 1:
+        raise ValueError(f"{name} is {lifted_to}, so its array needs at least 1 dimension, got shape {result.shape}")
+    if result.size == 0:
+        raise ValueError(f"{name} returned an empty array, shape {result.shape}")
+    shape = result.shape[:-1] if item == "Point" else result.shape
+    return list(shape), result.astype(np.float64).ravel().tolist()
+
+def __getattr__(name):
+    if name.startswith("_"):
+        raise AttributeError(name)
+    def fn(*args, out=None, hidden=None, fill=None, stroke=None, animate=None):
+        return _call(name, args, out=out, hidden=hidden, fill=fill, stroke=stroke, animate=animate)
+    return fn

package/src/lib/python/py/pie_mpl.py

@@ -0,0 +1,15 @@
+# Matplotlib backend: `plt.show()` sends each open figure to the editor as a PNG, then closes it.
+import base64, io, sys
+import bridge
+from matplotlib._pylab_helpers import Gcf
+from matplotlib.backends.backend_agg import FigureCanvasAgg as FigureCanvas
+
+def show(*args, **kwargs):
+    # Text printed before the plot must reach the editor first.
+    sys.stdout.flush()
+    sys.stderr.flush()
+    for manager in Gcf.get_all_fig_managers():
+        buf = io.BytesIO()
+        manager.canvas.figure.savefig(buf, format="png")
+        bridge.plot(base64.b64encode(buf.getvalue()).decode())
+    Gcf.destroy_all()

package/src/lib/python/py/show_figures.py

@@ -0,0 +1,5 @@
+# Shows the figures a run left open, then closes them so they don't carry over to the next run.
+import sys
+if "matplotlib.pyplot" in sys.modules:
+    sys.modules["matplotlib.pyplot"].show()
+    sys.modules["matplotlib.pyplot"].close("all")

package/src/lib/python/runner.ts

@@ -0,0 +1,202 @@
+import type { NodeStore } from '~/lib/nodes/state/NodeStore';
+import { execute } from '~/lib/nodes/execute';
+import { getItem } from '~/lib/nodes/tensors/tensor';
+import { saveLift, startLift, type InputValue, type PyResult } from './lift';
+
+export type RunStatus = 'waiting' | 'loading' | 'running' | 'finished' | 'stopped' | 'killed';
+
+interface Run {
+  scope: PythonScope;
+  code: string;
+  onStatus: (status: RunStatus, error?: string) => void;
+  onOutput: (text: string) => void;
+  /** `png`: a matplotlib figure as a base64 PNG. */
+  onPlot: (png: string) => void;
+}
+
+let worker: Worker | undefined;
+let loaded = false;
+let active: Run | undefined;
+const queue: Run[] = [];
+let nextScopeId = 0;
+
+/** A request to rerun the `pie.lift`ed function of node `nodeId` with new input values. */
+interface Rerun {
+  scope: PythonScope;
+  nodeId: string;
+  values: InputValue[];
+  done: (result?: PyResult, error?: string) => void;
+}
+
+// Reruns waiting for the running block to end, by scope and node id. A newer request replaces a waiting one.
+const waitingReruns = new Map<string, Rerun>();
+// Reruns sent to the worker, by request id.
+const sentReruns = new Map<number, Rerun>();
+let nextRerunId = 0;
+
+const message = (err: unknown) => (err instanceof Error ? err.message : String(err));
+
+function onMessage(this: Worker, { data }: MessageEvent) {
+  const run = active;
+  if (data.type === 'loaded') {
+    loaded = true;
+    run?.onStatus('running');
+  }
+  if (data.type === 'call' || data.type === 'item' || data.type === 'lift') {
+    // A reply from before a kill must not reach the new worker.
+    const reply = (msg: { result?: unknown; error?: string }) => {
+      if (worker === this) this.postMessage({ type: 'reply', reqId: data.reqId, ...msg });
+    };
+    const store = run?.scope.store;
+    if (!store) {
+      reply({ error: 'this page has no canvas' });
+      return;
+    }
+    if (data.type === 'item') {
+      try {
+        reply({ result: getItem(store, data.arrayId, data.position) });
+      } catch (err) {
+        reply({ error: message(err) });
+      }
+      return;
+    }
+    if (data.type === 'lift') {
+      try {
+        reply({ result: startLift(store, data.name, data.inputIds, data.kind, data.out, data.fill, data.stroke) });
+      } catch (err) {
+        reply({ error: message(err) });
+      }
+      return;
+    }
+    execute(store, data.keyword, data.args, data.options).then(
+      (result) => reply({ result }),
+      (err) => reply({ error: message(err) }),
+    );
+  }
+  // No reply: Python doesn't wait for it.
+  if (data.type === 'lift_save') {
+    const scope = run?.scope;
+    try {
+      if (scope?.store) saveLift(scope.store, data, (nodeId, values, done) => scope.rerun(nodeId, values, done));
+    } catch (err) {
+      console.error(`${data.name}: ${message(err)}`);
+    }
+  }
+  if (data.type === 'rerun_done') {
+    const rerun = sentReruns.get(data.reqId);
+    sentReruns.delete(data.reqId);
+    rerun?.done(data.result, data.error);
+  }
+  if (data.type === 'output') {
+    run?.onOutput(data.text);
+  }
+  if (data.type === 'plot') {
+    run?.onPlot(data.png);
+  }
+  if (data.type === 'done') {
+    finish(data.error);
+  }
+}
+
+function startNext() {
+  if (active || queue.length === 0) return;
+  active = queue.shift()!;
+  if (!worker) {
+    worker = new Worker(new URL('./worker.ts', import.meta.url), { type: 'module' });
+    worker.onmessage = onMessage;
+    worker.onerror = (e) => finish(e.message || 'Python worker failed to start');
+  }
+  active.onStatus(loaded ? 'running' : 'loading');
+  worker.postMessage({ type: 'run', scope: active.scope.id, code: active.code });
+}
+
+function finish(error?: string) {
+  const run = active;
+  if (!run) return;
+  active = undefined;
+  // Pyodide failed to load: start a fresh worker next time instead of reusing the broken one.
+  if (!loaded) killWorker();
+  if (run.scope.disposed) worker?.postMessage({ type: 'dispose', scope: run.scope.id });
+  run.onStatus('finished', error);
+  sendReruns();
+  startNext();
+}
+
+/**
+ * Sends the waiting reruns, unless a block is running. After a kill they wait for the next worker,
+ * which answers that Python was restarted.
+ */
+function sendReruns() {
+  if (active || !worker) return;
+  for (const rerun of waitingReruns.values()) {
+    const reqId = nextRerunId++;
+    sentReruns.set(reqId, rerun);
+    worker.postMessage({ type: 'rerun', reqId, scope: rerun.scope.id, nodeId: rerun.nodeId, values: rerun.values });
+  }
+  waitingReruns.clear();
+}
+
+function killWorker() {
+  worker?.terminate();
+  worker = undefined;
+  loaded = false;
+  // Their replies will never come.
+  sentReruns.clear();
+}
+
+/** Kills Python. The running run and every queued run end as killed. */
+function killPython() {
+  killWorker();
+  const ended = [...(active ? [active] : []), ...queue];
+  active = undefined;
+  queue.length = 0;
+  for (const run of ended) run.onStatus('killed');
+}
+
+/** Runs that share Python variables, and the store their `pie.*` calls draw on. */
+export class PythonScope {
+  readonly id = String(nextScopeId++);
+  disposed = false;
+
+  /** `store`: where `pie.*` calls draw. Without it they fail with "this page has no canvas". */
+  constructor(readonly store?: NodeStore) {}
+
+  /** Queues `code`. Returns a stop function. `error` comes only with `finished`. */
+  run(code: string, onStatus: Run['onStatus'], onOutput: Run['onOutput'], onPlot: Run['onPlot']): () => void {
+    const run: Run = { scope: this, code, onStatus, onOutput, onPlot };
+    queue.push(run);
+    onStatus('waiting');
+    startNext();
+    
+    // The stop function (the editor's ■ button): drops the run if queued, kills Python if it's running.
+    return () => {
+      const at = queue.indexOf(run);
+      if (at !== -1) {
+        queue.splice(at, 1);
+        onStatus('stopped');
+      } else if (active === run) {
+        killPython();
+      }
+    };
+  }
+
+  /** Queues a rerun of node `nodeId`'s `pie.lift`ed function. It waits while a block runs. */
+  rerun(nodeId: string, values: InputValue[], done: Rerun['done']) {
+    if (this.disposed) return;
+    waitingReruns.set(`${this.id}/${nodeId}`, { scope: this, nodeId, values, done });
+    sendReruns();
+  }
+
+  /** Frees the variables. Call when the page goes away. */
+  dispose() {
+    this.disposed = true;
+    for (let i = queue.length - 1; i >= 0; i--) {
+      if (queue[i].scope === this) queue.splice(i, 1);
+    }
+    for (const [key, rerun] of waitingReruns) {
+      if (rerun.scope === this) waitingReruns.delete(key);
+    }
+    // A running run still uses the variables; `finish` frees them.
+    if (active?.scope !== this) worker?.postMessage({ type: 'dispose', scope: this.id });
+  }
+}

package/src/lib/python/worker.ts

@@ -0,0 +1,109 @@
+import PIE_PY from './py/pie.py?raw';
+import PIE_MPL_PY from './py/pie_mpl.py?raw';
+import SHOW_FIGURES from './py/show_figures.py?raw';
+import type { CallOptions } from '~/lib/nodes/execute';
+
+const BASE = 'https://cdn.jsdelivr.net/pyodide/v0.28.2/full/';
+
+const pending = new Map<number, { resolve: (v: unknown) => void; reject: (e: Error) => void }>();
+let next = 0;
+
+/** Posts `message` to the page and waits for its reply. */
+const request = (message: object) =>
+  new Promise((resolve, reject) => {
+    const reqId = next++;
+    pending.set(reqId, { resolve, reject });
+    postMessage({ ...message, reqId });
+  });
+
+const call = (keyword: string, args: unknown[], options: CallOptions) =>
+  request({ type: 'call', keyword, args, options });
+
+/** The node at `position` of an array's items. Creates nothing. */
+const item = (arrayId: string, position: number) => request({ type: 'item', arrayId, position });
+
+/** First half of `g(a)` for `g = pie.lift(f, ...)`: the input values and the output id. */
+const lift = (name: string, inputIds: string[], kind: string, out?: string, fill?: string, stroke?: string) =>
+  request({ type: 'lift', name, inputIds, kind, out, fill, stroke });
+
+/** Second half of `g(a)`: the first result. Python doesn't wait for a reply. */
+const lift_save = (save: object) => postMessage({ type: 'lift_save', ...save });
+
+const ready = (async () => {
+  const { loadPyodide } = await import(/* @vite-ignore */ `${BASE}pyodide.mjs`);
+  const py = await loadPyodide({ indexURL: BASE, env: { MPLBACKEND: 'module://pie_mpl' } });
+  py.setStdout({ batched: (text: string) => postMessage({ type: 'output', text: text + '\n' }) });
+  py.setStderr({ batched: (text: string) => postMessage({ type: 'output', text: text + '\n' }) });
+  py.registerJsModule('bridge', {
+    call, item, lift, lift_save, plot: (png: string) => postMessage({ type: 'plot', png }),
+  });
+  py.FS.writeFile('/home/pyodide/pie.py', PIE_PY);
+  py.FS.writeFile('/home/pyodide/pie_mpl.py', PIE_MPL_PY);
+  postMessage({ type: 'loaded' });
+  return py;
+})();
+
+// Scope id -> the Python globals its runs share. One scope per page.
+const scopes = new Map<string, any>();
+
+const message = (e: unknown) => (e instanceof Error ? e.message : String(e));
+
+self.onmessage = async ({ data }) => {
+  if (data.type === 'reply') {
+    const { resolve, reject } = pending.get(data.reqId)!;
+    pending.delete(data.reqId);
+    if (data.error !== undefined) reject(new Error(data.error));
+    else resolve(data.result);
+  }
+  if (data.type === 'run') {
+    let error: string | undefined;
+    try {
+      const py = await ready;
+      let globals = scopes.get(data.scope);
+      if (!globals) {
+        globals = py.globals.get('dict')();
+        py.runPython('import pie', { globals });
+        scopes.set(data.scope, globals);
+      }
+      // Downloads packages the code imports (numpy, scipy, matplotlib, ...) on first use.
+      await py.loadPackagesFromImports(data.code);
+      try {
+        await py.runPythonAsync(data.code, { globals });   // Async entry is required for run_sync
+      } catch (e) {
+        error = message(e);
+      }
+      // Runs after an error too, so figures drawn before it still show.
+      py.runPython(SHOW_FIGURES);
+    } catch (e) {
+      error ??= message(e);
+    }
+    postMessage({ type: 'done', error });
+  }
+  // The page sends reruns only between runs, so this never interleaves with a run.
+  if (data.type === 'rerun') {
+    let result: unknown;
+    let error: string | undefined;
+    try {
+      const py = await ready;
+      const globals = scopes.get(data.scope);
+      if (!globals) throw new Error("Python was restarted, so this node can't rerun. Run the block that made it again.");
+      const pie = py.pyimport('pie');
+      const values = py.toPy(data.values);
+      try {
+        const out = pie._rerun(globals, data.nodeId, values);
+        result = out.toJs({ dict_converter: Object.fromEntries });
+        out.destroy();
+      } finally {
+        values.destroy();
+        pie.destroy();
+      }
+    } catch (e) {
+      error = message(e);
+    }
+    postMessage({ type: 'rerun_done', reqId: data.reqId, result, error });
+  }
+  if (data.type === 'dispose') {
+    scopes.get(data.scope)?.destroy();
+    scopes.delete(data.scope);
+  }
+};

package/src/lib/site/vitePlugin.ts

@@ -0,0 +1,43 @@
+import path from 'node:path';
+import type { Plugin } from 'vite';
+import { parseKeyValues, readFields, text, type Values } from '../markdown/frontmatter';
+
+/** Every field `site.yml` can set. Keys not listed here are ignored. */
+const FIELDS = {
+  /** Shown in the header and in every browser tab title. */
+  title: text(''),
+};
+
+export type Site = Values<typeof FIELDS>;
+
+/** Reads `site.yml`. Throws, naming the file, on a bad line or a missing `title`. */
+function parseSite(file: string, yml: string): Site {
+  try {
+    const site = readFields(FIELDS, parseKeyValues(yml));
+    if (!site.title) throw new Error('`title` is required');
+    return site;
+  } catch (e) {
+    throw new Error(`${file}: ${(e as Error).message}`);
+  }
+}
+
+/**
+ * Turns the root `site.yml` into a module whose default export is a `Site`, at build time.
+ * Bad settings fail the build; in dev it shows Vite's error screen.
+ */
+export function siteConfig(): Plugin {
+  let root = '';
+
+  return {
+    name: 'site-config',
+    enforce: 'pre',
+    configResolved(config) {
+      root = config.root;
+    },
+    transform(yml, id) {
+      const file = path.relative(root, id.split('?')[0]);
+      if (file !== 'site.yml') return;
+      return { code: `export default ${JSON.stringify(parseSite(file, yml))};`, map: null };
+    },
+  };
+}

package/src/routes/[...slug].tsx

@@ -0,0 +1,38 @@
+import { createAsync, useParams } from '@solidjs/router';
+import { HttpStatusCode } from '@solidjs/start';
+import { Match, Switch } from 'solid-js';
+import 'katex/dist/katex.min.css';
+import { PageTitle } from '~/components/PageTitle';
+import { CanvasPage } from '~/lib/markdown/components/CanvasPage';
+import { MarkdownBody } from '~/lib/markdown/components/MarkdownBody';
+import { loadPage } from '~/lib/markdown/pages';
+
+export default function Page() {
+  const params = useParams();
+  const page = createAsync(() => loadPage(params.slug ?? ''));
+
+  // `undefined` while loading, `null` when there is no such page.
+  // Keyed: a new page gets a fresh canvas and fresh Python variables.
+  return (
+    <Switch>
+      <Match when={page() === null}>
+        <main>
+          <PageTitle>Page Not Found</PageTitle>
+          <HttpStatusCode code={404} />
+          <h1>Page Not Found</h1>
+        </main>
+      </Match>
+      <Match when={page()} keyed>
+        {(page) => {
+          const canvas = page.frontmatter.canvas;
+          return (
+            <>
+              <PageTitle>{page.frontmatter.title}</PageTitle>
+              {canvas === 'none' ? <MarkdownBody html={page.html} /> : <CanvasPage side={canvas} html={page.html} />}
+            </>
+          );
+        }}
+      </Match>
+    </Switch>
+  );
+}

package/src/routes/about.tsx

@@ -0,0 +1,10 @@
+import { PageTitle } from "~/components/PageTitle";
+
+export default function About() {
+  return (
+    <main>
+      <PageTitle>About</PageTitle>
+      <h1>About</h1>
+    </main>
+  );
+}

package/src/routes/index.tsx

@@ -0,0 +1,14 @@
+import { layout, type LayoutModules } from "~/lib/layouts/layout";
+
+// Shown when the site has no `layouts/index.tsx`.
+function Home() {
+  return (
+    <main>
+      <h1>pie-ssg</h1>
+      <h2>A Markdown-based SSG for interactive science explainers</h2>
+      <a href="/pages">Pages</a>
+    </main>
+  );
+}
+
+export default layout(import.meta.glob<LayoutModules[string]>("/layouts/index.tsx", { eager: true }), Home);