Print your Markdown content with React through AST
If you ever used Contentful, the head-less CMS, chances are that, like I did, you ended up creating some code to map your contentful blocks to your React components.
I found out this approach really neat, but for my own blog, I didn't want to use anything else then Markdown files committed in my repository.
Get a tree from your Markdown 🔗
The first thing I start looking for is to have a tree from my Markdown files, preferably, something resembling the Contenful block tree.
I found out that by combining the unified and remark modules, you end up with something that really looks like the Contenful data.
Dealing with HTML 🔗
The hard part were to deal with the HTML markup. Indeed, it wasn't parsed taking in count the start and end of the elements. I had to create a recursive algorithm to wrap it up altogether in something meaningful. I still have to parse the HTML attributes to have something usable for most use cases.
Finally, mapping to elements 🔗
The final rendering function is pretty similar to the Contenful one. Never use the
dangerouslySetInnerHTML method again ;).
Neat things 🔗
Additionally, I managed to make of all my
<h2+> titles to have anchors automatically generated so that one can link to a particular section easily (like here with the "Une fuite en avant sans vision politique" title).
I hope you will enjoy the code, feel free to reuse parts of it in your own repos. I'll make a library of it once I get something stable and reusable.
Published at mercredi 1 décembre 2021 à 23:00:00.