start visual feedback article

website/src/config.ts

@@ -78,6 +78,7 @@ export const SIDEBAR: Sidebar = {
     More: [
       { text: 'Recipes', link: 'recipes/recipes' },
       { text: 'Mini-Notation', link: 'learn/mini-notation' },
+      { text: 'Visual Feedback', link: 'learn/visual-feedback' },
       { text: 'Offline', link: 'learn/pwa' },
       { text: 'Patterns', link: 'technical-manual/patterns' },
       { text: 'Music metadata', link: 'learn/metadata' },

website/src/pages/learn/visual-feedback.mdx

@@ -0,0 +1,63 @@
+---
+title: Visual Feedback
+layout: ../../layouts/MainLayout.astro
+---
+
+import { MiniRepl } from '../../docs/MiniRepl';
+import { JsDoc } from '../../docs/JsDoc';
+
+# Visual Feedback
+
+There are several function that add visual feedback to your patterns.
+
+## Mini Notation Highlighting
+
+When you write mini notation with "double quotes" or \`backticks\`, the active parts of the mini notation will be highlighted:
+
+<MiniRepl
+  client:idle
+  tune={`n("<0 2 1 3 2>*8")
+.scale("<A1 D2>/4:minor:pentatonic")
+.s("supersaw").lpf(300).lpenv("<4 3 2>*4")`}
+/>
+
+You can change the color as well, even pattern it:
+
+<MiniRepl
+  client:idle
+  tune={`n("<0 2 1 3 2>*8")
+.scale("<A1 D2>/4:minor:pentatonic")
+.s("supersaw").lpf(300).lpenv("<4 3 2>*4")
+.color("cyan magenta")`}
+/>
+
+## Pianoroll and Punchcard
+
+<MiniRepl
+  client:idle
+  tune={`n("<0 2 1 3 2>*8")
+.scale("<A1 D2>/4:minor:pentatonic")
+.s("supersaw").lpf(300).lpenv("<4 3 2>*4")
+._punchcard()
+`}
+/>
+
+<MiniRepl
+  client:idle
+  tune={`n("<0 2 1 3 2>*8")
+.scale("<A1 D2>/4:minor:pentatonic")
+.s("supersaw").lpf(300).lpenv("<4 3 2>*4")
+._pianoroll()
+`}
+/>
+
+<MiniRepl
+  client:idle
+  tune={`n("<0 2 1 3 2>*8")
+.scale("<A1 D2>/4:minor:pentatonic")
+.s("supersaw").lpf(300).lpenv("<4 3 2>*4")
+._spiral()
+`}
+/>
+
+{/* <JsDoc client:idle name="pianoroll" h={0} /> */}