@synesthesia/gatsby-theme-garden

A Gatsby theme for publishing a digital garden forked from mathieudutour/gatsby-digital-garden.

Please note this fork is for personal experimentation, use at your own risk and please do not have any expectation of support.

Installation

Manually add to your site

1. Install the theme

   npm install @synesthesia/gatsby-theme-garden

2. Add the configuration to your gatsby-config.js file

   // gatsby-config.js
   module.exports = {
     plugins: [
       {
         resolve: `@synesthesia/gatsby-theme-garden`,
         options: {
           // basePath defaults to `/`
           basePath: `/garden`,
           rootNote: `/garden/About-these-notes`,
           contentPath: `/content/garden`,
         },
       },
     ],
   };

3. Add notes to your site by creating md or mdx files inside /content/garden.

4. Run your site using gatsby develop and navigate to your notes. If you used the above configuration, your URL will be http://localhost:8000/garden

Options

| Key | Default value | Description | | ------------------------ | ------------- | -------------------------------------------------------------------------------- | | basePath | / | Root url for the garden | | rootNote | | The URL of the note to use as the root | | contentPath | | Location of local content | | mdxOtherwiseConfigured | false | Set this flag true if gatsby-plugin-mdx is already configured for your site. |

How to inject custom MDX Components?

1. Create a custom react component.

2. Shadow the component with the custom component created in step 1.

3. All the MDX components that are used within @synesthesia/gatsby-theme-garden can be shadowed by placing the custom components under the following path ./src/@synesthesia/gatsby-theme-garden/components/mdx-components/index.js

Example: Injecting a custom CodeBlock component to support Syntax Highlighting

1. Create a custom CodeBlock component as mentioned in the MDX Guides

2. Create a file named ./src/@gatsby-theme-garden/components/mdx-components/index.js with the following content.

   // the components provided by the theme
   export { AnchorTag as a } from "@gatsby-theme-garden/src/components/mdx-components/anchor-tag";
   
   // your own component to inject into mdx
   export code from "./your-component"; // any code block will use this component

Embedding 3rd party content in MDX pages

This theme includes gatsby-plugin-mdx-embed so you can embed third-party content from a range of sources.

Please see the mdx-embed documentation.