Staticman nested comments support from Huginn

which is in turn a port from halogenical/beautifulhugo#222.  Introduced true
nested comments with reply functionality.

1. Reply target anchors to easily jump between replies.
2. Interactive reply target display with Gravatar and name.
3. Improved input type for "website" field.
4. Implemented FR pacollins#63 to construct POST URL in JS.
5. Clearer instructions for Google reCAPTCHA v2.
6. Introduced some SCSS variables for layout control
7. Fixed missing "id" attribute in each comment.
8. Fixed missing translation UI text for Staticman forms.
9. Changed default API endpoint to the one serving @staticmanlab due to
eduardoboucas/staticman#307.

assets/js/staticman.js

@@ -0,0 +1,104 @@
+// Static comments
+// from: https://github.com/eduardoboucas/popcorn/blob/gh-pages/js/main.js
+$(document).ready(function() {
+  $('.post-new-comment').submit(function () {
+    var form = this;
+
+    $(form).disabled = true;
+    $('input[type="submit"]:enabled').addClass('hidden'); // hide "submit"
+    $('input[type="submit"]:disabled').removeClass('hidden'); // show "submitted"
+
+    // Construct form action URL form JS to avoid spam
+    var api = '{{ .api | default "staticman3.herokuapp.com" }}';
+    var gitProvider = '{{ .gitprovider }}';
+    var username = '{{ .username }}';
+    var repo = '{{ .repo }}';
+    var branch = '{{ .branch }}';
+
+    $.ajax({
+      type: $(this).attr('method'),
+      url: ['https:/', api, 'v3/entry', gitProvider, username, repo, branch, 'comments'].join('/'),
+      data: $(this).serialize(),
+      contentType: 'application/x-www-form-urlencoded',
+      success: function (data) {
+        showAlert('success');
+        setTimeout(function(){ clearForm() }, 3000); // display success message for 3s
+        $(form).disabled = false;
+      },
+      error: function (err) {
+        console.log(err);
+        showAlert('failed');
+        $(form).disabled = false;
+      }
+    });
+
+    return false;
+  });
+
+  function showAlert(msg) {
+    if (msg == 'success') {
+      $('.post-new-comment .submit-success').removeClass('hidden');  // show submit success message
+      $('.post-new-comment .submit-failed').addClass('hidden'); // hide submit failed message
+    } else {
+      $('.post-new-comment .submit-success').addClass('hidden'); // hide submit success message
+      $('.post-new-comment .submit-failed').removeClass('hidden');  // show submit failed message
+    }
+    $('input[type="submit"]:enabled').removeClass('hidden'); // show "submit"
+    $('input[type="submit"]:disabled').addClass('hidden');  // hide "submitted"
+  }
+
+  function clearForm() {
+    resetReplyTarget();
+    $('.post-new-comment input[type="hidden"]')
+      .filter(function() {
+        return this.name.match(/^fields\[.*\]$/);
+      })
+      .val(''); // empty all hidden fields but not options
+    $('.post-new-comment .submit-success').addClass('hidden'); // hide submission status
+    $('.post-new-comment .submit-failed').addClass('hidden'); // hide submission status
+  }
+
+  function resetReplyTarget() {
+    $('.post-new-comment .post-reply-notice .post-reply-name').text('');
+    $('.post-new-comment .post-reply-notice .post-comment-avatar').remove();
+    $('.post-new-comment .post-reply-notice .post-reply-close-btn').remove();
+    $('.post-new-comment .post-reply-notice').addClass('hidden'); // hide reply target display
+    $('.post-new-comment input[type="hidden"]')
+      .filter(function() {
+        return this.name.match(/^fields\[reply[a-zA-Z]*\]$/);
+      })
+      .val(''); // empty all hidden fields whose name starts from "reply"
+  }
+
+  // record reply target when "reply to this comment" is pressed
+  $('.post-comment').on('click', '.post-comment-reply-btn', function (evt){
+    resetReplyTarget();
+    var cmt = $(evt.delegateTarget);
+    var replyThread = cmt.find('.post-comment-threadID').text();
+    $('.post-new-comment input[name="fields[replyThread]"]').val(replyThread);
+    $('.post-new-comment input[name="fields[replyID]"]').val(cmt.attr("id"));
+    authorTag = cmt.find('.post-comment-author');
+    replyName = authorTag.text();
+    $('.post-new-comment input[name="fields[replyName]"]').val(replyName);
+
+    // display reply target avatar and name
+    $('.post-new-comment .post-reply-notice').removeClass('hidden');
+    $('.post-new-comment .post-reply-name').text(replyName);
+    avatarTag = cmt.find('.post-comment-avatar');
+    // use clone to avoid removal of avatar in comments by resetReplyTarget()
+    $('.post-new-comment .post-reply-arrow').after(avatarTag.clone());
+    // add button for removing reply target (static method would give error msg)
+    closeBtn = $("<a class='post-reply-close-btn button'></a>");
+    $('.post-new-comment .post-reply-notice').append(closeBtn);
+  });
+
+  // handle removal of reply target when '×' is pressed
+  $('.post-new-comment .post-reply-notice').on('click', '.post-reply-close-btn', function(){
+    resetReplyTarget();
+  });
+
+  // clear form when reset button is clicked
+  $('.post-new-comment input[type="reset"]').click(function (){
+    clearForm();
+  });
+});