GitHub: How to get `utteranc.es` to work for website discussion

Question

My website https://friendly.github.io/HistDataVis/ wants to use the seemingly light weight and useful discussion feature offered by the https://github.com/utterance app.

I believe I have installed it correctly in my repo, https://github.com/friendly/HistDataVis, but it does not appear on the site when built.

I'm stumped on how to determine what the problem is, or how to correct it. Can anyone help?

For reference, here is my setup:

• The website is built in R Studio, using distill in rmarkdown.

• I created utterances.html with the standard JS code recommended.

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        if (!/posts/.test(location.pathname)) {
          return;
        }
        
        var script = document.createElement("script");
        script.src = "https://utteranc.es/client.js";
        script.setAttribute("repo", "friendly/HistDataVis");
        script.setAttribute("issue-term", "og:title");
        script.setAttribute("crossorigin", "anonymous");
        script.setAttribute("label", "comments ??");
        
        /* wait for article to load, append script to article element */
          var observer = new MutationObserver(function (mutations, observer) {
            var article = document.querySelector("d-article");
            if (article) {
              observer.disconnect();
              /* HACK: article scroll */
                article.setAttribute("style", "overflow-y: hidden");
              article.appendChild(script);
            }
          });
        
        observer.observe(document.body, { childList: true });
      });
    </script>

• In one Rmd file, I use in_header to insert this into the generated HTML file:

    ---
    title: "Discussion"
    date: "`r Sys.Date()`"
    output: 
      distill::distill_article:
        toc: true
        includes:
          in_header: utterances.html
    ---

• Also used this in my _site.yml file to apply to all Rmd files on the site.

• On my GitHub account, I installed utterances under GitHub apps, and gave it repository access to the repo for this site.

Edit2 Following the solution suggested by @laymonage, I fixed the script. I now get the Comments section on my web page, but get an error, "utterances not installed" when I try to use it. Yet, utterances is installed, as I just checked.

Answer 1

This part of your code:

if (!/posts/.test(location.pathname)) {
  return;
}

Prevents the rest of the script to load because it's always true.

The condition checks whether the value of location.pathname passes the regular expression test string posts and negates it (!). That means the condition is true if the location.pathname (the path name of the current URL, e.g. /HistDataVis/ for https://friendly.github.io/HistDataVis/) does not contain posts anywhere in the string. None of the pages on your website has posts in the pathname, so the script will end there.

It should work if you change /posts/ to /HistDataVis or just remove the if block altogether.

---

Alternatively, you can also try giscus, a similar project that uses GitHub Discussions instead of Issues. Someone already made a guide on how to use it with Distill. Disclaimer: I'm the developer of giscus.