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'
-        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'
+        key={mathJaxCdn.key}
+        src={mathJaxCdn.address}
+        type={mathJaxCdn.type}
       />
-    ].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));
 };