@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

2. 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 | Additional translation strings |