seperate comments

templates/components/comment_render.html

@@ -0,0 +1,22 @@
+{% macro render_comment(comments) %} {% for comment in comments %}
+<div class="media">
+  <a class="pull-left" href="#">
+    <img
+      class="media-object"
+      src="https://ui-avatars.com/api/?name={{ comment.author }}&background=random"
+      width="64"
+      height="64"
+      alt=""
+    />
+  </a>
+  <div class="media-body">
+    <h4 class="media-heading">
+      {{ comment.author }}
+      <small>{{ comment.date }}</small>
+    </h4>
+    {{ comment.content }}
+  </div>
+</div>
+{% else %}
+<p>No comments yet. Be the first!</p>
+{% endfor %} {% endmacro %}

templates/post_detail.html

@@ -1,16 +1,15 @@
 {% extends "base.html" %} {% block title %}{{ post.title }} - Simple Blog
 Template{% endblock %} {% block content %} {% from
-"components/post_renderer.html" import render_post %}
+"components/post_renderer.html" import render_post %} {% from
+"components/comment_renderer.html" import render_comment %}
 
 <div class="row">
   <div class="col-lg-12">
     <h1 class="post-title">{{ post.title }}</h1>
     <p class="lead">{{ post.subtitle }}</p>
-    <hr />
     <p>
       <span class="glyphicon glyphicon-time"></span> Posted on {{ post.date }}
     </p>
-    <hr />
     {{ render_post(post) }}
 
     <a href="{{ url_for('home') }}" class="btn btn-default btn-custom"
@@ -18,67 +17,10 @@ Template{% endblock %} {% block content %} {% from
     >
 
     <hr style="margin-top: 75px; margin-bottom: 40px" />
-    <div class="well">
+    {% include leave_comment.html %}
-      <h4>Leave a Comment:</h4>
-      <form
-        role="form"
-        method="POST"
-        action="{{ url_for('post_comment', post_id=post.id) }}"
-      >
-        <div class="form-group">
-          <input
-            type="text"
-            name="author"
-            class="form-control"
-            placeholder="Your Name"
-            required
-            style="margin-bottom: 10px"
-          />
-
-          <input
-            type="text"
-            name="honeypot"
-            style="display: none !important"
-            tabindex="-1"
-            autocomplete="off"
-          />
-
-          <textarea
-            name="content"
-            class="form-control"
-            rows="3"
-            placeholder="Write something..."
-            required
-          ></textarea>
-        </div>
-        <button type="submit" class="btn btn-primary">Submit</button>
-      </form>
-    </div>
 
     <hr />
-
+    {{comment_renderer(comments)}}
-    {% for comment in comments %}
-    <div class="media">
-      <a class="pull-left" href="#">
-        <img
-          class="media-object"
-          src="https://ui-avatars.com/api/?name={{ comment.author }}&background=random"
-          width="64"
-          height="64"
-          alt=""
-        />
-      </a>
-      <div class="media-body">
-        <h4 class="media-heading">
-          {{ comment.author }}
-          <small>{{ comment.date }}</small>
-        </h4>
-        {{ comment.content }}
-      </div>
-    </div>
-    {% else %}
-    <p>No comments yet. Be the first!</p>
-    {% endfor %}
   </div>
 </div>
 {% endblock %}

templates/posts/leave_comment.html

@@ -0,0 +1,36 @@
+<div class="well">
+  <h4>Leave a Comment:</h4>
+  <form
+    role="form"
+    method="POST"
+    action="{{ url_for('post_comment', post_id=post.id) }}"
+  >
+    <div class="form-group">
+      <input
+        type="text"
+        name="author"
+        class="form-control"
+        placeholder="Your Name"
+        required
+        style="margin-bottom: 10px"
+      />
+
+      <input
+        type="text"
+        name="honeypot"
+        style="display: none !important"
+        tabindex="-1"
+        autocomplete="off"
+      />
+
+      <textarea
+        name="content"
+        class="form-control"
+        rows="3"
+        placeholder="Write something..."
+        required
+      ></textarea>
+    </div>
+    <button type="submit" class="btn btn-primary">Submit</button>
+  </form>
+</div>