Astro Crash Course #3 - Layouts

Okay, then my friends, in the last lesson, we made a few page components and we added a header to the template for each one of those components as well. Now, that's okay, but imagine we had even more pages and we wanted to add the same header to each one of those pages. Well, that's even more copying and pasting that we need to do. And then if we ever needed to change the navbar, we would have to make that change in every single page component we added it to, which is more work. So there is a better way to approach this where we're adding the same template sections to every page and that is to use a layout file. And with a layout file, we can just define the template once and then use it to wrap all the pages on the website. So in our case, we could make a layout for the header section. But not only that, we could add all the head to the layout as well because that's the same on every page and we could add the HTML tags and the body tags. In fact, the only thing that doesn't need to go into the layout file right now is the H1 tag for the page heading. So then let's make a layout file and we're going to add all that content to it. Now there's no set place where you have to make a layout file in an Astro project, but a common convention is to make them inside a layouts folder in the source directory. So I'm going to make that layouts folder first of all. Then we can make a new file in this folder which I'm going to call base layouts. Astro. And again, there's no naming rules here. This is just a common name for a root or base layout, but it must be an Astro component. And inside this file, we can make the layout template. So then I want to grab that template from the homepage component. And I'll just copy the entire thing. And then I'm going to paste it into the layout file. After that, I just want to make a few changes to this content. First of all, I want to change the title tag in the head to be book bytes, which is the name of the site. Next, I want to add an H1 into the header just before the navbar. So, let's do that. And we'll add a title, which is book byes. And then below the header, I want to delete the H1 because that was only content meant for the homepage and not this template, the layout rather. And instead, I want to render a main tag here, which is where all the page content should be eventually rendered. Now how do we actually say we want to render the page content within this main tag then? Well, we can use a special slot tag which is self-closing and that slot tag says hey whenever we use this layout component take whatever content the component wraps and just output it right here where this slot tag is. And we'll see exactly how that works now because next up we need to save this file and then use it within a page component. So let's head back to the homepage. And the first thing I'll do is delete the entire thing, the entire HTML template. Then we want to use the new base layout component that we just created to wrap whatever content that we add to this page. Now to do that, we need to import the component. And we can do that within this top section between those two sets of three dashes. Now technically this top section is known as front matter, which is like a block of metadata about a file. And in Astro, we can actually add JavaScript code to this front matter to do things like make variables or import other files. Now, really important to know is that any JavaScript or TypeScript that you add to this front matter is not sent to the browser and it's either executed at buildtime to help build the static pages or on demand on the server when a request is made. But it is never run in the client, the browser. Anyway, in our case, we just want to add an import to this front matter. So, we can use the base layout component. So let's say import followed by the name of the component which is base layout and that comes from dot dot slash to come out of the pages folder then into the layouts folder and then finally we want the base layout.astro file and once we've done that we can go ahead and use that layout component in the template for this component. So let's do that down here. Let's use the base layout component and make sure it gets a closing tag as well. And then inside the layout component, we can add the actual page content. In this case, I'm just going to add an H2 which is for the page title and that can be homepage. And then I'm going to save the file. So this content that was nested now inside the layout component is what gets rendered where that slot tag is inside the layout component. And now if we visited this homepage in the browser, it's going to show us that base layout template and this H2 content inside it. And we can see that right here we've got the site title and the navbar at the top. And then down here we've got the page content. Awesome. So then let's go and add this layout to the other pages as well. All right then. So what I'm going to do is I'm just going to copy this thing right here because it's going to be pretty much the same for the other pages, right? because we're going to use the same base layer and then just have an H2 inside. So, let's go to the about page first. I'm going to delete all of this and then paste this in. So, we've got the import and then right here we'll rename this to be about and I'll save that. And then let's open up the books page and I'll delete all of this. Paste in this new file. And this time we get an error because the path to this file is incorrect. And that's because we've gone one level deeper into this books folder. So, we need to come out of another folder first. So, dot dot again, then forward/ layouts. Then, we can grab the base layout component. All right. So, let's save that and see if it works. All right. So, I'm on the homepage. And now, if I go to about, we can still see the navbar up here. And if we inspect, we're going to see exactly the same thing. We've got the header, then the H1 for the title, then the nav. If we go to the books page, it's all still the same. Awesome. So, this is working. In the next lesson, then we're going to start to make this look a little bit better and add styles to the site.