aravindballa / gatsby-theme-andy

A Gatsby theme to build Andy style websites. 📑

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 ./src/gatsby-theme-andy/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. 😉

gatsby-theme-andy's Issues

pathPrefix in gatsby-config.js causes backlink to prefix pathPrefix twice

Hi I'm trying to host my notes under: https://hostname/second-brain/

I put the pathPrefix in gatsby-config.js as mentioned here. But this leads to cross-links having the prefix twice in their paths. This works fine on laptop but breaks on phones.

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

`yarn build` fails with several errors

I'm trying to build using yarn build and it keeps failing with multiple "An error occurred during parallel query running" errors. Initial setup was done following the instructions from the README and using the example content.

I have reproduced this issue on three different machines: MacBook Pro (2019, Intel) and MacBook Air (2020, M1), both running macOS 12.5.1 with node v18.7.0, npm v8.15. and yarn v1.22.19 and a Raspberry Pi 3B+ running bullseye and the same versions of node, npm and yarn.

Here is the output from running yarn build (long, sorry!):

% yarn build
yarn run v1.22.19
$ gatsby build
success compile gatsby files - 0.397s
success load gatsby config - 0.011s
warn Plugin gatsby-transformer-remark is not compatible with your gatsby version 4.21.1 - It requires gatsby@^2.12.0
warn Plugin @aengusm/gatsby-theme-brain is not compatible with your gatsby version 4.21.1 - It requires gatsby@^2.20.23
warn Plugin gatsby-plugin-theme-ui is not compatible with your gatsby version 4.21.1 - It requires gatsby@^2.13.1
warn Plugin gatsby-theme-andy is not compatible with your gatsby version 4.21.1 - It requires gatsby@^2.20.23
warn Plugin gatsby-transformer-remark is not compatible with your gatsby version 4.21.1 - It requires gatsby@^2.12.0
warn Plugin @aengusm/gatsby-theme-brain is not compatible with your gatsby version 4.21.1 - It requires gatsby@^2.20.23
warn Plugin gatsby-plugin-theme-ui is not compatible with your gatsby version 4.21.1 - It requires gatsby@^2.13.1
warn Plugin gatsby-theme-andy is not compatible with your gatsby version 4.21.1 - It requires gatsby@^2.20.23
success load plugins - 0.505s
success onPreInit - 0.001s
success initialize cache - 0.107s
success copy gatsby files - 0.120s
success Compiling Gatsby Functions - 0.192s
success onPreBootstrap - 0.204s
success createSchemaCustomization - 0.006s
warn Calling `createTypes` in the `sourceNodes` API is deprecated. Please use: `createSchemaCustomization`.
warn Calling `createTypes` in the `sourceNodes` API is deprecated. Please use: `createSchemaCustomization`.
success Checking for changed pages - 0.001s
success source and transform nodes - 0.359s
info Writing GraphQL type definitions to /Users/camp/Public/garden/.cache/schema.gql
success building schema - 0.280s
success createPages - 0.039s
success createPagesStatefully - 0.030s
info Total nodes: 47, SitePage nodes: 5 (use --verbose for breakdown)
success Checking for changed pages - 0.001s
success onPreExtractQueries - 0.001s
success extract queries from components - 0.730s
warn The GraphQL query in the non-page component "/Users/camp/Public/garden/node_modules/@aengusm/gatsby-theme-brain/src/templates/brain.js" will not
be run.
Exported queries are only executed for Page components. It's possible you're
trying to create pages in your gatsby-node.js and that's failing for some
reason.

