From bbef90942955529fa37c0a4a766cea1f5ac7215d Mon Sep 17 00:00:00 2001
From: Dianyi Yang <105025148+kv9898@users.noreply.github.com>
Date: Sun, 13 Oct 2024 13:48:09 +0800
Subject: [PATCH 1/5] Update giscus.ejs to fix giscus color on load

---
 src/resources/formats/html/giscus/giscus.ejs | 43 ++++++++++++--------
 1 file changed, 27 insertions(+), 16 deletions(-)

diff --git a/src/resources/formats/html/giscus/giscus.ejs b/src/resources/formats/html/giscus/giscus.ejs
index d80da2f2fcb..b2fc0e09d20 100644
--- a/src/resources/formats/html/giscus/giscus.ejs
+++ b/src/resources/formats/html/giscus/giscus.ejs
@@ -1,17 +1,28 @@
-<script src="https://giscus.app/client.js"
-        data-repo="<%- giscus.repo %>"
-        data-repo-id="<%- giscus['repo-id'] %>"
-        data-category="<%- giscus.category %>"
-        data-category-id="<%- giscus['category-id'] %>"
-        data-mapping="<%- giscus.mapping %>"
-        data-reactions-enabled="<%- giscus['reactions-enabled'] ? 1 : 0 %>"
-        data-emit-metadata="0"
-        data-input-position="<%- giscus['input-position'] %>"
-        data-theme="<%- giscus.theme %>"
-        data-lang="<%- giscus.language %>"
-        crossorigin="anonymous"
-        <%- giscus.loading ? `data-loading=${giscus.loading}` : '' %>
-        async>
-</script>
 <input type="hidden" id="giscus-base-theme" value="<%- giscus.baseTheme %>">
-<input type="hidden" id="giscus-alt-theme" value="<%- giscus.altTheme %>">
\ No newline at end of file
+<input type="hidden" id="giscus-alt-theme" value="<%- giscus.altTheme %>">
+<script>
+setTimeout(() => {
+  var bodyClass = window.document.body.classList;
+  const GetTheme = () => {
+    const baseTheme = document.getElementById('giscus-base-theme').value;
+    const altTheme = document.getElementById('giscus-alt-theme').value;
+    return bodyClass.contains('quarto-dark') ? altTheme : baseTheme;
+  };
+  const script = document.createElement("script");
+      script.src = "https://giscus.app/client.js";
+      script.async = true;
+      script.dataset.repo = "<%- giscus.repo %>";
+      script.dataset.repoId = "<%- giscus['repo-id'] %>";
+      script.dataset.category = "<%- giscus.category %>";
+      script.dataset.categoryId = "<%- giscus['category-id'] %>";
+      script.dataset.mapping = "<%- giscus.mapping %>";
+      script.dataset.reactionsEnabled = "<%- giscus['reactions-enabled'] ? 1 : 0 %>";
+      script.dataset.emitMetadata = "0";
+      script.dataset.inputPosition = "<%- giscus['input-position'] %>";
+      script.dataset.theme = GetTheme();
+      script.dataset.lang = "<%- giscus.language %>";
+      script.crossOrigin = "anonymous";
+  // Insert the Giscus script after the current script
+  document.getElementById("quarto-content").appendChild(script);
+}, 50);
+</script>

From f2c6f6455d1e1a9e746c1e123a926c77592adcf9 Mon Sep 17 00:00:00 2001
From: Dianyi Yang <105025148+kv9898@users.noreply.github.com>
Date: Sun, 13 Oct 2024 22:07:00 +0800
Subject: [PATCH 2/5] Replace timeout with async while loop to increase
 robustness

---
 src/resources/formats/html/giscus/giscus.ejs | 34 ++++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/src/resources/formats/html/giscus/giscus.ejs b/src/resources/formats/html/giscus/giscus.ejs
index b2fc0e09d20..58709bc429c 100644
--- a/src/resources/formats/html/giscus/giscus.ejs
+++ b/src/resources/formats/html/giscus/giscus.ejs
@@ -1,6 +1,40 @@
 <input type="hidden" id="giscus-base-theme" value="<%- giscus.baseTheme %>">
 <input type="hidden" id="giscus-alt-theme" value="<%- giscus.altTheme %>">
 <script>
