blog: add jsparty + gatsby post (#22024)

* blog: add jsparty + gatsby post

* feat: add a scriptloader commponent; update blog post

* feat: add scriptloader to global mdx shortcodes

Note: this was the only way I could get this working, I wanted to
import, but was getting weird errors with "hooks warnings."

* Add comma for clarity

Co-authored-by: gatsbybot <mathews.kyle+gatsbybot@gmail.com>
Co-authored-by: Hashim Warren <hashimwarren@gmail.com>

docs/blog/2020-03-09-gatsby-and-jsparty-podcast/index.md

@@ -0,0 +1,39 @@
+---
+title: "Gatsby + JS Party = 💜"
+date: 2020-03-09
+author: "Dustin Schau"
+image: "images/jsparty.png"
+imageTitle: JS Party + Gatsby Banner
+excerpt: "I recently had the pleasure of joining the JS Party podcast to talk about all things Gatsby. Check it out!"
+tags:
+  - podcast
+  - cloud
+---
+
+Recently I had the pleasure of joining the [JSParty][jsparty] podcast to discuss _all_ things Gatsby. Starting with the classic question of "What is Gatsby?", progressing to the value of rehydration, future deliverables of the open-source product, [Gatsby Cloud][cloud], and everything in between! Quite simply, all things Gatsby with the JS Party crew!
+
+Check out the below podcast for more detail on why Gatsby, why Gatsby Cloud, and our future plans for Gatsby, the product.
+
+## 🔉JS Party Podcast 🔉
+
+<ScriptLoader src="//cdn.changelog.com/embed.js">
+  <React.Fragment>
+    <audio
+      data-theme="day"
+      data-src="https://changelog.com/jsparty/117/embed"
+      src="https://cdn.changelog.com/uploads/jsparty/117/js-party-117.mp3"
+      preload="none"
+      className="changelog-episode"
+      controls
+    ></audio>
+    <p>
+      <a href="https://changelog.com/jsparty/117">
+        JS Party 117: Catching up with Gatsby
+      </a>{" "}
+      – Listen on <a href="https://changelog.com/">Changelog.com</a>
+    </p>
+  </React.Fragment>
+</ScriptLoader>
+
+[jsparty]: https://changelog.com/jsparty
+[cloud]: https://gatsbyjs.com/cloud/

docs/blog/author.yaml

@@ -3,7 +3,7 @@
   avatar: avatars/kyle-mathews.jpeg
   twitter: "@kylemathews"
 - id: Dustin Schau
-  bio: Software Engineer @ GatsbyJS. Likes all things JavaScript, and travel. Doesn't totally suck 👋
+  bio: Head of Product @ GatsbyJS. Likes all things JavaScript, and travel. Doesn't totally suck 👋
   avatar: avatars/dustin-schau.png
   twitter: "@schaudustin"
 - id: Kostas Bariotis

www/package.json

@@ -81,9 +81,9 @@
     "qs": "^6.9.1",
     "query-string": "^6.9.0",
     "range": "^0.0.3",
-    "react": "^16.12.0",
+    "react": "^16.13.0",
     "react-copy-to-clipboard": "^5.0.2",
-    "react-dom": "^16.12.0",
+    "react-dom": "^16.13.0",
     "react-helmet": "^5.2.1",
     "react-highcharts": "^16.1.0",
     "react-icons": "^3.9.0",

www/src/components/script-loader.js

@@ -0,0 +1,25 @@
+import React, { useEffect, useRef } from 'react'
+
+function ScriptLoader({ async = true, children, src }) {
+  const ref = useRef(null)
+  /*
+   * On initial render, add the script tag
+   * as a child of the wrapper div
+   */
+  useEffect(() => {
+    if (ref.current.lastChild && ref.current.lastChild.getAttribute('src') === src) {
+      return
+    }
+    const script = document.createElement('script')
+    script.setAttribute('async', async)
+    script.setAttribute('src', src)
+
+    ref.current.appendChild(script)
+  }, [])
+
+  return (
+    <div ref={ref}>{children}</div>
+  )
+}
+
+export default ScriptLoader

www/src/gatsby-plugin-theme-ui/components.js

@@ -15,6 +15,7 @@ import VisuallyHidden from "../components/visually-hidden"
 import Events from "../components/events/events"
 import StubList from "../components/stub-list"
 import LangList from "../components/lang-list"
+import ScriptLoader from "../components/script-loader"
 
 export default {
   GuideList,
@@ -30,6 +31,7 @@ export default {
   Events,
   StubList,
   LangList,
+  ScriptLoader,
   a: MdxLink,
   pre: ({ children }) => <CodeBlock>{children}</CodeBlock>,
 }