simple dynamic load of giscus

generate script tag based on user preference at page load
no need for any mutation observers, because class is already set

Author: gordonwoodhull

news/changelog-1.7.md

@@ -3,6 +3,7 @@
 ## In this release
 
 - ([#12625](https://github.com/quarto-dev/quarto-cli/pull/12625)): Fire resize event on window when light/dark toggle is clicked, to tell widgets to resize.
+- ([#12657](https://github.com/quarto-dev/quarto-cli/pull/12657)): Load Giscus in generated script tag, to avoid wrong-theming in Chrome.
 
 # v1.7 changes
 

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

@@ -1,37 +1,33 @@
-<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>
-<script type="application/javascript">
-  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(() => {
-                toggleGiscusIfUsed(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 %>">
+<input type="hidden" id="giscus-alt-theme" value="<%- giscus.altTheme %>">
+<script>
+  function loadGiscus() {
+    // Function to get the theme based on body class
+    const getTheme = () => {
+      let baseTheme = document.getElementById('giscus-base-theme').value;
+      let altTheme = document.getElementById('giscus-alt-theme').value;
+      if (authorPrefersDark) {
+          [baseTheme, altTheme] = [altTheme, baseTheme];
+      }
+      return document.body.classList.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";
+
+    // Append the script to the desired div instead of at the end of the body
+    document.getElementById("quarto-content").appendChild(script);
+  }
+  loadGiscus();
+</script>