An extendable gatsby theme to be used as a foundation in creating Mnemonic archive sites
- Copy the contents of gatsby-theme-archive-site-example/
- Run
yarn install
to install core dependencies. - Run
yarn develop
to start the development server (locahost:8000) - Set configuration options (see below)
- Add custom content and pages
- Install the theme
yarn install @mnemonic/gatsby-theme-archive-site
- Add the configuration to your
gatsby-config.js
file
// gatsby-config.js
module.exports = {
plugins: [
{
resolve: "@mnemonicorg/gatsby-theme-archive-site",
options: {
contentPath: `${__dirname}/content/`,
dataPath: `${__dirname}/data/`,
// ... additional config options
},
},
],
}
Using yarn workspaces allows you to take advantage of hot reloading to see how changes to the theme or to the code for an archive instance will take effect while debugging an archive site locally in development.
In order for yarn workspaces to work, your local clone of the theme repo must be in the same directory as the archive site you are developing.
├── mnemonic-themes
└── gatsby-theme-archive-site
├── yourarchive
└── package.json
├── package.json
In order to initialize a yarn workspace, you must have a package.json file with the following at the root level in your local directory.
{
"private": true,
"workspaces": [
"mnemonic-themes/gatsby-theme-archive-site",
"yourarchive" // this must match the "name" field in your archive's package.json
]
}
The final change that is necessary is to change the dependency version in your archive's package.json to ensure that it is using the local workspace version of @mnemonicorg/gatsby-theme-archive-site
instead of the npm version.
{
// ...
"dependencies": {
"@mnemonicorg/gatsby-theme-archive-site": "*",
// ...
}
}
Now that you have set up your yarn workspace, from within the root level of your local directory, run:
-
yarn workspace yourarchive install
to install and link all dependencies - And then
yarn workspace yourarchive develop
Any changes you make to either the theme code, or the your archive will trigger a hot reload on the dev server.
Key | Type | Default value | Description |
---|---|---|---|
aboutPageSupportButtonLink |
string | null |
Link for about page support button |
actionButtonLink |
string | null |
A url for the primary action button in the header and footer of the archive site |
analyticsTrackingId |
string | null |
A google analytics tracking ID |
apiUrl |
string | null |
A base url for the backend API |
colors |
object | { primary: "#ff5400", primary_transparent: "#ff54009c",light: "#ffffff", dark: "#000000", bg: "#f5f5f5" } |
Theme colors for the site |
contentPath* |
string | null |
Content directory path (required) |
customHeaderNavItems |
[{ name: string, to: string }] | null |
Additional dropdown items for the "About" section in the header nav bar |
dataPath* |
string | null |
Data directory path (required) |
homepageSupportButtonLink |
string | null |
Link for homepage support button |
mailchimpEndpoint |
string | https://mnemonic.us7.list-manage.com/subscribe/post?u=dad7fb9f6b148644ffbf4a5da&id=443f12971c |
Mailchimp url for "Subscribe now" button |
socialMediaLinks |
[{ type: string, link: string }] | null |
Links for footer social media icons |
translations |
{ [locale_key]: { key: value }, ... } | null |