Parse a Markdown Document With gray-matter
Many markdown documents have a metadata section at the very beginning, which contains information such as the title, author and creation date. This section is the so-called "front matter".
In order to render our markdown-based blog articles on our portfolio site we want to parse them and separate them into the front-matter and main article part. gray-matter is a library that helps us with that.
Prefer to read along as well? Here's the accompanying article.
Instructor: [0:00] Now that we have the skeleton functions that we need for, first of all, parsing the Markdown and then also rendering it as HTML, we can now go ahead and actually implement it.
[0:09] Let's get started with that getParsedFileContentBySlack first. In order to do that, we will need a library. We're going to install gray-matter, which will help us parsing our Markdown and separating that front matter part, which has metadata from the actual Markdown that we need for rendering as HTML later on.
[0:30] Gray-matter imports a function called matter, which you can then use to parse our content in. We can invoke that matter function, which gets the actual content, which is the content of the file, and which would return then the front matter part as well as the actual data.
[0:48] Right now, we don't have the content. Let's use an empty string instead. We can destructure it in data, which is the front matter part, and content, which is the actual Markdown content, which is also what we are going to return, ultimately. Maybe let's use front matter explicitly here so that it is better understandable. Then we have the content, which we then return, finally, to our calling function.
[1:09] Let's get to the actual content that we can pass to that Matter function. For that purpose, we need to read the file, basically, our Markdown file here. We know that we get here the slug from our Page component, which will be dynamic-routing without the extension.
[1:24] We can construct that path, again, joining the Post Path, which we get. Plus, we can generate that extension by using slug and .md, because we know this will be a Markdown file. This is not called slug here, but file name. This would be our post_file_path. We can read the content, and we give it that post_file_path, which is actual content.
[1:47] Now, having the content, we can change this here and pass it to the Matter function, which will then return it parsed to the caller. Going back, then, to our Page component, we already have this wired up. We get here the articleMarkdownContent, which as you can see, gets now the front matter.
[2:04] For now, let's just return here the front matter to our Page component, and let's also render that. Let's add here just a class name and a bit of a margin around our content here. Let's create an article note to get some nicer looking. Then, we'll have our H1, which is the title, which we can now directly read from that front matter that gets passed to our function here.
[2:26] Let me change here the implementation a bit, and destructure directly that front matter which we get from the getStaticProps. Here, inside, I can use now the frontmatter.title as our title. I can also add another div for the author, for instance, which would be then frontmatter.author.name, which is exactly how it should be specified in here. We have the author name, which then is the author, and so we render it out here.
[2:53] If we now start our server, and once this has booted up, we go to localhost:4200, we navigate to the articles and Dynamic Routing, which would lead us to the page which we have just rendered. We can now see the title that is being printed out, based on the front matter as well as the author.