πŸ™Œ Woohoo MDX success!

April 08, 2020 - 2 min read 🍡

Tags: webdev

Kien Dang

For the past month, I've been learning React which has slowly given me the confidence to tweak my blog. Recently, I added support for multiple tags in a post and having GraphQL to properly query for them.

In addition, I added a nicer button to toggle between dark and light mode, something I’ve been meaning to figure out how to do. After learning how to use external libraries, I went ahead and installed a Switch component for React and viola, cooler button!

I am always looking for improvements because I have fun while doing them. Whether it’s self-improvements or small optimizations to my own process, I know they will compound over time and make a big impact.

Today I added MDX support which allows me to insert JSX into markdown files.

Having both markdown and JSX is a perfect combination for my blog to add interactive graphs for my monthly Pomodoro reports. In turn, this helps build a lot of momentum in my journey since these graphs are fun to make and look relatively nice.

I followed the MDX conversion guide here and found that converting an existing blog quite challenging with lots of new bugs.

After 3 hours of tinkering, I finally got it to work! My code comparison on how I managed to switch over to MDX, a reference for those using existing gatsby-starter-blog and have already established multiple posts and gatsby-remark-reading-time.

I had to work backwards and uninstall the plugins that had a different set up for MDX files, eventually in the near future I plan on posting my blog as a template with all the features I’ve installed.

I am using a React wrapper for Chart.js and then importing them in my markdown. Now I can make my blog look a little more technical!


A blog by Kien