removed mathjax js requirement from post display

10 files changed, 55 insertions, 48 deletions

diff --git a/.gitignore b/.gitignore
index 771b6599..be2bd3ad 100644
--- a/.gitignore
+++ b/.gitignore
@@ -130,3 +130,5 @@ dmypy.json
 
 # .DS_Store for macOS
 .DS_Store
+
+genimages
diff --git a/blog/urls.py b/blog/urls.py
index 2927837b..e0f88621 100644
--- a/blog/urls.py
+++ b/blog/urls.py
@@ -14,5 +14,6 @@ urlpatterns = [
     path('post/<str:slug>/comment', views.comment, name='comment'),
     path('post/<str:slug>/edit_comment', views.edit_comment, name='edit_comment'),
     path('post/<str:slug>/delete_comment/<int:comment_id>', views.delete_comment, name='delete_comment'),
+    path('tex/', views.tex, name='tex'),
     # path('my/homepage', views.homepage, name='homepage'),
 ]
diff --git a/blog/views.py b/blog/views.py
index b514750a..775956d8 100644
--- a/blog/views.py
+++ b/blog/views.py
@@ -10,8 +10,12 @@ from string import ascii_letters, digits
 import base64
 import json
 from .models import Post, Comment
-from .context_processors import recent_posts, categories, archives
+from .context_processors import recent_posts
 from announcements.models import Announcement
+import sympy
+from django.conf import settings
+from django.http import HttpResponse
+import os
 
 # Create your views here.
 
@@ -166,3 +170,18 @@ def delete_comment(request, slug, comment_id):
             return HttpResponse('Comment not found!', status=404)
     else:
         return redirect('blog:home')
+
+from django.views.decorators.csrf import csrf_exempt
+
+@csrf_exempt
+def tex(request):
+    # get expression from request query
+    expression = request.GET.get('expr').replace('"', '').strip()
+    if not expression:
+        return HttpResponse('No expression provided!', status=400)
+
+    import requests
+
+    image = requests.get('https://latex.codecogs.com/png.image?%5Cinline%20%5Clarge%20%5Cdpi%7B300%7D%5Cbg%7Bblack%7D' + expression).content
+
+    return HttpResponse(image, content_type='image/png')
diff --git a/middleware/oldbrowsermiddleware.py b/middleware/oldbrowsermiddleware.py
index 91ce3b05..451caab0 100644
--- a/middleware/oldbrowsermiddleware.py
+++ b/middleware/oldbrowsermiddleware.py
@@ -31,7 +31,5 @@ class OldBrowserMiddleware:
         request.old_browser = old_browser
         request.onclick = onclick
         response = self.get_response(request)
-        print("old_browser: ", request.old_browser)
-        print("onclick: ", request.onclick)
         return response
         
\ No newline at end of file
diff --git a/requirements.txt b/requirements.txt
index e482f101..1063b930 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -6,3 +6,4 @@ six==1.16.0
 cryptocode==0.1
 captcha==0.4
 PyGithub==1.55
+sympy==1.11.1
\ No newline at end of file
diff --git a/templates/blog/partials/sidebar.html b/templates/blog/partials/sidebar.html
index a5feda2e..af61ae2f 100644
--- a/templates/blog/partials/sidebar.html
+++ b/templates/blog/partials/sidebar.html
@@ -88,7 +88,7 @@
                     <li class="sidenavitem"><a class = "anavdef" href="{% url 'blog-admin:comments' %}">Manage Comments</a></li>
                     <li class="sidenavitem"><a class = "anavdef" href="{% url 'blog-admin:categories' %}">Manage Categories</a></li>
                     <li class="sidenavitem"><a class = "anavdef" href="{% url 'blog-admin:tags' %}">Manage Tags</a></li>
-                    <li class="sidenavitem"><a class = "anavdef" href="{% url 'blog-admin:new' %}">Create New Post</a></li>
+                    <li class="sidenavitem"><a class = "anavdef" href="{% url 'blog-admin:new-post' %}">Create New Post</a></li>
                 </ul>
             </nav>
         {% endif %}
