Er zijn twee manieren hoe je kunt aan dit project kunt bijdragen. Je kunt of een enkele pixel aan de canvas toevoegen, of je kan bijdragen aan het onderliggende project. Bijvoorbeeld door testen toe te voegen of de HTML sjabloon of documentatie bijwerken.
Voor beiden scenario's is de setup hetzelfde, echter wijken de stappen voor het bijdragen iets van elkaar af.
Het bijdragen aan open source kan in het begin intimiderend overkomen. Om die reden hebben we een een nieuwe missie in TwilioQuest aangemaakt welk jou stap voor stap begeleid richting het aanmaken van een bijdrage voor dit project. Wanneer je de game hebt gedownload kun je deze missie selecteren. Het zal je dan door elke stap helpen, van het klonen van het project tot het aanmaken van je pull request.
- Een GitHub account
- git geïnstalleerd op je computer. Leer hoe je dit doet (Engels)
- Node.js een een package manager zoals npm
- Maak een fork aan (engels) van dit project
- Kloon het project:
git clone https://github.com/<JOUW_GITHUB_GEBRUIKERSNAAM>/open-pixel-art.gitIndien je je huidige aparaat met SSH hebt ingesteld kun je dit in de plaats doen:
git clone [email protected]:<JOUW_GITHUB_GEBRUIKERSNAAM>/open-pixel-art.git- Installeer de afhankelijkheden voor lokale ontwikkeling
cd open-pixel-art
npm install- Start een lokale ontwikkelserver
npm start- Open de browser naar http://localhost:8080. Je zou nu dezelfde inhoud als op https://open-pixel-art.com moeten zien plus een grid over de canvast om te helpen met het plaatsen van jouw pixel.
Er is ook een optie om via Docker het project op te zetten. Volg de volgende stappen om daar mee aan de slag te gaan.
- BBouw de Docker image
docker build -t open-pixel-art .- Start de Docker image
docker run -d -p 8080:8080 -it open-pixel-artAls de docker image niet bouwt dan staat er waarschijnlijk een fout in jouw code waardoor de testen niet als succesvol worden afgerond. Indien alles wel correct bouwt dan kun je dit testen op de volgende url http://localhost:8080. Je zou nu dezelfde inhoud als op https://open-pixel-art.com moeten zien plus een grid over de canvast om te helpen met het plaatsen van jouw pixel.
Je kunt ook verifiëren of het project draait door docker ps --all uit te voeren. Hier valt te zien dat een image genaamd open-pixel-art aanwezig is plus waar je deze kunt benaderen.
Bijvoorbeeld:
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_lamarrVoor het toevoegen van een pixel open je het _data/pixels.json bestand. Deze bevat alle pixels welk geplaatst worden in de canvas.
Zoek voor het aanmaken van een nieuwe pixel een lege ruimte tussen de nummers van de x of y coördinaten in de data array binnen het pixels.json bestand.
Wanneer je een open positie hebt gevonden kun je hiervoor een nieuwe pixelregel aanmaken.
Een nieuwe pixelregel hoort een object te zijn met de volgende vier eigenschappen:
x: De x-coördinaat van jouw pixel.0is de meest linker pixelkolomy: De y-coördinaat van jouw pixel.0is de onderste pixelrijcolor: De kleur van jouw pixel hoort een hex-code te zijn (bijv. #ff0000 voor rood)username: De GitHub gebruikersnaam die je gaat gebruiken voor het aanmaken van de pull request
De rij voor jouw pixel hoort eerst gesorteerd te worden bij de y-coördinaat en daarna de x-coördinaat. Als je niet zeker van je wijzigingen bent kun je npm run format:sort-pixels uitvoeren wat jouw pixel in de correcte positie hoort te sorteren.
De aanpassing zou er zo uit moeten zien:
{
"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"},
...
]
}Ga nadat je je aanpasing hebt gemaakt naar http://localhost:8080, daar zou je jouw nieuwe pixel horen te zien. Wanneer je nog niet blij met de positionering kun je de x en y waardes aanpassen en als je nog niet blijk bent de color kun je deze veranderen in de color eigenschap.
Verzeker jezelf dat hierna de testen nog steeds passeren door het volgende in een andere terminal te openen:
npm testMaak wanneer je blij bent met de aanpassingen een branch (engels) aan zodat we de aanpassingen kunnen committen.
git checkout -b add-my-new-pixelDaarna selecteer je jouw aanpassingen en commit het door het volgende uit te voeren:
git add _data/pixels.json
git commit -m "feat(pixels): add my new pixel (x, y)"Vervang (x, y) met de x- en y-coördinaten van jouw toegevoegde pixel, bijv. (4, 27).
Dit maakt een nieuwe commit aan met het bericht feat(pixels): add my new pixel (4, 27).
Het commitbericht volgt de Conventional Commits Standard.
Notitie: Als je problemen ondervindt met het naar GitHub pushen van jouw aanpassingen kan het zijn dat de repository niet is bijgewerkt vanwege wijzigingen van andere bijdragers. Voordat je jouw aanpassingen naar GitHub pusht kan het nodig zijn om je fork te synchroniseren met de upstream repository (engels). Propbeer npm run sync-fork uit te voeren om je fork automatisch te synchroniseren.
Push je aanpassingen naar GitHub door het volgende uit te voeren:
git push origin add-my-new-pixelGa daarna naar GitHub en volg deze instructies (engels) om een pull request voor jouw fork tegen de master branch van github.com/twilio-labs/open-pixel-art te maken.
Leuk dat je wilt iets anders dan een pixel wilt bijdragen aan dit project. Controleer voordat je begint aan de code of er al een GitHub issue bestaat voor de aanpassingen. Zo nee, maak deze alsjeblieft eerst aan. Laat als er al wel eentje bestaat een bericht daar achter om andere te laten weten dat je met de issue aan de slag gaat.
Volg nadat je de code hebt aangepast alsjeblieft de hierboven genoemde stappen.
Zorg nadat je een pull request hebt geopend dat je de additionele info-sectie uncomment in het pull request sjabloon, en voeg een descriptie en referentie naar de bijhorende issue toe.
Open alsjeblieft geen pull request voor inconsequente grammaticale aanpassingen in de README of andere documentatie. Dit soort bijdragen zijn niet in de gedachtenis van Hacktoberfest en zullen niet worden geaccepteerd.
Voorbeelden van ongewenste bijdragen houden in maar zijn niet gelimiteerd tot:
- onnodige komma's, koppeltekens of uitroeptekens toevoegen
- zinnen herformuleren die al duidelijk genoeg zijn
- spelling van Amerikaans Engels naar Brits Engels veranderen
De volgende bijdragen aan documentatie zijn welkom en worden gewaardeerd:
- het toevoegen van vertalingen naar nieuwe talen
- niet werkende linken repareren
- gebroken markdown opmaak repareren
- grammatica en spelling verbeteren
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
Het project gebruikt Eleventy. Deze zijn configuratiebestanden voor het project.
Het project gebruikt Mergify voor het automatisch mergen van bepaalde PR's, gebaseerd op wat condities.
Deze map bevat alle door Jest-aangedreven unit testen.
De _data map welk het pixels.json bestand dat alle pixels van de canvas representeert, een defaults.json bestand dat alle standaard waardes zoals de groote van de canvas en het env.js bestand voor alle omgevings gerelateerde waardes bevat. Alle data wordt automatisch beschikbaar in het index.njk bestand.
Een map voor alle statische bestanden.
We gebruiken Danger om bepaalde code review controles uit te voeren. Dit bestand bevat hiervoor de logica.
Dit is het sjabloonbestand dat wordt gebruikt voor het genereren van de HTML van de website.
Deze map bevat alle gescreven CSS aanpassingen. De stijlen voor index.njk staan in styles/main.css
We wille garanderen dat dit project zichzelf zo veel mogelijk vertegenwoordigd als verwelkomend voor mensen. Door interactie met het project in elke vorm dan ook ga je akkoord met de gedragscode. Als je vindt dat een ander individueel de gedragscode overtreed laat dit dan graag via [email protected] weten.
Alle buitenstaande bijdragers erkennen dat alle bijdragen die zij aanbieden onder dezelfde open source licentie komt te vallen waaronder het open source project valt.