Check out a free preview of the full Intermediate Gatsby with Gatsby Themes course:
The "Extending Theme UI Variants" Lesson is part of the full, Intermediate Gatsby with Gatsby Themes course featured in this preview video. Here's what you'd learn in this lesson:

Jason 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.

Get Unlimited Access Now

Transcript from the "Extending Theme UI Variants" Lesson

[00:00:00]
>> Jason Lengstorf: What we want to do next, now that we've got our site, it's showing pictures, we've got some content. But we want to add more, right? I want to get recipes on here. I want to be able to check out different ways to riff on the Negroni. And to do that we're going to use our docs name because recipes are a form of documentation.

[00:00:21] So let's, we'll shave some corners of that square peg and get it into the round hole. So the way that we're gonna do that is we will go ahead and start by installing it. So we're gonna yarn workspace negronis add. And then we're gonna quote it since we're installing a work space theme.

[00:00:43] Gatsby-theme-docs@ star and once we get this in, we'll get into the config and we're gonna install it with some options. So first, we'll resolve gatsby-themed-docs and in the options I want to change the base path to be recipes and I also want to set the content path cuz I already have some recipes defined in here.

[00:01:17] So they're in content recipes so we'll set that to be the content path, content recipes okay? Once this is configured, then we can do a couple things. So the first thing is just like in the honck if I say, we wanna pull the layout out of our site and use it in the docs name.

[00:01:41] So I'm going to create Gatsby theme docks and then I'm going to get into components we'll create a layout.js. And I'm gonna import Layout from components/Layout. And then export default,
>> Jason Lengstorf: Layout.
>> Jason Lengstorf: And then, let's just take a look and see how that goes. So we'll do yarn workspace negronis develop.

[00:02:23]
>> Jason Lengstorf: And once we get this started, what we should see is we've got four recipes in here and one of them is at index.MDX, which means, according to our config, I should be able to visit /recipes. So let's take a look. Okay, all right, this is good. So we can see a couple issues right out of the gate.

[00:02:47] So one, is that this is not the right color that's not going to work for us. So there's not nearly enough contrast for that to be legible. And then this doesn't really make sense either. So we want to change out that text. And so I actually purposely designed this component poorly, because what you could do is you could add a Props or you could parse in different text, you could separate the heading from the table of contents itself.

[00:03:17] But I wanted to show just a quick way to override some components. So what we're gonna do is go into our theme and I'm just gonna grab this table-of-contents I'm gonna copy the whole thing. And then I'm gonna come back down, go into Gatsby theme docs components. And I'm gonna create a table of contents gas.

[00:03:42] And I can paste it in. And then I'm going to change it to say all recipes.
>> Jason Lengstorf: And that's all I need to change. So, if I stop and restart this
>> Jason Lengstorf: Whenever you shadow a component, you have to stop and restart to get Gatsby to pick that up, so that's why we're turning it on and off again.

[00:04:10] And now basically I just copy pasted the got to that component made a quick change their ways to abstract it better. There are ways to make that configurable through the data layer where we were maybe pulling like an option out of the data layer and using that as the title.

[00:04:24] But this is like the. The most straightforward way is just take the component exactly as is make whatever changes but it's worth noting, we've now rejected if things change upstream, we would need to go and get those changes and migrate them back in. So this is the heaviest way of solving this problem is a full copy paste of the component

[00:04:48]
>> Jason Lengstorf: Then, now that we've got this in here, the other thing that I wanna do is I want to add a link to it on the homepage. So let's go to this homepage. And I've got our history here. I'm gonna change this over to be recipes, and we'll say see recipes.

[00:05:13] Okay, so I see a couple issues here, the first one is our buttons are smashes into each other, so we can solve that easily. We'll just add a little bit of left hand margin, okay cool, that problem's solve, but I want to add visual hierarchy here. I want the recipes to be the thing that people look at.

[00:05:33] So I want that to be kind of a primary standout button. So to do that, I'm gonna add a different variant called primary. And I can get into my Gatsby plugin theme UI. And what I'm gonna do for the sake of experience here is I'm going to just duplicate it.

[00:05:54] But a lot of these setting aren't gonna change. So, in your app you'll probably want to abstract out common button stuff in like a common button, object, but I don't wanna make everybody watch me refactor an object, so just know that that's probably something you would wanna do.

[00:06:15] So then, let's see, we want that to be the primary and we'll set this to be the background. And then I think we just want like, when we focus will use the secondary color and when we hover will use the secondary color. And I think that's gonna be all we need to change.

[00:06:34] So let's take a look. Yeah, that's good enough, right? So that's still visible. It's clearly kind of got more visual weight than the history button, and that will take us through. So let's fix this muted color, make that a little more visible. So, to do that, I can just go in here we'll do colors.

[00:06:59] We could solve this with like a low dash merge as well. To make this a little less gross, but I think it's okay for now. So we'll just do, let's say 555, how's that work? That's much better. So now we've kind of overwritten this. We've made our text a little more legible, we've got a functioning site, and you'd never know that this was originally intended to be documentation.

[00:07:27] It just works with the style of recipe that we've put in here. So this is really nice, right? We've got the theme installed, and up and running, and customized, in just a few files, a couple tweaks to our styles.