+async function loadGiscusWhenReady() {
+  while (!document.body.classList.contains('quarto-light') && !document.body.classList.contains('quarto-dark')) {
+    await new Promise(resolve => setTimeout(resolve, 50));
+  }
+
+  // Function to get the theme based on body class
+  const getTheme = () => {
+    const baseTheme = document.getElementById('giscus-base-theme').value;
+    const altTheme = document.getElementById('giscus-alt-theme').value;
+    return document.body.classList.contains('quarto-dark') ? altTheme : baseTheme;
+  };
+
+  // Create the Giscus script and add it to the desired location
+  const script = document.createElement("script");
+  script.src = "https://giscus.app/client.js";
+  script.async = true;
+  script.dataset.repo = "<%- giscus.repo %>";
+  script.dataset.repoId = "<%- giscus['repo-id'] %>";
+  script.dataset.category = "<%- giscus.category %>";
+  script.dataset.categoryId = "<%- giscus['category-id'] %>";
+  script.dataset.mapping = "<%- giscus.mapping %>";
+  script.dataset.reactionsEnabled = "<%- giscus['reactions-enabled'] ? 1 : 0 %>";
+  script.dataset.emitMetadata = "0";
+  script.dataset.inputPosition = "<%- giscus['input-position'] %>";
+  script.dataset.theme = getTheme();
+  script.dataset.lang = "<%- giscus.language %>";
+  script.crossOrigin = "anonymous";
+
+  // Append the script to the desired div instead of at the end of the body
+  document.getElementById("quarto-content").appendChild(script);
+}
+
+// Call the async function to start the loop
+loadGiscusWhenReady();
 setTimeout(() => {
   var bodyClass = window.document.body.classList;
   const GetTheme = () => {

From 066a860f13508aaa8433a6b7ea04469b9e04f8c5 Mon Sep 17 00:00:00 2001
From: Dianyi Yang <105025148+kv9898@users.noreply.github.com>
Date: Sun, 13 Oct 2024 22:12:16 +0800
Subject: [PATCH 3/5] remove redundant lines

---
 src/resources/formats/html/giscus/giscus.ejs | 24 --------------------
 1 file changed, 24 deletions(-)

diff --git a/src/resources/formats/html/giscus/giscus.ejs b/src/resources/formats/html/giscus/giscus.ejs
index 58709bc429c..16717a379d5 100644
--- a/src/resources/formats/html/giscus/giscus.ejs
+++ b/src/resources/formats/html/giscus/giscus.ejs
@@ -35,28 +35,4 @@ async function loadGiscusWhenReady() {
 
 // Call the async function to start the loop
 loadGiscusWhenReady();
-setTimeout(() => {
-  var bodyClass = window.document.body.classList;
-  const GetTheme = () => {
-    const baseTheme = document.getElementById('giscus-base-theme').value;
-    const altTheme = document.getElementById('giscus-alt-theme').value;
-    return bodyClass.contains('quarto-dark') ? altTheme : baseTheme;
-  };
-  const script = document.createElement("script");
-      script.src = "https://giscus.app/client.js";
-      script.async = true;
-      script.dataset.repo = "<%- giscus.repo %>";
-      script.dataset.repoId = "<%- giscus['repo-id'] %>";
-      script.dataset.category = "<%- giscus.category %>";
-      script.dataset.categoryId = "<%- giscus['category-id'] %>";
-      script.dataset.mapping = "<%- giscus.mapping %>";
-      script.dataset.reactionsEnabled = "<%- giscus['reactions-enabled'] ? 1 : 0 %>";
-      script.dataset.emitMetadata = "0";
-      script.dataset.inputPosition = "<%- giscus['input-position'] %>";
-      script.dataset.theme = GetTheme();
-      script.dataset.lang = "<%- giscus.language %>";
-      script.crossOrigin = "anonymous";
-  // Insert the Giscus script after the current script
-  document.getElementById("quarto-content").appendChild(script);
-}, 50);
 </script>

From 31bcfdd3c8d0a5d42e5211f1ddc60812e5608d63 Mon Sep 17 00:00:00 2001
From: Dianyi Yang <105025148+kv9898@users.noreply.github.com>
Date: Sun, 13 Oct 2024 22:07:00 +0800
Subject: [PATCH 4/5] Replace timeout with async while loop to increase
 robustness

---
 src/resources/formats/html/giscus/giscus.ejs | 48 ++++++++++++--------
 1 file changed, 29 insertions(+), 19 deletions(-)

diff --git a/src/resources/formats/html/giscus/giscus.ejs b/src/resources/formats/html/giscus/giscus.ejs
index b2fc0e09d20..16717a379d5 100644
--- a/src/resources/formats/html/giscus/giscus.ejs
+++ b/src/resources/formats/html/giscus/giscus.ejs
@@ -1,28 +1,38 @@
 <input type="hidden" id="giscus-base-theme" value="<%- giscus.baseTheme %>">
 <input type="hidden" id="giscus-alt-theme" value="<%- giscus.altTheme %>">
 <script>
-setTimeout(() => {
-  var bodyClass = window.document.body.classList;
-  const GetTheme = () => {
+async function loadGiscusWhenReady() {
+  while (!document.body.classList.contains('quarto-light') && !document.body.classList.contains('quarto-dark')) {
+    await new Promise(resolve => setTimeout(resolve, 50));
+  }
+
+  // Function to get the theme based on body class
+  const getTheme = () => {
     const baseTheme = document.getElementById('giscus-base-theme').value;
     const altTheme = document.getElementById('giscus-alt-theme').value;
-    return bodyClass.contains('quarto-dark') ? altTheme : baseTheme;
+    return document.body.classList.contains('quarto-dark') ? altTheme : baseTheme;
   };
+
+  // Create the Giscus script and add it to the desired location
   const script = document.createElement("script");
-      script.src = "https://giscus.app/client.js";
-      script.async = true;
-      script.dataset.repo = "<%- giscus.repo %>";
-      script.dataset.repoId = "<%- giscus['repo-id'] %>";
-      script.dataset.category = "<%- giscus.category %>";
-      script.dataset.categoryId = "<%- giscus['category-id'] %>";
-      script.dataset.mapping = "<%- giscus.mapping %>";
-      script.dataset.reactionsEnabled = "<%- giscus['reactions-enabled'] ? 1 : 0 %>";
-      script.dataset.emitMetadata = "0";
-      script.dataset.inputPosition = "<%- giscus['input-position'] %>";
-      script.dataset.theme = GetTheme();
-      script.dataset.lang = "<%- giscus.language %>";
-      script.crossOrigin = "anonymous";
-  // Insert the Giscus script after the current script
+  script.src = "https://giscus.app/client.js";
+  script.async = true;
+  script.dataset.repo = "<%- giscus.repo %>";
+  script.dataset.repoId = "<%- giscus['repo-id'] %>";
+  script.dataset.category = "<%- giscus.category %>";
+  script.dataset.categoryId = "<%- giscus['category-id'] %>";
+  script.dataset.mapping = "<%- giscus.mapping %>";
+  script.dataset.reactionsEnabled = "<%- giscus['reactions-enabled'] ? 1 : 0 %>";
+  script.dataset.emitMetadata = "0";
+  script.dataset.inputPosition = "<%- giscus['input-position'] %>";
+  script.dataset.theme = getTheme();
+  script.dataset.lang = "<%- giscus.language %>";
+  script.crossOrigin = "anonymous";
+
+  // Append the script to the desired div instead of at the end of the body
   document.getElementById("quarto-content").appendChild(script);
-}, 50);
+}
+
+// Call the async function to start the loop
+loadGiscusWhenReady();
 </script>

From 894526ce4cec185ef93416c1d447535901f35149 Mon Sep 17 00:00:00 2001
From: Dianyi Yang <105025148+kv9898@users.noreply.github.com>
Date: Sat, 19 Oct 2024 00:20:16 +0800
Subject: [PATCH 5/5] switch to MutationObserver

---
 src/resources/formats/html/giscus/giscus.ejs | 61 ++++++++++++--------
 1 file changed, 38 insertions(+), 23 deletions(-)

diff --git a/src/resources/formats/html/giscus/giscus.ejs b/src/resources/formats/html/giscus/giscus.ejs
index 16717a379d5..723fbeb6f7d 100644
--- a/src/resources/formats/html/giscus/giscus.ejs
+++ b/src/resources/formats/html/giscus/giscus.ejs
@@ -1,11 +1,7 @@
 <input type="hidden" id="giscus-base-theme" value="<%- giscus.baseTheme %>">
 <input type="hidden" id="giscus-alt-theme" value="<%- giscus.altTheme %>">
 <script>
-async function loadGiscusWhenReady() {
-  while (!document.body.classList.contains('quarto-light') && !document.body.classList.contains('quarto-dark')) {
-    await new Promise(resolve => setTimeout(resolve, 50));
-  }
-
+function loadGiscusWhenReady() {
   // Function to get the theme based on body class
   const getTheme = () => {
     const baseTheme = document.getElementById('giscus-base-theme').value;
@@ -14,25 +10,44 @@ async function loadGiscusWhenReady() {
   };
 
   // Create the Giscus script and add it to the desired location
-  const script = document.createElement("script");
-  script.src = "https://giscus.app/client.js";
-  script.async = true;
-  script.dataset.repo = "<%- giscus.repo %>";
-  script.dataset.repoId = "<%- giscus['repo-id'] %>";
-  script.dataset.category = "<%- giscus.category %>";
-  script.dataset.categoryId = "<%- giscus['category-id'] %>";
-  script.dataset.mapping = "<%- giscus.mapping %>";
-  script.dataset.reactionsEnabled = "<%- giscus['reactions-enabled'] ? 1 : 0 %>";
-  script.dataset.emitMetadata = "0";
-  script.dataset.inputPosition = "<%- giscus['input-position'] %>";
-  script.dataset.theme = getTheme();
-  script.dataset.lang = "<%- giscus.language %>";
-  script.crossOrigin = "anonymous";
+  const loadGiscus = () => {
+    const script = document.createElement("script");
+    script.src = "https://giscus.app/client.js";
+    script.async = true;
+    script.dataset.repo = "<%- giscus.repo %>";
+    script.dataset.repoId = "<%- giscus['repo-id'] %>";
+    script.dataset.category = "<%- giscus.category %>";
+    script.dataset.categoryId = "<%- giscus['category-id'] %>";
+    script.dataset.mapping = "<%- giscus.mapping %>";
+    script.dataset.reactionsEnabled = "<%- giscus['reactions-enabled'] ? 1 : 0 %>";
+    script.dataset.emitMetadata = "0";
+    script.dataset.inputPosition = "<%- giscus['input-position'] %>";
+    script.dataset.theme = getTheme();
+    script.dataset.lang = "<%- giscus.language %>";
+    script.crossOrigin = "anonymous";
 
-  // Append the script to the desired div instead of at the end of the body
-  document.getElementById("quarto-content").appendChild(script);
-}
+    // Append the script to the desired div instead of at the end of the body
+    document.getElementById("quarto-content").appendChild(script);
+  };
 
-// Call the async function to start the loop
+  // MutationObserver to detect when the 'quarto-light' or 'quarto-dark' class is added to the body
+  const observer = new MutationObserver((mutations) => {
+    for (const mutation of mutations) {
+      if (mutation.type === "attributes" && mutation.attributeName === "class") {
+        if (document.body.classList.contains('quarto-light') || document.body.classList.contains('quarto-dark')) {
+          loadGiscus();
+          observer.disconnect(); // Stop observing once Giscus is loaded
+          break;
+        }
+      }
+    }
+  });
+
+  // Start observing the body for class attribute changes
+  observer.observe(document.body, {
+    attributes: true,
+    attributeFilter: ["class"],
+  });
+}
 loadGiscusWhenReady();
 </script>