Giscus Javascript not loading iframe correctly

[andrewheiss]

Bug description

At some point recently, the Javascript code for loading Giscus seems to have stopped working correctly. The loadGiscusWhenReady() Javascript function doesn't load the remote iframe, but manually pasting in the contents of loadGiscusWhenReady into a browser's Javascript console and then running loadGiscus() does load the iframe.

Steps to reproduce

This is a tricky bug to create a reprex for, since it requires a full github repo with discussions enabled and Giscus enabled, but here's what I did to recreate the issue.

Steps 1-4 are all available in a little mini testing website at https://andrewheiss.quarto.pub/quarto-giscus-testing/ and in a GitHub repo at https://github.com/andrewheiss/quarto-giscus-testing

1. At the terminal, run quarto create project blog and create a new blog project with all the default options

2. Push new blog project to GitHub and enable Giscus on that repository

3. Add this to _quarto.yml (but with correct options for category and category-id)

   website:
     title: "quarto-giscus-testing"
     comments:
       giscus:
         repo: andrewheiss/quarto-giscus-testing
         category: General
         category-id: DIC_kwDOOa-qAc4CpLmu
         mapping: pathname

4. Render the site and publish it with quarto publish (I used Quarto Pub: https://andrewheiss.quarto.pub/quarto-giscus-testing/)

5. Visit a page like https://example.com/posts/post-with-code/ and inspect the page—or go to https://andrewheiss.quarto.pub/quarto-giscus-testing/posts/post-with-code/ for a live sample page. Giscus-related HTML will be included, but no Giscus iframe widget will appear.

6. In the Javascript console, try running loadGiscusWhenReady();. Nothing will happen.

7. In the Javascript console, paste and run all this—these are the contents of the loadGiscusWhenReady() Javascript function, but loaded without being inside a function:

 // 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 loadGiscus = () => {
    const script = document.createElement("script");
    script.src = "https://giscus.app/client.js";
    script.async = true;
    script.dataset.repo = "andrewheiss/quarto-giscus-testing";
    script.dataset.repoId = "R_kgDOOa-qAQ";
    script.dataset.category = "General";
    script.dataset.categoryId = "DIC_kwDOOa-qAc4CpLmu";
    script.dataset.mapping = "pathname";
    script.dataset.reactionsEnabled = "1";
    script.dataset.emitMetadata = "0";
    script.dataset.inputPosition = "top";
    script.dataset.theme = getTheme();
    script.dataset.lang = "en";
    script.crossOrigin = "anonymous";
    // Append the script to the desired div instead of at the end of the body
    document.getElementById("quarto-content").appendChild(script);
  };
  // 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"],
  });

8. In the Javascript console, run loadGiscus();. The commenting iframe will appear.

Actual behavior

Basically, the loadGiscusWhenReady() Javascript function doesn't seem to work anymore and doesn't do anything.

Giscus can be loaded manually by running all the internal function parts (i.e. const GetTheme = () ..., const loadGiscus = () ..., etc.) and then running loadGiscus() in the console.

Expected behavior

The Giscus widget should display

Your environment

This happens in Chrome, Firefox, and Safari on macOS and Windows and iOS Safari

Quarto check output

Quarto 1.7.23
[✓] Checking environment information...
      Quarto cache location: /Users/andrew/Library/Caches/quarto
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.6.3: OK
      Dart Sass version 1.85.1: OK
      Deno version 1.46.3: OK
      Typst version 0.13.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.7.23
      Path: /Applications/quarto/bin

[✓] Checking tools....................OK
      TinyTeX: (external install)
      Chromium: (not installed)

[✓] Checking LaTeX....................OK
      Using: TinyTex
      Path: /Users/andrew/Library/TinyTeX/bin/universal-darwin
      Version: 2024

[✓] Checking Chrome Headless....................OK
      Using: Chrome found on system
      Path: /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
      Source: MacOS known location

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK
      Version: 3.13.1
      Path: /opt/homebrew/opt/python@3.13/bin/python3.13
      Jupyter: 5.7.2
      Kernels: python3

[mcanouil]

I think it has to do with the work on the dark/light mode as the script tries to retrieve some of the elements.
Probably an order or execution issue.

Thanks for noticing this.

[mcanouil]

It seems the issue appeared in 1.7.17.

v1.7.16...v1.7.17

[cderv]

Putting related change regarding light / dark support for Giscus

• Update giscus.ejs to fix giscus color on load #11047

because this is related to it.

One of the change is that quarto-light or quarto-dark is added by default on the html now

quarto-cli/src/format/html/format-html-bootstrap.ts

Lines 1073 to 1078 in 53835de

	// start body with light or dark class for proper display when JS is disabled
	let initialLightDarkClass = "quarto-light";
	if (darkModeDefault(format.metadata)) {
	initialLightDarkClass = "quarto-dark";
	}
	doc.body.classList.add(initialLightDarkClass);

But loading Giscus is behind a Mutation Observer, and this could be a problem. 🤔

[cderv]

So I believe the problem is in fact this commit a496e0e

when the .ejs was split in two.

This part was applying always in all HTML as the conditional is not just darkMode

quarto-cli/src/resources/formats/html/templates/quarto-html.ejs

Lines 1 to 27 in 1abab5b

	<% if (darkMode !== undefined || tabby || anchors || copyCode || codeTools || tippy || hoverFootnotes || hoverCitations || linkExternalIcon || linkExternalNewwindow || hoverXrefs) { %>
	<script id = "quarto-html-after-body" type="application/javascript">
	window.document.addEventListener("DOMContentLoaded", function (event) {
	const toggleBodyColorMode = (bsSheetEl) => {
	const mode = bsSheetEl.getAttribute("data-mode");
	const bodyEl = window.document.querySelector("body");
	if (mode === "dark") {
	bodyEl.classList.add("quarto-dark");
	bodyEl.classList.remove("quarto-light");
	} else {
	bodyEl.classList.add("quarto-light");
	bodyEl.classList.remove("quarto-dark");
	}
	}
	const toggleBodyColorPrimary = () => {
	const bsSheetEl = window.document.querySelector("link#quarto-bootstrap");
	if (bsSheetEl) {
	toggleBodyColorMode(bsSheetEl);
	}
	}
	toggleBodyColorPrimary();

and this was triggering the MutationObserver because of the class addition / removal

Now this script is only added conditional to darkMode and called in a different situation
in quarto-html-before-body.ejs

So, MutationObserver is not enough here. The initialization should probably be based on the existing class.

[cscheid]

Ok, I think we need to fix that for 1.7.

[cscheid]

Draft PR incoming.

[cderv]

I am working on it, I am pushing PR now

[cderv]

So, MutationObserver is not enough here. The initialization should probably be based on the existing class.

It happens that #11047 is now unnecessary following change by @gordonwoodhull in

• no flashing when reloading in light or dark mode #12173