started workshop pages

packages/react/src/components/MiniRepl.jsx

@@ -20,10 +20,11 @@ export function MiniRepl({
   enableKeyboard,
   drawTime,
   punchcard,
+  span,
   canvasHeight = 200,
   theme,
 }) {
-  drawTime = drawTime || (punchcard ? [0, 4] : undefined);
+  drawTime = drawTime || (punchcard ? span || [0, 4] : undefined);
   const evalOnMount = !!drawTime;
   const drawContext = useCallback(
     !!drawTime ? (canvasId) => document.querySelector('#' + canvasId)?.getContext('2d') : null,

website/src/components/Box.astro

@@ -0,0 +1,10 @@
+---
+import LightBulbIcon from '@heroicons/react/20/solid/LightBulbIcon';
+//import MusicalNoteIcon from '@heroicons/react/20/solid/MusicalNoteIcon';
+---
+
+<div class="py-1 px-6 pr-10 bg-lineHighlight relative mb-4">
+  <div><slot /></div>
+  <LightBulbIcon className="w-5 h-5 absolute top-4 right-4" />
+  <!-- <MusicalNoteIcon className="w-5 h-5 absolute top-4 right-4" /> -->
+</div>

website/src/components/QA.tsx

@@ -0,0 +1,18 @@
+import ChevronDownIcon from '@heroicons/react/20/solid/ChevronDownIcon';
+import ChevronUpIcon from '@heroicons/react/20/solid/ChevronUpIcon';
+import { useState } from 'react';
+
+export default function QA({ children, q }) {
+  const [visible, setVisible] = useState(false);
+  return (
+    <div className="py-4 px-6 pr-10 bg-lineHighlight relative mb-4">
+      <div className="cursor-pointer" onClick={() => setVisible((v) => !v)}>
+        <div>{q}</div>
+        <a className="p-1 absolute top-4 right-4">
+          {visible ? <ChevronUpIcon className="w-5 h-5" /> : <ChevronDownIcon className="w-5 h-5" />}
+        </a>
+      </div>
+      {visible && <div>{children}</div>}
+    </div>
+  );
+}

website/src/config.ts

@@ -38,9 +38,16 @@ export const ALGOLIA = {
   apiKey: 'd5044f9d21b80e7721e5b0067a8730b1',
 };
 
-export type Sidebar = Record<(typeof KNOWN_LANGUAGE_CODES)[number], Record<string, { text: string; link: string }[]>>;
+export type SidebarLang = Record<string, { text: string; link: string }[]>;
+export type Sidebar = Record<(typeof KNOWN_LANGUAGE_CODES)[number], SidebarLang>;
 export const SIDEBAR: Sidebar = {
   en: {
+    Workshop: [
+      { text: 'Intro', link: 'workshop/intro' },
+      { text: 'First Sounds', link: 'workshop/first-sounds' },
+      { text: 'First Effects', link: 'workshop/first-effects' },
+      { text: 'Mini Notation', link: 'workshop/mini-notation' },
+    ],
     Tutorial: [
       { text: 'Getting Started', link: 'learn/getting-started' },
       { text: 'Notes', link: 'learn/notes' },

website/src/docs/MiniRepl.jsx

@@ -27,7 +27,7 @@ if (typeof window !== 'undefined') {
   prebake();
 }
 
-export function MiniRepl({ tune, drawTime, punchcard, canvasHeight = 100 }) {
+export function MiniRepl({ tune, drawTime, punchcard, span = [0, 4], canvasHeight = 100 }) {
   const [Repl, setRepl] = useState();
   const { theme } = useSettings();
   useEffect(() => {
@@ -44,6 +44,7 @@ export function MiniRepl({ tune, drawTime, punchcard, canvasHeight = 100 }) {
         hideOutsideView={true}
         drawTime={drawTime}
         punchcard={punchcard}
+        span={span}
         canvasHeight={canvasHeight}
         theme={themes[theme]}
       />

website/src/pages/workshop/first-effects.mdx

@@ -0,0 +1,62 @@
+---
+title: First Effects
+layout: ../../layouts/MainLayout.astro
+---
+
+import { MiniRepl } from '../../docs/MiniRepl';
+
+# First Effects
+
+**vowel**
+
+<MiniRepl client:load tune={`sound("drum drum drum drum").vowel("a o")`} />
+
+You can probably think of more vowels :)
+
+**gain**
+
+<MiniRepl client:load tune={`sound("bd hh sn:1 hh sn:1 hh").gain("1 .5 .2")`} />
+
+**control the gain with a sine wave**
+
+<MiniRepl client:load tune={`sound("hh*16").gain(sine)`} />
+
+Try also `saw`, `square`, `tri`
+
+**The 'structure' comes from the left - try swapping:**
+
+<MiniRepl client:load tune={`vowel("a o").sound("drum")`} />
+
+**speed of playback, e.g. 2 = double speed (up 1 octave)**
+
+<MiniRepl client:load tune={`speed("1 2 4").sound("jungbass:6")`} />
+
+<MiniRepl
+  client:load
+  tune={`sound("numbers:1 numbers:2 numbers:3 numbers:4")
+.speed("1 1.5 2 0.5")
+.slow(2)`}
+/>
+
+**set note**
+
+<MiniRepl client:load tune={`note("40 43 47").sound("jungbass:6")`} />
+
+**pan**
+
+<MiniRepl
+  client:load
+  tune={`sound("numbers:1 numbers:2 numbers:3 numbers:4")
+.pan("0 0.3 .6 1")
+.slow(2)`}
+/>
+
+<MiniRepl client:load tune={`sound("drum*8").pan(sine)`} />
+
+**delay**
+
+<MiniRepl client:load tune={`sound("bd sd").delay(".5:.1:.4")`} />
+
+**room**
+
+<MiniRepl client:load tune={`sound("bd sd").room(".5")`} />

website/src/pages/workshop/first-sounds.mdx

@@ -0,0 +1,207 @@
+---
+title: First Sounds
+layout: ../../layouts/MainLayout.astro
+---
+
+import { MiniRepl } from '@src/docs/MiniRepl';
+import Box from '@components/Box.astro';
+import QA from '@components/QA';
+
+# First Sounds
+
+## Make a Sound
+
+Let's start by making some noise:
+
+<MiniRepl client:visible tune={`sound("house")`} />
+
+<Box>
+
+1. press play button to start
+2. change `house` to `casio`
+3. press refresh button to update
+4. press stop button to stop
+
+</Box>
+
+Congratulations, you've played your first pattern!
+
+Instead of clicking update all the time, you can use keyboard shortcuts:
+
+<Box>
+
+1. click into the text field
+2. press `ctrl`+`enter` to play
+3. change `casio` to `crow`
+4. press `ctrl`+`enter` to update
+5. press `ctrl`+`.` to stop
+
+</Box>
+
+To play code like an instrument, these shortcuts should become second nature to you.
+
+**Try more Sounds**
+
+You can pick a different sample from the same set, with ':'
+
+<MiniRepl client:visible tune={`sound("east:1")`} />
+
+Try changing `east:1` to `east:2`
+
+Here are some more sound sets to try
+
+```
+casio control crow techno house jazz
+metal east jvbass juno insect space wind
+bd sd rim hh oh
+```
+
+<QA q="What does bd sd rim hh oh mean?" client:visible>
+
+- `bd` = **b**ass **d**rum
+- `sd` = **s**nare **d**rum
+- `sn` = **sn**are
+- `rim` = **rim**shot
+- `hh` = **h**i**h**at
+- `oh` = **o**pen **h**ihat
+
+</QA>
+
+## Sequences
+
+**Make a Sequence**
+
+<MiniRepl client:visible tune={`sound("bd hh sd hh:4")`} punchcard />
+
+Notice how the currently playing sound is highlighted in the code and also visualized below.
+
+<Box>
+
+Try adding more sounds to the sequence!
+
+</Box>
+
+**The longer the sequence, the faster it runs**
+
+<MiniRepl client:visible tune={`sound("bd bd hh bd sn bd hh bd")`} punchcard />
+
+The content of the sequence will be squished into one second, called a cycle.
+
+**One way to change the tempo is using `cpm`**
+
+<MiniRepl client:visible tune={`sound("bd bd hh bd sn bd hh bd").cpm(40)`} punchcard />
+
+<Box>
+
+cpm = cycles per minute
+
+By default, the tempo is 60 cycles per minute = 1 cycle per second.
+
+</Box>
+
+We will look at other ways to change the tempo later!
+
+**Add a rests in a sequence with '~'**
+
+<MiniRepl client:visible tune={`sound("bd hh ~ rim")`} punchcard />
+
+**Sub-Sequences with [brackets]**
+
+<MiniRepl client:visible tune={`sound("bd [hh hh] sn [hh bd]")`} punchcard />
+
+<Box>
+
+Try adding more sounds inside a bracket!
+
+</Box>
+
+Similar to the whole sequence, the content of a sub-sequence will be squished to the its own length.
+
+**Multiplication: Speed things up**
+
+<MiniRepl client:visible tune={`sound("bd hh*2 sn hh*3")`} punchcard />
+
+**Multiplication: Speeeeeeeeed things up**
+
+<MiniRepl client:visible tune={`sound("bd hh*16 sn hh*8")`} punchcard />
+
+<Box>
+
+Pitch = Really fast Rhythm
+
+</Box>
+
+**Sub-Sub-Sequences with [[brackets]]**
+
+<MiniRepl client:visible tune={`sound("bd [[hh sn] hh]")`} punchcard />
+
+**Play Sounds in parallel with comma**
+
+<MiniRepl client:visible tune={`sound("hh hh hh, bd casio")`} punchcard />
+
+<MiniRepl client:visible tune={`sound("hh hh hh, bd bd, ~ casio")`} punchcard />
+
+**Multiple Lines with backticks**
+
+<MiniRepl
+  client:visible
+  tune={`sound(\`hh*2 oh, 
+bd*2, [~ casio],
+[jvbass:0 jvbass:1] jvbass:1\`)`}
+  punchcard
+/>
+
+## Recap
+
+Now we've learned the basics of the so called Mini-Notation, the rhythm language of Tidal.
+This is what we've leared so far:
+
+| Concept           | Syntax     | Example                                                               |
+| ----------------- | ---------- | --------------------------------------------------------------------- |
+| Sequence          | space      | <MiniRepl client:visible tune={`sound("bd bd sn hh")`} />             |
+| Sample Number     | :x         | <MiniRepl client:visible tune={`sound("hh:0 hh:1 hh:2 hh:3")`} />     |
+| Rests             | ~          | <MiniRepl client:visible tune={`sound("metal ~ jazz jazz:1")`} />     |
+| Sub-Sequences     | \[ \]      | <MiniRepl client:visible tune={`sound("bd wind [metal jazz] hh")`} /> |
+| Sub-Sub-Sequences | \[ \[ \]\] | <MiniRepl client:visible tune={`sound("bd [metal [jazz sn]]")`} />    |
+| Speed up          | \*         | <MiniRepl client:visible tune={`sound("bd sn*2 cp*3")`} />            |
+| Parallel          | ,          | <MiniRepl client:visible tune={`sound("bd*2, hh*2 [hh oh]")`} />      |
+
+## Examples
+
+Imitation of a step sequencer:
+
+<MiniRepl
+  client:visible
+  tune={`sound(\`
+[~  ~  oh ~ ] [~  ~  ~  ~ ] [~  ~  ~  ~ ] [~  ~  ~  ~ ],
+[hh hh ~  ~ ] [hh ~  hh ~ ] [hh ~  hh ~ ] [hh ~  hh ~ ],
+[~  ~  ~  ~ ] [cp ~  ~  ~ ] [~  ~  ~  ~ ] [cp ~  ~  ~ ],
+[bd ~  ~  ~ ] [~  ~  ~  bd] [~  ~  bd ~ ] [~  ~  ~  bd]
+\`).cpm(90/4)`}
+  punchcard
+/>
+
+Shorter variant:
+
+<MiniRepl
+  client:visible
+  tune={`sound(\`
+[~  ~  oh ~ ] ~ ~ ~,
+[hh*2 ~] hh*2 hh*2 hh*2,
+[~ cp]*2,
+bd [~  ~  ~  bd] [~  bd] [~  ~  ~ bd]
+\`).cpm(90/4)`}
+/>
+
+Another beat:
+
+<MiniRepl
+  client:visible
+  tune={`sound(\`
+[~  ~  ~  ~ ] [~  ~  ~  ~ ] [~  ~  ~  ~ ] [~  ~  oh:1 ~ ],
+[hh hh hh hh] [hh hh hh hh] [hh hh hh hh] [hh hh ~  ~ ],
+[~  ~  ~  ~ ] [cp ~  ~  ~ ] [~  ~  ~  ~ ] [~  cp ~  ~ ],
+[bd bd ~  ~ ] [~  ~  bd ~ ] [bd bd ~ bd ] [~  ~  ~  ~ ]
+\`).bank("RolandTR808").slow(3)`}
+  punchcard
+/>

website/src/pages/workshop/index.astro

@@ -0,0 +1,3 @@
+<script is:inline>
+  window.location.pathname = `/workshop/intro`;
+</script>

website/src/pages/workshop/intro.mdx

@@ -0,0 +1,6 @@
+---
+title: Introduction
+layout: ../../layouts/MainLayout.astro
+---
+
+# Introduction

website/src/pages/workshop/langebank.mdx

@@ -0,0 +1,37 @@
+Everythings repeats once per second => 1 **c**ycle **p**er **s**econd (cps)
+
+**Change tempo**
+
+<MiniRepl
+  client:load
+  tune={`setcps(.5)
+sound("bd bd hh bd sn bd hh bd")`}
+  punchcard
+/>
+
+adding your own samples
+
+<MiniRepl
+  client:visible
+  tune={`sound(\`
+[~  ~  oh ~ ] [~  ~  ~  ~ ] [~  ~  ~  ~ ] [~  ~  ~  ~ ],
+[hh hh ~  ~ ] [hh ~  hh ~ ] [hh ~  hh ~ ] [hh ~  hh ~ ],
+[~  ~  ~  ~ ] [cp ~  ~  ~ ] [~  ~  ~  ~ ] [cp ~  ~  ~ ],
+[bd ~  ~  ~ ] [~  ~  ~  bd] [~  ~  bd ~ ] [~  ~  ~ bd ]
+\`).slow(3)`}
+  punchcard
+/>
+
+<MiniRepl
+  client:visible
+  tune={`sound(\`
+[~  ~  ~  ~ ] [~  ~  ~  ~ ] [~  ~  ~  ~ ] [~  ~  oh:1 ~ ],
+[hh hh hh hh] [hh hh hh hh] [hh hh hh hh] [hh hh ~  ~ ],
+[~  ~  ~  ~ ] [cp ~  ~  ~ ] [~  ~  ~  ~ ] [~  cp ~  ~ ],
+[bd bd ~  ~ ] [~  ~  bd ~ ] [bd bd ~ bd ] [~  ~  ~  ~ ]
+\`).bank("<RolandTR808 AkaiMPC60>").slow(3)`}
+  punchcard
+/>
+
+
+n(run(8)).sound("east")

website/src/pages/workshop/mini-notation.mdx

@@ -0,0 +1,69 @@
+---
+title: First Sounds
+layout: ../../layouts/MainLayout.astro
+---
+
+import { MiniRepl } from '../../docs/MiniRepl';
+
+# Mini Notation
+
+Mini Notation is everything between the quotes. It the short rhythm language of Tidal.
+
+## Cycles
+
+**The longer the sequence, the faster it runs**
+
+<MiniRepl client:load tune={`sound("bd bd hh bd sn bd hh bd")`} punchcard />
+
+**Play less sounds per cycle with \{curly braces\}**
+
+<MiniRepl client:load tune={`sound("{bd bd hh bd sn bd hh bd}%4")`} punchcard />
+
+**Use \`backticks\` for multiple lines**
+
+<MiniRepl
+  client:load
+  tune={`sound(\`{
+    bd bd hh bd 
+    sn bd hh bd
+    sn bd hh bd
+    sn bd hh hh:4
+}%4\`)`}
+  punchcard
+/>
+
+**Play one sounds per cycle with \<angle brackets\>**
+
+<MiniRepl client:load tune={`sound("<bd bd hh bd sn bd hh bd>")`} punchcard />
+
+This is the same as `{...}%1`
+
+## Operators
+
+**Multiplication: Speed things up**
+
+<MiniRepl client:load tune={`sound("bd hh*2 sn hh*2")`} punchcard />
+
+**Division: Slow things down**
+
+<MiniRepl client:load tune={`sound("bd/2 sd, hh*4")`} punchcard />
+
+`bd` will play only every second time
+
+## Combining it all
+
+**Speed up Sub-Sequences**
+
+<MiniRepl client:load tune={`sound("bd [sn hh]*2 sd hh")`} punchcard />
+
+**Slow down Sequences**
+
+<MiniRepl client:load tune={`sound("[bd [sn hh] sd hh]/2")`} punchcard />
+
+**Parallel Sub-Sequences**
+
+<MiniRepl client:load tune={`sound("bd [sn,hh] sd [hh:2,sn]")`} punchcard />
+
+**Sample Numbers on groups**
+
+<MiniRepl client:load tune={`sound("bd [sn,hh] sd [hh,sn]:2")`} punchcard />

website/src/repl/prebake.mjs

@@ -22,8 +22,8 @@ export async function prebake() {
       tag: 'drum-machines',
     }),
     samples(`./EmuSP12.json`, `./EmuSP12/`, { prebake: true, tag: 'drum-machines' }),
-    // samples('github:tidalcycles/Dirt-Samples/master'),
   ]);
+  await samples('github:tidalcycles/Dirt-Samples/master');
 }
 
 const maxPan = noteToMidi('C8');

website/tsconfig.json

@@ -7,6 +7,11 @@
     "noImplicitAny": false,
     "types": [
       "vite-plugin-pwa/client"
-    ]
+    ],
+    "baseUrl": ".",
+    "paths": {
+      "@components/*": ["src/components/*"],
+      "@src/*": ["src/*"],
+    }
   }
 }