From 0f7b3e9f840d1e46226963ff32768cde01208f59 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Thu, 26 Oct 2023 16:01:51 +0200
Subject: [PATCH] add docs + fix hydra for mini repl

---
 packages/hydra/README.md          | 26 +++++++++++++++++++
 packages/hydra/hydra.mjs          |  4 ++-
 website/src/config.ts             |  1 +
 website/src/docs/MiniRepl.jsx     |  1 +
 website/src/pages/learn/hydra.mdx | 42 +++++++++++++++++++++++++++++++
 5 files changed, 73 insertions(+), 1 deletion(-)
 create mode 100644 website/src/pages/learn/hydra.mdx

diff --git a/packages/hydra/README.md b/packages/hydra/README.md
index fce294ce2..d300bb88d 100644
--- a/packages/hydra/README.md
+++ b/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')
+)
+```
diff --git a/packages/hydra/hydra.mjs b/packages/hydra/hydra.mjs
index 1ee80e650..014a69971 100644
--- a/packages/hydra/hydra.mjs
+++ b/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);
diff --git a/website/src/config.ts b/website/src/config.ts
index 0d774a5ac..ca7616d55 100644
--- a/website/src/config.ts
+++ b/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' },
diff --git a/website/src/docs/MiniRepl.jsx b/website/src/docs/MiniRepl.jsx
index 7c5079a0b..251410c5e 100644
--- a/website/src/docs/MiniRepl.jsx
+++ b/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'),
   );
 }
 
diff --git a/website/src/pages/learn/hydra.mdx b/website/src/pages/learn/hydra.mdx
new file mode 100644
index 000000000..159405954
--- /dev/null
+++ b/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)
+`}
+/>