Add Giscus comments support (#298)

Add Giscus comments support

5 files changed, 136 insertions, 37 deletions

diff --git a/README.md b/README.md
index d8c5d56..cee027c 100644
--- a/README.md
+++ b/README.md
@@ -17,44 +17,50 @@ If you like this theme and/or use it for commercial purposes, please support me!
 
 ## Table of Contents
 
-- [Requirements](#Requirements)
-- [Quick Start](#Quick-Start)
-- [Configuration](#Configuration)
-- [Features](#Features)
-  - [Algolia Search](#Algolia-Search)
-    - [Initial Setup](#Initial-setup)
-    - [Update Algolia Index](#Update-algolia-index)
-  - [Keyboard Shortcuts](#Keyboard-Shortcuts)
-  - [Post Types](#Post-Types)
-  - [Pages and External Links](#Pages-and-External-Links)
-  - [Reposting an Article / Duplicated Content [SEO]](#Reposting-an-Article--Duplicated-Content-SEO)
-  - [Overwrite the calculated reading time](#Overwrite-the-calculated-reading-time)
-  - [Summary Breaks](#Summary-Breaks)
+- [Bilberry Hugo Theme](#bilberry-hugo-theme)
+- [Table of Contents](#table-of-contents)
+- [Requirements](#requirements)
+- [Quick Start](#quick-start)
+- [Configuration](#configuration)
+- [Features](#features)
+  - [Algolia Search](#algolia-search)
+    - [Initial Setup](#initial-setup)
+    - [Update Algolia Index](#update-algolia-index)
+  - [Keyboard Shortcuts](#keyboard-shortcuts)
+  - [Post Types](#post-types)
+  - [Pages and External Links](#pages-and-external-links)
+  - [Reposting an Article / Duplicated Content [SEO]](#reposting-an-article--duplicated-content-seo)
+  - [Overwrite the calculated reading time](#overwrite-the-calculated-reading-time)
+  - [Summary Breaks](#summary-breaks)
   - [Table of Contents(TOC)](#table-of-contentstoc)
   - [Series Taxonomy](#series-taxonomy)
-  - [Disqus comments](#Disqus-comments)
-  - [Responsive Design](#Responsive-Design)
-  - [Automatic Image Resizing](#Automatic-Image-Resizing)
-  - [Image Modal Zoom](#Image-Modal-Zoom)
-  - [Permanent Top Navigation](#Permanent-Top-Navigation)
-  - [MathJAX Markup](#MathJAX-Markup)
-  - [Disabled Javascript Support](#Disabled-Javascript-Support)
-  - [Video](#Video)
-  - [Audio](#Audio)
-  - [Raw HTML](#Raw-html)
-- [Favicons](#Favicons)
-- [Custom 404 site](#Custom-404-site)
-- [Custom Post Types](#Custom-Post-Types)
-- [External Images](#External-Images)
-- [Customizing Individual Posts](#Customizing-Individual-Posts)
-- [Custom colors and fonts](#Custom-colors-and-fonts)
-- [CSS and JS modules](#CSS-and-JS-modules)
-  - [Adding a Cookie disclaimer](#Adding-a-Cookie-disclaimer)
-- [Translations](#Translations)
-- [Credits](#Credits)
-- [Support and Discussions](#Support-and-Discussions)
-- [Contributors](#Contributors)
-- [License](#License)
+  - [Comments](#comments)
+    - [Commento comments](#commento-comments)
+    - [Disqus comments](#disqus-comments)
+    - [Giscus comments](#giscus-comments)
+    - [Utterances comments](#utterances-comments)
+  - [Responsive Design](#responsive-design)
+  - [Automatic Image Resizing](#automatic-image-resizing)
+  - [Image Modal Zoom](#image-modal-zoom)
+  - [Permanent Top Navigation](#permanent-top-navigation)
+  - [MathJAX Markup](#mathjax-markup)
+  - [Disabled Javascript Support](#disabled-javascript-support)
+  - [Video](#video)
+  - [Audio](#audio)
+  - [Raw HTML](#raw-html)
+- [Favicons](#favicons)
+- [Custom 404 site](#custom-404-site)
+- [Custom Post Types](#custom-post-types)
+- [External Images](#external-images)
+- [Customizing Individual Posts](#customizing-individual-posts)
+- [Custom colors and fonts](#custom-colors-and-fonts)
+- [CSS and JS modules](#css-and-js-modules)
+  - [Adding a Cookie disclaimer](#adding-a-cookie-disclaimer)
+- [Translations](#translations)
+- [Credits](#credits)
+- [Support and Discussions](#support-and-discussions)
+- [Contributors](#contributors)
+- [License](#license)
 
 ## Requirements
 
@@ -275,6 +281,53 @@ Just create a new site and copy your site's short name to the `config.toml` file
 
 You can manage and moderate the comments either on your website or at the disqus management panel.
 
+#### Giscus comments
+If you want to enable this functionality for your users to write comments below your articles, you need to follow instructions on [Giscus](https://giscus.app/) website. As soon as you complete prerequisites for your GitHub repository and select the discussion category, values for `data-repo-id/giscusRepositoryId` and `data-category-id/giscusCategoryId` will be automatically generated.
+
+To activate Giscus in your blog you have to customize the JS-snippet below or by adding your configuration to `config.toml`.
+
+**Example:**
+
+Snippet displayed in Giscus:
+```html
+<script src="https://giscus.app/client.js"
+        data-repo="Lednerb/bilberry-hugo-theme"
+        data-repo-id="R_kgDOGX153A"
+        data-category="General"
+        data-category-id="DIC_kwDOGX153M4B_2Vz"
+        data-mapping="pathname"
+        data-reactions-enabled="1"
+        data-emit-metadata="0"
+        data-theme="light"
+        data-lang="en"
+        crossorigin="anonymous"
+        async>
+</script>
+<div id="giscus"></div>
+```
+
+Your `config.toml`
+```toml
+#[...]
+[params]
+
+    #[...]
+
+    # Giscus
+    giscus    = true
+    giscusJsUrl     = "https://giscus.app/client.js"
+    giscusRepository    = "Lednerb/bilberry-hugo-theme"
+    giscusRepositoryId   = "R_kgDOGX153A" # autogenerated/customizable
+    giscusMapping   = "pathname"
+    giscusCategory  = "General"
+    giscusCategoryId   = "DIC_kwDOGX153M4B_2Vz" # autogenerated/customizable
+    giscusTheme = "light"
+    giscusReactions = "1"
+    giscusEmitMetadata = "0"
+    giscusLanguage = "en"
+    giscusCrossOrigin = "anonymous"
+```
+
 #### Utterances comments
 If you want to enable the functionality for your users to write comments below your articles. You need to follow instructions in [Utterances](https://utteranc.es/) website.
 
diff --git a/assets/js/theme.js b/assets/js/theme.js
index 71d4751..cba8207 100644
--- a/assets/js/theme.js
+++ b/assets/js/theme.js
@@ -73,6 +73,17 @@ $(document).ready(function () {
         blockSearchFocusUtterances = false;
     });
 
+    // Giscus support to block search focus when hitting the S key
+    blockSearchFocusGiscus = false;
+
+    $('#giscus').focusin(function() {
+        blockSearchFocusGiscus = true;
+    });
+
+    $('#giscus').focusout(function() {
+        blockSearchFocusGiscus = false;
+    });
+
     // Keyboard-Support
     $(document).keyup(function (e) {
         if (e.keyCode === 27) {
@@ -80,7 +91,7 @@ $(document).ready(function () {
                 $("nav").slideUp();
             $("#search").autocomplete("val", "");
         }
-        else if (e.keyCode === 83 && !blockSearchFocusCommento || !blockSearchFocusUtterances) {
+        else if (e.keyCode === 83 && !blockSearchFocusCommento || !blockSearchFocusUtterances || !blockSearchFocusGiscus) {
             if (!$("nav").hasClass('permanentTopNav'))
                 $("nav").slideDown();
             $("#search").focus();
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 0d41b27..807d3b3 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -44,6 +44,20 @@ disqusShortname = ""
   # Enable / Disable comments on the articles via commento
   commentoJsURL = "https://commento.lednerb.de/js/commento.js"
 
+  # Enable / Disable Giscus comments
+  giscus             = true
+  giscusJsUrl        = "https://giscus.app/client.js"
+  giscusRepository   = "Lednerb/bilberry-hugo-theme"
+  giscusRepositoryId = "R_kgDOGX153A"
+  giscusMapping      = "pathname"
+  giscusCategory     = "Announcements"
+  giscusCategoryId   = "DIC_kwDOGX153M4B_2Vz"
+  giscusTheme        = "light"
+  giscusReactions    = "1"
+  giscusEmitMetadata = "0"
+  giscusLanguage     = "en"
+  giscusCrossOrigin  = "anonymous"
+
   # Enable / Disable Utterances comments
   utterances    = true
   utterancesJsUrl     = "https://utteranc.es/client.js"
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 9d5e47b..3ce6d43 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -11,6 +11,7 @@
         <div id="comments-container">
             {{ template "_internal/disqus.html" . }}
             {{ partial "commento.html" . }}
+            {{ partial "giscus.html" . }}
             {{ partial "utterances.html" . }}
         </div>
     {{ end }}
diff --git a/layouts/partials/giscus.html b/layouts/partials/giscus.html
new file mode 100644
index 0000000..dfe6200
--- /dev/null
+++ b/layouts/partials/giscus.html
@@ -0,0 +1,20 @@
+{{ if .Site.Params.giscus }}
+    <script src="{{ .Site.Params.giscusJsUrl }}"
+        data-repo="{{ .Site.Params.giscusRepository }}"
+        data-repo-id="{{ .Site.Params.giscusRepositoryId }}"
+        data-category="{{.Site.Params.giscusCategory}}"
+        data-category-id="{{ .Site.Params.giscusCategoryId }}"
+        data-mapping="{{ .Site.Params.giscusMapping }}"
+        data-reactions-enabled="{{ .Site.Params.giscusReactions }}"
+        data-emit-metadata="{{ .Site.Params.giscusMetadata }}"
+        data-theme="{{ .Site.Params.giscusTheme }}"
+        {{ if isset .Site.Params "giscusLanguage" }}
+        data-lang="{{ .Site.Params.giscusLanguage }}"
+        {{ else }}
+        data-lang="{{ .Site.Language.Lang }}"
+        {{ end }}
+        crossorigin="{{ .Site.Params.giscusCrossOrigin }}"
+        async>
+</script>
+    <div id="giscus"></div>
+{{ end }}