Skip to content

❄️ Themes used to build the NI Design System website

Notifications You must be signed in to change notification settings

fredvisser/gatsby-theme-ni

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

NI Gatsby Themes

This repo contains Gatsby themes that we use to create the NI Design System website. In its most basic implementation, the theme provides a CSS reset, styles for regular HTML elements (h1, h2, p, li, etc.), and a handful of useful layout components.

Entirely built upon the fantastic gatsby-theme-apollo theme from Apollo.

Packages

Publish theme changes

  • npx lerna publish and follow the prompts
  • cd packages/gatsby-theme-ni-docs/ or cd packages/gatsby-theme-ni/
  • npm login
  • npm publish

Basic usage

First, install gatsby and the theme that you want to use. This example will be using the base theme, gatsby-theme-ni.

$ npm install gatsby gatsby-theme-ni

Using a Gatsby theme is really easy! Simply configure your theme under the __experimentalThemes property in your Gatsby config. The only required option here is root, which should always be __dirname. It's also a good idea to give your site a title and description, as defined under the siteMetadata property in the config.

// gatsby-config.js
module.exports = {
  __experimentalThemes: [
    {
      resolve: 'gatsby-theme-ni',
      options: {
        root: __dirname
      }
    }
  ],
  siteMetadata: {
    title: 'My great website',
    description: 'A simple Gatsby theme example'
  }
};

Now add some React components to your src/pages directory, and you're off to the races! More info about creating pages in Gatsby here. Here's an example page:

// src/pages/index.js
import React from 'react';
import {Layout, LogoTitle} from 'gatsby-theme-ni';

export default function Home() {
  return (
    <Layout>
      <LogoTitle />
      I love themes!
    </Layout>
  );
}

As you can see, the page is wrapped in a Layout component and contains a LogoTitle, both coming from gatsby-theme-ni. Our base theme has a bunch of useful shared components like these, and they're all documented in the base theme.

Deploying to a subdirectory

In order to deploy a Gatsby site to a subdirectory, there are a few extra steps to take. First, you must provide a pathPrefix property in your Gatsby config. This option combined with the --prefix-paths option in the Gatsby CLI will handle most of the hard work. Read more about path prefixing in Gatsby here.

// gatsby-config.js
module.exports = {
  ...
  pathPrefix: '/YOUR_PATH_PREFIX'
};

Now, when you run npx gatsby bulid --prefix-paths, all pages, references to static assets, and links between pages will be prefixed with your custom path. That means that if you made a page with the path /about, it will live at /YOUR_PATH_PREFIX/about. In order for this to work within our server configuration, your website files also must exist in a directory with the same name. Here's how this sequence of events would look if you ran commands in your terminal:

$ npx gatsby build --prefix-paths
$ mkdir -p YOUR_PATH_PREFIX
$ mv public/* YOUR_PATH_PREFIX
$ mv YOUR_PATH_PREFIX public/

About

❄️ Themes used to build the NI Design System website

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 86.6%
  • CSS 13.4%