So whenever we select the web starter kit with AdonisJS 6, it's going to come with the EdgeJS template engine alongside it.

We've already worked with this a little bit. It's actually what's rendering out our page within our application so far. Additionally, if we dive back into our text editor and we head into our homepage,

it's also what's allowing us to loop over our movies, declare an href for our route and build out the actual route from our route method, as well as plop the actual movie title

directly into the HTML using interpolation. We've also already learned on our movie show page, by default, whenever we use two curly braces, it will encode anything that we plop into the HTML.

But if we include three curly braces, we're telling it that we trust the underlying value that we're injecting into our HTML therein, and it will render it out raw. We've seen this already, but for example,

if we remove our third curly brace and switch our movie abstract back to just two, and we dive into one of our movie show pages, we see the underlying HTML because it's being encoded.

Whereas if we add that third curly brace back in, instead the HTML is directly applied into our HTML document, and this is now a valid paragraph. The EdgeJS template engine is doing all that work

underneath the hood for us, and it's integrating deeply with AdonisJS to make that a seamless process. If we head into edgejs.dev, we'll see the documentations for EdgeJS itself.

We see an example right off the bat for the interpolation that we've been using so far. And in addition to that, we can actually use valid JavaScript expressions within these interpolated curly braces here as well.

Not only that, but we can define our own stateful variables within EdgeJS, apply conditionals, we've already seen loops, and then it has support for components as well.

Additionally, whenever we use that inspect method to actually view the underlying properties of an object and all of its values, that was from EdgeJS as well. So let's slide back to our text editor here,

and we can, underneath our movie abstract, inspect, call that as a method, and pass in our movie, give that a save, and we'll see once more, we see all of the different properties that are on our movie.

Now, we can actually do that exact same thing for the entirety of our state that we have within EdgeJS as well. This is all held within a property called state. So let's go ahead and give this a save,

and let's inspect our state. So out of the box, we're gonna see that this has quite a lot added to it. A lot of these that we see so far are all helper methods. We have the inspect method right here.

We can truncate string, get an excerpt for a string, HTML helpers, JavaScript helpers, switch text to camel case, snake case, dash case,

all the various cases, pretty print milliseconds. And then as we scroll down a little bit further, we start getting into app information, configuration, byte. We have our request information.

So within our request, we can see the parse URL and see that we're at the path name movie slash another awesome movie. We have contextual information from our HTTP context. And we just keep scrolling and scrolling and scrolling.

This is just gonna go on and on and on. Our state holds quite a bit, particularly within the request and response objects of our state. Lastly, down here at the bottom,

we actually see the movie that's on our state, which matches exactly what we saw whenever we inspected just our movie. So if you ever do need to dive into your state

and see what all is available to you, now you know how to do that. Just give it an inspect. So let's go ahead and get rid of this because it's taking up quite a bit of space and give this a save. There we go, that's better.

Okay, so within our movie model, we made our movies abstract optional. So if we scroll up to where we have the properties defined, the abstract is actually optional,

meaning it could be a string or it could be null. So if we dive into one of our movies, let's go into our resources, movies, and we're at another awesome movie. So we'll do this one for right now. We can get rid of this abstract altogether.

And now all that we have is our YAML front matter data. We don't have any additional information within this file. We'll go ahead and give it a save. And so that we actually see this without having to deal with clearing out our cache,

let's dive into our movie model once more. And let's actually just disable the cache check for right now. So we'll just give this a comment out, give this a save, jump back into our browser and give it a refresh.

So presently this is working okay because ultimately we're reading the value from a file and that file is gonna return back some kind of a value, regardless of whether or not we've defined the value there.

But if you see here, we have nothing additional within our HTML markup besides our H1. This could become problematic. So let's dive back into our show page.

If we start wrapping this information within say a div class, margin Y eight, maybe we give it a background too.

So background slate 100, rounded Excel, and maybe P8 as well. So if we start applying styling based around this content,

let's give this a save, jump back into our browser. You'll see that we have nothing inside of it, but if we dive back to one of our other movies, there's our abstract. Okay, so let's dive back into another movie.

So let's use a conditional to actually show this only when we have an abstract. So let's dive back into our markup and we can do @if movie.abstract,

