Intermediate Gatsby with Gatsby Themes
This course has been updated! We now recommend you take the Intermediate Gatsby, v2 course.
Table of Contents
IntroductionJason Lengstorf introduces Gatsby, mentions the course prerequisites, and explains that Gatsby builds default settings that make starting and deploying apps to production a smooth process.
What is GatsbyJason defines Gatsby as a progressive web app generator that allows users to work on an app offline, normalizes third-party data, and generates only static assets. Gatsby follows the PRPL pattern, push, render, pre-cache, and lazy-load.
Gatsby Advanced Features OverviewJason gives an overview of advanced features in Gatsby, such as theming and theme composition, by writing up bundled functionality and style, and schema customization.
Course OverviewJason states that the first part of the course will focus on building a custom Gatsby theme, the second part will be about installing a custom theme on an existing site, the third part about will be about building a site using the docs theme, and the fourth part will be about setting up a dynamic app with client-side GraphQL using Apollo.
Gatsby Theme Set Up
Benefits of Gatsby ThemesJason explains the major benefits are of using a Gatsby theme over of a boilerplate. A theme is an npm package, each theme is a different part of a website (main page, blog, e-commerce etc.) that can be updated easily using npm.
Workspace SetupJason explains that a yarn workspace allows working on two different packages simultaneously, and demonstrates how to create workspaces and themes in Gatsby.
preBootstrap HookJason configures the newly created theme and sets it up with a preBootstrap hook, a node that allows access to a Gatsby API. The content path is also built in this section.
Gatsby Theme & MDX Files
Loading MDX FilesJason demonstrates how to create an mdx file, and how to install the Gatsby source file system, the necessary Gatsby mdx dependencies, and the use External MDX hook to determine if MDX should be used inside a theme. MDX is a markdown that allows the use of embedded JSX.
Layout ComponentJason demonstrates how to build a layout component that organizes the different data layers.
Schema CustomizationJason demonstrates how to create a schema customization, which will allow users to query the different parts of a webpage that need to be rendered using GraphQL under the hood.
MDX NodesJason demonstrates how to create MDX nodes using the onCreateNode hook, and explains that nodes are data structures in Gatsby.
Configuring ResolversJason builds a pass through resolver, allowing the docs page to handle requests for MDX data.
TemplatesJason creates a docs template file, demonstrates how to query a page in Gatsby using GraphQL, and verifies that the page query setup on GraphQL runs, before adding it to the query docs-page-template file.
Creating an MDX PageJason explains what Gatsby looks for and executes when rendering a page. How to render a page, its MDX content, and its layout is also discussed.
Theme UI PluginJason demonstrates how to add the Gatsby theme UI plugin, how to access the theme UI props, and how to use the Gatsby sx property to improve the theme UI.
Component ShadowingJason introduces component shadowing in Gatsby, which overrides a file in another theme or plugin without needing to modify the source code.
Global StylesJason demonstrates how to add global styles, uses global styles to remove the margin and padding in the body, and adds a cautionary note to use global styles sparingly so that there is no conflict with the theme UI.
JSX PragmaJason adds more styles to the docs page, and demonstrates how to access the theme as an argument passed to a function.
useStaticQuery HookJason demonstrates how to use the useStaticQuery hook to get data from a GraphQL query by creating a table of content, and linking different pages to the table.
Syntax HighlightingJason explains that the main use of a docs theme is the ability to show code snippets, and demonstrates how to add syntax highlighting to the snippets.
React LiveJason demonstrates how to install React Live to be able to interact with code snippets, and explains that it is one of the essential features when building a documentation page or a docs theme.
Install a ThemeJason demonstrates how to install an external theme and adds it to the theme developed in the previous section. Instead of creating brand new themes, features from one theme can be used in another.
Theme UI SetupJason gives an overview of the third site to be built during this course, and explains that the UI needs to be improved by installing a theme.
Styling with Theme UIJason adds styling to the third site using theme UI by importing the layout component into the different website pages.
Inline Styling with sxJason continues to improve the UI by adding styling to the layout component, and importing the component into the different pages. The styling is added inline using sx, a Gatsby prop.
Images & CloudinaryJason explains how to improve the user experience of the website built in this section by adding images, and demonstrates how to use the cloudinary API. Cloudinary is a platform that stores images.
Using External ImagesJason demonstrates how to add image queries to a page using GraphQL, and Cloudinary.
Extending Theme UI VariantsJason demonstrates how to use the layout component created for the current site, and use it with the docs theme live coded in a previous section.
Theme CompositionJason demonstrates how to use multiple themes together to have a higher amount of utilities with less development work.
Setting up Dynamic RoutesJason demonstrates how to install the Netlify CLI to create the client side of a new project, a website that allows to search for and query data.
Client RoutesJason live codes a form for the search page started earlier on this course, a search query, routes and redirects using netlify.
Rendering ResultsJason demonstrates how to query an API using GraphQL, and builds a result component that helps display the data queried.
Querying with Apollo ClientJason demonstrates how to install the Apollo Client dependencies, and explains how to render load, and render results.
Routing Q&AJason answers questions from the audience about the reach router library, serverless functions when making API calls, pre-built data, and TypeScript support in Gatsby.