gatsby-mdx-embed

6-Jan-2020
  • gatsbyJs
  • gatsby-plugin
  • gatsby-plugin-mdx
1 min read / 369 words

Early Release

This plugin was inspired by gatsby-remark-oembed and similarly provides an easy way to embed media from providers like YouTube, Twitter, etc into your blog without import

demo 🧼

I'd been playing around with remark parsers for a while but it does seem pertinent that given the rise of .mdx which really does live up to the hype that some of these remark plugins might soon become redundant since .mdx handles the parsing so well.

It also exposes some really cool ways to hook into what's being parsed so we can now almost just think of a blog post / markdown the same as we do .jsx

Everything is still there from the markdown writing experience but with added React stuff thrown in on top... it's so sweet!

The plugin eco-system in Gatsby is really cool, there's a load of things that you can just add to your gatsby-config.js that just work!

gatsby-mdx-embed aims to do the same. By adding the plugin to your gatsby-config.js you're good to go.

It works by wrapping the root element of your site / blog with a custom MdxProvider which makes it possible for embed codes e.g <YouTube id='123'/> to work should they be found in your .mdx

Most of the providers e.g YouTube make embed-able iFrame type shortcodes and they were quite easy to add to the plugin, the tricky ones where Twitter, Instagram and Flickr.

These providers require you to add some JavaScript to your page. This is all fine but to keep the plugin as easy to install as possible i didn't want the users to do too much setup.

To achieve this i've used gatsby-ssr.js and gatsby-browser.js these two files are responsible for doing things behind the scenes which is a perfect place for me to add the provider scripts.

There's also an extra trick i've used which is to search the dom for elements that will require the provider scripts and if they aren't found the provider scripts aren't injected. So if you're not using embedded Tweets the twitter provider script won't be injected... keeping your site blazing fast!

I'm still very much in development but an early version has been launched so i'll be keeping an eye on GitHub issues and aim to continue working on this plugin.

Happy embedding!