This course has been updated! We now recommend you take the Intermediate Gatsby, v2 course.
Transcript from the "Theme Composition" Lesson
[00:00:00]
>> Jason Lengstorf: I wanna show how you can compose themes together and use multiple themes on a site to get a huge amount of utility without a huge amount of work. So there's a theme that I built as part of a naked course, it's called Gatsby theme events and it allows you to supply a yml file full of events and display that on your site.
[00:00:21] So I wanna be able to get these events that we've got in content events, data.yml. I want those to be available on the site as a list. So to do that, we're going to yarn workspace negronies add jlengstorf/gatsby-theme-events. So we'll get that installed and then in our gastby-config, we need to install that theme or configure it.
[00:00:50] So we're going to resolve jlengstorf/gatsby-theme-events. And then in the options, we wanna change the basePath. So the basePath for this is gonna be events. And then we want the contentPath to go into that events folder that we defined up here. So we want it to find content events.
[00:01:17] Once this is configured, we kinda wanna do the same thing that we did with the docs theme. So we're going to shadow the layout, so jlengstoref and note that the namespace on that package might make it seem like shadowing would be weird because it creates extra folders, but it works exactly the same is just an extra folder.
[00:01:40] So we're gonna go jlengstorf/gatsby-theme-events/components/layout.js. And then in it, I'm gonna import layout from, we've got three layers, one more, to components, get that layout. That's what I did wrong, that's confusing. Then we're going to export default layout, okay? And then we just need to link to it. So let's go back to this index page.
[00:02:14] And let's create one more button and it'll be to the events page and we'll just say Upcoming events.
>> Jason Lengstorf: Yarn workspace negronies develop
>> Jason Lengstorf: And let's get this started.
>> Jason Lengstorf: Okay, we're up and running. And so when we go back to our home page, refresh and we can see that we've got our upcoming events.
[00:03:04] And when we click through we've got a list of our upcoming events listed in the layout that we've created. So this is, it looks nice, it looks like it's doing what we want and it took us two files, right? So, and this is kind of the the power of what we're doing here.
[00:03:25] We have two themes installed, and almost, I mean, very little code happening. We've basically defined our own layout. And a theme UI, and then we just drop that layout into a couple different places. And we've been able to build an entire site out of it. So it's very nice being able to follow this pattern and to be able to use this to build sites cuz it just really accelerates development, accelerates our ability to quickly throw a new functionality.
[00:03:56] And again, if you work at an agency or something, or you're working in a company that has lots of teams that are building similar kind of landing pages, you'll just start to find that a lot of the things that you do over and over again can be packaged up into these themes.
[00:04:10] And then pushed out in such a way that you can stack together new sites like Legos instead of having to build, I've already built a homepage hero box a thousand times, I wish I didn't have to do that again. Install the theme, saw the hero theme and be done with it.