Can someone please help with setting up quarto/giscus?

[pydatk]

Description

Hi, I am in the process of setting up a Quarto site at pydatk.com.

I really like Quarto so far, very easy to get a website running and intuitive setup. Took about two hours from empty repo to publishing on Cloudflare pages with a custom domain.

I am having trouble getting giscus comments to work with my site, having followed the instructions here.

Can anyone please tell me what I'm doing wrong?

In _quarto.yml in the website root I have:

website:
  comments:
      giscus:
        repo: "pydatk/pydatkweb"
        repo-id: "R_kgDOOz5o9w"
        category: "website comments"
        category-id: "DIC_kwDOOz5o984Cq3a-"
        mapping: "pathname"
        reactions-enabled: false
        input-position: "bottom"
        theme: "light"
        language: "en"
        loading: "lazy"

The discussion repo is here: https://github.com/pydatk/pydatkweb/discussions

I created a discussion for the site's only post so far with the 'pathname' as the title: posts/hello_world

On the post itself, the script below appears in the page source, but nothing shows up on the page.

<input type="hidden" id="giscus-base-theme" value="light">
<input type="hidden" id="giscus-alt-theme" value="light">
<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 = "pydatk/pydatkweb";
    script.dataset.repoId = "R_kgDOOz5o9w";
    script.dataset.category = "website comments";
    script.dataset.categoryId = "DIC_kwDOOz5o984Cq3a-";
    script.dataset.mapping = "pathname";
    script.dataset.reactionsEnabled = "0";
    script.dataset.emitMetadata = "0";
    script.dataset.inputPosition = "bottom";
    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);
  }
  loadGiscus();
</script>

[mcanouil]

Could you try using the latest version of Quarto CLI?

Also make sure your Giscus settings are correct. You should start with a simple setup, then adding customisation.

[pydatk]

Thanks, I followed your suggestion and added the options one-by-one. The following works, in pydatk/posts/_metadata.yml so that is applies to posts only (not pages).

comments:
  giscus:
    repo: "pydatk/pydatkweb"
    repo-id: "R_kgDOOz5o9w"
    category: "website comments"
    category-id: "DIC_kwDOOz5o984Cq3a-"
    mapping: "url"
    reactions-enabled: false
    input-position: "bottom"
    language: "en"