If the failing component(s) is a regular component and not intended to be a page
component, you generally want to use a <StaticQuery> (https://gatsbyjs.com/docs/static-query)
instead of exporting a page query.

If you're more experienced with GraphQL, you can also export GraphQL
fragments from components and compose the fragments in the Page component
query and pass data down into the child component — https://graphql.org/learn/queries/#fragments
success write out redirect data - 0.006s
success onPostBootstrap - 0.001s
info bootstrap finished - 4.852s
success write out requires - 0.028s
success Building production JavaScript and CSS bundles - 8.336s
success Building HTML renderer - 8.878s
success Execute page configs - 0.047s
success Caching Webpack compilations - 0.001s

 ERROR #85925  GRAPHQL

There was an error in your GraphQL query:

Cannot return null for non-nullable field Mdx.body.

The field "Mdx.body." was explicitly defined as non-nullable via the schema customization API (by yourself or a plugin/theme). This means that this
field is not optional and you have to define a value. If this is not your desired behavior and you defined the schema yourself, go to "createTypes" in
 gatsby-node.js. If you're using a plugin/theme, you can learn more here on how to fix field types:
https://www.gatsbyjs.com/docs/reference/graphql-data-layer/schema-customization#fixing-field-types

   1 | query BrainNoteWithRefsBySlug($slug: String!) {
   2 |   brainNote(slug: {eq: $slug}) {
   3 |     slug
   4 |     title
   5 |     childMdx {
>  6 |       body
     |       ^
   7 |     }
   8 |     inboundReferenceNotes {
   9 |       title
  10 |       slug
  11 |       childMdx {
  12 |         excerpt
  13 |       }
  14 |     }
  15 |     outboundReferenceNotes {
  16 |       title

File path: /Users/camp/Public/garden/node_modules/gatsby-theme-andy/src/templates/note.js
Url path: /
Plugin: none


 ERROR #85925  GRAPHQL

There was an error in your GraphQL query:

Cannot return null for non-nullable field Mdx.excerpt.

The field "Mdx.excerpt." was explicitly defined as non-nullable via the schema customization API (by yourself or a plugin/theme). This means that this
 field is not optional and you have to define a value. If this is not your desired behavior and you defined the schema yourself, go to "createTypes"
in gatsby-node.js. If you're using a plugin/theme, you can learn more here on how to fix field types:
https://www.gatsbyjs.com/docs/reference/graphql-data-layer/schema-customization#fixing-field-types

   9 |       title
  10 |       slug
  11 |       childMdx {
  12 |         excerpt
  13 |       }
  14 |     }
  15 |     outboundReferenceNotes {
  16 |       title
  17 |       slug
  18 |       childMdx {
> 19 |         excerpt
     |         ^
  20 |       }
  21 |     }
  22 |   }
  23 |   site {
  24 |     siteMetadata {
  25 |       title
  26 |     }
  27 |   }
  28 | }
  29 |

File path: /Users/camp/Public/garden/node_modules/gatsby-theme-andy/src/templates/note.js
Url path: /
Plugin: none


 ERROR #85925  GRAPHQL

There was an error in your GraphQL query:

Cannot return null for non-nullable field Mdx.excerpt.

The field "Mdx.excerpt." was explicitly defined as non-nullable via the schema customization API (by yourself or a plugin/theme). This means that this
 field is not optional and you have to define a value. If this is not your desired behavior and you defined the schema yourself, go to "createTypes"
in gatsby-node.js. If you're using a plugin/theme, you can learn more here on how to fix field types:
https://www.gatsbyjs.com/docs/reference/graphql-data-layer/schema-customization#fixing-field-types

   9 |       title
  10 |       slug
  11 |       childMdx {
  12 |         excerpt
  13 |       }
  14 |     }
  15 |     outboundReferenceNotes {
  16 |       title
  17 |       slug
  18 |       childMdx {
> 19 |         excerpt
     |         ^
  20 |       }
  21 |     }
  22 |   }
  23 |   site {
  24 |     siteMetadata {
  25 |       title
  26 |     }
  27 |   }
  28 | }
  29 |

File path: /Users/camp/Public/garden/node_modules/gatsby-theme-andy/src/templates/note.js
Url path: /
Plugin: none


 ERROR #85928 

An error occurred during parallel query running.
Go here for troubleshooting tips: https://gatsby.dev/pqr-feedback



  Error: Worker exited before finishing task
  
  - index.js:117 ChildProcess.<anonymous>
    [garden]/[gatsby-worker]/dist/index.js:117:45
  
  - node:events:513 ChildProcess.emit
    node:events:513:28
  
  - child_process:291 Process.ChildProcess._handle.onexit
    node:internal/child_process:291:12
  

not finished run queries in workers - 0.118s

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

And this is what my package.lock file looks like:

{
  "name": "notes-test",
  "version": "1.0.0",
  "description": "Testing gatsby-theme-andy",
  "main": "index.js",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "clean": "gatsby clean"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "gatsby": "^4.21.1",
    "gatsby-theme-andy": "^0.2.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

yarn develop works, but throws the same plugin "is not compatible with your gatsby version" warnings shown early when running yarn build.

Add hierarchy support

I would like to ask how to use content/<subdirectory> and how to reference content in it? It seems to me that only the content/ directory itself is sourced and processed. I use subdirectories for organizing my notes into areas (i.e. content/postgres/..., content/kernel/... etc.) Of course I would also like to add subareas (content/kernel/bpf/...). I think in a way naming of my notes often overlaps in many areas and I think it is not so uncommon (especially if you are sysadmin). Assuming that default Markdown page is about.md my idea is to have the posibility to write:

My notes about [[postgres/|PostgreSQL]] are [[interesting]].

Which will create a link to content/postgres/about.md with title "PostgreSQL" (note the slash "/" which distinquishes from some content/postgres.md that may also exist) and some "normal" link to content/interesting.md.

(Also, the Wiki syntax [[link|Title]] does not seem to work although it would be very useful if it would.)

In other words, I miss second (and further) "dimension" for my notes with this project and I also can not find some good workaround how to achieve it. Now we have just "single drawer" for the zettlekasten, but mostly you have many drawers and it's also quite common you reference from one "drawer" to another (i.e. something like [[T/toucan#eggs|Toucan's eggs]] would be nice to have, may be related to #23). Filesystem hierarchy is the most elegant way of how to achieve it, IMHO (although I would not resist any other solution, of course).

