pull apart functional docs

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} />