Pages in Markdown

[00:00:00]
>> Let's recap, okay? Let's recap where we were, and get a sense of what we've accomplished so far. So, as of right now, what we have done is we have taken our site from the simplest possible implementation. Where we had a just an index page in our source pages folder, which is the smallest possible implementation of a Gatsby site.

[00:00:26]
We took that added in links, added it into additional pages. We got site metadata in, built in SEO tag. Got a shared layout, added some global styles, got some scoped styles. We're in pretty solid shape here, we're building a site, right? At this point what we've done is we've effectively made it, so that if we needed to get something stored up and added into the internet.

[00:00:52]
We've got all of the components to get there. But there's some things that we can do from here to give ourselves more flexibility and more capability in the way that we create pages. In the way that we work with data inside of Gatsby. So what we're gonna do next is we are going to jump in and start playing with something called MDX.

[00:01:14]
So, a common approach for writing content is Markdown. And if you've ever worked with the GitHub README, you've seen Markdown. It's the idea that you create a heading with one pound sign and then you double it up that's an H2. If you wanna do link, you say your link text and then you link to something.

[00:01:38]
So, in Markdown, you've got a heading like this, you can do text like this. You wanna do a bulleted list, you can do list one, two, this sort of thing. And this is a really nice way to write when you are trying to get some content together, you don't wanna think a lot about markup.

[00:01:58]
You don't want to have to write your opening paragraph tags and all the LI tags and things like that. That can get really cumbersome when you're trying to write. So, blogging, documentation, things like that. It's nice to have this Markdown format. But the challenge with Markdown is that it is limited.

[00:02:17]
So the way that we write Markdown, it kinda puts us in this position where it's either all content or we're writing custom stuff. So if I wanted to, for example, add a figure to my Markdown, there's no way for me to mark up a figure like this, right?

[00:02:37]
So I'm gonna end up, I've got my image. And this has got whatever images, This and it's some image and then, I wanna add a caption so I've got my fake caption, and When you do this, this is kind of a pain in Markdown because it first of all it breaks your flow.

[00:03:03]
You're not thinking about content anymore. Now you're thinking about markup. And then imagine this gets more involved. We've got some shareable component, which is like a post image, where we wanna add some styling to this so that you can add captions. And maybe in here you actually want this to have like a caption and then in addition to the caption, you also wanna have your like photo credit.

[00:03:28]
And in your photo credit you want to be able to set, like credit is to whoever. And so now all of a sudden you've got like there's a lot you've got to remember and if I were to be trying to write this, there's a pretty low likelihood that I'm going to remember all the class names the exact markup.

[00:03:47]
So now when I'm writing my Markdown I end up having to come in and I got to find one of these I got to copy it, I got to paste it into my document down here, and then I got to edit all these fields. So it's switching from content creation to markup.

[00:04:02]
And that's a little bit challenging when you're trying to stay in the flow as a writer. And that's why MDX is exciting, because what MDX is letting us do is it's letting us kinda componentize that additional functionality if we wanna bring in a react component we can. And that way we are mostly writing Markdown but if we decide that we wanna bring in some react, we can.

[00:04:28]
And that lets us build sort of like if you've ever worked with WordPress, a good example this is shortcodes, f you ever use shortcodes in WordPress. It's really nice to be able to turn on the shortcodes and just know that your content is gonna work. And you don't have to remember how the markup works or any of those things, you just wrap it, we would just go I wanna do a figure and my figures gonna have a source of like, image, whatever.

[00:05:00]
And an alt of whatever and then we could put in a caption and a credit, like this is way easier to remember then we exact markup, right? So this is a little more powerful of an approach and it lets me stay in the flow of writing without having to go find some copy to copy paste