i18n(de): tutorial

src/content/docs/de/tutorial/3-components/1.mdx

@@ -0,0 +1,156 @@
+---
+type: tutorial
+title: Erstelle eine wiederverwendbare Navigationskomponente
+description: |-
+  Tutorial: Baue deinen ersten Astro-Blog —
+  Ersetze Elemente, die auf mehreren Seiten wiederholt werden, durch eine wiederverwendbare Komponente
+i18nReady: true
+---
+
+import Badge from '~/components/Badge.astro';
+import Box from '~/components/tutorial/Box.astro';
+import Checklist from '~/components/Checklist.astro';
+import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
+import Option from '~/components/tutorial/Option.astro';
+import PreCheck from '~/components/tutorial/PreCheck.astro';
+import { Steps } from '@astrojs/starlight/components';
+
+Nun, da du denselben HTML-Code auf mehreren Seiten deiner Astro-Website wiederholt hast, ist es an der Zeit, diesen doppelten Inhalt durch eine wiederverwendbare Astro-Komponente zu ersetzen!
+
+<PreCheck>
+  - Erstelle einen neuen Ordner für Komponenten
+  - Baue eine Astro-Komponente, um deine Navigationslinks anzuzeigen
+  - Ersetze den bestehenden HTML-Code durch eine neue, wiederverwendbare Navigationskomponente
+</PreCheck>
+
+## Erstelle einen neuen `src/components/`-Ordner
+
+Um `.astro`-Dateien aufzunehmen, die HTML generieren, aber keine neuen Seiten auf deiner Website werden, benötigst du einen neuen Ordner in deinem Projekt: `src/components/`.
+
+## Erstelle eine Navigationskomponente
+
+<Steps>
+1. Erstelle eine neue Datei: `src/components/Navigation.astro`.
+
+2. Kopiere deine Links für die Navigation zwischen den Seiten aus dem oberen Bereich einer beliebigen Seite und füge sie in deine neue Datei `Navigation.astro` ein:
+
+    ```astro title="src/components/Navigation.astro" "---"
+    ---
+    ---
+    <a href="/">Startseite</a>
+    <a href="/about/">Über mich</a>
+    <a href="/blog/">Blog</a>
+    ```
+    :::tip
+    Wenn im Frontmatter deiner `.astro`-Datei nichts steht, musst du auch die Code-Abgrenzung nicht schreiben. Du kannst sie jederzeit wieder hinzufügen, wenn du sie brauchst.
+    :::
+</Steps>
+
+### Importieren und Verwenden von Navigation.astro
+
+<Steps>
+1. Gehe zurück zu `index.astro` und importiere deine neue Komponente innerhalb der Code-Abgrenzung:
+
+    ```astro title="src/pages/index.astro" ins={2}
+    import "../styles/global.css";
+
+    const pageTitle = "Startseite";
+    ---
+    import Navigation from '../components/Navigation.astro';
+    ---
+    ```
+
+2. Ersetze dann darunter die vorhandenen Navigations-HTML-Link-Elemente durch die neu importierte Navigationskomponente:
+
+    ```astro title="src/pages/index.astro" del={1-3} ins={4}
+    <a href="/">Startseite</a>
+    <a href="/about/">Über mich</a>
+    <a href="/blog/">Blog</a>
+    <Navigation />
+    ```
+
+3. Überprüfe die Vorschau in deinem Browser und stelle fest, dass sie genau gleich aussehen sollte … und das ist genau das, was du erreichen wolltest!
+</Steps>
+
+Deine Website enthält nun denselben HTML-Code wie zuvor. Aber jetzt werden diese drei Zeilen Code durch deine `<Navigation />`-Komponente bereitgestellt.
+
+<Box icon="puzzle-piece">
+
+## Probiere es selbst aus - Füge Navigation zum Rest deiner Website hinzu
+
+Importiere die `<Navigation />`-Komponente und verwende sie auf den anderen beiden Seiten deiner Website (`about.astro` und `blog.astro`) mit derselben Methode.
+
+Vergiss nicht,
+- eine Import-Anweisung am Anfang des Komponenten-Skripts, innerhalb der Code-Abgrenzung, hinzuzufügen.
+- den vorhandenen Code durch die Navigationskomponente zu ersetzen.
+
+</Box>
+
+:::note
+Wenn du deinen Code umstrukturierst, aber das Aussehen deiner Seite im Browser nicht veränderst, **refaktorisierst** du. In dieser Lektion wirst du mehrmals **refaktorisieren**, indem du Teile deines Seiten-HTMLs durch Komponenten ersetzt.
+
+Das ermöglicht es dir, schnell mit beliebigem funktionierenden Code zu beginnen, der oft in deinem Projekt dupliziert wird. Dann kannst du das Design deines bestehenden Codes schrittweise verbessern, ohne das äußere Erscheinungsbild deiner Website zu verändern.
+:::
+
+
+<Box icon="question-mark">
+
+### Teste dein Wissen
+
+
+1. Das kannst du tun, wenn Elemente auf mehreren Seiten wiederholt werden:
+    <MultipleChoice>
+      <Option>
+        den Entwicklungsserver neu starten
+      </Option>
+      <Option isCorrect>
+        Refaktorisierung, um eine wiederverwendbare Komponente zu nutzen
+      </Option>
+      <Option>
+        eine neue Seite erstellen
+      </Option>
+    </MultipleChoice>
+
+2. Astro-Komponenten sind:
+    <MultipleChoice>
+      <Option>
+        wiederverwendbar
+      </Option>
+      <Option>
+        Fragmente von HTML
+      </Option>
+      <Option isCorrect>
+        beides!
+      </Option>
+    </MultipleChoice>
+
+3. Astro-Komponenten erstellen automatisch eine neue Seite auf deiner Website, wenn du …
+    <MultipleChoice>
+      <Option>
+        `<html></html>` einfügst
+      </Option>
+      <Option>
+        refaktorisierst
+      </Option>
+      <Option isCorrect>
+        die `.astro`-Datei innerhalb von `src/pages/` ablegst
+      </Option>
+    </MultipleChoice>
+</Box>
+
+<Box icon="check-list">
+
+## Checkliste
+
+<Checklist>
+- [ ] Ich kann Inhalte in wiederverwendbare Komponenten umwandeln.
+- [ ] Ich kann eine neue Komponente zu einer `.astro`-Seite hinzufügen.
+</Checklist>
+
+</Box>
+
+### Ressourcen
+
+- [Mehr über Astro-Komponenten](/de/basics/astro-components/)
+
+- [Refactoring](https://refactoring.com/) <Badge class="neutral-badge" text="extern" />