-
So whenever we added our movies into our movies directory in our project, we added three different movies. However, in our navigation, we only have two movies accounted for. We have My Awesome Movie
-
and Another Awesome Movie. We don't have our full trilogy here. It also doesn't make a whole lot of sense to list all of our different movies within our navigation, because sooner or later we're going to end up
-
going outside of the realms of our page and having a scroll bar in here. Ideally, instead, what we would do is list them all on our homepage
-
in a vertical style listing. So let's go ahead and focus on that in this lesson. So let's start by adding our browser away, and we're within our routes.ts file. So if we scroll up a little bit here, we have our homepage.
-
So instead of using the on shorthand to define this route, let's switch this to a get, meaning that we can also get rid of this render method. We'll leave the name as home. Then we want to add in an async.
-
We'll have our context for our HTTP context and our method for our route handler. Similarly to how we're fetching an individual movie,
-
we want to reach inside of our resources movies folder, and we want to list out all of the different movies that we have held within there. So let's go ahead and get the underlying URL pointing to that directory.
-
So let's do const URL equals. We can reach for app, make URL again, and provide it resources/movies.
-
Once we have that URL, we can go ahead and use the file system directory from node to read out the different files that we have within our movies folder.
-
So let's do const slugs equals await FS dot, and let's read dir to read a directory. And then we want to pass it the URL.
-
I'm going to go ahead and hit save so that this formats my code. And let's go ahead and add our render call back in. So we'll return ctx view, render, and point it back to pages/home.
-
At this point, let's go ahead and stop and see exactly what we have for our slugs. So we'll pass this into our page state slugs. We'll jump into our page and underneath our h1,
-
let's go ahead and do our double curly braces and let's inspect slugs. We'll give this a save, jump back into our browser, and here we go. So you can see it actually matches the entire file name that we have
-
listed within that movies directory, including the file extension itself. What we want these file names to represent is the slug. So that would be this portion right here without the actual file extension.
-
So let's jump back into our code, jump back into our routes, and after we've read from the directory, let's strip out the file extension.
-
So we'll switch our slugs here to be files and let's do const slugs equals files. Let's map over those. We'll have a file name and we can just do file,
-
call the replace method, and we'll want to replace .md with an empty string. Go ahead and hit save. Let's jump back into our browser now, refresh our page,
-
and there we go. We now have our fully represented slugs without the file extension added in, meaning that whenever we generate our movies.showRoute using the route method in our edge files,
-
we're safe to go ahead and pass these in as our slug parameter. So let's hide away this page, go into our homepage, and let's loop over our slugs and add links in.
-
So for right now, let's go ahead and do an unordered list. And within EdgeJS, we can loop by doing @each, declare our variable. So we'll have a singular slug from our plural slugs,
-
and then we'll want to end our each. For each item, we'll want a list item. And let's also do an anchor tag with an href. And then just as we are within our navigation here, we'll want to call
-
route.movies.show and then pass in the individual slug to generate out our URL. So let's do route.movies.show,
-
and then we can just pass in the slug. Let's end our anchor. And for now, let's just show the slug in a page. We'll see how we can switch this to a full-blown title here in a little bit. So at this point, let's give this a save,
-
jump back into our browser, and there we go. So we get rid of the inspect, and now we instead see each slug listed out on the page, but these also serve as links. They're not highlighted in any way because we have that
-
CSS reset from Tailwind, but they are actually links that we can click. We can go back to our home page, click another, go back to our home page, click the third, and there we go. So these are all working A-OK.
-
Now, we can easily add titles and summaries to each of our movies directly within the file and pull that out using a YAML-based declaration called frontmatter.
-
So let's go ahead and hide our browser once more, and let's dive in through each of our movies. So we'll start with this one. At the top of the file, we want to start a YAML-based declaration
-
for frontmatter, and to do this, we just do three hyphens, and then we'll want to end it by doing another three hyphens. Inside of these two three hyphens is where
-
we'll define our YAML declarations. So this is really just a key-value pair where we can define information. So we'll have a title where we'll put our movie title.
-
So we can go ahead and just cut this out, actually, because we're going to have a separate variable for this, so we don't need it twice within our page, and we'll paste it in here,
-
and then we can do a summary. I'm just going to grab the first line from our ellipsum text and paste it in here to serve as our summary. Let's go ahead and give this a copy, and we can
-
paste this and reuse it in our other movie files. So we'll paste it at the top, copy the title, get rid of it, paste the title in, copy it once more,
-
move down to our third, add it to the top, copy the title, get rid of it, and paste it in once more. We can give this a save. Let's jump back into our routes file, and now
-
we need to actually get that information for each one of the files that we have. So instead of mapping over them, let's instead for loop over them. So to loop over these, let's do for const
-
file of files. Now within our loop, we're going to want to take our file name, let's actually call that file name because that's literally what it is, and append it onto
-
the URL that we're generating here. So let's do const movieURL equals app makeURL, and we'll point it to the same path,
-
so resources/movies/, and we can switch these to backticks so that we can inject the movie's file name directly in here, just like so.
-
Then we're going to want to read the actual file so that we can get the metadata from inside of it. So the const file equals await file system or fs.
-
and read file, pass it in our movieURL, specify that the encoding is utf-8, and then we're going to want to create a new markdown
-
file using this file here. So let's do const md equals new markdown file, and pass in the file, and then we'll tell markdown file to process,
-
so we'll await md process, and if we did everything correctly, this should read the front matter that we've defined inside the start of each of our markdown
-
files, so we'll have access to a front matter property that has our title and our summary populated on it. But we'll want a place to put each one of our different movies, so outside of
-
our loop, let's do const movies. We'll define this as a type of record where the key is a string and the value is any, and we'll say that this is an array.
-
And then we'll instantiate it to an empty array. Now back inside of our loop, we can push into our movies array, so we'll do movies.push, add in an object,
-
we will do title, and then we can do md. as we said, we should have front matter property on here that has our title populated on it, and then we can
-
do the same thing for our summary, so md front matter summary, and then so that we can link into each individual movie within our page, we're also going to want the slug, which just like
-
we're doing within our map, all we want to do is take the file name and remove the md file extension from it. So filename.replace.md
-
and set that to an empty string. Cool. So now we can actually remove our files map, change slugs to movies, and we need to make that same change within our page too.
-
So let's jump into our page, slugs is now movies, instead of looping over an array of strings, we're going to be looping over an array of objects, each object represents
-
a movie, and each movie contains a slug. So we want to actually assign a separate value to slug, specifically for our movie slug, and then we can change the display
-
from displaying the slug to displaying the title, so movie.title. If we did everything correctly, we should be able to save and then jump back into our browser, and
-
it looks like we do have an error. So incomplete explicit mapping pair, a keynote is missing or followed by a non-tabulated empty line at one
-
column 21. And it looks like it's specifically having issues with our trilogy title, likely because it already contains a colon. So let's
-
try to hide our browser back away, and let's dive into that movie. As we were writing it, I did note that the highlighting was a little funky, but I thought maybe it would work. Let's see if we can
-
escape the colon, let's see if that will work. The highlighting says maybe not, but we'll give it a save and give it a try. Jump back into our browser, give it a refresh, doesn't
-
look like it's happy with it. Okay, well so that we can keep moving on, we'll hide our browser back away and let's just get rid of the colon for now. We'll replace it by a hyphen, how's that?
-
So let's give that a save, jump back into our browser, give this a refresh, and there we go. So now we have a list of links to each of our different movie titles. If we click into them, we see
-
our movie details. We can add the title in here next. Let's jump back to our homepage, click the next one, that one works too, and the third. So they all work.
-
Let's go ahead and add the title back in now. Remember we stripped that out of the actual file and moved it up into the Frontmatter data. So all that we need to do is dive into
-
our routes. Inside of our show route, we're only sharing the movie with the route itself. What we want to do is also share the MD, so we can add MD into
-
there. So now we have access to our Frontmatter data. Dive into our show, scroll up a little bit, and just before our movie, let's add an H1 pointing to
-
MD Frontmatter title. Give that a save, and now if we jump back into our page we should see our title which we do.
