integrate repl into astro website

+ update build and setup tasks + workflow
+ move repl test folder to root
+ move docs and repl to website/src

website/src/docs/JsDoc.astro

@@ -0,0 +1,6 @@
+---
+import { JsDoc } from './JsDoc';
+const { name, h } = Astro.props;
+---
+
+<JsDoc name={name} h={h} client:only="react" />

website/src/docs/JsDoc.jsx

@@ -0,0 +1,39 @@
+import jsdoc from '../../../doc.json'; // doc.json is built with `npm run jsdoc-json`
+const docs = jsdoc.docs.reduce((acc, obj) => Object.assign(acc, { [obj.longname]: obj }), {});
+import { MiniRepl } from './MiniRepl';
+
+export function JsDoc({ name, h = 3 }) {
+  const item = docs[name];
+  if (!item) {
+    console.warn('Not found: ' + name);
+    return <div />;
+  }
+  const CustomHeading = `h${h}`;
+  const description = item.description.replaceAll(/\{@link ([a-zA-Z\.]+)?#?([a-zA-Z]*)\}/g, (_, a, b) => {
+    // console.log(_, 'a', a, 'b', b);
+    return `<a href="#${a.replaceAll('.', '').toLowerCase()}${b ? `-${b}` : ''}">${a}${b ? `#${b}` : ''}</a>`;
+  });
+  return (
+    <>
+      {!!h && <CustomHeading>{item.longname}</CustomHeading>}
+      <div dangerouslySetInnerHTML={{ __html: description }} />
+      <ul>
+        {item.params?.map((param, i) => (
+          <li key={i}>
+            {param.name} ({param.type?.names?.join('|')}): {param.description?.replace(/(<([^>]+)>)/gi, '')}
+          </li>
+        ))}
+      </ul>
+
+      {item.examples?.length ? (
+        <div className="space-y-2">
+          {item.examples?.map((example, k) => (
+            <MiniRepl tune={example} key={k} />
+          ))}
+        </div>
+      ) : (
+        <div />
+      )}
+    </>
+  );
+}

website/src/docs/MiniRepl.astro

@@ -0,0 +1,7 @@
+---
+import { MiniRepl } from './MiniRepl';
+const { tune } = Astro.props;
+import '@strudel.cycles/react/dist/style.css';
+---
+
+<MiniRepl tune={tune} client:only="react" />

website/src/docs/MiniRepl.jsx

@@ -0,0 +1,33 @@
+import { evalScope, controls } from '@strudel.cycles/core';
+import { samples } from '@strudel.cycles/webaudio';
+import { useEffect, useState } from 'react';
+
+if (typeof window !== 'undefined') {
+  fetch('https://strudel.tidalcycles.org/EmuSP12.json')
+    .then((res) => res.json())
+    .then((json) => samples(json, 'https://strudel.tidalcycles.org/EmuSP12/'));
+
+  evalScope(
+    controls,
+    import('@strudel.cycles/core'),
+    // import('@strudel.cycles/tone'),
+    import('@strudel.cycles/tonal'),
+    import('@strudel.cycles/mini'),
+    import('@strudel.cycles/midi'),
+    import('@strudel.cycles/xen'),
+    import('@strudel.cycles/webaudio'),
+    import('@strudel.cycles/osc'),
+  );
+}
+
+export function MiniRepl({ tune }) {
+  const [Repl, setRepl] = useState();
+  useEffect(() => {
+    // we have to load this package on the client
+    // because codemirror throws an error on the server
+    import('@strudel.cycles/react').then((res) => {
+      setRepl(() => res.MiniRepl);
+    });
+  }, []);
+  return Repl ? <Repl tune={tune} hideOutsideView={true} /> : <pre>{tune}</pre>;
+}