use tutorial.mdx with nunjucks

.gitignore

@@ -31,3 +31,4 @@ doc
 out
 .parcel-cache
 repl_old
+tutorial.rendered.mdx

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>