feat: add MathJax script during build (#907)

Author: scissorsneedfoodtoo

cypress/e2e/english/post/post.cy.js

@@ -5,7 +5,8 @@ const selectors = {
   ghostDefaultAvatar: "[data-test-label='avatar']",
   postContent: "[data-test-label='post-content']",
   socialRowCTA: "[data-test-label='social-row-cta']",
-  tweetButton: "[data-test-label='tweet-button']"
+  tweetButton: "[data-test-label='tweet-button']",
+  mathJaxScript: "[data-test-label='mathjax-script']"
 };
 
 describe('Post', () => {
@@ -120,6 +121,38 @@ describe('Post', () => {
           );
       });
     });
+
+    context('MathJax', () => {
+      context('Contains MathJax equations', () => {
+        beforeEach(() => {
+          cy.visit('/graph-neural-networks-explained-with-examples/');
+        });
+
+        it('should have the MathJax script', () => {
+          cy.get(selectors.mathJaxScript).should('exist');
+        });
+
+        it('should render MathJax equations within the post', () => {
+          cy.get('mjx-container').should('exist');
+        });
+      });
+
+      context('Does not contain MathJax equations', () => {
+        beforeEach(() => {
+          cy.visit(
+            '/what-programming-language-should-i-learn-first-19a33b0a467d/'
+          );
+        });
+
+        it('should not have the MathJax script', () => {
+          cy.get(selectors.mathJaxScript).should('not.exist');
+        });
+
+        it('should not render MathJax equations within the post', () => {
+          cy.get('mjx-container').should('not.exist');
+        });
+      });
+    });
   });
 
   context('Hashnode sourced posts', () => {
@@ -219,5 +252,35 @@ describe('Post', () => {
           );
       });
     });
+
+    context('MathJax', () => {
+      context('Contains MathJax equations', () => {
+        beforeEach(() => {
+          cy.visit('/how-do-numerical-conversions-work/');
+        });
+
+        it('should have the MathJax script', () => {
+          cy.get(selectors.mathJaxScript).should('exist');
+        });
+
+        it('should render MathJax equations within the post', () => {
+          cy.get('mjx-container').should('exist');
+        });
+      });
+
+      context('Does not contain MathJax equations', () => {
+        beforeEach(() => {
+          cy.visit('/freecodecamp-press-books-handbooks/');
+        });
+
+        it('should not have the MathJax script', () => {
+          cy.get(selectors.mathJaxScript).should('not.exist');
+        });
+
+        it('should not render MathJax equations within the post', () => {
+          cy.get('mjx-container').should('not.exist');
+        });
+      });
+    });
   });
 });

cypress/fixtures/mock-hashnode-posts.json

@@ -16,6 +16,7 @@ on every page through _includes/layouts/default.njk
      7.1.2 Multiple Author Byline
   7.2. Related Posts
   7.3. Koenig Styles
+  7.4. MathJax Styles
 8.  Author Template
 9.  Error Template
 10. Site Footer
@@ -1822,6 +1823,15 @@ pre.runkit-element {
   }
 }
 
+/* 7.4. MathJax Styles
+/* ---------------------------------------------------------- */
+
+p:has(mjx-container.MathJax) {
+  display: inline-block;
+  max-width: 100%;
+  overflow: auto;
+}
+
 /* 8. Author Template
 /* ---------------------------------------------------------- */
 

docker/ghost/content/english/data/ghost.db

@@ -55,6 +55,10 @@
         {% block monetization %}
         {% endblock %}
 
+        {# Dynamically load MathJax script #}
+        {% block mathjax %}
+        {% endblock %}
+
         {# Pulls scripts that can be safely cached and placed / defered
         in the head, but that we want to include only when readers go to
         specific pages that require them (ex. published-date.js on the

docker/ghost/content/english/images/2024/06/download-1.png

@@ -125,6 +125,20 @@ time #}
     {% endif %}
 {% endblock %}
 
+{% block mathjax %}
+    {% for tag in post.tags %}
+        {% if ((tag.slug | lower) === 'mathjax') %}
+            <script
+                type="text/javascript"
+                id="MathJax-script"
+                data-test-label="mathjax-script"
+                src="https://cdn.freecodecamp.org/news-assets/mathjax/3.2.2/tex-mml-chtml.min.js"
+                defer
+            ></script>
+        {% endif %}
+    {% endfor %}
+{% endblock %}
+
 {% block seo %}
     <meta name="description" content="{{ post.excerpt }}">