This course has been updated! We now recommend you take the Intermediate Gatsby, v2 course.
Transcript from the "Course Overview" Lesson
[00:00:00]
>> Jason Lengstorf: Part 1, we're going to create a custom Gatsby theme. It's gonna be a documentation theme, and that's going to use MDX. If you've watched the the other workshop that I did on Gatsby it for front end masters we use MDX. But if you haven't used MDX before, don't worry, we're gonna cover all of it here.
[00:00:17] We're gonna define some custom data type. So we're gonna define an actual docs page, generic type that uses MDX. We'll use Theme UI which is a wonderful library from Jackson Black that allows us to kind of set up colors and font sizes and things in a way that's composable and easy to share.
[00:00:36] We will also add support for live edited example code. We're gonna be using react live from Formidable Labs. It's a really cool way to show a code sample and the result of that code sample in a way that somebody can edit and see the results immediately. Then, once we're done with that, we're going to install that custom theme on an existing site I built a fake JavaScript library and then I decided I couldn't have a fake JavaScript library so I built a real one, it's called Honkify and if you remember the untitled goose game, what it does is it makes all of the links on your site honk instead of actually clicking through the thing you wanted to.
[00:01:12] So that was a great way to procrastinate. We're also gonna customize the theme. So we're going to install the the docs theme on to this hongfei site and then we'll customize the theme using options so that it looks like the hongfei site. We'll use component shadowing to extend Theme UIs so we'll be able to override colors, fonts, things like that.
[00:01:31] Then we're going to build a site from scratch. We'll build a fan site for Negroni which are my current favorite cocktail. And we'll use that docs theme, but we're not gonna use it for docs. We're gonna use it for recipes, which means that we're gonna have to make some modifications to it.
[00:01:45] So we'll extend Theme UI again. But then we're going to do some fun stuff. We're gonna get into Cloudinary to manage images so that our image pipeline is nice and fast. We're just gonna upload things to Cloudinary, let Cloudinary do the work so that our buildings pipeline doesn't slow down.
[00:01:59] We're also gonna use component shadowing to customize components, because we don't necessarily want any reference to docs. We want to update that to reference recipes, so we'll be making those switches as well. And then we'll just install a second theme to see how that composes together. So we'll install an events theme that I built before.
[00:02:17] And we'll just plug that in and see how it works. And then finally, we're gonna set up a dynamic app that uses client side GraphQL with Apollo, we will configure client only routes and Gatsby, so this will be a linkable search results. So we're gonna use the Rick and Morty API to look up characters.
[00:02:35] And whenever you search for something you want to be able to send a link to that search results said to someone and have them click on it and see the same search results. So we're gonna build that will set up redirects and nullify so that this works locally and when you deploy it, and then we'll use react hooks to set up a search form.
[00:02:54] And the results page, as I mentioned, will be linkable. So, with all of that being said, let's get started. You are welcome to code along. I have a tendency to go a little bit fast. So also feel free to just sit back and absorb it. And all of this is gonna be online and you'll be able to revisit it check out two different points.
[00:03:17] But yeah, if you want to if you want to clone the repo, it's at jlang storf/gatsby-intermediate. And we'll be starting from the start branch.