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
- Options of
gatsby-plugin-intl
siteMetadata
title
- Page titleauthor
- SEO metadatadescription
- 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.
- If
label
: node- Label of the page
to
: string- route must start with ”/” and can’t end with ”/”
children
: array[Page]- 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.
License
All packages are distributed under the MIT license. See the license here.
© 2021 Lundegaard a.s.