00:05
Now, HTML is one perfectly valid way to store long-form versions of text, which we're using to save information about our movie's details. Alternatively, though, we could be using something called Markdown.
00:15
Within Markdown, HTML is perfectly valid, and there's also a bunch of different extensibility options that you can add into the Markdown file, parsing, to parse it out in various different ways.
00:24
So let's go ahead and learn how we can swap our movie details from HTML over to Markdown, ingest it into our route, and display it within our
00:31
Edge files instead of the raw HTML that we have currently. So to start with, let's go ahead and switch our movies over to Markdown files.
00:38
So we'll just replace HTML with MD, which stands for Markdown, within each one of these. So MD here, and lastly, MD there.
00:46
We could leave the HTML inside of here as is, but let's go ahead and actually switch it over to using Markdown annotations. So for an h1, that's just a single hash followed by a space.
00:55
We can get rid of the ending tag there, and everything by default will be a paragraph. So we can get rid of the p tags here. Lastly, let's just remove the indent. Cool. I'm just going to go ahead and copy all of the text, since it's all the same
01:05
throughout our various movies. The only thing that changes is the heading, so we'll give this a save. Let's jump into our next movie. I'm just going to paste in all of the text and replace our h1 tag with Markdown,
01:15
and let's do the same thing in our last movie. So get rid of the h1 tag, add our hash, and replace the paragraph. Cool. So our movies are actually transferred over now, so let's jump back into
01:23
our routes, because we need to change the actual extension here as well. So this will change from HTML to Markdown, or MD. At this point in time, we can go ahead and give the file a save,
01:33
and try to render it inside of the browser. So let's jump back into our browser, and let's jump into one of our movies. So you can see we still have the hash in here, designating that this is a heading. So currently, the Markdown is not being
01:42
parsed in any way, and it's just displaying the raw text that we have within our files. So what we need to do is add in a Markdown parser. So let's go ahead and hide our browser back away, and let's go ahead and hide
01:50
our text editor too, and get back to our terminal. Let's stop our server by holding Ctrl+C. Let's clear out our terminal, and let's install a dependency called dimer-app/markdown.
01:59
So let's do npm i dimer-app/markdown. This package provides us a Markdown parser, so it's going to take the Markdown as we have it, allow us to define any parsing mechanisms
02:08
that we may want to interject within the system, and then it will parse it out to raw HTML for us, so that we can display it within our underlying page. In addition to that, this package is also written
02:17
by Harman Deverk, who is the creator for AdonisJS, so the APIs will play nicely together and be relatively the same. So let's go ahead and give this an install, and let's boot back up our server.
02:26
So npm run dev there. Let's go ahead and bring our text editor back up, and it's after we actually read the file from our system that we want to use the parser. So instead of calling the result here our movie,
02:35
let's now call this our file. Next let's go ahead and import the packages that we're going to need to properly parse our Markdown from that package that we installed. So let's do import, and we're going to need to extract out a class called
02:44
MarkdownFile, and that will come from @dimerapp/markdown. We're also going to need a utility function, so let's import to HTML, and that's going to come from
02:53
@dimerapp/markdown/utils. Cool, so let's go ahead and scroll back down, and let's make use of these. So we want to pass our file to the Markdown file, and that will return back a
03:02
Markdown instance that we can then process. So let's go ahead and create a new instance of MarkdownFile, providing it in our file contents. Then we'll want to go ahead and await md.process
03:11
so that it can process our Markdown contents. Lastly, we can do const movie now equals to HTML, passing it in our Markdown file instance
03:20
of md. So now if we give this a save, we can jump back into our browser, and we see object object. Okay, so we missed one step. Let's see if we can figure out what that step is.
03:29
Let's jump into our page, and since we're getting back object object, it's trying to stringify the underlying object, which is why we see that object object annotation. We can have EdgeJS actually plop the
03:38
contents of the object onto the page by doing double curly braces, and we can now use a utility called inspect to inspect the underlying object. So it's just going to flatten it out
03:47
and print it out as is on the page. So let's provide it our movie there, give this a save, jump back into our browser, and here's the result of our inspect call. So you can see the underlying
03:56
HTML that we're parsing out from our Markdown file is actually added onto an additional property called contents. So if we hide away our browser, jump back into our routes, all that we
04:05
need to do is chain off of our two HTML an additional call to contents. Give this a save now, jump back into our browser, give it a refresh, and voila! Now we're seeing the
04:14
parsed HTML from our underlying Markdown file. So let's hide away our browser again. Let's jump back into that show page, get rid of our inspect call, open our browser back up, inspect's gone away,
04:23
and now we can jump between our movies. So we're currently in my awesome movie, let's jump over to another awesome movie, and now that looks a-okay too. So we're good to go.
