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.
Einen Beitrag zu Open Source zu leisten, kann zunächst einschüchternd sein. Aus diesem Grund haben wir eine neue Mission in TwilioQuest, die dich Schritt für Schritt durch das Erstellen eines Beitrags für dieses Projekt führt. Sobald du das Spiel heruntergeladen 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ß bei der Quest!
- Einen GitHub-Account
- git auf deinem Computer installiert. Erfahre hier, wie du es installierst
- Node.js und ein Paketmanager wie npm
- Fork erstellen dieses Projekts
- Klone das Projekt:
git clone https://github.com/<YOUR_GITHUB_USERNAME>/open-pixel-art.git- Installiere die Abhängigkeiten für die lokale Entwicklung
cd open-pixel-art
npm install- Starte einen lokalen Entwicklungsserver
npm start- Ö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.
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.
- Erzeuge das Docker-Image
docker build -t open-pixel-art .- Starte das Docker-Image
docker run -d -p 8080:8080 -it open-pixel-artWenn 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:
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_lamarrWenn du einen Beitrag zu einem Pixel leisten möchtest, musst du die Datei _data/pixels.json öffnen. Diese Datei enthält alle, auf der Leinwand platzierten Pixel.
Um ein neues Pixel zu erstellen, füge dem data-Array in derpixels.json eine neue Zeile hinzu.
Ein neues Pixel muss ein Objekt mit den folgenden vier Eigenschaften sein:
x: Die x-Koordinate deines Pixels.0ist die am weitesten links stehende Pixelspaltey: Die y-Koordinate deines Pixels.0ist die unterste Pixelreihecolor: 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 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:
{
"data": [
{"y": 1, "x": 3, "color": "#F22F46", "username": "twilio-labs"},
+ { "y": 1, "x": 4, "color": "#FFFF00", "username": "dkundel"},
{"y": 2, "x": 9, "color": "#F22F46", "username": "twilio"},
...
]
}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:
npm testWenn du mit deinen Änderungen zufrieden bist, erstelle einen branch, damit wir die Änderungen übernehmen können.
git checkout -b add-my-new-pixelAnschließend musst du deine Änderung auswählen und committen:
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 neuer Commit mit der Meldung "feat (pixels): add my new pixel (4, 27)" erstellt.
Die Commit-Meldung folgt dem Conventional Commits Standard.
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. Versuche, durch Ausführen von npm run sync-fork, deinen Fork automatisch zu synchronisieren.
Übertrage deine Änderungen auf GitHub, indem du folgendes ausführst:
git push origin add-my-new-pixelGehe anschließend zu GitHub und folge diesen Anweisungen, um einen Pull-Request von deinem Fork gegen den master-Branch von github.com/twilio-labs/open-pixel-art zu erstellen.
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 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.
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
open-pixel-art
├── .all-contributorsrc
├── .eleventy.js
├── .eleventyignore
├── .git
├── .github
├── .gitignore
├── .mergify.yml
├── .prettierrc
├── .vscode
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── __tests__
├── _data
├── assets
├── dangerfile.js
├── index.njk
├── package-lock.json
├── package.json
└── styles
Das Projekt wird von Eleventy betrieben. Dies sind die Konfigurationsdateien für das Projekt.
Das Projekt verwendet Mergify, um bestimmte PRs basierend auf bestimmten Bedingungen automatisch zusammenzuführen.
Dieses Verzeichnis enthält alle Jest - gesteuerten Komponententests
Das Verzeichnis "_data" enthält die Datei "pixels.json", die jedes einzelne Pixel auf der Zeichenfläche darstellt, eine Datei "defaults.json", die Standardwerte wie die Größe der Zeichenfläche enthält, und die Datei "env.js" für Beliebige umweltbezogene Werte. Alle Daten stehen automatisch in der Datei "index.njk" zur Verfügung.
Ein Verzeichnis für statische Assets.
Wir verwenden Danger, um einige Codeüberprüfungen durchzuführen. Diese Datei enthält die Logik dafür.
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 befinden sich in styles/main.css
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 des Projekts zu. Wenn du der Meinung bist, dass eine andere Person gegen den Verhaltenskodex verstoßen hat, wende dich bitte an [email protected].
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.