Fix loading embedded content from Twitter and Instagram when navigating

gatsby-browser.js

@@ -0,0 +1,31 @@
+/* global twttr instgrm */
+
+const loadTwitter = () => {
+  if (
+    typeof twttr !== `undefined` &&
+    twttr.widgets &&
+    typeof twttr.widgets.load === `function`
+  ) {
+    twttr.widgets.load(document.getElementById('___gatsby'))
+  }
+}
+
+const processInstagram = () => {
+    console.log('process')
+  if (
+    typeof instgrm !== `undefined` &&
+    instgrm.Embeds &&
+    typeof instgrm.Embeds.process === `function`
+  ) {
+      console.log('yes')
+    instgrm.Embeds.process()
+  }
+}
+
+const initScripts = () => {
+  loadTwitter()
+  processInstagram()
+}
+
+exports.onInitialClientRender = initScripts
+exports.onRouteUpdate = initScripts

gatsby-ssr.js

@@ -0,0 +1,21 @@
+const React = require('react')
+
+const SCRIPTS = {
+  Twitter: 'https://platform.twitter.com/widgets.js',
+  Instagram: 'https://www.instagram.com/embed.js',
+}
+
+const createScriptTag = (key, scriptSrc) => {
+  return React.createElement(
+    'script',
+    { src: scriptSrc, key: `gatsby-plugin-oembed-${key.toLowerCase()}` },
+    null
+  )
+}
+
+exports.onRenderBody = ({ setPostBodyComponents }, options) => {
+  const scriptKeys = ['Twitter', 'Instagram']
+
+  const scripts = scriptKeys.map(key => createScriptTag(key, SCRIPTS[key]))
+  setPostBodyComponents(scripts)
+}