improve query demo + headings

iclc2023/slides/src/MiniComparison.jsx

@@ -14,7 +14,11 @@ function MiniComparison() {
   const [step, setStep] = useState(1);
   return (
     <>
-      <h1>From Mini Notation to JavaScript</h1>
+      <h1>
+        Mini Notation -&gt; JavaScript
+        <br />
+        <small>External DSL</small>
+      </h1>
       <div className="not-prose">
         {snippets.slice(0, step).map(([a, b, label], i) => {
           const isActive = i === step - 1;

iclc2023/slides/src/QueryDemo.jsx

@@ -0,0 +1,45 @@
+import { SlideRepl } from './SlideRepl.jsx';
+import Highlight from './Highlight.jsx';
+import { useState } from 'react';
+
+const snippets = [
+  [<SlideRepl tune={`sound("bd [hh sd]").crush(4).log()`} hideHeader />, 'Logging Events'],
+  [
+    <>
+      <Highlight
+        code={`sound("bd [hh sd]").crush(4) // pattern
+.queryArc(0, 1)`}
+        language="javascript"
+      />
+      <Highlight
+        language="json"
+        code={`[
+  "0/1 -> 1/2 | sound:bd", 
+  "1/2 -> 3/4 | sound:hh", 
+  "3/4 -> 1/1 | sound:sd"
+]`}
+      />
+    </>,
+    'Querying Events Manually',
+  ],
+];
+
+function QueryDemo() {
+  const [step, setStep] = useState(1);
+  return (
+    <div className="not-prose">
+      {snippets.slice(0, step).map(([snippet, label], i) => {
+        const isActive = i === step - 1;
+        return (
+          <div key={i} className={`border-l-4 pl-8 border-gray-500 py-4 ${isActive ? 'p-4 border-yellow-500' : ''}`}>
+            <h3 className="pb-4">{label}</h3>
+            {snippet}
+          </div>
+        );
+      })}
+      {step < snippets.length && <button onClick={() => setStep((r) => r + 1)}>next</button>}
+    </div>
+  );
+}
+
+export default QueryDemo;

iclc2023/slides/src/SyntaxComparison.jsx

@@ -43,6 +43,11 @@ function SyntaxComparison() {
   const [step, setStep] = useState(1);
   return (
     <>
+      <h1>
+        Haskell -&gt; JavaScript
+        <br />
+        <small>Internal DSL / Fluent Interface</small>
+      </h1>
       <div className=" not-prose justify-start items-start">
         {/* <div className="grid grid-cols-2">
           <div>Tidal</div>
@@ -51,10 +56,7 @@ function SyntaxComparison() {
         {snippets.slice(0, step).map(([hs, js, label], i) => {
           const isActive = i === step - 1;
           return (
-            <div
-              key={i}
-              className={`border-l-4 pl-8 border-gray-500 py-4 ${isActive ? 'p-4 border-yellow-500' : ''}`}
-            >
+            <div key={i} className={`border-l-4 pl-8 border-gray-500 py-4 ${isActive ? 'p-4 border-yellow-500' : ''}`}>
               <h3 className="pb-4">{label}</h3>
               <div>
                 <div className="flex space-x-4">

iclc2023/slides/src/slides/02-1.mdx

@@ -1,3 +1,3 @@
-# TidalCycles Port
+# Haskell -> Python -> JavaScript
 
 ![ports](./img/ports.png)

iclc2023/slides/src/slides/02-2.mdx

@@ -1,5 +1,3 @@
 import SyntaxComparison from '../SyntaxComparison.jsx';
 
-# From Haskell to JavaScript
-
 <SyntaxComparison />

iclc2023/slides/src/slides/02-3.mdx

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

iclc2023/slides/src/slides/events-audio.mdx

@@ -2,6 +2,6 @@ import { SlideRepl } from '../SlideRepl.jsx';
 import Highlight from '../Highlight.jsx';
 import EventsDemo from '../EventsDemo.jsx';
 
-# From Values to Sound
+# Webaudio Output: Values -> Sound
 
 <EventsDemo />

iclc2023/slides/src/slides/patterns-events.mdx

@@ -1,18 +1,5 @@
-import { SlideRepl } from '../SlideRepl.jsx';
-import Highlight from '../Highlight.jsx';
+import QueryDemo from '../QueryDemo.jsx';
 
-# From Patterns to Events
+# Patterns -> Events
 
-<SlideRepl tune={`sound("bd [hh sd]").log()`} hideHeader punchcard />
-
-query = get events within time arc. event = time + value
-
-<Highlight code={`sound("bd [hh sd]").queryArc(0, 1)`} language="javascript" />
-
-```plaintext
-[
-  "0/1 -> 1/2 | sound:bd",
-  "1/2 -> 3/4 | sound:hh",
-  "3/4 -> 1/1 | sound:sd",
-]
-```
+<QueryDemo />