contribution.md

Let's Setup!

Before we start contributing, First thing first let's do a quick Github setup!

First two things you'll want to do:

1. Install git. Follow the instructions here to install git (if it's not already installed).

2. Create a free GitHub account or login to your GitHub account, If you already have one.

There are different ways to clone a repo through GitHub Desktop, git bash (git terminal), VS Code terminal and for the purpose of this project, you have to have either one of listed in other to successfully clone and contribute to this project.

1. Through Github Desktop, Download GitHub Desktop app.

2. Comfortable using Git on the command line and want to use the git terminal to clone, download git bash.

3. Alternatively If you use VS Code you can use the VS Code terminal to clone as well.

Now that we done with setting up the essential needed for this contribution to be a success, let's get to the main thing, CONTRIBUTION!.

Let the contribution begin!

Using GitHub Desktop.

Step 1: Fork this repository

• The objective here is to make a copy of this project and place it in your account. So go to the top right click on the fork icon just as in the picture below.

Step 2: Clone the repository

• Now that we've successfully fork the repository and made a copy into our account, we will go ahead and clone the repository which is basically making a local copy of the project. This copy is saved on your own machine.

To clone:

• Open the GitHub desktop app.

  • Click on file and then clone repository

  

  • You will see a list of all your repository and forks on GitHub.
  • Select <your-github-username>/simple-contribution.
  • Click Clone button

• Now you have a local copy of the project.

Step 3: Create a new branch

• Once the repo has been cloned and you have it open in GitHub desktop it is time to create a new branch.
• We create a new branch to keep your changes separate from the master branch sometimes known as main branch so that if things go wrong you can simply delete the branch and the main project is not affected.

• Click on Current branch

  • Then click on New
  • Give your branch a name
  • Click Create branch

  

  • Go ahead and name the branch whatever you want, to make it easier since you're to add your details, you can name it your-name-information.
  • Publish your new branch to GitHub
  • This branch you have created separate from the master branch and it's the branch you'll be working with. Whatever you do, make sure NOT to work on the master branch

Step 4: Open the project with VS Code (or any editor of choice)

• Once you click on open with visual studio code, the project opens up on you VS Code open the index.html file to start editing.
• If your're using other editor, find the project folder on your computer. The index.html file is directly in the simple-contribution folder.

Open VS Code

Step 5: Copy and edit the template

• UPDATE: Attention New Contributors! An important update has been made regarding the addition of your card details. Instead of directly inputting your card details into the app.js file, a carddetail.json file has been created for this purpose. As part of this change, please add your card details into the carddetail.json file moving forward. This new approach helps maintain the app.js content efficiently and ensures a smoother process for adding your contribution.

• Go to carddetail.json file,
  • You'll see an array of data, add a new object into the array( to make it easier, copy and paste object template and edit) The object template which now is yours for you to customize and edit.
  • Replace 'Your Name' with your name, 'Your Profession' with what you do, add your favorite quote and the link to your socials.

• Once you're done, save your changes by pressing ctrl + s.
• Next is to Test your changes. THIS IS IMPORTANT! To do that, left click on the index.html navigate to open in default browser and click on it.This project will open in your browser and you'll see what the changes you added look like on the site.
• Now, you have finished editing your code! And if nothing is broken and everything is working fine, you can go ahead and commit your changes.

Step 6: Commit and Push your changes

Commit Changes

• To commit your changes, go back to the GitHub desktop app; you will see that your changes have been added automatically to the staging area which means that all the changes made are already saved.
• Go ahead and commit by filling in the Summary field (the description is optional). Add a short commit message explaining what you have changed e.g add my information and click the Commit to main button. P.S: Please ensure that, before committing any changes, you've thoroughly checked for any broken code and ensured it's error-free on your side.

Push Changes

• Now your changes are committed, the next thing to do is to push your changes by clicking on the Push button so as to get it in synch with your repository on GitHub. You are "pushing" the changes from your local repository to the remote repository on GitHub.

Step 7: Submit a PR(Pull Request)

• This is the last stage of your contribution; submitting a Pull Request (PR).
• The reason for submitting a pull request is so that all the changes you made which is still on your own account of GitHub is sent to the main project to be merged.

• You can submit a pull request,

  • By either clicking on the create pull request button that shows after clicking the push button in Github Desktop
  • Or you go to the main page of your fork on GitHub, towards the top of the repo you will see a highlighted pull request message with a green button that has Compare and pull request written on it. Click on the button to create your pull request.
  • Now when the Open a pull request page opens, it should look like the one in the photo below. Original project on the left, followed by the master branch. Your fork on the right and the branch you created

  

  • On the pull request page, write a title and add optional information in the description. Click Create pull request button.

NOTE: Please remember to include a comprehensive commit message and an extended description, particularly if your changes involve more than just adding your details. This will provide a clearer understanding of the nature and purpose of your commit within the project.

Your information can only be added once your pull request have been reviewed and merged only then would you be able to see you information on the live site!

YAY, ALL DONE! GUESS WHO JUST CONTRIBUTED TO AN OPEN SOURCE PROJECT ON GITHUB...YOU!!!👏

Using git bash (git terminal).

This steps can also be used if you're using VS Code terminal.

Go to the current directory where you want the cloned directory to be added.

cd folder directory

• Click on the clone button and then click the copy to clipboard icon.

Open the git bash terminal and run the following git command

git clone "repository url you just copied"

Change into the repository directory folder on your computer (the folder you just cloned):

cd simple-contribution

Now create a new branch using the git checkout command

git checkout -b your-new-branch-name

• To edit and changes, open project in VS Code

Code .

• After you've edit the template and made changes, tested and made sure the site is okay and nothing is broken Commit your changes

git add cardDetails.json

git commit -m "Add <your-name> card info"

git push origin -u your-branch-name

• Continue the process using the github desktop steps after pushing as it's same.

Thank you for contributing to this project.🤗

Now that you're done contributing, go back to the main account repository, click on the site link by the right side, check out other contributors socials and connect with them. Also click on the star button beside the fork button.

Acknowledgements🙏

This project is heavily influenced by Syknapse Amazing Contribute-To-This-Project project with its fine tuned tutorial. The project is also an awesome project for first time contributors as well so go ahead and contribute!

• You can follow me and get in touch on Twitter

HAPPY CONTRIBUTING!🎊