minirepl multi tune support + add other getting-started examples (more to come)

website/src/docs/MiniRepl.jsx

@@ -1,8 +1,8 @@
 import { useState, useRef, useCallback, useMemo, useEffect } from 'react';
 import { Icon } from './Icon';
-import { silence, getPunchcardPainter, noteToMidi } from '@strudel/core';
+import { silence, getPunchcardPainter, noteToMidi, _mod } from '@strudel/core';
 import { transpiler } from '@strudel/transpiler';
-import { getAudioContext, webaudioOutput } from '@strudel/webaudio';
+import { getAudioContext, webaudioOutput, initAudioOnFirstClick } from '@strudel/webaudio';
 import { StrudelMirror } from '@strudel/codemirror';
 // import { prebake } from '@strudel/repl';
 import { prebake } from '../repl/prebake.mjs';
@@ -10,14 +10,16 @@ import { loadModules } from '../repl/util.mjs';
 import Claviature from '@components/Claviature';
 import useClient from '@src/useClient.mjs';
 
-let prebaked, modulesLoading;
+let prebaked, modulesLoading, audioLoading;
 if (typeof window !== 'undefined') {
   prebaked = prebake();
   modulesLoading = loadModules();
+  audioLoading = initAudioOnFirstClick();
 }
 
 export function MiniRepl({
-  tune: code,
+  tune,
+  tunes,
   hideHeader = false,
   canvasHeight = 100,
   onTrigger,
@@ -26,6 +28,7 @@ export function MiniRepl({
   claviature,
   claviatureLabels,
 }) {
+  const code = tunes ? tunes[0] : tune;
   const id = useMemo(() => s4(), []);
   const canvasId = useMemo(() => `canvas-${id}`, [id]);
   const shouldDraw = !!punchcard || !!claviature;
@@ -75,7 +78,7 @@ export function MiniRepl({
         }
         return pat;
       },
-      prebake: async () => Promise.all([modulesLoading, prebaked]),
+      prebake: async () => Promise.all([modulesLoading, prebaked, audioLoading]),
       onUpdateState: (state) => {
         setReplState({ ...state });
       },
@@ -91,6 +94,14 @@ export function MiniRepl({
   const containerRef = useRef();
   const client = useClient();
 
+  const [tuneIndex, setTuneIndex] = useState(0);
+  const changeTune = (index) => {
+    index = _mod(index, tunes.length);
+    setTuneIndex(index);
+    editorRef.current?.setCode(tunes[index]);
+    editorRef.current?.evaluate();
+  };
+
   if (!client) {
     return <pre>{code}</pre>;
   }
@@ -119,6 +130,28 @@ export function MiniRepl({
               <Icon type="refresh" />
             </button>
           </div>
+          {tunes && (
+            <div className="flex">
+              <button
+                className={
+                  'cursor-pointer w-16 flex items-center justify-center p-1 border-r border-lineHighlight text-foreground bg-lineHighlight hover:bg-background'
+                }
+                onClick={() => changeTune(tuneIndex - 1)}
+              >
+                <div className="rotate-180">
+                  <Icon type="skip" />
+                </div>
+              </button>
+              <button
+                className={
+                  'cursor-pointer w-16 flex items-center justify-center p-1 border-r border-lineHighlight text-foreground bg-lineHighlight hover:bg-background'
+                }
+                onClick={() => changeTune(tuneIndex + 1)}
+              >
+                <Icon type="skip" />
+              </button>
+            </div>
+          )}
         </div>
       )}
       <div className="overflow-auto relative p-1">