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
-
Install the theme
npm install gatsby-philipps-foam-theme autoprefixer gatsby gatsby-plugin-postcss postcss react react-dom
-
Add the configuration to your
gatsby-config.js
file
// 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/**/*",
],
},
},
],
-
Add notes to your site by creating
md
ormdx
files inside/content/garden
. -
Run your site using
gatsby develop
and navigate to your notes. If you used the above configuration, your URL will behttp://localhost:8000/{basePath}
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?
-
Create a custom react component.
-
Shadow the component with the custom component created in step 1.
-
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
-
Create a custom
CodeBlock
component as mentioned in the MDX Guides -
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