Major Updates on Post Section

9 files changed, 170 insertions, 91 deletions

diff --git a/blog/urls.py b/blog/urls.py
index 93117009..03e6c13d 100644
--- a/blog/urls.py
+++ b/blog/urls.py
@@ -7,8 +7,8 @@ urlpatterns = [
     path('', views.home, name='home'),
     path('account', views.account, name='account'),
     path('register/', views.register, name='register'),
-    path('articles/post/<str:slug>', views.post, name='post'),
-    path('articles/post/<str:slug>/comment', views.comment, name='comment'),
-    path('articles/post/<str:slug>/edit_comment', views.edit_comment, name='edit_comment'),
-    path('articles/post/<str:slug>/delete_comment/<int:comment_id>', views.delete_comment, name='delete_comment'),
+    path('articles/<str:slug>', views.post, name='post'),
+    path('articles/<str:slug>/comment', views.comment, name='comment'),
+    path('articles/<str:slug>/edit_comment', views.edit_comment, name='edit_comment'),
+    path('articles/<str:slug>/delete_comment/<int:comment_id>', views.delete_comment, name='delete_comment'),
 ]
diff --git a/blog/views.py b/blog/views.py
index 403f30a4..fd8d76f5 100644
--- a/blog/views.py
+++ b/blog/views.py
@@ -66,14 +66,42 @@ def register(request):
 def post(request, slug):
     try:
         post = Post.objects.get(slug=slug)
+
+        # Highlight code blocks, if any in the post body
+        from pygments import highlight
+        from pygments.lexers import get_lexer_by_name
+        from pygments.lexers import guess_lexer
+        from pygments.formatters import HtmlFormatter
+        from bs4 import BeautifulSoup
+
+        # code stored in .ql-syntax class
+        soup = BeautifulSoup(post.body, 'html.parser')
+        code_blocks = soup.find_all('pre', class_='ql-syntax')
+        for code_block in code_blocks:
+            # replace &nbsp; with space
+            code_block.string = code_block.string.replace(u'\xa0', u' ')
+
+            # guess the language as there is no data-lang attribute
+            try:
+                lexer = guess_lexer(code_block.string)
+            except:
+                lexer = get_lexer_by_name('text')
+
+            # highlight the code
+            formatter = HtmlFormatter(noclasses=True, style='native')
+            highlighted_code = highlight(code_block.string, lexer, formatter)
+
+            # replace the code block with the highlighted code
+            code_block.replace_with(BeautifulSoup(highlighted_code, 'html.parser'))
+
+        post.body = str(soup)
+
+
         tags = post.tags.all()
         comments = Comment.objects.filter(post=post)
         for comment in comments:
-            try:
-                user_profile = UserProfile.objects.get(user=comment.user)
-                comment.avatar = hashlib.md5(str(user_profile.gravatar_email).lower().encode('utf-8')).hexdigest() if user_profile.gravatar_email else hashlib.md5(str(comment.user.email).lower().encode()).hexdigest()
-            except UserProfile.DoesNotExist:
-                comment.avatar = hashlib.md5(str(comment.user.email).lower().encode()).hexdigest()
+            user_profile = UserProfile.objects.get(user=comment.user)
+            comment.avatar_url = user_profile.avatar_url
         if post.is_public:
             return render(request, 'blog/post.html', {'title': post.title, 'post': post, 'tags': tags, 'comments': comments})
         else:
diff --git a/static/css/main.css b/static/css/main.css
index 435046a6..88eeb957 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -32,12 +32,13 @@ h2 {
     margin-bottom: 15px;
 }
 
