Fix Giscus load after navigation (ultralytics#17042)

Signed-off-by: UltralyticsAssistant <[email protected]> Co-authored-by: UltralyticsAssistant <[email protected]>
triple-Mu · Oct 20, 2024 · 0535db9 · 0535db9
1 parent 2c8f31c
commit 0535db9
Showing 1 changed file with 53 additions and 36 deletions.
diff --git a/docs/overrides/javascript/giscus.js b/docs/overrides/javascript/giscus.js
@@ -1,5 +1,8 @@
 // Giscus functionality
 function loadGiscus() {
+  const giscusContainer = document.getElementById("giscus-container");
+  if (!giscusContainer || giscusContainer.querySelector("script")) return;
+
   const script = document.createElement("script");
   script.src = "https://giscus.app/client.js";
   script.setAttribute("data-repo", "ultralytics/ultralytics");
@@ -17,47 +20,61 @@ function loadGiscus() {
   script.setAttribute("crossorigin", "anonymous");
   script.setAttribute("async", "");
 
+  giscusContainer.appendChild(script);
+
+  // Synchronize Giscus theme with palette
+  var palette = __md_get("__palette");
+  if (palette && typeof palette.color === "object") {
+    var theme = palette.color.scheme === "slate" ? "dark" : "light";
+    script.setAttribute("data-theme", theme);
+  }
+
+  // Register event handlers for theme changes
+  var ref = document.querySelector("[data-md-component=palette]");
+  if (ref) {
+    ref.addEventListener("change", function () {
+      var palette = __md_get("__palette");
+      if (palette && typeof palette.color === "object") {
+        var theme = palette.color.scheme === "slate" ? "dark" : "light";
+
+        // Instruct Giscus to change theme
+        var frame = document.querySelector(".giscus-frame");
+        if (frame) {
+          frame.contentWindow.postMessage(
+            { giscus: { setConfig: { theme } } },
+            "https://giscus.app",
+          );
+        }
+      }
+    });
+  }
+}
+
+// Use Intersection Observer to load Giscus when the container is visible
+function setupGiscusLoader() {
   const giscusContainer = document.getElementById("giscus-container");
+
   if (giscusContainer) {
-    giscusContainer.appendChild(script);
-
-    // Synchronize Giscus theme with palette
-    var palette = __md_get("__palette");
-    if (palette && typeof palette.color === "object") {
-      var theme = palette.color.scheme === "slate" ? "dark" : "light";
-      script.setAttribute("data-theme", theme);
-    }
-
-    // Register event handlers for theme changes
-    var ref = document.querySelector("[data-md-component=palette]");
-    if (ref) {
-      ref.addEventListener("change", function () {
-        var palette = __md_get("__palette");
-        if (palette && typeof palette.color === "object") {
-          var theme = palette.color.scheme === "slate" ? "dark" : "light";
-
-          // Instruct Giscus to change theme
-          var frame = document.querySelector(".giscus-frame");
-          if (frame) {
-            frame.contentWindow.postMessage(
-              { giscus: { setConfig: { theme } } },
-              "https://giscus.app",
-            );
-          }
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          loadGiscus();
+          observer.unobserve(entry.target);
         }
       });
-    }
+    }, { threshold: 0.1 }); // Trigger when 10% of the element is visible
+
+    observer.observe(giscusContainer);
   }
 }
 
-// MkDocs specific: Load Giscus when the page content is fully loaded
-document.addEventListener("DOMContentLoaded", function () {
-  var observer = new MutationObserver(function (mutations) {
-    if (document.getElementById("giscus-container")) {
-      loadGiscus();
-      observer.disconnect();
-    }
+// Hook into MkDocs' navigation system
+if (typeof document$ !== "undefined") {
+  document$.subscribe(() => {
+    // This function is called on every page load/change
+    setupGiscusLoader();
   });
-
-  observer.observe(document.body, { childList: true, subtree: true });
-});
+} else {
+  console.warn("MkDocs document$ not found. Falling back to DOMContentLoaded.");
+  document.addEventListener("DOMContentLoaded", setupGiscusLoader);
+}