jlengstorf/authoring-gatsby-themes

Authoring Gatsby Themes

This repo is intended to teach developers how to author Gatsby themes.

It uses Yarn workspaces.

authoring-gatsby-themes's Issues

Gatsby should not be in dependency in gatsby-theme-events

It's already in devDependency. I don't think you need to put it in dependency since users might want to install newer versions

https://github.com/jlengstorf/authoring-gatsby-themes/blob/master/gatsby-theme-events/package.json#L25

Lesson 9 - Query Error within the templates category.js

Following the course posted on egghead.io all goes well until part 9.

Steps to reproduce
Starting after lesson 8, setup the config and node files to accept options. At this point I start to receive the warning that the GraphQL query in the non-page component will not be run.

Note—I switched the terminology from events to categories, which you'll see in the console info I post below. That's just the naming, everything else has been the same.

Styles on theme not applied

Description

Following the course posted on egghead.io all goes well until part 13.

Following the steps on how to consume a theme into a gatsby application i've ran into some issues with the styles not being applied.

Steps to reproduce

• Created a new folder called theme-test
• Ran yarn init -y
• Added the dependencies @jlengstorf/gatsby-theme-events, gatsby, react, react-dom
• As i have gatsby-cli installed and updated i skipped the step
• Created a gatsby-config.js with the following content:

module.exports={
    plugins:[
        '@jlengstorf/gatsby-theme-events'
    ]
}

• Issued gatsby develop and it yelds the following result:
  

• Continued on with the course to the final lesson.

• Following the instructions on the final lesson to override the color the following folder structure was created:

| theme-test
  |src
    |@jlengstorf
       |gatsby-theme-events
          theme.js

• Added the following to theme.js file:

import {theme as BaseTheme} from '@jlengstorf/gatsby-theme-events/src/theme'

export const theme={
    ...BaseTheme,
    colors:{
        ...BaseTheme.colors,
        primary:'blue'
    }
}

• Restarted the development server and it should show me a header styled with the color blue but i'm presented with the same result as above.

• The odd thing is that overriding the whole component via component shadowing works. Created src\@jlengstorf\gatsby-theme-events\components\layout.js with the following contents:

import React from 'react';

export default ({children})=>(<>{children}</>)

• Restarted the server and i'm presented with the following:
  

Feel free to provide feedback
Thanks in advance