and then we can indent our div here, and then we can end our if by doing @endif. I'll get this line break there as well. We can give this a save, jump back into our browser.

And now that background color is gone because we don't have an abstract on this particular movie. But if we jump back to our first movie, it's still there A-okay. And if you need to, you can do an if else as well.

So let's dive back into this movie. Let's go ahead and get rid of our inspector, dive back into our code base, and let's do an @else. So if we have a movie abstract, our div with the background will be applied.

Otherwise, let's just say no abstract. Give this a save, and there we see no abstract. Cool, so now we know how to do if else, and we had already previously covered loops

with our homepage whenever we looped over all of the movies that we have to show them within our unordered list. Now for both of our pages here so far, we are including the navigation

and we're redefining the navigation for each of our pages. So we have our full navigation here, and we have our full navigation on the movie show page as well. Well, we can actually extract this navigation out

into what's called a partial, which is essentially just a partial markup file, allowing us to define the markup in one spot and reference it elsewhere throughout our EdgeJS files.

So within our views directory, let's go ahead and right-click it, create a new file. We'll call this partials. And for this, we'll call our file nav.edge. Give that a save.

And now our views directory has both the pages and partials directory within it. Within our pages directory, let's dive back to our homepage. Let's give our navigation here a copy.

Within our nav partial, we can now paste this in, fix the indenting there, give that a save. And now we can jump back into our homepage. And instead of manually defining the navigation,

now all that we need to do is add, include, and then specify the path to the partial from our views directory, which will be partials/nav.

So partials/nav. Now we can give this a save. Let's go ahead and jump back to our browser, head to our homepage, and we still have our navigation here. So let's go ahead and do the same thing

on our movie show page. So let's give our include a copy, jump into our movie show page, replace the navigation here with our include, give it a save, jump back into the browser.

And now we should be able to see the exact same thing on each and every one of our pages, which we do. So now within our homepage, we can do one more thing. We can add in our movie summaries underneath the actual movie title.

So let's go and jump back into our text editor, jump back into our homepage, scroll down to where we're looping over each of our files. And underneath our anchor,

let's go and add in a paragraph and inject movie.summary using interpolation here with double curly braces. We can add in a class, text, slate,

maybe six or 700 and give it a save. Let's jump back into our browser. And okay, so we have our movie summary showing up underneath there. Let's give this a little bit of spacing too.

So let's bring our text editor back up on our UL. Maybe we'll do class flex, flex column, gap of four, and give that a save, jump back into here.

Okay, it's looking a little bit better. Let's push this from 700 to 600 and let's make the movie title bold. So we'll do class font bold, give that a save. All right, so that's looking better.

Now let's say that we wanted to truncate this text down a little bit. Maybe it's a little bit too long for our liking. We can do that using one of the helpers from EdgeJS.

So we dive back into the documentation and scroll on down. There's a digging deeper section with helpers within it. For this in particular, we see two different helpers. We see truncate and we see excerpt, which is just below truncate.

The primary difference here is that excerpt will also strip out HTML markup. Now we've already removed the HTML markup from our summaries. So we're a-okay there. But if we wanted to, we could use this excerpt

to extract a summary from our abstract and strip out the paragraph markup that we have within it or any additional HTML that we have within our abstract. But since we already have a summary,

we're a-okay to go ahead and just use truncate here. The first argument will be the value that we wanna pass in and shorten. The second argument will be the number of characters that we wanna include.

And we could conditionally provide a third argument, which is a configuration. We can specify it to only truncate at complete words, so it won't cut a word in half. And we could also add in a suffix as well.

Okay, so let's go ahead and dive back into our application. Let's jump back into our text editor. Within our summary, we'll call truncate here, provide our movie summary as the first argument. I'm not quite sure how many characters we have,

so we'll just go ahead and cut it off at 25. I think we have a little bit more than that. So we should be good. And we'll say complete words and set that to true. And then let's also end our function call there.

Okay, so we should be good to give this a save. Jump back into our browser. Oh yeah, 25's kinda short, but yeah. We can see it actually working here. So now we have just lorem ipsum doler sit emet,

and it cuts off the rest of the text there. So maybe we switch that to 50 instead of 25. So let's switch this to 50, give that a save. There we go, that's a little bit better.