add Waline support

Author: SivanLaai

Comment.vue

@@ -5,8 +5,6 @@
 <script>
 import {
   provider,
-  renderConfig,
-  loadScript,
 } from './util'
 
 const commentDomID = 'vuepress-plugin-comment' 
@@ -41,16 +39,19 @@ export default {
  * Clear last page comment dom
  */
 function clear (frontmatter) {
+  let el = COMMENT_OPTIONS.el || commentDomID
+  if (el.startsWith('#')) {
+    el = el.slice(1)
+  }
   switch (COMMENT_CHOOSEN) {
     case 'gitalk': 
       return provider.gitalk.clear(commentDomID)
     case 'valine': 
-      let el = COMMENT_OPTIONS.el || commentDomID
-      if (el.startsWith('#')) {
-        el = el.slice(1)
-      }
       console.log(el)
       return provider.valine.clear(el)
+    case 'waline':
+      console.log(el)
+      return provider.waline.clear(el)
     default: return false
   }
 }
@@ -74,15 +75,17 @@ function renderComment (frontmatter) {
     return 
   }
 
+  let el = COMMENT_OPTIONS.el || commentDomID
+  if (el.startsWith('#')) {
+    el = el.slice(1)
+  }
   switch (COMMENT_CHOOSEN) {
     case 'gitalk': 
       return provider.gitalk.render(frontmatter, commentDomID)
     case 'valine': 
-      let el = COMMENT_OPTIONS.el || commentDomID
-      if (el.startsWith('#')) {
-        el = el.slice(1)
-      }
       return provider.valine.render(frontmatter, el)
+    case 'waline': 
+      return provider.waline.render(frontmatter, el)
     default: return false
   }
 }

README.md

