Add suppport for Giscus comments engine

assets/js/giscus/index.ts

@@ -0,0 +1,44 @@
+import * as params from '@params';
+import { default as LocalStorage } from 'js/local-storage';
+import { getPreferMode } from 'js/mode/prefer';
+
+class Giscus {
+  run() {
+    const theme = params.giscus.theme;
+    if (!theme) {
+      document.addEventListener('hbs:mode', (e: CustomEvent) => {
+        this.rerender(this.getTheme(e.detail.mode));
+      });
+      setTimeout(() => {
+        this.rerender(this.getTheme(LocalStorage.getItem('mode')));
+      }, 2000);
+    }
+  }
+
+  getTheme(mode) {
+    if (mode === 'auto') {
+      mode = getPreferMode();
+    }
+    return mode === 'dark' ? 'dark' : 'light';
+  }
+
+  rerender(theme) {
+    const msg = {
+      type: 'set-theme',
+      theme: theme,
+    };
+    const iframe = document.querySelector<HTMLIFrameElement>('iframe.giscus-frame');
+    if (!iframe) {
+        return;
+    };
+    iframe.contentWindow.postMessage({ giscus: {
+        setConfig: {
+            theme: 'https://giscus.app/themes/' + theme + '.css',
+        }
+    }}, 'https://giscus.app');
+  }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  new Giscus().run();
+});

assets/js/mode/index.ts

@@ -1,6 +1,7 @@
 import Component from 'js/component';
 import { default as params } from '@params';
 import { default as LocalStorage } from 'js/local-storage';
