@mnemonicorg/gatsby-theme-archive-site

@mnemonicorg/gatsby-theme-archive-site

An extendable gatsby theme to be used as a foundation in creating Mnemonic archive sites

Getting started

For a new archive site

1. Copy the contents of gatsby-theme-archive-site-example/
2. Run yarn install to install core dependencies.
3. Run yarn develop to start the development server (locahost:8000)
4. Set configuration options (see below)
5. Add custom content and pages

For an existing site

1. Install the theme

yarn install @mnemonic/gatsby-theme-archive-site

1. 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
      },
    },
  ],
}

Setting up a development environment

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.

Directory structure

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

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
  ]
}

yourarchive/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": "*",
    // ...
  }
}

Starting the dev server

Now that you have set up your yarn workspace, from within the root level of your local directory, run:

1. yarn workspace yourarchive install to install and link all dependencies
2. 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.

Usage

Theme options

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