Help: Gatsby theme brain fails if any folder within the content folder

Hi, @aravindballa thanks for the amazing project.

I'm using Obsidian as my note-taking tool to capture those ideas locally. The way I've set up Obsidian is to read everything from the content folder so that I can see those graphs and connections.

Obsidian generates a .obsidian directory for config related things. Even though it's a hidden directory, I think gatsby-theme-brain is trying to generate queries from the hidden directory. Because it's a directory and not a file, it's throwing an error saying that it is an illegal operation.

I'm not sure if gatsby-theme-andy has any other config where could change/modify things a bit or if we should raise this issue in gatsby-theme-brain or gatsby.

I have noticed that notes.aravindballa.com uses obsidian too. As there is a mention of that in the .gitignore.

For now, when I'm doing any development... I'm deleting the config directory when I'm writing I'm putting in back. But it can become a boring chore too. I'm curious if others having any similar issues or found any ways to solve it. So posting it here in this repo.

Cyclic Links

It's possible to go to Link A, which points to [[Link B]], which then points back to [[Link A]]. When I click on the last link, IMO it should scroll back to A. If the newest link is equal to the original, first one, then it instead creates a duplicate.

Preserve ⌘ + click to open in new tabs

⌘ (or Ctrl) + click is the general convention to open pages in a new tab. We should be preserving it. I'm expecting this to be solved by overriding LinkToStacked.

Installation steps require a change in package.json as well?

Does it require the package.json to adopt the following wholesale for the theme to work?

"dependencies": {
    "@tippyjs/react": "^4.0.2",
    "gatsby": "^2.20.36",
    "gatsby-plugin-postcss": "^2.2.4",
    "gatsby-theme-andy": "^0.1.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-helmet": "^6.0.0"
  },
  "devDependencies": {
    "@fullhuman/postcss-purgecss": "^2.1.2",
    "autoprefixer": "^9.7.6",
    "tailwindcss": "^1.3.5"
  },

and what about the src folder? Do the components inside also need to be created from scratch?

src folder

I am comparing https://github.com/aravindballa/notes.aravindballa.com/tree/master/src against the src in this repo https://github.com/aravindballa/gatsby-theme-andy/tree/master/src

Responsiveness

Just wanna say first this theme is awesome.

But, when I resize the window, the site gives me a 404 error page. Example here: https://subzerox.github.io/Zettel/

Just resize the window and click a few links...

Is it possible to support link to h1/h2/h3 section titles in .md files?

Thanks for the great plugin!

However, I've been playing around with it and I'm curious if it's possible to not only be able to link to notes, but also the titles inside .md files? I think that'd be great in terms of organising thoughts!

Thanks!

Creating private pages

I'd love to be able to set permissions for some of the pages

This tutorial explains how to set up authentication for a vanilla gatsby installation

https://www.gatsbyjs.com/tutorial/authentication-tutorial/

It's not clear to me how to map that onto this package - where does the app and router live?

Apologies for the ignorant question.

mobile view at notes.andymatuschak.org tends to use the rightmost view

if you go to this link https://notes.andymatuschak.org/About_these_notes?stackedNotes=z2kr7QrJczqYyfwLFcv1FLEUMdVTsgfYSdFXA

the full window desktop view looks like this

When resized it becomes the right most

When i attempt to do the same

full view works

but the resized adopts the leftmost

How would I go about removing the Footer line

I would like to remove the bottom half of the content from the theme. I took a look at both component shadowing and extending component shadowing and as I understand I'm supposed to make a Footer.js file at ./src/gataby-theme-andy/components. I don't really have any idea how to write JS though, so can somebody help me in figuring out what the content of the file should look like?

How can I close the current pane and go back to the previous pane?

Not getting the sidebar once notes are stacked

