🚀 Quick Start

mkdir my-site
cd my-site
yarn init
# install @weareenvoy/ajinomoto-theme and it's dependencies
yarn add gatsby react react-dom @weareenvoy/ajinomoto-theme
# install linting packages
yarn add gatsby-plugin-eslint @danbruegge/gatsby-plugin-stylelint stylelint

• Then create a new gatsby-config.js file in the root:

module.exports = {
  plugins: [
    {
      resolve: '@weareenvoy/ajinomoto-theme',
      options: {
        brand: 'lingling' // or 'taipei'
      }
    }
  ]
};

• Add configured .eslintrc.js and .stylelintrc.js files to the root of the project. These can be found in the envoy-gatsby-base repo.

• Add contentful .env.* files. These can be found in Envoy's shared LastPass space.

You can now run your gatsby site using:

yarn gatsby develop

🛠 Overriding theme

Styles

To override theme's SCSS:

yarn add gatsby-plugin-sass node-sass

Create gatsby-browser.js file in root and add import your main.scss file. You can now make changes to individual scss files.

Pages and components

• To override any page, name your file with the same name as the page you're overriding in src/pages. Caveat to this is you'll lose contentful queries from the npm package so you need to recreate them.

• To override props, import from @weareenvoy/ajinomoto-theme:

import { HomePage, Box } from '@weareenvoy/ajinomoto-theme'

Doing more with themes

• Further reading on building Gatsby themes here.

• Use of yarn/npm is up to you.

Gatsby suggests using yarn workspaces like the gatsby-theme-examples repo does, but using yarn link or npm link is a viable alternative if you're not familiar with workspaces.