0.1.55 • Published 3 years ago

@stvad/gatsby-theme-garden v0.1.55

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

gatsby-theme-garden

A Gatsby theme for publishing a digital garden.

Installation

For a new site

If you're creating a new site and want to use the garden theme, you can use the garden theme starter. This will generate a new site that pre-configures use of the garden theme.

gatsby new my-digital-garden https://github.com/mathieudutour/gatsby-starter-digital-garden

Manually add to your site

  1. Install the theme

    npm install gatsby-theme-garden
  2. Add the configuration to your gatsby-config.js file

    // gatsby-config.js
    module.exports = {
      plugins: [
        {
          resolve: `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

You can also use a Roam Research database to source your notes. Specify the roamUrl, roamEmail and roamPassword options to do so. More information on gatsby-source-roamresearch

Options

KeyDefault valueDescription
basePath/Root url for the garden
rootNoteThe URL of the note to use as the root
contentPathLocation of local content
roamUrlThe URL of your Roam Research database
roamEmailEmail used to sign into Roam Research
roamPasswordPassword used to sign into Roam Research
mdxOtherwiseConfiguredfalseSet 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 gatsby-theme-garden can be shadowed by placing the custom components under the following path ./src/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