GitHub comments prototype

README.md

@@ -36,6 +36,7 @@ Additional configuration this theme:
 - touchIcon: Link of Apple Touch Icon.
 - hideNico: Hide nico copyright at bottom.
 - github: Github link, a github fork badge will display.
+- github_issues: GitHub issues link, all comments of the issue will display.
 - navigation: A array of items of navigation.
 
 GitHub example:
@@ -80,3 +81,11 @@ If you prefer duoshuo:
     "duoshuo": "short name"
 }
 ```
+
+Use GitHub Comments:
+
+```
+{
+    "github_issues": "Your github repo issues url" // For example: https://github.com/7anshuai/nico-minimal/issues
+}
+```

templates/_gh-comments.html

@@ -0,0 +1,45 @@
+<div class="gh-comments" data-comment-id="{{post.gh_issue_id}}" data-title="{{ post.title }}"></div>
+<script type="text/javascript">
+  (function (){
+    if (!'{{post.gh_issue_id}}') return false;
+    var gh_comments = document.getElementsByClassName('gh-comments')[0];
+    var a = document.createElement('a');
+    a.href = '{{config.github_issues}}';
+    var gh_api = 'https://api.github.com/repos' + a.pathname;
+    var gh_issue_id = '{{post.gh_issue_id}}';
+    var gh_issue_url = a.href +  '/' + gh_issue_id;
+    var gh_comments_url = gh_api + '/' + gh_issue_id + '/comments';
+    fetch(gh_comments_url, {
+      headers: new Headers({
+        'Accept': 'application/vnd.github.v3.html+json',
+        'Content-Type': 'application/json'
+      }),
+      method: 'GET'
+    }).then((res) => {
+      if (res.status == 200) return res.json();
+      let error = new Error('HTTP Exception[GET]');
+      error.status = res.status;
+      error.statusText = res.statusText;
+      error.url = res.url;
+      throw error;
+    }).then((json) => {
+        gh_comments.insertAdjacentHTML('afterbegin', `<p>Visit the <a href="${gh_issue_url}">GitHub Issue</a> to comment on this post.</p>`);
+        gh_comments.insertAdjacentHTML('afterbegin', `<h3>GitHub Comments</h3>`);
+        for (let comment of json) {
+          let date = new Date(comment.created_at);
+          let c = '<div class="gh-comment">' +
+              `<img src="${comment.user.avatar_url}" width="24px"> ` +
+              `<a href="${comment.user.html_url}">${comment.user.login}</a>` +
+              ' posted at ' +
+              `<time>${date.toUTCString()}</time>` +
+              '<hr>' +
+              comment.body_html +
+              '</div>';
+          gh_comments.insertAdjacentHTML('beforeend', c);
+        }
+    }).catch((err) => {
+      gh_comments.insertAdjacentHTML('afterbegin', `<p>Comments are not open for this post yet</p>`);
+      gh_comments.insertAdjacentHTML('afterbegin', `<h3>GitHub Comments</h3>`);
+    })
+  })();
+</script>

templates/post.html

@@ -28,5 +28,8 @@ <h1 class="entry-title" itemprop="name">{{post.title}}</h1>
   {%- if config.duoshuo %}
   {%- include "_duoshuo.html" %}
   {%- endif %}
+  {%- if config.github_issues %}
+  {%- include "_gh-comments.html" %}
+  {%- endif %}
 </div>
 {% endblock -%}