Hello! Great theme, thank you for putting this together.

I'm having an issue getting the sidebar on the left as notes stack up. Your site works fine, so I know it has to be something on my end.

I've attached an image to help in case I did not describe it well.

EPIPE error

I'm not sure what's going on, may not be related to you but I was curious if you know why this might be happening.

Hot Reload Failure

I think hot reload (or) fast refresh, whatever we are using doesn't seem to be working anymore.

I'm running gatsby develop and the changes are not being watched. Especially [[back-links]], every time I add a new backlink, I need to restart the server to view the changes.

I couldn't find anything in the readme. Do let me know if I need to set up some config for that or is this a known bug.

Adding rss to the site

Gatsby theme brain accepts the following options - generateRSS, rssPath, rssTitle to enable rss.

Whereas Gatsby theme Andy doesn't seem to pass/override the options.

Is there anything that's blocking us from doing this? 🤔

Let me know, will be happy to raise a PR for that.

Cannot query field "inboundReferencePreviews" on type "BrainNote".

yarn run v1.22.19
$ gatsby develop
success compile gatsby files - 0.241s
success load gatsby config - 0.008s
warn Plugin gatsby-transformer-remark is not compatible with your gatsby version 4.24.5 - It requires
gatsby@^2.12.0
warn Plugin @aengusm/gatsby-theme-brain is not compatible with your gatsby version 4.24.5 - It requires
gatsby@^2.20.23
warn Plugin gatsby-plugin-theme-ui is not compatible with your gatsby version 4.24.5 - It requires gatsby@^2.13.1
warn Plugin gatsby-theme-andy is not compatible with your gatsby version 4.24.5 - It requires gatsby@^2.20.23
warn Plugin gatsby-transformer-remark is not compatible with your gatsby version 4.24.5 - It requires
gatsby@^2.12.0
warn Plugin @aengusm/gatsby-theme-brain is not compatible with your gatsby version 4.24.5 - It requires
gatsby@^2.20.23
warn Plugin gatsby-plugin-theme-ui is not compatible with your gatsby version 4.24.5 - It requires gatsby@^2.13.1
warn Plugin gatsby-theme-andy is not compatible with your gatsby version 4.24.5 - It requires gatsby@^2.20.23
success load plugins - 0.360s
success onPreInit - 0.000s
success initialize cache - 0.065s
success copy gatsby files - 0.054s
success Compiling Gatsby Functions - 0.130s
success onPreBootstrap - 0.139s
success createSchemaCustomization - 0.006s
warn Calling createTypes in the sourceNodes API is deprecated. Please use: createSchemaCustomization.
warn Calling createTypes in the sourceNodes API is deprecated. Please use: createSchemaCustomization.
success Checking for changed pages - 0.001s
success source and transform nodes - 0.278s
success building schema - 0.284s
success createPages - 0.052s
success createPagesStatefully - 0.091s
info Total nodes: 36, SitePage nodes: 3 (use --verbose for breakdown)
success Checking for changed pages - 0.001s
success write out redirect data - 0.007s
success onPostBootstrap - 0.003s
info bootstrap finished - 2.789s
success onPreExtractQueries - 0.000s

ERROR #85923 GRAPHQL

There was an error in your GraphQL query:

Cannot query field "inboundReferencePreviews" on type "BrainNote".

If you don't expect "inboundReferencePreviews" to exist on the type "BrainNote" it is most likely a typo. However,
if you expect "inboundReferencePreviews" to exist there are a couple of solutions to common problems:

• If you added a new data source and/or changed something inside gatsby-node/gatsby-config, please try a restart
  of your development server.
• You want to optionally use your field "inboundReferencePreviews" and right now it is not used anywhere.

It is recommended to explicitly type your GraphQL schema if you want to use optional fields.

File: node_modules/@aengusm/gatsby-theme-brain/src/templates/brain.js:21:7

See our docs page for more info on this error: https://gatsby.dev/creating-type-definitions

failed extract queries from components - 0.937s
success write out requires - 0.005s
success run page queries - 0.254s - 2/2 7.86/s
⠀
You can now view study in the browser.
⠀
http://localhost:8000/
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and schema
⠀
http://localhost:8000/___graphql
⠀
Note that the development build is not optimized.
To create a production build, use gatsby build

Shadow BrainNote.js to remove file title as note header

Hey, I use this repository to host markdown files written in Obsidian.md. Whenever a new note is rendered the note title is defaulted to be the file title. This seems to be the portion of the code that is doing the rendering. I'm not too experienced with JS and shadowing so I was hoping someone could help me with what the right code would be to remove this.

