Add includes for static-based comments powered by Staticman

- Configure Staticman with sane defaults
- Build comment form to capture new comments and ajax data to Staticman
- Build comments view that iterates over `_data/comments/post-slug/*.yml` files

_config.yml

@@ -18,7 +18,7 @@ teaser                   : # filename of teaser fallback teaser image placed in
 # breadcrumbs            : false # true, false (default)
 words_per_minute         : 200
 comments:
-  provider               : # false (default), "disqus", "discourse", "facebook", "google-plus", custom"
+  provider               : "staticman" # false (default), "disqus", "discourse", "facebook", "google-plus", "staticman", "custom"
   disqus:
     shortname            : # https://help.disqus.com/customer/portal/articles/466208-what-s-a-shortname-
   discourse:
@@ -28,6 +28,15 @@ comments:
     appid                :
     num_posts            : # 5 (default)
     colorscheme          : # "light" (default), "dark"
+staticman:
+  allowedFields          : ['name', 'email', 'url', 'message']
+  branch                 : # "master", "gh-pages"
+  format                 : "yml"
+  moderation             : true
+  path                   : "_data/comments/{options.slug}"
+  requiredFields         : ['name', 'email', 'message']
+  transforms:
+    email                : "md5"
 atom_feed:
   path                   : # blank (default) uses feed.xml
 

_includes/comment.html

@@ -0,0 +1,22 @@
+<article id="comment{{ include.index }}" class="js-comment comment">
+  <div class="comment__avatar-wrapper">
+    <img class="comment__avatar" src="https://www.gravatar.com/avatar/{{ include.email }}?d=mm&s=80">
+  </div>
+  <div class="comment__content-wrapper">
+    <h3 class="comment__author">
+      {% if (include.url) and (include.url != '@url') %}
+        <a rel="nofollow" href="{{ include.url }}">{{ include.name }}</a>
+      {% else %}
+        {{ include.name }}
+      {% endif %}
+    </h3>
+    <p class="comment__date">
+      {% if include.date %}
+        {% if include.index %}<a href="#comment{{ include.index }}">{% endif %}
+        <time datetime="{{ include.date | date_to_xmlschema }}">{{ include.date | date: "%B %d, %Y at %I:%M %p" }}</time>
+        {% if include.index %}</a>{% endif %}
+      {% endif %}
+    </p>
+    {{ include.message | markdownify }}
+  </div>
+</article>

_includes/comments-providers/scripts.html

@@ -9,6 +9,8 @@
   {% include /comments-providers/facebook.html %}
 {% when "google-plus" %}
   {% include /comments-providers/google-plus.html %}
+{% when "staticman" %}
+  {% include /comments-providers/staticman.html %}
 {% when "custom" %}
   {% include /comments-providers/custom.html %}
 {% endcase %}

_includes/comments-providers/staticman.html

@@ -0,0 +1,52 @@
+{% if site.repository and site.staticman.branch %}
+  <!-- Start comment form modal -->
+  <article class="modal">
+    <h2 class="modal__title js-modal-title"></h2>
+    <div class="modal__supporting-text js-modal-text"></div>
+    <div class="modal__actions">
+      <button class="btn btn--danger js-close-modal">Close</button>
+    </div>
+  </article>
+  <!-- End comment form modal -->
+
+  <script>
+    (function ($) {
+    var $comments = $('.js-comments');
+
+    $('.js-form').submit(function () {
+      var form = this;
+
+      $(form).addClass('form--loading');
+
+      $.ajax({
+        type: $(this).attr('method'),
+        url: $(this).attr('action'),
+        data: $(this).serialize(),
+        contentType: 'application/x-www-form-urlencoded',
+        success: function (data) {
+          showModal('{{ site.data.ui-text[site.locale].comment_success_title | default: "Comment submitted" }}', '{{ site.data.ui-text[site.locale].comment_success_msg | default: "Thanks for your comment! It will show on the site once it has been approved." }}');
+          $(form).removeClass('form--loading');
+        },
+        error: function (err) {
+          console.log(err);
+          showModal('{{ site.data.ui-text[site.locale].comment_error_title | default: "Error" }}', '{{ site.data.ui-text[site.locale].comment_error_msg | default: "Sorry, there was an error with your submission. Please make sure all required fields have been completed and try again." }}');
+          $(form).removeClass('form--loading');
+        }
+      });
+
+      return false;
+    });
+
+    $('.js-close-modal').click(function () {
+      $('body').removeClass('show-modal');
+    });
+
+    function showModal(title, message) {
+      $('.js-modal-title').text(title);
+      $('.js-modal-text').html(message);
+
+      $('body').addClass('show-modal');
+    }
+  })(jQuery);
+  </script>
+{% endif %}

