Sparkbox Design Systems Survey

Setup

The build system for this website uses Node and Gatsby, with each survey being a microsite subpage. The following steps explain how to setup your local environment after pulling down the repository:

1. Before running the project setup node/npm (Installation instructions).

2. Install the (Gatsby CLI) globally npm install -g gatsby-cli

3. Run npm install to install all packages and dependencies. (If you have a M1 Mac, you may need to run brew reinstall vips before installing the site packages and dependencies.)

Running Latest Microsite

1. Run npm start in your shell terminal
2. A hot-reloading development environment of the latest version will start at http://localhost:8000.
3. Open localhost:8000/2022 in your browser to view the site

Run all years (except 2018)

1. In your shell run npm run start
2. A hot-reloading development environment of the all Gatsby versions will start at http://localhost:8000.
3. Open localhost:8000 in your browser and select the desired year to view

Note: Running all years can get slow since each year has its own Sass file being compiled. It is recommended to only run the latest version during development

Run 2018 site locally

1. Run npm run build2018. This will:

   1. Remove any current 2018 folder in the static directory
   2. Go into /2018
   3. Install dependencies
   4. Build the 2018 survey site
   5. Copy that build into static directory

2. Run npm run build. This will:

   1. Build the Gatsby sites in the root
   2. Build the 2018 site at /2018 from the static folder

3. Run a local server.

   1. Install npm http-server npm i -g http-server
   2. Start the server from the public folder (this is the compiled site that will be live) http-server ./public

4. You can find the latest site at the root localhost:8080 and the 2018 site at localhost:8080/2018

Gatsby

The site will be powered by Gatsby and will be organized by:

• Components
• Pages
• SCSS

Editing Content in GitHub

1. Go to src > components.
2. Click on the file you want to update.
3. Choose the edit this file option in the toolbar and update the content.
4. When your updates are complete, create a descriptive commit about your updates that follows the (Sparkbox Standard on commit messages).
5. Create a new branch and open up a pull request for your changes, then send the PR to a teammate for review.