Add support for giscus comments (#83)

rohandebsarkar · May 17, 2023 · 336533b · 336533b
2 parents 055e026 + a4d12ef
commit 336533b
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 1 deletion.
diff --git a/exampleSite/config/_default/params.yaml b/exampleSite/config/_default/params.yaml
@@ -28,3 +28,21 @@ socialNavbar: true # show social icons on navbar
 socialHomePage: true # show social icons on the home page
 
 colorTheme: blue # choose a theme from `data/themes` folder
+
+giscusScript: >
+ <script src="https://giscus.app/client.js"
+ data-repo="rohandebsarkar/academic-folio"
+ data-repo-id="R_kgDOI0baIw"
+ data-category="Comments (giscus)"
+ data-category-id="DIC_kwDOI0baI84CWhyL"
+ data-mapping="og:title"
+ data-strict="0"
+ data-reactions-enabled="1"
+ data-emit-metadata="0"
+ data-input-position="top"
+ data-theme="preferred_color_scheme"
+ data-lang="en"
+ data-loading="lazy"
+ crossorigin="anonymous"
+ async
+ ></script>
diff --git a/layouts/partials/scripts/giscus.html b/layouts/partials/scripts/giscus.html
@@ -0,0 +1,19 @@
+{{ safeHTML .Site.Params.giscusScript }}
+
+<script>
+ function setGiscusTheme(theme) {
+ function sendMessage(message) {
+ const iframe = document.querySelector('iframe.giscus-frame');
+ if (!iframe) return;
+ iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
+ }
+
+ sendMessage({
+ setConfig: {
+ theme: theme
+ }
+ });
+ }
+</script>
+
+<noscript>Please enable JavaScript to view the <a href="http://giscus.app/?ref_noscript">comments powered by giscus.</a></noscript>
diff --git a/layouts/partials/scripts/theme.html b/layouts/partials/scripts/theme.html
@@ -1,7 +1,8 @@
 <script>
  function toggleTheme() {
  document.documentElement.classList.toggle('dark');
- localStorage.theme = localStorage.theme === 'dark' ? 'light' : 'dark'
+ localStorage.theme = localStorage.theme === 'dark' ? 'light' : 'dark';
+ if(typeof setGiscusTheme == "function") setGiscusTheme(localStorage.theme);
  };
 
  if ((!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches) || localStorage.theme === 'dark') {

diff --git a/layouts/posts/single.html b/layouts/posts/single.html
@@ -48,4 +48,10 @@ <h3 class="text-sm italic text-secondary">
  <article class="markdown">
  {{ .Content }}
  </article>
+
+ {{ if (and .Site.Params.giscusScript (not .Params.disableGiscusComments)) }}
+ <div id="comments">
+ {{ partial "scripts/giscus" . }}
+ </div>
+ {{ end }}
 {{ end }}