# Boost Website CMS

This repo contains the Boost Brand website which uses [Gatsby](https://www.gatsbyjs.org/), and [Netlify CMS](https://www.netlifycms.org). It is based on a simple blog starter template.

It follows the [JAMstack architecture](https://jamstack.org) by using Git as a single source of truth, and [Netlify](https://www.netlify.com) for continuous deployment, and CDN distribution.

[![Netlify Status](https://api.netlify.com/api/v1/badges/fcd363ff-30b2-4ecd-8f74-43727aa41aa5/deploy-status)](https://app.netlify.com/sites/ecstatic-leakey-6c2eb8/deploys)

## Features

- A simple landing page with blog functionality built with Netlify CMS
- Editabe Pages: Landing, About, Product, Blog-Collection and Contact page with Netlify Form support
- Create Blog posts from Netlify CMS
- Tags: Separate page for posts under each tag
- Basic directory organization
- Blazing fast loading times thanks to pre-rendered HTML and automatic chunk loading of JS files
- Uses `gatbsy-image` with Netlify-CMS preview support
- Separate components for everything
- Netlify deploy configuration
- Perfect score on Lighthouse for SEO, Accessibility and Performance (wip:PWA)

## Prerequisites

- [nvm](https://github.com/nvm-sh/nvm) or [nvm-windows](https://github.com/coreybutler/nvm-windows)

### Access Locally

```sh
# Login to npm as an ovo user
$ npm login

# Clone the repository
$ git clone https://github.com/[GITHUB_USERNAME]/[REPO_NAME].git
$ cd [REPO_NAME]

# Set correct node version
$ nvm use

# Install Dependencies
$ npm install

# Start development Server
$ npm run start
```

To test the CMS locally, you'll need run a production build of the site:

```sh
$ npm run simulate-prod
```

To run Netlify CMS locally

Ensure static/admin/config.yml has ‘local_backend: true’

```sh
npx netlify-cms-proxy-server
```

Open another terminal

```sh
npm run develop
```

Go to http://localhost:8000/admin click login (no need for credentials)

[View GraphQl](http://localhost:8000/___graphql)

To test netlify.toml redirects locally

```sh
npm install netlify-cli -g
netlify login
netlify dev

```

https://docs.netlify.com/cli/get-started/#installation

### Testing

- [Jest](https://jestjs.io/) has been added for unit tests
- [React Testing Library](https://github.com/testing-library/react-testing-library) for testing react components
- [Cypress](https://www.cypress.io/) for e2e testing
- [Axe](https://www.deque.com/axe/) for React and Cypress has been added to audit for accessibility during development

### Media Libraries (installed, but optional)

Media Libraries have been included in this starter as a default. If you are not planning to use `Uploadcare` or `Cloudinary` in your project, you **can** remove them from module import and registration in `src/cms/cms.js`. Here is an example of the lines to comment or remove them your project.

```js
import CMS from "netlify-cms-app";
// import uploadcare from 'netlify-cms-media-library-uploadcare'
// import cloudinary from 'netlify-cms-media-library-cloudinary'

import AboutPagePreview from "./preview-templates/AboutPagePreview";
import BlogPostPreview from "./preview-templates/BlogPostPreview";
import ProductPagePreview from "./preview-templates/ProductPagePreview";
import IndexPagePreview from "./preview-templates/IndexPagePreview";

// CMS.registerMediaLibrary(uploadcare);
// CMS.registerMediaLibrary(cloudinary);

CMS.registerPreviewTemplate("index", IndexPagePreview);
CMS.registerPreviewTemplate("about", AboutPagePreview);
CMS.registerPreviewTemplate("products", ProductPagePreview);
CMS.registerPreviewTemplate("blog", BlogPostPreview);
```

## Debugging

Windows users might encounter `node-gyp` errors when trying to npm install.
To resolve, make sure that you have both Python 2.7 and the Visual C++ build environment installed.

```
npm config set python python2.7
npm install --global --production windows-build-tools
```

[Full details here](https://www.npmjs.com/package/node-gyp "NPM node-gyp page")

## Purgecss

This plugin uses [gatsby-plugin-purgecss](https://www.gatsbyjs.org/packages/gatsby-plugin-purgecss/)

## Troubleshooting

### Loggin into CMS fails

If you see a 404 in the network tab in devtools while logging into the CMS, it's probably an expired Github token.

Fix by: 1. visting https://app.netlify.com/sites/ecstatic-leakey-6c2eb8/settings/identity#git-gateway 2. click "Edit Settings" 3. click "Generate access token in GitHub" 4. save

That should solve the issue :)