{"id":14070583,"url":"https://github.com/mrmartineau/gatsby-theme-code-notes","last_synced_at":"2025-09-30T16:31:27.635Z","repository":{"id":36959900,"uuid":"239375962","full_name":"mrmartineau/gatsby-theme-code-notes","owner":"mrmartineau","description":"A Gatsby theme for publishing code-related notes to your website","archived":true,"fork":false,"pushed_at":"2023-02-12T19:56:17.000Z","size":2878,"stargazers_count":470,"open_issues_count":44,"forks_count":39,"subscribers_count":10,"default_branch":"main","last_synced_at":"2025-01-15T20:55:36.713Z","etag":null,"topics":["gatsby","gatsby-plugin","gatsby-theme","markdown","mdx"],"latest_commit_sha":null,"homepage":"https://code-notes-example.netlify.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mrmartineau.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-02-09T21:19:14.000Z","updated_at":"2024-05-29T05:35:55.000Z","dependencies_parsed_at":"2024-06-19T04:10:36.448Z","dependency_job_id":"aba89848-75bc-455a-8735-5447e02c666f","html_url":"https://github.com/mrmartineau/gatsby-theme-code-notes","commit_stats":{"total_commits":198,"total_committers":7,"mean_commits":"28.285714285714285","dds":0.06565656565656564,"last_synced_commit":"40dfa0e379e23a536608447879aed685ecac6b68"},"previous_names":[],"tags_count":54,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrmartineau%2Fgatsby-theme-code-notes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrmartineau%2Fgatsby-theme-code-notes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrmartineau%2Fgatsby-theme-code-notes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrmartineau%2Fgatsby-theme-code-notes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mrmartineau","download_url":"https://codeload.github.com/mrmartineau/gatsby-theme-code-notes/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234753627,"owners_count":18881427,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gatsby","gatsby-plugin","gatsby-theme","markdown","mdx"],"created_at":"2024-08-13T07:07:54.008Z","updated_at":"2025-09-30T16:31:22.223Z","avatar_url":"https://github.com/mrmartineau.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n \u003cimg src=\"https://raw.githubusercontent.com/mrmartineau/gatsby-theme-code-notes/master/assets/opengraph.png\" width=\"640\"\u003e\n\n \u003cp\u003e\n \u003ca href=\"https://github.com/MrMartineau/gatsby-theme-code-notes/blob/master/LICENSE\"\u003e\n \u003cimg src=\"https://img.shields.io/badge/license-MIT-blue.svg\" alt=\"gatsby-theme-code-notes is released under the MIT license.\" /\u003e\n \u003c/a\u003e\n \u003ca href=\"https://www.npmjs.org/package/gatsby-theme-code-notes\"\u003e\n \u003cimg src=\"https://img.shields.io/npm/v/gatsby-theme-code-notes.svg\" alt=\"Current npm package version.\" /\u003e\n \u003c/a\u003e\n \u003ca href=\"https://npmcharts.com/compare/gatsby-theme-code-notes?minimal=true\"\u003e\n \u003cimg src=\"https://img.shields.io/npm/dm/gatsby-theme-code-notes.svg\" alt=\"Downloads per month on npm.\" /\u003e\n \u003c/a\u003e\n \u003ca href=\"https://npmcharts.com/compare/gatsby-theme-code-notes?minimal=true\"\u003e\n \u003cimg src=\"https://img.shields.io/npm/dt/gatsby-theme-code-notes.svg\" alt=\"Total downloads on npm.\" /\u003e\n \u003c/a\u003e\n \u003cimg src=\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg\" alt=\"PRs welcome!\" /\u003e\n \u003ca href=\"https://twitter.com/intent/follow?screen_name=MrMartineau\"\u003e\n \u003cimg src=\"https://img.shields.io/twitter/follow/MrMartineau.svg?label=Follow%20@MrMartineau\" alt=\"Follow @MrMartineau\" /\u003e\n \u003c/a\u003e\n \u003c/p\u003e\n\n \u003cp\u003e\n \u003ca href=\"#features\"\u003eFeatures\u003c/a\u003e •\n \u003ca href=\"#Installation\"\u003eInstallation\u003c/a\u003e •\n \u003ca href=\"#usage\"\u003eUsage\u003c/a\u003e •\n \u003ca href=\"https://code-notes-example.netlify.com/\"\u003eDemo\u003c/a\u003e\n \u003c/p\u003e\n\n\u003ca href=\"https://www.producthunt.com/posts/code-notes-2?utm_source=badge-featured\u0026utm_medium=badge\u0026utm_souce=badge-code-notes-2\" target=\"_blank\" aria-label=\"View Code Notes on Product Hunt\"\u003e\u003cimg src=\"https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=206754\u0026theme=light\" alt=\"Code Notes - A Gatsby theme for publishing code-related notes online | Product Hunt Embed\" style=\"width: 250px; height: 54px;\" width=\"250px\" height=\"54px\" /\u003e\u003c/a\u003e\n\n\u003c/div\u003e\n\n\u003e **Warning**\n\u003e 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.\n\n## Features\n\n- Notes can:\n - be written using Markdown (`.md`) or [MDX](https://mdxjs.com/) (`.mdx`)\n - have zero, one or many tags. See an example [here](https://code-notes-example.netlify.app/syntax-highlighting)\n - have associated emojis 👏\n - be nested in subfolders so you can organise them how you like\n - sketchy annotations (highlights, strike-thoughs etc). Find out more [here](https://code-notes-example.netlify.app/annotations)\n- Extra markdown features have also been added. Find out more [here](https://code-notes-example.netlify.app/markdown-features)\n- Note search powered by the super-fast [Flexsearch](https://github.com/nextapps-de/flexsearch)\n\n## Installation\n\n```sh\nmkdir my-site\ncd my-site\nyarn init\n\n# install gatsby-theme-code-notes and it's dependencies\nyarn add gatsby-theme-code-notes gatsby react react-dom\n\n# or\n\nnpm install gatsby-theme-code-notes gatsby react react-dom\n```\n\n### Using the Gatsby starter\n\n#### Step 1: Starter installation\n\nSource code for the starter can be found at: https://github.com/MrMartineau/gatsby-starter-code-notes\n\n##### With `gatsby-cli`:\n\n```sh\ngatsby new code-notes https://github.com/MrMartineau/gatsby-starter-code-notes\n```\n\n##### With `git clone`:\n\n```sh\ngit clone git@github.com:MrMartineau/gatsby-starter-code-notes.git\n\ncd code-notes\n\nyarn\n```\n\n#### Step 2: Develop \u0026 Build\n\nOnce installed or cloned locally and all packages are installed you can begin developing your site.\n\n```sh\n# Run localhost\nyarn dev\n\n# Build your Gatsby site\nyarn build\n```\n\n## Usage\n\n### Theme Options\n\n| Key | Default value | Description |\n| -------------------------- | --------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `basePath` | `/` | Root url for all notes pages |\n| `contentPath` | `/content/notes` | Location of notes content |\n| `logo` | `''` (empty string) | Path to your site's logo. Will be used as the `src` attribute for an image |\n| `showDescriptionInSidebar` | `true` | Show `config.site.description` in the sidebar |\n| `showDate` | `false` | Show the note's modified date |\n| `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 |\n| `showThemeInfo` | `true` | Show info about this Gatsby theme |\n| `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`. |\n| `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). |\n| `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. |\n\n### Example usage\n\nThis example overrides some of the theme defaults and shows the various options for the opensearch config.\n\n```js\n// gatsby-config.js\nmodule.exports = {\n plugins: [\n {\n resolve: `gatsby-theme-code-notes`,\n options: {\n basePath: '/',\n contentPath: '/content/notes',\n gitRepoContentPath:\n 'https://github.com/mrmartineau/gatsby-theme-code-notes/tree/master/example/code-notes/',\n showDescriptionInSidebar: true,\n showThemeInfo: false,\n logo: 'https://brand.zander.wtf/Avatar.png',\n showDate: true,\n\n // Opensearch is used to enhance the search on your site.\n // If you want to add it, ensure you set a `siteUrl`\n openSearch: {\n siteUrl: 'https://code-notes-example.netlify.app', // required if you want opensearch\n siteShortName: 'Gatsby Theme Code Notes Example', // override the default value of 'Search`\n siteTags: 'front-end', // optional\n siteContact: 'https://twitter.com/MrMartineau', // optional\n siteDescription: 'A Gatsby theme for storing your code-related notes', // optional\n },\n },\n },\n ],\n}\n```\n\nAdd notes to your site by creating `md` or `mdx` files inside `/content/notes`.\n\n\u003e 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.\n\n### Note frontmatter\n\nFrontmatter information (written in YAML) can be used to add metadata and extra information for your notes\n\nOnly the `title` field is required, the rest are optional.\n\n```yaml\n---\ntitle: Note metadata\nemoji: 😃\ntags:\n - metadata\n - info\nlink: https://zander.wtf\n---\n\n```\n\n#### Link\n\nThe `link` item is used to display a link that is related to the note itself. It will appear below the title if.\n\n#### Emoji\n\nThe `emoji` frontmatter item will add an emoji beside the title on listing views and above the title on individual note pages\n\n#### Tags\n\nThe `tags` array frontmatter item allows you to add as many tags to a note as you'd like.\n\n#### Dates\n\nThe `modified` frontmatter item allows you set a date for your note. This means they can then be sorted (ascending \u0026 descending) when viewed in the note list pages. This was introduced in v2.0.0.\n\nThe `created` frontmatter item works in a similar way, but it is not being used at the moment so it can be ommitted.\n\n##### 1. Add new `modified` key to your YAML frontmatter\n\nThis will mean that you have to update all your notes with a timestamp.\n\n```yaml\n---\ntitle: Storybook\ntags:\n - testing\nemoji: 📖\nlink: 'https://storybook.js.org'\ncreated: 2020-02-27T23:02:00.000Z # this is not used by the theme at the moment\nmodified: 2021-01-16T10:31:32.000Z\n\n# any valid ISO timestamp should work, like this:\n# modified: 2021-01-16\n---\n\n```\n\nIf 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.\n\nUse the `frontmatter-date-setter` (or `fds`) CLI like so: (where `notes` is the directory of all your notes)\n\n```sh\nfds --directory=notes --debug\n```\n\nThe 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.\n\n##### 2. Set `showDate: true` in `gatsby-config.js`\n\nSetting 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.\n\n### Advanced usage\n\n#### PWA\n\nTurn 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`.\n\n```js\n// gatsby-config.js\n{\n resolve: `gatsby-plugin-manifest`,\n options: {\n name: `Zander's Code Notes`,\n short_name: `CodeNotes`,\n description: `Notes on code. My memory bank.`,\n start_url: `/`,\n background_color: `hsl(210, 38%, 95%)`,\n theme_color: `hsl(345, 100%, 69%)`,\n display: `standalone`,\n icon: `static/logo.png`,\n showDate: true,\n },\n},\n{\n resolve: `gatsby-plugin-offline`,\n options: {\n precachePages: [`/*`, `/tag/*`],\n },\n},\n```\n\n---\n\n## License\n\n[MIT](https://choosealicense.com/licenses/mit/) © [Zander Martineau](https://zander.wtf)\n\n\u003e Made by Zander • [zander.wtf](https://zander.wtf) • [GitHub](https://github.com/mrmartineau/) • [Twitter](https://twitter.com/mrmartineau/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrmartineau%2Fgatsby-theme-code-notes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmrmartineau%2Fgatsby-theme-code-notes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrmartineau%2Fgatsby-theme-code-notes/lists"}