Merge pull request #894 from rjulian/feat/add-header-workshop

Remove hideHeader for better mobile UI and consistency
tidalcycles · Jan 14, 2024 · fe6ff25 · fe6ff25
2 parents 6d0ecb9 + 569137e
commit fe6ff25
Show file tree

Hide file tree

Showing 10 changed files with 246 additions and 336 deletions.
diff --git a/website/src/pages/de/workshop/first-effects.mdx b/website/src/pages/de/workshop/first-effects.mdx
@@ -15,7 +15,6 @@ import Box from '@components/Box.astro';
 **low-pass filter**
 
 <MiniRepl
-  hideHeader
   client:visible
   tune={`note("<[c2 c3]*4 [bb1 bb2]*4 [f2 f3]*4 [eb2 eb3]*4>/2")
 .sound("sawtooth").lpf(800)`}
@@ -33,7 +32,6 @@ lpf = **l**ow **p**ass **f**ilter
 **filter automatisieren**
 
 <MiniRepl
-  hideHeader
   client:visible
   tune={`note("<[c2 c3]*4 [bb1 bb2]*4 [f2 f3]*4 [eb2 eb3]*4>/2")
 .sound("sawtooth").lpf("200 1000")`}
@@ -51,7 +49,6 @@ Später sehen wir, wie man mit Wellenformen Dinge automatisieren kann.
 **vowel = Vokal**
 
 <MiniRepl
-  hideHeader
   client:visible
   tune={`note("<[c3,g3,e4] [bb2,f3,d4] [a2,f3,c4] [bb2,g3,eb4]>/2")
 .sound("sawtooth").vowel("<a e i o>/2")`}
@@ -60,7 +57,6 @@ Später sehen wir, wie man mit Wellenformen Dinge automatisieren kann.
 **gain = Verstärkung**
 
 <MiniRepl
