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
method again ;).
Additionally, I managed to make of all my
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.