add giscus support (daattali#888)

Author: patgarz

CHANGELOG.md

@@ -14,6 +14,7 @@
 - Updated staticman from using v2 (public servers) to v3 (private servers) due to the public servers becoming obsolete (#775)
 - Added support for Cloudflare Analytics (#797)
 - Added Reddit in share options of posts (#815)
+- Added support for giscus comments (#886)
 - Fixed bug where staticman didn't work jQuery slim version is used (#766)
 - Fixed very long strings to wrap around the next line rather than go off-screen (#787)
 - Added `footer-hover-col` config setting to customize the hover colour of links in the footer (#848)

README.md

@@ -35,7 +35,7 @@ __Check out [*What's New?*](https://beautifuljekyll.com/updates/) to see the lat
 - **Flexible usage**: Use Beautiful Jekyll directly on GitHub or via a Ruby gem - choose the best [development method](#build-your-website-in-3-steps) for you.
 - **Battle-tested**: By using Beautiful Jekyll, you'll be joining 50,000+ users enjoying this theme since 2015.
 - **SEO and social media support**: Customize how your site looks on Google and when shared on social media.
-- **Comments support**: Add comments to any page using either [Disqus](https://disqus.com/), [Facebook comments](https://developers.facebook.com/docs/plugins/comments), [Utterances](https://utteranc.es/), or [Staticman](https://staticman.net).
+- **Comments support**: Add comments to any page using either [Disqus](https://disqus.com/), [Facebook comments](https://developers.facebook.com/docs/plugins/comments), [Utterances](https://utteranc.es/), [Staticman](https://staticman.net), or [giscus](https://giscus.app).
 - **Tags**: Any blog post can be tagged with keywords, and an index page is automatically generated.
 - **Analytics**: Easily integrate Google Analytics, or other analytics platforms, to track visits to your website.
 - **Search**: Let users easily find any page using a Search button in the navigation bar.
@@ -146,7 +146,7 @@ subtitle    | Short description of page or blog post that goes under the title
 tags        | List of tags to categorize the post. Separate the tags with commas and place them inside square brackets. Example: `[personal, analysis, finance]`
 cover-img   | Include a large full-width image at the top of the page. You can either provide the path to a single image (eg. `"/path/to/img"`) , or a list of images to cycle through (eg. `["/path/img1", "/path/img2"]`). If you want to add a caption to an image, then you must use the list notation (use `[]` even if you have only one image), and each image should be provided as `"/path/to/img" : "Caption of image"`.
 thumbnail-img | For blog posts, if you want to add a thumbnail that will show up in the feed, use `thumbnail-img: /path/to/image`. If no thumbnail is provided, then `cover-img` will be used as the thumbnail. You can use `thumbnail-img: ""` to disable a thumbnail.
-comments    | If you want do add comments to a specific page, use `comments: true`. Comments only work if you enable one of the comments providers (Facebook, disqus, staticman, utterances) in `_config.yml` file. Comments are automatically enabled on blog posts but not on other pages; to turn comments off for a specific post, use `comments: false`.
+comments    | If you want do add comments to a specific page, use `comments: true`. Comments only work if you enable one of the comments providers (Facebook, disqus, staticman, utterances, giscus) in `_config.yml` file. Comments are automatically enabled on blog posts but not on other pages; to turn comments off for a specific post, use `comments: false`.
 
 ## Parameters for SEO and social media sharing
 

_config.yml

@@ -184,6 +184,22 @@ footer-hover-col: "#0085A1"
 #    siteKey  : # You need to apply for a site key on Google
 #    secret   : # Encrypt your password by going to https://<your-own-api>/v3/encrypt/<your-site-secret>
 
+# To use giscus comments:
+# (0) Uncomment the following giscus section, (1) Enable Discussions in your GitHub repository, 
+# (2) Install the giscus app in your repository (details at https://giscus.app),
+# (3) Fill in *all* the parameters below 
+# See more details about giscus and each of the following parameters at https://giscus.app
+#giscus:
+#  hostname: giscus.app # Replace with your giscus instance's hostname if self-hosting
+#  repository: # GitHub username/repository eg. "daattali/beautiful-jekyll"
+#  repository-id: # ID of your repository, retrieve this info from https://giscus.app
+#  category: Announcements # Category name of your GitHub Discussion posts
+#  category-id: # ID of your category, retrieve this info from https://giscus.app
+#  mapping: pathname
+#  reactions-enabled: 1
+#  emit-metadata: 0
+#  theme: light
+
 # --- Misc --- #
 
 # Ruby Date Format to show dates of posts

_includes/comments.html

@@ -3,4 +3,5 @@
   {% include fb-comment.html %}
   {% include staticman-comments.html %}
   {% include utterances-comment.html %}
+  {% include giscus-comment.html %}
 {% endif %}

_includes/giscus-comment.html

@@ -0,0 +1,16 @@
+{% if site.giscus.repository and site.giscus.hostname %}
+
+<script src="https://{{ site.giscus.hostname }}/client.js"
+        data-repo="{{ site.giscus.repository }}"
+        data-repo-id="{{ site.giscus.repository-id }}"
+        data-category="{{ site.giscus.category }}"
+        data-category-id="{{ site.giscus.category-id }}"
+        data-mapping="{{ site.giscus.mapping }}"
+        data-reactions-enabled="{{ site.giscus.reactions-enabled }}"
+        data-emit-metadata="{{ site.giscus.emit-metadata }}"
+        data-theme="{{ site.giscus.theme }}"
+        crossorigin="anonymous"
+        async>
+</script>
+
+{% endif %}