feat: add valine comment

pkg/ext/comments/comments.go

@@ -3,11 +3,25 @@ package comments
 type Config struct {
 	Enabled bool    `toml:"enabled"`
 	Disqus  *Disqus `toml:"disqus"`
+	Valine  *Valine `toml:"valine"`
+}
+
+// Current returns the name of the enabled comment system.
+// order by disqus, valine
+func (c *Config) Current() string {
+	if c.Disqus.Enabled {
+		return "disqus"
+	}
+	if c.Valine.Enabled {
+		return "valine"
+	}
+	return "unknown"
 }
 
 func DefaultConfig() *Config {
 	return &Config{
 		Enabled: false,
 		Disqus:  DefaultDisqusConfig(),
+		Valine:  defaultValine(),
 	}
 }

pkg/ext/comments/valine.go

@@ -0,0 +1,17 @@
+package comments
+
+type Valine struct {
+	Enabled   bool   `toml:"enabled"`
+	APPID     string `toml:"app_id"`
+	APPKey    string `toml:"app_key"`
+	ServerURL string `toml:"server_url"`
+}
+
+func defaultValine() *Valine {
+	return &Valine{
+		Enabled:   false,
+		APPID:     "",
+		APPKey:    "",
+		ServerURL: "",
+	}
+}

themes/default/partial/comments.html

@@ -1,19 +1,43 @@
-{{if .server.Local}}
-    <p class="comment-local-disabled">Comment is disabled in local server.</p>
+{{if not .server.Local}}
+<p class="comment-local-disabled">Comment is disabled in local server.</p>
 {{else}}
+
 {{- with .extension.Comments.Disqus}}
 {{- if .Enabled}}
 <div id="disqus_thread"></div>
 <script>
-    (function() { // DON'T EDIT BELOW THIS LINE
-    var d = document, s = d.createElement('script');
-    s.src = 'https://{{.Shortname}}.disqus.com/embed.js';
-    s.setAttribute('data-timestamp', +new Date());
-    (d.head || d.body).appendChild(s);
+    (function () { // DON'T EDIT BELOW THIS LINE
+        var d = document,
+            s = d.createElement('script');
+        s.src = 'https://{{.Shortname}}.disqus.com/embed.js';
+        s.setAttribute('data-timestamp', +new Date());
+        (d.head || d.body).appendChild(s);
     })();
 </script>
-<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
+<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by
+        Disqus.</a></noscript>
+{{end -}}
+{{end -}}
+
+{{- with .extension.Comments.Valine}}
+{{- if .Enabled}}
+<div id="vcomments"></div>
+<script src="https://unpkg.com/valine@latest/dist/Valine.min.js"></script>
+<script defer>
+    new Valine({
+        el: '#vcomments',
+        appId: '{{.APPID}}',
+        appKey: '{{.APPKey}}',
+        serverURLs: '{{.ServerURL}}',
+        avatar: 'mp',
+        placeholder: 'Leave a comment',
+        pageSize: 10,
+        visitor: false,
+        recordIP: false,
+        requiredFields: ['nick', 'mail'],
+    })
+</script>
 {{end -}}
 {{end -}}
 
-{{end}}
+{{end}}

themes/default/post.html

@@ -18,7 +18,7 @@ <h3 class="post-title"><a href="{{.post.Link}}">{{.post.Title}}</a></h3>
                     </div>
                     <div class="post-content">{{HTML .post.Content}}</div>
                     {{if .extension.Comments.Enabled}}
-                    <section class="post-comment">
+                    <section class="post-comment comment-{{.extension.Comments.Current}}">
                         {{template "partial/comments.html" .}}
                     </section>
                     {{end}}

themes/default/static/css/input.css

@@ -228,4 +228,17 @@ h3.post-title {
 
 .footer-right{
     @apply flex-auto w-1/2 text-right
+}
+
+#vcomments{
+    @apply mt-8
+}
+
+.dark #vcomments .vcount,
+.dark #vcomments .vnick{
+    color: #929298;
+}
+
+.dark #vcomments .vnick:hover{
+    color: #ef2f11
 }