Gatsby Theme for HIPS catalogs

How to use this theme

Prerequisites

This theme is installed on top of an existing HIPS catalog and makes it possible to display it’s content in a browser. The catalog is autogenerated by hips deploy and should contain a /catalog_index.json file and a /solutions/ directory containing the solutions and their media files.

Installation

You can add the website functionality to a catalog by running the following commands:

cd PATH_TO_MY_HIPS_CATALOG
yarn init
yarn add gatsby react react-dom gatsby-theme-hips

Setup required files

You need to add a minimal version of your logo as SVG to /src/images/icon.svg. This is used as the favicon in the browser. To change the icon on the website content header, copy the same file or a bigger version of your logo to /src/gatsby-theme-hips/images/icon.svg.

Next, create a markdown page in /pages/about.md and describe what this collection is about. Use this template:

---
layout: page
title: About
permalink: /about/
---

Add your about section here.

Then create a new file called /gatsby-config.js where you add this and adjust title and subtitle to your need:

module.exports = {
 siteMetadata: {
    title: 'MY HIPS',
    subtitle: 'HIPS Catalog theme',
    menuLinks:[
      {
         name:'About',
         link:'/about'
      },
      {
         name:'Catalog',
         link:'/catalog'
      },
    ]
  },
  plugins: [
    {
      resolve: "gatsby-theme-hips",
      options: {},
    },
  ],
}

That’s it, you can now run your gatsby site using

yarn gatsby develop

Optional adjustments

Change the content of the start page

Add a new file here: /src/gatsby-theme-hips/components/home.js. This is the default content:

import React from "react"
import { Box, Link } from "theme-ui"

const Home = () => (
  <Box>Welcome! Please visit the <Link href="/catalog">catalog</Link> to get an overview of our solutions deployed via HIPS.</Box>
)
export default Home

Adding more pages

Add new pages to /pages analogue to about.md and add them to the top menu by adjusting siteMetadata.menuLinks in gatsby-config.js.