GRTWebsite2.0

A Next.js port of the GRT website, with the aims of keeping the theme the same but improving code readability and maintainability, as well as modernizing the CSS and JS logic.

Running locally

Make sure you have a compatible version of Node installed.

This project uses googleapis for build-time static props similarly to events-app. The website uses the same service account as guava-bot-slack; go there for info about creating a service account and downloading a credentials file. In addition to the steps outlined in the guava-bot-slack README, enable the Google Docs API.

You should have a keys.json that looks something like this:

{
  "type": "service_account",
  "project_id": "...",
  "private_key_id": "...",
  "private_key": "-----BEGIN PRIVATE KEY-----\n...\n...\n...\n...\n...\n-----END PRIVATE KEY-----\n",
  "client_email": "...",
  "client_id": "...",
  "auth_uri": "...",
  "token_uri": "...",
  "auth_provider_x509_cert_url": "...",
  "client_x509_cert_url": "..."
}

Instead of using a keyFile to authenticate, for this app credentials are passed via the credentials property from environment variables. To define these variables locally, create a .env.local file in the root directory that declares your CLIENT_EMAIL, PRIVATE_KEY, and the ID of the updates google doc. Your .env.local should look something like this:

CLIENT_EMAIL=...
PRIVATE_KEY=-----BEGIN PRIVATE KEY-----\n...\n...\n...\n...\n...\n-----END PRIVATE KEY-----\n
DOC_ID=...

For the PRIVATE_KEY, make sure that the \n newline characters are kept as \n and not converted to actual newlines, or the .env will not be parsed correctly.

After defining environment variables, run npm install to install dependencies and npm run dev to start the dev server on localhost:3000.

Changelog

The following is an incomplete changelog of differences from the old PHP website. I may move this to an issue or remove this entirely at some point, perhaps after the port is finished.

Fundamental changes

Next.js as a framework, instead of PHP and vanilla JS
tailwindcss instead of raw CSS and style tags
React instead of raw HTML
PWA capabilities with next-pwa (this isn't strictly necessary, but we had the manifest already so I thought "why not?")

Bug fixes

Fixed navbar wrapping and disappearing issues with display: flex
Fixed subnavbar wrapping and expanding issues with display: flex
Fixed navbar caret off centering the navlinks with position: absolute
Fixed footer not staying at the bottom of the page when the content doesn't fill the whole screen
Fixed page title saying "GRT | FIRST" on /join, /donations
Fixed favicon on non-index pages

UI changes / improvements