feat: SSR MathJax and Stripe on routes using them (#37388)

* feat: SSR MathJax and Stripe on routes using them

* refactor: clean up scripts

client/gatsby-ssr.js

@@ -17,28 +17,73 @@ wrapRootElement.propTypes = {
   element: PropTypes.any
 };
 
+// TODO: put these in a common utils file.
+const mathJaxCdn = {
+  address:
+    'https://cdnjs.cloudflare.com/ajax/libs/mathjax/' +
+    '2.7.4/MathJax.js?config=TeX-AMS_HTML',
+  key: 'mathjax',
+  type: 'text/javascript'
+};
+
+const stripeScript = {
+  address: 'https://js.stripe.com/v3/',
+  id: 'stripe-js',
+  key: 'stripe-js',
+  type: 'text/javascript'
+};
+
+const challengeRE = new RegExp('/learn/[^/]+/[^/]+/[^/]+/?$');
+const donateRE = new RegExp('/donate/?$');
+
 export const wrapPageElement = layoutSelector;
 
-export const onRenderBody = ({ setHeadComponents, setPostBodyComponents }) => {
+export const onRenderBody = ({
+  pathname,
+  setHeadComponents,
+  setPostBodyComponents
+}) => {
   setHeadComponents([...headComponents]);
-  setPostBodyComponents(
+  const scripts = [
-    [
+    <script
+      async={true}
+      key='gtag-script'
+      src='https://www.googletagmanager.com/gtag/js?id=AW-795617839'
+    />,
+    <script
+      dangerouslySetInnerHTML={{
+        __html: `
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'AW-795617839');
+      `
+      }}
+      key='gtag-dataLayer'
+    />
+  ];
+
+  if (pathname.includes('/learn/coding-interview-prep/rosetta-code/')) {
+    scripts.push(
       <script
         async={true}
-        key='gtag-script'
+        key={mathJaxCdn.key}
-        src='https://www.googletagmanager.com/gtag/js?id=AW-795617839'
+        src={mathJaxCdn.address}
-      />,
+        type={mathJaxCdn.type}
-      <script
-        dangerouslySetInnerHTML={{
-          __html: `
-          window.dataLayer = window.dataLayer || [];
-          function gtag(){dataLayer.push(arguments);}
-          gtag('js', new Date());
-          gtag('config', 'AW-795617839');
-        `
-        }}
-        key='gtag-dataLayer'
       />
-    ].filter(Boolean)
+    );
-  );
+  }
+
+  if (challengeRE.test(pathname) || donateRE.test(pathname)) {
+    scripts.push(
+      <script
+        async={true}
+        id={stripeScript.id}
+        key={stripeScript.key}
+        src={stripeScript.address}
+      />
+    );
+  }
+
+  setPostBodyComponents(scripts.filter(Boolean));
 };

client/src/head/index.js

@@ -1,8 +1,6 @@
 import meta from './meta';
-import mathjax from './mathjax';
-import scripts from './scripts';
 
-const metaAndStyleSheets = meta.concat(mathjax, scripts).map((element, i) => ({
+const metaAndStyleSheets = meta.map((element, i) => ({
   ...element,
   key: `meta-stylesheet-${i}`,
   props: { ...element.props, key: `meta-stylesheet-${i}` }

client/src/head/mathjax.js

@@ -1,9 +0,0 @@
-import React from 'react';
-
-const cdnAddr =
-  'https://cdnjs.cloudflare.com/ajax/libs/mathjax/' +
-  '2.7.4/MathJax.js?config=TeX-AMS_HTML';
-
-const mathjax = [<script key='mathjax' src={cdnAddr} type='text/javascript' />];
-
-export default mathjax;

client/src/head/scripts.js

@@ -1,3 +0,0 @@
-const scripts = [];
-
-export default scripts;