Support utteranc (#61)

* Update(Feature): Add Social button
issue #54

* Update(JS): Add SRI to plantuml-encoder.min.js

* Update(Feature): Support utteranc

* Update(Restyle): Restyle the README.md

Close #54

.gitignore

@@ -5,5 +5,5 @@
 *.dylib
 *.test
 
-public/*
-resources/_gen/*
+exampleSite/public/*
+exampleSite/resources/_gen/*

README.md

@@ -49,7 +49,8 @@ Here is a table showing the similarities and differences between [mogege](https:
 | PlantUML                    | Yes                                                          |         |
 | BiliBili video (shortcodes) | Yes                                                          |         |
 | Hidden text (shortcodes)    | Yes                                                          |         |
-| Social button               |                                                              | Yes     |
+| Social button               | Yes                                                          | Yes     |
+| lightGallery                |                                                              | Yes     |
 
 ## Requirements
 
@@ -186,6 +187,35 @@ You can use "hidden text" to hide spoiler content
 
 Click [here](https://mogeko.github.io/2020/080#spoiler) for examples
 
+## utteranc comment system
+
+This blog supports the 
+[utteranc](https://utteranc.es) comment system. 
+
+It is lighter and more powerful than Gitalk.
+
+To use utteranc, you need make sure the 
+[utterances app](https://github.com/apps/utterances) is 
+installed on the repo, otherwise users will not be able to post comments. 
+
+Then enable utteranc in config.toml
+
+```toml
+[params]
+    enableUtteranc = true
+```
+
+Then Configuration: (For more settings, please refer to 
+[HomePage](https://utteranc.es))
+
+```toml
+[params.utteranc] # Homepage: https://utteranc.es
+    repo = "" # The repo to store comments
+    issueTerm = "title" # the mapping between blog posts and GitHub issues. 
+    theme = "preferred-color-scheme" # Theme
+    crossorigin = "anonymous" # default: anonymous
+```
+
 ## Gitalk comment system
 
 This blog supports the [gitalk](https://github.com/gitalk/gitalk) comment

layouts/_default/single.html

@@ -100,6 +100,8 @@ <h1 class="post-title" itemprop="name headline">{{ .Title }}</h1>
                 {{ template "_internal/disqus.html" . }}
             {{ else if .Site.Params.enableGitalk }}
                 {{ partial "gitalk.html" . }}
+            {{ else if .Site.Params.enableUtteranc }}
+                {{ partial "utteranc.html" . }}
             {{ end }}
         {{ end }}
     </div>

layouts/partials/home_profile.html

@@ -10,4 +10,11 @@ <h2 class="description">
        {{ . }}
     </h2>
     {{ end }}
-</div>
+    <div class="social-links">
+        {{ partial "social.html" . }}
+    </div>
+</div>
+
+{{ if .IsHome }}
+    {{ partial "wechat.html" . }}
+{{ end }}

layouts/partials/js.html

@@ -15,17 +15,17 @@
 
 {{ if or .Page.Params.plantuml .Site.Params.plantuml }}
 <!-- PlantUML -->
-<script src="https://cdn.jsdelivr.net/gh/jmnote/plantuml-encoder@1.2.4/dist/plantuml-encoder.min.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/jmnote/plantuml-encoder@1.2.4/dist/plantuml-encoder.min.js" integrity="sha256-Qsk2KRBCN5qVZX7B+8+2IvQl1Aqc723qV1tBCQaVoqo=" crossorigin="anonymous"></script>
 <script>
 (function(){
-    let plantumlPrefix = "language-plantuml";
-    Array.prototype.forEach.call(document.querySelectorAll("[class^=" + plantumlPrefix + "]"), function(code){
-        let image = document.createElement("IMG");
-        image.loading = 'lazy'; // Lazy loading
-        image.src = 'http://www.plantuml.com/plantuml/svg/~1' + plantumlEncoder.encode(code.innerText);
-        code.parentNode.insertBefore(image, code);
-        code.style.display = 'none'
-    });
+  let plantumlPrefix = "language-plantuml";
+  Array.prototype.forEach.call(document.querySelectorAll("[class^=" + plantumlPrefix + "]"), function(code){
+    let image = document.createElement("IMG");
+    image.loading = 'lazy'; // Lazy loading
+    image.src = 'http://www.plantuml.com/plantuml/svg/~1' + plantumlEncoder.encode(code.innerText);
+    code.parentNode.insertBefore(image, code);
+    code.style.display = 'none';
+  });
 })();
 </script>
 {{ end }}

layouts/partials/social.html

@@ -0,0 +1,44 @@
+{{ if .Site.Params.Social }}
+<style type="text/css">
+@font-face {
+  font-family: 'iconfont';  /* project id 1910062 */
+  src: url('//at.alicdn.com/t/font_1910062_4213q7gpkpy.eot');
+  src: url('//at.alicdn.com/t/font_1910062_4213q7gpkpy.eot?#iefix') format('embedded-opentype'),
+  url('//at.alicdn.com/t/font_1910062_4213q7gpkpy.woff2') format('woff2'),
+  url('//at.alicdn.com/t/font_1910062_4213q7gpkpy.woff') format('woff'),
+  url('//at.alicdn.com/t/font_1910062_4213q7gpkpy.ttf') format('truetype'),
+  url('//at.alicdn.com/t/font_1910062_4213q7gpkpy.svg#iconfont') format('svg');
+}
+</style>
+{{ end }}
+
+{{ with .Site.Params.Social.Github }}
+<a href="https://github.com/{{.}}" target="_blank" rel="me noopener"><i class="iconfont icon-github"></i></a>
+{{ end }}
+{{ with .Site.Params.Social.LinkedIn }}
+<a href="https://linkedin.com/in/{{.}}" target="_blank" rel="me noopener"><i class="iconfont icon-linkedin"></i></a>
+{{ end }}
+{{ with .Site.Params.Social.Twitter }}
+<a href="https://twitter.com/{{.}}" target="_blank" rel="me noopener"><i class="iconfont icon-twitter"></i></a>
+{{ end }}
+{{ with .Site.Params.Social.Instagram }}
+<a href="https://www.instagram.com/{{.}}/" target="_blank" rel="me noopener"><i class="iconfont icon-instagram"></i></a> 
+{{ end }} 
+{{ with .Site.Params.Social.Email}}
+<a href="mailto:{{.}}" rel="me noopener"><i class="iconfont icon-mail01"></i></a>
+{{ end }}
+{{ with .Site.Params.Social.Facebook}}
+<a href="https://facebook.com/{{.}}" rel="me noopener"><i class="iconfont icon-facebook"></i></a>
+{{ end }}
+{{ with .Site.Params.Social.Telegram}}
+<a href="https://t.me/{{.}}" rel="me noopener"><i class="iconfont icon-telegram"></i></a>
+{{ end }}
+{{ with .Site.Params.Social.Dribbble}}
+<a href="https://dribbble.com/{{.}}" rel="me noopener"><i class="iconfont icon-dribbble"></i></a>
+{{ end }}
+{{ with .Site.Params.Social.Medium}}
+<a href="https://medium.com/{{.}}" rel="me noopener"><i class="iconfont icon-medium-circle-fill"></i></a>
+{{ end }}
+{{ with .Site.Params.Social.Wechat}}
+<a target="_blank" rel="me noopener" onclick="document.getElementById('lightbox').style.display='inline';"><i class="iconfont icon-wechat"></i></a> 
+{{end}}

