move /my-patterns to /swatch (#338)

website/src/pages/swatch/[name].png.js

@@ -0,0 +1,29 @@
+import { createCanvas } from 'canvas';
+import { pianoroll } from '@strudel.cycles/core';
+import { evaluate } from '@strudel.cycles/transpiler';
+import '../../../../test/runtime.mjs';
+import { getMyPatterns } from './list.json';
+
+export async function get({ params, request }) {
+  const patterns = await getMyPatterns();
+  const { name } = params;
+  const tune = patterns[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 async function getStaticPaths() {
+  const patterns = await getMyPatterns();
+  return Object.keys(patterns).map((name) => ({
+    params: {
+      name,
+    },
+  }));
+}

website/src/pages/swatch/index.astro

@@ -0,0 +1,32 @@
+---
+import { getMyPatterns } from './list.json';
+
+import { Content } from '../../../../my-patterns/README.md';
+
+const myPatterns = await getMyPatterns();
+---
+
+<body class="bg-slate-800">
+  {
+    Object.keys(myPatterns).length === 0 && (
+      <div class="prose prose-invert p-2">
+        <Content />
+      </div>
+    )
+  }
+  <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-2 p-2 select-none">
+    {
+      Object.entries(myPatterns).map(([name, tune]) => (
+        <a
+          class="rounded-md bg-slate-900 hover:bg-slate-700 cursor-pointer relative"
+          href={`../#${btoa(tune as string)}`}
+        >
+          <div class="absolute w-full h-full flex justify-center items-center">
+            <span class="bg-slate-800 p-2 rounded-md text-white">{name}</span>
+          </div>
+          <img src={`./${name}.png`} />
+        </a>
+      ))
+    }
+  </div>
+</body>

website/src/pages/swatch/list.json.js

@@ -0,0 +1,15 @@
+export function getMyPatterns() {
+  const my = import.meta.glob('../../../../my-patterns/**', { as: 'raw', eager: true });
+  return Object.fromEntries(
+    Object.entries(my) //
+      .filter(([name]) => name.endsWith('.txt')) //
+      .map(([name, raw]) => [name.split('/').slice(-1), raw]), //
+  );
+}
+
+export async function get() {
+  const all = await getMyPatterns();
+  return {
+    body: JSON.stringify(all),
+  };
+}