Skip to content
This repository has been archived by the owner on Jun 21, 2022. It is now read-only.

Update the Sponsors List

Jump to bottom
Jesse Valva edited this page May 26, 2021 · 4 revisions

At a Glance

Image directory (location to upload sponsor logos): https://github.com/pioneers/website/tree/master/assets/images/sponsors

HTML file to edit: https://github.com/pioneers/website/blob/master/support-pie/index.html

Properties of the Logo

Ask the person supplying the logo to provide a sufficiently large image. If they provide you with something like 250x250, that probably won't work well. Something like 800x800 or larger is a better size. If needed, crop out some extra white space padding the edges of the logo. This crop will allow the main part of the logo to be larger, clearer, and not awkward looking on the page. File extension does not really matter. Things like .jpg, .png, and .svg are all acceptable.

Uploading the Logo

Upload the image to website/assets/images/sponsors/. This can be done in two ways:

  1. Navigate to https://github.com/pioneers/website/tree/master/assets/images/sponsors and select the "Add file" button in the top right of the page. From the dropdown menu, select "Upload files." You will be taken to a page where you can drag and drop the desired image file. After uploading the file, enter text describing your upload in the text field under "Commit changes." Try something like "Add sponsor logo." Take note of your branch name, you'll need it later (should be something like username-patch-#). Click the green "Commit changes" button at the bottom of the page.
  2. Create a new pull request in your terminal like the absolute swag-lord that you know you truly are.

Starting Changes to the Sponsor Page

The file to edit is website/support-pie/index.html. This can be done in two ways:

  1. Navigate to https://github.com/pioneers/website/blob/master/support-pie/index.html. In the top left of the page, click the button labeled "Master." From the dropdown menu, select your previous branch (should be something like username-patch-#). After, select the pencil icon on the right side of the page, just above the start of the code. Move on to the next section of this wiki titled "Editing the Sponsor Page."
  2. You're going to push changes to your branch from your terminal like the absolute monster gamer you know you truly are. Be ready.

Editing the Sponsor Page

  1. Determine the tier of your sponsor (Platinum, Gold, Silver, Bronze).
  2. Navigate down to that tier. You'll want to look for something like
<h2 style="color:#796d00" align="center">Bronze Sponsors</h2>
  1. You're going to want to mimic the existing structure of code aka copy and paste something like this:
<div class="pie-sponsor-logo">
	<a href="https://www.sponsor.com/">
		<img src="{{ "/assets/images/sponsors/company.png" | prepend: site.baseurl }}"
			alt="Company Name">
	</a>
</div>
  1. It's easiest to paste beneath the closing </div> from the previous company entry. Note that order matters. The order the companies show up in the HTML file is the order the images will show in the website.
  2. Save your changes and commit.

Viewing the Results

  1. Navigate to https://github.com/pioneers/website/pulls
  2. Select your recently made pull request (probably something like "Add sponsor logo")
  3. Look for the Render bot post
  4. Click the first link provided in the post. It should look something like
Your Render PR Server URL is https://website-staging-pr-###.onrender.com.
  1. It might take a couple of minutes to load, but you will see a newly made PiE website with your recently added changes! Assuming you didn't break anything :)

Alternatively, you can use your local build like the absolute bad boi that you know you are.

Wrapping Up

  1. Beg someone to approve your pull request (probably want to message #website aka #infrastructure in Slack)
  2. Beg someone to redeploy the website with your newly merged changed to master (probably want to message #website aka #infrastructure in Slack)
  3. Profit
Clone this wiki locally