Details on how the website works to supplement README.md

Advanced Content Questions

How do I update the map?

The map is generated programmatically from the US-RSE member list by a separate repository https://github.com/USRSE/usrse-map. If you have already joined US-RSE and provided your location, you should be represented on it. If you see any issues or errors with location lookup (we use geolocation of a named location) please open an issue.

How do I add a page redirect?

We have a special header field that you can define if you want a page to redirect elsewhere. We do this by way of a meta tag, and we give the viewer 2 seconds to see a message that they are being redirected. To keep these pages organized, we have them located in the redirects folder.

Files in this folder should have the following format:

---
layout: page
title: **PAGE TITLE**
permalink: **LINK TO BE REDIRECTED**
redirect: **ACTUAL LINK**
---

Example

---
layout: page
title: US-RSE Community Building Workshop
permalink: /2020-april-workshop/
redirect: https://us-rse.org/first-community-workshop
---

The above says that the page titled “US-RSE Community Building Workshop” served at permalink /2020-april-workshop will be redirected to https://us-rse.org/first-community-workshop.

How do I embed a video?

If you have a YouTube video to embed, we have an include that will make it easy to embed a full-width, fullscreen-enabled video! Simply do:

<style>
.video-container {
    position: relative;
    padding-bottom: 56.25%;   
    padding-top: 30px;
    height: 0; 
    overflow:hidden; 
}

.video-container iframe, .video-container object, .video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>

<div class="video-container">
<iframe src="https://www.youtube.com/embed/gP5UCfV3n-A" title="Video Title" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

where the url is the embed URL that is provided to you when you click to share and then embed (note that “embed” is in the URL) and the title is a title of your choosing. You are not required to include a title, and it will default to a generic “YouTube video player.”

How do I add a “Last Modified:” date to a page?

All pages have the option to include a “last modified” date, which will default to the bottom right of the page. This means to add a last modified date to a page, simply update the header as follows:

set_last_modified: true

How do I add an organizational member?

The organizational members page will automatically populate the bottom of the page once you modify the _data/org-members.yaml file and add their logo image to assets/img/org-logos. The _data/org-members.yaml file has three arrays for each tier we have. If the member is a “Basic” tier member, you would add them in the basic: section. Each entry takes the following variables:

name
The full name of the member (used to fill the alt option of the img)
url
The URL the organization wants their logo to redirect if clicked
figure
The filename, with extension, of the image (do not include the path)
acronym (optional)
An acronym of the member (if included, it will be part of the alt option of the img)
date_joined [format: YYYY-MM-DD]
When the member joined/paid (used to order the logos in each tier)
founding_member
Whether the member is a founding member (currently not used)
tier
The tier they paid for (also the section the entry is in)
contact [format: First Last <email@example.com>]
The main point of contact for the organization

Make sure you add each logo to assets/img/org-logos directory. Generally, the images have been named with the following format logo-acronym-institution, but this isn’t strict. There is a form for people to use to provide the details above.

How do I change the site’s styling (CSS)?

Most of the site’s look comes from Bulma, a CSS framework (similar to Bootstrap) that provides ready-made classes such as navbar, hero-body, button is-info and column. Our layouts and pages use these class names directly.

The site does not compile Bulma from source. Instead, assets/css/style.css is a pre-compiled copy of Bulma’s CSS that was committed to the repository in 2021, with site-specific customizations edited into it by hand since then. There is no Sass build step for this file.

To add or change styles:

  • Add new rules at the end of assets/css/style.css.
  • Do not create assets/css/style.scss (or .sass). Jekyll would compile it to the same output path as style.css, and only one of the two files would be served, with no build error. A CI check fails pull requests that do this.
  • The stylesheets are loaded in _includes/head.html in this order: style.css, then reboot.css, then bootstrap.css. A rule in style.css can be overridden by a rule with equal specificity in the later files.
  • Preview your change locally (see local_previews.md) and check a few different pages, because style.css applies to the whole site.

Plans to make this easier to maintain are tracked in issue #2063.

⬆️ Back to top ⬆️