https://github.com/mrmartineau/gatsby-starter-code-notes
https://github.com/mrmartineau/gatsby-starter-code-notes
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/mrmartineau/gatsby-starter-code-notes
- Owner: mrmartineau
- Created: 2020-06-10T09:44:55.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-12T21:03:25.000Z (over 2 years ago)
- Last Synced: 2024-10-12T02:43:26.258Z (8 months ago)
- Language: JavaScript
- Size: 1.05 MB
- Stars: 18
- Watchers: 3
- Forks: 6
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Features
- Notes can:
- be written using Markdown (`.md`) or [MDX](https://mdxjs.com/) (`.mdx`)
- have zero, one or many tags. See an example [here](https://code-notes-example.netlify.app/syntax-highlighting)
- have associated emojis 👏
- be nested in subfolders so you can organise them how you like
- Full syntax highlighting for most programming languages
- Extra markdown features have also been added. Find out more [here](https://code-notes-example.netlify.app/markdown-features)
- Note search powered by the super-fast [Flexsearch](https://github.com/nextapps-de/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
##### With `gatsby-cli`:
```sh
gatsby new code-notes https://github.com/MrMartineau/gatsby-starter-code-notes
```
##### With `git clone`:
```sh
git clone [email protected]: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.
```sh
# 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](https://github.com/nextapps-de/flexsearch#presets). |
### Example usage
```js
// 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.
```yaml
---
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](https://github.com/mrmartineau/notes.zander.wtf/blob/master/gatsby-config.js#L20-L38). This requires `gatsby-plugin-manifest` and `gatsby-plugin-offline`.
```js
// 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](https://github.com/MrMartineau/gatsby-theme-code-notes)
---
## License
[MIT](https://choosealicense.com/licenses/mit/) © [Zander Martineau](https://zander.wtf)
> Made by Zander • [zander.wtf](https://zander.wtf) • [GitHub](https://github.com/mrmartineau/) • [Twitter](https://twitter.com/mrmartineau/)
