From bd9da710835d1d123a1bbbbc13ceedbc39ac53b8 Mon Sep 17 00:00:00 2001
From: spiritree <spiritreess@gmail.com>
Date: Thu, 9 Nov 2017 18:25:47 +0800
Subject: [PATCH] feat: add gitalk plugin

---
 build/build.js        |  3 ++-
 docs/plugins.md       | 22 ++++++++++++++++++++++
 src/plugins/gitalk.js | 17 +++++++++++++++++
 3 files changed, 41 insertions(+), 1 deletion(-)
 create mode 100644 src/plugins/gitalk.js

diff --git a/build/build.js b/build/build.js
index 4057d27c3..0f2015240 100644
--- a/build/build.js
+++ b/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 => {
diff --git a/docs/plugins.md b/docs/plugins.md
index fdca5bb35..e94c75781 100644
--- a/docs/plugins.md
+++ b/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>
+```
\ No newline at end of file
diff --git a/src/plugins/gitalk.js b/src/plugins/gitalk.js
new file mode 100644
index 000000000..f91e21df2
--- /dev/null
+++ b/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)