1.0.2 • Published 5 years ago

gatsby-theme-bejamas-core v1.0.2

Weekly downloads
-
License
MIT
Repository
-
Last release
5 years ago

Bejamas Starter - Gatsby Theme

Highly opinionated starter using Gatsby themes.

How to use

  • Create new project
  npm init
  npm i gatsby react react-dom gatsby-theme-bejamas-core
  • Create gatsby-config.js and add installed theme
module.exports = {
	plugins: [`gatsby-theme-bejamas-core`]
}
  • Override plugins options, if needed
  module.exports = {
    plugins : [
      {
        resolve: `gatsby-theme-bejamas-core`,
        options: {
          `gatsby-plugin-name`: {
            ...OPTIONS_TO_OVERRIDE
          }

          // e.g. How to override gatsby-plugin-manifest options
          `gatsby-plugin-manifest`: {
            name: `Starter`,
            icon: `static/icon.png`
          }

          // How to override siteMetadata
          `siteMetadata`: {
            name: `Website`,
          }

          // Exception - How to override gatsby-source-filesystem options - as an array
          'gatsby-source-filesystem': [
            {
              name: 'images',
              path: 'path/to/images'
            },
            {
              name: 'other source',
              path: 'other/path'
            }
          ]
        }
      }
    ]
  }

Used Gatsby plugins

Plugins with no options set

  • gatsby-plugin-styled-components

  • gatsby-plugin-react-helmet

  • gatsby-plugin-offline

  • gatsby-source-filesystem

  • gatsby-plugin-sharp

  • gatsby-transformer-sharp

  • gatsby-plugin-netlify-cache

Plugins with default options

  • gatsby-plugin-typography
{
	pathToConfigModule: 'src/utils/typography.js'
	omitGoogleFont: true
}
  • gatsby-plugin-manifest
{
  name: `Bejamas Starter`,
  short_name: `BeStarter`,
  start_url: `/?utm_source=a2hs`,
  background_color: `#ffffff`,
  theme_color: `#ffff00`,
  display: `minimal-ui`,
  icon: `static/icon.png`
}
  • gatsby-plugin-netlify
{
  headers: {
    '/\*': [
    `Content-Security-Policy: frame-ancestors 'none';`,
    `X-Frame-Options: DENY`,
    `X-XSS-Protection: 1; mode=block`,
    `X-Content-Type-Options: nosniff`,
    `Referrer-Policy: no-referrer`,
    `Expect-CT: max-age=604800`,
    `Feature-Policy: accelerometer 'none'; camera 'none'; geolocation 'none'; gyroscope 'none'; magnetometer 'none'; microphone 'none'; payment 'none'; usb 'none'`,
    `Strict-Transport-Security: max-age=31536000; includeSubDomains; preload`
    ]
  },
  mergeSecurityHeaders: false,
}

Local Gatsby plugins

  • gatsby-plugin-strict-csp

File Tree

  ├── README.md
  ├── gatsby-config.js
  ├── gatsby-node.js
  ├── package-lock.json
  ├── package.json
  ├── plugins
  │   └── gatsby-plugin-strict-csp
  │       ├── gatsby-browser.js
  │       ├── gatsby-ssr.js
  │       ├── index.js
  │       ├── package-lock.json
  │       └── package.json
  ├── src
  │   ├── components
  │   │   ├── Footer
  │   │   │   └── index.js
  │   │   ├── Grid
  │   │   │   ├── Column.js
  │   │   │   ├── Container.js
  │   │   │   ├── index.js
  │   │   │   └── Row.js
  │   │   ├── Header
  │   │   │   └── index.js
  │   │   ├── Layout
  │   │   │   └── index.js
  │   │   ├── Main
  │   │   │   └── index.js
  │   │   └── SEO
  │   │       └── index.js
  │   └── utils
  │       ├── media.js
  │       ├── theme.js
  │       └── typography.js
  └── static
      └── icon.png

Theme shadowing - how to override modules

In your src folder create gatsby-theme-bejamas-core directory. Inside you can shadow theme modules according to the file tree above.

For example: how to shadow Column.js and media.js files

├── src
│ ├── gatsby-theme-bejamas-core
│ │   ├── components
│ │   │    └── Grid
│ │   │        └── Column.js
│ │   └── utils
│ │        └── media.js
│ └── pages
│     └── <...>
├── gatsby-config.js
├── package-lock.json
└── package.json