Enable hideDoubleBrackets plugin option from gatsby-theme-brain

I noticed that the current version of gatsby-theme-brain allows you to hide the double bracket styling of internal links. It would be useful if I could enable this plugin option within gatsby-theme-andy.

Add complete styles to the theme

This theme consists of only the stacking behaviour and few basic styles (like the width of the note and popup element). They don't look great anyway and for people who use this theme, they have to write custom styles in order to get a good looking output.

https://github.com/aravindballa/notes.aravindballa.com/ heavily uses this theme and the components are styled in a way to look like Andy's notes using tailwindcss. And the implementations of this theme that I got to see are like that.

I feel this theme should have all those styles by default. So using this theme would be as simple as adding it to gatsby-config and writing markdown files in ./content. Also, I've been thinking of using theme-ui as it seems to be a standard to style/theme projects in React. Which means, having custom colors and fonts will be a breeze for the users of this theme.

If you are using this theme and think the above change will break your implementation, feel free to comment, let's discuss.

Note titles are defined twice

Summary

Currently, note titles are defined both in the markdown YAML and in the markdown note title. In practice, these two title formats align apart from a change in formatting (e.g. markdown file 'example-page.md' with YAML title: Example Page). (Reference: https://github.com/aravindballa/notes.aravindballa.com).

The linking seems to be done through the example-page.md title whereas the title display is from the YAML. The fact these two formats are always aligned makes sense as it would feel strange to click on a link to [[Example Page about Trees]] and end up at Example Page about Plants.

Possible alternative approaches

My preference would be to define the markdown files as Example Page.md. I.e. the title of the markdown file is the title of the page. When generating the site, this title could then be automatically made lower case and hyphenated to give the url of each note (notes.com/example-page).

This would both improve usability and avoid issues around mismatched titles.

An added benefit of this approach would be that it would be in line with how Roam exports markdown as well as how Obsidian reads it. It would be great to have parity with those tools! Then we could just export Roam as markdown, drag into content and publish! It would also mean users of the theme could explore and create their notes locally with Obsidian whilst publishing publically with gatsby-theme-andy.

Creating a graph of all the nodes

Hello there!

I want to know if there will be support for adding a full graph of all the connected notes, upon clicking on a note that it would take you towards it or opens a new panel with the note (similar to how Roam and Obsidian do in their publishing service)

the idea is to put on the top of the header bar a graph icon that opens a popup with the full-on connected graph

Getting a "TypeError: note.childMdx is null" on running yarn develop

warning The GraphQL query in the non-page component "C:/Users/rohith/Documents/GitHub/notes-digital-garden/node_modules/@aengusm/gatsby-theme-brain/src/templates/brain.js" will not be run.
Exported queries are only executed for Page components. It's possible you're
trying to create pages in your gatsby-node.js and that's failing for some
reason.

If the failing component(s) is a regular component and not intended to be a page
component, you generally want to use a <StaticQuery> (https://gatsbyjs.org/docs/static-query)
instead of exporting a page query.

If you're more experienced with GraphQL, you can also export GraphQL
fragments from components and compose the fragments in the Page component
query and pass data down into the child component — https://graphql.org/learn/queries/#fragments

Problems starting gatsby develop

Hi,

It's my first time using Gatsby. I got this error, was wondering if you could help me understand why it might be happening.

I got this, but it had a GraphQL error when I used the config from the sandbox.

/home/aeonneo/gatsby-theme-andy/gatsby-config cannot export a function.

A gatsby-config exported as a Function can only be used as a theme and not run directly.
If you are trying to run a theme directly, use the theme in an example site or starter instead and run that site to test.
If you are in the root gatsby-config.js for your site, change the export to be an object and not a function as functions
are not supported in the root gatsby-config.

not finished open and validate gatsby-configs - 0.037s

aliases

does someone know how to handle aliases?

Error: gatsby tried to access @babel/types, but it isn't declared in its dependencies;

When I run yarn start or yarn develop I get this error.

I have tried this using adding the start script descriped in the video.
I have also tried using the develop script described in the other documentation.

Error: gatsby tried to access @babel/types, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.
I can see that it is defined in the dependancies of package.json. I've attached the full terminal output.

terminal output - gatsby theme andy error.txt

Handling github relative paths

Are there options for dealing with github pages relative paths (i.e. pages.github.com/some-user/some-site)?

Currently, links will be generated to navigate off the domain using the rootPath but this will result in 404s for such sites.

Updating the theme

What's the best way to update the theme as you work on updates?

How should I go about adding images? (and/or hosting resources)