octue / planex-site

The octue website front end

Planex: Octue website

This repository (planex-site) is for developing the front-end components and pages of the octue website.

This site uses the DatoCMS content management system.

We can duplicate our DatoCMS project/models setup for you. Along with this OSS frontend that will save you WEEKS of time to get to a beautifully integrated, state-of the art Gatsby site with linked CMS. We're a non-profit working to fight climate change, and would ask for a donation of two developer-days of wages to do that. Just get in touch.

🚀 Quick start

1. Check out the code locally

   Use git clone or GitHub desktop.

2. ** Install pre-commit hooks**

   Install the program - see https://pre-commit.com/ for instructions on how. Then do:

   pre-commit install && pre-commit install -t commit-msg
   

3. Make sure you have node and yarn installed

   On a mac, that looks like:

   brew install node
   brew install yarn

4. Install dependencies

   IMPORTANT: Always use yarn instead of npm. Lots of tutorials will use npm; simply replace that for yarn.

   yarn install

5. EITHER: Start the storybook to develop individual components/pages

   yarn storybook

   Your storybook is now running at http://localhost:6006! Any saved changes will update in real time in the browser ("hot reloading").

   Note that you'll need to restart after adding or removing stories.

6. AND/OR: Start the gatsby reloader to preview the whole site

   yarn start

   Your site is now running at http://localhost:8000! Any saved changes will update in real time in the browser ("hot reloading")!

   _Note: You'll also see a second link: http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial._

💫 Workflow

⛏️ Make changes

Check out a new branch:

# Check the .pre-commit-config.yaml file for valid patterns
git checkout -b feature/my-new-feature

Make and save any edits you need, using either the storybook or the gatsby reloader from above.

Commit your changes regularly and in a granular way with an informative message. Our commit messages have to have a certain form, because we use conventional commits. Instructions for what prefixes are available, what they're for and how to use them are here:

git commit <file> -m "FIX: updated copyright string"

Push your changes to GitHub:

git push

🙈 Preview builds for colleagues

Making a pull request into base main will:

• build and publish a preview using Gatsby Cloud
• run lighthouse checks to monitor site performance and accessibility

Pushing new commits to that open pull request will:

• update the review and lighthouse report on every commit to your branch.

🤖 Deploy

Merging your PR into main will deploy the site live.

🧐 What's all this stuff?

A quick look at the top-level files and directories.

.
├── node_modules
├── src
├── .gitignore
├── .prettierrc
├── gatsby-config.js
├── LICENSE
├── yarn.lock
├── package.json
└── README.md

1. /node_modules: This directory contains all of the modules of code that your project depends on (npm packages), installed by yarn.

2. /src: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. src is a convention for “source code”.

3. .gitignore: This file tells git which files it should not track / not maintain a version history for.

4. .prettierrc: This is a configuration file for Prettier. Prettier is a tool to help keep the formatting of your code consistent.

5. gatsby-config.js: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the config docs for more detail).

6. package.json: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how yarn knows which packages to install for your project.

7. yarn.lock: Autogenerated by the yarn tool. This locks dependencies, helping create build consistency.