diff --git a/iclc2023/slides/package.json b/iclc2023/slides/package.json index d377696ff..5bbfa0c8a 100644 --- a/iclc2023/slides/package.json +++ b/iclc2023/slides/package.json @@ -12,14 +12,17 @@ "@mdx-js/rollup": "^2.3.0", "@nanostores/persistent": "^0.7.0", "@nanostores/react": "^0.4.1", + "@strudel.cycles/core": "workspace:*", + "@strudel.cycles/react": "workspace:*", + "@strudel.cycles/soundfonts": "workspace:*", + "@strudel.cycles/tonal": "workspace:*", + "@strudel.cycles/webaudio": "workspace:*", + "@uiw/codemirror-themes-all": "^4.19.8", "nanostores": "^0.7.4", "react": "^18.2.0", "react-dom": "^18.2.0", - "@strudel.cycles/react": "workspace:*", - "@strudel.cycles/core": "workspace:*", - "@strudel.cycles/tonal": "workspace:*", - "@strudel.cycles/webaudio": "workspace:*", - "@strudel.cycles/soundfonts": "workspace:*" + "react-syntax-highlighter": "^15.5.0", + "remark-gfm": "^3.0.1" }, "devDependencies": { "@tailwindcss/typography": "^0.5.8", diff --git a/iclc2023/slides/public/img/haskell.png b/iclc2023/slides/public/img/haskell.png new file mode 100644 index 000000000..c41182f7d Binary files /dev/null and b/iclc2023/slides/public/img/haskell.png differ diff --git a/iclc2023/slides/public/img/js.jpg b/iclc2023/slides/public/img/js.jpg new file mode 100644 index 000000000..6c3b56670 Binary files /dev/null and b/iclc2023/slides/public/img/js.jpg differ diff --git a/iclc2023/slides/public/img/ports.png b/iclc2023/slides/public/img/ports.png new file mode 100644 index 000000000..a179accef Binary files /dev/null and b/iclc2023/slides/public/img/ports.png differ diff --git a/iclc2023/slides/public/img/strudelflow.png b/iclc2023/slides/public/img/strudelflow.png new file mode 100644 index 000000000..72cdf494b Binary files /dev/null and b/iclc2023/slides/public/img/strudelflow.png differ diff --git a/iclc2023/slides/src/Highlight.jsx b/iclc2023/slides/src/Highlight.jsx new file mode 100644 index 000000000..bf366c877 --- /dev/null +++ b/iclc2023/slides/src/Highlight.jsx @@ -0,0 +1,17 @@ +import SyntaxHighlighter from 'react-syntax-highlighter'; +import { atomOneDark } from 'react-syntax-highlighter/dist/esm/styles/hljs'; + +Object.assign(atomOneDark.hljs, { padding: '10px' }); + +function Highlight({ code, language }) { + console.log('atomOneDark', atomOneDark); + return ( +
+ + {code} + +
+ ); +} + +export default Highlight; diff --git a/iclc2023/slides/src/SlideRepl.jsx b/iclc2023/slides/src/SlideRepl.jsx index 167bf26ca..9a92b0cdc 100644 --- a/iclc2023/slides/src/SlideRepl.jsx +++ b/iclc2023/slides/src/SlideRepl.jsx @@ -2,8 +2,7 @@ import { evalScope, controls } from '@strudel.cycles/core'; import { initAudioOnFirstClick } from '@strudel.cycles/webaudio'; import { MiniRepl as _MiniRepl } from '@strudel.cycles/react'; import { prebake } from './prebake'; -//import { themes } from '../repl/themes.mjs'; -// import { useSettings } from '../settings.mjs'; +import { atomone } from '@uiw/codemirror-themes-all'; if (typeof window !== 'undefined') { await evalScope( @@ -21,17 +20,19 @@ if (typeof window !== 'undefined') { prebake(); } -export function SlideRepl({ tune, drawTime, punchcard, canvasHeight = 100 }) { +export function SlideRepl({ tune, drawTime, punchcard, canvasHeight = 100, hideHeader = false }) { // const { theme } = useSettings(); return (
<_MiniRepl + hideHeader={hideHeader} tune={tune} hideOutsideView={true} drawTime={drawTime} punchcard={punchcard} canvasHeight={canvasHeight} fontSize={32} + theme={atomone} // theme={themes[theme]} />
diff --git a/iclc2023/slides/src/Slides.jsx b/iclc2023/slides/src/Slides.jsx index 9cfbaf0ba..33076325b 100644 --- a/iclc2023/slides/src/Slides.jsx +++ b/iclc2023/slides/src/Slides.jsx @@ -16,7 +16,7 @@ const loadedMDXFiles = await Promise.all( }), ); -const order = ['01', '02']; +const order = ['01', '02-0', '02-1', '02-2', '03']; const slideEntries = order.map((name) => loadedMDXFiles.find(([file]) => file === name)); @@ -39,13 +39,13 @@ function Slides() { next(); } }); - useEvent('keydown', (e) => { + /*useEvent('keydown', (e) => { if (e.key === 'Home') { prev(); } else if (e.key === 'End') { next(); } - }); + });*/ return (
@@ -58,7 +58,7 @@ function Slides() { i > activeIndex && 'translate-x-full', )} > -
+
diff --git a/iclc2023/slides/src/SyntaxComparison.jsx b/iclc2023/slides/src/SyntaxComparison.jsx new file mode 100644 index 000000000..95d851c51 --- /dev/null +++ b/iclc2023/slides/src/SyntaxComparison.jsx @@ -0,0 +1,74 @@ +import { useState } from 'react'; +import { SlideRepl } from './SlideRepl.jsx'; +import Highlight from './Highlight.jsx'; + +const snippets = [ + [`sound "bd ~ [sd cp]"`, [`sound("bd ~ [sd cp]")`], 'Mini Notation'], // + [`sound "bd ~ [sd cp]" # speed "1 2"`, [`sound("bd ~ [sd cp]").speed("1 2")`], 'Composing Patterns'], + [ + `fast 2 $ sound "bd ~ [sd cp]"`, + [`fast(2, sound("bd ~ [sd cp]"))`, `sound("bd ~ [sd cp]").fast(2)`], + 'Patterns Transformations', + ], + [ + `speed "1 2 3" + "4 5" # s "bd"`, + ['speed("1 2 3".add("4 5")).s("bd")', '"1 2 3".add("4 5").speed().s("bd")'], + 'Pattern Arithmetic', + ], + [ + `jux rev + $ every 3 (fast 2) + $ sound "bd sd"`, + [ + `sound("bd sd") + .every(3, fast(2)) + .jux(rev)`, + ], + ], + [ + `jux rev + $ every "<3 5>" (fast "1 2") + $ sound "bd sd cp mt"`, + [ + `sound("bd sd cp mt") + .every("<3 5>", fast("1 2")) + .jux(rev)`, + ], + ], +]; + +function SyntaxComparison() { + const [step, setStep] = useState(1); + return ( + <> +
+ {/*
+
Tidal
+
Strudel
+
*/} + {snippets.slice(0, step).map(([hs, js, label], i) => ( +
+

{label}

+
+
+ + +
+
+ {js.map((c) => ( +
+ + +
+ ))} +
+
+
+ ))} +
+ {step < snippets.length && } + + ); +} + +export default SyntaxComparison; diff --git a/iclc2023/slides/src/prebake.mjs b/iclc2023/slides/src/prebake.mjs index 5e37fe9c2..946dfa3f5 100644 --- a/iclc2023/slides/src/prebake.mjs +++ b/iclc2023/slides/src/prebake.mjs @@ -15,6 +15,7 @@ export async function prebake() { }), samples(`./EmuSP12.json`, `./EmuSP12/`, { prebake: true, tag: 'drum-machines' }), */ // samples('github:tidalcycles/Dirt-Samples/master'), + samples('github:tidalcycles/Dirt-Samples/master'), ]); } /* diff --git a/iclc2023/slides/src/slides/01.mdx b/iclc2023/slides/src/slides/01.mdx index 63879d49b..52cd13981 100644 --- a/iclc2023/slides/src/slides/01.mdx +++ b/iclc2023/slides/src/slides/01.mdx @@ -1 +1,5 @@ +import { SlideRepl } from '../SlideRepl.jsx'; + # Strudel + + diff --git a/iclc2023/slides/src/slides/02-0.mdx b/iclc2023/slides/src/slides/02-0.mdx new file mode 100644 index 000000000..36401c234 --- /dev/null +++ b/iclc2023/slides/src/slides/02-0.mdx @@ -0,0 +1,6 @@ +# What is Strudel + +- a port of Tidal Cycles to JavaScript +- a browser based editor for zero-install live coding: [strudel.tidalcycles.org](https://strudel.tidalcycles.org) +- multiple outputs: Web Audio, OSC, MIDI, ... +- "Strudel" = internationally known as delicious pastry, but also "swirl" / "whirlpool" in german (a tidal can cause a whirlpool!) diff --git a/iclc2023/slides/src/slides/02-1.mdx b/iclc2023/slides/src/slides/02-1.mdx new file mode 100644 index 000000000..e8db1d394 --- /dev/null +++ b/iclc2023/slides/src/slides/02-1.mdx @@ -0,0 +1,3 @@ +# TidalCycles Port + +![ports](./img/ports.png) \ No newline at end of file diff --git a/iclc2023/slides/src/slides/02-2.mdx b/iclc2023/slides/src/slides/02-2.mdx new file mode 100644 index 000000000..3e644abbd --- /dev/null +++ b/iclc2023/slides/src/slides/02-2.mdx @@ -0,0 +1,5 @@ +import SyntaxComparison from '../SyntaxComparison.jsx'; + +# Syntax Comparison + + diff --git a/iclc2023/slides/src/slides/02.mdx b/iclc2023/slides/src/slides/02.mdx deleted file mode 100644 index 637164d6a..000000000 --- a/iclc2023/slides/src/slides/02.mdx +++ /dev/null @@ -1,5 +0,0 @@ -import { SlideRepl } from '../SlideRepl.jsx'; - -# What is Strudel - - diff --git a/iclc2023/slides/src/slides/03.mdx b/iclc2023/slides/src/slides/03.mdx new file mode 100644 index 000000000..216af1557 --- /dev/null +++ b/iclc2023/slides/src/slides/03.mdx @@ -0,0 +1,3 @@ +# REPL + +![replflow](./img/strudelflow.png) diff --git a/iclc2023/slides/vite.config.js b/iclc2023/slides/vite.config.js index 9c27be08c..57e81ade2 100644 --- a/iclc2023/slides/vite.config.js +++ b/iclc2023/slides/vite.config.js @@ -1,8 +1,15 @@ import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import mdx from '@mdx-js/rollup'; +import gfm from 'remark-gfm'; + +const options = { + // See https://mdxjs.com/advanced/plugins + remarkPlugins: [gfm], + rehypePlugins: [], +}; // https://vitejs.dev/config/ export default defineConfig({ - plugins: [react(), mdx()], + plugins: [react(), mdx(options)], }); diff --git a/packages/react/src/components/MiniRepl.jsx b/packages/react/src/components/MiniRepl.jsx index c469bb124..731e51d8d 100644 --- a/packages/react/src/components/MiniRepl.jsx +++ b/packages/react/src/components/MiniRepl.jsx @@ -22,6 +22,7 @@ export function MiniRepl({ punchcard, canvasHeight = 200, fontSize = 18, + hideHeader = false, theme, }) { drawTime = drawTime || (punchcard ? [0, 4] : undefined); @@ -110,33 +111,35 @@ export function MiniRepl({ return (
-
-
- - + {!hideHeader && ( +
+
+ + +
- {error &&
{error.message}
} -
+ )}
{show && ( )} + {error &&
{error.message}
}
{drawTime && ( =6'} + dev: false + /prismjs/1.29.0: resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==} engines: {node: '>=6'} @@ -10842,6 +10930,12 @@ packages: read: 1.0.7 dev: true + /property-information/5.6.0: + resolution: {integrity: sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==} + dependencies: + xtend: 4.0.2 + dev: false + /property-information/6.2.0: resolution: {integrity: sha512-kma4U7AFCTwpqq5twzC1YVIDXSqg6qQK6JN0smOw8fgRy1OkMi0CYSzFmsy6dnqSenamAtj0CyXMUJ1Mf6oROg==} dev: false @@ -10935,6 +11029,19 @@ packages: engines: {node: '>=0.10.0'} dev: true + /react-syntax-highlighter/15.5.0_react@18.2.0: + resolution: {integrity: sha512-+zq2myprEnQmH5yw6Gqc8lD55QHnpKaU8TOcFeC/Lg/MQSs8UknEA0JC4nTZGFAXC2J2Hyj/ijJ7NlabyPi2gg==} + peerDependencies: + react: '>= 0.14.0' + dependencies: + '@babel/runtime': 7.20.13 + highlight.js: 10.7.3 + lowlight: 1.20.0 + prismjs: 1.29.0 + react: 18.2.0 + refractor: 3.6.0 + dev: false + /react/18.2.0: resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==} engines: {node: '>=0.10.0'} @@ -11094,6 +11201,14 @@ packages: test-value: 2.1.0 dev: true + /refractor/3.6.0: + resolution: {integrity: sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA==} + dependencies: + hastscript: 6.0.0 + parse-entities: 2.0.0 + prismjs: 1.27.0 + dev: false + /regenerate-unicode-properties/10.1.0: resolution: {integrity: sha512-d1VudCLoIGitcU/hEg2QqvyGZQmdC0Lf8BqdOMXGFSvJP4bNV1+XqbPQeHHLD51Jh4QJJ225dlIFvY4Ly6MXmQ==} engines: {node: '>=4'} @@ -11806,6 +11921,10 @@ packages: deprecated: Please use @jridgewell/sourcemap-codec instead dev: true + /space-separated-tokens/1.1.5: + resolution: {integrity: sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==} + dev: false + /space-separated-tokens/2.0.2: resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==} dev: false @@ -13758,8 +13877,8 @@ packages: resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==} dev: false - github.com/dktr0/WebDirt/8bdd7478ae05f74cbd5003936da23ce9bc6fc7c7: - resolution: {tarball: https://codeload.github.com/dktr0/WebDirt/tar.gz/8bdd7478ae05f74cbd5003936da23ce9bc6fc7c7} + github.com/dktr0/WebDirt/d2ce441e82a11036455e93643af5938a844eee27: + resolution: {tarball: https://codeload.github.com/dktr0/WebDirt/tar.gz/d2ce441e82a11036455e93643af5938a844eee27} name: webdirt version: 1.0.1 dev: false