I'm so glad I used MDX for my blog. It enables things that otherwise would not be possible with Markdown or a CMS, while still being a consumable data source (unlike having the posts be all-JSX)
Some examples in-thread 👇
Some examples in-thread 👇
I created an <Asterisk> component because I wanted to add XKCD-style "jokes on hover". Plus, I tend to be very verbose, and this means I can pack some of that away into an opt-in annotation. ![MDX code snippet:<br />
<br />
HTML has two image media elements: the international pop-star `img`, and the niche hipster artist `picture`.<Asterisk content=]()
" src="/images/1px.png" data-src="https://pbs.twimg.com/media/EUB9hT9XQAAvvvf.jpg">
" src="/images/1px.png" data-src="https://pbs.twimg.com/media/EUB9hT9XQAAvvvf.jpg">
For tangential information, I have a `Sidenote` component. It has a `title` prop which accepts JSX, so I can use any special formatting within it. Also a `type` which accepts info/warning/error/success.
So much more flexible than the `<blockquote>` markdown gives you!![MDX code:<br />
<br />
<Sidenote<br />
type=]()
title={
<>
Fancy title withelements !
}
>
Content here!
" src="/images/1px.png" data-src="https://pbs.twimg.com/media/EUB_F39XQAAh18f.jpg">
So much more flexible than the `<blockquote>` markdown gives you!
title={<>
Fancy title with
}
>
Content here!
" src="/images/1px.png" data-src="https://pbs.twimg.com/media/EUB_F39XQAAh18f.jpg">
For code snippets, I built a little playground component on top of react-live. You can pass props using the typical Markdown code-snippet syntax.
Here I specify that it should render a preview (live=true) and that the editor/preview should be equal width (split=[50,50])
Here I specify that it should render a preview (live=true) and that the editor/preview should be equal width (split=[50,50])
![MDX code snippet:<br />
<br />
```jsx inline live=true split=[50,50]<br />
<div<br />
style={{<br />
'--color-1': 'deepskyblue',<br />
'--color-2': 'navy',<br />
background: `<br />
linear-gradient(<br />
170deg,<br />
var(--color-1),<br />
var(--color-2) 80%<br />
)<br />
`,<br />
<br />
// Unrelated styles:<br />
color: 'white',<br />
textAlign: 'center',<br />
padding: 30,<br />
borderRadius: 12,<br />
}}<br />
><br />
Hello World<br />
</div><br />
```<br />](https://pbs.twimg.com/media/EUCAI2BXQAAIBW-.jpg)
Because animated GIFs tend to be huge, I use "video GIFs", similar to social media platforms. I created a component for this, and allowed it to support both `light` and `dark` variants, to swap out the src depending on the user's color theme. ![MDX code:<br />
<br />
<VideoGif<br />
src={calendarLightFinal}<br />
darkSrc={calendarDarkFinal}<br />
caption=]()
/>" src="/images/1px.png" data-src="https://pbs.twimg.com/media/EUCBKYFXQAAohwz.jpg">
/>" src="/images/1px.png" data-src="https://pbs.twimg.com/media/EUCBKYFXQAAohwz.jpg">
The examples I'm showing are JSX-heavy, which might give you the wrong idea. For the most part, my blog posts look like any other Markdown doc.
It's just that when I need something custom, I can pop it in without any fuss =D
It's just that when I need something custom, I can pop it in without any fuss =D
Having this technology grants power I wouldn't otherwise have. It's not just about a good developer experience, it's about being to deliver next-level user experiences 😌
Blog posts referenced above:
- joshwcomeau.com/performance/em…
- joshwcomeau.com/react/rainbow-…
- joshwcomeau.com/react/persisti…
Blog posts referenced above:
- joshwcomeau.com/performance/em…
- joshwcomeau.com/react/rainbow-…
- joshwcomeau.com/react/persisti…
Important addendum: MDX is a wonderful tool for developer blogs, but it sucks for non-developers. If you're thinking of using it for a site in which non-devs may wish to contribute, please consider an alternative!
I gave a talk about this:
I gave a talk about this:
And yeah I didn't mean to say things "weren't possible" with a CMS, you can do a whole lot with a CMS. I give some examples in that talk!
Shouldn't tweet while sleep deprived 😅
Shouldn't tweet while sleep deprived 😅
