Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/phartenfeller/gatsby-philipps-foam-theme
Foam theme for Gatsby
https://github.com/phartenfeller/gatsby-philipps-foam-theme
blogging digital-garden foam gatsby knowledge-base knowledge-graph
Last synced: 4 months ago
JSON representation
Foam theme for Gatsby
- Host: GitHub
- URL: https://github.com/phartenfeller/gatsby-philipps-foam-theme
- Owner: phartenfeller
- License: other
- Fork: true (mathieudutour/gatsby-digital-garden)
- Created: 2021-04-08T16:25:02.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2023-06-03T08:17:19.000Z (over 1 year ago)
- Last Synced: 2024-09-26T00:28:33.730Z (4 months ago)
- Topics: blogging, digital-garden, foam, gatsby, knowledge-base, knowledge-graph
- Language: JavaScript
- Homepage: https://phartenfeller.github.io/gatsby-philipps-foam-theme/
- Size: 22 MB
- Stars: 18
- Watchers: 2
- Forks: 2
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-foam - Gatsby Philips Foam Theme
README
# Gatsby Philipps Foam Theme
My customized Gatsby theme specifically for [Foam](https://foambubble.github.io/foam/).
Forked from [mathieudutour/gatsby-digital-garden](https://github.com/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](https://github.com/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
[](https://nodei.co/npm/gatsby-philipps-foam-theme/)
```sh
npm install gatsby-philipps-foam-theme
```
## Setup
Take a look into the [_layouts folder in the example directory](https://github.com/phartenfeller/gatsby-philipps-foam-theme/tree/master/example/_layouts)
### Manually add to your site
[Example Repository](https://github.com/phartenfeller/gatsby-philipps-foam-theme/tree/master/example)
1. Install the theme
```shell
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](https://github.com/phartenfeller/gatsby-philipps-foam-theme/wiki)
```js
// 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:
```js
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](https://github.com/phartenfeller/gatsby-philipps-foam-theme/issues/new)
## 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](https://www.gatsbyjs.org/docs/themes/shadowing/) 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](https://mdxjs.com/guides/syntax-highlighting#build-a-codeblock-component)
2. Create a file named `./src/gatsby-theme-garden/components/mdx-components/index.js` with the following content.
```js
// 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
```