In our post page we're now displaying
the content from our Markdown file
as the "body" of the post.
But we're missing a separate "title" property
as we can notice in the browser tab title.
That's because when we parse the Markdown
we get the result as a single "html" string.
So how could we extract the title
from our Markdown file?
The best approach is to add
a "front matter" to this file.
The "front matter" is a block
at the beginning of a file,
delimited by triple minus signs,
and it contains metadata in YAML format.
So we can use this block to define
arbitrary properties related to this file,
for example the "title".
This way we'll be able
to extract these properties
separately from the rest of the file.
Now, if we define the title separately
we don't need to repeat it
in the main content as well,
so let's remove this header.
The question at this point is
how do we extract those properties
from the front matter
where we read that file?
We'll need to change this logic a little bit
to first parse the front matter,
and then render the Markdown.
And to parse the front matter
we'll use another library,
called "gray-matter".
Let's look at an example.
Given a string that starts with
a front matter block,
and then some other content
"gray-matter" will return an object
containing both the main "content",
and a "data" object with the properties
defined in the front matter.
Let's keep this in mind
as we go and use that library in our project.
First of all we'll need to install that package,
as usual.
So I'm going to stop the dev server,
and run "npm install gray-matter".
Let's re-start the dev server again,
and go back to our JavaScript code.
In this file we want to import that library.
Let's call it simply "matter",
even though the module is "gray-matter".
And this is a function that we can call
to parse the content of the file,
that is our "source".
As we've seen in the documentation
this returns an object
with "data" and "content" properties.
Where "data" contains
the properties defined in the front matter,
and content is the rest of the file,
that in our case is in Markdown format.
So this is what we want to
convert to HTML.
But now we can also return a "title" property
because that will be available in the "data"
extracted from the front matter.
Ok. Let's save this file
and see if it works.
I'll reload the page,
just in case.
But you can see in the browser tab
that it's displaying the title correctly.
And if you look at the message
in the browser console
you can see the "title" there as well.
Ok. So that's how we can attach
properties to a "post".
We only set a "title" so far,
but we can add any properties we like here.
For example it would be useful
to have a "date",
showing when the post was written.
And this could be a date string
in ISO format, like this.
So if we save this file now,
we can go add use that "date".
In our "getPost" function,
we simply want to return
the "date" extracted from
the front matter "data".
And then in the page we can add
maybe a simple paragraph
with the "post.date".
I'm not going to worry
about the styling for this example,
but you can see the date
displayed at the top of the page.
Ok. So that's how the front matter works.
We could actually simplify
this code a little bit,
by destructuring the "data" properties
directly here.
So then in the post object
we can use shorthand property names
for "date" and "title".
And at this point we could even
rename "html" to "body".
And finally we could move
all the properties to the same line,
to make the code shorter.
That was just a bit of refactoring,
that shouldn't change the functionality.
But with this we are finally done
with rendering our First Post page,
loading the Markdown and everything.
So in the next video we'll see
how to add more posts.