feat: Add disqus support (#11)

README.md

@@ -184,6 +184,32 @@ The `topic` should be a valid [GitHub topic](https://github.com/topics), if the
 
 You can check if the image exists by visiting `https://github.com/github/explore/tree/master/topics/{topic}` (replace `{topic}` with actual topic).
 
+### Comments
+
+You can use Disqus for comments:
+
+```yml
+themeConfig:
+  disqus: disqus-short-name
+
+# Note that `siteConfig.url` is required for Disqus
+siteConfig:
+  url: https://example.com
+```
+
+Comments are only enabled for `post` layout, to disable comments in specific page, you can use the page attribute `comments`:
+
+```markdown
+---
+title: Hello
+layout: post
+date: 2018-08-12
+comments: false
+---
+
+Hello World!
+```
+
 ## License
 
 MIT © [EGOIST](https://github.com/egoist)

demo/saber-config.js

@@ -3,7 +3,8 @@
 
 module.exports = {
   siteConfig: {
-    description: 'An unsung artist.'
+    description: 'An unsung artist.',
+    url: 'https://create-portfolio-demo.saber.land'
   },
 
   // Use the package `saber-theme-portfolio`
@@ -18,6 +19,7 @@ module.exports = {
     twitter: '_egoistlily',
     sponsorLink: 'https://patreon.com/egoist',
     sponsorTip: 'Support my work',
+    disqus: 'create-portfolio',
     nav: [
       {
         text: 'Home',

packages/saber-theme-portfolio/src/components/Disqus.vue

@@ -0,0 +1,36 @@
+<template>
+  <div id="disqus_thread"></div>
+</template>
+
+<script>
+export default {
+  props: {
+    url: {
+      type: String,
+      required: true
+    },
+    permalink: {
+      type: String,
+      required: true
+    },
+    shortname: {
+      type: String,
+      required: true
+    }
+  },
+
+  mounted() {
+    const { permalink, url } = this
+    window.disqusConfig = function() {
+      this.page.url = `${url}${permalink}`
+      this.page.identifier = permalink
+    }
+
+    const script = document.createElement('script')
+    script.async = true
+    script.src = `https://${this.shortname}.disqus.com/embed.js`
+    script.setAttribute('data-timestamp', Number(new Date()))
+    document.body.append(script)
+  }
+}
+</script>

packages/saber-theme-portfolio/src/layouts/post.vue

@@ -22,6 +22,13 @@
               {{ tag.name }}
             </saber-link>
           </div>
+          <Disqus
+            v-if="page.attributes.comments !== false && $themeConfig.disqus"
+            class="comment"
+            :url="$siteConfig.url"
+            :permalink="page.attributes.permalink"
+            :shortname="$themeConfig.disqus"
+          />
         </div>
       </div>
     </div>
@@ -31,12 +38,14 @@
 <script>
 import { CornerUpLeftIcon, HashIcon } from 'vue-feather-icons'
 import PostMeta from '../components/PostMeta.vue'
+import Disqus from '../components/Disqus.vue'
 
 export default {
   components: {
     CornerUpLeftIcon,
     PostMeta,
-    HashIcon
+    HashIcon,
+    Disqus
   },
 
   props: ['page'],
@@ -139,4 +148,8 @@ export default {
     color: var(--text-color);
   }
 }
+
+.comment {
+  margin-top: 60px;
+}
 </style>