Implement Jekyll Blog Comments

Following the instructions in https://github.com/damieng/jekyll-blog-comments
to set up haacked.com to use a jekyll+azure based comment system.

_config.yml

@@ -20,10 +20,6 @@ twitter:
   username: haacked
 twitter_tweet_button: true
 
-# Disqus Comments
-disqus_short_name: haacked
-disqus_show_comment_count: true
-
 # Google Analytics
 google_analytics_tracking_id: UA-177588-1
 
@@ -62,3 +58,30 @@ feed:
 sass:
   sass_dir:          _scss
   style:            :compressed
+
+emptyArray: []
+
+comments:
+  receiver: https://haacked-blog.azurewebsites.net/api/PostComment
+
+authors:
+  haacked:
+    name: Phil Haack
+    email: haacked@gmail.com
+    url: https://haacked.com
+
+defaults:
+  -
+    scope:
+      path: ''
+      type: pages
+    values:
+      layout: page
+      author: haacked
+  -
+    scope:
+      path: '_posts'
+      type: posts
+    values:
+      layout: post
+      author: haacked

_includes/archive_post.html

@@ -15,7 +15,7 @@ <h3 class="title"><a href="{{ post.url }}">{{post.title}}</a></h3>
 			{% if post.categories.length > 0 %}
 			<span class="tags">{% include post/categories.html %}</span>
 			{% endif %}
-		    {% if site.disqus_short_name and post.comments == true and site.disqus_show_comment_count == true %}
+		    {% if post.comments == true %}
 		    {% include post/comments_link.html %}
 		    {% endif %}
 		    <span class="edit">{% include post/edit.html %}</span>

_includes/comment-new.html

@@ -0,0 +1,48 @@
+<h3>Respond to this</h3>
+<form action="/fake" method="post" id="commentform" class="form-horizontal">
+  <input name="redirect" type="hidden" value="/thanks">
+  <input name="post_id" type="hidden" value="{{ slug }}">
+  <div id="commenttext">
+    <textarea name="comment" id="comment" placeholder="Continue the discussion."></textarea>
+  </div>
+  <div class="control-group">
+    <label for="name">Name/alias <span>(Required, displayed)</span></label>
+    <input type="text" name="name" id="name" placeholder="Name" />
+  </div>
+  <div class="control-group">
+    <label for="email">Email <span>(Required, not shown)</span></label>
+    <input type="text" name="email" id="email" placeholder="myemail@somedomain.com" />
+  </div>
+  <div class="control-group">
+    <label for="url">Website <span>(Optional, displayed)</span></label>
+    <input type="text" name="url" id="url" placeholder="https://mywebsite.com" />
+  </div>
+  <div class="control-group">
+    <label>&nbsp;</label>
+    <button onclick="setupForm()" type="button" class="btn btn-primary" id="commentbutton">Leave response</button>
+  </div>
+</form>
+<script>
+    function setupForm() {
+      var status = document.getElementById('commentstatus')
+      status.innerText = ''
+      var requiredIds = ['message', 'email', 'name']
+      var missing = requiredIds.filter(id => document.getElementById(id).value.length < 3)
+      if (missing.length > 0) {
+        status.innerText = 'Some required fields are missing - (' + missing.join(', ') + ')'
+        return
+      }
+      var button = document.getElementById('commentbutton')
+      if (button.innerText != 'Confirm comment') {
+        button.innerText = 'Confirm comment'
+        return
+      }
+      var form = document.getElementById('commentform')
+      form.action = '{{ site.comments.receiver }}'
+      button.innerText = 'Posting...'
+      button.disabled = true
+      form.submit()
+    }
+  </script>
+</form>
+<div id="commentstatus" style="clear:both" class="status"></div>

_includes/comment.html

