The Gatsby notes theme
A Gatsby theme for publishing notes to your website including support for automatically generated breadcrumbs and folder structures.
Installation
For a new site
If you're creating a new site and want to use the notes theme, you can use the notes theme starter. This will generate a new site that pre-configures use of the notes theme.
gatsby new my-themed-notes https://github.com/gatsbyjs/gatsby-starter-notes-theme
Manually add to your site
- Install the theme
npm install gatsby-theme-notes
- Add the configuration to your
gatsby-config.js
file
// gatsby-config.js
module.exports = {
plugins: [
{
resolve: `gatsby-theme-notes`,
options: {
// basePath defaults to `/`
basePath: `/notes`,
},
},
],
}
-
Add notes to your site by creating
md
ormdx
files inside/content/notes
.Note that if you've changed the default
contentPath
in the configuration, you'll want to add your markdown files in the directory specified by that path. -
Run your site using
gatsby develop
and navigate to your notes. If you used the above configuration, your URL will behttp://localhost:8000/notes
Options
Key | Default value | Description |
---|---|---|
basePath |
/ |
Root url for all notes pages |
contentPath |
/content/notes |
Location of notes content |
mdxOtherwiseConfigured |
false |
Set this flag true if gatsby-plugin-mdx is already configured for your site. |
homeText |
~ |
Root text for notes breadcrumb trail |
breadcrumbSeparator |
/ |
Separator for the breadcrumb trail |
preset |
gatsby-theme-ui-preset |
Theme UI compatible package name that will act as the base styles for your project. Be sure to install the package you're referencing. Set to false to ignore all presets and only use local styles. |
How Styles work
This theme enables gatsby-plugin-theme-ui
which allows you to leverage Theme UI to style your project.
By default, gatsby-theme-ui-preset
operates as your base styles. Any local shadowed styles deep merge with that preset.
Alternatively, you can pass a preset of your own choosing by installing the package and passing the package name as a preset
option. Again, local styles will deep merge with this preset if they exist.
// gatsby-config.js
module.exports = {
plugins: [
{
resolve: `gatsby-theme-notes`,
options: {
preset: `my-preset-name-here`,
},
},
],
}
If you'd rather use only local styles with no underlying preset, pass the preset
option as false
.