Woohoo MDX success!April 08, 2020 - 2 min read 🍵
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!