chore(comment): improve gitalk comment integration

includes/helpers/site.js

@@ -9,9 +9,11 @@
 *     <%- tag_count() %>
 *     <%- duration() %>
 *     <%- word_count(content) %>
+*     <%- md5(data) %>
  */
 const URL = require('url').URL;
 const moment = require('moment');
+const crypto = require('crypto');
 
 module.exports = function (hexo) {
     hexo.extend.helper.register('is_same_link', function (a, b) {
@@ -57,4 +59,8 @@ module.exports = function (hexo) {
         content = content.trim();
         return content ? (content.match(/[\u00ff-\uffff]|[a-zA-Z]+/g) || []).length : 0;
     });
+
+    hexo.extend.helper.register('md5', function (data) {
+        return crypto.createHash('md5').update(data).digest("hex")
+    });
 }

includes/specs/comment.spec.js

@@ -24,30 +24,40 @@ const DisqusSpec = {
     }
 };
 
-const GitmentSpec = {
+const GitmentGitalkSpec = {
     owner: {
         [type]: 'string',
-        [doc]: 'Your GitHub ID',
+        [doc]: 'GitHub user ID',
         [required]: true,
-        [requires]: comment => comment.type === 'gitment'
+        [requires]: comment => comment.type === 'gitment' || comment.type === 'gitalk'
     },
     repo: {
         [type]: 'string',
-        [doc]: 'The repo to store comments',
+        [doc]: 'GitHub repo name to store comments',
         [required]: true,
-        [requires]: comment => comment.type === 'gitment'
+        [requires]: comment => comment.type === 'gitment' || comment.type === 'gitalk'
     },
     client_id: {
         [type]: 'string',
-        [doc]: 'Your client ID',
+        [doc]: 'GitHub application client ID',
         [required]: true,
-        [requires]: comment => comment.type === 'gitment'
+        [requires]: comment => comment.type === 'gitment' || comment.type === 'gitalk'
     },
     client_secret: {
         [type]: 'string',
-        [doc]: 'Your client secret',
+        [doc]: 'GitHub application client secret',
         [required]: true,
-        [requires]: comment => comment.type === 'gitment'
+        [requires]: comment => comment.type === 'gitment' || comment.type === 'gitalk'
+    },
+    admin: {
+        [type]: ['string', 'array'],
+        [doc]: 'GitHub repo owner and collaborators who can can initialize github issues',
+        [required]: true,
+        [requires]: comment => comment.type === 'gitalk',
+        '*': {
+            [type]: 'string',
+            [required]: true
+        }
     }
 };
 
@@ -112,7 +122,7 @@ module.exports = {
     },
     ...ChangYanSpec,
     ...DisqusSpec,
-    ...GitmentSpec,
+    ...GitmentGitalkSpec,
     ...IssoSpec,
     ...LiveReSpec,
     ...ValineSpec

layout/comment/gitalk.ejs

@@ -0,0 +1,22 @@
+<% if (!has_config('comment.owner') || !has_config('comment.admin') || !has_config('comment.repo') || !has_config('comment.client_id') ||
+		!has_config('comment.client_secret')) { %>
+<div class="notification is-danger">
+    You forgot to set the <code>owner</code>, <code>admin</code>, <code>repo</code>, <code>client_id</code>, or <code>client_secret</code> for Gittalk.
+    Please set it in <code>_config.yml</code>.
+</div>
+<% } else { %>
+<div id="comment-container"></div>
+<%- _css(cdn('gitalk', '1.4.1', 'dist/gitalk.css')) %>
+<%- _js(cdn('gitalk', '1.4.1', 'dist/gitalk.min.js')) %>
+<script>
+    var gitalk = new Gitalk({
+        clientID: '<%= get_config('comment.client_id') %>',
+        clientSecret: '<%= get_config('comment.client_secret') %>',
+        id: '<%= md5(page.path) %>',
+        repo: '<%= get_config('comment.repo') %>',
+        owner: '<%= get_config('comment.owner') %>',
+        admin: <%- JSON.stringify(get_config('comment.admin'))%>
+    })
+    gitalk.render('comment-container')
+</script>
+<% } %>

layout/comment/gittalk.ejs

@@ -1,23 +0,0 @@
-<% if (!has_config('comment.owner') || !has_config('comment.admin') || !has_config('comment.repo') || !has_config('comment.client_id') ||
-		!has_config('comment.client_secret')) { %>
-<div class="notification is-danger">
-	You forgot to set the <code>owner</code>, <code>admin</code>, <code>repo</code>, <code>client_id</code>, or <code>client_secret</code> for Gittalk.
-	Please set it in <code>_config.yml</code>.
-</div>
-<% } else { %>
-<div id="comment-container"></div>
-<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
-<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/blueimp-md5@2.10.0/js/md5.min.js"></script>
-<script>
-	var gitalk = new Gitalk({
-        clientID:  '<%= get_config('comment.client_id') %>', 
-        clientSecret: '<%= get_config('comment.client_secret') %>',
-        id: md5(decodeURI(location.pathname)),
-        repo: '<%= get_config('comment.repo') %>', 
-        owner: '<%= get_config('comment.owner') %>', 
-        admin: '<%= get_config('comment.admin') %>'
-      })
-    gitalk.render('comment-container')
-</script>
-<% } %>

source/js/clipboard.js

@@ -1,8 +1,10 @@
 document.addEventListener('DOMContentLoaded', function () {
-    $('figure.highlight').each(function () {
-        var id = 'code-' + Date.now() + (Math.random() * 1000 | 0);
-        $(this).attr('id', id);
-        $(this).prepend($(`<button class="button is-borderless is-radiusless is-small copy" data-clipboard-target="#${id} .code" title="Copy"><i class="fas fa-copy"></i></button>`));
-    });
-    new ClipboardJS('.highlight .copy');
+    if (typeof(ClipboardJS) !== 'undefined') {
+        $('figure.highlight').each(function () {
+            var id = 'code-' + Date.now() + (Math.random() * 1000 | 0);
+            $(this).attr('id', id);
+            $(this).prepend($(`<button class="button is-borderless is-radiusless is-small copy" data-clipboard-target="#${id} .code" title="Copy"><i class="fas fa-copy"></i></button>`));
+        });
+        new ClipboardJS('.highlight .copy');
+    }
 });