add examples page with prerendered swatches

website/src/pages/img/example-[name].png.js

@@ -0,0 +1,27 @@
+import { createCanvas } from 'canvas';
+import { pianoroll } from '@strudel.cycles/core';
+import { evaluate } from '@strudel.cycles/transpiler';
+import '../../../../test/runtime.mjs';
+import * as tunes from '../../repl/tunes.mjs';
+
+export async function get({ params, request }) {
+  const { name } = params;
+  const tune = tunes[name];
+  const { pattern } = await evaluate(tune);
+  const haps = pattern.queryArc(0, 4);
+  const canvas = createCanvas(800, 800);
+  const ctx = canvas.getContext('2d');
+  pianoroll({ time: 4, haps, ctx, playhead: 1, fold: 1, background: 'transparent', playheadColor: 'transparent' });
+  const buffer = canvas.toBuffer('image/png');
+  return {
+    body: buffer,
+    encoding: 'binary',
+  };
+}
+export function getStaticPaths() {
+  return Object.keys(tunes).map((name) => ({
+    params: {
+      name,
+    },
+  }));
+}