blog.petitviolet.net

oEmbed expansion in Gatsby

2020-03-06

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 so far. It needs more configurations in addition to How to use to apply it onto hatenablog entries.

The configuration 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: