Community Plugin
View plugin on GitHub

@fast-ai/gatsby-theme-fast-ai-sidebar

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

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

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: array[Page]
    • nested pages

License

All packages are distributed under the MIT license. See the license here.

© 2021 Lundegaard a.s.

© 2022 Gatsby, Inc.