Rendering Our Markdown

Let's fix up our Markdown content.

Parse Content through TinaMarkdown

1. Update app/awesome-content.tsx to add the following:

Test it. It works! Now try and edit your content again. Look, a rich-text editor!

2. Go ahead and add some styling to your body.

Why did we need to do this? When we ask TinaCMS for our Markdown content it gives us a parsed abstract syntax tree (AST). This looks like a big JavaScript object that contains our text / formatting / structure each in it's own node.

TinaCMS can handle this for us using TinaMarkdown as above, or we can step through it ourselves for even more control. 🔧

TinaMarkdown needs to be called in a client component since it needs access to React hooks.