CodeNewbie Community 🌱

Cover image for How to make your first Pull Request
Tyler V. (he/him)
Tyler V. (he/him)

Posted on • Originally published at tyler.vanblargan.dev

How to make your first Pull Request

Prerequisites

The first Pull Request is always the hardest! If you're getting stuck on a step, feel free to reach out to me and I'll help walk you through where you're getting tripped up!

Basic Navigation in the Terminal

The following commands will help get you started with navigating through the terminal.

pwd - Shows the current directory you are in. Abbreviation for β€œPresent Working Directory”
ls (dir for windows) - Lists the contents of the current directory
cd .. - Navigate to the directory above your current location
cd {directory} - Navigate to the designated directory. This can be an absolute path or relative path.

None of these commands alter anything, so feel free to try them out and become comfortable with them. You’ll be using them a lot.

Setup

  1. Navigate your browser to https://github.com/12vanblart/color-themes
  2. Click the "Fork" button in the top right GitHub's Fork Button
  3. Once GitHub is done forking the repository, click the "Clone or Download" button and copy the url in the dialog box. Clone URL dialog box
  4. Open your terminal & navigate to a directory where you're okay adding the project's directory (When you run the next command, it will create a folder in your current location).
  5. Run git clone url_copied_from_step_3 - this creates a copy of my repository in your directory
  6. Run cd ./color-themes to open the project directory
  7. Run git checkout -b yourBranchName, but replace yourBranchName with whatever you want to call your branch
  8. Run npm install to install the project dependencies
  9. If you use VS Code, run code . to open the directory in Code. If not, open your editor/IDE of choice and open the color-themes folder.
  10. Run npm run serve to spin up a local copy of the app. (You can stop this at any point by pressing Ctrl + c and answering y to "Would you like to terminate the batch job?")
  11. Open your web browser of choice and navigate to localhost:8080

At this point, you should see the same thing as on themes.tvanblargan.com.

Adding a theme

There are two files that you will need to update to add a new theme - src/assets/themes.css and src/components/ThemePicker.vue. These files were created when you used the git clone command above. Don't worry if you don't know any Vue, the changes you need to make to that file won't be anything too intense!

Editing ThemePicker.vue

In this file, you'll see a list of <Theme> components starting on line 28. Add a new line after all existing <Theme>'s as follows:

<Theme theme-name="your-theme-name" display-name="Your Theme Name" contributor="githubUsername"/>
Enter fullscreen mode Exit fullscreen mode

replacing your-theme-name with the class name (see Editing themes.css below), Your Theme Name with whatever you want your theme's name to display as on the option list, and githubUsername with your GitHub username.

Editing themes.css

On line 15, you'll want to copy in the following (make sure your theme is at the top of the file after the comments end):

.your-theme-name {
  --primary: #fff;
  --secondary: #fff;
  --accent: #fff;
  --link: #fff;
  --text: #fff;
}
Enter fullscreen mode Exit fullscreen mode

You'll update your-theme-name to be whatever you want your theme's class to be called (check that there isn't already a theme with your chosen name!).

Next, update the #fff's to be your colors of choice. If you're not sure where to start picking colors, I recommend playing around with Pallettte

Once you select your theme, saving themes.css will update localhost instantly without needing to reselect your new theme!

Requirements for accepted PR's

Note that each time a theme is selected, the A11y card's values are recalculated and updated to reflect the contrast ratio between various theme colors. In order for your theme to be approved, each of these numbers needs to be greater than or equal to 4.5 (WCAG AA Compliant).

Committing your changes

Once you're happy with your theme and it's passing the contrast requirements, you'll want to save your changes so they can be added to the live site and everyone can see your awesome theme!

To do this, head back into your terminal and use Ctrl + C to stop the local server (type y and press enter when prompted to "Terminate batch job (Y/N)?"). Then we're going to run the following commands:

  1. git add * -- This tells git you want to add all altered files to the commit
  2. `git commit -m "Add theme your-theme-name" -- This saves your changes as a point that can be added to GitHub.
  3. git push --set-upstream origin yourBranchName (enter username/password if prompted) -- This uploads your commit to GitHub!

Making the Pull Request!

Now head to github.com and navigate to your forked repository (github.com/yourUserName/color-themes) and select the "Pull Requests" tab, then push the "New Pull request" button.

  1. Once the page loads, you'll want to make sure the dropdowns on the left are base repository: 12vanblart/color-themes and base: master and the options selected on the right are head repository: yourUserName/color-themes and compare: yourBranchName. GitHub Branch Comparison between 12vanblart master and stroudn1 theme
  2. Click "Create Pull Request" and fill in the details Create Pull Request Button
  3. Click "Create Pull Request" to submit your theme for review!

Closing Thoughts

Now you know enough to go make some PR's on the cool projects out there like this one from Emma:

or this one from Brittany (which has excellent documentation & issues for getting started!):

GitHub logo brittanyrw / emojiscreen

EmojiScreen is a listing of movies, TV shows and musicals depicted through emojis.

EmojiScreen πŸ“Ί

A listing of movies, TV shows and musicals depicted through emojis.

Visit emojiscreen.com

Screenshot of Emojiscreen homepage

Contributing Guidelines 🎁

Below are some guidelines to follow when contributing to this project.

Adding a Movie, TV show or Musical

To add a show or movie to this project, you will need to first check the project in the movies.js, tv.js, or musicals.js files to make sure that the movie or show you would like to add is not already in the project. Once you confirm the item you want to add is not already in the project, you will add an Emoji Card inside of the movies.js, tv.js, or musicals.js files in the data folder. Each file is made up of an array (a list) of objects. You will add a new object for your show or movie into the appropriate file. Please note: The musicals.js file is for…

Top comments (1)

Collapse
 
noviicee profile image
Novice

Looks awesome. It was fun contributing a theme in here. Thanks for posting about it @terabytetiger