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
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
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
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.
To achieve this i've used
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.