[Feature] Add support for Vssue comment system (#157)

* feat: add support for vssue comment system

* fix: Update comment.html

* fix: add CSS stylesheet

* docs: update docs for vssue

README.md

@@ -114,6 +114,7 @@ the DoIt theme may be more suitable for you.
 * **Commento** comment system supported by [Commento](https://commento.io/)
 * **Utterances** comment system supported by [Utterances](https://utteranc.es/)
 * **Twikoo** comment system supported by [Twikoo](https://twikoo.js.org/)
+* **Vssue** comment system supported by [Vssue](https://vssue.js.org/)
 
 ### Extended Features
 
@@ -207,6 +208,7 @@ Thanks to the authors of following resources included in the theme:
 * [Valine](https://valine.js.org/)
 * [Waline](https://waline.js.org/)
 * [Twikoo](https://twikoo.js.org/)
+* [Vssue](https://vssue.js.org/)
 * [cookieconsent](https://github.com/osano/cookieconsent)
 * [Pjax](https://github.com/PaperStrike/Pjax)
 * [Topbar](https://github.com/buunguyen/topbar)

README.zh-cn.md

@@ -111,6 +111,7 @@ DoIt 主题增加了许多新的功能与配置项，查看[变更日志](https:
 * 支持 **[Commento](https://commento.io/)** 评论系统
 * 支持 **[Utterances](https://utteranc.es/)** 评论系统
 * 支持 **[Twikoo](https://twikoo.js.org/)** 评论系统
+* 支持 **[Vssue](https://vssue.js.org/)** 评论系统
 
 ### 扩展功能
 
@@ -204,6 +205,7 @@ DoIt 主题中用到了以下项目，感谢它们的作者：
 * [Valine](https://valine.js.org/)
 * [Waline](https://waline.js.org/)
 * [Twikoo](https://twikoo.js.org/)
+* [Vssue](https://vssue.js.org/)
 * [cookieconsent](https://github.com/osano/cookieconsent)
 * [Pjax](https://github.com/PaperStrike/Pjax)
 * [Topbar](https://github.com/buunguyen/topbar)

assets/data/cdn/jsdelivr.yml

@@ -71,4 +71,13 @@ libFiles:
   # pjax@0.13.0 https://github.com/PaperStrike/Pjax
   pjaxJS: "@sliphua/pjax@0.13.0/dist/pjax.min.js"
   # topbar@1.0.1 https://github.com/buunguyen/topbar
-  topbarJS: topbar@1.0.1/topbar.min.js
+  topbarJS: topbar@1.0.1/topbar.min.js
+  # vue@v2.6.14 https://vuejs.org
+  vueRuntimeJS: vue@2.6.14/dist/vue.runtime.min.js
+  # vssue@1.4.8 https://vssue.js.org
+  vssueBitbucketJS: vssue@1.4.8/dist/vssue.bitbucket.min.js
+  vssueGiteaJS: vssue@1.4.8/dist/vssue.gitea.min.js
+  vssueGiteeJS: vssue@1.4.8/dist/vssue.gitee.min.js
+  vssueGithubJS: vssue@1.4.8/dist/vssue.github.min.js
+  vssueGitlabJS: vssue@1.4.8/dist/vssue.gitlab.min.js
+  vssueCSS: vssue@1.4.8/dist/vssue.min.css

assets/lib/VERSION

@@ -27,4 +27,6 @@ twemoji@13.1.0 https://github.com/twitter/twemoji
 twikoo@1.4.1 https://twikoo.js.org
 typeit@7.0.4 https://github.com/alexmacarthur/typeit
 valine@1.4.14 https://valine.js.org
+vssue@1.4.8 https://vssue.js.org
+vue@v2.6.14 https://vuejs.org
 waline@1.3.3 https://waline.js.org

exampleSite/config.toml

@@ -818,6 +818,15 @@ enableEmoji = true
         region = ""
         path = ""
         visitor = true
+      # Vssue comment config (https://vssue.js.org//)
+      # Vssue comment 评论系统设置 (https://vssue.js.org//)
+      [params.page.comment.vssue]
+        enable = false
+        platform = "" # ("bitbucket", "gitea", "gitee", "github", "gitlab")
+        owner = ""
+        repo = ""
+        clientId = ""
+        clientSecret = ""
     # Third-party library config
     # 第三方库配置
     [params.page.library]

exampleSite/content/about/index.en.md

@@ -51,6 +51,7 @@ math:
 * :(fas fa-comment-dots fa-fw): **Commento** comment system supported by [Commento](https://commento.io/)
 * :(fas fa-comment-alt fa-fw): **Utterances** comment system supported by [Utterances](https://utteranc.es/)
 * :(fas fa-comment-alt fa-fw): **Twikoo** comment system supported by [Twikoo](https://twikoo.js.org/)
+* :(fas fa-comment-alt fa-fw): **Vssue** comment system supported by [Vssue](https://vssue.js.org/)
 
 #### Extended Features
 
@@ -108,6 +109,7 @@ Thanks to the authors of following resources included in the theme:
 * [Valine](https://valine.js.org/)
 * [Waline](https://waline.js.org/)
 * [Twikoo](https://twikoo.js.org/)
+* [Vssue](https://vssue.js.org/)
 * [cookieconsent](https://github.com/osano/cookieconsent)
 * [Pjax](https://github.com/PaperStrike/Pjax)
 * [Topbar](https://github.com/buunguyen/topbar)

exampleSite/content/about/index.zh-cn.md

@@ -51,6 +51,7 @@ math:
 * :(fas fa-comment-dots fa-fw): 支持 **[Commento](https://commento.io/)** 评论系统
 * :(far fa-comment-alt fa-fw): 支持 **[Utterances](https://utteranc.es/)** 评论系统
 * :(far fa-comment-alt fa-fw): 支持 **[Twikoo](https://twikoo.js.org/)** 评论系统
+* :(far fa-comment-alt fa-fw): 支持 **[Vssue](https://vssue.js.org/)** 评论系统
 
 #### 扩展功能
 
@@ -108,6 +109,7 @@ DoIt 主题中用到了以下项目，感谢它们的作者：
 * [Valine](https://valine.js.org/)
 * [Waline](https://waline.js.org/)
 * [Twikoo](https://twikoo.js.org/)
+* [Vssue](https://vssue.js.org/)
 * [cookieconsent](https://github.com/osano/cookieconsent)
 * [Pjax](https://github.com/PaperStrike/Pjax)
 * [Topbar](https://github.com/buunguyen/topbar)

exampleSite/content/posts/theme-documentation-basics/index.en.md

@@ -604,6 +604,14 @@ Please open the code block below to view the complete sample configuration :(far
         region = ""
         path = ""
         visitor = true
+      # {{< version 0.2.12 >}} {{< link "https://vssue.js.org/" "Vssue" >}} comment config
+      [params.page.comment.vssue]
+        enable = false
+        platform = "" # ("bitbucket", "gitea", "gitee", "github", "gitlab")
+        owner = ""
+        repo = ""
+        clientId = ""
+        clientSecret = ""
     # {{< version 0.2.7 >}} Third-party library config
     [params.page.library]
       [params.page.library.css]

exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md

@@ -608,6 +608,14 @@ hugo
         region = ""
         path = ""
         visitor = true
+      # {{< version 0.2.12 >}} {{< link "https://vssue.js.org/" "Vssue" >}} 评论系统设置
+      [params.page.comment.vssue]
+        enable = false
+        platform = "" # ("bitbucket", "gitea", "gitee", "github", "gitlab")
+        owner = ""
+        repo = ""
+        clientId = ""
+        clientSecret = ""
     # {{< version 0.2.7 >}} 第三方库配置
     [params.page.library]
       [params.page.library.css]

layouts/partials/comment.html

@@ -202,6 +202,48 @@
                 Please enable JavaScript to view the comments powered by <a href="https://twikoo.js.org/">Twikoo</a>.
             </noscript>
         {{- end -}}
+
+        {{- /* Vssue Comment System */ -}}
+        {{- $vssue := $comment.vssue | default dict -}}
+        {{- if $vssue.enable -}}
+            <div id="vssue"></div>
+                {{- $source := $cdn.vssueCSS | default "lib/vssue/vssue.min.css" -}}
+                {{- dict "Source" $source "Minify" true "Fingerprint" $fingerprint | dict "Scratch" .Scratch "Data" | partial "scratch/pjaxStyle.html" -}}
+                {{- $source := $cdn.vueRuntimeJS | default "lib/vue/vue.runtime.min.js" -}}
+                {{- dict "Source" $source "Fingerprint" $fingerprint | dict "Scratch" .Scratch "Data" | partial "scratch/pjaxScript.html" -}}
+                {{- if eq $vssue.platform "bitbucket" -}}
+                    {{- $source := $cdn.vssueBitbucketJS | default "lib/vssue/vssue.bitbucket.min.js" -}}
+                    {{- dict "Source" $source "Fingerprint" $fingerprint | dict "Scratch" .Scratch "Data" | partial "scratch/pjaxScript.html" -}}
+                {{- else if eq $vssue.platform "gitea" -}}
+                    {{- $source := $cdn.vssueGiteaJS | default "lib/vssue/vssue.gitea.min.js" -}}
+                    {{- dict "Source" $source "Fingerprint" $fingerprint | dict "Scratch" .Scratch "Data" | partial "scratch/pjaxScript.html" -}}
+                {{- else if eq $vssue.platform "gitee" -}}
+                    {{- $source := $cdn.vssueGiteeJS | default "lib/vssue/vssue.gitee.min.js" -}}
+                    {{- dict "Source" $source "Fingerprint" $fingerprint | dict "Scratch" .Scratch "Data" | partial "scratch/pjaxScript.html" -}}
+                {{- else if eq $vssue.platform "github" -}}
+                    {{- $source := $cdn.vssueGithubJS | default "lib/vssue/vssue.github.min.js" -}}
+                    {{- dict "Source" $source "Fingerprint" $fingerprint | dict "Scratch" .Scratch "Data" | partial "scratch/pjaxScript.html" -}}
+                {{- else if eq $vssue.platform "gitlab" -}}
+                    {{- $source := $cdn.vssueGitlabJS | default "lib/vssue/vssue.gitlab.min.js" -}}
+                    {{- dict "Source" $source "Fingerprint" $fingerprint | dict "Scratch" .Scratch "Data" | partial "scratch/pjaxScript.html" -}}
+                {{- end -}}
+                {{- $commentConfig = dict "el" "#vssue" "title" .Title | dict "vssue" | merge $commentConfig -}}
+                {{- with $vssue.owner -}}
+                    {{- $commentConfig = dict "owner" . | dict "vssue" | merge $commentConfig -}}
+                {{- end -}}
+                {{- with $vssue.repo -}}
+                    {{- $commentConfig = dict "repo" . | dict "vssue" | merge $commentConfig -}}
+                {{- end -}}
+                {{- with $vssue.clientId -}}
+                    {{- $commentConfig = dict "clientId" . | dict "vssue" | merge $commentConfig -}}
+                {{- end -}}
+                {{- with $vssue.clientSecret -}}
+                    {{- $commentConfig = dict "clientSecret" . | dict "vssue" | merge $commentConfig -}}
+                {{- end -}}
+            <noscript>
+                Please enable JavaScript to view the comments powered by <a href="https://vssue.js.org/">Vssue</a>.
+            </noscript>
+        {{- end -}}
     </div>
 {{- end -}}
 

src/js/theme.js

@@ -735,6 +735,23 @@ function initComment() {
             });
             window.switchThemeEventSet.add(window._utterancesOnSwitchTheme);
         }
+        if (window.config.comment.vssue) {
+            let vssue = window.config.comment.vssue;
+            new Vue({
+                el: vssue.el,
+                render: h => h('Vssue', {
+                    props: {
+                        title: vssue.title,
+                        options: {
+                            owner: vssue.owner,
+                            repo: vssue.repo,
+                            clientId: vssue.clientId,
+                            clientSecret: vssue.clientSecret,
+                        },
+                    }
+                })
+            })
+        }
     }
 }