Updates I Made On My Personal Website
Muco Trésor/ February 07, 2021
3 min read
Having your personal website built on a framework that is growing at a rapid pace like Next.js, comes with a cost. It can get out of date in a short time, and it can take you much time to upgrade it, but there's a benefit too. Getting an opportunity to try out new things and experiment with your favorite technologies, because sometimes at work you're forced to work with different technologies you don't like. Recently I managed to find time to update it. In this post, I'm gonna talk about the changes I made, and I hope it can be helpful to someone.
Github Issues As My Comment System#
I was thinking to build my own comment system but I always had a second guess, I wanted something simple and free that would also look nice. thanks to an awesome project created by Jeremy Danyow, you can now leave a comment on all of my posts, I actually came to know it when I was reading a post from the adonis.js website, and I was surprised at the end of the post I saw a comment system that looks like the GitHub one. I was wondering 🤔 if they replicated the same design, but suddenly I saw at the top of the comment form a link that says powered by utteranc.es, I immediately clicked on it, and find out that it is an open-source comments widget built on GitHub Issues.
I was really happy that it was going to save me some time that I would spend building my own comment system, and it was easier to implement it. On the link I shared above you can even see that it has an easier guide on how to add it to your website.
Chakra UI upgraded to v1#
In my opinion, Chakra UI is an underrated UI library that exists in the React ecosystem. It is easier to build design systems, and having accessibility out of the box, than these big players. Recently the team behind Chakra has announced the release of version 1 featuring a lot of improvements.
- Upgrade to React 17 and Emotion 11
- Component Theming API
- Color Mode improvements
- Chakra JSX Elements
Those are the highlight from their release blog post, but there's more you can check out the docs website to learn more. If you like Tailwind CSS you will likely love to using Chakra UI in React too.
MDX#
In the previous version of this website I was using next-mdx-enhanced mostly for front matter and layout support. The author of that project has added a warning on its Github repo that says:
You probably should be using next-mdx-remote instead of this library. It is ~50% faster, more flexible with content storage, does not induce memory issues at scale, and fits much better with the way that data is intended to flow through next.js.
In this version, I migrated to next-mdx-remote, and it refines some of the issues of next-mdx-enhanced.