pride-london-web-gatsby

This project is a community effort to release a brand new web platform to supplant and improve upon the product currently available at prideinlondon.org.

Contributing

Want to help out? That's amazing! The Contribution Guide should hopefully get you on your way.

Check the issues section of the repo for tickets to pick up.

Install

1. Make sure that you have the Gatsby CLI program installed:

npm install --global gatsby-cli

2. Pull the repo.
3. Install nvm from here
4. Make sure you're using the correct version of node nvm use
5. Ensure you have yarn installed.
6. Ensure you have lerna installed.
7. Run lerna bootstrap in the root directory to pull in dependencies.

As we're using lerna to deal with dependencies, don't use yarn or npm to install new ones. Run lerna add 'dependency name' or, and this is preferable, add the node-module you want to add to the package.json of the desired package and run lerna bootstrap

ENVIRONMENT VARIABLES

1. Create a .env.development file in the root of the project.
2. In the file, add the contentful space ID for space Pride Web Test after the equal sign, for example CONTENTFUL_ID=123456
3. Do the same for the access token by defining theCONTENTFUL_TOKEN

Running 🏃

Go to the package you want to run e.g. events, then run gatsby develop:

cd packages/events
gatsby develop

Tests

Test will be run using Jest + Enzyme. Can be run with:

yarn test

or to watch:

yarn test:watch

Layout

Grid layout will be done via Grid-Styled. Breakpoints and spacing configuration can be found in src/theme/theme.js. See src/grid/grid.js to see how the Container, Column and Row components are made. Example of usage can be found on the events page on src/pages/events.js. Please see Official Documentation on how to set widths for your columns and set alignment.

Styling

Styling will be done via Styled-Components.

Linting

This project uses ESlint with Prettier

To run the linter...

yarn lint

To apply Prettier formatting to all .js files...

yarn format