We’ll be using Chrome, Windows 10, Gatsby 2, gatsby-plugin-emotion, gatsby-use-dark-mode plugin, @emotion/react, @emotion/styled and use-dark-mode React Hook. Let’s get cracking!
I recommend creating a very basic Gatsby project. We are dealing with CSS. If you try adding all of this to an existing site with CSS and styling, you are asking for trouble. Once you get it working with a basic site, you will be better able to add it to an existing site.
Create a Gatsby default starter project. Run
gatsby develop to make sure it runs. You should see:
TLDR: The plugin changed from 2.x to 4.x in four months. Rich Text changed from having one “json” field to a combination of a “raw” string field and “references” array.
If you use Contentful headless CMS with Gatsby, you need the gatsby-source-contentful plugin to gain access to your content. Rendering most of the data types to HTML is straight forward. The Rich Text field is a major exception. Most examples, tutorials, and Gatsby starters refer to an older, simpler version of the plugin.
Dad, Software Engineer, Tech Educator