Skip to content

Latest commit

 

History

History
89 lines (53 loc) · 2.89 KB

README.md

File metadata and controls

89 lines (53 loc) · 2.89 KB

How Our Site Works

A tale by Caleb (@cjdenio)

Contents

Architecture

The Mayhem website is a fully static site, built with Jekyll and hosted on GitHub Pages.

Except...

I didn't use GitHub Pages's native Jekyll support. 😱 This was mostly because I wanted to use Tailwind CSS (and also React, but more on that later). Instead, the site is built by a small GitHub Actions workflow that compiles everything and deploys to the gh-pages branch.

Running locally

If you are running Windows: stop, install Ubuntu 22.04 under WSL, and install ruby (with rbenv), nvm, node >=20.

First, install the following:

Then, clone this repository using Git (I assume you already know how to do that)

Open your favorite terminal (or Command Prompt), and run these commands:

bundle install # Install Ruby dependencies, e.g. Jekyll
yarn install # Install Node dependencies, e.g. Tailwind

Then, run

./bin/dev

and visit http://localhost:4000!

⚠️ ./bin/dev DOESN'T WORK ON WINDOWS!!! Click here for Windows instructions

Your warranty will be voided by using Windows

Open 2 terminals (or Command Prompts), and run these 2 commands:

bundle exec jekyll serve

yarn build:css --watch

Where things are

  • Pages are HTML files in source/

  • The code for the Sponsors page is in source/_data/sponsors.yml

  • The navbar is in source/_includes/header.html

  • Images are in source/assets/images/

  • The "Mayhem In Competition" entrypoint is in source/assets/src/in-competition/main.js. (more on that in three seconds)

How "Mayhem In Competition" works

Finally! Some good stuff!

Mayhem In Competition, as I've decided to call it, is a widget that displays semi-real-time match results for events we're currently at.

Barring disaster, it shows up automatically during any event that we're attending.

It's built with React, Tailwind (like the rest of the site), and SWR for data fetching. It's powered by The Blue Alliance's API.

Compilation is handled by esbuild. See the build script here.