From 849e78d72e427fe483d13db7e666ebaf9660a32c Mon Sep 17 00:00:00 2001
From: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com>
Date: Tue, 7 Jan 2020 20:14:12 +0900
Subject: [PATCH] feat: enable MathJax for Project Euler challenges (#38017)

* feat: enable MathJax for Project Euler challenges

Enables MathJax to render mathematical formulae for some Project Euler problems

* refactor: DRY out script insertion

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
---
 client/gatsby-ssr.js                                  |  5 ++++-
 .../src/templates/Challenges/components/Side-Panel.js | 11 +++++++----
 client/src/utils/scriptLoaders.js                     |  5 +++--
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/client/gatsby-ssr.js b/client/gatsby-ssr.js
index 9952bb1296..4c7cb03047 100644
--- a/client/gatsby-ssr.js
+++ b/client/gatsby-ssr.js
@@ -64,7 +64,10 @@ export const onRenderBody = ({
     />
   ];
 
-  if (pathname.includes('/learn/coding-interview-prep/rosetta-code')) {
+  if (
+    pathname.includes('/learn/coding-interview-prep/rosetta-code') ||
+    pathname.includes('/learn/coding-interview-prep/project-euler')
+  ) {
     scripts.push(
       <script
         async={false}
diff --git a/client/src/templates/Challenges/components/Side-Panel.js b/client/src/templates/Challenges/components/Side-Panel.js
index 011d5c8851..94ad02ca2e 100644
--- a/client/src/templates/Challenges/components/Side-Panel.js
+++ b/client/src/templates/Challenges/components/Side-Panel.js
@@ -37,7 +37,9 @@ export class SidePanel extends Component {
   componentDidMount() {
     const MathJax = global.MathJax;
     const mathJaxMountPoint = document.querySelector('#mathjax');
-    const rosettaCodeChallenge = this.props.section === 'rosetta-code';
+    const mathJaxChallenge =
+      this.props.section === 'rosetta-code' ||
+      this.props.section === 'project-euler';
     if (MathJax) {
       // Configure MathJax when it's loaded and
       // users navigate from another challenge
@@ -45,15 +47,16 @@ export class SidePanel extends Component {
         tex2jax: {
           inlineMath: [['$', '$'], ['\\(', '\\)']],
           processEscapes: true,
-          processClass: 'rosetta-code'
+          processClass: 'rosetta-code|project-euler'
         }
       });
       MathJax.Hub.Queue([
         'Typeset',
         MathJax.Hub,
-        document.querySelector('.rosetta-code')
+        document.querySelector('.rosetta-code'),
+        document.querySelector('.project-euler')
       ]);
-    } else if (!mathJaxMountPoint && rosettaCodeChallenge) {
+    } else if (!mathJaxMountPoint && mathJaxChallenge) {
       mathJaxScriptLoader();
     }
   }
diff --git a/client/src/utils/scriptLoaders.js b/client/src/utils/scriptLoaders.js
index 502c749137..c241cff2fa 100644
--- a/client/src/utils/scriptLoaders.js
+++ b/client/src/utils/scriptLoaders.js
@@ -39,12 +39,13 @@ export const mathJaxScriptLoader = () =>
       tex2jax: {
         inlineMath: [['$', '$'], ['\\\\(', '\\\\)']],
         processEscapes: true,
-        processClass: 'rosetta-code'
+        processClass: 'rosetta-code|project-euler'
       }
     });
     MathJax.Hub.Queue([
       'Typeset',
       MathJax.Hub,
-      document.querySelector('.rosetta-code')
+      document.querySelector('.rosetta-code'),
+      document.querySelector('.project-euler')
     ]);`
   );