fix: conditionally load MathJax (#37360)

* fix: Removed MathJax CDN from header and set it up to download whenever a user goes to a Rosetta Code challenge

* Reworked slightly so that MathJax CDN script is only rendered once

* Simplified further

* Resolved conflicts and updated MathJax fallback to work like the one on donate.js

* Escaped backticks in scriptLoaders.js

* refactor: remove reliance on state

client/gatsby-ssr.js

@@ -22,6 +22,7 @@ const mathJaxCdn = {
   address:
     'https://cdnjs.cloudflare.com/ajax/libs/mathjax/' +
     '2.7.4/MathJax.js?config=TeX-AMS_HTML',
+  id: 'mathjax',
   key: 'mathjax',
   type: 'text/javascript'
 };
@@ -63,10 +64,11 @@ export const onRenderBody = ({
     />
   ];
 
-  if (pathname.includes('/learn/coding-interview-prep/rosetta-code/')) {
+  if (pathname.includes('/learn/coding-interview-prep/rosetta-code')) {
     scripts.push(
       <script
-        async={true}
+        async={false}
+        id={mathJaxCdn.id}
         key={mathJaxCdn.key}
         src={mathJaxCdn.address}
         type={mathJaxCdn.type}
@@ -81,6 +83,7 @@ export const onRenderBody = ({
         id={stripeScript.id}
         key={stripeScript.key}
         src={stripeScript.address}
+        type={stripeScript.type}
       />
     );
   }

client/src/components/layouts/Default.js

@@ -97,6 +97,7 @@ const mapStateToProps = createSelector(
     theme: user.theme
   })
 );
+
 const mapDispatchToProps = dispatch =>
   bindActionCreators(
     { fetchUser, removeFlashMessage, onlineStatusChange },

client/src/templates/Challenges/components/Side-Panel.js

@@ -10,6 +10,7 @@ import TestSuite from './Test-Suite';
 import { challengeTestsSelector, isChallengeCompletedSelector } from '../redux';
 import { createSelector } from 'reselect';
 import './side-panel.css';
+import { mathJaxScriptLoader } from '../../../utils/scriptLoaders';
 
 const mapStateToProps = createSelector(
   isChallengeCompletedSelector,
@@ -20,8 +21,6 @@ const mapStateToProps = createSelector(
   })
 );
 
-const MathJax = global.MathJax;
-
 const propTypes = {
   description: PropTypes.string,
   guideUrl: PropTypes.string,
@@ -36,7 +35,12 @@ const propTypes = {
 
 export class SidePanel extends Component {
   componentDidMount() {
+    const MathJax = global.MathJax;
+    const mathJaxMountPoint = document.querySelector('#mathjax');
+    const rosettaCodeChallenge = this.props.section === 'rosetta-code';
     if (MathJax) {
+      // Configure MathJax when it's loaded and
+      // users navigate from another challenge
       MathJax.Hub.Config({
         tex2jax: {
           inlineMath: [['$', '$'], ['\\(', '\\)']],
@@ -49,6 +53,8 @@ export class SidePanel extends Component {
         MathJax.Hub,
         document.querySelector('.rosetta-code')
       ]);
+    } else if (!mathJaxMountPoint && rosettaCodeChallenge) {
+      mathJaxScriptLoader();
     }
   }
 

client/src/utils/scriptLoaders.js

@@ -1,11 +1,12 @@
-export const scriptLoader = (id, key, async, src, onload) => {
+export const scriptLoader = (id, key, async, src, onload, text) => {
-  var s = document.createElement('script');
+  let s = document.createElement('script');
   s.type = 'text/javascript';
   s.id = id;
   s.key = key;
   s.async = async;
   s.onload = onload;
   s.src = src;
+  s.text = text;
   document.getElementsByTagName('head')[0].appendChild(s);
 };
 
@@ -17,3 +18,25 @@ export const stripeScriptLoader = onload =>
     'https://js.stripe.com/v3/',
     onload
   );
+
+export const mathJaxScriptLoader = () =>
+  scriptLoader(
+    'mathjax',
+    'mathjax',
+    false,
+    'https://cdnjs.cloudflare.com/ajax/libs/mathjax/' +
+      '2.7.4/MathJax.js?config=TeX-AMS_HTML',
+    null,
+    `MathJax.Hub.Config({
+      tex2jax: {
+        inlineMath: [['$', '$'], ['\\\\(', '\\\\)']],
+        processEscapes: true,
+        processClass: 'rosetta-code'
+      }
+    });
+    MathJax.Hub.Queue([
+      'Typeset',
+      MathJax.Hub,
+      document.querySelector('.rosetta-code')
+    ]);`
+  );