move stuff around + mini notation slide

iclc2023/slides/src/Highlight.jsx

@@ -8,7 +8,7 @@ import hs from 'react-syntax-highlighter/dist/esm/languages/hljs/haskell';
 SyntaxHighlighter.registerLanguage('javascript', js);
 SyntaxHighlighter.registerLanguage('haskell', hs);
 
-function Highlight({ code, language }) {
+function Highlight({ code, language = 'javascript' }) {
   return (
     <div className="text-[32px] leading-10 rounded-xl overflow-hidden">
       <SyntaxHighlighter language={language} style={atomOneDark} customStyle={{ padding: '8px 10px' }}>

iclc2023/slides/src/Slides.jsx

@@ -21,12 +21,18 @@ const order = [
   'whatIsStrudel',
   'history',
   'hs2js',
-  'mini-comparison',
   'patterns-events',
-  'events-audio',
-  'transpilation',
+  'events-audio', // outputs
+  'outputs',
+  //
   'replflow',
-  'systems',
+  'transpilation',
+  'mininotation',
+  'mini-comparison',
+  // scheduling?
+  // pattern alignment?
+  // flexible typing?
+  // future outlook?
 ];
 
 const slideEntries = order.map((name) => loadedMDXFiles.find(([file]) => file === name));

iclc2023/slides/src/TranspilationDemo.jsx

@@ -66,28 +66,12 @@ function TranspilationDemo() {
     <div className="not-prose space-y-8">
       <Stepper
         steps={[
-          <>
-            <ul className="list-decimal pl-8">
-              <li>Enter JS Code</li>
-              <li>Parse JS Code with acorn to get AST</li>
-              <li>Modify AST with estree-walker</li>
-              <li>Convert modified AST back to JS with escodegen</li>
-            </ul>
-          </>,
+          <ul className="list-decimal pl-8">
+            <li>Parse JS Code with acorn to get AST</li>
+            <li>Modify AST with estree-walker</li>
+            <li>Convert modified AST back to JS with escodegen</li>
+          </ul>,
           <TranspilationEditor code={`"bd [hh sd]"`} />,
-          <div className="space-y-2 py-2">
-            <span>⬇️ calls</span>
-            <Highlight
-              code={`seq(
-  reify('bd').withLocation([1,1,1], [1,4,4]),
-  seq(
-    reify('hh').withLocation([1,5,5], [1,8,8]),
-    reify('sd').withLocation([1,8,8], [1,10,10]),
-  )
-).withMiniLocation([1,0,0],[1,12,12])`}
-            />
-            <span>➡️ location can be used for highlighting</span>
-          </div>,
         ]}
       />
     </div>

iclc2023/slides/src/slides/mininotation.mdx

@@ -0,0 +1,27 @@
+import Highlight from '../Highlight';
+import Stepper from '../Stepper';
+
+# User Code: Mini Notation
+
+<Stepper
+  steps={[
+    <ul className="list-decimal pl-8">
+      <li>Parse Mini Notation to get AST</li>
+      <li>walk AST and construct function calls</li>
+    </ul>,
+    <div className="space-y-2 py-2">
+      <Highlight code={`mini('bd [hh sd]')`} />
+      <span>⬇️ resulting calls</span>
+      <Highlight
+        code={`seq(
+  reify('bd').withLocation([1,1,1], [1,4,4]),
+  seq(
+    reify('hh').withLocation([1,5,5], [1,8,8]),
+    reify('sd').withLocation([1,8,8], [1,10,10]),
+  )
+)`}
+      />
+      <span>➡️ location can be used for highlighting</span>
+    </div>,
+  ]}
+/>

iclc2023/slides/src/slides/outputs.mdx

@@ -0,0 +1,7 @@
+# Ways to make Sound
+
+- Default: Web Audio API
+- OSC via osc-js, compatible with superdirt
+- Csound via the Csound WebAssembly build
+- MIDI via WebMIDI
+- Serial via WebSerial

iclc2023/slides/src/slides/replflow.mdx

@@ -1,3 +1,5 @@
 # REPL
 
-![replflow](./img/strudelflow.png)
+<center>
+  <img src="./img/strudelflow.png" className="w-[900px]" />
+</center>

iclc2023/slides/src/slides/systems.mdx

@@ -1,5 +0,0 @@
-# Systems Comparison
-
-tidal: keyboard -> editor -> tidal plugin -> superdirt -> supercollider -> speakers
-
-strudel: keyboard -> repl -> speakers

iclc2023/slides/src/slides/transpilation.mdx

@@ -1,5 +1,5 @@
 import TranspilationDemo from '../TranspilationDemo';
 
-# Transpilation
+# User Code: Transpilation
 
 <TranspilationDemo />