@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',
			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'
---

# Introduction
  • title - title of the page
  • description - SEO description
  • tableOfContentsDepth - how many heading levels deep should Table of Contents go
  • disableTableOfContents - completely disable Table of Contents
  • fullWidth - using fullwidth layout without sidebar

License

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

© 2021 Lundegaard a.s.