-input {
+input, textarea {
     padding: 5px 10px;
     border: none;
     outline: none;
     border-radius: 5px;
     font-size: 11px;
+    font-family: Verdana,Helvetica,Arial,Sans-Serif;
 }
 
 .button {
@@ -98,6 +99,22 @@ input {
     padding: 0px;
 }
 
+.ql-mathjax-block img, .ql-mathjax-inline img {
+    float: none !important;
+}
+
+.ql-mathjax-block img {
+    margin-bottom: 13px;
+}
+
+.ql-mathjax-inline img{
+    padding: 0px !important;
+}
+
+.highlight {
+    background: none !important;
+}
+
 #wrap {
     width: 1000px;
     margin: auto;
@@ -108,8 +125,9 @@ input {
     background-image: url("../images/site/Banner.gif");
     background-repeat: no-repeat;
     background-position: center;
-    height: 333px;
     margin: auto;
+    width: 1000px;
+    height: 360px;
 }
 
 #navigation-area ul, #archives-area ul, #categories-area ul, #admin-area ul, #announcements ul, #user-area ul, #fun-stuff ul {
@@ -194,6 +212,24 @@ input {
     color: #56a6a1;
 }
 
+#article-body {
+    font-size: 13px;
+}
+
+#article-body img {
+    height: 250px;
+    width: auto;
+    float: left;
+    padding: 0px 10px 10px 0px;
+}
+
+#article-body h2, #article-body h1 {
+    text-transform: uppercase;
+    padding-bottom: 0px;
+    border-bottom: none;
+    margin: 13px;
+    font-size: 14px;
+}
 
 
 /* 
diff --git a/static/images/avatars/.DS_Store b/static/images/avatars/.DS_Store
deleted file mode 100644
index d5b0c0bd..00000000
--- a/static/images/avatars/.DS_Store
+++ /dev/null
diff --git a/static/images/avatars/8 Bit/.DS_Store b/static/images/avatars/8 Bit/.DS_Store
deleted file mode 100644
index 9e102bc9..00000000
--- a/static/images/avatars/8 Bit/.DS_Store
+++ /dev/null
diff --git a/static/images/avatars/Zombies/.DS_Store b/static/images/avatars/Zombies/.DS_Store
deleted file mode 100644
index f15a2c95..00000000
--- a/static/images/avatars/Zombies/.DS_Store
+++ /dev/null
diff --git a/templates/blog/partials/sidebar.html b/templates/blog/partials/sidebar.html
index dd235357..00be99cc 100644
--- a/templates/blog/partials/sidebar.html
+++ b/templates/blog/partials/sidebar.html
@@ -105,6 +105,36 @@
         </li>
         <li>
             <span>
+                <img src="{% static 'images/site/icons/cabinet.gif' %}" alt="Archives" border="0">
+            </span>
+            <span>
+                <a href="#">
+                    Archives
+                </a>
+            </span>
+        </li>
+        <li>
+            <span>
+                <img src="{% static 'images/site/icons/books.gif' %}" alt="Categories" border="0">
+            </span>
+            <span>
+                <a href="#">
+                    Categories
+                </a>
+            </span>
+        </li>
+        <li>
+            <span>
+                <img src="{% static 'images/site/icons/issues.gif' %}" alt="Tags" border="0">
+            </span>
+            <span>
+                <a href="#">
+                    Tags
+                </a>
+            </span>
+        </li>
+        <li>
+            <span>
                 <img src="{% static 'images/site/icons/setup.gif' %}" alt="Source Code" border="0">
             </span>
             <span>
diff --git a/templates/blog/post.html b/templates/blog/post.html
index fdbc0143..afe47d1f 100644
--- a/templates/blog/post.html
+++ b/templates/blog/post.html
@@ -1,78 +1,76 @@
 {% extends 'blog/partials/base.html' %} {% block content %}
- <link
-  rel="stylesheet"
-  href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/monokai-sublime.min.css"
-/>
-{% comment %}<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet" /> {% endcomment %}
-<div class="main">
-  <article>
-    {% load subdomain %}
-    <div class="article-cover">
-        <img src="{% url 'ignis:post_image' '720' post.id %}.gif" alt="Cover Image" style="width: 720px; margin: 0 auto; display: block;">
-    </div>
-    <h1 style="margin-bottom: 12px; font-size: 2rem;">{{ post.title }}</h1>
+
+<div id="article">
+    <img src="{% url 'ignis:post_image' '730' post.id %}.gif" alt="Cover Image" style="width: 730px; margin: 0 auto; display: block;">
+    <h1>{{ post.title }}</h1>
     <p style="line-height: 1.6em;">
         Posted on <em><u>{{ post.date | date:"M d, Y" }}</u></em> by <em><a href="#">{{ post.author }}</a> in <a href="#">{{ post.category }}</a></em>
     </p>
-    <hr>
-
-    <div class="article-body">{{ post.body | safe }}</div>
-    <p><b>Tags:</b>
+    <p>Tags:
         {% for tag in tags %}
             <a href="#" class="tag">{{ tag.name }}</a>
         {% endfor %}
     </p>
-    <div id="comments" style="margin-top: 2rem;">
-        <h3>Comments</h3>
-        {% for comment in comments %}
-            <div class="comment" id="comment-{{ comment.id }}">
-                <div class="profile-picture">
-                    <img src="https://www.gravatar.com/avatar/{{ comment.avatar }}?s=100" alt="Profile Picture">
-                </div>
-                <div style="max-width: calc(100% - 63px);">
-                    <p class="comment-header">
-                        <a href="#">{{ comment.user.username }}</a> on <em>{{ comment.created_at | date:"M d, Y" }}</em>
-                        {% if comment.edited %}
-                            <em>(Edited)</em>
-                        {% endif %}
-                        {% if comment.user == user %}
-                            &nbsp;&nbsp;•&nbsp;&nbsp;
-                            <a href="javascript:;" onclick="editComment({{ comment.id }})">Edit</a>
-                            &nbsp;&nbsp;•&nbsp;&nbsp;
-                            <a href="{% url 'blog:delete_comment' post.slug comment.id %}" onclick="return confirm('Are you sure you want to delete this comment?')">Delete</a>
-                        {% endif %}
-                    </p>
-                    <p class="comment-body">
-                        <span id="comment-body-{{ comment.id }}">{{ comment.body }}</span>
-                        <form action="{% url 'blog:edit_comment' post.slug %}" method="POST" id="edit-form-{{ comment.id }}" style="display: none;">
-                            {% csrf_token %}
-                            <input type = "hidden" name="comment_id" value="{{ comment.id }}">
-                            <textarea name="body" id="body" cols="80" rows="10">{{ comment.body }}</textarea>
-                            <input type="submit" value="Update" style="display:inline-block;">
-                            <input type="button" value="Cancel" onclick="cancelEdit({{ comment.id }})" style="display:inline-block;">
-                        </form>
-                    </p>
-                </div>
-            </div>
-        {% endfor %}
-        {% if user.is_authenticated %}
-        <form action="{% url 'blog:comment' post.slug %}" method="post">
-            {% csrf_token %}
-            <div class="form-group">
-                <label for="comment">Add Comment:</label>
-                <textarea name="comment" id="comment" class="form-control" rows="5" cols="88"></textarea>
-            </div>
-            <div class="form-group">
-                <input type="submit" class="btn btn-primary" value="Add Comment">
-            </div>
-        </form>
-        {% else %}
-            <p><em>You must be logged in to comment.</em></p>
-        {% endif %}
-    </div>
-</article>
-  {% comment %} <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script> {% endcomment %}
-  <script>
+    <hr>
+    <div id="article-body">{{ post.body | safe }}</div>
+</div>
+
+<div id="comments" style="clear: both;" class="mtsbitem">
+    <h2>Comments</h2>
+    {% for comment in comments %}
+        <div id="comment-{{ comment.id }}">
+            <table>
+                <tr>
+                    <td style="width: 60px; vertical-align: top;">
+                        <img src="{{ comment.avatar_url }}" alt="Profile Picture" style="width: 50px; height: auto;">
+                    </td>
+                    <td style="vertical-align: top;">
+                        <p style="margin-top: 0;">
+                            <a href="#">{{ comment.user.username }}</a> on <em>{{ comment.created_at | date:"M d, Y" }}</em>
+                            {% if comment.edited %}
+                                <em>(Edited)</em>
+                            {% endif %}
+                            {% if comment.user == user %}
+                                &nbsp;&nbsp;
+                                <a href="javascript:;" onclick="editComment({{ comment.id }})">Edit</a>
+                                &nbsp;&nbsp;
+                                <a href="{% url 'blog:delete_comment' post.slug comment.id %}" onclick="return confirm('Are you sure you want to delete this comment?')">Delete</a>
+                            {% endif %}
+                        </p>
+                        <p>
+                            <span id="comment-body-{{ comment.id }}">{{ comment.body }}</span>
+                            <form action="{% url 'blog:edit_comment' post.slug %}" method="POST" id="edit-form-{{ comment.id }}" style="display: none;">
+                                {% csrf_token %}
+                                <input type = "hidden" name="comment_id" value="{{ comment.id }}">
+                                <textarea name="body" id="body" cols="78" rows="10" style="width: 640px; display: block; margin-bottom: 10px;">{{ comment.body }}</textarea>
+                                <input type="submit" value="Update" class="button button-special">
+                                <input type="button" value="Cancel" onclick="cancelEdit({{ comment.id }})" class="button">
+                            </form>
+                        </p>
+                    </td>
+                </tr>
+            </table>
+        </div>
+    {% endfor %}
+</div>
+
+{% if user.is_authenticated %}
+<div id="new-comment" class="mtsbitem">
+    <h2>Leave a Comment</h2>
+    <form action="{% url 'blog:comment' post.slug %}" method="POST">
+        {% csrf_token %}
+        <textarea name="body" id="body" cols="88" rows="10" style="width: 710px; display: block; margin-bottom: 15px;" placeholder="Your comment here..."></textarea>
+        <input type="submit" value="Submit" class="button button-special">
+    </form>
+</div>
+{% else %}
+<div id="new-comment" class="mtsbitem">
+    <h2>Leave a Comment</h2>
+    <p>You must be logged in to leave a comment. <a href="{% url 'blog:login' %}">Login</a> or <a href="{% url 'blog:register' %}">Register</a>.</p>
+</div>
+{% endif %}
+
+<script>
     function editComment(id) {
         document.getElementById('comment-body-' + id).style.display = 'none';
         document.getElementById('edit-form-' + id).style.display = 'block';
@@ -83,5 +81,4 @@
         document.getElementById('edit-form-' + id).style.display = 'none';
     }
 </script>
-</div>
 {% endblock %}
diff --git a/templates/blog_admin/new_post.html b/templates/blog_admin/new_post.html
index ce4b9485..28dcca89 100644
--- a/templates/blog_admin/new_post.html
+++ b/templates/blog_admin/new_post.html
@@ -1,14 +1,5 @@
 {% extends 'blog/partials/base.html' %} {% block content %}
-<link
-  rel="stylesheet"
-  href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/monokai-sublime.min.css"
-/>
 <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet" />
-<style>
-  .ql-editor {
-    font-family: "Times New Roman", Times, serif;
-  }
-</style>
 <div class="main">
   <section>
     {% include 'blog_admin/partials/posts_topbar.html' %}
@@ -140,8 +131,6 @@
     </form>
   </section>
 </div>
-<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-svg.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
 <script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
 <script src="https://cdn.jsdelivr.net/gh/T-vK/DynamicQuillTools@master/DynamicQuillTools.js"></script>
 <script>
@@ -224,7 +213,6 @@
 
   var quill = new Quill("#editor-container", {
     modules: {
-      syntax: true,
       toolbar: {
         container: "#toolbar-container",
         handlers: {