forked from twilio-labs/open-pixel-art
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(de): update contributing file (twilio-labs#1611)
* Updated (german) CONTRIBUTING.md * Update CONTRIBUTING.md
- Loading branch information
Showing
1 changed file
with
74 additions
and
35 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,23 +1,22 @@ | ||
# Beitrag zu Open Pixel Art | ||
|
||
Es gibt zwei Möglichkeiten, wie Du zu diesem Projekt beitragen kannst. Du kannst entweder ein einzelnes Pixel zur Zeichenfläche hinzufügen oder einen Beitrag zum zugrunde liegenden Projekt leisten. Zum Beispiel durch Hinzufügen von Tests, Aktualisieren der HTML-Vorlage oder Aktualisieren der Dokumentation. | ||
Es gibt zwei Möglichkeiten, wie du zu diesem Projekt beitragen kannst. Du kannst entweder ein einzelnes Pixel zur Zeichenfläche hinzufügen oder einen Beitrag zum zugrunde liegenden Projekt leisten. Zum Beispiel durch Hinzufügen von Tests, Aktualisieren der HTML-Vorlage oder Aktualisieren der Dokumentation. | ||
|
||
Für beide Szenarien ist der Aufbau gleich, jedoch unterscheiden sich die Beitragsschritte geringfügig. | ||
|
||
## Ich habe noch nie zu Open Source beigetragen | ||
|
||
![decorative banner image for TwilioQuest mission](../twilio-quest-oss-banner.png) | ||
|
||
Einen Beitrag zu Open Source zu leisten, kann zunächst einschüchternd sein. Aus diesem Grund haben wir eine | ||
Neue Mission in [TwilioQuest](https://twil.io/hacktoberfest-quest), die dich | ||
Schritt für Schritt durch das Erstellen eines Beitrags für dieses Projekt führt. Sobald Du [das Spiel heruntergeladen](https://www.twilio.com/quest/download) hast, kannst Du die Mission auswählen und Du wirst durch alle Schritte durchgeführt, vom Klonen des Projekts bis zur Erstellung deines Pull-Requests. | ||
Einen Beitrag zu Open Source zu leisten, kann zunächst einschüchternd sein. Aus diesem Grund haben wir eine neue Mission in [TwilioQuest](https://twil.io/hacktoberfest-quest), die dich | ||
Schritt für Schritt durch das Erstellen eines Beitrags für dieses Projekt führt. Sobald du [das Spiel heruntergeladen](https://www.twilio.com/quest/download) hast, kannst du die Mission auswählen und wirst anschließend durch alle Schritte durchgeführt, vom Klonen des Projekts bis zur Erstellung deines Pull-Requests. | ||
|
||
Viel Spaß beim Quest! | ||
Viel Spaß bei der Quest! | ||
|
||
## Was Du brauchst | ||
## Was du brauchst | ||
|
||
- Ein GitHub-Account | ||
- Git auf Deinem Computer installiert. [Erfahre hier, wie Du es installierst](https://help.github.com/de/articles/set-up-git) | ||
- Einen GitHub-Account | ||
- git auf deinem Computer installiert. [Erfahre hier, wie du es installierst](https://help.github.com/de/articles/set-up-git) | ||
- [Node.js](https://nodejs.org) und ein Paketmanager wie [npm](https://npmjs.com) | ||
|
||
## Lokales Projekt erstellen | ||
|
@@ -29,7 +28,7 @@ Viel Spaß beim Quest! | |
git clone https://github.com/<YOUR_GITHUB_USERNAME>/open-pixel-art.git | ||
``` | ||
|
||
3. Installieren Sie die Abhängigkeiten für die lokale Entwicklung | ||
3. Installiere die Abhängigkeiten für die lokale Entwicklung | ||
|
||
```bash | ||
cd open-pixel-art | ||
|
@@ -42,29 +41,50 @@ npm install | |
npm start | ||
``` | ||
|
||
5. Öffne Deinen Browser unter http://localhost:8080. Du solltest den gleichen Inhalt wie auf https://open-pixel-art.com sehen, nur mit einem Raster auf der Leinwand, mit dem Du deine Pixel besser platzieren kannst. | ||
5. Öffne deinen Browser unter http://localhost:8080. Du solltest den gleichen Inhalt wie auf https://open-pixel-art.com sehen, nur mit einem Raster auf der Leinwand, mit dem du dein Pixel besser platzieren kannst. | ||
|
||
## einen Pixel beisteuern | ||
--- | ||
|
||
Wenn Du einen Beitrag zu einem Pixel leisten möchtest, musst Du die Datei [`_data/pixels.json`](_data/pixels.json) öffnen. Es enthält alle auf der Leinwand platzierten Pixel. | ||
Es gibt darüber hinaus auch die Möglichkeit, das Projekt mittels Docker aufzusetzen. Führe die folgenden Schritte durch, um das Projekt mit Docker zu betreiben. | ||
|
||
Es gibt zwei Möglichkeiten, wie Du einen Pixel beitragen kannst. | ||
1. Erzeuge das Docker-Image | ||
|
||
### Option 1: Einen Pixel "beanspruchen" | ||
```bash | ||
docker build -t open-pixel-art . | ||
``` | ||
|
||
2. Starte das Docker-Image | ||
|
||
```bash | ||
docker run -d -p 8080:8080 -it open-pixel-art | ||
``` | ||
|
||
Wenn das Docker-Image nicht erstellt werden kann, liegt wahrscheinlich ein Fehler im Code vor und die Tests schlagen fehl. Sollte alles in Ordnung sein, kannst du die Url http://localhost:8080 in deinem Browser aufrufen. Du solltest den gleichen Inhalt wie auf https://open-pixel-art.com sehen, nur mit einem Raster auf der Leinwand, mit dem du dein Pixel besser platzieren kannst. | ||
|
||
Um zu verifizieren, dass alles läuft, führe `docker ps --all` aus. Dort solltest du ein Image mit dem Namen `open-pixel-art` vorfinden und auf dieses auch zugreifen können. | ||
|
||
Beispiel: | ||
|
||
```bash | ||
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES | ||
c861ba4389fe open-pixel-art "docker-entrypoint.s…" 7 minutes ago Up 7 minutes 0.0.0.0:8080->8080/tcp sleepy_lamarr | ||
``` | ||
|
||
## Einen Pixel beisteuern | ||
|
||
Einige Einträge in der Datei `pixels.json` existieren, haben jedoch die Eigenschaft`username` von `<UNCLAIMED>`. Dies bedeutet, dass Du sie als Pixel festlegen kannst. Du kannst die Farbe nach Belieben ändern. Ändere anschließend die Eigenschaft "Benutzername" in Deinen GitHub-Benutzernamen, mit dem Du den Pull-Request öffnest. | ||
Wenn du einen Beitrag zu einem Pixel leisten möchtest, musst du die Datei [`_data/pixels.json`](_data/pixels.json) öffnen. Diese Datei enthält alle, auf der Leinwand platzierten Pixel. | ||
|
||
### Option 2: Erstellen Sie ein neues Pixel | ||
### Erstelle ein neues Pixel | ||
|
||
Um ein neues Pixel zu erstellen, füge dem `data`-Array in der`pixels.json` eine neue Zeile hinzu. | ||
Ein neues Pixel muss ein Objekt mit den folgenden vier Eigenschaften sein: | ||
|
||
- `x`: Die x-Koordinate deines Pixels. `0` ist die am weitesten links stehende Pixelspalte | ||
- `y`: Die y-Koordinate deines Pixels. `0` ist die unterste Pixelreihe | ||
- `color`: Die Farbe, die Dein Pixel als Hex-Code haben sollte (z. B. # ff0000 für Rot) | ||
- `username`: Der GitHub-Benutzername, mit dem Du den Pull-Request erstellst. | ||
- `color`: Die Farbe, die dein Pixel als Hex-Code haben sollte (z. B. # ff0000 für Rot) | ||
- `username`: Der GitHub-Benutzername, mit dem du den Pull-Request erstellst. | ||
|
||
Die Zeile für Dein Pixel sollte zuerst nach der y-Koordinate und dann nach der x-Koordinate sortiert werden. Wenn Du dich über deine Änderungen nicht sicher binst, nehme die Änderung vor und führe "npm run format: json" aus, und es sollte dein Pixel an der entsprechenden Position sortieren. | ||
Die Zeile für dein Pixel sollte zuerst nach der y-Koordinate und dann nach der x-Koordinate sortiert werden. Wenn du dir bei deinen Änderungen unsicher bist, nehme deine Änderungen vor und führe anschließend `npm run format: json` aus. Dies sollte dein Pixel an der entsprechenden Position einsortieren. | ||
|
||
Die Änderung sollte folgendermaßen aussehen: | ||
|
||
|
@@ -79,54 +99,72 @@ Die Änderung sollte folgendermaßen aussehen: | |
} | ||
``` | ||
|
||
### Überprüfe Deine Änderungen | ||
### Überprüfe deine Änderungen | ||
|
||
Wenn Du deine Änderung vorgenommen hast, rufe http://localhost:8080 auf und Du solltest dein neues Pixel sehen. Wenn Du mit der Platzierung nicht zufrieden bist, ändere die Werte "x" und "y" weiter. Wenn Du mit der Farbe nicht zufrieden bist, kannst Du die Eigenschaft "color" weiter ändern. | ||
Wenn du deine Änderungen vorgenommen hast, rufe http://localhost:8080 auf und du solltest dein neues Pixel sehen. Solltest du mit der Platzierung nicht zufrieden sein, ändere die Werte "x" und "y" weiter. Bist du mit der Farbe nicht zufrieden, kannst du die Eigenschaft `color` weiter ändern. | ||
|
||
Stelle anschließend sicher, dass alle Tests noch bestehen, indem Du auf einem anderen Terminal ausführst: | ||
Stelle anschließend sicher, dass alle Tests noch bestehen, indem du auf einem anderen Terminal ausführst: | ||
|
||
```bash | ||
npm test | ||
``` | ||
|
||
### Branching und Committing | ||
|
||
Wenn Du mit der Änderungen zufrieden bist, erstelle einen [branch](https://help.github.com/de/articles/about-branches), damit wir die Änderungen übernehmen können. | ||
Wenn du mit deinen Änderungen zufrieden bist, erstelle einen [branch](https://help.github.com/de/articles/about-branches), damit wir die Änderungen übernehmen können. | ||
|
||
```bash | ||
git checkout -b add-my-new-pixel | ||
``` | ||
|
||
Anschließend musst Du deine Änderung auswählen und mache einen Commit: | ||
Anschließend musst du deine Änderung auswählen und committen: | ||
|
||
```bash | ||
git add _data/pixels.json | ||
git commit -m "feat(pixels): add my new pixel (x, y)" | ||
``` | ||
|
||
Ersetze `(x, y)` durch die x-Koordinate und die y-Koordinate Deines geänderten Pixels, z.B. "(4, 27)". | ||
Dadurch wird ein neues Commit mit der Meldung "feat (pixels): add my new pixel (4, 27)" erstellt. | ||
Die Commitmeldung folgt dem [Conventional Commits Standard](https://www.conventionalcommits.org/en/v1.0.0-beta.4/). | ||
Ersetze `(x, y)` durch die x-Koordinate und die y-Koordinate deines geänderten Pixels, z. B. "(4, 27)". | ||
Dadurch wird ein neuer Commit mit der Meldung "feat (pixels): add my new pixel (4, 27)" erstellt. | ||
Die Commit-Meldung folgt dem [Conventional Commits Standard](https://www.conventionalcommits.org/en/v1.0.0-beta.4/). | ||
|
||
### Push Deine Änderungen und erstelle einen Pull-Requet | ||
### Pushe deine Änderungen und erstelle einen Pull-Requet | ||
|
||
Wenn Du Probleme beim Übertragen Deiner Änderungen auf GitHub hast, ist Dein lokaler Branch des Repositorys möglicherweise nicht auf dem neuesten Stand, da andere Mitwirkende das Repository hinzugefügt haben. Bevor Du deine Änderungen an GitHub übertragen kannst, musst Du möglicherweise [Deinen fork mit dem Upstream-Repository synchronisieren](https://help.github.com/de/articles/syncing-a-fork). | ||
Wenn du Probleme beim Übertragen deiner Änderungen auf GitHub hast, ist dein lokaler Branch des Repositories möglicherweise nicht auf dem neuesten Stand, da andere Mitwirkende das Repository zwischenzeitlich bearbeitet haben. Bevor du deine Änderungen an GitHub übertragen kannst, musst du möglicherweise [deinen fork mit dem Upstream-Repository synchronisieren](https://help.github.com/de/articles/syncing-a-fork). Versuche, durch Ausführen von `npm run sync-fork`, deinen Fork automatisch zu synchronisieren. | ||
|
||
Übertrage deine Änderungen auf GitHub, indem Sie Folgendes ausführst: | ||
Übertrage deine Änderungen auf GitHub, indem du folgendes ausführst: | ||
|
||
```bash | ||
git push origin add-my-new-pixel | ||
``` | ||
|
||
Gehe anschließend zu GitHub und [folge diesen Anweisungen](https://help.github.com/de/articles/creating-a-pull-request-from-a-fork), um einen Pull-Request von deinem Fork gegen den `master` branch von github.com/twilio-labs/open-pixel-art zu erstellen. | ||
Gehe anschließend zu GitHub und [folge diesen Anweisungen](https://help.github.com/de/articles/creating-a-pull-request-from-a-fork), um einen Pull-Request von deinem Fork gegen den `master`-Branch von github.com/twilio-labs/open-pixel-art zu erstellen. | ||
|
||
## Andere Änderungen beisteuern | ||
|
||
Es ist großartig, dass Du mehr als ein Pixel zu diesem Projekt beitragen möchtest. Bevor Du mit der Arbeit am Code beginnst, überprüfe, ob bereits ein [GitHub-Problem](https://github.com/twilio-labs/open-pixel-art/issues) für diese Änderungen vorliegt. Wenn nicht, öffne bitte zuerst eines. Wenn es bereits eines gibt, stelle sicher, dass Du einen Kommentar erstellst, um die Leute darüber zu informieren, dass Du an einer Lösung für dieses Problem arbeitest. | ||
Es ist großartig, dass du mehr als ein Pixel zu diesem Projekt beitragen möchtest. Bevor du mit der Arbeit am Code beginnst, überprüfe, ob bereits ein [GitHub-Problem](https://github.com/twilio-labs/open-pixel-art/issues) für diese Änderungen vorliegt. Wenn nicht, öffne bitte zuerst eines. Wenn es bereits eines gibt, stelle sicher, dass du einen Kommentar erstellst, um die Leute darüber zu informieren, dass du an einer Lösung für dieses Problem arbeitest. | ||
|
||
Befolge nach dem Ändern des Codes die oben beschriebenen Schritte. | ||
|
||
Wenn Du einen Pull-Request öffnest, musst Du den Abschnitt mit den zusätzlichen Informationen in der Pull-Anforderungsvorlage auskommentieren und eine Beschreibung hinzufügen sowie auf Probleme verweisen, die hiermit behoben werden. | ||
Wenn du einen Pull-Request öffnest, musst du den Abschnitt mit den zusätzlichen Informationen in der Pull-Anforderungsvorlage auskommentieren und eine Beschreibung hinzufügen sowie auf Probleme verweisen, die hiermit behoben werden. | ||
|
||
### Richtlinien zur Beisteuerung von Dokumentationsbeiträgen | ||
|
||
Bitte eröffne keine Pull-Requests für unwichtige, grammatikalische Änderungen in der README-Datei order anderen Dokumentationen. | ||
Diese Art von Beiträgen sind nicht im Sinne des Hacktoberfestes und werden nicht akzeptiert. | ||
|
||
Beispiele für unerwünschte Beiträge sind unter anderem: | ||
|
||
- Hinzufügen von unnötigen Kommas, Bindestrichen oder Ausrufezeichen | ||
- Sätze umformulieren, die bereits aussagekräftig genug sind | ||
- Ändern der Schreibweise von amerikanischem Englisch in britisches Englisch | ||
|
||
Willkommene Beiträge zur Dokumentation sind hingegen: | ||
|
||
- Hinzufügen von Übersetzungen in neue Sprachen | ||
- Korrektur defekter Verlinkungen | ||
- Korrektur von fehlerhaftem Markdown | ||
- Korrektur von Tippfehlern oder falsch geschriebener Wörter | ||
|
||
## Projekt Struktur | ||
|
||
|
@@ -187,10 +225,11 @@ Dies ist die Vorlagendatei, mit der der HTML-Code der Website generiert wird. | |
|
||
Dieses Verzeichnis enthält benutzerdefiniertes CSS. Die Stile für [`index.njk`](index.njk) befinden sich in [`styles/main.css`](styles/main.css) | ||
|
||
## Code of Conduct | ||
## Verhaltenskodex | ||
|
||
Wir möchten sicherstellen, dass dieses Projekt so freundlich wie möglich ist. Durch die Interaktion mit dem Projekt in beliebiger Form stimmen Sie dem [Verhaltenskodex](CODE_OF_CONDUCT.md) des Projekts zu. Wenn Sie der Meinung sind, dass eine andere Person gegen den Verhaltenskodex verstoßen hat, wenden Sie sich bitte an [[email protected]](mailto:[email protected]). | ||
Wir möchten sicherstellen, dass dieses Projekt so einladend wie möglich ist. Durch die Interaktion mit dem Projekt in jeglicher Form stimmst du dem [Verhaltenskodex](CODE_OF_CONDUCT.md) des Projekts zu. Wenn du der Meinung bist, dass eine andere Person gegen den Verhaltenskodex verstoßen hat, wende dich bitte an [[email protected]](mailto:[email protected]). | ||
|
||
## Lizenzierung | ||
|
||
Alle Drittanbieter erkennen an, dass alle Beiträge, die sie bereitstellen, unter derselben Open-Source-Lizenz erfolgen, unter der das Open-Source-Projekt bereitgestellt wird. | ||
|