gatsby-remark-embedder
Gatsby Remark plugin to embed well known services by their URL.
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
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>
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> & <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.
💡 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.
Contributors
Thanks goes to these people (emoji key):
Kent C. Dodds 💻 📖 🤔 🚇 ⚠️ |
Michaël De Boey 🐛 💻 📖 ⚠️ |
This project follows the all-contributors specification. Contributions of any kind welcome!
LICENSE
MIT