We configured the Tailwind Typography plugin
to properly style our review article.
Now, since we're loading the content
from a separate Markdown file,
maybe we could keep all the data there,
not just the article text, but also
the title and the image path.
This way we could make this component
the same for all reviews,
and just display different data from
a different file for each review.
Now, there is a way to add properties
to a Markdown file.
At the top we can create a "front matter" section,
delimited by 3 "-" characters before and after.
And here we can set arbitrary
properties in YAML format.
Usually you just write a property name,
like "title",
followed by a ":", and the value,
that's typically a string.
Let me put the Markdown file and
the page component side by side,
so we can simply copy the values
from the page code.
This will be the "title".
Then we can set the "image",
that's really the path, to be used as the img src.
Maybe we could also add a "date",
to show when the review was published.
As the value it's best to use the ISO date format,
so this means the May 4th 2023.
To extract this data from the front matter
we'll need to use another package
called "gray-matter".
There are other libraries that
can do the same of course,
but this one is pretty popular.
We can use it to parse our Markdown file,
and it will return an object that
contains both the "content",
that in our case will be the Markdown text,
and the "data" extracted from the front matter.
The "data" object will have all the properties,
like "title" etc.
So let's go back to our project,
I'll rearrange these panels first.
Now, let's install that new package.
We need to run "npm install gray-matter",
and just wait a few seconds.
Now I'll restart the server,
and let's see how to get the
front matter properties
in the component, where we already
read the Markdown file.
I'll also show the browser on the right side.
And we're finally ready to use the new library.
We want to import the "matter" function
from the "gray-matter" module.
Now we can use this function,
before converting the Markdown to HTML.
Because we want "matter" to parse the full
text that we loaded from the file.
This will return an object
with a "content" property.
The "content" in our case is the Markdown,
so that's what we want to pass
to the "marked" function.
But then we'll also get a "data" property,
that will have all the values
from the front matter.
Let's start by logging this "data",
so we can check exactly what it contains.
Let's keep an eye on the server logs,
and reload the page.
It's compiling.
And you can now see the data object here:
it has "title", "date", and "image",
just like we wrote in the front matter.
And by the way, the Markdown is
still being rendered as HTML,
which proves we're using the "content"
property correctly.
But now we can extract the properties
from the "data" object,
since we know it contains "title",
"date", and "image".
At this point we can remove this log.
Then display the "title" variable
inside the Heading.
And we can also use the "image" property
as the "src" for the img element.
Let's double check that the page is still working.
It still looks exactly the same.
Now, let's also display the date,
maybe after the Heading.
I'll just put it in a paragraph tag.
And if we save, you can see
the date before the image.
Let's add a bit of styling as well.
We could make it italic,
and add some padding at the bottom.
Ok, that looks good.
So, you can see that
by keeping all the data in the Markdown file,
the JSX elements in this component
no longer have any hard-coded values.
In the next couple of videos
we'll make this entire component fully reusable
and capable of displaying the data for any review.