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.
Check out the code locally
Use git clone
or GitHub desktop.
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
Make sure you have node and yarn installed
On a mac, that looks like:
brew install node
brew install yarn
Install dependencies
IMPORTANT: Always use yarn
instead of npm
. Lots of tutorials will use npm; simply replace that for yarn.
yarn install
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.
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._
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
Making a pull request into base main
will:
Pushing new commits to that open pull request will:
Merging your PR into main
will deploy the site live.
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
/node_modules
: This directory contains all of the modules of code that your project depends on (npm packages), installed by yarn
.
/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β.
.gitignore
: This file tells git which files it should not track / not maintain a version history for.
.prettierrc
: This is a configuration file for Prettier. Prettier is a tool to help keep the formatting of your code consistent.
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).
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.
yarn.lock
: Autogenerated by the yarn
tool. This locks dependencies, helping create build consistency.