Gatsby-theme-fast-ai-sidebar NPM

Quick Start

mkdir my-site
cd my-site
yarn init
# install gatsby-theme and it's dependencies
yarn add gatsby react react-dom gatsby-theme-fast-ai-sidebar

Then add the theme to your gatsby-config.js. We'll use the long form here for education purposes.

module.exports = {
	siteMetadata,
	plugins: [
		{
			resolve: 'gatsby-theme-fast-ai-sidebar',
			options: {
				docsPath: `${__dirname}/content/docs`,
				intlOptions: {
					languages: ['en', 'cs'],
					path: `${__dirname}/src/intl`,
					defaultLanguage: 'cs',
				},
				siteMetadata: {
					author: 'Jerry Lundegaard',
					description: 'Beautiful site',
					title: 'FastAI Docs examples',
				}
			},
		},
	],
};

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

yarn gatsby develop

Note that this site doesn't do anything, so you're see a missing resources error. Create a simple page in src/pages/index.js to see a page on the root url.

import React from 'react';
import { Page, Seo } from 'gatsby-theme-fast-ai-sidebar';
import { Heading } from '@fast-ai/ui-components';

const Index = (props) => (
	<Page {...props}>
		<Seo title="Home" />

		<Heading>Welcome</Heading>
	</Page>
);

export default Index;

Options

`docsPath`

Path to your MDX files

`intlOptions`

Options of gatsby-plugin-intl

`siteMetadata`

title - Page title
author - SEO metadata
description - SEO metadata

MDX pages

Your mdx file should be located in docsPath.
The URL path of the page is created via createFilePath

Frontmatter

You can add metadata to your page via frontmatter properties, e.g.:

---
title: 'Introduction'
description: 'SEO description'
---

title: string - heading of the page - H1
description: string - meta description
disableTableOfContents: boolean - completely disable Table of Contents
fullWidth: boolean - content has 100% width - sidebar navigation is hidden - header is not floating (unless mobile resolution)
tableOfContentsDepth: boolean - how many heading levels deep should Table of Contents go
disableBreadcrumbs: boolean - hide breadcrumbs

Links

Rewrite the ./link.js file to determine page hierarchy.

module.exports = [{
		root: true ,
		label: "Label shown in Navigation",
		to: "/path/to/page",
		children: [
			// list of descendants
		]
	}, 
	{
	// ...
	}
]

root: boolean - If true the navigation of the site will treat this page as the navigation root for the child pages. - You can have more root pages nested inside each other.
label: node - Label of the page
to: string - route must start with "/" and can't end with "/"
children: arrayPage - nested pages

See our related projects

Zoe s-analytics demo - React Web application with S-Analytics
@fast-ai/ui-components - React UI component library
@fast-ai/gatsby-plugin-staged-fonts - Implementation of Critical FOFT with Data URI font loading strategy
gatsby-theme-fast-ai - Gatsby theme for Zoe applications
@redux-tools - Modular Redux is possible!
react-union - Intergrate React apps into various CMSs seamlessly.
validarium - Validations done right.