diff --git a/gatsby-browser.js b/gatsby-browser.js index abab293..b0eceef 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -1,5 +1,33 @@ /*global twttr instgrm*/ +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 EMBED_ELEMENT = { + Twitter: ".twitter-tweet", + Instagram: "blockquote.instagram-media", + Flickr: '[data-flickr-embed="true"]', + Reddit: "blockquote.reddit-card" +}; + +const addScript = (d, src, id, callback) => { + const fjs = d.getElementsByTagName("script")[0]; + if (d.getElementById(id)) { + callback(); + return; + } + const js = d.createElement("script"); + js.id = id; + js.src = src; + js.onload = callback; + fjs.parentNode.insertBefore(js, fjs); + return js; +}; + const loadTwitter = () => { if ( typeof twttr !== `undefined` && @@ -20,9 +48,26 @@ const processInstagram = () => { } }; +const load = (key, callback) => { + if (document.querySelector(EMBED_ELEMENT[key])) + addScript(document, SCRIPTS[key], `${key}-oembed`, callback); +}; + +const onIdle = callback => { + if (requestIdleCallback) { + requestIdleCallback(() => requestAnimationFrame(callback)); + } else { + setTimeout(callback, 2000); + } +}; + const initScripts = () => { - loadTwitter(); - processInstagram(); + onIdle(() => { + load("Twitter", loadTwitter); + load("Instagram", processInstagram); + load("Reddit"); + load("Flickr"); + }); }; exports.onInitialClientRender = initScripts; diff --git a/gatsby-ssr.js b/gatsby-ssr.js deleted file mode 100644 index e79e49a..0000000 --- a/gatsby-ssr.js +++ /dev/null @@ -1,29 +0,0 @@ -const React = require("react"); -const { amendOptions, filterProviderKeys } = require("./utils"); - -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 }, options) => { - options = amendOptions(options); - - const scriptKeys = filterProviderKeys( - Object.keys(SCRIPTS), - options.providers - ); - - const scripts = scriptKeys.map(key => createScriptTag(key, SCRIPTS[key])); - setPostBodyComponents(scripts); -}; diff --git a/package-lock.json b/package-lock.json index 5979ddf..300b6b5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@raae/gatsby-remark-oembed", - "version": "0.1.1", + "version": "0.1.3", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 3316f04..90e90a0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@raae/gatsby-remark-oembed", - "version": "0.1.1", + "version": "0.1.3", "description": "> A GatsbyJS Plugin that transforms oembed links into its corresponding embed code.", "keywords": [ "gatsby",