Astro Crash Course #5 - Templating

Okay then. So now I want to dive a little bit deeper into Astro components and talk about this section at the top marked by two sets of three dashes. So this top part marked by dashes like this is called front matter and it's a way to add metadata to a file. Now you might have seen it in markdown files more commonly but Astro utilizes it within components to add component scripts. So within this front matter between the two sets of dashes, we can write JavaScript or TypeScript code to do things like import all the files and components which we've actually already done right here. We import the layout, right? But we can also do things like set up variables that we might want to use in the component itself or fetch data from a database we might need to use in the component or to access component props which we're going to talk about later as well. And the really important thing to know about this front matter script like I said before is that it never runs in the browser. Astro components are either rendered at build time or on demand on the server not in the browser. So none of the code you write in this front matter section will ever reach the browser and by default it will run only at buildtime unless we configure the component to be rendered on demand. And that means we're safe to write sensitive code here because it won't ever reach the end user. So we can do things like make database calls if we need to. For now though, let's just do a few simple examples and then through the rest of this course, we're going to build on that. So then to begin with, I'm just going to make a new constant called user. And I'll set that equal to a string, which can be something like Mario. And now we can access that variable inside the component template. So I could come down here where we have the welcome message. And after that, I'm going to add a comma and then output the user variable. The way we do that is by adding a set of curly braces and then whatever value we want to render, which is the user variable in this case. So now when Astro renders this component at build time, it's going to replace this syntax with the actual value of the user variable, which is Mario. All right. And now we can see that right here, welcome Mario. So it replaced the curly braces and the variable name with the actual value. We could also make the user into an object if we wanted to and then access properties from that object inside the template. For example, I could delete this string and create an object instead with a name property which could be the string again Mario. But as well as that, we could also add on maybe an email property which is also going to be a string and that could be Mario bookbytes.com or whatever else. So now we've got those. Let's try outputting both of the values in the template. First of all, I'm going to update the name value to be user.name now because user is still the variable and then we're accessing the name property on it. And then beneath this, I'm going to add another paragraph tag where we can say something like logged in as and then we'll use curly braces again. And inside those, we'll say user email. All right. So, as expected, we still see the name Mario there. And now we can see the email down here as well, logged in as Mariobbyes.com. Now, in reality, we probably wouldn't be hard- coding a user like this into the template. And instead, this would be one of those occasions where we might opt for serverside rendering for this component so that when a request comes to the server, we could actually fetch the currently authenticated user and populate the template with that value instead. And I'll talk a little bit about server rendering later in the course. For now, let's kind of simulate this behavior by randomizing whether this user value is an object like this or null, meaning they're not logged in. To do this, then I'm just going to paste in a simple function above where we defined the user called get user. And this function just generates a random number between 0 and one. And if that number is less than 0.5, we return null. Otherwise, we return that same user object. So each time this function runs, it's randomizing which value we get back. Okay. Then where we define the user constant, we'll replace the value with a call to the get user function. Now if we were to build this app, then currently this code would only ever run once at build time and that return value would be kind of hardcoded into the site. now, but during development, every time we refresh the browser to request a page, this function is going to run again and it's going to return a new value. And that means sometimes we're going to get a user object and sometimes we're going to get null. And actually, Astro's already picked up on that because we see these errors down here, which when we hover over them say that the user is possibly null. And if the user is possibly null, it means we can't access the other properties on it. So for this to work, we have to wrap this output in some conditional logic whereby we only render this user information if we have a value for the user. To do that then we've got two options really. What we could do is actually just place a question mark right here. And we're saying now if we have a value for user then output the name and the same down here for the email. But what I like to do sometimes, especially if I'm working with authentication in a website, is kind of mark off the sections which are only going to be shown for authenticated users. And for that, we can use a bit of conditional template. We do that by using curly braces. And then we'll say user and then we'll do a double amperand. So that's logical and and then parenthesis to return a bit of template inside of. Then what I'm going to do is cut this bit of template down here and paste it inside here. And if you've ever used React before, this is going to look very similar to how we kind of render conditional content in React. All we're doing is using this expression which is checking two conditions. The first one is to check if we have a user. Right? Now, if this is false, then the right hand side of this logical and never gets executed. But if it's true, then it does. And then we see this in the browser this template. Okay. So now hopefully only when we have a user we are going to see this content right here. If we don't have a user then we won't see anything right here and that's going to be random every time we refresh the page. Right now only during development like I said before if this was built then whatever the value of this was at build time that's going to be kind of hardcoded into the site then. But during development we can keep refreshing the page to see if this kind of logic works. All right. So I'm on the homepage and we can see Mario and the email. I'm going to refresh and again and now it's gone. Awesome. So it must be null. And if I refresh again, now it's back. Cool. So that conditional rendering is working. Now obviously if this was a real website, you had a real authentication flow. You wouldn't be doing something like this. You would instead make this component a server rendered component so that when the page is requested, the server can reach out to the authentication service and determine uh the user value or whether they're not logged in. And then you can conditionally show content. I just wanted to kind of mimic that by creating this function during development to show you how we can conditionally render content in the templates.