Testing MDX

Moving to the new hotness!!

I’ve now moved this blog over to Gatsby MDX. You can see all the changes on my repo here.

From the pull I’m hoping you can glean that the majority of the work is in replacing gatsby-transformer-remark with gatsby-mdx, there are some additional files added, that pretty nifty Code.js component from LekoArts minimal starter blog, and the wrap-root-element.js module for (I think) the MDX rendering of the code.

Files changed:

• gatsby-browser.js
• gatsby-config.js
• gatsby-node.js
• gatsby-ssr.js
• src/pages/index.js
• src/templates/blogPostTemplate.js

Files added:

• src/components/Code.js
• wrap-root-element.js

Shout out to LekoArts, HagNerd and Chris Biscardi for their example repositories:

• gatsby-starter-minimal-blog
• gatsby-starter-blog-mdx
• christopherbiscardi.github.com

Things I still haven’t figured out

Code blocks

Code blocks are pretty, this is a js block with the prism-react-renderer/themes/nightOwl theme:

const onClick = () => {
  alert('clicked')
}
render(<button onClick={onClick}>Click Me!</button>)

And here is a js react-live block, try editing the code:

const onClick = () => {
  alert('clicked')
}
render(<button onClick={onClick}>Click Me!</button>)

Image for prosperity 👍

Mdx is a bit slow

Sometimes renders don’t update

Not working yet

• Autolink headers
• Embed tweets
• Embed videos