layouts/partials/utteranc.html

@@ -0,0 +1,9 @@
+<div id="utteranc-container">
+    <script src='https://utteranc.es/client.js'
+        repo='{{ .Site.Params.Utteranc.repo }}'
+        issue-term='{{ .Site.Params.Utteranc.issueTerm }}'
+        theme='{{ .Site.Params.Utteranc.theme }}'
+        crossorigin='{{ .Site.Params.Utteranc.crossorigin | default "anonymous" }}'
+        async>
+    </script>
+</div>

layouts/partials/wechat.html

@@ -0,0 +1,45 @@
+{{ with .Site.Params.Social.Wechat}}
+{{ $wechat := .}}
+<style type="text/css">
+.lightbox {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, .8);
+}
+
+.center {
+    width: 220px;
+    height: 220px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin: -150px 0 0 -110px;
+}
+
+.center img {
+    width: 220px;
+}
+
+.center i {
+    color: #fff;
+    font-size: 1.5em;
+    position: relative;
+    float: right;
+    top: 0px;
+    right: -20px;
+    cursor: pointer;
+}
+</style>
+<!-- LIGHTBOX CODE BEGIN -->
+
+<div id="lightbox" style="display: none" class="lightbox" onclick="document.getElementById('lightbox').style.display='none';">
+    <div class="center">
+        <i class="iconfont icon-close"></i>
+        <img src="{{ $wechat }}" loading="lazy">
+    </div>
+</div>
+<!-- LIGHTBOX CODE END -->
+{{ end }}