@@ -0,0 +1,30 @@
+{% if comment.url %}
+<a href="{{ comment.url }}" rel="nofollow">
+  <img alt="Gravatar for {{ comment.name | xml_escape }}" src="https://secure.gravatar.com/avatar/{{ comment.gravatar }}?s=64&amp;d=retro&amp;r=pg" srcset="https://secure.gravatar.com/avatar/{{ comment.gravatar }}?s=128&amp;d=retro&amp;r=pg 2x" class="avatar avatar-64 photo" height="64" width="64">
+</a>
+{% else %}
+<img alt="Gravatar for {{ comment.name | xml_escape }}" src="https://secure.gravatar.com/avatar/{{ comment.gravatar }}?s=64&amp;d=retro&amp;r=pg" srcset="https://secure.gravatar.com/avatar/{{ comment.gravatar }}?s=128&amp;d=retro&amp;r=pg 2x" class="avatar avatar-64 photo" height="64" width="64">
+{% endif %}
+
+<blockquote id="{{ comment.id }}">
+  <div class="comment-body">{{ comment.message | markdownify }}</div>
+  <cite>
+    {% if comment.url %}
+      <a href="{{ comment.url }}" rel="nofollow">{{ comment.name | xml_escape }}</a>
+    {% else %}
+      {{ comment.name | xml_escape }}
+    {% endif %}
+    &ndash;
+    <span class="muted" title="{{ comment.date | date_to_rfc822 }}">
+      {{ comment.date | date: '%B' }}
+      {% assign d = comment.date | date: "%-d" %}
+      {% case d %}
+        {% when '1' or '21' or '31' %}{{d}}st,
+        {% when '2' or '22' %}{{d}}nd,
+        {% when '3' or '23' %}{{d}}rd,
+        {% else %}{{d}}th,
+      {% endcase %}
+      {{ comment.date | date: '%Y' }}
+    </span>
+  </cite>
+</blockquote>

_includes/comments.html

@@ -0,0 +1,23 @@
+{% capture default_slug %}{{ page.slug | default: (page.title | slugify) }}{% endcapture %}
+{% capture slug %}{{ (page.slug | fallback: default_slug) | downcase | replace: '.', '-' }}{% endcapture %}
+{% assign comments_map = site.data.comments[slug] %}
+{% assign comments = site.emptyArray %}
+{% for comment in comments_map %}
+  {% assign comments = comments | push: comment[1] %}
+{% endfor %}
+{% assign comment_count = comments | size %}
+{% if comment_count > 0 %}
+  {% assign author = site.authors[page.author] %}
+<div id="comments">
+  <h3>{% if comment_count == 1 %}One response{% else %}{{ comment_count }} responses{% endif %}</h3>
+  <ol>
+  {% assign sorted_comments = comments | sort: 'date' %}
+  {% for comment in sorted_comments %}
+    <li{% if comment.email == author.email %} class="byauthor" {% endif %}>
+      {% include comment.html %}
+    </li>
+  {% endfor %}
+  </ol>
+</div>
+{% endif %}
+{% include comment-new.html %}

_includes/footer.html

@@ -6,5 +6,4 @@
   | <a href="/articles/blogtegrity">blogtegrity</a>
 </p>
 
-{% include disqus.html %}
 {% include twitter_sharing.html %}

_layouts/page.html

@@ -11,6 +11,8 @@ <h1 class="title">{% if site.titlecase %}{{ page.title | titlecase }}{% else %}{
 {% if site.disqus_short_name and page.comments == true %}
 <section id="comment">
     <h1 class="title">Comments</h1>
-    <div id="disqus_thread" aria-live="polite">{% include post/disqus_thread.html %}</div>
+    <div aria-live="polite">
+      {% include comments.html %}
+    </div>
 </section>
 {% endif %}

_layouts/post.html

@@ -25,9 +25,9 @@
         </div>
 </div>
 
-{% if site.disqus_short_name and page.comments == true %}
 <section id="comment">
     <h1 class="title">Comments</h1>
-    <div id="disqus_thread" aria-live="polite">{% include post/disqus_thread.html %}</div>
+		<div aria-live="polite">
+      {% include comments.html %}
+    </div>
 </section>
-{% endif %}

privacy/index.markdown

@@ -31,13 +31,11 @@ share in the first place.
 ## What Information Do You Collect?
 
 This site doesn't itself collect data. It's a static site hosted on GitHub Pages.
-However, I do use Google Analytics so it's worth looking at [Google Analytic's privacy policy](http://www.google.com/analytics/learn/privacy.html). 
-I also use Disqus for comments, so take a look at the [Disqus's privacy policy](http://help.disqus.com/customer/portal/articles/466259-privacy-policy).
-
+However, I do use Google Analytics so it's worth looking at [Google Analytic's privacy policy](http://www.google.com/analytics/learn/privacy.html).
 
 ## What About Cookies?
 
-See the previous answer about Disqus and Google Analytics.
+See the previous answer about Google Analytics.
 
 ## So Who Do You Share This Information With?
 
@@ -46,4 +44,3 @@ Absolutely nobody, other than occasionally posting aggregate stats about my blog
 ## Even If I Offered You 10 Million Dollars?
 Let's talk off-line in private.... er... I mean NO! Absolutely Not.
 Haacked.com doesn't gather any information worth selling.
-