From 6eb9f7d1e652eb8f505261683549341e97bc4414 Mon Sep 17 00:00:00 2001 From: Josefine Schaefer <53796513+josefineschaefer@users.noreply.github.com> Date: Thu, 4 Apr 2024 20:15:24 +0200 Subject: [PATCH 01/79] i18n(de): translate 0-introduction/index to German (#7734) * Create index in German.mdx * Apply suggestions from code review Co-authored-by: Because789 * fix description --------- Co-authored-by: Because789 Co-authored-by: Yan <61414485+yanthomasdev@users.noreply.github.com> --- .../docs/de/tutorial/0-introduction/index.mdx | 39 +++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 src/content/docs/de/tutorial/0-introduction/index.mdx diff --git a/src/content/docs/de/tutorial/0-introduction/index.mdx b/src/content/docs/de/tutorial/0-introduction/index.mdx new file mode 100644 index 0000000000000..6c086f2300899 --- /dev/null +++ b/src/content/docs/de/tutorial/0-introduction/index.mdx @@ -0,0 +1,39 @@ +--- +type: tutorial +unitTitle: 'Hallo Welt!' +title: Baue deinen ersten Astro-Blog +description: >- + Lerne die Grundlagen von Astro mit einem projektbasierten Tutorial. + Alles Hintergrundwissen, das du brauchst, um loszulegen! +i18nReady: true +--- +import Badge from '~/components/Badge.astro'; +import Checklist from '~/components/Checklist.astro'; +import Box from '~/components/tutorial/Box.astro'; +import Lede from '~/components/tutorial/Lede.astro'; + + + In diesem Tutorial lernst du die wichtigsten Funktionen von Astro, in dem du einen voll funktionsfähigen Blog von Grund auf bis zur finalen Veröffentlichung erstellst! 🚀 + +Auf dem Weg dorthin wirst du: +- Deine Entwicklungsumgebung einrichen +- Seiten und Blogbeiträge für deine Website erstellen +- Astro-Komponenten verwenden +- Lokale Dateien abfragen und bearbeiten +- Interaktivität zu deiner Website hinzufügen +- Deine Website im Internet veröffentlichen + +Möchtest du eine Vorschau von dem sehen, was du bauen wirst? Du kannst das fertige Projekt auf [GitHub](https://github.com/withastro/blog-tutorial-demo) oder [StackBlitz](https://stackblitz.com/github/withastro/blog-tutorial-demo/tree/complete?file=src%2Fpages%2Findex.astro) ansehen. + +:::note +Wenn du lieber damit anfangen würdest, Astro mit einer bereits erstellten Astro-Website zu erkunden, kannst du https://astro.new besuchen, eine Startervorlage auswählen und diese in einem Online-Editor bearbeiten. +::: + + + +## Checklist + + +- [ ] Sieht gut aus! Ich bin bereit loszulegen! + + From 34bae56c451b05ade2c95767dce39398ba427aea Mon Sep 17 00:00:00 2001 From: Josefine Schaefer <53796513+josefineschaefer@users.noreply.github.com> Date: Thu, 4 Apr 2024 20:51:32 +0200 Subject: [PATCH 02/79] i18n(de): add 1-setup to german blog tutorial (#7602) * i18n(de): add 1-setup to german blog tutorial Adding German translation to Blog tutorial. * Apply suggestions from code review Implement feedback from review. Co-authored-by: Because789 * Fehlermeldung im Original Korrektur nach Feedback. * Update src/content/docs/de/tutorial/1-setup/1.mdx Co-authored-by: Because789 --------- Co-authored-by: Because789 Co-authored-by: Yan <61414485+yanthomasdev@users.noreply.github.com> --- src/content/docs/de/tutorial/1-setup/1.mdx | 120 +++++++++++++++++++++ 1 file changed, 120 insertions(+) create mode 100644 src/content/docs/de/tutorial/1-setup/1.mdx diff --git a/src/content/docs/de/tutorial/1-setup/1.mdx b/src/content/docs/de/tutorial/1-setup/1.mdx new file mode 100644 index 0000000000000..f132a2ecf3eab --- /dev/null +++ b/src/content/docs/de/tutorial/1-setup/1.mdx @@ -0,0 +1,120 @@ +--- +type: tutorial +title: Bereite deine Entwicklungsumgebung vor +description: |- + Tutorial: Baue deinen ersten Astro-Blog — + Installiere die lokalen Tools die du brauchst, um das Tutorial abzuschließen +i18nReady: true +--- +import Badge from '~/components/Badge.astro'; +import Checklist from '~/components/Checklist.astro'; +import Box from '~/components/tutorial/Box.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'; + + + - Installiere alle Tools, die du brauchst, um deine Astro-Website zu bauen + + +## Hol dir alle Tools, die du brauchst + +### Terminal + +Du wirst die **Kommandozeile (Terminal)** benutzen, um dein Astro-Projekt zu erstellen und wichtige Befehle zum Erstellen, Entwickeln und Testen deiner Website auszuführen. +Du kannst auf die Kommandozeile über ein lokales Terminalprogramm für dein Betriebssystem zugreifen. Gängige Anwendungen sind **Terminal** (MacOS/Linux), **Eingabeaufforderung** (Windows) und **Termux** (Android). Eine davon wird wahrscheinlich bereits auf deinem Gerät vorhanden sein. + +### Node.js + +Damit Astro auf deinem Computer läuft, solltest du [**Node.js**](https://nodejs.org/en/) installiert haben, Version `v18.14.1` oder neuer. + +Um zu überprüfen, ob du bereits eine kompatible Version installiert hast, führe den folgenden Befehl in deinem Terminal aus: + +```sh +node -v + +// Beispiel-Ergebnis +v18.14.1 +``` + +Wenn der Befehl eine Versionsnummer ergibt, die neuer als `v18.14.1` ist, kannst du direkt loslegen! + +Wenn der Befehl eine Fehlermeldung wie `Command 'node' not found` oder eine Versionsnummer älter als `v18.14.1` zurückgibt, musst du [eine kompatible Node.js-Version installieren](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm). + +### Code-Editor + +Zusätzlich musst du einen **Code-Editor** herunterladen und installieren, um deinen Code zu schreiben. + +:::tip[Wir verwenden...] +Dieses Tutorial verwendet **VS Code**, aber du kannst jeden Editor für dein Betriebssystem verwenden. +::: + + +1. [VS Code herunterladen und installieren](https://code.visualstudio.com/#alt-downloads) oder einen anderen Code-Editor deiner Wahl. + + + + + +### Teste dein Wissen + +Welches der Folgenden ist... +1. Ein Code-Editor, um Änderungen an deinen Dokumenten oder ihrem Inhalt zu machen? + + + + + + + +2. Ein Online-Versionierungsdienst für dein Repository? + + + + + + + +3. +Eine Anwendung zum Ausführen von Befehlen? + + + + + + + + + +## Checkliste für die nächsten Schritte + + +- [ ] Ich kann auf die Kommandozeile in einem Terminal zugreifen. +- [ ] Ich habe Node.js installiert. +- [ ] Ich habe einen Code-Editor wie VS Code. + + + + +### Ressourcen + +-

[FreeCodeCamp.org](https://freecodecamp.org) external — eine kostenlose Bildungswebsite mit vollständigen Lehrgängen oder kurzen Auffrischungskursen in HTML, CSS, JS und mehr.

From fbf98d2286d84652a5b7751d812cccdc56b58258 Mon Sep 17 00:00:00 2001 From: Max <51922004+Maxframe@users.noreply.github.com> Date: Tue, 9 Apr 2024 13:52:36 +0200 Subject: [PATCH 03/79] i18n(de): add `tutorial/3-components/index` (#7795) * add `3-components/index` * Update index.mdx --- .../docs/de/tutorial/3-components/index.mdx | 39 +++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 src/content/docs/de/tutorial/3-components/index.mdx diff --git a/src/content/docs/de/tutorial/3-components/index.mdx b/src/content/docs/de/tutorial/3-components/index.mdx new file mode 100644 index 0000000000000..8935a9d2a525d --- /dev/null +++ b/src/content/docs/de/tutorial/3-components/index.mdx @@ -0,0 +1,39 @@ +--- +type: tutorial +unitTitle: Erstelle und gestalte mit Astro-Komponenten +title: 'Check-in: Einheit 3 - Komponenten' +description: |- + Tutorial: Baue deinen ersten Astro-Blog — + Erstelle Astro-Komponenten, um Code für gemeinsame Elemente auf deiner Website wiederzuverwenden +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'; + + +Nachdem du bereits `.astro`- und `.md`-Dateien für die Generierung kompletter Seiten deiner Website eingesetzt hast, wird es nun Zeit, mit Astro-Komponenten kleinere HTML-Blöcke zu erstellen und wiederzuverwenden! + +## Ausblick + +In dieser Einheit lernst du, wie du **Astro-Komponenten** erstellst, um Code für häufig genutzte Elemente deiner Website effektiv wiederzuverwenden. + +Du wirst folgende Komponenten bauen: +- Eine Navigationskomponente, die ein Menü mit Links zu deinen Seiten darstellt +- Eine Fußzeilenkomponente, die am Ende jeder Seite eingefügt wird +- Eine Social-Media-Komponente, die in der Fußzeile verwendet wird und auf Profilseiten verlinkt +- Eine interaktive Hamburger-Menü-Komponente für die Navigation auf Mobilgeräten + +Dabei wirst du CSS und JavaScript verwenden, um ein responsives Design zu erstellen, das auf Bildschirmgrößen und Benutzereingaben reagiert. + + + + +## Checkliste + + +- [ ] Ich bin bereit, einige Astro-Komponenten zu bauen! + + From 00841cdde15225430be32d6aab0cddb8ce0e8146 Mon Sep 17 00:00:00 2001 From: Max <51922004+Maxframe@users.noreply.github.com> Date: Thu, 11 Apr 2024 19:48:16 +0200 Subject: [PATCH 04/79] i18n(de): add `tutorial/3-components/1` (#7796) * add `3-components/1` * fixing typos round 1 * Update src/content/docs/de/tutorial/3-components/1.mdx Co-authored-by: Timon Jurschitsch <103483059+DerTimonius@users.noreply.github.com> --------- Co-authored-by: Timon Jurschitsch <103483059+DerTimonius@users.noreply.github.com> Co-authored-by: Yan <61414485+yanthomasdev@users.noreply.github.com> --- .../docs/de/tutorial/3-components/1.mdx | 156 ++++++++++++++++++ 1 file changed, 156 insertions(+) create mode 100644 src/content/docs/de/tutorial/3-components/1.mdx diff --git a/src/content/docs/de/tutorial/3-components/1.mdx b/src/content/docs/de/tutorial/3-components/1.mdx new file mode 100644 index 0000000000000..61fab8de2afc4 --- /dev/null +++ b/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! + + + - 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 + + +## 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 + + +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" "---" + --- + --- + Home + Über mich + Blog + ``` + :::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. + ::: + + +### Importieren und Verwenden von Navigation.astro + + +1. Gehe zurück zu `index.astro` und importiere deine neue Komponente innerhalb der Code-Abgrenzung: + + ```astro title="src/pages/index.astro" + --- + 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} + Home + Über mich + Blog + + ``` + +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! + + +Deine Website enthält nun denselben HTML-Code wie zuvor. Aber jetzt werden diese drei Zeilen Code durch deine ``-Komponente bereitgestellt. + + + +## Probiere es selbst aus - Füge Navigation zum Rest deiner Website hinzu + +Importiere die ``-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. + + + +:::note +Wenn du deinen Code umstrukturierst, aber das Aussehen deiner Seite im Browser nicht veränderst, **refaktorisierst** du. In dieser Einheit 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. +::: + + + + + +### Test your knowledge + + + +1. Das kannst du tun, wenn Elemente auf mehreren Seiten wiederholt werden: + + + + + + +2. Astro-Komponenten sind: + + + + + + +3. Astro-Komponenten erstellen automatisch eine neue Seite auf deiner Website, wenn du... + + + + + + + + + +## Checkliste + + +- [ ] Ich kann Inhalte in wiederverwendbare Komponenten umwandeln. +- [ ] Ich kann eine neue Komponente zu einer `.astro`-Seite hinzufügen. + + + + +### Ressourcen + +- [Mehr über Astro-Komponenten](/de/basics/astro-components/) + +- [Refactoring](https://refactoring.com/) extern From 5c184bb8b7d2cfbcbcbbe9f3b5edcf2ad2d25570 Mon Sep 17 00:00:00 2001 From: Yan <61414485+yanthomasdev@users.noreply.github.com> Date: Mon, 15 Apr 2024 15:26:00 -0300 Subject: [PATCH 05/79] Add missing fragment Co-authored-by: Max <51922004+Maxframe@users.noreply.github.com> --- src/content/docs/de/tutorial/3-components/1.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/de/tutorial/3-components/1.mdx b/src/content/docs/de/tutorial/3-components/1.mdx index 61fab8de2afc4..4594cd93078b5 100644 --- a/src/content/docs/de/tutorial/3-components/1.mdx +++ b/src/content/docs/de/tutorial/3-components/1.mdx @@ -94,7 +94,7 @@ Das ermöglicht es dir, schnell mit beliebigem funktionierenden Code zu beginnen -### Test your knowledge +### Teste dein Wissen From 49e91ddb984054d8a09276f3d6549a525ba03a4b Mon Sep 17 00:00:00 2001 From: Max <51922004+Maxframe@users.noreply.github.com> Date: Tue, 23 Apr 2024 18:10:06 +0200 Subject: [PATCH 06/79] i18n(de): add `tutorial/3-components/3` (#7975) * add translation * first batch of typos * Update src/content/docs/de/tutorial/3-components/3.mdx Co-authored-by: Timon Jurschitsch <103483059+DerTimonius@users.noreply.github.com> --------- Co-authored-by: Timon Jurschitsch <103483059+DerTimonius@users.noreply.github.com> --- .../docs/de/tutorial/3-components/3.mdx | 211 ++++++++++++++++++ 1 file changed, 211 insertions(+) create mode 100644 src/content/docs/de/tutorial/3-components/3.mdx diff --git a/src/content/docs/de/tutorial/3-components/3.mdx b/src/content/docs/de/tutorial/3-components/3.mdx new file mode 100644 index 0000000000000..53ae713cfdee1 --- /dev/null +++ b/src/content/docs/de/tutorial/3-components/3.mdx @@ -0,0 +1,211 @@ +--- +type: tutorial +title: Baue es selbst - Kopfzeile +description: >- + Tutorial: Baue deinen ersten Astro-Blog — + + Verwende alles, was du bisher gelernt hast, um eine Kopfzeile mit responsiver + Navigation zu bauen +i18nReady: true +--- +import Badge from '~/components/Badge.astro'; +import Box from '~/components/tutorial/Box.astro'; +import Checklist from '~/components/Checklist.astro'; +import PreCheck from '~/components/tutorial/PreCheck.astro'; +import { Steps } from '@astrojs/starlight/components'; + + +Da deine Website auf verschiedenen Geräten angesehen wird, ist es an der Zeit, eine Seitennavigation zu erstellen, die sich an verschiedene Bildschirmgrößen anpasst! + + + - Erstelle eine Kopfzeile für deine Website, die die Navigationskomponente enthält + - Mache die Navigationskomponente responsiv + + + + + +## Versuche es selbst - Baue eine neue Kopfzeilenkomponente + + +1. Erstelle eine neue Kopfzeilenkomponente. Importiere und verwende deine vorhandene `Navigation.astro`-Komponente innerhalb eines `