feat: add gitalk plugin (#306)

build/build.js

@@ -49,7 +49,8 @@ var plugins = [
   { name: 'front-matter', entry: 'front-matter/index.js' },
   { name: 'zoom-image', entry: 'zoom-image.js' },
   { name: 'codesponsor', entry: 'codesponsor.js' },
-  { name: 'disqus', entry: 'disqus.js' }
+  { name: 'disqus', entry: 'disqus.js' },
+  { name: 'gitalk', entry: 'gitalk.js' }
 ]
 
 plugins.forEach(item => {

docs/plugins.md

@@ -161,3 +161,25 @@ Disqus comments. https://disqus.com/
 </script>
 <script src="//unpkg.com/docsify/lib/plugins/disqus.min.js"></script>
 ```
+
+## Gitalk
+
+Gitalk is a modern comment component based on Github Issue and Preact. https://github.com/gitalk/gitalk
+
+```html
+<link rel="stylesheet" href="//unpkg.com/gitalk/dist/gitalk.css">
+
+<script src="//unpkg.com/docsify/lib/plugins/gitalk.min.js"></script>
+<script src="//unpkg.com/gitalk/dist/gitalk.min.js"></script>
+<script>
+  const gitalk = new Gitalk({
+    clientID: 'Github Application Client ID',
+    clientSecret: 'Github Application Client Secret',
+    repo: 'Github repo',
+    owner: 'Github repo owner',
+    admin: ['Github repo collaborators, only these guys can initialize github issues'],
+    // facebook-like distraction free mode
+    distractionFreeMode: false
+  })
+</script>
+```

src/plugins/gitalk.js

@@ -0,0 +1,17 @@
+function install (hook, vm) {
+  const dom = Docsify.dom
+
+  hook.mounted(_ => {
+    const div = dom.create('div')
+    div.id = 'gitalk-container'
+    const main = dom.getNode('#main')
+    div.style = `width: ${main.clientWidth}px; margin: 0 auto 20px;`
+    dom.appendTo(dom.find('.content'), div)
+    const script = dom.create('script')
+    const content = `gitalk.render('gitalk-container')`
+    script.textContent = content
+    dom.appendTo(dom.body, script)
+  })
+}
+
+$docsify.plugins = [].concat(install, $docsify.plugins)