queen-raae / gatsby-remark-oembed Goto Github PK

Description

Currently the tests for transformLinkNodesToOembedNode.js are not being picked up. The spec transformLinkNodesToOembedNodes.js needs to be renamed to transformLinkNodesToOembedNode.test.js so it's picked up.

I use this plugin to embedd some tweets on my page.
This worked pretty neatly so far, until this morning I noticed that two had loaded the content but not the correct Twitter styling.

There was nothing unusual in the network tab and no errors in the console.

I have attached two screenshots and their respective location in the my site.
Maybe there is something you can spot?

https://www.felipesere.com/blog/2017-01-25-fast-feedback-with-rspec-and-rerun

and the failing ones:

https://www.felipesere.com/advent/?day=1

Hi there! I'm trying to use this plugin with Gatsby and MDX, but I can't seem to make it work. I've got it listed in the gatsby-mdx gatsbyRemarkPlugins config, which has worked for other Remark plugins, but can't seem to find twitter links in my page. I'm not sure if where the problem is, but I don't see any errors.

Here is my config for gatsby-mdx:

	{
      resolve: `gatsby-mdx`,
      options: {
        defaultLayouts: {
          posts: require.resolve('./src/templates/blog-post.js'),
          default: require.resolve('./src/components/layout.js'),
        },
        extensions: ['.mdx', '.md'],
        gatsbyRemarkPlugins: [
          {
            resolve: '@raae/gatsby-remark-oembed',
            options: {
              providers: {
                settings: {
                  Twitter: {
                    theme: 'dark', // Use the Twitter dark theme
                  },
                },
              },
            },
          },
          {
            resolve: `gatsby-remark-copy-linked-files`,
          },
          {
            resolve: `gatsby-remark-relative-images`,
          },
          {
            resolve: `gatsby-remark-lazy-load`,
          },
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 768,
            },
          },
          {
            resolve: 'gatsby-remark-prismjs',
            options: {
              classPrefix: 'language-',
              inlineCodeMarker: {
                tsx: 'tsx',
              },
              aliases: {},
            },
          },
        ],
      },
    }

and here is the output from this plugin:

info gatsby-remark-oembed: Successfull embeds: 0 | Links with no matching provider: 6 | Path: /personal-site-hosting/
info gatsby-remark-oembed: Successfull embeds: 0 | Links with no matching provider: 1 | Path: /linked-lists-react/
info gatsby-remark-oembed: Successfull embeds: 0 | Links with no matching provider: 10 | Path: /accessibility-rock-star/
info gatsby-remark-oembed: Successfull embeds: 0 | Links with no matching provider: 2 | Path: /npm-card/

The post looks like this:

