Add MDX Frontmatter

[00:00:00]
>> So Frontmatter is a pretty common way to send in config with markdown. And the way that that works is, let's see, we can just add. I'll always refer to this as a fenced code block. I don't know if it has an official term, but that's what I usually hear it referenced as.

[00:00:18]
So let's put this one in as, let's say year is 2021. Today is August 11th, so let's put it in as August 11th. We'll set a title of My First Blog, and we will set a description of This is my first MDX blog post. Okay, so that is the basics of how we would use Frontmatter.

[00:00:45]
So we can go into the other blog and let's add more. This one's from the future. It'll happen tomorrow. And we can say, Another Blog, and let's do like Watch out, I'm on a roll. Okay, so now we've got this metadata in here. And if we go into our GraphQL setup, we can see that some new things have happened.

[00:01:16]
Now we got all MDX here, right? But we can also see if we go into our page nodes that, where did it go? Children and then there's an MDX option. And in the MDX option, you can get like the title and the rawBody. How weird it missed all of the pieces.

[00:01:44]
Now, this is a little bit of a roundabout way to do it anyways. The easier thing to do is to just go for all MDX. So let's get all the nodes, and we're gonna get the title and the date, and I'm gonna make this relative. So let's say from now, and then I wanna get the rawBody again.

[00:02:02]
So now we can kinda see here's the rawBody of our post. Here's what it is, when it was posted and it looks like we're getting GMT, so the hours are a little bit weird. Or wait, what are we getting in five hours? What timezone is that? I think it's GMT.

[00:02:24]
That gives us the date relatively, or if we turn this off, we'll get the date as a timestamp, yeah, GMT. And then you can also set other filters. We're not gonna stress about that, but if you wanted to do like full name month, You can format it like that, and then you'll get the August 12th, 2021.

[00:02:53]
You can do the short version of the month. You can do the number abbreviation or the number abbreviation without leading zeros. However you wanna do that. So there's a lot of nice ways to make these work if you wanna pull in the dates. And then we can just kinda grab out whatever we need.

[00:03:17]
So I wouldn't actually use the rawBody, I would use the HTML. So we get the HTML, this might not work in the GraphQL explorer actually because HTML gets rendered at build time, so this might blow up on us. Yeah. Let's just stop and restart that. MDX has a few special things that make it a little bit tricky.

[00:03:45]
So some of that stuff can get weird. But we also get access to the headings, which is pretty cool. So if you wanted to build the table of contents, you can pull out the headings and what level of depth they are. So there's there's a lot of really nice stuff that you can do here, where you're able to do some pretty advanced things out of the the GraphQL.

[00:04:11]
I think what else is in here? So that's the code body. And then will the HTML always crash or did something just go weird? Yeah, the HTML will always crash. So let's not use that. So instead, what we can do is let's use that SEO component. And to actually make this work because, if you'll notice, let me stop and restart this so that we've got a working dev server.

[00:04:37]
We have one problem, which is we got these pages working. Let me get back to one of our pages that still exists. I deleted the series. Let's go to another blog, right? So we've got another blog. But if I look in the head, it's using all my default values, and that's not actually what I want.

[00:05:09]
So it picked up some of this, like it picked up the the blog post path, but it didn't pick up my description and didn't pick up my my title. To do that, which I would hope it just comes right out of here. Whatever I put in here, I want to work.

[00:05:27]
The trick is that our layout component needs props to be set. And in order to set those props, we can't just directly wrap the layout because this won't apply any props to it. So instead, we need to do a little bit of, Working around to get this to function the way we want.

[00:05:49]
So we're gonna create a custom layout specifically for our posts.