All language subtitles for 004 Front Matter_en

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.