- Expand the club's brand image
- Provide information about the club and how to join
- Provide information about all MISC events
- Be the home of "challenge of the week" posts and writeups [soonβ’]
The website is a static site built using Gatsby which is based on React and uses GraphQL to access data.
Clone the repository. The rest of this guide will assume you are in the root of the repository.
- Install the Gatsby CLI
yarn global add gatsby-cli
# or if you must...
npm install -g gatsby-cli
- Install packages
yarn install
# or if you must...
npm install
- Start the development server
gatsby develop
A hot-reloading development environment should now be accessible at localhost:8000
.
.
|-- node_modules
|-- content
|-- gallery
|-- src
| |-- components
| |-- templates
| |-- images
| |-- pages
| |-- events
| |-- posts
| | |-- 2019-10-06-post1 (folder)
| | | β-- index.md
| | β-- ...
| β-- styles
|-- static
|-- .gitignore
|-- gatsby-browser.js
|-- gatsby-config.js
|-- gatsby-node.js
|-- package-lock.json
|-- package.json
β-- README.md
-
/node_modules
: This directory contains modules used and is created when you runyarn install
ornpm install
. -
/static
: Contains files that will be copied to the root of the/public
build directory. Use this for linking files hosted on the website. -
/src
: Contains most of the stuff needed to build the website.-
components
: Contains.js
files all of which export a React component that will probably be used in a file in eitherpages
ortemplates
or both. -
templates
: Contains.js
files all of which export a React component that will probably be used to generate pages (see the bit ongatsby-node.js
). -
images
: Contains images and other assets. -
pages
: Contains the static pages (React components). Each page is automatically loaded by Gatsby and turned into a route on the website. For example, theindex.js
file in thepages
directory exports a React component that will render on the route/index
. -
posts
: Contains folders which themselves contain a markdown file (and any other assets used by said markdown file) which will get built into a route using theblog-post.js
template intemplates
. This should be one of the most active directories in the sense that new content can be loaded onto the site easily by creating files in this directory. The naming conventionYYYY-MM-DD-post-title
should be used for subdirectories. -
events
: Contains folders which themselves contain a markdown file (and any other assets used by said markdown file) which will get built into a route using theevent-post.js
template intemplates
. Naming convention same as above. -
styles
: Contains SASS files as well as standard CSS files. These files need to be imported by the component/template/page that uses them. E.g. at the top of theblog-template.js
file, there is animport '../styles/blog.sass'
statement.
-
-
content/gallery
: This folder contains all the club pictures loaded into the gallery page. Add new pictures here. -
gatsby-browser.js
: This file is where Gatsby expects to find any usage of the Gatsby browser APIs (if any). These allow customization/extension of default Gatsby settings affecting the browser. This does not do a lot at the moment. -
gatsby-config.js
: This is the main configuration file for a Gatsby site. This is where site (metadata) like the site title and description is specified, and where Gatsby plugins can be include from. (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. Current usage of this file includes building pages from the markdown files in theposts
directory.
- Main contributor and maintainer - Joseph Surin (joseph#8210 on Discord)
- Gallery Page - Asil Mian
- MISC Logo Design - Shevon Mendis
Any issues should be reported to Joseph via Discord or Slack or by making an issue in this repository.