use mutation observer to wait for iframe.giscus-frame

because safari will run before giscus.js has created everything

Author: gordonwoodhull

src/resources/formats/html/giscus/giscus.ejs

@@ -14,14 +14,24 @@
         async>
 </script>
 <script type="application/javascript">
-  window.document.addEventListener("DOMContentLoaded", function (event) {
-    var giscusIframe = window.document.querySelector('iframe.giscus-frame');
-    giscusIframe.addEventListener("load", function() {
-      window.setTimeout(() => {
-        window.toggleGiscusIfUsed(window.hasAlternateSentinel(), authorPrefersDark);
-      }, 100);
+  const giscusIframeObserver = new MutationObserver(function (mutations) {
+    mutations.forEach(function (mutation) {
+      mutation.addedNodes.forEach(function (addedNode) {
+        if (addedNode.matches && addedNode.matches('div.giscus')) {
+          const giscusIframe = addedNode.querySelector('iframe.giscus-frame');
+          if(giscusIframe) {
+            giscusIframe.addEventListener("load", function() {
+              window.setTimeout(() => {
+                window.toggleGiscusIfUsed(window.hasAlternateSentinel(), authorPrefersDark);
+              }, 100);
+            });
+            giscusIframeObserver.disconnect();
+          }
+        }
+      });
     });
   });
+  giscusIframeObserver.observe(document.body, { childList: true, subtree: true });
 </script>
 <input type="hidden" id="giscus-base-theme" value="<%- giscus.baseTheme %>">
 <input type="hidden" id="giscus-alt-theme" value="<%- giscus.altTheme %>">