_includes/comments.html

@@ -9,6 +9,63 @@
     <section class="fb-comments" data-href="{{ base_path }}{{ page.url }}" data-mobile="true" data-num-posts="{{ site.comments.facebook.num_posts | default: 5 }}" data-width="100%" data-colorscheme="{{ site.comments.facebook.colorscheme | default: 'light' }}"></section>
   {% when "google-plus" %}
     <section class="g-comments" data-href="{{ base_path }}{{ page.url }}" data-first_party_property="BLOGGER" data-view_type="FILTERED_POSTMOD">Loading Google+ Comments ...</section>
+  {% when "staticman" %}
+    <section id="comments">
+      {% if site.repository and site.staticman.branch %}
+        <!-- Start new comment form -->
+        <form class="js-form form" method="post" action="https://api.staticman.net/v1/entry/{{ site.repository }}/{{ site.staticman.branch }}">
+          <div class="form__spinner">
+            <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
+            <span class="sr-only">Loading...</span>
+          </div>
+
+          <fieldset>
+            <label for="comment-form-name">Your name <small class="required">*</small></label>
+            <input type="text" id="comment-form-name" name="fields[name]" tabindex="1" />
+          </fieldset>
+          <fieldset>
+            <label for="comment-form-email">Email address <small class="required">*</small></label>
+            <input type="email" id="comment-form-email" name="fields[email]" tabindex="2" />
+            <div class="small help-block">Your email address will remain private and won't be shared with anyone.</div>
+          </fieldset>
+          <fieldset>
+            <label for="comment-form-url">Website <small>(optional)</small></label>
+            <input type="url" id="comment-form-url" name="fields[url]" tabindex="3"/>
+          </fieldset>
+          <fieldset>
+            <label for="comment-form-message">Your comment <small class="required">*</small></label>
+            <textarea type="text" rows="3" id="comment-form-message" name="fields[message]" tabindex="4"></textarea>
+            <div class="small help-block"><a href="https://daringfireball.net/projects/markdown/">Markdown</a> is supported.</div>
+          </fieldset>
+          <fieldset class="hidden">
+            <input type="hidden" name="options[slug]" value="{{ page.slug }}">
+            <input type="hidden" name="fields[hidden]"/>
+          </fieldset>
+          <fieldset>
+            <button class="btn btn--large">Submit</button>
+          </fieldset>
+        </form>
+        <!-- End new comment form -->
+
+        <!-- Start static comments -->
+        <div class="js-comments">
+          {% if site.data.comments[page.slug] %}
+            <h4 class="page__comments-title">{{ site.data.ui-text[site.locale].comments_title | default: "Comments" }}</h4>
+            {% assign comments = site.data.comments[page.slug] | sort %}
+
+            {% for comment in comments %}
+              {% assign email = comment[1].email %}
+              {% assign name = comment[1].name %}
+              {% assign url = comment[1].url %}
+              {% assign date = comment[1].date %}
+              {% assign message = comment[1].message %}
+              {% include comment.html index=forloop.index email=email name=name url=url date=date message=message %}
+            {% endfor %}
+          {% endif %}
+        </div>
+        <!-- End static comments -->
+      {% endif %}
+    </section>
   {% when "custom" %}
     <section id="comments"></section>
   {% endcase %}