-  hideHeader
   client:visible
   tune={`stack(
   sound("hh*8").gain("[.25 1]*2"),
@@ -83,7 +79,6 @@ Bei Rhythmen ist die Dynamik (= Veränderungen der Lautstärke) sehr wichtig.
 Lass uns die obigen Beispiele kombinieren:
 
 <MiniRepl
-  hideHeader
   client:visible
   tune={`stack(
   stack(
@@ -108,7 +103,6 @@ Die 3 Teile (Drums, Bass, Akkorde) sind genau wie vorher, nur in einem `stack`,
 **Den Sound formen mit ADSR-Hüllkurve**
 
 <MiniRepl
-  hideHeader
   client:visible
   tune={`note("<c3 bb2 f3 eb3>")
 .sound("sawtooth").lpf(600)
@@ -145,7 +139,6 @@ Kannst du erraten, was die einzelnen Werte machen?
 **adsr-Kurznotation**
 
 <MiniRepl
-  hideHeader
   client:visible
   tune={`note("<c3 bb2 f3 eb3>")
 .sound("sawtooth").lpf(600)
@@ -156,7 +149,6 @@ Kannst du erraten, was die einzelnen Werte machen?
 **delay = Verzögerung**
 
 <MiniRepl
-  hideHeader
   client:visible
   tune={`stack(
   note("~ [<[d3,a3,f4]!2 [d3,bb3,g4]!2> ~]")
@@ -188,7 +180,6 @@ Was passiert, wenn du `.delay(".8:.06:.8")` schreibst? Kannst du erraten, was di
 **room aka reverb = Hall**
 
 <MiniRepl
-  hideHeader
   client:visible
   tune={`n("<4 [3@3 4] [<2 0> ~@16] ~>/2")
 .scale("D4:minor").sound("gm_accordion:2")
@@ -206,7 +197,6 @@ Füg auch ein Delay hinzu!
 **kleiner Dub-Tune**
 
 <MiniRepl
-  hideHeader
   client:visible
   tune={`stack(
   note("~ [<[d3,a3,f4]!2 [d3,bb3,g4]!2> ~]")
@@ -221,7 +211,6 @@ Füg auch ein Delay hinzu!
 Für echten Dub fehlt noch der Bass:
 
 <MiniRepl
-  hideHeader
   client:visible
   tune={`stack(
   note("~ [<[d3,a3,f4]!2 [d3,bb3,g4]!2> ~]")
@@ -245,7 +234,6 @@ Füg `.hush()` ans Ende eines Patterns im stack...
 **pan = Panorama**
 
 <MiniRepl
-  hideHeader
   client:visible
   tune={`sound("numbers:1 numbers:2 numbers:3 numbers:4")
 .pan("0 0.3 .6 1")
@@ -254,13 +242,13 @@ Füg `.hush()` ans Ende eines Patterns im stack...
 
 **speed = Geschwindigkeit**
 
-<MiniRepl hideHeader client:visible tune={`sound("bd rim").speed("<1 2 -1 -2>").room(.2)`} />
+<MiniRepl client:visible tune={`sound("bd rim").speed("<1 2 -1 -2>").room(.2)`} />
 
 **fast and slow = schnell und langsam**
 
 Mit `fast` und `slow` kann man das Tempo eines Patterns außerhalb der Mini-Notation ändern:
 
-<MiniRepl hideHeader client:visible tune={`sound("bd*2,~ rim").slow(2)`} />
+<MiniRepl client:visible tune={`sound("bd*2,~ rim").slow(2)`} />
 
 <Box>
 
@@ -272,13 +260,13 @@ Was passiert, wenn du den Wert automatisierst? z.b. `.fast("<1 [2 4]>")` ?
 
 Übrigens, innerhalb der Mini-Notation: `fast` ist `*` und `slow` ist `/`.
 
-<MiniRepl hideHeader client:visible tune={`sound("[bd*2,~ rim]*<1 [2 4]>")`} />
+<MiniRepl client:visible tune={`sound("[bd*2,~ rim]*<1 [2 4]>")`} />
 
 ## Automation mit Signalen
 
 Anstatt Werte schrittweise zu automatisieren, können wir auch sogenannte Signale benutzen:
 
-<MiniRepl hideHeader client:visible tune={`sound("hh*16").gain(sine)`} punchcard punchcardLabels={false} />
+<MiniRepl client:visible tune={`sound("hh*16").gain(sine)`} punchcard punchcardLabels={false} />
 
 <Box>
 
@@ -294,7 +282,7 @@ Der `gain`-Wert (Verstärkung) wird in der Visualisierung als Transparenz darges
 
 Signale bewegen sich standardmäßig zwischen 0 und 1. Wir können das mit `range` ändern:
 
-<MiniRepl hideHeader client:visible tune={`sound("hh*8").lpf(saw.range(500, 2000))`} />
+<MiniRepl client:visible tune={`sound("hh*8").lpf(saw.range(500, 2000))`} />
 
 `range` ist nützlich wenn wir Funktionen mit einem anderen Wertebereich als 0 und 1 automatisieren wollen (z.b. `lpf`)
 
@@ -307,7 +295,6 @@ Was passiert wenn du die beiden Werte vertauschst?
 Wir können die Geschwindigkeit der Automation mit slow / fast ändern:
 
 <MiniRepl
-  hideHeader
   client:visible
   tune={`note("<[c2 c3]*4 [bb1 bb2]*4 [f2 f3]*4 [eb2 eb3]*4>/2")
 .sound("sawtooth")
@@ -322,15 +309,15 @@ Die ganze Automation braucht nun 8 cycle bis sie sich wiederholt.
 
 ## Rückblick
 
-| Name  | Beispiel                                                                                           |
-| ----- | -------------------------------------------------------------------------------------------------- |
-| lpf   | <MiniRepl hideHeader client:visible tune={`note("c2 c3").s("sawtooth").lpf("<400 2000>")`} />      |
-| vowel | <MiniRepl hideHeader client:visible tune={`note("c3 eb3 g3").s("sawtooth").vowel("<a e i o>")`} /> |
-| gain  | <MiniRepl hideHeader client:visible tune={`s("hh*8").gain("[.25 1]*2")`} />                        |
-| delay | <MiniRepl hideHeader client:visible tune={`s("bd rim").delay(.5)`} />                              |
-| room  | <MiniRepl hideHeader client:visible tune={`s("bd rim").room(.5)`} />                               |
-| pan   | <MiniRepl hideHeader client:visible tune={`s("bd rim").pan("0 1")`} />                             |
-| speed | <MiniRepl hideHeader client:visible tune={`s("bd rim").speed("<1 2 -1 -2>")`} />                   |
-| range | <MiniRepl hideHeader client:visible tune={`s("hh*16").lpf(saw.range(200,4000))`} />                |
+| Name  | Beispiel                                                                                |
+| ----- | --------------------------------------------------------------------------------------- |
+| lpf   | <MiniRepl client:visible tune={`note("c2 c3").s("sawtooth").lpf("<400 2000>")`} />      |
+| vowel | <MiniRepl client:visible tune={`note("c3 eb3 g3").s("sawtooth").vowel("<a e i o>")`} /> |
+| gain  | <MiniRepl client:visible tune={`s("hh*8").gain("[.25 1]*2")`} />                        |
+| delay | <MiniRepl client:visible tune={`s("bd rim").delay(.5)`} />                              |
+| room  | <MiniRepl client:visible tune={`s("bd rim").room(.5)`} />                               |
+| pan   | <MiniRepl client:visible tune={`s("bd rim").pan("0 1")`} />                             |
+| speed | <MiniRepl client:visible tune={`s("bd rim").speed("<1 2 -1 -2>")`} />                   |
+| range | <MiniRepl client:visible tune={`s("hh*16").lpf(saw.range(200,4000))`} />                |
 
 Lass uns nun die für Tidal typischen [Pattern-Effekte anschauen](/de/workshop/pattern-effects).
diff --git a/website/src/pages/de/workshop/first-notes.mdx b/website/src/pages/de/workshop/first-notes.mdx
@@ -17,7 +17,6 @@ Jetzt schauen wir uns an wie man mit Tönen mit der `note` Funktion spielt.
 **Töne mit Zahlen**
 
 <MiniRepl
-  hideHeader
   client:visible
   tune={`note("48 52 55 59").sound("piano")`}
   claviature
@@ -39,7 +38,6 @@ Versuch auch mal Kommazahlen, z.B. 55.5 (beachte die englische Schreibweise von
 **Töne mit Buchstaben**
 
 <MiniRepl
-  hideHeader
   client:visible
   tune={`note("c e g b").sound("piano")`}
   claviature
@@ -57,7 +55,6 @@ Findest du Melodien die auch gleichzeitig ein Wort sind? Tipp: ☕ 🙈 🧚
 **Vorzeichen**
 
 <MiniRepl
-  hideHeader
   client:visible
   tune={`note("db eb gb ab bb").sound("piano")`}
   claviature
@@ -67,7 +64,6 @@ Findest du Melodien die auch gleichzeitig ein Wort sind? Tipp: ☕ 🙈 🧚
 />
 
 <MiniRepl
-  hideHeader
   client:visible
   tune={`note("c# d# f# g# a#").sound("piano")`}
   claviature
@@ -79,7 +75,6 @@ Findest du Melodien die auch gleichzeitig ein Wort sind? Tipp: ☕ 🙈 🧚
 **Andere Oktaven**
 
 <MiniRepl
-  hideHeader
   client:visible
   tune={`note("c2 e3 g4 b5").sound("piano")`}
   claviature
@@ -105,7 +100,7 @@ Später sehen wir auch noch ein paar Tricks die es uns erleichtern Töne zu spie
 
 Genau wie bei geräuschhaften Sounds können wir den Klang unserer Töne mit `sound` verändern:
 
-<MiniRepl hideHeader client:visible tune={`note("36 43, 52 59 62 64").sound("piano")`} />
+<MiniRepl client:visible tune={`note("36 43, 52 59 62 64").sound("piano")`} />
 
 <Box>
 
@@ -126,7 +121,6 @@ Probier ein paar sounds aus:
 **Zwischen Sounds hin und her wechseln**
 
 <MiniRepl
-  hideHeader
   client:visible
   tune={`note("48 67 63 [62, 58]")
 .sound("piano gm_electric_guitar_muted")`}
@@ -135,7 +129,6 @@ Probier ein paar sounds aus:
 **Gleichzeitige Sounds**
 
 <MiniRepl
-  hideHeader
   client:visible
   tune={`note("48 67 63 [62, 58]")
 .sound("piano, gm_electric_guitar_muted")`}
@@ -155,7 +148,7 @@ Wir schauen uns später noch mehr Möglichkeiten an wie man patterns kombiniert.
 
 {/* [c2 bb1 f2 eb2] */}
 
-<MiniRepl hideHeader client:visible tune={`note("[36 34 41 39]/4").sound("gm_acoustic_bass")`} punchcard />
+<MiniRepl client:visible tune={`note("[36 34 41 39]/4").sound("gm_acoustic_bass")`} punchcard />
 
 <Box>
 
@@ -171,7 +164,7 @@ Wenn eine Sequenz unabhängig von ihrem Inhalt immer gleich schnell bleiben soll
 
 **Eins pro Cycle per \< \>**
 
-<MiniRepl hideHeader client:visible tune={`note("<36 34 41 39>").sound("gm_acoustic_bass")`} punchcard />
+<MiniRepl client:visible tune={`note("<36 34 41 39>").sound("gm_acoustic_bass")`} punchcard />
 
 <Box>
 
@@ -190,7 +183,6 @@ usw..
 **Eine Sequenz pro Cycle**
 
 <MiniRepl
-  hideHeader
   client:visible
   tune={`note("<[36 48] [34 46] [41 53] [39 51]>")
 .sound("gm_acoustic_bass")`}
@@ -200,7 +192,6 @@ usw..
 oder auch...
 
 <MiniRepl
-  hideHeader
   client:visible
   tune={`note("<[36 48]*4 [34 46]*4 [41 53]*4 [39 51]*4>/2")
 .sound("gm_acoustic_bass")`}
@@ -212,7 +203,6 @@ oder auch...
 Ähnlich wie Unter-Sequenzen, kann auch `<...>` innerhalb einer Sequenz verwendet werden:
 
 <MiniRepl
-  hideHeader
   client:visible
   tune={`note("60 <63 62 65 63>")
 .sound("gm_xylophone")`}
@@ -222,7 +212,6 @@ oder auch...
 Das ist auch praktisch für atonale Sounds:
 
 <MiniRepl
-  hideHeader
   client:visible
   tune={`sound("bd*2, ~ <sd cp>, [~ hh]*2")
 .bank("RolandTR909")`}
@@ -235,7 +224,6 @@ Es kann mühsam sein die richtigen Noten zu finden wenn man alle zur Verfügung
 Mit Skalen ist das einfacher:
 
 <MiniRepl
-  hideHeader
   client:visible
   tune={`n("0 2 4 <[6,8] [7,9]>")
 .scale("C:minor").sound("piano")`}
@@ -262,7 +250,6 @@ Probier verschiedene Skalen:
 Wie alle Funktionen können auch Skalen mit einem Pattern automatisiert werden:
 
 <MiniRepl
-  hideHeader
   client:visible
   tune={`n("<0 -3>, 2 4 <[6,8] [7,9]>")
 .scale("<C:major D:mixolydian>/4")
@@ -283,7 +270,7 @@ Nimm dir Zeit um herauszufinden welche Skalen du magst.
 
 **Verlängern mit @**
 
-<MiniRepl hideHeader client:visible tune={`note("c@3 eb").sound("gm_acoustic_bass")`} punchcard />
+<MiniRepl client:visible tune={`note("c@3 eb").sound("gm_acoustic_bass")`} punchcard />
 
 <Box>
 
@@ -296,7 +283,6 @@ Spiel mit der Länge!
 **Unter-Sequenzen verlängern**
 
 <MiniRepl
-  hideHeader
   client:visible
   tune={`n("<[4@2 4] [5@2 5] [6@2 6] [5@2 5]>*2")
 .scale("<C2:mixolydian F2:mixolydian>/4")
@@ -314,7 +300,7 @@ Das nennt man auch manchmal `triolen swing`. Es ist ein typischer Rhythmus im Bl
 
 **Wiederholen**
 
-<MiniRepl hideHeader client:visible tune={`note("c!2 [eb,<g a bb a>]").sound("piano")`} punchcard />
+<MiniRepl client:visible tune={`note("c!2 [eb,<g a bb a>]").sound("piano")`} punchcard />
 
 <Box>
 
@@ -328,27 +314,26 @@ Was ist der Unterschied?
 
 Das haben wir in diesem Kapitel gelernt:
 
-| Concept      | Syntax | Example                                                             |
-| ------------ | ------ | ------------------------------------------------------------------- |
-| Verlangsamen | \/     | <MiniRepl hideHeader client:visible tune={`note("[c a f e]/2")`} /> |
-| Alternativen | \<\>   | <MiniRepl hideHeader client:visible tune={`note("c <e g>")`} />     |
-| Verlängern   | @      | <MiniRepl hideHeader client:visible tune={`note("c@3 e")`} />       |
-| Wiederholen  | !      | <MiniRepl hideHeader client:visible tune={`note("c!3 e")`} />       |
+| Concept      | Syntax | Example                                                  |
+| ------------ | ------ | -------------------------------------------------------- |
+| Verlangsamen | \/     | <MiniRepl client:visible tune={`note("[c a f e]/2")`} /> |
+| Alternativen | \<\>   | <MiniRepl client:visible tune={`note("c <e g>")`} />     |
+| Verlängern   | @      | <MiniRepl client:visible tune={`note("c@3 e")`} />       |
+| Wiederholen  | !      | <MiniRepl client:visible tune={`note("c!3 e")`} />       |
 
 Neue Funktionen:
 
-| Name  | Description                             | Example                                                                                      |
-| ----- | --------------------------------------- | -------------------------------------------------------------------------------------------- |
-| note  | Tonhöhe als Buchstabe oder Zahl         | <MiniRepl hideHeader client:visible tune={`note("b g e c").sound("piano")`} />               |
-| scale | Interpretiert `n` als Skalenstufe       | <MiniRepl hideHeader client:visible tune={`n("6 4 2 0").scale("C:minor").sound("piano")`} /> |
-| stack | Spiele mehrere Patterns parallel (s.u.) | <MiniRepl hideHeader client:visible tune={`stack(s("bd sd"),note("c eb g"))`} />             |
+| Name  | Description                             | Example                                                                           |
+| ----- | --------------------------------------- | --------------------------------------------------------------------------------- |
+| note  | Tonhöhe als Buchstabe oder Zahl         | <MiniRepl client:visible tune={`note("b g e c").sound("piano")`} />               |
+| scale | Interpretiert `n` als Skalenstufe       | <MiniRepl client:visible tune={`n("6 4 2 0").scale("C:minor").sound("piano")`} /> |
+| stack | Spiele mehrere Patterns parallel (s.u.) | <MiniRepl client:visible tune={`stack(s("bd sd"),note("c eb g"))`} />             |
 
 ## Beispiele
 
 **Bassline**
 
 <MiniRepl
-  hideHeader
   client:visible
   tune={`note("<[c2 c3]*4 [bb1 bb2]*4 [f2 f3]*4 [eb2 eb3]*4>/2")
 .sound("gm_synth_bass_1")
@@ -358,7 +343,6 @@ Neue Funktionen:
 **Melodie**
 
 <MiniRepl
-  hideHeader
   client:visible
   tune={`n(\`<
 [~ 0] 2 [0 2] [~ 2]
@@ -372,7 +356,6 @@ Neue Funktionen:
 **Drums**
 
 <MiniRepl
-  hideHeader
   client:visible
   tune={`sound("bd*2, ~ <sd cp>, [~ hh]*2")
 .bank("RolandTR909")`}
@@ -387,7 +370,6 @@ Das geht mit `stack` 😙
 </Box>
 
 <MiniRepl
-  hideHeader
   client:visible
   tune={`stack(
   note("<[c2 c3]*4 [bb1 bb2]*4 [f2 f3]*4 [eb2 eb3]*4>/2")