Gatsby theme development

[anitsh]

Theme development in Gatsby is not as straight forward.

Default themes by Gatsby are more of a complete systems. Reviewed basics theme development processes and themes or complete websites which are open sourced to take as a base and improve upon it.

One of the resource was kentcdodds.com. Tried to make some adjustments and make it functional but found out the code was a bit messy. Later found a great resource from maximeheckel.com. I wanted a reference in TypeScript and clean code. It was good enough to give it a try. And the grea thing about it is a true theme, only design layer integrated unlike the default react samples

Theme: gatsby-theme-maximeheckel Site: blog.maximeheckel.com

I took two approaches to make a learn about the systems above.

Tried to make the system functional in my local. Another approach by taking a basic [hello-world](hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world) Gatsby example and implement the theme on it.

For the first approach, by default, the code blog implemented npm package so was functional at local. But when the local theme was referenced, it did not work. There were some issues which were fixed by removing the cache, public files and node_modules, and installing the with yarn in the theme as well as in the site.

yarn cache clean npm install -g node-gyp yarn upgrade Few commands which also helped to make the site functional.

The second approach was also not straight forward. The hello-world system is not in TypeScript and the theme is. I am not sure if the site needs to be ina TS but the best way to move forward is by converting it in TS. I did that. This is still in progress.

The difference between Gatsby Theme and a Site is the gatsby-config.js file.

    module.exports = () => {} // MUST BE FUNCTION for THEME

    module.exports = {} // Is an Object for Site

Resources:

• [Customizing Gatsby Graphql schema}(https://dev.to/krzysztofzuraw/customizing-gatsby-graphql-schema-4bol)
• Using and customizing official Gatsby themes from scratch without starter sites
• Invalid Hook Call Warning
• Setting up Yarn Workspaces for Theme Development- This is mentioned in the basic theme development section
• https://www.gatsbyjs.org/docs/schema-customization/#creating-type-definitions
• https://github.com/jlengstorf/gatsby-theme-jam-example
• Creating Open Graph Images with React & Gatsby

[anitsh]

Theme: gatsby-theme-maximeheckel Site: blog.maximeheckel.com

Both had server side rendering(SSR) enabled. Did some research on the SSR for Gatsby.

• https://www.gatsbyjs.org/blog/2019-04-02-behind-the-scenes-what-makes-gatsby-great
• https://www.gatsbyjs.org/docs/ssr-apis/#wrapRootElement

Static hosting services like github.io, netlify etc.. would not provide SSR, so need to work on the browser rendering with Gatsby Browser APIs

• https://www.gatsbyjs.org/docs/browser-apis/#wrapRootElement

install package to different folder

• npm install --prefix ./install/here
• yarn add --prefix /install/here

[anitsh]

Need to move the site, theme and all the related contents to https://github.com/codeanit-website

[anitsh]

Ran into issue while trying to implement custom theme into hello-world application - Error message: ./gatsby-browser.js 5:0-75 "export 'wrapRootElement' was not found in 'theme-codeanit/src/context/ThemeProvider'

Did some research into it, let me to Gatsby state management. https://alligator.io/gatsbyjs/state-management-in-gatsby

Also, more code review pushed towards TypeScript implementation in React https://github.com/codeanit/til/issues/117

Nothing conclusive but this will be it for the theme development series.