NTUEE Course Map

About

A course map for NTUEE students with Gatsby & Notion

With Gatsby offering a plugin-rich ecosystem, there are a few key plugins that make this project possible.

Gatsby-image optimizes image loading and provides the correct file paths for output.
Gatsby-transformer-remark gives us access to and transforms the markdown files, using also gatsby-remark-images, gatsby-remark-normalize-paths, & gatsby-remark-relative-images to make sure the content in the markdown works properly.
Gatsby-transformer-yaml allows us to use the data in .yaml files, feel free to add gatsby-transformer-json if you prefer that format for data files.
Gatsby-plugin-sass lets us write styles using scss or sass.
Gatsby-plugin-react-helmet extends the well-known react-helmet, allowing you to adjust content in the ‘head’ of your components.

Site-level configuration is stored in config.json so it can be exposed to Forestry. This file is loaded in the gatsby-config.js to configure Gatsby and all it to be accessible via siteMetaData in your graphql queries.
Access any of Gatsby's browser api's via the gatsby-browser.js, or load global styles etc.
Add and access plugin options or siteMetaData via gatsby-config.js
Access Gatsby's node api's via gatsby-node.js. This is where the creation of new blog pages or nodes is handled.
Edit styles via src/styles/...
content/contains all your markdown blog posts, images & data files (e.g. authors list, info page data).
src/pages is a very important and required directory for Gatsby. This is where all your pages for the site live.
Blog posts are built from a template that can be accessed at src/templates.
The pages & template are comprised of components from src/components.

$ yarn install

$ yarn build

$ yarn dev