BlogPodcastAbout💌 Tiny Improvements

MDX - I should have done this sooner

I added support for mdx to my site, and it's made life much bettter.

As of this very post, I've added support for MDX to my site. It should make writing new content much easier for me. By removing lots of process that has proven unnecessary, I'll be able to get back to writing more here, an I'm very excited about that.

And it works great! Here's an example of a custom shortcode I wrote, called <Aside />:

These can be used to highlight important things.

And the relevant code for Aside:

const Aside = (props) => {
const theme = useTheme();
return (
<Box
borderLeft="8px solid"
padding="1rem 0 1rem 2rem"
borderColor={theme.colors.pink[400]}
backgroundColor={theme.colors.pink[50]}
margin="2rem 0 2rem 0rem"
{...props}
/>
);
};

Its use is fairly simple, too -

<Aside>These can be used to highlight important things.</Aside>

h/t

This is on the heels of last night's Reactadelphia Meetup, where a very talented developer named Prince gave a fantastic talk on MDX. I found it particularly inspiring -- it was that rare talk which had substance and motivation. I already had a pretty good grasp of what one might use MDX for in practice, but Prince made some great points about why MDX is such a game changer.

Mike Bifulco headshot

Subscribe to Tiny Improvements

Learn about designing & building great products for the web, and my philosophy for living a life you love in an ever-changing world.

Typically once a week, straight from me to you. 😘 Unsubscribe anytime.


Interested in sponsoring? → Click here

***
© 2019-2022 Mike Bifulco

Interested in sponsoring? → Click here

Disclaimer: 👋🏽 Hi there. I work as a Product Builder at [Incognito Mode]. These are my opinions, and not necessarily the views of my employer.
Built with Next. Source code on GitHub.

More great resources

Articles about React.jsArticles about Remix.runArticles about Next.jsArticles for developersArticles for JavaScript developersArticles about CSSArticles about User Experience (UX)Articles about tools I useArticles about productivityBrowse all topics →