By Paul Scanlon

gatsby-mdx-embed

Letā€™s back track for just a secondā€¦ What is MDX?

To quote the creators;

MDX is an authorable format that lets you seamlessly use JSX in your markdown documents. You can import components, like interactive charts or notifications, and export metadata. This makes writing long-form content with components a blast.

To put that into context you can import and use a React component in this post like this šŸ‘‡

import { WordCountChart } from '../../../components/word-count-chart';

<WordCountChart title='Average word count' dimension='words' config={{ year: 0, color: 'primary' }} />;

The one snag, and itā€™s a tiny drawback is that to use React components in MDX you have to import them. This is fine for one off components but for common components adding an import to every post is a hassle. Fortunately using the MDXProvider you can provide your blog with a kind of ā€œglobalā€ way to handle components without needing to import them every time you want to use themā€¦ which is very handy indeed. šŸ˜Š

Setting up a ā€œglobalā€ method is fine if youā€™re adding your own components but itā€™s a lot more work to do this if you want to ā€œembedā€ media content from providers like Twitter, YouTube and Instagram

Gatsby MDX Embed

Luckily for you iā€™ve created gatsby-mdx-embed

gatsby-mdx-embed works by wrapping the root element of your site or blog with a custom MdxProvider which makes it possible for embed codes like this šŸ‘‡

<Tweet tweetId='PaulieScanlon/status/1232993668690259968' />

To be automatically rendered. Like this šŸ‘‡

A lof of media providers e.g YouTube make embed-able iframe embed codes which iā€™ve turned in to custom components specifically designed to work with Gatsby and MDX.

These media provider embed codes usually require you to add some kind of JavaScript to your page which can be really tricky to set up, but with this plugin all you need to do is install itā€¦

npm install @pauliescanlon/gatsby-mdx-embed --save

ā€¦ and then add it to gatsby-config.js and youā€™re good to go.

// gatsby.config.js

module.exports = {
  ...
  plugins: [`@pauliescanlon/gatsby-mdx-embed`]
  ...
}

Thereā€™s more

An extra trick iā€™ve used is to search the DOM for short codes 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 āš”

Thereā€™s currently 22 components to choose from and more are on the way so head on over to gatsby-mdx-embed and if you can please do give it a star ā­ on GitHub

Screenshot of MDX Embed

This plugin was inspired by gatsby-remark-oembed which similarly provides an easy way to embed media from providers like YouTube, Twitter, etc into your blog without import. However this plugin only works with markdown.

Hey!

Leave a reaction and let me know how I'm doing.

  • 0
  • 0
  • 0
  • 0
  • 0
Powered byNeon