pull apart functional docs

packages/core/pattern.mjs

@@ -712,7 +712,7 @@ export class Pattern {
    * @memberof Pattern
    * @example
    * s("hh*2").stack(
-   *   n("c2(3,8)")
+   *   note("c2(3,8)")
    * )
    */
   stack(...pats) {
@@ -729,7 +729,7 @@ export class Pattern {
    * @memberof Pattern
    * @example
    * s("hh*2").seq(
-   *   n("c2(3,8)")
+   *   note("c2(3,8)")
    * )
    */
   seq(...pats) {
@@ -742,7 +742,7 @@ export class Pattern {
    * @memberof Pattern
    * @example
    * s("hh*2").cat(
-   *   n("c2(3,8)")
+   *   note("c2(3,8)")
    * )
    */
   cat(...pats) {

website/src/config.ts

@@ -49,12 +49,22 @@ export const SIDEBAR: Sidebar = {
       { text: 'Sounds', link: 'learn/sounds' },
       { text: 'Coding syntax', link: 'learn/code' },
       { text: 'Mini-Notation', link: 'learn/mini-notation' },
+      { text: 'Signals', link: 'learn/signals' },
+    ],
+    'Making Sound': [
       { text: 'Samples', link: 'learn/samples' },
       { text: 'Synths', link: 'learn/synths' },
       { text: 'Audio Effects', link: 'learn/effects' },
-      { text: 'Functions', link: 'learn/functions' },
+    ],
-      { text: 'Signals', link: 'learn/signals' },
+    Functions: [
+      { text: 'Introduction', link: 'functions/intro' },
+      { text: 'Value Modifiers', link: 'functions/value-modifiers' },
+      { text: 'Factories', link: 'learn/factories' },
+      { text: 'Time Modifiers', link: 'learn/time-modifiers' },
+      { text: 'Conditional Modifiers', link: 'learn/conditional-modifiers' },
       { text: 'Tonal', link: 'learn/tonal' },
+    ],
+    More: [
       { text: 'MIDI & OSC', link: 'learn/input-output' },
       { text: 'Strudel vs Tidal', link: 'learn/strudel-vs-tidal' },
     ],

website/src/pages/functions/intro.mdx

@@ -0,0 +1,40 @@
+---
+title: Introduction
+layout: ../../layouts/MainLayout.astro
+---
+
+import { MiniRepl } from '../../docs/MiniRepl';
+import { JsDoc } from '../../docs/JsDoc';
+
+# Functional JavaScript API
+
+While the mini notation is powerful on its own, there is much more to discover.
+Internally, the mini notation will expand to use the actual functional JavaScript API.
+
+For example, this Pattern in Mini Notation:
+
+<MiniRepl client:only="react" tune={`note("c3 eb3 g3")`} />
+
+is equivalent to this Pattern without Mini Notation:
+
+<MiniRepl client:only="react" tune={`note(seq(c3, eb3, g3))`} />
+
+Similarly, there is an equivalent function for every aspect of the mini notation.
+
+Which representation to use is a matter of context. As a rule of thumb, you can think of the JavaScript API
+to fit better for the larger context, while mini notation is more practical for individiual rhythms.
+
+## Limits of Mini Notation
+
+While the Mini Notation is a powerful way to write rhythms shortly, it also has its limits. Take this example:
+
+<MiniRepl
+  client:idle
+  tune={`stack(
+  note("c2 eb2(3,8)").s('sawtooth').cutoff(800),
+  s("bd,~ sd,hh*4")
+)`}
+/>
+
+Here, we are using mini notation for the individual rhythms, while using the function `stack` to mix them.
+While stack is also available as `,` in mini notation, we cannot use it here, because we have different types of sounds.

website/src/pages/functions/value-modifiers.mdx

@@ -0,0 +1,61 @@
+---
+title: Value Modifiers
+layout: ../../layouts/MainLayout.astro
+---
+
+import { MiniRepl } from '../../docs/MiniRepl';
+import { JsDoc } from '../../docs/JsDoc';
+
+# Value Modifiers
+
+## Notes
+
+Notes are automatically available as variables:
+
+<MiniRepl client:only="react" tune={`note(seq(d4, fs4, a4)) // note("d4 f#4 a4")`} />
+
+An important difference to the mini notation:
+For sharp notes, the letter "s" is used instead of "#", because JavaScript does not support "#" in a variable name.
+
+The above is the same as:
+
+<MiniRepl client:only="react" tune={`note(seq('d4', 'f#4', 'a4'))`} />
+
+Using strings, you can also use "#".
+
+## Alternative Syntax
+
+In the above example, we are nesting a function inside a function, which makes reading the parens a little more difficult.
+To avoid getting to many nested parens, there is an alternative syntax to add a type to a pattern:
+
+<MiniRepl client:only="react" tune={`seq(d4, fs4, a4).note()`} />
+
+You can use this with any function that declares a type (like `n`, `s`, `note`, `freq` etc), just make sure to leave the parens empty!
+
+## Pattern.add
+
+<JsDoc client:idle name="Pattern.add" h={0} />
+
+## Pattern.sub
+
+<JsDoc client:idle name="Pattern.sub" h={0} />
+
+## Pattern.mul
+
+<JsDoc client:idle name="Pattern.mul" h={0} />
+
+## Pattern.div
+
+<JsDoc client:idle name="Pattern.div" h={0} />
+
+## Pattern.round
+
+<JsDoc client:idle name="Pattern.round" h={0} />
+
+## Pattern.apply
+
+<JsDoc client:idle name="Pattern.apply" h={0} />
+
+## Pattern.range
+
+<JsDoc client:idle name="Pattern.range" h={0} />

website/src/pages/learn/conditional-modifiers.mdx

@@ -0,0 +1,43 @@
+---
+title: Conditional Modifiers
+layout: ../../layouts/MainLayout.astro
+---
+
+import { MiniRepl } from '../../docs/MiniRepl';
+import { JsDoc } from '../../docs/JsDoc';
+
+# Conditional Modifiers
+
+## every
+
+<JsDoc client:idle name="Pattern.every" h={0} />
+
+## when
+
+<JsDoc client:idle name="Pattern.when" h={0} />
+
+# Accumulation Modifiers
+
+## stack
+
+<JsDoc client:idle name="Pattern.stack" h={0} />
+
+## superimpose
+
+<JsDoc client:idle name="Pattern.superimpose" h={0} />
+
+## layer
+
+<JsDoc client:idle name="Pattern.layer" h={0} />
+
+## off
+
+<JsDoc client:idle name="Pattern.off" h={0} />
+
+## echo
+
+<JsDoc client:idle name="Pattern.echo" h={0} />
+
+## echoWith
+
+<JsDoc client:idle name="Pattern.echoWith" h={0} />

website/src/pages/learn/factories.mdx

@@ -0,0 +1,91 @@
+---
+title: Pattern Factories
+description: Strudel Tutorial
+layout: ../../layouts/MainLayout.astro
+---
+
+import { MiniRepl } from '../../docs/MiniRepl';
+import { JsDoc } from '../../docs/JsDoc';
+
+# Pattern Factories
+
+The following functions will return a pattern.
+Most of these are also used by the Mini Notation:
+
+| function                       | mini            |
+| ------------------------------ | --------------- |
+| `cat(x, y)`                    | `"<x y>"`       |
+| `seq(x, y)`                    | `"x y"`         |
+| `stack(x, y)`                  | `"x,y"`         |
+| `timeCat([3,x],[2,y])`         | `"x@2 y@2"`      |
+| `polymeter([a, b, c], [x, y])` | `"{a b c, x y}"` |
+| `polymeterSteps(2, x, y, z)`   | `"{x y z}%2"`    |
+
+## cat
+
+<JsDoc client:idle name="cat" h={0} />
+
+You can also use cat as a chained function like this:
+
+<JsDoc client:idle name="Pattern.cat" h={0} hideDescription />
+
+## seq
+
+<JsDoc client:idle name="seq" h={0} />
+
+Or as a chained function:
+
+<JsDoc client:idle name="Pattern.seq" h={0} hideDescription />
+
+## stack
+
+<JsDoc client:idle name="stack" h={0} />
+
+As a chained function:
+
+<JsDoc client:idle name="Pattern.stack" h={0} hideDescription />
+
+## timeCat
+
+<JsDoc client:idle name="timeCat" h={0} />
+
+## polymeter
+
+<JsDoc client:idle name="polymeter" h={0} />
+
+## polymeterSteps
+
+<JsDoc client:idle name="polymeterSteps" h={0} />
+
+# Combining Patterns
+
+You can freely mix JS patterns, mini patterns and values! For example, this pattern:
+
+<MiniRepl
+  client:idle
+  tune={`cat(
+  stack(g3,b3,e4),
+  stack(a3,c3,e4),
+  stack(b3,d3,fs4),
+  stack(b3,e4,g4)
+).note()`}
+/>
+
+...is equivalent to:
+
+<MiniRepl
+  client:idle
+  tune={`cat(
+  "g3,b3,e4",
+  "a3,c3,e4",
+  "b3,d3,f#4",
+  "b3,e4,g4"
+).note()`}
+/>
+
+... as well as:
+
+<MiniRepl client:only="react" tune={`note("<[g3,b3,e4] [a3,c3,e4] [b3,d3,f#4] [b3,e4,g4]>")`} />
+
+While mini notation is almost always shorter, it only has a handful of modifiers: \* / ! @.
+When using JS patterns, there is a lot more you can do.

website/src/pages/learn/functions.mdx

@@ -1,250 +0,0 @@
----
-title: What is Strudel?
-description: Strudel Tutorial
-layout: ../../layouts/MainLayout.astro
----
-
-import { MiniRepl } from '../../docs/MiniRepl';
-import { JsDoc } from '../../docs/JsDoc';
-
-# Functional JavaScript API
-
-While the mini notation is powerful on its own, there is much more to discover.
-Internally, the mini notation will expand to use the actual functional JavaScript API.
-
-For example, this Pattern in Mini Notation:
-
-<MiniRepl client:only="react" tune={`note("c3 eb3 g3")`} />
-
-is equivalent to this Pattern without Mini Notation:
-
-<MiniRepl client:only="react" tune={`note(seq(c3, eb3, g3))`} />
-
-Similarly, there is an equivalent function for every aspect of the mini notation.
-
-Which representation to use is a matter of context. As a rule of thumb, you can think of the JavaScript API
-to fit better for the larger context, while mini notation is more practical for individiual rhythms.
-
-## Limits of Mini Notation
-
-While the Mini Notation is a powerful way to write rhythms shortly, it also has its limits. Take this example:
-
-<MiniRepl
-  client:idle
-  tune={`stack(
-  note("c2 eb2(3,8)").s('sawtooth').cutoff(800),
-  s("bd,~ sd,hh*4")
-)`}
-/>
-
-Here, we are using mini notation for the individual rhythms, while using the function `stack` to mix them.
-While stack is also available as `,` in mini notation, we cannot use it here, because we have different types of sounds.
-
-## Notes
-
-Notes are automatically available as variables:
-
-<MiniRepl client:only="react" tune={`note(seq(d4, fs4, a4)) // note("d4 f#4 a4")`} />
-
-An important difference to the mini notation:
-For sharp notes, the letter "s" is used instead of "#", because JavaScript does not support "#" in a variable name.
-
-The above is the same as:
-
-<MiniRepl client:only="react" tune={`note(seq('d4', 'f#4', 'a4'))`} />
-
-Using strings, you can also use "#".
-
-## Alternative Syntax
-
-In the above example, we are nesting a function inside a function, which makes reading the parens a little more difficult.
-To avoid getting to many nested parens, there is an alternative syntax to add a type to a pattern:
-
-<MiniRepl client:only="react" tune={`seq(d4, fs4, a4).note()`} />
-
-You can use this with any function that declares a type (like `n`, `s`, `note`, `freq` etc), just make sure to leave the parens empty!
-
-## Pattern Factories
-
-The following functions will return a pattern.
-
-### cat
-
-<JsDoc client:idle name="cat" h={0} />
-
-### seq
-
-<JsDoc client:idle name="seq" h={0} />
-
-### stack
-
-<JsDoc client:idle name="stack" h={0} />
-
-### timeCat
-
-<JsDoc client:idle name="timeCat" h={0} />
-
-## Combining Patterns
-
-You can freely mix JS patterns, mini patterns and values! For example, this pattern:
-
-<MiniRepl
-  client:idle
-  tune={`cat(
-  stack(g3,b3,e4),
-  stack(a3,c3,e4),
-  stack(b3,d3,fs4),
-  stack(b3,e4,g4)
-).note()`}
-/>
-
-...is equivalent to:
-
-<MiniRepl
-  client:idle
-  tune={`cat(
-  "g3,b3,e4",
-  "a3,c3,e4",
-  "b3,d3,f#4",
-  "b3,e4,g4"
-).note()`}
-/>
-
-... as well as:
-
-<MiniRepl client:only="react" tune={`note("<[g3,b3,e4] [a3,c3,e4] [b3,d3,f#4] [b3,e4,g4]>")`} />
-
-While mini notation is almost always shorter, it only has a handful of modifiers: \* / ! @.
-When using JS patterns, there is a lot more you can do.
-
-## Time Modifiers
-
-The following functions modify a pattern temporal structure in some way.
-
-### Pattern.slow
-
-<JsDoc client:idle name="Pattern.slow" h={0} />
-
-### Pattern.fast
-
-<JsDoc client:idle name="Pattern.fast" h={0} />
-
-### Pattern.early
-
-<JsDoc client:idle name="Pattern.early" h={0} />
-
-### Pattern.late
-
-<JsDoc client:idle name="Pattern.late" h={0} />
-
-### Pattern.legato
-
-<JsDoc client:idle name="Pattern.legato" h={0} />
-
-### Pattern.struct
-
-<JsDoc client:idle name="Pattern.struct" h={0} />
-
-### Pattern.euclid
-
-<JsDoc client:idle name="Pattern.euclid" h={0} />
-
-### Pattern.euclidLegato
-
-<JsDoc client:idle name="Pattern.euclidLegato" h={0} />
-
-### Pattern.rev
-
-<JsDoc client:idle name="Pattern.rev" h={0} />
-
-### Pattern.iter
-
-<JsDoc client:idle name="Pattern.iter" h={0} />
-
-### Pattern.iterBack
-
-<JsDoc client:idle name="Pattern.iterBack" h={0} />
-
-## Conditional Modifiers
-
-### Pattern.every
-
-<JsDoc client:idle name="Pattern.every" h={0} />
-
-### Pattern.when
-
-<JsDoc client:idle name="Pattern.when" h={0} />
-
-## Accumulation Modifiers
-
-### Pattern.stack
-
-<JsDoc client:idle name="Pattern.stack" h={0} />
-
-### Pattern.superimpose
-
-<JsDoc client:idle name="Pattern.superimpose" h={0} />
-
-### Pattern.layer
-
-<JsDoc client:idle name="Pattern.layer" h={0} />
-
-### Pattern.off
-
-<JsDoc client:idle name="Pattern.off" h={0} />
-
-### Pattern.echo
-
-<JsDoc client:idle name="Pattern.echo" h={0} />
-
-### Pattern.echoWith
-
-<JsDoc client:idle name="Pattern.echoWith" h={0} />
-
-## Concat Modifiers
-
-### Pattern.seq
-
-<JsDoc client:idle name="Pattern.seq" h={0} />
-
-### Pattern.cat
-
-<JsDoc client:idle name="Pattern.cat" h={0} />
-
-## Value Modifiers
-
-### Pattern.add
-
-<JsDoc client:idle name="Pattern.add" h={0} />
-
-### Pattern.sub
-
-<JsDoc client:idle name="Pattern.sub" h={0} />
-
-### Pattern.mul
-
-<JsDoc client:idle name="Pattern.mul" h={0} />
-
-### Pattern.div
-
-<JsDoc client:idle name="Pattern.div" h={0} />
-
-### Pattern.round
-
-<JsDoc client:idle name="Pattern.round" h={0} />
-
-### Pattern.apply
-
-<JsDoc client:idle name="Pattern.apply" h={0} />
-
-### Pattern.range
-
-<JsDoc client:idle name="Pattern.range" h={0} />
-
-### Pattern.chunk
-
-<JsDoc client:idle name="Pattern.chunk" h={0} />
-
-### Pattern.chunkBack
-
-<JsDoc client:idle name="Pattern.chunkBack" h={0} />

website/src/pages/learn/time-modifiers.mdx

@@ -0,0 +1,64 @@
+---
+title: Pattern Factories
+description: Strudel Tutorial
+layout: ../../layouts/MainLayout.astro
+---
+
+import { MiniRepl } from '../../docs/MiniRepl';
+import { JsDoc } from '../../docs/JsDoc';
+
+# Time Modifiers
+
+The following functions modify a pattern temporal structure in some way.
+
+## slow
+
+<JsDoc client:idle name="Pattern.slow" h={0} />
+
+## fast
+
+<JsDoc client:idle name="Pattern.fast" h={0} />
+
+## early
+
+<JsDoc client:idle name="Pattern.early" h={0} />
+
+## late
+
+<JsDoc client:idle name="Pattern.late" h={0} />
+
+## legato
+
+<JsDoc client:idle name="Pattern.legato" h={0} />
+
+## struct
+
+<JsDoc client:idle name="Pattern.struct" h={0} />
+
+## euclid
+
+<JsDoc client:idle name="Pattern.euclid" h={0} />
+
+## euclidLegato
+
+<JsDoc client:idle name="Pattern.euclidLegato" h={0} />
+
+## rev
+
+<JsDoc client:idle name="Pattern.rev" h={0} />
+
+## iter
+
+<JsDoc client:idle name="Pattern.iter" h={0} />
+
+## iterBack
+
+<JsDoc client:idle name="Pattern.iterBack" h={0} />
+
+### chunk
+
+<JsDoc client:idle name="Pattern.chunk" h={0} />
+
+### chunkBack
+
+<JsDoc client:idle name="Pattern.chunkBack" h={0} />