Merge pull request haacked#316 from Haacked/add-comment-system

Implement Jekyll Blog Comments

Former-commit-id: 8bce6ac
Former-commit-id: b87b5ff
Former-commit-id: 8e1b28192658bf1a6bfa9602c8f1da9e069c0fa6 [formerly b4030cb43276b32bfaadc7e65df487fdcb30a4c4]
Former-commit-id: 1372e684ab75e0eed6b53a6c9b31d65ec1ba2911

_config.yml

@@ -17,10 +17,6 @@ github_repo_url: https://github.com/Haacked/haacked.com/
 # Twitter
 twitter_user: haacked
 
-# Disqus Comments
-disqus_short_name: haacked
-disqus_show_comment_count: true
-
 # Google Analytics
 google_analytics_tracking_id: UA-177588-1
 
@@ -59,3 +55,30 @@ feed:
 sass:
   sass_dir:          _scss
   style:            :compressed
+
+emptyArray: []
+
+comments:
+  receiver: https://haacked-blog.azurewebsites.net/api/PostComment
+
+authors:
+  haacked:
+    name: haacked
+    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,9 +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 %}
-		    {% include post/comments_link.html %}
-		    {% endif %}
-		    <span class="edit">{% include post/edit.html %}</span>
+	    {% include post/comments_link.html %}
+	    <span class="edit">{% include post/edit.html %}</span>
 		</div>
 	</li>

_includes/comment-new.html

@@ -0,0 +1,26 @@
+<form action="/fake" data-action="{{ site.comments.receiver }}" method="post" id="commentform" class="form-horizontal comment-box">
+  <input name="redirect" type="hidden" value="{{site.url}}/thanks">
+  <input name="post_id" type="hidden" value="{{ slug }}">
+  <input name="comment-site" type="hidden" value="{{ site.url }}">
+  <div id="comment-box">
+    <img src="/images/comments/unknown-avatar.png" data-fallbacksrc="/images/comments/unknown-avatar.png" data-role="user-avatar" alt="avatar" class="avatar" id="avatarPreview" />
+    <div id="commenttext">
+      <div id="commentstatus" class="status"></div>
+      <div contenteditable="PLAINTEXT-ONLY" tabindex="0" role="textbox" aria-multiline="true" data-role="editable" class="textarea" aria-label="Join the discussion..." id="comment-div"></div>
+      <input type="hidden" name="message" id="message" data-required="true" value="" />
+    </div>
+  </div>
+  <div id="comment-author">
+    <div class="control-group">
+      <input type="hidden" name="avatar" id="avatarInput" />
+      <input type="text" name="name" id="name" placeholder="Display Name" title="Name displayed with your comment" data-required="true" />
+      <input type="text" name="identity" id="identity" placeholder="email/@twitter/github" data-required="true" value="" />
+      <span class="info-circle" title="Identity is used to generate an avatar image only. It is not submitted with the form."></span>
+      <button type="button" id="commentbutton">Leave response</button>
+      <div id="remember-me">
+        <input type="checkbox" name="remember" id="remember"><label for="remember">Remember me</label>
+        <span class="info-circle" title="Stores your name and email in the browser so you don't have to fill out the form again. This does not set a cookie."></span>
+      </div>
+    </div>
+  </div>
+</form>

_includes/comment.html

@@ -0,0 +1,32 @@
+{% if comment.url %}
+<a href="{{ comment.url }}" rel="nofollow">
+  <img alt="Avatar for {{ comment.name | xml_escape }}" src="{{comment.avatar}}" class="avatar" height="48" width="48">
+</a>
+{% else %}
+<img alt="Avatar for {{ comment.name | xml_escape }}" src="{{comment.avatar}}" class="avatar" height="48" width="48">
+{% endif %}
+
+<blockquote id="{{ comment.id }}">
+  <cite>
+    <span class="author">
+      {% if comment.url %}
+        <a href="{{ comment.url }}" rel="nofollow">{{ comment.name | xml_escape }}</a>
+      {% else %}
+        {{ comment.name | xml_escape }}
+      {% endif %}
+    </span>
+    <span class="bullet">•</span>
+    <a href="#{{ comment.id }}" 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' }}
+    </a>
+  </cite>
+  <div class="comment-body">{{ comment.message | markdownify }}</div>
+</blockquote>

_includes/comments.html

@@ -0,0 +1,22 @@
+{% 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 %}
+{% assign author = site.authors[page.author] %}
+<div id="comments">
+  <h2>Comments</h2>
+  {% include comment-new.html %}
+  <h3 id="comment-count">{% if comment_count == 1 %}One response{% else %}{{ comment_count }} responses{% endif %}</h3>
+  <ol id="comments-list">
+  {% assign sorted_comments = comments | sort: 'date' %}
+  {% for comment in sorted_comments %}
+    <li{% if comment.name == author.name %} class="byauthor" {% endif %}>
+      {% include comment.html %}
+    </li>
+  {% endfor %}
+  </ol>
+</div>

_includes/footer.html

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

_includes/head.html

@@ -18,7 +18,10 @@
 	<link href="/favicon.ico" rel="shortcut icon">
 	<link rel="stylesheet" href="/css/styles.css">
 	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+  <script src="/js/utils.js"></script>
 	<script src="/js/slash.js" async></script>
-		{% seo %}
-  	{% include google_analytics.html %}
+	<script src="/js/md5.min.js" async></script>
+	<script src="/js/comment-box.js" async></script>
+	{% seo %}
+	{% include google_analytics.html %}
 </head>

_includes/post/comments_link.html

@@ -1,7 +1,3 @@
-{% if post.disqus_identifier %}
-  {% assign disqus_identifier = post.disqus_identifier %}
-{% else %}
-  {% assign disqus_identifier = page.disqus_identifier %}
+{% if post.comments or page.comments %}
+<span class="comments"><a href="{{ post.url }}#comments">comments</a></span>
 {% endif %}
-
-<span class="comments"><a href="{{ post.url }}#disqus_thread"{% if disqus_identifier %} data-disqus-identifier="{{ disqus_identifier }}"{% endif %}>comments</a></span>

_includes/post/meta.html

@@ -1,8 +1,6 @@
 <div class="meta">
 	<span class="date">{% include post/date.html %}{{ time }}</span>
 	<span class="tags">{% include post/categories.html %}</span>
-	{% if site.disqus_short_name and site.disqus_show_comment_count == true %}
-		{% include post/comments_link.html %}
-	{% endif %}
+	{% include post/comments_link.html %}
 	<span class="edit">{% include post/edit.html %}</span>
-</div>
+</div>

_layouts/page.html

@@ -8,9 +8,7 @@ <h1 class="title">{% if site.titlecase %}{{ page.title | titlecase }}{% else %}{
     {% endif %}
     <div class="entry-content">{{ content }}</div>
 </article>
-{% 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>
-</section>
+
+{% if page.comments == true %}
+  {% include comments.html %}
 {% endif %}

_layouts/post.html

@@ -26,9 +26,4 @@
         </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>
-</section>
-{% endif %}
+{% include comments.html %}