pull apart functional docs

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.