osu!UWaterloo website

This is a potential new frontend for the osu!UWaterloo club website.

Acknowledgements

The osu! cookie on the root page uses code borrowed from the first-edition of the osu!UWaterloo website. Many thanks to Player0 (GitHub) and ThunderBird2678 (GitHub) for creating the first edition!

This website is generated using Hugo. The theme was developed by Feiri (GitHub).

This website displays content in the Quicksand font, which is licensed under the Open Font License.

Developing locally

Developing the website locally can help you preview changes before creating a merge request to the master branch. Make sure you have cloned the repository first:

$ git clone https://github.com/osu-uwaterloo/osu-uwaterloo-website.git
$ cd osu-uwaterloo-website

Option 1: Local Hugo Installation

Install Hugo Extended. Follow the Hugo installation guide to install Hugo Extended on your platform of choice. After installation, run the following command in the project directory.

$ hugo server

Option 2: Docker Image

To avoid installing Hugo, you can also use the Hugo docker image. First pull the image from Docker Hub, then run the following command.

$ docker run -v $(pwd):/src -p 1313:1313 jakejarvis/hugo-extended:latest server --buildDrafts --buildFuture --bind 0.0.0.0

Content management

The website content can be automatically updated by making changes to the relevant places in this Git repository. On commits/merges to the master branch, GitHub will run a build-and-deploy action to update the website on production. All merge requests must be approved by an authorized reviewer before being eligible for merging.

about

The "about" page is a simple static-content page that describes the osu!UWaterloo club. The content for the "about" page can be modified by editing /content/about/_index.md.

members

The "members" page showcases all current and past members of the osu!UWaterloo club. To configure the users that show up on this page, modify the /data/members.yaml file.

Members are split into three categories, each represented by a different array in the members.yaml file. Entries must follow their respective formats:

executives

- username: string        # osu! username
  userId:   number        # osu! user ID
  term:     string        # UWaterloo term (eg. 1B or 4A etc)
  program:  string        # UWaterloo program (eg. ECE or AFM etc) 
  name:     string | null # IRL name
  discord:  string        # discord username
  website:  string | null # personal website
  twitch:   string | null # Twitch handle
  youtube:  string | null # YouTube handle 
  github:   string | null # GitHub username
  blurb:    string        # user blurb
  role:     string        # executive member role

members

- username: string        # osu! username
  userId:   number        # osu! user ID
  term:     string        # UWaterloo term (eg. 1B or 4A etc)
  program:  string        # UWaterloo program (eg. ECE or AFM etc) 
  name:     string | null # IRL name
  discord:  string        # discord username
  website:  string | null # personal website
  twitch:   string | null # Twitch handle
  youtube:  string | null # YouTube handle
  github:   string | null # GitHub username
  blurb:    string        # user blurb

alumni

- username: string        # osu! username
  userId:   number        # osu! user ID
  program:  string        # UWaterloo program (eg. ECE or AFM etc) 
  name:     string | null # IRL name
  discord:  string        # discord username
  website:  string | null # personal website
  twitch:   string | null # Twitch handle
  youtube:  string | null # YouTube handle 
  github:   string | null # GitHub username
  blurb:    string        # user blurb

events

The "events" page displays all current and past events hosted by osu!UWaterloo. To create a new event, create a new file under the /content/events directory. The file name should adhere to the following syntax:

• <date>-<event-name>.md

... where <date> is an ISO 8601-formatted date (year-month-day) and <event-name> is some short identifier for the event. The file name will be used in the URL that points to the event post, so keep it short and sweet, but still distinguishable.

The recommended way to begin creating a new event is by using the following hugo command:

$ hugo new "events/<date>-<event-name>.md"

Running this command will create a pre-formatted boilerplate document with instructions given on how to configure the front-matter.

It is advised to use images that are hosted locally within this repository to minimize reliance on external links. All cover images and any other images used for event posts should be saved under the /static/event-images directory.