feat: Added gitalk comments

Alexander Bilz

26.56.2021 2aef32a553f51f8311dad8e5cc5aaf8057c536d4

feat: Added gitalk comments

Added gitalk comments as an alternative to the current commenting solutions.

 README.md

@@ -314,6 +314,19 @@
CommentoURL = "https://commento.example.com/js/commento.js"
```

### Comments powered by Gitalk

No comment section is shown on the `single.html` unless a `repo` is specified in the `config.toml` file. If uncertain how parameter to configure, check out the official [documentation](https://github.com/gitalk/gitalk).

```toml
[params.gitalk]
clientID = "GitHub Application Client ID"
clientSecret = "GitHub Application Client Secret"
repo = "Repository name to store issues"
owner = "GitHub repo owner"
admin = "GitHub repo owner and collaborators, only these guys can initialize gitHub issues"
```

### Disabling Comments Per Page

Comments can be disabled per page by setting `disableComments: true` on the pages [Front Matter](https://gohugo.io/content-management/front-matter/)

 assets/css/style.css

@@ -348,7 +348,7 @@

.post .post-title h1 {
  text-transform: uppercase;
  font-size: 3.0em;
  font-size: 3em;
  letter-spacing: 1px;
  line-height: 1;
}

 layouts/_default/single.html

@@ -82,6 +82,13 @@
        </div>

      {{- end -}}
      {{- if .Site.Params.gitalk.repo -}}
        <div id="fb_comments_container">
          <h2>{{ i18n "comments" }}</h2>
          {{ partial "comments/gitalk.html" . }}
        </div>

      {{- end -}}


    {{ end }}

 layouts/partials/comments/gitalk.html

New file
@@ -0,0 +1,22 @@
<div id="gitalk-container"></div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css" />
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<script>
  const gitalk = new Gitalk({
    clientID: '{{ .Site.Params.Gitalk.clientID }}',
    clientSecret: '{{ .Site.Params.Gitalk.clientSecret }}',
    repo: '{{ .Site.Params.Gitalk.repo }}',
    owner: '{{ .Site.Params.Gitalk.owner }}',
    admin: ['{{ .Site.Params.Gitalk.admin }}'],
    id: location.pathname, // Ensure uniqueness and length less than 50
    distractionFreeMode: false, // Facebook-like distraction free mode
  });
  (function () {
    if (['localhost', '127.0.0.1'].indexOf(window.location.hostname) != -1) {
      document.getElementById('gitalk-container').innerHTML =
        'Gitalk comments not available by default when the website is previewed locally.';
      return;
    }
    gitalk.render('gitalk-container');
  })();
</script>