Optimize the way to set Giscus theme by sending message.

Author: ramsayleung

README.org

@@ -6,4 +6,4 @@
 * Description
   The blog is migrated from the original self-hosted [[https://github.com/ramsayleung/blog][blog]] which was interesting and delightful to build something from scratch.
 
-  There is Ramsay’ personal blog, where he shares a bit of what he has learned along the way.
+  There is Ramsay's personal blog, where he shares a bit of what he has learned along the way.

config.yml

@@ -81,7 +81,7 @@ params:
   homeInfoParams:
     Title: "Hi there \U0001F44B"
     Content: >
-      There is Ramsay' personal blog, where he shares a bit of what he has learned along the way. \
+      There is Ramsay's personal blog, where he shares a bit of what he has learned along the way. \
 
       _-- **Ramsay Leung**_
 

layouts/partials/comments.html

@@ -2,49 +2,63 @@
   <h2>Comments</h2>
   <div id="comments-giscus"></div>
 </section>
-
 <script type="text/javascript">
-
 function getCurrentTheme() {
   return document.documentElement.getAttribute('data-theme') || document.body.classList.contains('dark') ? 'dark' : 'light';
 }
 
+function setGiscusTheme(darkMode=false) {
+      const theme = darkMode ? "dark" : "light";
+      var iframe = document.querySelector('.giscus-frame');
+
+      if (iframe) {
+	 var url = new URL(iframe.src);
+	 url.searchParams.set('theme', theme);
+	 iframe.src = url.toString();
+      }
+}
+
 function loadComment(darkMode=false) {
-  const currentUrl = URL.parse(window.location.href); 
-  const paths = currentUrl.pathname.split('/').filter(x => x!= '');
-  const isChinese = paths.length > 0 && paths[0] == "zh";
+  const isChinese = "{{.Lang}}" == "zh";
   const commentContainer = document.getElementById("comments-giscus");
+  
+  // Only proceed if container exists and visibility is not hidden
   if (commentContainer !== null) {
-    commentContainer.innerHTML = ''
-    const commentScript = document.createElement("script");
-    commentScript.setAttribute("src", "https://giscus.app/client.js");
-    commentScript.setAttribute("data-repo", "ramsayleung/comment");
-    commentScript.setAttribute("data-repo-id", "MDEwOlJlcG9zaXRvcnkzMDk2NjQ1NDk=");
-    commentScript.setAttribute("data-category", "General");
-    commentScript.setAttribute("data-category-id", "DIC_kwDOEnUbJc4Cltnz");
-    commentScript.setAttribute("data-mapping", "pathname");
-    commentScript.setAttribute("data-strict", "0");
-    commentScript.setAttribute("data-reactions-enabled", "1");
-    commentScript.setAttribute("data-emit-metadata", "0");
-    commentScript.setAttribute("data-input-position", "bottom");
-    commentScript.setAttribute("data-theme", darkMode ? "dark" : "light");
-    commentScript.setAttribute("crossorigin", "anonymous");
-    commentScript.setAttribute("data-lang", isChinese ? "zh-CN": "en");
-    commentScript.setAttribute("async", "true");
-    commentContainer.appendChild(commentScript);
+    if (!commentContainer.hasAttribute('data-giscus-loaded')) {
+      console.log('Initial giscus load');
+      const commentScript = document.createElement("script");
+      commentScript.setAttribute("src", "https://giscus.app/client.js");
+      commentScript.setAttribute("data-repo", "ramsayleung/comment");
+      commentScript.setAttribute("data-repo-id", "MDEwOlJlcG9zaXRvcnkzMDk2NjQ1NDk=");
+      commentScript.setAttribute("data-category", "General");
+      commentScript.setAttribute("data-category-id", "DIC_kwDOEnUbJc4Cltnz");
+      commentScript.setAttribute("data-mapping", "pathname");
+      commentScript.setAttribute("data-strict", "0");
+      commentScript.setAttribute("data-reactions-enabled", "1");
+      commentScript.setAttribute("data-emit-metadata", "0");
+      commentScript.setAttribute("data-input-position", "bottom");
+      commentScript.setAttribute("data-theme", darkMode ? "dark" : "light");
+      commentScript.setAttribute("crossorigin", "anonymous");
+      commentScript.setAttribute("data-lang", isChinese ? "zh-CN": "en");
+      commentScript.setAttribute("async", "true");
+      commentContainer.appendChild(commentScript);
+      commentContainer.setAttribute('data-giscus-loaded', 'true');
+    }
   }
 }
 
-const isDarkMode = getCurrentTheme() === 'dark';
-loadComment(isDarkMode);
+let currentTheme = getCurrentTheme();
+loadComment(currentTheme === 'dark');
 
 // Watch for theme changes
 const themeObserver = new MutationObserver((mutations) => {
     mutations.forEach((mutation) => {
         if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
-          const isDarkMode = getCurrentTheme() === 'dark';
-          loadComment(isDarkMode);
-          console.log(`changing theme`);
+          const newTheme = getCurrentTheme();
+          if (newTheme !== currentTheme) {
+            currentTheme = newTheme;
+            setGiscusTheme(currentTheme === 'dark');
+          }
         }
     });
 });
@@ -54,5 +68,4 @@ <h2>Comments</h2>
     attributes: true, 
     attributeFilter: ['class'] 
 });
-
 </script>