feat: display comments on gists

src/pages/gists/view.rs

@@ -41,10 +41,21 @@ pub const GIST_FILENAME: TemplateFile =
     TemplateFile::new("gist_filename", "pages/gists/view/_filename.html");
 
 pub const GIST_COMMENT_INPUT: TemplateFile =
-    TemplateFile::new("gist_comment_input", "components/comments.html");
+    TemplateFile::new("gist_comment_input", "components/comments/new.html");
+
+pub const GIST_COMMENTS: TemplateFile =
+    TemplateFile::new("gist_comments", "components/comments/index.html");
 
 pub fn register_templates(t: &mut tera::Tera) {
-    for template in [VIEW_GIST, GIST_FILENAME, GIST_TEXTFILE, GIST_COMMENT_INPUT].iter() {
+    for template in [
+        VIEW_GIST,
+        GIST_FILENAME,
+        GIST_TEXTFILE,
+        GIST_COMMENT_INPUT,
+        GIST_COMMENTS,
+    ]
+    .iter()
+    {
         template.register(t).expect(template.name);
     }
 }

static/cache/css/main.css

@@ -413,9 +413,27 @@ pre {
   min-height: 100px;
 }
 
-  
 .gist__comment-content {
-  width:  100%;
+  width: 100%;
   border: 1px solid #ddd;
   padding: 5px;
 }
+
+.comment__meta {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+
+.comment__container {
+  width: 95%;
+  margin: 20px auto;
+}
+
+.comment__created {
+  font-size: 0.8rem;
+}
+
+.comment__owner {
+  font-size: 0.8rem;
+}

templates/components/comments.html

@@ -1,27 +0,0 @@
-<div class="gist__comment-container">
-  <form action="{{gist_comment_link}}" class="gist__comment-form" method="post" accept-charset="utf-8">
-    <label class="form__label" for="comment" >
-      <textarea 
-          required
-          class="gist__comment-content"
-          name="comment"
-          id="comment"
-          type="text"
-          placeholder="Markdown supported"
-      ></textarea>
-      </label>
-    <div class="gist__button-group">
-      <div class="gist__button-container">
-        <button 
-          class="form__submit--secondary"
-          name="add_file"
-          value="true"
-          type="submit"
-        >Preview</button>
-      </div>
-      <div class="gist__button-container">
-        <button class="form__submit" type="submit">Comment</button>
-      </div>
-    </div>
-  </form>
-</div>

templates/components/comments/index.html

@@ -0,0 +1,15 @@
+<div class="gist__comment-container">
+  {% if "comments" in payload %} 
+    {% for comment in payload.comments %}
+      {% set comment_id = "comment" ~ comment.id %}
+      <div id="{{ comment_id }}" class="comment__container">
+        <div class="comment__meta">
+          <a href="/{{ comment.owner }}" class="comment__owner">~{{ comment.owner }}</a>
+            <a href="{{ comment_id }}" class="comment__created">{{ comment.created }}</a>
+        </div>
+        <p class="comment__body">{{ comment.comment }}</p>
+      </div>
+    {% endfor %}
+  {% endif %}
+  {% include "gist_comment_input" %}
+</div>

templates/components/comments/new.html

@@ -0,0 +1,28 @@
+<form action="{{gist_comment_link}}" class="gist__comment-form" method="post" accept-charset="utf-8">
+  <label class="form__label" for="comment" >
+    <textarea 
+        required
+        class="gist__comment-content"
+        name="comment"
+        id="comment"
+        type="text"
+        placeholder="Markdown supported"
+        {% if new_comment %}
+          value="{{ new_comment }}"
+        {% endif %}
+    ></textarea>
+    </label>
+  <div class="gist__button-group">
+    <div class="gist__button-container">
+      <button 
+        class="form__submit--secondary"
+        name="add_file"
+        value="true"
+        type="submit"
+      >Preview</button>
+    </div>
+    <div class="gist__button-container">
+      <button class="form__submit" type="submit">Comment</button>
+    </div>
+  </div>
+</form>

templates/pages/gists/view/index.html

@@ -38,5 +38,5 @@
       {% endif %}
 	{% endif %}
     </div>
-    {% include "gist_comment_input" %}
+    {% include "gist_comments" %}
 {% endblock %}