My customized Gatsby theme specifically for Foam.
Forked from mathieudutour/gatsby-digital-garden who did all the major work.
Changes made to original:
@antv/g6
)npm install gatsby-philipps-foam-theme
Take a look into the _layouts folder in the example directory
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
or mdx
files inside /content/garden
.
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}
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
This is a yarn workspace. Just run yarn
in the root to install.
To develop run yarn start
.
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
CodeBlock
component to support Syntax HighlightingCreate 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