oEmbed expansion in Gatsby

oEmbed

oEmbed is a format for allowing an embedded representation of a URL on third party sites. The simple API allows a website to display embedded content (such as photos or videos) when a user posts a link to that resource, without having to parse the resource directly.

How to use oEmbed in Gatsby

raae/gatsby-remark-oembed is a nice plugin for expanding urls as card components.
Accoding to its README, many sites are supported.

So far these providers are confirmed to be working: CodePen, Flickr, Instagram, Reddit, Twitch, Twitter, Vimeo, YouTube, SoundCloud.

However, some sites, for example, hatenablog is not supported for the time being. It needs additional configurations in addition to How to use to apply it onto hatenablog entries or whatever you want.

The configuration for hatenablog looks like:

{
    resolve: `@raae/gatsby-remark-oembed`,
    options: {
        usePrefix: false,
        providers: {
        settings: {
            hatenablog: {
                endpoints: [
                    {
                        schemes: ["https://*.hatenablog.com/*"],
                        url: "https://hatenablog.com/oembed",
                    },
                ],
            },
        },
    }
},

Then, it's able to show expanded blog card like: