The problem

Trying to embed well known services (like CodeSandbox, Twitter or YouTube) into your Gatsby website can be hard, since you have to know how this needs to be done for all of these different services.

This solution

gatsby-remark-embedder tries to solve this problem for you by letting you just copy-paste the link to the sandbox/tweet/video you want to embed on a separate line and replace it with the proper embed-code.

Table of Contents

• Installation
• Usage
• Supported services
  • CodeSandbox
  • Twitter
  • YouTube
• Inspiration
• Issues
  • 🐛 Bugs
  • 💡 Feature Requests
• Contributors
• LICENSE

Installation

This module is distributed via npm which is bundled with node and should be installed as one of your project's dependencies:

npm install --save gatsby-remark-embedder

This library has peerDependencies listings for gatsby.

Usage

// In your gatsby-config.js

plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [`gatsby-remark-embedder`],
    },
  },
];

Supported services

CodeSandbox

Usage

https://codesandbox.io/s/ynn88nx9x?view=split

Result

<iframe
  src="https://codesandbox.io/embed/ynn88nx9x?view=split"
  style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
></iframe>

Twitter

The returned HTML snippet from the Twitter transformer will only be automatically recognized as an Embedded Tweet when Twitter's widget JavaScript is included on the page.
Since the Twitter transformer doesn't include this JavaScript (because we don't want to include it multiple times on a page when having multiple embeds), you have to include it yourself. The recommended way of including it is by using gatsby-plugin-twitter.

Usage

https://twitter.com/MichaelDeBoey93/status/1152991421789548546

Result

<blockquote class="twitter-tweet" data-dnt="true">
  <p lang="en" dir="ltr" class="css-yw8fqx e11rucy10">
    Happy to announce I just published the first gatsby-remark-embedder 🎉🎉🎉
    <br />
    <br />
    This first version is an extract of
    <a href="https://twitter.com/kentcdodds">@kentcdodds</a>' personal website
    remark-embedder plugin, but I'm planning on adding extra services then
    <a href="https://twitter.com/codesandbox">@codesandbox</a>,<a href="https://twitter.com/Twitter">
      @Twitter
    </a>
    &amp; <a href="https://twitter.com/YouTube">@YouTube</a> too.
    <a href="https://t.co/M4PA9aFZdG">https://t.co/M4PA9aFZdG</a>
  </p>
  — Michaël De Boey (@MichaelDeBoey93)
  <a href="https://twitter.com/MichaelDeBoey93/status/1152991421789548546">
    July 21, 2019
  </a>
</blockquote>

YouTube

Usage

https://youtu.be/dQw4w9WgXcQ

Result

<iframe
  width="100%"
  height="315"
  src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ?rel=0"
  frameborder="0"
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>

Inspiration

This whole library was extracted out of Kent C. Dodds' personal website.

The intention is to make this available to be used independently.

Issues

Looking to contribute? Look for the Good First Issue label.

🐛 Bugs

Please file an issue for bugs, missing documentation, or unexpected behavior.

See Bugs

💡 Feature Requests

Please file an issue to suggest new features. Vote on feature requests by adding a 👍. This helps maintainers prioritize what to work on.

See Feature Requests

Contributors

Thanks goes to these people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!

LICENSE

MIT