gatsby-theme-andy

This is inspired by the work of Andy and is based on gatsby-theme-brain. Also uses react-stacked-pages-hook for staking up the notes side by side. And unleashes the power of theme-ui for easy themeable components.

https://notes.aravindballa.com uses this with a few custom components and custom styles.

Getting started

This theme requires alteast NodeJS v12. You can check your version by running node -v in your terminal. Know more

From scratch

Video tutorial 👇

Link to the video

Create a new directory and from that directory, run npm init.
Add all the dependencies yarn add gatsby react react-dom gatsby-theme-andy.

Create a file gatsby-config.js. Now we add gatsby-theme-andy to plugins and a title in siteMetadata in that config.

module.exports = {
  siteMetadata: {
    title: 'My Notes',
  },
  plugins: [`gatsby-theme-andy`],
};

Create directory content at root and add a few md files. We can use [[]] syntax to interlink the pages. Look at this directory for an example.

Now we add these scripts below to package.json and run yarn develop.

"scripts": {
  "build": "gatsby build",
  "develop": "gatsby develop",
  "clean": "gatsby clean"
},

Adding to an exsisting Gatsby project

Detailed steps coming soon

Configuration

All the plugin options valid for gatsby-theme-brain can be given to this theme as well. Other than those, we have

Option	Default Value	Description
`themeUIOtherwiseConfigured`	`false`	Enable this if you have already setup theme-ui in your project

Configuring the theme

This project uses theme-ui which allows us to easily theme the site. You can customize the theme by adding a file at .src/gatsby-theme-andy/theme.js. The default values for the theme are at src/theme.js. You can copy these to the new file you created and edit the values as you wish. 😎

Shadowing components

You can shadow/override a few components for increased customizability. In your project, you would need to place them at ./gatsby-theme-andy/src/components. ⚡️Have a look at the default components to see what props they get. Components you can override -

Component	Description
BrainNote.js	This is the note page and it is responsible for collecting all the popups and passing them to the `MdxComponents.js`. It's really a cool way of doing it.
BrainNoteContainer.js	This is the layout page that stacks up the notes side by side.
Popover.js	The component that pops up when you hover over an internal link.
Header.js	The top bar of the website. If you just want to change the text, you can do it in `gatsby-config.js -> siteMetadata -> title`.
Footer.js	Footer that contains the `ReferredBlock` as well as the message at the bottom of the note.
RefererdBlock.js	The block which contains all the references (Referred in section) to the note.
Tippy.js	This has the TippyJS configs. You can configure things like the hover animations here. Remember to change the css import as well.
MdxComponents.js	This has a custom component `AnchorTag` which gets the popover as a prop and displays it when we hover over an internal link. If you wish to add extra MDX components, this is the place!

Contribution

This project is relatively new. Please report issues you face and yes, I'd be happy to accept PRs. 😉

huytd/gatsby-theme-andy