From bedc8f56b595ed13db27b16c1e157149c4bedcac Mon Sep 17 00:00:00 2001
From: Jason Lyu <xjasonlyu@gmail.com>
Date: Sat, 29 Apr 2023 06:56:41 +0000
Subject: [PATCH] feat: add giscus comments system (#448)
---
layouts/_default/single.html | 6 ++++++
layouts/partials/comments/giscus.html | 45 +++++++++++++++++++++++++++++++++++++++++++++
README.md | 2 +-
3 files changed, 52 insertions(+), 1 deletions(-)
diff --git a/README.md b/README.md
index 2811769..7ba4e86 100644
--- a/README.md
+++ b/README.md
@@ -21,7 +21,7 @@
- Post Thumbnails (optional)
- 100⁄100 Google Lighthouse score
- Analytics powered by Google Analytics, Simple Analytics and Umami (optional)
-- Comments powered by Disqus, Commento, Gitalk or Utteranc.es (optional)
+- Comments powered by Disqus, Commento, Gitalk, Utteranc.es or Giscus (optional)
- KaTex support (optional)
- Formspree Contact Form (optional)
- Twitter Cards support
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index f1c6d21..acaad3f 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -89,6 +89,12 @@
{{ partial "comments/utterances.html" . }}
</div>
{{- end -}}
+ {{- if .Site.Params.giscus.repo -}}
+ <div id="comment">
+ <h2>{{ i18n "comments" }}</h2>
+ {{ partial "comments/giscus.html" . }}
+ </div>
+ {{- end -}}
{{- if .Site.Params.CommentoURL -}}
<div id="comment">
<h2>{{ i18n "comments" }}</h2>
diff --git a/layouts/partials/comments/giscus.html b/layouts/partials/comments/giscus.html
new file mode 100644
index 0000000..33af507
--- /dev/null
+++ b/layouts/partials/comments/giscus.html
@@ -0,0 +1,45 @@
+<script>
+ const getStoredTheme = () => localStorage.getItem("theme") === "dark" ? "dark" : "light";
+
+ const setGiscusTheme = () => {
+ const sendMessage = (message) => {
+ const iframe = document.querySelector('iframe.giscus-frame');
+ if (iframe) {
+ iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
+ }
+ }
+ sendMessage({ setConfig: { theme: getStoredTheme() } })
+ }
+
+ document.addEventListener("DOMContentLoaded", () => {
+ const giscusAttributes = {
+ "src": "https://giscus.app/client.js",
+ "data-repo": "{{ .Site.Params.giscus.repo }}",
+ "data-repo-id": "{{ .Site.Params.giscus.repoID }}",
+ "data-category": "{{ .Site.Params.giscus.category }}",
+ "data-category-id": "{{ .Site.Params.giscus.categoryID }}",
+ "data-mapping": "{{ .Site.Params.giscus.mapping | default "pathname" }}",
+ "data-strict": "{{ .Site.Params.giscus.strict | default "0" }}",
+ "data-reactions-enabled": "{{ .Site.Params.giscus.reactionsEnabled | default "1" }}",
+ "data-emit-metadata": "{{ .Site.Params.giscus.emitMetadata | default "0" }}",
+ "data-input-position": "{{ .Site.Params.giscus.inputPosition | default "bottom" }}",
+ "data-theme": getStoredTheme(),
+ "data-lang": "{{ .Site.Params.giscus.lang | default "en" }}",
+ "data-loading": "{{ .Site.Params.giscus.loading | default "lazy" }}",
+ "crossorigin": "anonymous",
+ "async": "",
+ };
+
+ // Dynamically create script tag.
+ const giscusScript = document.createElement("script");
+ Object.entries(giscusAttributes).forEach(
+ ([key, value]) => giscusScript.setAttribute(key, value));
+ document.getElementById("comment").appendChild(giscusScript);
+
+ // Update giscus theme when the theme switcher is clicked.
+ const themeSwitcher = document.querySelector(".themeswitch");
+ if (themeSwitcher) {
+ themeSwitcher.addEventListener("click", setGiscusTheme);
+ }
+ });
+</script>
--
Gitblit v1.10.0