use tutorial.mdx with nunjucks

.gitignore

@@ -30,4 +30,5 @@ mytunes.ts
 doc
 out
 .parcel-cache
-repl_old
+repl_old
+tutorial.rendered.mdx

doc.json

@@ -1,7 +1,7 @@
 {
   "docs": [
     {
-      "comment": "/**\n   * Select a sound / sample by name.\n   * \n   * <details>\n   * <summary>show all sounds</summary>\n   * \n   * 808 (6) 808bd (25) 808cy (25) 808hc (5) 808ht (5) 808lc (5) 808lt (5) 808mc (5) 808mt (5) 808oh (5) 808sd (25) 909 (1) ab (12) ade (10) ades2 (9) ades3 (7) ades4 (6) alex (2) alphabet (26) amencutup (32) armora (7) arp (2) arpy (11) auto (11) baa (7) baa2 (7) bass (4) bass0 (3) bass1 (30) bass2 (5) bass3 (11) bassdm (24) bassfoo (3) battles (2) bd (24) bend (4) bev (2) bin (2) birds (10) birds3 (19) bleep (13) blip (2) blue (2) bottle (13) breaks125 (2) breaks152 (1) breaks157 (1) breaks165 (1) breath (1) bubble (8) can (14) casio (3) cb (1) cc (6) chin (4) circus (3) clak (2) click (4) clubkick (5) co (4) coins (1) control (2) cosmicg (15) cp (2) cr (6) crow (4) d (4) db (13) diphone (38) diphone2 (12) dist (16) dork2 (4) dorkbot (2) dr (42) dr2 (6) dr55 (4) dr_few (8) drum (6) drumtraks (13) e (8) east (9) electro1 (13) em2 (6) erk (1) f (1) feel (7) feelfx (8) fest (1) fire (1) flick (17) fm (17) foo (27) future (17) gab (10) gabba (4) gabbaloud (4) gabbalouder (4) glasstap (3) glitch (8) glitch2 (8) gretsch (24) gtr (3) h (7) hand (17) hardcore (12) hardkick (6) haw (6) hc (6) hh (13) hh27 (13) hit (6) hmm (1) ho (6) hoover (6) house (8) ht (16) if (5) ifdrums (3) incoming (8) industrial (32) insect (3) invaders (18) jazz (8) jungbass (20) jungle (13) juno (12) jvbass (13) kicklinn (1) koy (2) kurt (7) latibro (8) led (1) less (4) lighter (33) linnhats (6) lt (16) made (7) made2 (1) mash (2) mash2 (4) metal (10) miniyeah (4) monsterb (6) moog (7) mouth (15) mp3 (4) msg (9) mt (16) mute (28) newnotes (15) noise (1) noise2 (8) notes (15) numbers (9) oc (4) odx (15) off (1) outdoor (6) pad (3) padlong (1) pebbles (1) perc (6) peri (15) pluck (17) popkick (10) print (11) proc (2) procshort (8) psr (30) rave (8) rave2 (4) ravemono (2) realclaps (4) reverbkick (1) rm (2) rs (1) sax (22) sd (2) seawolf (3) sequential (8) sf (18) sheffield (1) short (5) sid (12) sine (6) sitar (8) sn (52) space (18) speakspell (12) speech (7) speechless (10) speedupdown (9) stab (23) stomp (10) subroc3d (11) sugar (2) sundance (6) tabla (26) tabla2 (46) tablex (3) tacscan (22) tech (13) techno (7) tink (5) tok (4) toys (13) trump (11) ul (10) ulgab (5) uxay (3) v (6) voodoo (5) wind (10) wobble (1) world (3) xmas (1) yeah (31)\n   * \n   * <a href=\"https://tidalcycles.org/docs/configuration/Audio%20Samples/default_library\" target=\"_blank\">more info</a>\n   * \n   * </details>\n   *\n   * @name s\n   * @param {string | Pattern} sound The sound / pattern of sounds to pick\n   * @example\n   * s(\"bd hh\").osc()\n   *\n   */",
+      "comment": "/**\n   * Select a sound / sample by name.\n   *\n   * <details>\n   * <summary>show all sounds</summary>\n   *\n   * 808 (6) 808bd (25) 808cy (25) 808hc (5) 808ht (5) 808lc (5) 808lt (5) 808mc (5) 808mt (5) 808oh (5) 808sd (25) 909 (1) ab (12) ade (10) ades2 (9) ades3 (7) ades4 (6) alex (2) alphabet (26) amencutup (32) armora (7) arp (2) arpy (11) auto (11) baa (7) baa2 (7) bass (4) bass0 (3) bass1 (30) bass2 (5) bass3 (11) bassdm (24) bassfoo (3) battles (2) bd (24) bend (4) bev (2) bin (2) birds (10) birds3 (19) bleep (13) blip (2) blue (2) bottle (13) breaks125 (2) breaks152 (1) breaks157 (1) breaks165 (1) breath (1) bubble (8) can (14) casio (3) cb (1) cc (6) chin (4) circus (3) clak (2) click (4) clubkick (5) co (4) coins (1) control (2) cosmicg (15) cp (2) cr (6) crow (4) d (4) db (13) diphone (38) diphone2 (12) dist (16) dork2 (4) dorkbot (2) dr (42) dr2 (6) dr55 (4) dr_few (8) drum (6) drumtraks (13) e (8) east (9) electro1 (13) em2 (6) erk (1) f (1) feel (7) feelfx (8) fest (1) fire (1) flick (17) fm (17) foo (27) future (17) gab (10) gabba (4) gabbaloud (4) gabbalouder (4) glasstap (3) glitch (8) glitch2 (8) gretsch (24) gtr (3) h (7) hand (17) hardcore (12) hardkick (6) haw (6) hc (6) hh (13) hh27 (13) hit (6) hmm (1) ho (6) hoover (6) house (8) ht (16) if (5) ifdrums (3) incoming (8) industrial (32) insect (3) invaders (18) jazz (8) jungbass (20) jungle (13) juno (12) jvbass (13) kicklinn (1) koy (2) kurt (7) latibro (8) led (1) less (4) lighter (33) linnhats (6) lt (16) made (7) made2 (1) mash (2) mash2 (4) metal (10) miniyeah (4) monsterb (6) moog (7) mouth (15) mp3 (4) msg (9) mt (16) mute (28) newnotes (15) noise (1) noise2 (8) notes (15) numbers (9) oc (4) odx (15) off (1) outdoor (6) pad (3) padlong (1) pebbles (1) perc (6) peri (15) pluck (17) popkick (10) print (11) proc (2) procshort (8) psr (30) rave (8) rave2 (4) ravemono (2) realclaps (4) reverbkick (1) rm (2) rs (1) sax (22) sd (2) seawolf (3) sequential (8) sf (18) sheffield (1) short (5) sid (12) sine (6) sitar (8) sn (52) space (18) speakspell (12) speech (7) speechless (10) speedupdown (9) stab (23) stomp (10) subroc3d (11) sugar (2) sundance (6) tabla (26) tabla2 (46) tablex (3) tacscan (22) tech (13) techno (7) tink (5) tok (4) toys (13) trump (11) ul (10) ulgab (5) uxay (3) v (6) voodoo (5) wind (10) wobble (1) world (3) xmas (1) yeah (31)\n   *\n   * <a href=\"https://tidalcycles.org/docs/configuration/Audio%20Samples/default_library\" target=\"_blank\">more info</a>\n   *\n   * </details>\n   *\n   * @name s\n   * @param {string | Pattern} sound The sound / pattern of sounds to pick\n   * @example\n   * s(\"bd hh\").osc()\n   *\n   */",
       "meta": {
         "filename": "controls.mjs",
         "lineno": 11,

tutorial/Tutorial.jsx

@@ -6,9 +6,8 @@ This program is free software: you can redistribute it and/or modify it under th
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import Tutorial from './tutorial.mdx';
+import Tutorial from './tutorial.rendered.mdx';
-import ApiDoc from './ApiDoc'
+// import ApiDoc from './ApiDoc';
-import Api from './api.mdx';
 import './style.scss';
 import '@strudel.cycles/react/dist/style.css';
 
@@ -32,8 +31,7 @@ ReactDOM.render(
       </header>
       <main className="p-4 pl-6 max-w-3xl prose">
         <Tutorial />
-        <Api />
+        {/*         <ApiDoc /> */}
-        <ApiDoc />
       </main>
     </div>
   </React.StrictMode>,

tutorial/api.mdx

@@ -1,123 +0,0 @@
-import { MiniRepl } from './MiniRepl';
-
-The following is generated from the source documentation.
-
-## TOC
-
-## Pattern Factories
-
-The following functions will return a pattern. We will see later what that means.
-
-### pure
-
-<p>A discrete value that repeats once per cycle:</p>
-
-**Parameters**
-  
-- value (any): The value to repeat
-
-**Examples**
-
-<div className="space-y-2">
-  <MiniRepl tune={`pure('e4')`} />
-</div>
-
-### slowcat
-
-<p>Concatenation: combines a list of patterns, switching between them successively, one per cycle:</p>
-<p>synonyms: <a href="#cat">cat</a></p>
-
-**Parameters**
-  
-- items (any): The items to concatenate
-
-**Examples**
-
-<div className="space-y-2">
-  <MiniRepl tune={`slowcat(e5, b4, [d5, c5])`} />
-</div>
-
-### fastcat
-
-<p>Concatenation: as with <a href="#slowcat">slowcat</a>, but squashes a cycle from each pattern into one cycle</p>
-<p>Synonyms: <a href="#seq">seq</a>, <a href="#sequence">sequence</a></p>
-
-**Parameters**
-  
-- items (any): The items to concatenate
-
-**Examples**
-
-<div className="space-y-2">
-  <MiniRepl tune={`fastcat(e5, b4, [d5, c5])
-// sequence(e5, b4, [d5, c5])
-// seq(e5, b4, [d5, c5])`} />
-</div>
-
-### stack
-
-<p>The given items are played at the same time at the same length:</p>
-
-**Parameters**
-  
-- items (any): The items to stack
-
-**Examples**
-
-<div className="space-y-2">
-  <MiniRepl tune={`stack(g3, b3, [e4, d4])`} />
-</div>
-
-### timeCat
-
-<p>Like <a href="#fastcat">fastcat</a>, but where each step has a temporal weight:</p>
-
-**Parameters**
-  
-- items (Array): The items to concatenate
-
-**Examples**
-
-<div className="space-y-2">
-  <MiniRepl tune={`timeCat([3,e3],[1, g3])`} />
-</div>
-
-
-
-## Pattern Modifiers
-
-### Pattern.slow
-
-<p>Slow down a pattern over the given number of cycles.</p>
-
-**Parameters**
-  
-- factor (number|Pattern): slow down factor
-
-**Examples**
-
-<div className="space-y-2">
-  <MiniRepl tune={`seq(e5, b4, d5, c5).slow(2)`} />
-</div>
-
-### Pattern.fast
-
-<p>Speed up a pattern by the given factor.</p>
-
-**Parameters**
-  
-- factor (number|Pattern): speed up factor
-
-**Examples**
-
-<div className="space-y-2">
-  <MiniRepl tune={`seq(e5, b4, d5, c5).fast(2)`} />
-</div>
-
-
-
-
-
-
-
-## Everything Else

tutorial/package.json

@@ -3,12 +3,12 @@
   "private": true,
   "version": "0.0.0",
   "scripts": {
-    "dev": "npm run jsdoc-json && vite",
+    "dev": "npm run render && vite",
     "start": "vite",
-    "build": "npm run jsdoc-json && vite build",
+    "build": "npm run render && vite build",
     "preview": "vite preview",
     "jsdoc-json": "jsdoc ../packages/ --template ../node_modules/jsdoc-json --destination ../doc.json -c ../jsdoc.config.json",
-    "render": "npm run jsdoc-json && node ./render.js > api.mdx"
+    "render": "npm run jsdoc-json && node ./render.js > tutorial.rendered.mdx"
   },
   "type": "module",
   "dependencies": {

tutorial/render.js

@@ -4,7 +4,7 @@ import jsdoc from '../doc.json' assert { type: 'json' };
 // TODO: load tutorial.mdx and append rendered api.mdx to the bottom (to make sure TOC works)
 // TODO: split
 
-const env = nunjucks.configure('templates', { autoescape: false });
+const env = nunjucks.configure('.', { autoescape: false });
 
 const docs = jsdoc.docs.reduce((acc, obj) => Object.assign(acc, { [obj.longname]: obj }), {});
 
@@ -45,5 +45,5 @@ ${
 
 env.addFilter('jsdoc', renderAsMDX);
 
-const rendered = nunjucks.render('api.mdx', { docs });
+const rendered = nunjucks.render('tutorial.mdx', { docs });
 console.log(rendered);

tutorial/tutorial.mdx

@@ -699,3 +699,122 @@ If you want to contribute in another way, either
 
 # API Docs
 
+The following is generated from the source documentation.
+
+## Pattern Factories
+
+The following functions will return a pattern. We will see later what that means.
+
+### pure
+
+<p>A discrete value that repeats once per cycle:</p>
+
+**Parameters**
+
+- value (any): The value to repeat
+
+**Examples**
+
+<div className="space-y-2">
+  <MiniRepl tune={`pure('e4')`} />
+</div>
+
+### slowcat
+
+<p>Concatenation: combines a list of patterns, switching between them successively, one per cycle:</p>
+<p>
+  synonyms: <a href="#cat">cat</a>
+</p>
+
+**Parameters**
+
+- items (any): The items to concatenate
+
+**Examples**
+
+<div className="space-y-2">
+  <MiniRepl tune={`slowcat(e5, b4, [d5, c5])`} />
+</div>
+
+### fastcat
+
+<p>
+  Concatenation: as with <a href="#slowcat">slowcat</a>, but squashes a cycle from each pattern into one cycle
+</p>
+<p>
+  Synonyms: <a href="#seq">seq</a>, <a href="#sequence">sequence</a>
+</p>
+
+**Parameters**
+
+- items (any): The items to concatenate
+
+**Examples**
+
+<div className="space-y-2">
+  <MiniRepl
+    tune={`fastcat(e5, b4, [d5, c5])
+// sequence(e5, b4, [d5, c5])
+// seq(e5, b4, [d5, c5])`}
+  />
+</div>
+
+### stack
+
+<p>The given items are played at the same time at the same length:</p>
+
+**Parameters**
+
+- items (any): The items to stack
+
+**Examples**
+
+<div className="space-y-2">
+  <MiniRepl tune={`stack(g3, b3, [e4, d4])`} />
+</div>
+
+### timeCat
+
+<p>
+  Like <a href="#fastcat">fastcat</a>, but where each step has a temporal weight:
+</p>
+
+**Parameters**
+
+- items (Array): The items to concatenate
+
+**Examples**
+
+<div className="space-y-2">
+  <MiniRepl tune={`timeCat([3,e3],[1, g3])`} />
+</div>
+
+## Pattern Modifiers
+
+### Pattern.slow
+
+<p>Slow down a pattern over the given number of cycles.</p>
+
+**Parameters**
+
+- factor (number|Pattern): slow down factor
+
+**Examples**
+
+<div className="space-y-2">
+  <MiniRepl tune={`seq(e5, b4, d5, c5).slow(2)`} />
+</div>
+
+### Pattern.fast
+
+<p>Speed up a pattern by the given factor.</p>
+
+**Parameters**
+
+- factor (number|Pattern): speed up factor
+
+**Examples**
+
+<div className="space-y-2">
+  <MiniRepl tune={`seq(e5, b4, d5, c5).fast(2)`} />
+</div>