[Feature] Staticman v3 Support

CHANGELOG.md

@@ -1,9 +1,11 @@
- # CHANGELOG
+# CHANGELOG
 
 This file lists all non-trivial changes to Beautiful Jekyll.
 
 I often make small changes to documentation, to the demo site, or to the general look-and-feel. These changes will not be listed here. Any other minor changes will also not be listed here.
 
+**2018-12-24** Add support for Staticman comments (#440) (thanks @VincentTam)
+
 **2018-10-19** Move Google Analytics to the head (#419) (thanks @jpvicari)
 
 **2018-06-08** Add support for Facebook comments (#350) (thanks @npes87184)

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2016 Dean Attali
+Copyright (c) 2015-2018 Dean Attali
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -19,3 +19,12 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
+
+
+
+staticman integration
+=================================================================================
+
+The MIT License (MIT)
+
+Copyright (c) 2013-2018 Michael Rose

README.md

@@ -104,13 +104,21 @@ Many personalization settings in `_config.yml`, such as setting your name and si
 
 ### Allowing users to leave comments
 
-If you want to enable comments on your site, Beautiful Jekyll supports either the [Disqus](https://disqus.com/) comments plugin or [Facebook](https://developers.facebook.com/docs/plugins/comments) comments.
+If you want to enable comments on your site, Beautiful Jekyll supports either the [Disqus](https://disqus.com/) comments plugin, [Facebook](https://developers.facebook.com/docs/plugins/comments) comments or [Staticman](https://staticman.net). If any of these are set in the configuration file, then all blog posts will have comments turned on by default. To turn off comments on a particular blog post, add `comments: false` to the YAML front matter. If you want to add comments on the bottom of a non-blog page, add `comments: true` to the YAML front matter.
+
+#### Disqus comments
 
 To use Disqus, simply sign up to [Disqus](https://disqus.com/) and add your Disqus shortname to the `disqus` parameter in the `_config.yml` file.
 
+#### Facebook comments
+
 To use Facebook comments, create a Facebook app using [Facebook developers](https://developers.facebook.com/docs/apps/register), and add the Facebook App ID to the `fb_comment_id` parameter in `_config.yml`.
 
-If either `disqus` or `fb_comment_id` parameters are set in the configuration file, then all blog posts will have comments turned on by default. To turn off comments on a particular blog post, add `comments: false` to the YAML front matter. If you want to add comments on the bottom of a non-blog page, add `comments: true` to the YAML front matter.
+#### Staticman comments
+
+To use Staticman, you first need to invite `staticmanlab` as a collaborator to your repository (by going to your repository **Settings** page, navigate to the **Collaborators** tab, and add the username `staticmanlab`), and then accept the invitation by going to `https://staticman3.herokuapp.com/v3/connect/github/<username>/<repo-name>`. Lastly, fill in your `repository` and `branch` in `_config.yml`. If you're not using `master` branch, then you also need to update the `branch` parameter in `staticman.yml`.
+
+![Staicman invitation screenshot](https://user-images.githubusercontent.com/5748535/50357920-e8f25500-0557-11e9-9cb6-73f8b575c4f0.png)
 
 ### Adding Google Analytics to track page views
 

_config.yml

@@ -129,6 +129,17 @@ url-pretty: "MyWebsite.com"  # eg. "deanattali.com/beautiful-jekyll"
 # To use Facebook Comments, fill in a Facebook App ID
 # fb_comment_id: ""
 
+# Staticman support
+staticman:
+  repository : # GitHub username/repo-name e.g. "daattali/beautiful-jekyll"
+  branch     : # "master"
+  endpoint   : # URL of your own deployment with trailing slash, will fallback to the public GitLab instance
+  # reCaptcha for Staticman (OPTIONAL)
+  # If you use recaptcha, you must also set these parameters in staticman.yml
+  reCaptcha:
+    siteKey  : # Use your OWN site key.  You may apply to Google for one.
+    secret   : # (!) ENCRYPT your password by opening https://staticman3.herokuapp.com/v3/encrypt/{your-site-secret}
+
 # --- Misc --- #
 
 # Facebook App ID

_includes/head.html

@@ -123,4 +123,9 @@
   {% include matomo.html %}
   {% endif %}
 
+  <!-- Staticman -->
+  {% if page.comments and site.staticman.repository and site.staticman.branch %}
+  <link rel="stylesheet" href="{{ "/css/staticman.css" | prepend: site.baseurl }}" />
+  {% endif %}
+
 </head>

_includes/staticman-comment.html

@@ -0,0 +1,22 @@
+<article id="comment{{ include.index }}" class="js-comment comment" itemprop="comment" itemscope itemtype="https://schema.org/Comment">
+  <div class="comment__avatar-wrapper">
+    <img class="comment__avatar" src="https://www.gravatar.com/avatar/{{ include.email }}?d=mm&s=80" alt="{{ include.name }}">
+  </div>
+  <div class="comment__content-wrapper">
+    <h4 class="comment__author" itemprop="author" itemscope itemtype="https://schema.org/Person">
+      {% unless include.url == blank %}
+        <span itemprop="name"><a rel="external nofollow" itemprop="url" href="{{ include.url }}">{{ include.name }}</a></span>
+      {% else %}
+        <span itemprop="name">{{ include.name }}</span>
+      {% endunless %}
+    </h4>
+    <p class="comment__date">
+      {% if include.date %}
+        {% if include.index %}<a href="#comment{{ include.index }}" itemprop="url">{% endif %}
+        <time datetime="{{ include.date | date_to_xmlschema }}" itemprop="datePublished">{{ include.date | date: "%B %d, %Y at %I:%M %p" }}</time>
+        {% if include.index %}</a>{% endif %}
+      {% endif %}
+    </p>
+    <div itemprop="text">{{ include.message | markdownify }}</div>
+  </div>
+</article>

_includes/staticman-comments.html

@@ -0,0 +1,72 @@
+{% if site.staticman.repository and site.staticman.branch %}
+  <div class="page__comments">
+    <!-- Start static comments -->
+    <div class="js-comments">
+      {% if site.data.comments[page.slug] %}
+        <h3 class="page__comments-title">{{ site.data.ui-text[site.locale].comments_title | default: "Comments" }}</h3>
+        {% 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 staticman-comment.html index=forloop.index email=email name=name url=url date=date message=message %}
+        {% endfor %}
+      {% endif %}
+    </div>
+    <!-- End static comments -->
+    <!-- Start new comment form -->
+    <div class="page__comments-form">
+      <h3 class="page__comments-title">{{ site.data.ui-text[site.locale].comments_label | default: "Leave a Comment" }}</h3>
+      <p class="small">{{ site.data.ui-text[site.locale].comment_form_info | default: "Your email address will not be published. Required fields are marked" }} <span class="required">*</span></p>
+      <form id="new_comment" class="page__comments-form js-form form" method="post" action="{{ site.staticman.endpoint | default: 'https://staticman3.herokuapp.com/v3/entry/github/' }}{{ site.staticman.repository }}/{{ site.staticman.branch }}/comments">
+        <div class="form-group">
+          <label for="comment-form-message">{{ site.data.ui-text[site.locale].comment_form_comment_label | default: "Comment" }} <small class="required">*</small></label><br>
+          <textarea type="text" rows="12" cols="36" id="comment-form-message" name="fields[message]" tabindex="1"></textarea>
+          <div class="small help-block"><a href="https://daringfireball.net/projects/markdown/">{{ site.data.ui-text[site.locale].comment_form_md_info | default: "Markdown is supported." }}</a></div>
+        </div>
+        <div class="form-group">
+          <label for="comment-form-name">{{ site.data.ui-text[site.locale].comment_form_name_label | default: "Name" }} <small class="required">*</small></label>
+          <input type="text" id="comment-form-name" name="fields[name]" tabindex="2" />
+        </div>
+        <div class="form-group">
+          <label for="comment-form-email">{{ site.data.ui-text[site.locale].comment_form_email_label | default: "Email address" }} <small class="required">*</small></label>
+          <input type="email" id="comment-form-email" name="fields[email]" tabindex="3" />
+        </div>
+        <div class="form-group">
+          <label for="comment-form-url">{{ site.data.ui-text[site.locale].comment_form_website_label | default: "Website (optional)" }}</label>
+          <input type="url" id="comment-form-url" name="fields[url]" tabindex="4"/>
+        </div>
+        <div class="form-group hidden" style="display: none;">
+          <input type="hidden" name="options[origin]" value="{{ page.url | absolute_url }}">
+          <input type="hidden" name="options[slug]" value="{{ page.slug }}">
+          <label for="comment-form-location">Not used. Leave blank if you are a human.</label>
+          <input type="text" id="comment-form-location" name="fields[hidden]" autocomplete="off"/>
+          {% if site.staticman.reCaptcha.siteKey %}<input type="hidden" name="options[reCaptcha][siteKey]" value="{{ site.staticman.reCaptcha.siteKey }}">{% endif %}
+          {% if site.staticman.reCaptcha.secret %}<input type="hidden" name="options[reCaptcha][secret]" value="{{ site.staticman.reCaptcha.secret }}">{% endif %}
+        </div>
+        <!-- Start comment form alert messaging -->
+        <p class="hidden js-notice">
+          <strong class="js-notice-text"></strong>
+        </p>
+        <!-- End comment form alert messaging -->
+        {% if site.staticman.reCaptcha.siteKey %}
+          <div class="form-group">
+            <div class="g-recaptcha" data-sitekey="{{ site.staticman.reCaptcha.siteKey }}"></div>
+          </div>
+        {% endif %}
+        <div class="form-group">
+          <button type="submit" id="comment-form-submit" tabindex="5" class="btn btn--primary btn--large">{{ site.data.ui-text[site.locale].comment_btn_submit | default: "Submit Comment" }}</button>
+        </div>
+      </form>
+    </div>
+    <!-- End new comment form -->
+    <!-- Load reCaptcha if site key is set -->
+    {% if site.staticman.reCaptcha.siteKey %}
+      <script async src="https://www.google.com/recaptcha/api.js"></script>
+    {% endif %}
+  </div>
+  <!-- Load script to handle comment form submission -->
+  {% include staticman-script.html %}
+{% endif %}

_includes/staticman-script.html

@@ -0,0 +1,47 @@
+{% if site.staticman.repository and site.staticman.branch %}
+  <!-- doing something a bit funky here because I want to be careful not to include JQuery twice! -->
+  <script>
+    if (typeof jQuery == 'undefined') {
+      document.write('<script src="/beautiful-jekyll/js/jquery-1.11.2.min.js"></scr' + 'ipt>');
+    }
+  </script>
+  <script>
+    (function ($) {
+    var $comments = $('.js-comments');
+
+    $('#new_comment').submit(function () {
+      var form = this;
+
+      $(form).addClass('disabled');
+
+      $.ajax({
+        type: $(this).attr('method'),
+        url: $(this).attr('action'),
+        data: $(this).serialize(),
+        contentType: 'application/x-www-form-urlencoded',
+        success: function (data) {
+          $('#comment-form-submit').html('{{ site.data.ui-text[site.locale].comment_btn_submitted | default: "Submitted" }}');
+          $('.page__comments-form .js-notice').removeClass('notice--danger');
+          $('.page__comments-form .js-notice').addClass('notice--success');
+          showAlert('{{ 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." }}');
+        },
+        error: function (err) {
+          console.log(err);
+          $('#comment-form-submit').html('{{ site.data.ui-text[site.locale].comment_btn_submit  | default: "Submit Comment" }}');
+          $('.page__comments-form .js-notice').removeClass('notice--success');
+          $('.page__comments-form .js-notice').addClass('notice--danger');
+          showAlert('{{ 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('disabled');
+        }
+      });
+
+      return false;
+    });
+
+    function showAlert(message) {
+      $('.page__comments-form .js-notice').removeClass('hidden');
+      $('.page__comments-form .js-notice-text').html(message);
+    }
+  })(jQuery);
+  </script>
+{% endif %}

_layouts/page.html

@@ -13,6 +13,9 @@
 	        {% include disqus.html %}
         </div>
 	        {% include fb-comment.html %}
+        <div class="staticman-comments">
+          {% include staticman-comments.html %}
+        </div>
 	    {% endif %}
     </div>
   </div>

_layouts/post.html

@@ -70,6 +70,9 @@
           {% include disqus.html %}
         </div>
           {% include fb-comment.html %}
+        <div class="staticman-comments">
+          {% include staticman-comments.html %}
+        </div>
       {% endif %}
     </div>
   </div>

_posts/2015-02-28-test-markdown.md

@@ -5,6 +5,7 @@ subtitle: Each post also has a subtitle
 gh-repo: daattali/beautiful-jekyll
 gh-badge: [star, fork, follow]
 tags: [test]
+comments: true
 ---
 
 You can write regular [markdown](http://markdowntutorial.com/) here and Jekyll will automatically convert it to a nice webpage.  I strongly encourage you to [take 5 minutes to learn how to write in markdown](http://markdowntutorial.com/) - it'll teach you how to transform regular text into bold/italics/headings/tables/etc.