Features
- Notes can:
- Full syntax highlighting for most programming languages
- Extra markdown features have also been added. Find out more here
- Note search powered by the super-fast Flexsearch
Setup
Using Gatsby Starter Code Notes
This guide will take you through setting up Code Notes with Gatsby Starter Code Notes.
Step 1: Starter installation
gatsby-cli
:
With gatsby new code-notes https://github.com/MrMartineau/gatsby-starter-code-notes
git clone
:
With git clone git@github.com:MrMartineau/gatsby-starter-code-notes.git
cd code-notes
yarn
Step 2: Develop & Build
Once installed or cloned locally and all packages are installed you can begin developing your site.
# Run localhost
yarn dev
# Build your Gatsby site
yarn build
Usage
Theme Options
Key | Default value | Description |
---|---|---|
basePath |
/ |
Root url for all notes pages |
contentPath |
/content/notes |
Location of notes content |
logo |
'' (empty string) |
Path to your site's logo. Will be used as the src attribute for an image |
showDescriptionInSidebar |
true |
Show config.site.description in the sidebar |
gitRepoContentPath |
'' |
Set the location for your notes if they're hosted online, e.g. your git repo. This will show a "Edit this page" link underneath each note |
showThemeInfo |
true |
Show info about this Gatsby theme |
mdxOtherwiseConfigured |
true |
Configure gatsby-plugin-mdx . Note that most sites will not need to use this flag. If your site has already configured gatsby-plugin-mdx separately, set this flag false . |
flexSearchEngineOptions |
{ encode: 'icase', tokenize: 'forward', resolution: 9 } |
Configure FlexSearch's index method. The default value uses FlexSearch's default preset. Find out your other options here. |
Example usage
// gatsby-config.js
module.exports = {
plugins: [
{
resolve: `gatsby-theme-code-notes`,
options: {
basePath: '/',
contentPath: '/content/notes',
gitRepoContentPath:
'https://github.com/mrmartineau/gatsby-theme-code-notes/tree/master/example/code-notes/',
showDescriptionInSidebar: true,
showThemeInfo: false,
logo: 'https://brand.zander.wtf/Avatar.png',
},
},
],
}
Add notes to your site by creating md
or mdx
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.
Note frontmatter
Frontmatter information (written in YAML) can be used to add metadata and extra information for your notes
Only the title
field is required, the rest are optional.
---
title: Note metadata
emoji: 😃
tags:
- metadata
- info
link: https://zander.wtf
---
Link
The link
item is used to display a link that is related to the note itself. It will appear below the title if.
Emoji
The emoji
frontmatter item will add an emoji beside the title on listing views and above the title on individual note pages
Tags
The tags
array frontmatter item allows you to add as many tags to a note as you'd like.
Advanced usage
PWA
Turn your code notes into a PWA using this extra config. This requires gatsby-plugin-manifest
and gatsby-plugin-offline
.
// gatsby-config.js
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `Zander's Code Notes`,
short_name: `CodeNotes`,
description: `Notes on code. My memory bank.`,
start_url: `/`,
background_color: `hsl(210, 38%, 95%)`,
theme_color: `hsl(345, 100%, 69%)`,
display: `standalone`,
icon: `static/logo.png`,
},
},
{
resolve: `gatsby-plugin-offline`,
options: {
precachePages: [`/*`, `/tag/*`],
},
},
For more information visit the Theme repository
License
Made by Zander • zander.wtf • GitHub • Twitter