@@ -1,4 +1,4 @@
-# Vuepress-comment-plugin
+# Vuepress-comment-plugin-plus
 
 [![](https://img.shields.io/badge/online-preview-faad14.svg?style=popout-square)](https://xin-tan.com/)
 [![](https://img.shields.io/npm/dm/vuepress-plugin-comment.svg?style=flat-square)](https://www.npmjs.com/package/vuepress-plugin-comment)
@@ -15,12 +15,14 @@
   - [⚠️Route object properties](#⚠️Route-object-properties)
   - [Use with Gitalk](#use-in-gitalk)
   - [Use with Valine](#use-in-valine)
+  - [Use with Waline](#use-in-waline)
   - [Hide comment](#how-to-hide-page-comment)
 - [Options detail](#options-detail)
 - [Todo](#todo)
 
 ## Features
 
+- Support Waline
 - Support Gitalk, Valine
 - Dynamic Import
 - Response router change and refresh automatic
@@ -33,19 +35,19 @@
 With `npm`:
 
 ```bash
-npm install --save vuepress-plugin-comment
+npm install --save vuepress-plugin-comment-plus
 ```
 
 With `yarn`:
 
 ```bash
-yarn add vuepress-plugin-comment -D
+yarn add vuepress-plugin-comment-plus -D
 ```
 
 With `cnpm`:
 
 ```bash
-cnpm i --save vuepress-plugin-comment
+cnpm i --save vuepress-plugin-comment-plus
 ```
 
 
@@ -55,6 +57,30 @@ cnpm i --save vuepress-plugin-comment
 
 Plugin has registered correct route information in `frontmatter.to` object and `frontmatter.from` object. Their properties are the same as [vue-router's route object](https://router.vuejs.org/api/#route-object-properties).
 
+### Use in Waline
+
+The `options` is exactly the same as `Valine` configuration.
+
+```javascript
+module.exports = {
+  plugins: [
+    [
+      'vuepress-plugin-comment-plus',
+      {
+	     choosen: 'waline', 
+         // options选项中的所有参数，会传给Waline的配置
+         options: {
+           el: '#valine-vuepress-comment',
+           serverURL: 'https://waline-api-green.vercel.app',
+	       path: '<%- frontmatter.commentid || frontmatter.permalink %>'
+         }
+      }
+    ]
+  ]
+}
+```
+
+
 ### Use in Gitalk
 
 The `options` is exactly the same as `Gitalk` configuration.
@@ -63,7 +89,7 @@ The `options` is exactly the same as `Gitalk` configuration.
 module.exports = {
   plugins: [
     [
-      'vuepress-plugin-comment',
+      'vuepress-plugin-comment-plus',
       {
         choosen: 'gitalk', 
         options: {
@@ -86,7 +112,7 @@ If you want to access variables, such as `$frontmatter` and `window`, please use
 module.exports = {
   plugins: [
     [
-      'vuepress-plugin-comment',
+      'vuepress-plugin-comment-plus',
       {
         choosen: 'gitalk', 
         options: {
@@ -110,13 +136,13 @@ module.exports = {
 
 ### Use in Valine
 
-The `options` is exactly the same as `Valine` configuration.
+The `options` is exactly the same as `Waline` configuration.
 
 ```javascript
 module.exports = {
   plugins: [
     [
-      'vuepress-plugin-comment',
+      'vuepress-plugin-comment-plus',
       {
         choosen: 'valine', 
         options: {
@@ -136,7 +162,7 @@ If you want to access variables, such as `$frontmatter` and `window`, please use
 module.exports = {
   plugins: [
     [
-      'vuepress-plugin-comment',
+      'vuepress-plugin-comment-plus',
       {
         choosen: 'valine', 
         options: {
@@ -151,6 +177,7 @@ module.exports = {
 }
 ```
 
+
 ### How to hide page comment
 
 If you want to hide comment plugin in specified page, set `$frontmatter.comment` or `$frontmatter.comments` to `false`.

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "vuepress-plugin-comment",
+  "name": "vuepress-plugin-comment-plus",
   "version": "0.7.3",
   "description": "Comment plugin in vuepress, such as Gitalk, Valine...",
   "main": "index.js",
@@ -8,28 +8,30 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+ssh://[email protected]/dongyuanxin/vuepress-plugin-comment.git"
+    "url": "git+ssh://[email protected]/SivanLaai/vuepress-plugin-comment-plus.git"
   },
   "keywords": [
     "vuepress",
     "comment",
     "plugin",
     "vue",
     "gitalk",
-    "valine"
+    "valine",
+    "@waline/client"
   ],
   "author": "dongyuanxin",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/dongyuanxin/vuepress-plugin-comment/issues"
+    "url": "https://github.com/SivanLaai/vuepress-plugin-comment-plus/issues"
   },
-  "homepage": "https://github.com/dongyuanxin/vuepress-plugin-comment#readme",
+  "homepage": "https://github.com/SivanLaai/vuepress-plugin-comment-plus#readme",
   "dependencies": {
     "ejs": "^2.6.1",
     "gitalk": "^1.5.0",
     "gitalk-fix": "^1.5.2",
     "i": "^0.3.6",
     "npm": "^6.9.0",
-    "valine": "^1.3.9"
+    "valine": "^1.3.9",
+    "@waline/client": "^1.3.3"
   }
 }

util.js

@@ -2,7 +2,7 @@ import ejs from 'ejs'
 
 import config from './package.json'
 
-let Gitalk, Valine
+let Gitalk, Valine, Waline
 loadScript(COMMENT_CHOOSEN)
 
 const defaultChoosen = 'comment plugins'
@@ -24,6 +24,9 @@ export function loadScript (name) {
     import('gitalk/dist/gitalk.css')
     .then(() => import('gitalk'))
     .then(pkg => Gitalk = pkg.default)
+  } else if (name === 'waline') {
+    import('@waline/client')
+    .then(pkg => Waline = pkg.default)
   }
 }
 
@@ -50,7 +53,6 @@ export function renderConfig (config, data) {
         result[key] = config[key]
       }
     })
-  
   return result
 }
 
@@ -97,5 +99,26 @@ export const provider = {
       }
       return true
     }
+  },
+  waline: {
+    render (frontmatter, commentDomID) {
+      const commentDOM = document.createElement('div')
+      commentDOM.id = commentDomID
+
+      const parentDOM = document.querySelector(COMMENT_CONTAINER)
+      parentDOM.appendChild(commentDOM)
+
+      new Waline({
+        ...renderConfig(COMMENT_OPTIONS, { frontmatter }),
+        el: `#${commentDomID}`
+      })
+    },
+    clear (commentDomID) {
+      const last = document.querySelector(`#${commentDomID}`)
+      if (last) {
+        last.remove()
+      }
+      return true
+    }
   }
-}
+}