gatsby-remark-oembed

by @raae

It's my first x 3

intro - what - why - journey - how - future plans

@raae

What

Why

Journey

How

Future plans

intro - what - why - journey - how - future plans

@raae

What

intro - what - why - journey - how - future plans

@raae

It embeds content

intro - what - why - journey - how - future plans

@raae

It embeds content

intro - what - why - journey - how - future plans

@raae

It embeds content

intro - what - why - journey - how - future plans

@raae

The oEmbed protocol

Learn more at oembed.com

intro - what - why - journey - how - future plans

@raae

It's a subplugin

intro - what - why - journey - how - future plans

    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 590
            }
          },
          {
            resolve: `@raae/gatsby-remark-oembed`
          },
          {
            resolve: `gatsby-remark-responsive-iframe`,
            options: {
              wrapperStyle: `margin-bottom: 1.0725rem`
            }
          }
        ]
      }
    }

@raae

Without gatsby-remark-oembed

intro - what - why - journey - how - future plans

@raae

With gatsby-remark-oembed

intro - what - why - journey - how - future plans

@raae

Why

intro - what - why - journey - how - future plans

@raae

WordPress Editor

intro - what - why - journey - how - future plans

@raae

Sample plugins

intro - what - why - journey - how - future plans

gatsby-remark-embed-video

gatsby-remark-embed-youtube

gatsby-remark-twitter

gatsby-remark-embed-spotify

gatsby-remark-embed-codesandbox

@raae

Journey

intro - what - why - journey - how - future plans

@raae

BUG

 

intro - what - why - journey - how - future plans

@raae

Thanks @rayriffy

intro - what - why - journey - how - future plans

@raae

Thanks @rayriffy

intro - what - why - journey - how - future plans

@raae

Hired to do plugin contract work!

intro - what - why - journey - how - future plans

@raae

How

intro - what - why - journey - how - future plans

@raae

1.

Fetch the list of oembed providers

 

2.

For every markdown file look for oEmbed URLs, then for each URL send a request to the correct provider and swap it out with the HTML returned by the provider

 

3.

Do magic to get Twitter, Instagram, Flickr and Reddit to work

intro - what - why - journey - how - future plans

Sudo code

@raae

Step 1


// gatsby-node.js

exports.onPreBootstrap = async ({ cache }) => {

  const providers = await fetchOembedProviders();
  return await cache.set("remark-oembed-providers", providers);

};

intro - what - why - journey - how - future plans

@raae

Step 2


// index.js

module.exports = async ({ markdownAST, cache }) => {

    const providers = await cache.get("remark-oembed-providers");
    const nodes = findPossibleOembedUrlNodes(markdownAST);

    
    await Promise.all(
        nodes.map(node => processNode(node, providers))
    );
};

const processNode = async (node, providers) => {

    const endpoint = getProviderEndpointForUrl(node.url, providers);
    
    const oembedResponse = await fetchOembed(endpoint);
    return tranformsUrlNodeToOembedNode(node, oembedResponse);
};

intro - what - why - journey - how - future plans

@raae

Step 3 - Part 1


// gatsby-ssr.js

const SCRIPTS = {
  Twitter: "https://platform.twitter.com/widgets.js",
  Instagram: "https://www.instagram.com/embed.js",
  Flickr: "https://embedr.flickr.com/assets/client-code.js",
  Reddit: "https://embed.redditmedia.com/widgets/platform.js"
};

const createScriptTag = (key, scriptSrc) => {
  return React.createElement(
    "script",
    { src: scriptSrc, key: `gatsby-plugin-oembed-${key.toLowerCase()}` },
    null
  );
};

exports.onRenderBody = ({ setPostBodyComponents }) => {

  const scripts = Object.keys(SCRIPTS).map(key => createScriptTag(key, SCRIPTS[key]));
  setPostBodyComponents(scripts);
};

intro - what - why - journey - how - future plans

@raae

Step 3 - Part 2


// gatsby-browser.js

const loadTwitter = () => {
  twttr.widgets.load(document.getElementById("___gatsby"));
};

const processInstagram = () => {
  instgrm.Embeds.process();
};

exports.onRouteUpdate = () => {
  loadTwitter();
  processInstagram();
};

intro - what - why - journey - how - future plans

@raae

Packaging

intro - what - why - journey - how - future plans

Dev

Git repo directly as a local plugin

 

Test

Install a tag or branch directly from Github, not NPM

 

Prod

npm publish

@raae

Future plans

intro - what - why - journey - how - future plans

@raae

gatsby-mdx support

intro - what - why - journey - how - future plans

@raae

#CodeNewbies

intro - what - why - journey - how - future plans

@raae

Make more plugins

Both open source and as a contractor

intro - what - why - journey - how - future plans

@raae

Lets be interwebz friends

@raae on Twitter and Github

@raae.codes on Instagram

gatsby-remark-oembed

By Benedicte Raae

Made with Slides.com

gatsby-remark-oembed

  • 371

More from Benedicte Raae