404 Page & noscript tag

[00:00:00]
>> From here, what we wanna do is, we've got our styles, we've got our homepage set up with a hero image. And to this point, we're kinda doing what you would do for just about every website, right? But if we head over to our About page, after I start the server again.

[00:00:20]
There it is. Okay, so we've got our homepage is looking good, it's got that hero image. And our About page is looking a little squished up against the side of the screen. And even if I make this bigger, it's just not ideal, right? So what we could do at this point, is we could go in and we can make an About page specific style sheet.

[00:00:41]
But we're gonna have a blog later, and we're gonna have other pages that are content-heavy like this. So what we actually wanna do is update our layout so that it can be shared between those pages. However, if we update the layout to squish content together, it's gonna break our hero image, cuz we want that to run to the edge of the page.

[00:00:59]
So in this case, what we're gonna do is we are going to introduce a nested layout. And this is very straightforward in Astro, it's something that I really like about it. There's no magic. Nothing magical is happening at all, you're just gonna import that layout, add some extra stuff, and then make that the new layout, right?

[00:01:20]
And so it's really, really pleasant to work with this workflow, because you don't have to remember that this specific file name overrides this other specific file name. It's just here's the layout file, I'm gonna use it or not. So what we can do in here is we can grab our defaults, let's add a new file in here called page.astro.

[00:01:42]
And this is gonna be our content-heavy page setup. And in this, we're going to set up our Frontmatter. Grab that original layout from layouts/default.astro, and then we can use it. So here's our original layout. And then inside, we want to just add a little bit more information. So we're gonna set up a section with a class of block and page, And then we put our slot inside.

[00:02:17]
So what this has done is this has allowed us to say, we want that default layout, we want the header, footer, all the styles. And also on pages, we want this additional wrapper that will allow us to keep it off the sides and give us some breathing room in the top and bottom, and all those good things.

[00:02:34]
And then to use it, we just have to go into about.md and update this one to say page instead. So now, if I head over to that page, we can see that it's looking a lot better now. It's a little less jammed into things. Let's do one more thing here before we start working on the shop, which is gonna be the most complex part of our build today.

[00:02:57]
I want this custom 404 page to be a little more friendly to our site users. And this is a great 404 page for development, because it tells you which page isn't working, and it lets you know that Astro itself is working. But for a user, this would be really confusing.

[00:03:13]
It's not branded for the site, it doesn't give you anything to do next. There's no way to get back, you just have to go hit your back button in your browser, which may not be something that somebody instinctively knows what to do. They honestly might just close the tab and Google it again or something, which is a really frustrating way to interact with a website.

[00:03:32]
So I would like to add a custom 404 page, and Astro has made, oops. Astro has made this pretty straightforward to do. We can add a new file, call it 404.astro. This is gonna be an Astro component. And in that Astro component, we're going to grab our layout.

[00:03:54]
Pages, no, layouts. Layouts > page, cuz this is one of those pages that we need. And then we're gonna grab that layout. And inside of it, I'm going to add a div with a class of not-found. And then we'll set up an h1 and say page not found.

[00:04:16]
We'll include the 404 so that people know what to look for there. And then the next piece that I'm gonna grab is actually, I think I included this in the markup here, yeah. Let's just grab this in fact, because I don't want anybody to have to manually type out this, This unsplash hot link that I used.

[00:04:39]
So this is an image, and then it has a little bit more information and a link to go back home. And because it's wrapped with the layout, it's also going to feature the header and footer. So if I save this and then head over to one of these pages, now we get a little more, we still need some styles here, but we're a little closer to where we want it to be.

[00:05:00]
So let's add in those styles, create a style tag at the bottom. And then up in the workshop assets, we have a pages-404 with a few things that we need to make that page work. Now, we have a nicely styled 404 page. It looks good enough, looks on brand, and gives us the ability to give someone an indication that the site's not broken, they just found a page that doesn't exist, and they've got a next step, they can go back home.

[00:05:31]
So that's a nice little piece to have in your back pocket as you're building out sites. And again, it doesn't take a ton of effort, which is great. You can just reuse that layout that you've built, and everything works as expected. So the next thing that I wanna do is I wanna dive into building out an e-commerce store.

[00:05:49]
So we are going to be building out a shop. That shop is going to include products loaded from a third party API. It is going to include a shopping cart so that you can add things to the cart and remove them. And the cart features are gonna be dynamic.

[00:06:06]
So we'll be using the partial hydration, Islands architecture of Astro, and we're gonna mix up our framework. So we're gonna build it in both React and Solid to show how it works, to show how those things can talk to each other across the partial hydration or between islands, depending on who's talking about it, which terminology they'll use.

[00:06:26]
So let's dive right on in and creates a page. So the page we're gonna create is going to be called shop.astro. And inside of it, we're going to, as is tradition, grab the layout. And this one, we're gonna use the default layout, because we have some different styling needs for a shop page.

[00:06:54]
So we'll wrap everything in that layout again, and then we're gonna have a div, give it a class name of shop. And inside of that, we're going to set up a headline. Shop sandwich kits. And then because we want this to work without JavaScript enabled, we're gonna add a noscript tag.

[00:07:14]
And this is just a note to anybody who has JavaScript disabled that the shopping cart is not gonna work, right? The shopping cart requires JavaScript. There are ways that we could work around this, but they were a little more complex than I think we could have covered in a day just because building a fully server rendered cart involves some things that I didn't wanna set up, but you can find some tutorials on it if you wanna learn.

[00:07:39]
These days it's fairly common for JavaScript to be enabled. So just sending somebody a note that says, hey, for this page, you're gonna need it if you wanna buy something, I think we're okay, right? So we're gonna say JavaScript is required to purchase things from the sndwch web store, and we'll give him an out.

[00:08:01]
If you wanna order by phone, call, and then, why is this not wrapping? Wrap you, there it is. We'll give them a tel to or tel protocol link, which I love. And let's see, we've got an actual number. This is a real number that actually does work. I encourage everybody to call it, and then we'll just +1 248-434-5508.

[00:08:37]
Okay, and then, now that we've got a note to somebody who has JavaScript disabled, we can get around to setting up our product. So we're gonna create a div called products. And inside of that, we're gonna have two to-do items. So the first thing is gonna be the list products.

[00:09:00]
And the second thing is going to be to show the cart. Okay, so save that. And things are kinda happening here, but we need a little bit more. So in this one, because the shop is unique, we are just gonna put its styles right in line. And those are up in the styles, we can go to page-shop and grab them and drop them in here, and that is our layout for the shop.

[00:09:31]
So showing this for everybody again, we've just imported the layout. We've got a div that contains our heading and a noscript tag. So if we do disable JavaScript, I don't know, sometimes I do this stuff and I realize that people haven't actually seen how some of these things work, so let me disable JavaScript here, And refresh the page.

[00:10:01]
And so if you don't have JavaScript enabled, it's just gonna show this message. And the message is nice and straightforward. You can order by phone. If you don't wanna use JavaScript, order by phone. Great, that is just fine. And then in here, we can enable JavaScript to turn it back on and we're back to normal.