switch to MutationObserver

quarto-dev · Oct 18, 2024 · 894526c · 894526c
1 parent a51dd65
commit 894526c
Showing 1 changed file with 38 additions and 23 deletions.
diff --git 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>