add docs + fix hydra for mini repl

packages/hydra/README.md

@@ -1,3 +1,29 @@
 # @strudel/hydra
 
 This package integrates [hydra-synth](https://www.npmjs.com/package/hydra-synth) into strudel.
+
+## Usage in Strudel
+
+This package is imported into strudel by default. To activate Hydra, place this code at the top of your code:
+
+```js
+await initHydra();
+```
+
+Then you can use hydra below!
+
+## Usage via npm
+
+```sh
+npm i @strudel/hydra
+```
+
+Then add the import to your evalScope:
+
+```js
+import { evalScope } from '@strudel.cycles/core';
+
+evalScope(
+  import('@strudel/hydra')
+)
+```

packages/hydra/hydra.mjs

@@ -1,7 +1,9 @@
+import { getDrawContext } from '@strudel.cycles/core';
+
 export async function initHydra() {
   if (!document.getElementById('hydra-canvas')) {
+    const { canvas: testCanvas } = getDrawContext();
     await import('https://unpkg.com/hydra-synth');
-    const testCanvas = document.getElementById('test-canvas');
     const hydraCanvas = testCanvas.cloneNode(true);
     hydraCanvas.id = 'hydra-canvas';
     testCanvas.after(hydraCanvas);

website/src/config.ts

@@ -76,6 +76,7 @@ export const SIDEBAR: Sidebar = {
       { text: 'Patterns', link: 'technical-manual/patterns' },
       { text: 'Music metadata', link: 'learn/metadata' },
       { text: 'CSound', link: 'learn/csound' },
+      { text: 'Hydra', link: 'learn/hydra' },
     ],
     'Pattern Functions': [
       { text: 'Introduction', link: 'functions/intro' },

website/src/docs/MiniRepl.jsx

@@ -20,6 +20,7 @@ if (typeof window !== 'undefined') {
     import('@strudel.cycles/osc'),
     import('@strudel.cycles/csound'),
     import('@strudel.cycles/soundfonts'),
+    import('@strudel/hydra'),
   );
 }
 

website/src/pages/learn/hydra.mdx

@@ -0,0 +1,42 @@
+---
+title: Hydra
+layout: ../../layouts/MainLayout.astro
+---
+
+import { MiniRepl } from '../../docs/MiniRepl';
+
+# Using Hydra inside Strudel
+
+You can write [hydra](https://hydra.ojack.xyz/) code in strudel! All you have to do is to call `await initHydra()` at the top:
+
+<MiniRepl
+  client:only="react"
+  tune={`await initHydra()
+// licensed with CC BY-NC-SA 4.0 https://creativecommons.org/licenses/by-nc-sa/4.0/
+// by Zach Krall
+// http://zachkrall.online/
+
+osc(10, 0.9, 300)
+.color(0.9, 0.7, 0.8)
+.diff(
+osc(45, 0.3, 100)
+.color(0.9, 0.9, 0.9)
+.rotate(0.18)
+.pixelate(12)
+.kaleid()
+)
+.scrollX(10)
+.colorama()
+.luma()
+.repeatX(4)
+.repeatY(4)
+.modulate(
+osc(1, -0.9, 300)
+)
+.scale(2)
+.out()
+
+note("[a,c,e,<a4 ab4 g4 gb4>,b4]/4").s("sawtooth").vib(2)
+.lpf(600).lpa(2).lpenv(6)
+`}
+/>