diff --git a/templates/blog/post.html b/templates/blog/post.html
index f10445a2..c849948b 100644
--- a/templates/blog/post.html
+++ b/templates/blog/post.html
@@ -67,7 +67,6 @@
         {% endif %}
     </div>
 </article>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/tex-mml-svg.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
   <script>
     function editComment(id) {
diff --git a/templates/blog_admin/edit_post.html b/templates/blog_admin/edit_post.html
index 51762b06..8657ac90 100644
--- a/templates/blog_admin/edit_post.html
+++ b/templates/blog_admin/edit_post.html
@@ -124,7 +124,7 @@
     static create(value) {
       const node = super.create(value);
       if (typeof value === "string") {
-        node.innerHTML = "" + this.tex2svg(value) + "";
+        node.innerHTML = this.gettex(value);
         node.contentEditable = "false";
         node.setAttribute("data-value", value);
       }
@@ -135,15 +135,12 @@
       return domNode.getAttribute("data-value");
     }
 
-    static tex2svg(latex) {
-      let MathJaxNode = document.createElement("DIV");
-      MathJaxNode.style.visibility = "hidden";
-      MathJaxNode.innerHTML = "\\(" + latex + "\\)";
-      document.body.appendChild(MathJaxNode);
-      MathJax.typeset();
-      let svg = MathJaxNode.innerHTML;
-      document.body.removeChild(MathJaxNode);
-      return svg;
+    static gettex(latex) {
+      // make a GET request to /tex, returns a png response. render this to image tag
+      const url = `/tex/?expr="${latex}"`;
+      const img = `<img src='${url}' style="display: inline-block; margin: 0 auto; height: 16px; width: auto;" />`;
+      return img;
+
     }
   }
 
@@ -151,7 +148,7 @@
     static create(value) {
       const node = super.create(value);
       if (typeof value === "string") {
-        node.innerHTML = "" + this.tex2svg(value) + "";
+        node.innerHTML = "" + this.gettex(value);
         node.contentEditable = "false";
         node.setAttribute("data-value", value);
       }
@@ -162,15 +159,11 @@
       return domNode.getAttribute("data-value");
     }
 
-    static tex2svg(latex) {
-      let MathJaxNode = document.createElement("DIV");
-      MathJaxNode.style.visibility = "hidden";
-      MathJaxNode.innerHTML = "\\[" + latex + "\\]";
-      document.body.appendChild(MathJaxNode);
-      MathJax.typeset();
-      let svg = MathJaxNode.innerHTML;
-      document.body.removeChild(MathJaxNode);
-      return svg;
+    static gettex(latex) {
+      // make a POST request to /tex, returns a png response. render this to image tag
+      const url = `/tex/?expr="${latex}"`;
+      const img = `<img src='${url}' style="display: block; margin: 0 auto; height: 24px; width: auto;" />`;
+      return img;
     }
   }
 
@@ -243,9 +236,9 @@
     });
 
     try {
-        const value = document.getElementById("body").value;
-        const newValue = value.replace(/<p><br><\/p>/g, "");
-        const delta = quill.clipboard.convert(value);
+      const value = document.getElementById("body").value;
+      const newValue = value.replace(/<p><br><\/p>/g, "");
+      const delta = quill.clipboard.convert(value);
         quill.setContents(delta, "silent");
     } catch (e) {
         console.log(e);
diff --git a/templates/blog_admin/new_post.html b/templates/blog_admin/new_post.html
index 8b726c13..9a7c9ea1 100644
--- a/templates/blog_admin/new_post.html
+++ b/templates/blog_admin/new_post.html
@@ -125,7 +125,7 @@
     static create(value) {
       const node = super.create(value);
       if (typeof value === "string") {
-        node.innerHTML = "" + this.tex2svg(value) + "";
+        node.innerHTML = this.gettex(value);
         node.contentEditable = "false";
         node.setAttribute("data-value", value);
       }
@@ -136,15 +136,12 @@
       return domNode.getAttribute("data-value");
     }
 
-    static tex2svg(latex) {
-      let MathJaxNode = document.createElement("DIV");
-      MathJaxNode.style.visibility = "hidden";
-      MathJaxNode.innerHTML = "\\(" + latex + "\\)";
-      document.body.appendChild(MathJaxNode);
-      MathJax.typeset();
-      let svg = MathJaxNode.innerHTML;
-      document.body.removeChild(MathJaxNode);
-      return svg;
+    static gettex(latex) {
+      // make a GET request to /tex, returns a png response. render this to image tag
+      const url = `/tex/?expr="${latex}"`;
+      const img = `<img src='${url}' style="display: inline-block; margin: 0 auto; height: 16px; width: auto;" />`;
+      return img;
+
     }
   }
 
@@ -152,7 +149,7 @@
     static create(value) {
       const node = super.create(value);
       if (typeof value === "string") {
-        node.innerHTML = "" + this.tex2svg(value) + "";
+        node.innerHTML = "" + this.gettex(value);
         node.contentEditable = "false";
         node.setAttribute("data-value", value);
       }
@@ -163,15 +160,11 @@
       return domNode.getAttribute("data-value");
     }
 
-    static tex2svg(latex) {
-      let MathJaxNode = document.createElement("DIV");
-      MathJaxNode.style.visibility = "hidden";
-      MathJaxNode.innerHTML = "\\[" + latex + "\\]";
-      document.body.appendChild(MathJaxNode);
-      MathJax.typeset();
-      let svg = MathJaxNode.innerHTML;
-      document.body.removeChild(MathJaxNode);
-      return svg;
+    static gettex(latex) {
+      // make a POST request to /tex, returns a png response. render this to image tag
+      const url = `/tex/?expr="${latex}"`;
+      const img = `<img src='${url}' style="display: block; margin: 0 auto; height: 24px; width: auto;" />`;
+      return img;
     }
   }
 
diff --git a/thatcomputerscientist/settings.py b/thatcomputerscientist/settings.py
index b56f96f9..c91b3011 100644
--- a/thatcomputerscientist/settings.py
+++ b/thatcomputerscientist/settings.py
@@ -145,6 +145,7 @@ STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
 STATICFILES_DIRS = [
     os.path.join(BASE_DIR, 'static'),
 ]
+FORMULA_FOLDER = os.path.join(BASE_DIR, 'genimages/formulae') if os.getenv('ENVIRONMENT') == 'development' else '/home/ubuntu/database/images/formulae'
 
 # Default primary key field type
 # https://docs.djangoproject.com/en/4.0/ref/settings/#default-auto-field