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 usein_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 allRmd
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.
This part of your code:
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 stringposts
and negates it (!
). That means the condition istrue
if thelocation.pathname
(the path name of the current URL, e.g./HistDataVis/
forhttps://friendly.github.io/HistDataVis/
) does not containposts
anywhere in the string. None of the pages on your website hasposts
in thepathname
, so the script will end there.It should work if you change
/posts/
to/HistDataVis
or just remove theif
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.