Setup

Setup

Setup

Using theme

Since this theme isn't published (yet!) on npm, you can't add it as a theme dependency. Instead you can work with it using workspaces which means you can edit the theme itself and the project using it at the same time. To do this, first start a new gatsby project by cloing this repository.

npx gatsby new guidelines https://github.com/mihika-shilpi/revoratio

Once the project is cloned, nagivate into the project directory (if you copied the above, that's guidelines). First, you want to install Gatsby and some key modules. so run

yarn

This might take a moment. Once it's done, you're ready to start working! For the react experience, you're going to want to develop the demo. This is where workspaces come in:

yarn workspace demo develop

From here on out, it's usual gatsby!

This project is configured for deploying to a path on GitHub Pages. Read more about publishing here. Just rememeber to deploy your demo workspace!

Config

Once you've started up the theme, edit the gatsby-config.js to put in your porject's key information.

Theme Options

KeyDefaultRequiredDescription
basePath/NoRoot url for all docs
configPathconfigNoLocation of config files
docsPathdocsNoThe site description for SEO and social (FB, Twitter) tags
repositoryUrl-NoThe complete URL of your repository (supports GitHub, GitLab and Bitbucket). Example: https://github/revoratio/gatsby-themes
baseDir-NoIf your Gatsby site does not live in the root of your project directory/git repo, pass the subdirectory name here (ex: docs)
withMdxtrueNoIf necessary, you can add your own MDX options to the theme. To do so, make sure you turn this option to false and include gatsby-plugin-mdx on your gatsby-config
branchmainNoDefault branch of the repository

Note: When adding a BitBucket link on the `repositoryUrl` option, don't add the `src` and `branch` to it. Example of correct link: `https://bitbucket.org/jpedroschmitz/gatsby-themes`

Example usage

gatsby-config.js
module.exports = {
  siteMetadata: {
    siteTitle: `gatsby-theme-revoratio`,
    defaultTitle: `gatsby-theme-revoratio`,
    siteTitleShort: `gatsby-theme-revoratio`,
    siteDescription: `Gatsby Theme to create brand guideline websites easily and quickly`,
    siteUrl: `https://revoratio.com`,
    siteAuthor: `Revoratio`,
    siteImage: `/cover.png`,
    siteLanguage: `en`,
    basePath: `/`,
  },
  plugins: [
    {
      resolve: `gatsby-theme-revoratio`,
      options: {
        basePath: `/`,
        configPath: `src/config`,
        docsPath: `src/docs`,
        repositoryUrl: `https://github.com/mihika-shilpi/revoratio`,
        baseDir: `demo`,
      },
    },
  ],
};

The Homepage

Create a file at src/gatsby-theme-revoratio/text/index.mdx to edit the text. Example:

src/gatsby-theme-revoratio/text/index.mdx
# Introduction


My awesome project!

To create the left hand side page sidebar navigation, create and edit a yaml file. Create a sidebar.yml file under the src/gatsby-theme-revoratio/config folder. Then add your section titles and guide pages into the structure. You can add external links too.

sidebar.yml
# Just a simple item
- label: 'Home'
  link: '/'
# With a list of items
- label: 'With subitems'
  items:
    - label: 'My Example'
      link: '/my-example'
    - label: 'GitHub'
      link: 'https://github.com/jpedroschmitz'

Guidelines

And now, you're ready to start creating your guidelines! All MDX files created inside your docs folder will become pages, with the path defined by the filename. Inside all docs files, as MDX frontmatteer you can optionally define these items:

---
title: 'My Example' // page title
description: 'A simple description for this page' // SEO description
image: /banner.jpeg // SEO image
featuredImage: /banner.jpeg // Optional header image for the page
disableTableOfContents: false // Turn of the automatic page TOC on the right
---


And then all you MDX and components content

Prev

Building Brand Guidelines

Next

MDX Styles

Setup