1.0.2 • Published 5 years ago
gatsby-theme-bejamas-core v1.0.2
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