+import { getPreferMode } from './prefer';
 
 class ModeToggle implements Component {
   public key = 'mode';
@@ -44,19 +45,6 @@ class ModeToggle implements Component {
     return this.mode === 'auto';
   }
 
-  getPreferMode(): string {
-    if (
-      window
-        .getComputedStyle(document.body)
-        .getPropertyValue('--mode')
-        .toString()
-        .trim() === 'dark'
-    ) {
-      return 'dark';
-    }
-    return 'light';
-  }
-
   active(mode: string) {
     this.mode = mode;
     this.items.forEach((ele) => {
@@ -79,7 +67,7 @@ class ModeToggle implements Component {
 
   setMode(value: string) {
     if (value === 'auto') {
-      value = this.getPreferMode();
+      value = getPreferMode();
     }
     console.debug(`Switch to ${value} mode`);
     document.body.parentElement.setAttribute('data-theme', value);

assets/js/mode/prefer.ts

@@ -0,0 +1,12 @@
+export function getPreferMode(): string {
+    if (
+      window
+        .getComputedStyle(document.body)
+        .getPropertyValue('--mode')
+        .toString()
+        .trim() === 'dark'
+    ) {
+      return 'dark';
+    }
+    return 'light';
+}

assets/main/js/utterances.ts → assets/js/utterances/index.ts

@@ -1,5 +1,6 @@
 import * as params from '@params';
 import { default as LocalStorage } from 'js/local-storage';
+import { getPreferMode } from 'js/mode/prefer';
 
 class Utterances {
   run() {
@@ -14,22 +15,9 @@ class Utterances {
     }
   }
 
-  getPreferMode(): string {
-    if (
-      window
-        .getComputedStyle(document.body)
-        .getPropertyValue('--mode')
-        .toString()
-        .trim() === 'dark'
-    ) {
-      return 'dark';
-    }
-    return 'light';
-  }
-
   getTheme(mode) {
     if (mode === 'auto') {
-      mode = this.getPreferMode();
+      mode = getPreferMode();
     }
     return mode === 'dark' ? 'github-dark' : 'github-light';
   }

exampleSite/config/_default/params.toml

@@ -125,13 +125,25 @@ viewer = true # Image Viewer
   # nd = true # No derivatives or adaptations of your work are permitted.
   # sa = true # Adaptations must be shared under the same terms.
 
-[utterances]
-  repo = "razonyang/hugo-theme-bootstrap-comments" # Replace with your repository.
-  #issueTerm = "pathname" # pathname, url, title, og:title
-  #label = "comment"
+# [utterances]
+  # repo = "razonyang/hugo-theme-bootstrap" # Replace with your repository.
+  # issueTerm = "pathname" # pathname, url, title, og:title
+  # label = "comment"
   # By default, light and dark mode correspond to github-light and github-dark, respectively.
   # Optional values: github-light, github-dark, preferred-color-scheme, github-dark-orange, icy-dark, dark-blue, photon-dark.
-  #theme = "" 
+  # theme = ""
+
+[giscus]
+  repo = "razonyang/hugo-theme-bootstrap"
+  repoId = "MDEwOlJlcG9zaXRvcnkzMDQzMzI4NTM="
+  category = "General"
+  categoryId = "MDE4OkRpc2N1c3Npb25DYXRlZ29yeTMyODkzODg2"
+  # theme = "dark" # Default to auto.
+  # mapping = "title" # Default to pathname.
+  # inputPosition = "bottom" # Default to top.
+  # reactions = false # Disable reactions.
+  # metadata = true # Emit discussion metadata.
+  # lang = "en" # Specify language, default to site language.
 
 [search]
   paginate = 5 # Pagination. Default to 10.

exampleSite/content/docs/configuration/site-params/index.md

@@ -101,6 +101,7 @@ The site parameters are located in `config/_default/params.toml` by default.
 | `customCSS` | Array | - | See also [custom assets]({{< ref "/docs/advanced/custom-assets#external-assets" >}}).
 | `customJS` | Array | - | See also [custom assets]({{< ref "/docs/advanced/custom-assets#external-assets" >}}).
 | `utterances` | Object | - | [Utterances]({{< ref "/docs/widgets/comments#utterances" >}}) configuration.
+| `giscus` | Object | - | [Giscus]({{< ref "/docs/widgets/comments#giscus" >}}) configuration.
 | **Creative Commons License**
 | `creativeCommons` | Object | - |
 | `creativeCommons.by` | Boolean | `true` | Credit must be given to you, the creator.

exampleSite/content/docs/configuration/site-params/index.zh-hans.md

@@ -104,6 +104,7 @@ authors = ["RazonYang"]
 | `customCSS` | Array | - | 自定义 CSS， 主要用于导入外部。 请查阅[自定义资源](#自定义资源)。
 | `customJS` | Array | - | 自定义 JS， 主要用于导入外部 JS。 请查阅[自定义资源](#自定义资源)。
 | `utterances` | Object | - | [Utterances]({{< ref "/docs/widgets/comments#utterances" >}}) 配置。
+| `giscus` | Object | - | [Giscus]({{< ref "/docs/widgets/comments#giscus" >}}) 配置。
 | **Creative Commons License**
 | `creativeCommons` | Object | - |
 | `creativeCommons.by` | Boolean | `true` | 署名

exampleSite/content/docs/configuration/site-params/index.zh-hant.md

@@ -104,6 +104,7 @@ authors = ["RazonYang"]
 | `customCSS` | Array | - | 自定義 CSS， 主要用於導入外部。 請查閱[自定義資源](#自定義資源)。
 | `customJS` | Array | - | 自定義 JS， 主要用於導入外部 JS。 請查閱[自定義資源](#自定義資源)。
 | `utterances` | Object | - | [Utterances]({{< ref "/docs/widgets/comments#utterances" >}}) 配置。
+| `giscus` | Object | - | [Giscus]({{< ref "/docs/widgets/comments#giscus" >}}) 配置。
 | **Creative Commons License**
 | `creativeCommons` | Object | - |
 | `creativeCommons.by` | Boolean | `true` | 署名

exampleSite/content/docs/getting-started/introduction/index.md

@@ -59,7 +59,7 @@ Hugo Bootstap Theme(HBS) is a fast, responsive, multipurpose and feature-rich Hu
 - [Syntax Highlighting]({{< ref "/docs/look-and-feel#syntax-highlighting" >}}).
 - [Reward Widget]({{< ref "/docs/widgets/reward" >}}), AKA Buy Me a Coffee: any platform that supports QR code is supported.
 - Table of Contents.
-- [Comments]({{< ref "/docs/widgets/comments" >}}): Disqus and Utterances can be used out of box, you can also integrate with other comments services.
+- [Comments]({{< ref "/docs/widgets/comments" >}}): Disqus, Utterances and Giscus can be used out of box, you can also integrate with other comments services.
 - [Custom Assets]({{< ref "/docs/advanced/custom-assets" >}}): custom CSS and JS.
 - [Hooks]({{< ref "/docs/advanced/hooks" >}}): provides ability to add custom code on page.
 - [Social Links]({{< ref "/docs/widgets/social-links" >}}).

exampleSite/content/docs/getting-started/introduction/index.zh-hans.md

@@ -59,7 +59,7 @@ Hugo Bootstap Theme(HBS) 是一个快速、响应式、多用途和功能丰富
 - [Syntax Highlighting]({{< ref "/docs/look-and-feel#syntax-highlighting" >}}).
 - [Reward Widget]({{< ref "/docs/widgets/reward" >}}), AKA Buy Me a Coffee: any platform that supports QR code is supported.
 - Table of Contents.
-- [Comments]({{< ref "/docs/widgets/comments" >}}): Disqus and Utterances can be used out of box, you can also integrate with other comments services.
+- [Comments]({{< ref "/docs/widgets/comments" >}}): Disqus, Utterances and Giscus can be used out of box, you can also integrate with other comments services.
 - [Custom Assets]({{< ref "/docs/advanced/custom-assets" >}}): custom CSS and JS.
 - [Hooks]({{< ref "/docs/advanced/hooks" >}}): provides ability to add custom code on page.
 - [Social Links]({{< ref "/docs/widgets/social-links" >}}).

exampleSite/content/docs/getting-started/introduction/index.zh-hant.md

@@ -59,7 +59,7 @@ Hugo Bootstap Theme(HBS) 是壹個快速、響應式、多用途和功能豐富
 - [Syntax Highlighting]({{< ref "/docs/look-and-feel#syntax-highlighting" >}}).
 - [Reward Widget]({{< ref "/docs/widgets/reward" >}}), AKA Buy Me a Coffee: any platform that supports QR code is supported.
 - Table of Contents.
-- [Comments]({{< ref "/docs/widgets/comments" >}}): Disqus and Utterances can be used out of box, you can also integrate with other comments services.
+- [Comments]({{< ref "/docs/widgets/comments" >}}): Disqus, Utterances and Giscus can be used out of box, you can also integrate with other comments services.
 - [Custom Assets]({{< ref "/docs/advanced/custom-assets" >}}): custom CSS and JS.
 - [Hooks]({{< ref "/docs/advanced/hooks" >}}): provides ability to add custom code on page.
 - [Social Links]({{< ref "/docs/widgets/social-links" >}}).

exampleSite/content/docs/widgets/comments/index.md

@@ -11,7 +11,8 @@ categories = [
 ]
 tags = [
   "Disqus",
-  "Utterances"
+  "Utterances",
+  "Giscus"
 ]
 series = [
   "Docs"
@@ -27,7 +28,7 @@ authors = ["RazonYang"]
   pre = '<i class="fas fa-fw fa-comments me-1"></i>'
 +++
 
-[Disqus](https://disqus.com/) and [Utterances](https://utteranc.es/) comments widgets are supported out of box.
+[Disqus](https://disqus.com/), [Utterances](https://utteranc.es/) and [Giscus](https://giscus.app/) comments widgets are supported out of box.
 This article shows how to configure them and even customize your own comment widgets.
 
 <!--more-->
@@ -71,6 +72,33 @@ disqusShortname = "yourdiscussshortname"
 - Make sure the [utterances app](https://github.com/apps/utterances) is installed on the repo, otherwise users will not be able to post comments.
 - If your repo is a fork, navigate to its settings tab and confirm the issues feature is turned on.
 
+## Giscus
+
+[Giscus](https://giscus.app/) is a lightweight comments widget built on GitHub discussions.
+
+```toml
+[giscus]
+  repo = "user/repo"
+  repoId = ""
+  category = ""
+  categoryId = ""
+```
+
+### Parameters
+
+| Name | Type | Default | Description |
+|:---|:---|:---|:---
+| `giscus.repo` | String | - | GitHub repository. Required.
+| `giscus.repoId` | String | - | GitHub repository ID. Required.
+| `giscus.category` | String | - | Discussions category. Required.
+| `giscus.categoryId` | String | - | Discussions category ID. Required.
+| `giscus.theme` | String | - | Left it empty if you want to follow the theme mode.
+| `giscus.mapping` | String | `pathname` | The mapping between blog posts and GitHub discussions: `pathname`, `url`, `title` and `og:title`.
+| `giscus.inputPosition` | String | `top` | The input position: `top` or `bottom`.
+| `giscus.reactions` | Boolean | `true` | Turn on/off the reactions.
+| `giscus.metadata` | Boolean | `false` | Emit discussion metadata.
+| `giscus.lang` | String | - | Specify language, default to site language.
+
 ## Custom Comments Widget
 
 We don't intend to support all comments widgets, but don't worry, you can customize your own comments widget.

exampleSite/content/docs/widgets/comments/index.zh-hans.md

@@ -11,7 +11,8 @@ categories = [
 ]
 tags = [
   "Disqus",
-  "Utterances"
+  "Utterances",
+  "Giscus"
 ]
 series = [
   "文档"
@@ -27,7 +28,7 @@ authors = ["RazonYang"]
   pre = '<i class="fas fa-fw fa-comments me-1"></i>'
 +++
 
-[Disqus](https://disqus.com/) 和 [Utterances](https://utteranc.es/) 评论小部件都是开箱即用的。本文将展示如何配置它们，甚至自定义你自己的评论小部件。
+[Disqus](https://disqus.com/)、[Utterances](https://utteranc.es/) 和 [Giscus](https://giscus.app/) 评论小部件都是开箱即用的。本文将展示如何配置它们，甚至自定义你自己的评论小部件。
 
 <!--more-->
 
@@ -70,6 +71,33 @@ disqusShortname = "yourdiscussshortname"
 - 确保仓库已经安装了 [utterances app](https://github.com/apps/utterances)，否则用户无法发表评论。
 - 如果你的仓库是克隆的，请在设置中确保已经启用了 issues 功能。
 
+## Giscus
+
+[Giscus](https://giscus.app/) is a lightweight comments widget built on GitHub discussions.
+
+```toml
+[giscus]
+  repo = "user/repo"
+  repoId = ""
+  category = ""
+  categoryId = ""
+```
+
+### Parameters
+
+| Name | Type | Default | Description |
+|:---|:---|:---|:---
+| `giscus.repo` | String | - | GitHub repository. Required.
+| `giscus.repoId` | String | - | GitHub repository ID. Required.
+| `giscus.category` | String | - | Discussions category. Required.
+| `giscus.categoryId` | String | - | Discussions category ID. Required.
+| `giscus.theme` | String | - | Left it empty if you want to follow the theme mode.
+| `giscus.mapping` | String | `pathname` | The mapping between blog posts and GitHub discussions: `pathname`, `url`, `title` and `og:title`.
+| `giscus.inputPosition` | String | `top` | The input position: `top` or `bottom`.
+| `giscus.reactions` | Boolean | `true` | Turn on/off the reactions.
+| `giscus.metadata` | Boolean | `false` | Emit discussion metadata.
+| `giscus.lang` | String | - | Specify language, default to site language.
+
 ## 自定义评论小部件
 
 我们不打算支持所有的评论小部件，但别担心，你完全可以自定义评论小部件。

exampleSite/content/docs/widgets/comments/index.zh-hant.md

@@ -11,7 +11,8 @@ categories = [
 ]
 tags = [
   "Disqus",
-  "Utterances"
+  "Utterances",
+  "Giscus"
 ]
 series = [
   "文檔"
@@ -27,7 +28,7 @@ authors = ["RazonYang"]
   pre = '<i class="fas fa-fw fa-comments me-1"></i>'
 +++
 
-[Disqus](https://disqus.com/) 和 [Utterances](https://utteranc.es/) 評論小部件都是開箱即用的。本文將展示如何配置它們，甚至自定義你自己的評論小部件。
+[Disqus](https://disqus.com/)、[Utterances](https://utteranc.es/) 和 [Giscus](https://giscus.app/) 評論小部件都是開箱即用的。本文將展示如何配置它們，甚至自定義你自己的評論小部件。
 
 <!--more-->
 
@@ -70,6 +71,33 @@ disqusShortname = "yourdiscussshortname"
 - 確保倉庫已經安裝了 [utterances app](https://github.com/apps/utterances)，否則用戶無法發表評論。
 - 如果你的倉庫是尅隆的，請在設定中確保已經啟用了 issues 功能。
 
+## Giscus
+
+[Giscus](https://giscus.app/) is a lightweight comments widget built on GitHub discussions.
+
+```toml
+[giscus]
+  repo = "user/repo"
+  repoId = ""
+  category = ""
+  categoryId = ""
+```
+
+### Parameters
+
+| Name | Type | Default | Description |
+|:---|:---|:---|:---
+| `giscus.repo` | String | - | GitHub repository. Required.
+| `giscus.repoId` | String | - | GitHub repository ID. Required.
+| `giscus.category` | String | - | Discussions category. Required.
+| `giscus.categoryId` | String | - | Discussions category ID. Required.
+| `giscus.theme` | String | - | Left it empty if you want to follow the theme mode.
+| `giscus.mapping` | String | `pathname` | The mapping between blog posts and GitHub discussions: `pathname`, `url`, `title` and `og:title`.
+| `giscus.inputPosition` | String | `top` | The input position: `top` or `bottom`.
+| `giscus.reactions` | Boolean | `true` | Turn on/off the reactions.
+| `giscus.metadata` | Boolean | `false` | Emit discussion metadata.
+| `giscus.lang` | String | - | Specify language, default to site language.
+
 ## 自定義評論小部件
 
 我們不打算支持所有的評論小部件，但別擔心，你完全可以自定義評論小部件。

layouts/partials/assets/main/js.html

@@ -4,7 +4,10 @@
 {{- $main := resources.Get "main/js/index.ts" }}
 {{- $scripts := slice $main -}}
 {{- if .Site.Params.utterances -}}
-  {{- $scripts = $scripts | append (resources.Get "main/js/utterances.ts") -}}
+  {{- $scripts = $scripts | append (resources.Get "js/utterances/index.ts") -}}
+{{- end -}}
+{{- if .Site.Params.giscus -}}
+  {{- $scripts = $scripts | append (resources.Get "js/giscus/index.ts") -}}
 {{- end -}}
 {{- $script := $scripts | resources.Concat "main/js/bundle.ts" | js.Build $options | fingerprint -}}
 <script data-precache src="{{ $script.Permalink }}" integrity="{{ $script.Data.Integrity }}" crossorigin="anonymous" defer></script>

layouts/partials/post/comments.html

@@ -7,6 +7,7 @@ <h2 class="card-title my-2 fs-4 text-surface">{{ i18n "comments" }}</h2>
   <div class="card-body">
     {{- partial "post/comments/disqus.html" . -}}
     {{- partial "post/comments/utterances" . -}}
+    {{- partial "post/comments/giscus" . -}}
     {{- partial "post/comments/custom" . -}}
   </div>
 </div>