# gatsby-roam > Gatsby theme to create a digital garden Latest version **0.1.68** (published 2022-07-03) · MIT license · 0 weekly downloads ## Install ```sh npm install gatsby-roam pnpm add gatsby-roam yarn add gatsby-roam bun add gatsby-roam ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.68 | | Published | 2022-07-03 | | First published | 2022-07-03 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 26 | | Unpacked size | 75.2 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 689 | | Author | Mathieu Dutour | | Maintainers | palashk | | Keywords | gatsby, gatsby-theme, gatsby-plugin, digital-garden, react, notes, roam-research | ## Links - npm: https://www.npmjs.com/package/gatsby-roam - Repository: https://github.com/mathieudutour/gatsby-digital-garden - Homepage: https://github.com/mathieudutour/gatsby-digital-garden#readme - Issues: https://github.com/mathieudutour/gatsby-digital-garden/issues - npm.io page: https://npm.io/package/gatsby-roam ## Dependencies (26) - [d3](https://npm.io/package/d3.md) ^7.6.1 - [slugify](https://npm.io/package/slugify.md) ^1.6.5 - [downshift](https://npm.io/package/downshift.md) ^6.1.7 - [flexsearch](https://npm.io/package/flexsearch.md) ^0.6.32 - [@mdx-js/mdx](https://npm.io/package/@mdx-js/mdx.md) ^1.6.22 - [react-helmet](https://npm.io/package/react-helmet.md) ^6.1.0 - [react-spring](https://npm.io/package/react-spring.md) ^9.4.5 - [@mdx-js/react](https://npm.io/package/@mdx-js/react.md) ^1.6.22 - [use-dark-mode](https://npm.io/package/use-dark-mode.md) ^2.3.1 - [@tippyjs/react](https://npm.io/package/@tippyjs/react.md) ^4.2.6 - [gatsby-core-utils](https://npm.io/package/gatsby-core-utils.md) ^3.17.0 - [gatsby-plugin-mdx](https://npm.io/package/gatsby-plugin-mdx.md) ^3.17.0 - [gatsby-plugin-sharp](https://npm.io/package/gatsby-plugin-sharp.md) ^4.17.0 - [gatsby-remark-images](https://npm.io/package/gatsby-remark-images.md) ^6.17.0 - [@react-hook/window-size](https://npm.io/package/@react-hook/window-size.md) ^3.0.7 - [gatsby-source-filesystem](https://npm.io/package/gatsby-source-filesystem.md) ^4.17.0 - [react-stacked-pages-hook](https://npm.io/package/react-stacked-pages-hook.md) ^0.4.8 - [gatsby-plugin-local-search](https://npm.io/package/gatsby-plugin-local-search.md) ^2.0.1 - [gatsby-source-roamresearch](https://npm.io/package/gatsby-source-roamresearch.md) ^0.4.5 - [gatsby-plugin-use-dark-mode](https://npm.io/package/gatsby-plugin-use-dark-mode.md) ^1.5.0 - [gatsby-remark-autolink-headers](https://npm.io/package/gatsby-remark-autolink-headers.md) ^5.17.0 - [gatsby-remark-copy-linked-files](https://npm.io/package/gatsby-remark-copy-linked-files.md) ^5.17.0 - [gatsby-plugin-compile-es6-packages](https://npm.io/package/gatsby-plugin-compile-es6-packages.md) ^2.1.1 - [gatsby-remark-double-brackets-link](https://npm.io/package/gatsby-remark-double-brackets-link.md) ^0.1.11 - [gatsby-remark-double-parenthesis-link](https://npm.io/package/gatsby-remark-double-parenthesis-link.md) ^0.1.5 - [gatsby-transformer-markdown-references](https://npm.io/package/gatsby-transformer-markdown-references.md) ^0.1.8 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 0.1.68 (latest) — 2022-07-03 - 0.1.67 — 2022-07-03 ## README # gatsby-theme-garden A Gatsby theme for publishing a digital garden. ## Installation ### For a new site If you're creating a new site and want to use the garden theme, you can use the garden theme starter. This will generate a new site that pre-configures use of the garden theme. ```shell gatsby new my-digital-garden https://github.com/mathieudutour/gatsby-starter-digital-garden ``` ### Manually add to your site 1. Install the theme ```shell npm install gatsby-theme-garden ``` 2. Add the configuration to your `gatsby-config.js` file ```js // gatsby-config.js module.exports = { plugins: [ { resolve: `gatsby-theme-garden`, options: { // basePath defaults to `/` basePath: `/garden`, rootNote: `/garden/About-these-notes`, contentPath: `/content/garden`, }, }, ], }; ``` 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/garden` > You can also use a Roam Research database to source your notes. Specify the `roamUrl`, `roamEmail` and `roamPassword` options to do so. More information on [gatsby-source-roamresearch](../gatsby-source-roamresearch) ### Options | Key | Default value | Description | | ------------------------ | ------------- | -------------------------------------------------------------------------------- | | `basePath` | `/` | Root url for the garden | | `rootNote` | | The URL of the note to use as the root | | `contentPath` | | Location of local content | | `roamUrl` | | The URL of your Roam Research database | | `roamEmail` | | Email used to sign into Roam Research | | `roamPassword` | | Password used to sign into Roam Research | | `mdxOtherwiseConfigured` | `false` | Set this flag `true` if `gatsby-plugin-mdx` is already configured for your site. | | `parseWikiLinks` | `false` | Whether to parse the wikilinks (`[[Internal link|With custom text]]`) or not | ### 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 ``` --- _Source: https://npm.io/package/gatsby-roam · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._