Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mrmartineau/gatsby-theme-code-notes

A Gatsby theme for publishing code-related notes to your website
https://github.com/mrmartineau/gatsby-theme-code-notes

gatsby gatsby-plugin gatsby-theme markdown mdx

Last synced: about 1 month ago
JSON representation

A Gatsby theme for publishing code-related notes to your website

Host: GitHub
URL: https://github.com/mrmartineau/gatsby-theme-code-notes
Owner: mrmartineau
License: mit
Archived: true
Created: 2020-02-09T21:19:14.000Z (over 4 years ago)
Default Branch: main
Last Pushed: 2023-02-12T19:56:17.000Z (over 1 year ago)
Last Synced: 2024-09-23T15:04:12.668Z (about 1 month ago)
Topics: gatsby, gatsby-plugin, gatsby-theme, markdown, mdx
Language: TypeScript
Homepage: https://code-notes-example.netlify.com
Size: 2.74 MB
Stars: 470
Watchers: 10
Forks: 39
Open Issues: 44
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

jimsghstars - mrmartineau/gatsby-theme-code-notes - A Gatsby theme for publishing code-related notes to your website (TypeScript)

README

Features •
Installation •
Usage •
Demo

> **Warning**
> This work on this project is now archived. I have created an up-to-date version of this using [Eleventy](https://www.11ty.dev/) and the source code for it can be found [here](https://github.com/mrmartineau/notes.zander.wtf). If anyone would like to continue work on this theme, please let me know.

## 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
- sketchy annotations (highlights, strike-thoughs etc). Find out more [here](https://code-notes-example.netlify.app/annotations)
- 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)

## Installation

```sh
mkdir my-site
cd my-site
yarn init

# install gatsby-theme-code-notes and it's dependencies
yarn add gatsby-theme-code-notes gatsby react react-dom

# or

npm install gatsby-theme-code-notes gatsby react react-dom
```

### Using the Gatsby starter

#### Step 1: Starter installation

Source code for the starter can be found at: https://github.com/MrMartineau/gatsby-starter-code-notes

##### 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 |
| `showDate` | `false` | Show the note's modified date |
| `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). |
| `openSearch` | `{ }` | Configure the `opensearch.xml` file contents. This file is generated during the build process. If you want to add opensearch support, ensure you set a `siteUrl` in the config. See [below](#example-usage) for more information. |

### Example usage

This example overrides some of the theme defaults and shows the various options for the opensearch config.

```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',
showDate: true,

// Opensearch is used to enhance the search on your site.
// If you want to add it, ensure you set a `siteUrl`
openSearch: {
siteUrl: 'https://code-notes-example.netlify.app', // required if you want opensearch
siteShortName: 'Gatsby Theme Code Notes Example', // override the default value of 'Search`
siteTags: 'front-end', // optional
siteContact: 'https://twitter.com/MrMartineau', // optional
siteDescription: 'A Gatsby theme for storing your code-related notes', // optional
},
},
},
],
}
```

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.

#### Dates

The `modified` frontmatter item allows you set a date for your note. This means they can then be sorted (ascending & descending) when viewed in the note list pages. This was introduced in v2.0.0.

The `created` frontmatter item works in a similar way, but it is not being used at the moment so it can be ommitted.

##### 1. Add new `modified` key to your YAML frontmatter

This will mean that you have to update all your notes with a timestamp.

```yaml
---
title: Storybook
tags:
- testing
emoji: 📖
link: 'https://storybook.js.org'
created: 2020-02-27T23:02:00.000Z # this is not used by the theme at the moment
modified: 2021-01-16T10:31:32.000Z

# any valid ISO timestamp should work, like this:
# modified: 2021-01-16
---

```

If you have many notes and want to speed up adding all those timestamps, I created an npm package ([`frontmatter-date-setter`](https://github.com/mrmartineau/frontmatter-date-setter)) to automate it based on your last git or file modification dates.

Use the `frontmatter-date-setter` (or `fds`) CLI like so: (where `notes` is the directory of all your notes)

```sh
fds --directory=notes --debug
```

The package does have a few issues that I'd like to improve. For example, it will convert most emojis to unicode strings, and will format other parts of your frontmatter. So take care when you run it.

##### 2. Set `showDate: true` in `gatsby-config.js`

Setting this value in this plugin's config renders the interface to switch to date sorting as well as showing the date in other parts of the interface.

### 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`,
showDate: true,
},
},
{
resolve: `gatsby-plugin-offline`,
options: {
precachePages: [`/*`, `/tag/*`],
},
},
```

---

## License

> Made by Zander • [zander.wtf](https://zander.wtf) • [GitHub](https://github.com/mrmartineau/) • [Twitter](https://twitter.com/mrmartineau/)