I recently saw this awesome post from [bnb](https://dev.to/bnb) on Twitter:

https://twitter.com/bitandbang/status/1075473070368919552

The community response has been awesome and I quickly knew I wanted to make my own:

https://twitter.com/callmewuz/status/1075789700898664450

Thanks so much for making this plugin! I hope I can get it working 😄

I would love to get some help testing 0.1.0.

You can now configure an array of prefixes. So if you already use usePrefix: true, test with usePrefix: ["oembed", "test"] and change some of the prefixed links to `test: http.....`.

cc: @osj2507, @florinpop17, @rayriffy, @amykapernick, @mjm @nickytonline, @testower, @muescha, @yurm04, @victornguyen.

For the next release, I will have set up a yarn workspace with several test sites configured and there will be less need for manual testing.

Install the git tag by using npm install raae/gatsby-remark-oembed#semver:0.1.0

Description

Currently <iframes /> are rendered for embeds, e.g. a YouTube video. Consider lazy loading <iframes />. Although it currently isn't supported in all browsers, the ones that do will receive a performance benefit.

If you're good to go with this feature request, I would like to be assigned to it. Thanks again for such a great plugin for Gatsby @raae! 👏🏻

Additional Resources

• For more information, see https://web.dev/iframe-lazy-loading/ on the Google web.dev portal.

I want to replicate the behaviour of Slack or Twitter where all links are transformed into either embeded content or link previews.

I want to merge some of the logic from gatsby-remark-link-unfurl.

Please let me know what you think.

Hey all contributors @rayriffy, @yurm04, @muescha, @kennethormandy, @nickytonline, @testower, and @olavea.

I have gotten a gift card to the Gatsby swag shop as thanks for being a guest on the webinar yesterday. Would any of you like something?

This plugin is always flooding my console all the time. Is there any options to disable them?

Is it possible to add styles like: width and height to a Codepen Embed?

Later the demo site can be used for regression tests in some form.

When running gastby-remark-oembed-mdx in local host, I get the following error, and only on the -mdx and not -md:
index.js:2177 Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>. in div (created by MDXCreateElement) in MDXCreateElement (created by MDXContent) in p (created by MDXCreateElement) in MDXCreateElement (created by MDXContent) in wrapper (created by MDXCreateElement) in MDXCreateElement (created by MDXContent) in MDXContent (created by MDXRenderer) in MDXRenderer (at pages/index.js:20) in article (at pages/index.js:14) in div (at PageLayout.js:10) in PageLayout (at pages/index.js:11) in BlogMdxIndex (created by HotExportedBlogMdxIndex) in AppContainer (created by HotExportedBlogMdxIndex) in HotExportedBlogMdxIndex (created by PageRenderer) in PageRenderer (at json-store.js:93) in JSONStore (at root.js:51) in RouteHandler (at root.js:73) in div (created by FocusHandlerImpl) in FocusHandlerImpl (created by Context.Consumer) in FocusHandler (created by RouterImpl) in RouterImpl (created by Context.Consumer) in Location (created by Context.Consumer) in Router (created by EnsureResources) in ScrollContext (at root.js:64) in RouteUpdates (at root.js:63) in EnsureResources (at root.js:61) in LocationHandler (at root.js:119) in LocationProvider (created by Context.Consumer) in Location (at root.js:118) in Root (at root.js:126) in MDXProvider (at wrap-root-element.js:65) in MDXScopeProvider (at wrap-root-element.js:64) in Unknown in Unknown (at wrap-root-element.js:72) in _default (at app.js:67) __stack_frame_overlay_proxy_console__ @ index.js:2177 index.js:2177 Warning: React does not recognize the allowTransparencyprop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercaseallowtransparencyinstead. If you accidentally passed it from a parent component, remove it from the DOM element. in iframe (created by MDXCreateElement) in MDXCreateElement (created by MDXContent) in p (created by MDXCreateElement) in MDXCreateElement (created by MDXContent) in wrapper (created by MDXCreateElement) in MDXCreateElement (created by MDXContent) in MDXContent (created by MDXRenderer) in MDXRenderer (at pages/index.js:20) in article (at pages/index.js:14) in div (at PageLayout.js:10) in PageLayout (at pages/index.js:11) in BlogMdxIndex (created by HotExportedBlogMdxIndex) in AppContainer (created by HotExportedBlogMdxIndex) in HotExportedBlogMdxIndex (created by PageRenderer) in PageRenderer (at json-store.js:93) in JSONStore (at root.js:51) in RouteHandler (at root.js:73) in div (created by FocusHandlerImpl) in FocusHandlerImpl (created by Context.Consumer) in FocusHandler (created by RouterImpl) in RouterImpl (created by Context.Consumer) in Location (created by Context.Consumer) in Router (created by EnsureResources) in ScrollContext (at root.js:64) in RouteUpdates (at root.js:63) in EnsureResources (at root.js:61) in LocationHandler (at root.js:119) in LocationProvider (created by Context.Consumer) in Location (at root.js:118) in Root (at root.js:126) in MDXProvider (at wrap-root-element.js:65) in MDXScopeProvider (at wrap-root-element.js:64) in Unknown in Unknown (at wrap-root-element.js:72) in _default (at app.js:67) __stack_frame_overlay_proxy_console__ @ index.js:2177 index.js:2177 Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>. in div (created by MDXCreateElement) in MDXCreateElement (created by MDXContent) in div (created by MDXCreateElement) in MDXCreateElement (created by MDXContent) in a (created by MDXCreateElement) in MDXCreateElement (created by MDXContent) in div (created by MDXCreateElement) in MDXCreateElement (created by MDXContent) in blockquote (created by MDXCreateElement) in MDXCreateElement (created by MDXContent) in undefined (created by MDXCreateElement) in MDXCreateElement (created by MDXContent) in p (created by MDXCreateElement) in MDXCreateElement (created by MDXContent) in wrapper (created by MDXCreateElement) in MDXCreateElement (created by MDXContent) in MDXContent (created by MDXRenderer) in MDXRenderer (at pages/index.js:20) in article (at pages/index.js:14) in div (at PageLayout.js:10) in PageLayout (at pages/index.js:11) in BlogMdxIndex (created by HotExportedBlogMdxIndex) in AppContainer (created by HotExportedBlogMdxIndex) in HotExportedBlogMdxIndex (created by PageRenderer) in PageRenderer (at json-store.js:93) in JSONStore (at root.js:51) in RouteHandler (at root.js:73) in div (created by FocusHandlerImpl) in FocusHandlerImpl (created by Context.Consumer) in FocusHandler (created by RouterImpl) in RouterImpl (created by Context.Consumer) in Location (created by Context.Consumer) in Router (created by EnsureResources) in ScrollContext (at root.js:64) in RouteUpdates (at root.js:63) in EnsureResources (at root.js:61) in LocationHandler (at root.js:119) in LocationProvider (created by Context.Consumer) in Location (at root.js:118) in Root (at root.js:126) in MDXProvider (at wrap-root-element.js:65) in MDXScopeProvider (at wrap-root-element.js:64) in Unknown in Unknown (at wrap-root-element.js:72) in _default (at app.js:67) __stack_frame_overlay_proxy_console__ @ index.js:2177 index.js:2177 Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>. in div (created by MDXCreateElement) in MDXCreateElement (created by MDXContent) in div (created by MDXCreateElement) in MDXCreateElement (created by MDXContent) in div (created by MDXCreateElement) in MDXCreateElement (created by MDXContent) in a (created by MDXCreateElement) in MDXCreateElement (created by MDXContent) in div (created by MDXCreateElement) in MDXCreateElement (created by MDXContent) in blockquote (created by MDXCreateElement) in MDXCreateElement (created by MDXContent) in undefined (created by MDXCreateElement) in MDXCreateElement (created by MDXContent) in p (created by MDXCreateElement) in MDXCreateElement (created by MDXContent) in wrapper (created by MDXCreateElement) in MDXCreateElement (created by MDXContent) in MDXContent (created by MDXRenderer) in MDXRenderer (at pages/index.js:20) in article (at pages/index.js:14) in div (at PageLayout.js:10) in PageLayout (at pages/index.js:11) in BlogMdxIndex (created by HotExportedBlogMdxIndex) in AppContainer (created by HotExportedBlogMdxIndex) in HotExportedBlogMdxIndex (created by PageRenderer) in PageRenderer (at json-store.js:93) in JSONStore (at root.js:51) in RouteHandler (at root.js:73) in div (created by FocusHandlerImpl) in FocusHandlerImpl (created by Context.Consumer) in FocusHandler (created by RouterImpl) in RouterImpl (created by Context.Consumer) in Location (created by Context.Consumer) in Router (created by EnsureResources) in ScrollContext (at root.js:64) in RouteUpdates (at root.js:63) in EnsureResources (at root.js:61) in LocationHandler (at root.js:119) in LocationProvider (created by Context.Consumer) in Location (at root.js:118) in Root (at root.js:126) in MDXProvider (at wrap-root-element.js:65) in MDXScopeProvider (at wrap-root-element.js:64) in Unknown in Unknown (at wrap-root-element.js:72) in _default (at app.js:67) __stack_frame_overlay_proxy_console__ @ index.js:2177 index.js:2177 Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>. in div (created by MDXCreateElement) in MDXCreateElement (created by MDXContent) in a (created by MDXCreateElement) in MDXCreateElement (created by MDXContent) in div (created by MDXCreateElement) in MDXCreateElement (created by MDXContent) in blockquote (created by MDXCreateElement) in MDXCreateElement (created by MDXContent) in undefined (created by MDXCreateElement) in MDXCreateElement (created by MDXContent) in p (created by MDXCreateElement) in MDXCreateElement (created by MDXContent) in wrapper (created by MDXCreateElement) in MDXCreateElement (created by MDXContent) in MDXContent (created by MDXRenderer) in MDXRenderer (at pages/index.js:20) in article (at pages/index.js:14) in div (at PageLayout.js:10) in PageLayout (at pages/index.js:11) in BlogMdxIndex (created by HotExportedBlogMdxIndex) in AppContainer (created by HotExportedBlogMdxIndex) in HotExportedBlogMdxIndex (created by PageRenderer) in PageRenderer (at json-store.js:93) in JSONStore (at root.js:51) in RouteHandler (at root.js:73) in div (created by FocusHandlerImpl) in FocusHandlerImpl (created by Context.Consumer) in FocusHandler (created by RouterImpl) in RouterImpl (created by Context.Consumer) in Location (created by Context.Consumer) in Router (created by EnsureResources) in ScrollContext (at root.js:64) in RouteUpdates (at root.js:63) in EnsureResources (at root.js:61) in LocationHandler (at root.js:119) in LocationProvider (created by Context.Consumer) in Location (at root.js:118) in Root (at root.js:126) in MDXProvider (at wrap-root-element.js:65) in MDXScopeProvider (at wrap-root-element.js:64) in Unknown in Unknown (at wrap-root-element.js:72) in _default (at app.js:67) __stack_frame_overlay_proxy_console__ @ index.js:2177 index.js:2177 Warning: Invalid DOM propertyxmlnsXLink. Did you mean xmlnsXlink`?
in svg (created by MDXCreateElement)
in MDXCreateElement (created by MDXContent)
in div (created by MDXCreateElement)
in MDXCreateElement (created by MDXContent)
in a (created by MDXCreateElement)
in MDXCreateElement (created by MDXContent)
in div (created by MDXCreateElement)
in MDXCreateElement (created by MDXContent)
in blockquote (created by MDXCreateElement)
in MDXCreateElement (created by MDXContent)
in undefined (created by MDXCreateElement)
in MDXCreateElement (created by MDXContent)
in p (created by MDXCreateElement)
in MDXCreateElement (created by MDXContent)
in wrapper (created by MDXCreateElement)
in MDXCreateElement (created by MDXContent)
in MDXContent (created by MDXRenderer)
in MDXRenderer (at pages/index.js:20)
in article (at pages/index.js:14)
in div (at PageLayout.js:10)
in PageLayout (at pages/index.js:11)
in BlogMdxIndex (created by HotExportedBlogMdxIndex)
in AppContainer (created by HotExportedBlogMdxIndex)
in HotExportedBlogMdxIndex (created by PageRenderer)
in PageRenderer (at json-store.js:93)
in JSONStore (at root.js:51)
in RouteHandler (at root.js:73)
in div (created by FocusHandlerImpl)
in FocusHandlerImpl (created by Context.Consumer)
in FocusHandler (created by RouterImpl)
in RouterImpl (created by Context.Consumer)
in Location (created by Context.Consumer)
in Router (created by EnsureResources)
in ScrollContext (at root.js:64)
in RouteUpdates (at root.js:63)
in EnsureResources (at root.js:61)
in LocationHandler (at root.js:119)
in LocationProvider (created by Context.Consumer)
in Location (at root.js:118)
in Root (at root.js:126)
in MDXProvider (at wrap-root-element.js:65)
in MDXScopeProvider (at wrap-root-element.js:64)
in Unknown
in Unknown (at wrap-root-element.js:72)
in _default (at app.js:67)
stack_frame_overlay_proxy_console @ index.js:2177
index.js:2177 Warning: validateDOMNesting(...):

cannot appear as a descendant of

.
in p (created by MDXCreateElement)
in MDXCreateElement (created by MDXContent)
in div (created by MDXCreateElement)
in MDXCreateElement (created by MDXContent)
in blockquote (created by MDXCreateElement)
in MDXCreateElement (created by MDXContent)
in undefined (created by MDXCreateElement)
in MDXCreateElement (created by MDXContent)
in p (created by MDXCreateElement)
in MDXCreateElement (created by MDXContent)
in wrapper (created by MDXCreateElement)
in MDXCreateElement (created by MDXContent)
in MDXContent (created by MDXRenderer)
in MDXRenderer (at pages/index.js:20)
in article (at pages/index.js:14)
in div (at PageLayout.js:10)
in PageLayout (at pages/index.js:11)
in BlogMdxIndex (created by HotExportedBlogMdxIndex)
in AppContainer (created by HotExportedBlogMdxIndex)
in HotExportedBlogMdxIndex (created by PageRenderer)
in PageRenderer (at json-store.js:93)
in JSONStore (at root.js:51)
in RouteHandler (at root.js:73)
in div (created by FocusHandlerImpl)
in FocusHandlerImpl (created by Context.Consumer)
in FocusHandler (created by RouterImpl)
in RouterImpl (created by Context.Consumer)
in Location (created by Context.Consumer)
in Router (created by EnsureResources)
in ScrollContext (at root.js:64)
in RouteUpdates (at root.js:63)
in EnsureResources (at root.js:61)
in LocationHandler (at root.js:119)
in LocationProvider (created by Context.Consumer)
in Location (at root.js:118)
in Root (at root.js:126)
in MDXProvider (at wrap-root-element.js:65)
in MDXScopeProvider (at wrap-root-element.js:64)
in Unknown
in Unknown (at wrap-root-element.js:72)
in _default (at app.js:67)
stack_frame_overlay_proxy_console @ index.js:2177
index.js:2177 Warning: validateDOMNesting(...):

What options do we need?

My thoughts:

• white and/or blacklist of providers
• indicate the use of plain link: https://www.youtube.com/embed/2Xc9gXyf2G4 or this style oembed: https://www.youtube.com/embed/2Xc9gXyf2G4 or both

Hi Raae,

how can I center and embedded an Instagram post, it is always on the left and would love to center it.

Cheers 🍻
Pablo

It would be great if there was some way to track if the example site changes.

For some PR's it should of course change, but for most, it should not.

Try catch in process node so errors are logged, but do not stop processing of remaining nodes.
Try catch in the main function to catch error getting provider or another type of error.

Is this plugin functioning yet? I definitely want something like this but it's not working for me

Markup

## Instagram

https://www.instagram.com/p/BlhQaFtlvTq

https://www.youtube.com/watch?v=b2H7fWhQcdE

Gatsby Config

     {
            resolve: 'gatsby-transformer-remark',
            plugins: [
                {
                    resolve: `gatsby-remark-oembed`
                }
            ]
        },

Does anything need installing for the plugin?

My repo is https://github.com/amykapernick/amygoestoperth.git, current dev branch is netlify-gatsby

Instagram is switching to a new API requiring registration and apparently they already stopped working. Building fails with

Error: Request failed with status code 400

No need to load the Twitter script if Twitter is excluded.

And also build the mdx example at a different address #124

After @iamcal merged in all my oembed schema changes no need for all these ammends.

The option should be a choice between info, warn, error.
The option should indicate the lowest level one would like to log to the console.

We are not yet using warn, but its a gatsby reporter possibility.

Should probably be done after moving to yarn #76

Move it to @raae so it becomes easier discoverable when I get raae.codes going.

Some omebed endpoint response html include script tags (Twitter, Flickr, Instagram). These are not executed as React uses innerHtml and script execution is stopped.

@testower is working on an interesting solution using jsdom. In that case we will be able to get prerendered results wich is nice. Because these oembeds with script tags make the content jump arround.

Another solution is to strip these tags and then somehow run them on every onComponentMount and onComponentUpdate. Or on every page transisition, but that is broken in v1 (see gatsbyjs/gatsby#1625).

Especially the too long helper.js file and helper.test.js file. It could become several util files under utils/.

Simply replace {format} with "json".

    "@raae/gatsby-remark-oembed": "^0.0.7",
    "gatsby": "^2.8.3",
    "gatsby-transformer-remark": "^2.3.12",

Have more installed, happy to share

error gatsby-remark-oembed: Error processing links


  TypeError: Cannot read property 'replace' of undefined

  - index.js:10 module.exports
    [starter-gatsby-blog]/[gatsby-source-filesystem]/[slash]/index.js:10:13

  - create-file-path.js:39 module.exports
    [starter-gatsby-blog]/[gatsby-source-filesystem]/create-file-path.js:39:61

  - index.js:24 module.exports
    [starter-gatsby-blog]/[@raae]/gatsby-remark-oembed/index.js:24:20

  - next_tick.js:68 process._tickCallback
    internal/process/next_tick.js:68:7

happens with just "@raae/gatsby-remark-oembed" in the plugins of "gatsby-transformer-remark" as well as with the given samples for the configuration.

More detail
https://snyk.io/vuln/SNYK-JS-AXIOS-174505

Analysis

For an example, I want to add this SoundCloud song to the site

https://soundcloud.com/r4yr1ffy/secret-garden-remix

With no configuration, SoundCloud oEmbed will return embed URL with attached visible=true and show_artwork=true property, too.

(I formatted it for easier readability)

<iframe 
  width="100%" 
  height="400" 
  scrolling="no"
  frameborder="no"
  src="https://w.soundcloud.com/player/?visual=true&amp;url=https%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F592369218&amp;show_artwork=true"
></iframe>

Encounter Problem

With following configuration

{
  resolve: `@raae/gatsby-remark-oembed`,
  options: {
    providers: {
      include: ['SoundCloud', 'Instagram', 'Spotify', 'Twitter'],
      settings: {
        SoundCloud: {
          color: '#1976d2',
          show_comments: false,
          visual: false,
          hide_related: true,
          auto_play: false,
          show_user: false,
          show_reposts: false,
          show_teaser: false,
        },
        Instagram: {hidecaption: true},
      },
    },
  },
},

Every configuration is working just fine except for visble property which make SoundCloud embed player to a classic player.

What I got

<iframe
  width="100%"
  height="400"
  scrolling="no"
  frameborder="no"
  src="https://w.soundcloud.com/player/?visual=true&amp;url=https%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F592369218&amp;show_artwork=true&amp;color=%231976d2&amp;show_comments=false&amp;visual=false&amp;hide_related=true&amp;auto_play=false&amp;show_user=false&amp;show_reposts=false&amp;show_teaser=false"
></iframe>

This plugin just simply add configuration to the end of URLs without checking any duplicates parameters

Expectation

<iframe
  width="100%"
  height="400"
  scrolling="no"
  frameborder="no"
  src="https://w.soundcloud.com/player/?visual=false&amp;url=https%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F592369218&amp;show_artwork=true&amp;color=%231976d2&amp;show_comments=false&amp;hide_related=true&amp;auto_play=false&amp;show_user=false&amp;show_reposts=false&amp;show_teaser=false"
></iframe>

Recomendation

Before sending all oEmbed, I reccomended to check existing link parameters first and override them if exists.

I do not have any reports of https://oembed.com/providers.json not responding, but it could be nice to have a local copy to fall back if that happens.

It could be cool if the file was downloaded and added to the project on every npm publish or something automatic like that to keep it as current as possible.

Remove the use of .then() and
use async/await instead on the
fetchOembedProviders and
fetchOembed functions in the helper.js file.

I tried embedding the dailymotion video but it seems the plugin does not work with that provider. Is dailymotion suspported?

Ammend is spelled amend...

For some reason since Codepen was attacked, the embeds aren't working anymore on my blog. I get a Request failed with status code 403 at build time.

Do you think that this is something that can be fixed in this package or maybe is caused by them?

The ombed.com provided list is not complete. We should probably add a way to patch providers ourselves. Most notably YouTube has no schemes.

I have created an issue and commented on an issue in the oembed project.

• iamcal/oembed#300
• iamcal/oembed#100

@adamwiggall made me aware we need to processInstagram and loadTwitter also on onInitalClientLoad.

I would combine processInstagram and loadTwitter in a initScripts function and call that both from both onInitalClientLoad and onRouteUpdate.

The code for this can be found in gatsby-browser.js.

I would love to get some help testing 0.0.7.

It fixes the problem up cluttering up the log, but it's also a major refactor and it would be nice to get confirmation that it is still working for y'all.

cc: @osj2507, @florinpop17, @rayriffy, @amykapernick, @mjm @nickytonline

Install the git tag by using npm install raae/gatsby-remark-oembed#semver:0.0.7

Some endpoints are not rich, should have support for that.

Lets users define their own prefixes like video:.

This would give users more control over their content, and also make it easier to migrate from other plugins were other prefixes have been used.

There are plugins for youtube, twitter etc. specifically. And the users of those will probably have lots of content already using a specific prefix.

In config usePrefix: ["video:", "oembed:"].

This is somewhat related to #40 but also a bit different, but this issue does the same as for issue 40, my console is flooded.

I am getting a lot of "error No endpoint for ..." because I am using links to other sites that are not oembed enabled and shouldn't be, I am not using the prefix (it is easier that way) but it seems that this tries all links even though it should not IMHO.

So I would like to get an error in my console if something is wrong with a link, but not errors for links that aren't supported, but let's say I use an embed link from youtube, then it should fail if that doesn't work.

Other than that, it's a great plugin and I don't need to run multiple different ones to embed from Youtube, Twitter, and Instagram, so very happy.

Indicate the use of plain link: https://www.youtube.com/embed/2Xc9gXyf2G4 or this style oembed: https://www.youtube.com/embed/2Xc9gXyf2G4 or both in options.

First, thanks for creating this plugin. It's a great idea to be able to throw a simple URL into a post and have it turn into a proper embed. WordPress solves this problem nicely already, and it's great to have something similar in Gatsby.

Is the plugin ready for use? I saw something in another thread about it being ready for alpha in a week or two (which was ~4 weeks ago I think). Is it ready for testing now?

I saw the issue around caching in #25. I didn't understand if that issue is a show stopper or not. Did you find a workaround? Anything I could do to help out?

We might want to create more sites in the future with different configurations of the plugin and it would be nice to not have to copy/paste everything.

Also, feel free to make a better design if that motivates you :D

There are providers supporting the oembed protocol not found in the oembed.com provider list. It could be popular ones such as Repl.it, but also small personal project.

For both, it would be nice if one could add providers.

I already support adding schemes through the options as its part of the default options. But I have not advertised it, and it does not support adding new providers yet.

Hi, thanks for this awesome plugin. I noticed the code snippet in the read me is missing your scoped package name. Without it, gatsby can't find your plugin. A little docs PR coming up.

Great catch by @rayriffy, I have written "Successfull" not "Successfully" or "Successful."