Gatsby Philipps Foam Theme

My customized Gatsby theme specifically for Foam.

Forked from mathieudutour/gatsby-digital-garden who did all the major work.

Changes made to original:

• Codeblocks with Codemirror 6
• Upped deps (Gatsby 3)
• Adopted Tailwind for styles
• Support for more themes
• Dropped roam support (check mathieudutour/gatsby-digital-garden if you need it)
• Reworked search UI
• Change graph diagram (redo with @antv/g6)
• Small table of contents at frame header (like GitHub has now)
• Sidbar with pages as folder structure

Install

npm install gatsby-philipps-foam-theme

Setup

Take a look into the _layouts folder in the example directory

Manually add to your site

Example Repository

1. Install the theme

   npm install gatsby-philipps-foam-theme autoprefixer gatsby gatsby-plugin-postcss postcss react react-dom
   

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

Config options explained

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

You can ignore certain folders by adding an "ignore" array to the options:

plugins: [
 {
   resolve: `gatsby-philipps-foam-theme`,
   options: {
     rootNote: "/readme",
     contentPath: "/",
     ignore: [
       "**/_layouts/**",
       "**/private/**/*",
     ],
   },
 },
],

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/{basePath}

Troubleshooting

Often times it is enough to delete the .cache and public folder and try the build again.

If this does not help feel free to open an issue

Development

This is a yarn workspace. Just run yarn in the root to install.

To develop run yarn start.

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