# GIT GUD: Graffiti Wall Tutorial!

### Goals 🎯
- Learn Linux commands (console/terminal)
- Learn git commands and workflow
- Make your first open-source contribution by tagging our graffiti wall!

Here is our virtual graffiti wall:
https://os-ucsd.github.io/graffiti-wall

Each every individual tag you see here is its own open source contribution - or, a commit. A contributor added their own tag by adding a `.json` file into the Graffiti Wall repository - then sent a pull request (PR for short) to add their commit to the project. Finally, a maintainer of the graffiti wall project reviewed and approved the proposed changes, and the tags were added to the wall!

This workshop will guide you step-by-step how to do the same thing!

## Instructions

### Step 0: Pre-Requisites

Before we begin the workshop, make sure you:

1. Have a GitHub account (use your UCSD email for more perks!)
2. Windows will have to install Git and GitBash: https://gitforwindows.org/
3. (optional) If you are unfamiliar with Linux commands, check out this tutorial first: https://beta.observablehq.com/@kaustubhlall/introduction-to-linux

### Step 1: “Fork” the Repository

The “repository” you will be contributing to can be found here:
https://github.com/os-ucsd/graffiti-wall

#### What is a repository?
You can think of a repository (repo for short) as a folder where all the code exists for a certain project. All of the code for our graffiti wall project can be found inside this repository, and you will make your contributions to this repository!

You are going to “fork” this repo. “Forking” means you’ll be duplicating this repo into your own GitHub account.

Do this by navigating to the graffiti wall repo (link above) and clicking on the “Fork” button in the upper right, like so:

Warning: gif is outdated. The repo should be os-ucsd/graffiti-wall instead, but the process is the same. 🤷‍♀️


Awesome! now, whatever changes you make to `<username>`/graffiti-wall will only effect your repo - they will have no effect on the original os-ucsd/graffiti-wall repo (until you make a pull request in Step 6!).

### Step 2: Your Own Local Graffiti Wall

Now, we need to “download” the files from your GitHub repo that you forked, and we do so by cloning the project to your local machine.

#### Cloning vs Forking
In step 1, you "forked" the original repo (os-ucsd), creating a "graffiti-wall" repo on YOUR Github account. Now, "cloning" means that you're downloading a copy of the source code to your local computer (note: the changes you make on your local copy will not take effect on the forked repo... we'll show you how to do that in a bit)!

First, go to your graffiti-wall repo on your GitHub account (make sure your’re on the <your_username>/graffiti-wall one and not the os-ucsd/graffiti-wall one) and click the “Clone or download” button to copy the link.


On the console, enter the command `git clone <your-repo-url>` and replace `<your-repo-url>` with the url you just copied (note: don’t include the <> brackets).

Now, if you type the ‘ls’ command, the graffiti-wall repo should appear as one of the directories.

### Step 3: Add Your Tag

Okay, now you have your own local wall running - how can you add your own tag?

If you check out your forked repo, you’ll see a directory (a folder) called `tags`. Inside of this directory, there are a number of `.json` files that contain similar info - each `json` file corresponds to one tag on the graffiti wall.

For example, `alex.json` is owned by Alex Garcia. Using `cat alex.json` you can see its contents:

{
"grid":[
[0,0,1,1,1,0,0],
[0,0,1,1,1,0,0],
[0,0,1,1,1,0,0],
[0,0,1,1,1,0,0],
[0,0,1,1,1,0,0],
[0,0,1,1,1,0,0],
[0,0,1,1,1,0,0]
],

"color": "#007acc",

"name":"Alex Garcia"
}

Now, all you have to do is add your own `name.json` file inside of the `tags` folder, and you’ll be set!

Navigate inside the graffiti-wall directory and then the tags directory using the command `cd <directory-name>`

To make your own `name.json` file, first make a new empty file using `touch` `name.json`.

Go to this editor to try out your tagging skills!: https://os-ucsd.github.io/graffiti-wall-editor
You should see something like this:


Play around with this (change the values for the grid, color, and name) to personalize your tag.

When you’re happy with what your tag looks like, copy the code on the right and paste it in your `name.json` file!

### Step 4: Commit/Push Your Changes

If you go back to your GitHub graffiti-wall repo, you still won’t see your `name.json` 😞 This is because you need to `push` your contribution back to your Github repo.

First, if you type `git status` on the console, it will show you the status of your git process. Hopefully you will see your `name.json` file in red.

Make sure you’re in the graffiti-wall directory (check with `pwd`). Use the command `git add .` to add all of the files in the current directory to the stage.

Now, if you `git status` again, your file should be in green, meaning it’s ready to be committed 👍
To commit the file, use the command `git commit -m` `"message"`. Replace “message” with a meaningful comment that can help you differentiate your different commits. (example: “added `[your-name].json`")

You might get prompted to configure your git information. <br>
`git config --global user.name "Your name"` <br>
`git config --global user.email "Your email"`

Enter your appropriate name and email between the quotes. You may need to commit again `git commit -m` `"message"`.

Once your file is committed, you’re ready “upload” your local content onto your remote repo (Github). Do that by using the command `git push origin master`.

If everything goes well, your updated files should appear in your own repo in GitHub, check it out to verify!

### Step 5: Make Pull Request

Awesome, you’ve now added your own personalized tag on your own graffiti wall!

But, if you go back to the graffiti wall, your tag is not there 😦
And in the original os-ucsd/graffiti-wall repo (https://github.com/os-ucsd/graffiti-wall), you’ll see that your tag doesn’t appear: what gives?? 😠

This is because you need to make a pull request to have your contributions reviewed and added to the original repository. A pull request is basically you sending a request to have your changes from your repository merged into the original repository. To make a pull request, go to your own graffiti-wall repo on GitHub and press the “New pull request” button as shown below:



### Step 6: Wait for Approval
Now that you’ve sent in your pull request, you’re good to go! We (Open Source @ UCSD) will review your code and merge your contribution to our repo 😁

### Step 7: Done!!
Now your tag appears on the graffiti wall! Good job 🎉
Check out your sweet artwork here: https://os-ucsd.github.io/graffiti-wall