100 Days to Offload & MDX

Based on an idea of Kev Quirk I will take part in the #100DaysToOffload challenge.

The basic concept of #100DaysToOffload is to write a blog post every day for 100 days. In the past I didn't really post regulary on this blog, with the exception of my Advent of Code solutions, but I'll try to atleast write a little post every day for the next 100 days.

The first thing I want to talk about is related to this challenge. For blog posts related to the challenge I want to show a notice at the end with some information about the challenge. I'm using GatsbyJS for my website and write my posts in Markdown.

One solution to this would be to add a notice to every blog post manually. This way I'd would have to update every blog post of the challenge if I want to update the wording and contents of the notice. So this isn't ideal.

So I went with the way of converting my posts from standard Markdown to MDX. MDX is a superset of Markdown which allows one to use JSX inside of Markdown files. Following a tutorial from the offical Gatsby blog I was able to setup my website the use MDX correctly.

Then I created a component which shows the notice of a given day and I can easily include it with the following code at the end of my posts.

<OneHundredDaysToOffloadNotice day={1} />

Now I only need to edit the component and updates in every post!