Added custom comments.

Author: axel

_includes/my-comment-form.html

@@ -0,0 +1,44 @@
+<form method="POST" action="{{ site.comments.staticman_url }}" class="comment-form">
+  <input name="options[redirect]" type="hidden" value="{{ 'comment-success' | absolute_url }}">
+  <input name="options[redirectError]" type="hidden" value="{{ 'comment-error' | absolute_url }}">
+  <input name="options[slug]" type="hidden" value="{{ page.slug }}" />
+  <input name="fields[parent_id]" type="hidden" value="{{ include.parent_id }}" />
+  
+  <input type="hidden" name="options[reCaptcha][siteKey]" value="6LdnV_opAAAAAN5iGmTD_oQ0Vc5khmshh4AbGDbk">
+  <input type="hidden" name="options[reCaptcha][secret]" value="6LdnV_opAAAAAEIxadkcyztVjMEc5x64VPIWx6Mj">
+
+  <input
+      class="comment-name"
+      name="fields[name]"
+      type="text"
+      placeholder="Name"
+      required
+  />
+
+  <textarea
+    id="message-{{ include.parent_id }}"
+    class="comment-message"
+    name="fields[message]"
+    placeholder="Comment (markdown accepted)"
+    required
+  ></textarea>
+
+  <div 
+    class="g-recaptcha" 
+    data-sitekey="6LdnV_opAAAAAN5iGmTD_oQ0Vc5khmshh4AbGDbk"
+  ></div>
+
+  <button class="comment-submit" >
+    SEND
+  </button>
+</form>
+
+<script>
+  var simplemde = new SimpleMDE({
+    element: document.getElementById("message-{{ include.parent_id }}"),
+    forceSync: true,
+    spellChecker: false,
+    status: false,
+    placeholder: "Comment (markdown supported)",
+  });
+</script>

_includes/my-comment-list.html

@@ -0,0 +1,26 @@
+{% assign parent_id = include.parent_id | default: '' %} 
+{% assign comments = site.data.comments[page.slug] | where_exp: "item", "item.parent_id == parent_id" %} 
+{% assign sorted_comments = comments | sort: 'date' %}
+{% for comment in sorted_comments %}
+<div class="comment">
+  <h3>{{comment.name}}</h3>
+  <time
+    class="post-meta dt-published"
+    datetime="{{ page.date | date_to_xmlschema }}"
+    itemprop="datePublished"
+  >
+    {%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
+    {{ comment.date | date:" %H:%M - %b %-d, %Y" }}
+  </time>
+  <p>{{comment.message | strip_html | markdownify }}</p>
+  <div class="comment-reply">
+    <input id="reply-{{ comment._id}}" type="checkbox" class="checkbox" />
+    <label class="open" for="reply-{{ comment._id }}">
+      Reply to {{ comment.name }}
+    </label>
+    <label class="close" for="reply-{{ comment._id }}">X</label>
+    {% include my-comment-form.html parent_id=comment._id %}
+    {% include my-comment-list.html parent_id=comment._id %}
+  </div>
+</div>
+{% endfor %}

_sass/comments.scss

@@ -0,0 +1,103 @@
+// _sass/comments.scss
+.comment {
+  padding-top: 10px;
+  h3 {
+    display: inline;
+    color: royalblue;
+  }
+  p {
+    margin: 0;
+  }
+}
+
+.comment-new {
+  margin-top: 25px;
+}
+
+.comment-form {
+  display: flex;
+  flex-direction: column;
+  margin-top: 25px;
+
+  .comment-message,
+  .comment-name {
+    font-size: 16px;
+    padding: 15px;
+    border: 1px solid #ddd;
+    margin: 0;
+  }
+
+  .comment-message {
+    min-height: 150px;
+    resize: none;
+  }
+
+  .comment-bottom {
+    display: flex;
+  }
+
+  .comment-name {
+    flex: 1;
+  }
+
+  .comment-submit {
+    width: 200px;
+    border: 1px solid #ddd;
+    color: royalblue;
+    font-weight: bold;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+
+.comment-reply {
+  padding: 15px;
+  padding-top: 5px;
+  display: flex;
+  flex-direction: column;
+
+  .open {
+    font-style: italic;
+  }
+
+  .close {
+    display: none;
+    align-self: flex-end;
+    padding: 5px 10px;
+    border: 1px solid #ddd;
+  }
+
+  .open:hover,
+  .close:hover {
+    cursor: pointer;
+  }
+
+  .comment-form {
+    display: none;
+  }
+
+  .checkbox {
+    display: none;
+    &:checked ~ .open {
+      display: none;
+    }
+    &:checked ~ .close {
+      display: block;
+    }
+    &:checked ~ .comment-form {
+      display: flex;
+    }
+  }
+}
+
+.CodeMirror,
+.editor-toolbar {
+   border-radius: 0;
+ }
+
+.CodeMirror,
+.CodeMirror-scroll {
+  min-height: 150px;
+}