Use this theme to integrate Roam Research inspired bidirectional linking of notes into a network on your site.
View a demo at https://twitter.com/aengusmcmillin/status/1249845320239984640
To use this theme in your Gatsby site:
- Install the theme
npm install --save @aengusm/gatsby-theme-brain
- Add the theme to your
gatsby-config.js:
module.exports = {
plugins: ['@aengusm/gatsby-theme-brain'],
};
-
Add content to Your Brain by creating a content/brain/ folder in the root of your site and adding markdown files to it. Use [[This Format]] to generate pages and links between pages.
-
Start your site:
gatsby develop
For now the way to style this theme is with component shadowing. There is a single component that renders the layout for each brain note in src/components/BrainNote.js. If you wish to shadow this and create your own version, create the file src/@aengusm/gatsby-theme-brain/components/BrainNote.js. That will shadow the existing component and you can do whatever you want with it.
If you want an example of how I shadow this, checkout my websites github
| Option | Default Value | Description |
|---|---|---|
notesDirectory |
"content/brain/" | Directory containing your brain note files |
noteTemplate |
"./templates/brain.js" | Template to use for note rendering |
rootPath |
"brain" | Set the root url for the brain on your site (e.g. in this case https://example.com/brain) |
rootNote |
"brain" | Name of the 'index' note. So in this case brain.md would generate the root page of the brain |
mdxOtherwiseConfigured |
false | Used to workaround a bug in gatsby-plugin-mdx (see ChristopherBiscardi/gatsby-mdx#354). Set to true if you have already configured mdx |