Creating a Layout

[00:00:00]
>> So now that we've got our meta tags, we've got a header on the homepage. You may have noticed that things are getting a little bit messy here, we've got like these fragments hanging around, this SEO tags over here. This one's got a header but when we go to the about page, there's no header.

[00:00:15]
So our site has this kind of like lack of consistency. I wanna fix that. So the next thing that we're gonna look at is how to do shared layouts in Gatsby. And the great news is, it's just like you would do it in any other react app. So what I'm gonna do is I'm gonna create a new component here.

[00:00:38]
We're gonna call it layout.js and inside of it, we're going to get all the react goodies from react. We are also going to pull in the stuff that we'll need from Gatsby. So like we're gonna create some links. We're going to move that header stuff out of the homepage, so we'll pull the static query over here and the graph qL tag.

[00:01:11]
That was a weird autocomplete from the Gatsby. And then we're also gonna need that SEO tag. So let's pull that in. All right, so once we've got that, we're going to export a default component called layout and you can make this, nope, you can make it a default, you can make it not default.

[00:01:35]
That's really up to you, I am making it default, mainly out of habit, not out of like any particularly good reason. I've just always used layouts as default components. I think, yeah no rhyme or reason to that just to preference. So a layout component is gonna take children.

[00:01:55]
What children means is that when you have a react component and you wrap it around something. So for example when we look in here, this main component is wrapped around this h1 in this link. This will be passed through as children to the main component. When we're wrapping with a layout, the whole content of the site is gonna get passed through inside of the layout and we want that to be passed through as children.

[00:02:21]
So we're gonna go in and pass through this children prop and then we're also going to set the title, but we want it to default to false. And I'll tell you why in a second, the description also false, the image, and the path which will set to false, right?

[00:02:41]
And then that is going to be, what kind of builds out our layout component. And the reason for that is if you don't set these we wanna check if they exist and then default, if we made them an empty string, or left them undefined, it's just easier to explicitly say like hey if this isn't said just make it false so that comparisons are not falsely but actually false.

[00:03:09]
Inside of that we want to move over this index stuff. So let's grab this straight out and I'm gonna put it in here, okay? So now we've got that meta data and then we can start returning our actual layout component. So what we're gonna do in here is a lot of the same things that we were doing before we're gonna have a fragment.

[00:03:34]
We're gonna have our SEO and that's gonna take a title of title, a description=(description) and image=(image) and a path=(path). All right and then underneath that, we're going to put in a header and in our header I want to have a link to our homepage, and that one's gonna be the metadata title.

[00:04:04]
Then I also want to have nav. Now we're only gonna create the about page today and the nav at least, and so, we maybe don't need to do this, but I'm gonna do it just to show kind of the pattern. So we've got our nav item and then we're linking to the about page within it.

[00:04:22]
And then down here I'm gonna put in a main tag and put the children inside that. Okay, so what we've done now is we've set up our social sharing tags, we've set up a common header and then we've set up a container for the content of each page.

[00:04:39]
And this is gonna be what lives in our layout. So to actually use that, we can head over to our index page. And instead of pulling in the SEO, we're gonna pull in layout from components, layout.js, right? And then I no longer need this part because this header isn't gonna be there anymore.

[00:05:06]
The SEO is already taken care of, and we don't need this closing main tag anymore. Instead we just wrapped the whole thing with layout. Okay, that also means I don't need these anymore. So we can simplify this component quite a bit by wrapping up that layout into its own separate component.

[00:05:30]
So if I save this. Forgot to call it a function, I got caught in between a few different things there, yeah. So we're gonna call this a function layout and then when I come out here to index, save, let's refresh the page. Hey, there we go. So now we have in our elements.

[00:05:52]
We're looking at our header, that's got all the things we want in it. And we've got our main, which includes our content. And we've also got all of that SEO, good. Everything that we are hoping for is now wrapped up in that layout component. So I don't have to think nearly as much about how to make this work.

[00:06:10]
So let's go over do the same thing in our about component, so I'm going to import layout from components/layout.js. And we will put the layout here and here and then what I'm gonna do is actually just keep that title and description from the SEO, drop it right here.

[00:06:36]
But we also don't need this main tag anymore, so I'm gonna get rid of that. So let's save that. Let's head over to the about page. Okay, same thing we're getting the title tag that we want, but now we have this consistent navigation where the site actually looks Like it's a site, it doesn't look like disparate pages kind of chunked together.

[00:07:00]
And it also vastly simplifies as you can see, this is way easier to deal with than a lot of kind of strung out react code. Because we consolidated a lot of that complexity of how the layout works of like, hey, we need to get the site page and we need to do some like checking to make sure that it actually exists.

[00:07:21]
We got to set up this SEO tag, the basic markup of having a header and a main. That's all stuff that, we wanna care about that exactly one time. We want our sites to be, we wanna use semantic markup, we want to set up these meta tags and all those things.

[00:07:39]
We don't wanna have to do that on every page though. What we really want is, we want one place that automates all of the semantics and the housekeeping of running a site, and then abstract that away so that when we're writing content, this is all we have to think about what is actually on my page.

[00:07:58]
And I just wrapped the rest of it with the layout. That is a really nice workflow and it's gonna add a lot of power and just consistency. Like if we've got people across multiple platforms, or multiple teams, or having to make content I don't wanna have to educate every single team on which SEO meta tags are we using.

[00:08:18]
Or like, what exactly do we wanna do in terms of the way we markup the header? Forget all that, just put it in the layout. One person owns that component, everybody else can use it and now you get consistency across the entire experience. So let's commit our work here.

[00:08:39]
I'm going to head over to this one, all right? Let's add everything and I'm going to commit and say add and use a shared layout component. All right, let's push that up, okay.