UP ACM Algolympics

This is the repository for the UP ACM Algolympics informational website.

This uses Gatsby and was started via Gatsby's hello-world boilerplate.

🚀 Quick start

Start developing.

Navigate into your new site’s directory and start it up.
```
cd algolympics-site/
gatsby develop
```
Open the source code and start editing!

Your site is now running at http://localhost:8000!

Note: You'll also see a second link: http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial.

Open and edit a file in src/. Save your changes and the browser will update in real time!

🧐 What's inside?

Here are the the top-level files and directories. You see most of these in a typical Gatsby project.

.
├── node_modules
├── src
├── static
├── .gitignore
├── .prettierrc
├── devserver.sh
├── Dockerfile
├── gatsby-config.js
├── gatsby-node.js
├── LICENSE
├── package-lock.json
├── package.json
└── README.md

node_modules/: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed.
src/: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template.
static/: This directory will contain static files.
.gitignore: This file tells git which files it should not track / not maintain a version history for.
.prettierrc: This is a configuration file for Prettier. Prettier is a tool to help keep the formatting of your code consistent.
devserver.sh: A script that runs gatsby clean (clears cache) and then gatsby develop. You can run this yourself, but this is mainly used by the Docker container to run the development server.
Dockerfile: Used to build a Docker image for this app. See the "Running via Docker" below for more details.
gatsby-config.js: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the config docs for more detail).
gatsby-node.js: This file is where Gatsby expects to find any usage of the Gatsby Node APIs (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process.
LICENSE: The license details of this code base.
package-lock.json (See package.json below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. (You won’t change this file directly).
package.json: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project.
README.md: A text file containing useful reference information about your project.

🎓 Learning Gatsby

Looking for more guidance? Full documentation for Gatsby lives on the website. Here are some places to start:

For most developers, we recommend starting with our in-depth tutorial for creating a site with Gatsby. It starts with zero assumptions about your level of ability and walks through every step of the process.
To dive straight into code samples, head to our documentation. In particular, check out the Guides, API Reference, and Advanced Tutorials sections in the sidebar.

🏢 Yearly Structure

This is intended to house the websites for all Algolympics iterations starting from 2021. As such, the files are mostly organized by year. Things outside of the year folders are intended to be reusable across several years.

Currently, there's not much reusable stuff, and that's a shame. That should probably be fixed soon.

🎊 Updating to Include the Latest Year

Suppose you want to update the website to include the latest iteration of Algolympics: Algolympics 20XX. Here are the steps you should probably follow:

Duplicate everything from year 20XX-1.
Update the relevant files, styles, data, etc.

Note that src/data/details.json and gatsby-node.js should probably be updated as well.

🦆 Running via Docker

Docker is a software that runs so-called "containers". Containers simulate the OS; think of it like running a virtual machine on your computer, except that only the OS is simulated, which makes it lighter than virtual machines. Docker is widely used everywhere these days, and is used to make it easy to maintain exactly the same environments across multiple computers. It is even used in production to ensure that the "machine" that you run locally is the same as the production "machine".

Running gatsby develop via Docker is optional, but desirable. If you want to do so,

You first have to build the Docker image by running docker build -t algosite .. Here, algosite will be the name of the image. Run this command again if you update Dockerfile, or if you want to rebuild the image for any other reason.
Then you can run the image with docker run --name algosite --rm -p 8000:8000 -v $(pwd):/usr/src/app algosite. Here,
- --name algosite specifies that the name of the Docker instance of our image is algosite.
- --rm specifies that the instance should be deleted after stopping it.
- -p 8000:8000 links port 8000 outside the Docker container to port 8000 inside the container, so that, for example, you can access port 8000 in your browser.
- -v $(pwd):/usr/src/app mounts the current folder outside the Docker container to the folder /usr/src/app inside the container. This makes it so that edits you make are seen inside the container and are thus seen by gatsby develop.
- algosite at the end is just the name of the image to make an instance of.
To restart it, you must run docker stop algosite (in a different terminal) to stop the container algosite, and then run the docker run command above again.
Remember that our docker run command above automatically deletes the container, so by stopping it, the container is also removed. If removal fails for any reason (e.g., a forceful shutdown), you may delete it manually via docker rm algosite.
To go inside the Docker container and access a terminal, run docker exec -it algosite bash. This will give you access to a terminal inside the container. You can run any available command there. It should be clear that the commands in your computer are not necessarily available inside the container.
You can also run other commands directly via docker exec, e.g., docker exec -it algosite npm run format. This runs npm run format inside the container.