- translate getting-started

- fix de links
- link english docs / german workshop

website/src/config.ts

@@ -44,12 +44,13 @@ export type Sidebar = Record<(typeof KNOWN_LANGUAGE_CODES)[number], SidebarLang>
 export const SIDEBAR: Sidebar = {
   de: {
     Workshop: [
-      { text: 'Intro', link: 'de/workshop/intro' },
+      { text: 'Intro', link: 'de/workshop/getting-started' },
       { text: 'Erste Sounds', link: 'de/workshop/first-sounds' },
       { text: 'Erste Töne', link: 'de/workshop/first-notes' },
       { text: 'Erste Effekte', link: 'de/workshop/first-effects' },
       { text: 'Pattern Effekte', link: 'de/workshop/pattern-effects' },
       { text: 'Rückblick', link: 'de/workshop/recap' },
+      { text: 'More Pages in English', link: 'workshop/getting-started' },
     ],
   },
   en: {
@@ -60,6 +61,7 @@ export const SIDEBAR: Sidebar = {
       { text: 'First Effects', link: 'workshop/first-effects' },
       { text: 'Pattern Effects', link: 'workshop/pattern-effects' },
       { text: 'Recap', link: 'workshop/recap' },
+      { text: 'Workshop in German', link: 'de/workshop/getting-started' },
     ],
     'Making Sound': [
       { text: 'Samples', link: 'learn/samples' },

website/src/pages/de/workshop/first-effects.mdx

@@ -332,3 +332,5 @@ Die ganze Automation braucht nun 8 cycle bis sie sich wiederholt.
 | 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))`} />                |
+
+Lass uns nun die für Tidal typischen [Pattern Effekte anschauen](/de/workshop/pattern-effects).

website/src/pages/de/workshop/first-notes.mdx

@@ -387,4 +387,4 @@ Das geht mit `stack` 😙
 />
 
 Das hört sich doch langsam nach echter Musik an!
-Wir haben Sounds, wir haben Töne.. noch ein Puzzleteil fehlt: [Effekte](/workshop/first-effects)
+Wir haben Sounds, wir haben Töne.. noch ein Puzzleteil fehlt: [Effekte](/de/workshop/first-effects)

website/src/pages/de/workshop/first-sounds.mdx

@@ -7,7 +7,7 @@ import { MiniRepl } from '@src/docs/MiniRepl';
 import Box from '@components/Box.astro';
 import QA from '@components/QA';
 
-## Erste Sounds
+# Erste Sounds
 
 Dies ist das erste Kapitel im Strudel Workshop, schön dich an Bord zu haben!
 
@@ -306,4 +306,4 @@ insect [crow metal] ~ ~,
 />
 
 Jetzt haben wir eine grundlegende Ahnung davon wie man mit Strudel Beats baut!
-Im nächsten Kapitel werden wir ein paar [Töne spielen](/workshop/first-notes).
+Im nächsten Kapitel werden wir ein paar [Töne spielen](/de/workshop/first-notes).

website/src/pages/de/workshop/getting-started.mdx

@@ -0,0 +1,74 @@
+---
+title: Intro
+layout: ../../../layouts/MainLayout.astro
+---
+
+import { MiniRepl } from '../../../docs/MiniRepl';
+
+# Willkommen
+
+<img src="/icons/strudel_icon.png" className="w-32 animate-pulse md:float-right ml-8" />
+
+Willkommen zum Strudel Workshop!
+Du hast den richtigen Ort gefunden wenn du lernen möchstest wie man mit Code Musik macht.
+
+## Was ist Strudel
+
+Mit Strudel kann man dynamische Musikstücke in Echtzeit schreiben.
+Es ist eine in JavaScript entwickelte Version von [Tidal Cycles](https://tidalcycles.org/) und wurde 2022 von Alex McLean und Felix Roos initiiert.
+Tidal Cycles, auch bekannt unter dem Namen Tidal, ist eine Computersprache für algorithmische Muster.
+Obwohl sie meistens für die Erzeugung von Musik eingesetzt wird, kann sie für jede Art von Tätigkeit eingesetzt werden,
+in der Muster eine Rolle spielen.
+
+Du brauchst keine Erfahrung in JavaScript oder Tidal Cycles um mit Strudel Musik zu machen.
+Dieser interaktive Workshop leitet dich spielerisch durch die Grundlagen von Strudel.
+Der beste Ort um mit Strudel Musik zu machen ist das [Strudel REPL](https://strudel.tidalcycles.org/).
+
+## Was kann man mit Strudel machen?
+
+- Musik Live Coding: In Echtzeit mit Code Musik machen
+- Algorithmische Komposition: Schreibe Musik mithilfe Tidals einzigartiger Sprache für Muster
+- Lehren: Strudel eignet sich gut für Lehrende, da keine Installation nötig ist und die Sprache kein theoretisches Vorwissen erfordert.
+- Mit anderen Musik-Anwendungen kombinieren: Per MIDI oder OSC kann Strudel als flexibler Sequencer mit jedem Setup kombiniert werden
+
+## Beispiel
+
+Hier ist ein Beispiel wie Strudel klingen kann:
+
+<MiniRepl
+  client:idle
+  tune={`stack(
+  // drums
+  s("bd,[~ <sd!3 sd(3,4,2)>],hh*8")
+  .speed(perlin.range(.8,.9)), // random sample speed variation
+  // bassline
+  "<a1 b1\*2 a1(3,8) e2>" 
+  .off(1/8,x=>x.add(12).degradeBy(.5)) // random octave jumps
+  .add(perlin.range(0,.5)) // random pitch variation
+  .superimpose(add(.05)) // add second, slightly detuned voice
+  .note() // wrap in "note"
+  .decay(.15).sustain(0) // make each note of equal length
+  .s('sawtooth') // waveform
+  .gain(.4) // turn down
+  .cutoff(sine.slow(7).range(300,5000)), // automate cutoff
+  // chords
+  "<Am7!3 <Em7 E7b13 Em7 Ebm7b5>>".voicings('lefthand') 
+  .superimpose(x=>x.add(.04)) // add second, slightly detuned voice
+  .add(perlin.range(0,.5)) // random pitch variation
+  .note() // wrap in "note"
+  .s('sawtooth') // waveform
+  .gain(.16) // turn down
+  .cutoff(500) // fixed cutoff
+  .attack(1) // slowly fade in
+)
+.slow(3/2)`}
+/>
+
+Mehr Beispiele gibt es [hier](/examples).
+
+Du kannst auch im [Strudel REPL](https://strudel.tidalcycles.org/) auf `shuffle` klicken um ein zufälliges Beispiel zu hören.
+
+## Workshop
+
+Der beste Weg um Strudel zu lernen ist der nun folgende Workshop.
+Wenn du bereit bist, lass uns loslegen mit deinen [ersten Sounds](/de/workshop/first-sounds).

website/src/pages/de/workshop/intro.mdx

@@ -1,59 +0,0 @@
----
-title: Introduction
-layout: ../../../layouts/MainLayout.astro
----
-
-# Welcome
-
-Welcome to the Strudel documentation pages!
-You've come to the right place if you want to learn how to make music with code.
-
-## What is Strudel?
-
-With Strudel, you can expressively write dynamic music pieces.
-It is an official port of the [Tidal Cycles](https://tidalcycles.org/) pattern language to JavaScript.
-You don't need to know JavaScript or Tidal Cycles to make music with Strudel.
-This interactive tutorial will guide you through the basics of Strudel.
-The best place to actually make music with Strudel is the [Strudel REPL](https://strudel.tidalcycles.org/)
-
-## What can you do with Strudel?
-
-- live code music: make music with code in real time
-- algorithmic composition: compose music using tidal's unique approach to pattern manipulation
-- teaching: focussing on a low barrier of entry, Strudel is a good fit for teaching music and code at the same time.
-- integrate into your existing music setup: either via MIDI or OSC, you can use Strudel as a really flexible sequencer
-
-## Example
-
-Here is an example of how strudel can sound:
-
-<MiniRepl
-  client:idle
-  tune={`stack(
-  // drums
-  s("bd,[~ <sd!3 sd(3,4,2)>],hh*8")
-  .speed(perlin.range(.8,.9)), // random sample speed variation
-  // bassline
-  "<a1 b1\*2 a1(3,8) e2>" 
-  .off(1/8,x=>x.add(12).degradeBy(.5)) // random octave jumps
-  .add(perlin.range(0,.5)) // random pitch variation
-  .superimpose(add(.05)) // add second, slightly detuned voice
-  .note() // wrap in "note"
-  .decay(.15).sustain(0) // make each note of equal length
-  .s('sawtooth') // waveform
-  .gain(.4) // turn down
-  .cutoff(sine.slow(7).range(300,5000)), // automate cutoff
-  // chords
-  "<Am7!3 <Em7 E7b13 Em7 Ebm7b5>>".voicings('lefthand') 
-  .superimpose(x=>x.add(.04)) // add second, slightly detuned voice
-  .add(perlin.range(0,.5)) // random pitch variation
-  .note() // wrap in "note"
-  .s('sawtooth') // waveform
-  .gain(.16) // turn down
-  .cutoff(500) // fixed cutoff
-  .attack(1) // slowly fade in
-)
-.slow(3/2)`}
-/>
-
-To hear more, go to the [Strudel REPL](https://strudel.tidalcycles.org/) and press shuffle to hear a random example pattern.

website/src/pages/workshop/first-effects.mdx

@@ -331,3 +331,5 @@ The whole automation will now take 8 cycles to repeat.
 | 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))`} />                |
+
+Let us now take a look at some of Tidal's typical [pattern effects](/de/workshop/pattern-effects).