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

website/src/docs/Icon.jsx

@@ -1,4 +1,12 @@
 export function Icon({ type }) {
+  if (type === 'skip') {
+    // !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.
+    return (
+      <svg fillRule="evenodd"  fill="currentColor" xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512">
+        <path d="M52.5 440.6c-9.5 7.9-22.8 9.7-34.1 4.4S0 428.4 0 416V96C0 83.6 7.2 72.3 18.4 67s24.5-3.6 34.1 4.4l192 160L256 241V96c0-17.7 14.3-32 32-32s32 14.3 32 32V416c0 17.7-14.3 32-32 32s-32-14.3-32-32V271l-11.5 9.6-192 160z" />
+      </svg>
+    );
+  }
   return (
     <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
       {
@@ -31,6 +39,13 @@ export function Icon({ type }) {
               clipRule="evenodd"
             />
           ),
+          skip: (
+            <path
+              fillRule="evenodd"
+              d="M52.5 440.6c-9.5 7.9-22.8 9.7-34.1 4.4S0 428.4 0 416V96C0 83.6 7.2 72.3 18.4 67s24.5-3.6 34.1 4.4l192 160L256 241V96c0-17.7 14.3-32 32-32s32 14.3 32 32V416c0 17.7-14.3 32-32 32s-32-14.3-32-32V271l-11.5 9.6-192 160z"
+              clipRule="evenodd"
+            />
+          ),
         }[type]
       }
     </svg>

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">