0.3.5 • Public • Published

    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



    npm install gatsby-philipps-foam-theme


    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: [
    1. Add notes to your site by creating md or mdx files inside /content/garden.

    2. 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}


    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


    npm i gatsby-philipps-foam-theme

    DownloadsWeekly Downloads






    Unpacked Size

    94 kB

    Total Files


    Last publish


    • phartenfeller