feat: integrate comment service

* feat: integrate vssue

* feat: integrate Disqus

Author: billyyyyy3320

docs/config/README.md

@@ -203,3 +203,18 @@ It will be enabled when `hostname` is provided. e.g.
 }
 ```
 The 404 page is excluded by default. Further options, please head to [vuepress-plugin-sitemap](https://github.com/ekoeryanto/vuepress-plugin-sitemap#options).
+
+## comment
+
+### service 
+
+Service to accomplish commenting. 
+
+- Type: `'vssue' | 'disqus';`
+- Default: `undefined`
+- Required: `false`
+
+### others
+Other options depend on which service you pick since this feature is accomplished by the plugins below. All options except `service` will be passed directly to the plugin, so take a look at their documentation for more details:
+- [vuepress-plugin-disqus-comment](https://vuepress-plugin-disqus.netlify.com/#config)
+- [vuepress-plugin-vssue](https://vssue.js.org/guide/vuepress.html#usage)

examples/blog/.vuepress/config.js

@@ -44,6 +44,10 @@ module.exports = {
       },
       sitemap: {
         hostname: 'https://yourdomain'
+      },
+      comment: {
+        service: 'disqus',
+        shortname: 'vuepress-plugin-blog'
       }
     }],
   ],

examples/blog/.vuepress/theme/layouts/Post.vue

@@ -1,3 +1,14 @@
 <template>
-  <Content/>
+  <div>
+    <Content/>
+    <Comment/>
+  </div>
 </template>
+
+<script>
+  import { Comment } from '../../../../../lib/client/components.js'
+
+  export default {
+    components: { Comment }
+  }
+</script>

package.json

@@ -29,7 +29,10 @@
   "author": "ULIVZ <chl814@foxmail.com>",
   "license": "MIT",
   "dependencies": {
+    "@vssue/api-github-v3": "^1.1.2",
+    "@vssue/vuepress-plugin-vssue": "^1.2.0",
     "vuejs-paginate": "^2.1.0",
+    "vuepress-plugin-disqus-comment": "^0.2.3",
     "vuepress-plugin-forked-sitemap": "^0.0.1"
   },
   "devDependencies": {

src/client/components.ts

@@ -2,5 +2,7 @@
 import Pagination from './components/Pagination.vue'
 // @ts-ignore
 import SimplePagination from './components/SimplePagination.vue'
+// @ts-ignore
+import Comment from './components/Comment.vue'
 
-export { Pagination, SimplePagination }
+export { Pagination, SimplePagination, Comment }

src/client/components/Comment.vue

@@ -0,0 +1,85 @@
+<template>
+  <Vssue
+    v-if="commentService === 'vssue'"
+    v-bind="propsWithoutEmptyProperties"
+    :title="$page.title"
+  />
+  <vue-disqus
+    v-else-if="commentService === 'disqus'"
+    v-bind="propsWithoutEmptyProperties"
+    :identifier="$page.key"
+  />
+</template>
+
+<script>
+  import identity from 'lodash/identity'
+  import pickBy from 'lodash/pickBy'
+
+  export default {
+    props: {
+      // vssue's props
+      title: {
+        type: String | Function,
+        required: false
+      },
+      issueId: {
+        type: String | Number,
+        required: false
+      },
+      options: {
+        type: Object,
+        required: false
+      },
+      // vue-disqus's props
+      shortname: {
+        type: String,
+        required: false
+      },
+      identifier: {
+        type: String,
+        required: false
+      },
+      url: {
+        type: String,
+        required: false
+      },
+      title: {
+        type: String,
+        required: false
+      },
+      remote_auth_s3: {
+        type: String,
+        required: false
+      },
+      api_key: {
+        type: String,
+        required: false
+      },
+      sso_config: {
+        type: Object,
+        required: false
+      },
+      language: {
+        type: String,
+        required: false
+      }
+    },
+
+    data () {
+      return {
+        commentService: COMMENT_SERVICE
+      }
+    },
+
+    computed: {
+      propsWithoutEmptyProperties () {
+        return pickBy(this.$props, identity);
+      }
+    },
+
+    mounted () {
+      if (typeof COMMENT_SERVICE === 'undefined') console.warn("There's no comment service!")
+    },
+}
+</script>
+

src/node/index.ts

@@ -1,4 +1,4 @@
-import * as path from 'path'
+import { path, logger, chalk, } from '@vuepress/shared-utils'
 import { handleOptions } from './handleOptions'
 import { registerPaginations } from './pagination'
 import { BlogPluginOptions } from './interface/Options'
@@ -45,6 +45,23 @@ module.exports = (options: BlogPluginOptions, ctx: VuePressContext) => {
     plugins.push(...sitemapDependencies)
   }
 
+  if (options.comment) {
+    const { service: commentService, ...commentOptions } = options.comment
+    switch (commentService) {
+      case 'vssue':
+        plugins.push(['@vssue/vuepress-plugin-vssue', commentOptions])
+        break;
+      case 'disqus':
+        plugins.push(['vuepress-plugin-disqus-comment', commentOptions])
+        break;
+      default:
+        logger.warn(
+          `[@vuepress/plugin-blog] Invalid comment service: ${chalk.cyan(commentService)}`
+        )
+        break;
+    }
+  }
+
   return {
     name: 'vuepress-plugin-blog',
 
@@ -209,7 +226,11 @@ export default ${serializePaginations(ctx.serializedPaginations, [
       path.resolve(__dirname, '../client/pagination.js'),
     ],
 
-    plugins
+    plugins,
+
+    define: {
+      COMMENT_SERVICE: options.comment && options.comment.service
+    }
   }
 }
 

src/node/interface/Options.ts

@@ -77,12 +77,63 @@ export interface FrontmatterClassifier {
   pagination?: PaginationConfig;
 }
 
+/**
+ * Comment configuration
+ */
+
+/**
+ * Vssue configuration
+ * For details, head Vssue documentation: https://vssue.js.org/
+ */
+export interface VssueOptions {
+  platform: 'github' | 'github-v4' | 'gitlab' | 'bitbucket' | 'gitee';
+  owner: string;
+  repo: string;
+  clientId: string;
+  clientSecret: string;
+  baseURL: string;
+  state: string;
+  labels: Array<string>;
+  prefix: string;
+  admins: Array<string>;
+  perPage: number;
+  locale: string;
+  proxy: string | ((url: string) => string);
+  issueContent: ((param: { options: VssueOptions, url: string }) => string | Promise<string>);
+  autoCreateIssue: boolean;
+}
+
+/**
+ * Disqus configuration
+ * For details, head vue-disqus documentation: https://github.com/ktquez/vue-disqus#props
+ */
+export interface DisqusOptions {
+  shortname: string;
+  identifier: string;
+  url: string;
+  title: string;
+  remote_auth_s3: string;
+  api_key: string;
+  sso_config: any;
+  language: string;
+}
+
+export interface Comment extends Partial<VssueOptions>, Partial<DisqusOptions> {
+  /**
+   * The comment service
+   */
+  service: 'vssue' | 'disqus';
+}
+
+
 /**
  * Options for this plugin.
  */
 export interface BlogPluginOptions {
   directories: DirectoryClassifier[];
   frontmatters: FrontmatterClassifier[];
   globalPagination: PaginationConfig;
-  sitemap:any
+  //TODO: define types
+  sitemap: any;
+  comment: Comment;
 }