This is the website repository for MULTI, Northeastern University's student organization for diversity and inclusion in technology.
Written in React and built with Gatsbty.js, a React-based static site generator. Hosted on Netlify.
If you're new to Gatsby, check out the official documentation to learn more about it. To get the hang of it, try building a basic Gatsby site from scratch!
- If you haven't already, install Node.js on your machine
- Install Yarn
npm i yarn - Install Gatsby CLI
npm i gatsby-cli - Clone and
cdinto this repository - Install project dependencies
yarn install
- Installs project dependencies
yarn install - Spins up a local development server on http://localhost:8000/
yarn start - Creates a local production build and serves it on http://localhost:9000/ (helpful for previews and running performance and accessibility tests)
yarn build && yarn serve - Formats the code
yarn format - Wipes out the cache folder (helpful for debugging)
yarn clean
- Yarn: Package manager for handling project dependencies.
- Prettier: Code formatter.
- ESLint: Code linter; automaitcally flags syntactical and stylistic problems. Gatsby ships with a built-in ESLint setup.
- React: JavaScript library for building user interfaces and UI components.
- Gatsby: React-based framework for building static websites.
- GraphQL: A query language for fetching data. Natively integrated with Gatsby.
- Gatsby Image API: Official Gatsby plugin and React component to optimize image loading.
- Typefaces: Used to self-host open-source fonts and manage them as project dependencies.
- Material-UI: A React component library. In this project, we only use grid system components (Container and Grid).
- FontAwesome: A library of icons that we can import and render.
Under the src directory:
- /assets: Contains media assets, such as SVG graphics, self-hosted icons, audio and video files, and more. Note that image files are stored in a different folder.
- /components: Contains reusable UI components along with their corresponding stylesheets.
- /data: Contains any data files used to render elements.
- /images: Contains all image files (.jpg, .png, etc). Due to GraphQL configurations, images must live directly under this directory (no subfolders). You can read more about this below.
- /layouts: Contains Gatsby layout components, which are for website sections that are shared across multiple pages (such as the header and footer). There's currently one layout component that automatically wraps around all pages (configured in gatsby-config.js).
- /pages: Contains all page components as per Gatsby's folder strucutre.
- /styles: Contains global stylesheets (imported in layout.jsx), as well as stylesheets for individual pages.
- /typefaces: Includes imports for font packages (installed via Typefaces).
- /utils: Contains utility functions and custom React Hooks.
For the sake of simplicity, we rarely ever use GraphQL to query data.
In src/data, most files are in .js format, where the data is stored in a constant that is imported into components in a straightforward manner.
The only time we use GraphQL to query data is when the data includes images that we have to render (eg. team.json), which then allows us to use the Gatsby Image API for image optimization. These data files are in .json format instead of .js.
The gatsby-node.js file has been already configured so that, if a .json file has been found in sr/data with an image { src { <filename.jpg> }} property, it will automatically find the corresponding image in src/images. In React components, these images can then be queried (along with the rest of the data) via GraphQL and rendered using the Gatsby Image API. Note that it will only look for images directly under src/images, so images should not be placed in subfolders.
If this is still confusing, take a look at team.json and team-cards.jsx. If you need to implement the above, replicating the code structure of those files should be enough to get you the desired result.
If you want to learn more about GraphQL and Gatsby, check out the documentation.
Prettier is configured for code formatting. You can format your code by running yarn format. This command will also run automatically before every commit.
Prettier configurations can be found in the .prettierrc file.
All files follow a dash-separated-lowercase naming convention.
For images inside of src/images, add a prefix to categorize a group of images (eg. team-dania.jpg, team-vincent.jpg, footer-khoury-logo.png) to avoid using subfolders.
main: Where the production code lives. Whenever a new commit is made, Netlify will automatically kick off a new deploy. In general, no commits should be made directly to this branch (read below for deployment steps).develop: Base branch for integrating features. Branch off of here if you are starting a new feature, and merge back when it's ready for production.
Feature branches should be prefixed with the name of the contributer along with the feature that is being worked on (eg. dania-newsletter-form).
Netlify is configured to automatically deploy any changes that are pushed to the main branch. Be careful not to push anything directly to this branch!
- Create a pull request from your feature branch to merge into the
developbranch. - Merge pull request(s) into
develop. - Run the
developbranch locally—after pulling the merged changes—by running either a development or production environment. Make sure everything looks good! - Create a pull request from
developto merge intomain. - Merge the pull request into
main. This should automatically kick off a new deploy. - Check the deploy logs on Netlify to make sure everything's going smoothly, and your updates should now be live!