We Have a Peanut Gallery Now

• Export
• HTML
• Org

Ever since moving everything to the HTML exporter I adapted from ox-slimhtml¹, I've been admittedly pretty enamored with the machinery involved in publishing this site. Sometimes I change something just so I can push it up to GitLab and watch the whole process kick off. It's a very special and nerdy variety of ambrosia for me.

However, from the start there has always been one thing missing. Something small but pernicious that sometimes would wake me up in the middle of the night. This thing, friends, was a comments section.

Finally, after years of trying to communicate with the void of the internet, there is the opportunity to hear the responses I want to elicit. This opportunity even comes without the shackles bound to and by Discus. This opportunity is Cusdis: Discus's open source and more laid-back cousin!

Most comment solutions have integrations for well-known site-generators like Hugo or WordPress, and Cusdis is no exception! Since my site is (not quite but almost) home-grown, I'm relying on a more technical² approach which involves copying some markup to the HTML pages that would benefit from comments. This is the code that Cusdis tells you to plant in your HTML pages to grow burgeoning comments sections:

<div id="cusdis_thread"
  data-host="https://cusdis.com"
  data-app-id="8b942081-7e2e-48b1-9637-77da88516f34"
  data-page-id="{{ PAGE_ID }}"
  data-page-url="{{ PAGE_URL }}"
  data-page-title="{{ PAGE_TITLE }}"
></div>
<script async defer src="https://cusdis.com/js/cusdis.es.js"></script>

The capitalized text in the curly braces (PAGE_ID, PAGE_URL, and PAGE_TITLE) indicates that these values must be replaced with data by a templating engine. The PAGE_ID has to be something unique, presumably so Cusdis knows which comments to grab. Regardless of how it's used, it just needs to be unique. I'm not sure what PAGE_URL and PAGE_TITLE are used for, but it was easy enough to get my site-generating machine to generate these values.

Anyway, the magic is in the script which goes to Cusdis, fetches the data, hydrates a template with it, and puts it in the div. So as long as the div is on the page by the time the script runs, everything should be hunky-dory. What I didn't realize was that Cusdis generates an entire HTML document and nests it in the div, which isn't ideal but at least I have comments.

Somewhere in the documentation, Cusdis recommends slapping this markup under a Comments header located in the footer of your document somewhere. The downside to this approach is that if the user has JavaScript disabled, you have a big Comments header with nothing below it, and that just doesn't feel good.

I take some degree of pride in having my website be just so (and abiding by HTML 5 guidelines to the best of my ability) which here means I wanted to wrap the code above along with that header in a section element. If the user has JavaScript disabled, there should be no sign that a comments section might even exist. After a couple of iterations, I came up with the following markup that I put at the end of my pages:

<script>
let comments = document.createElement('section');
comments.className = "container";
comments.innerHTML = '<h2>Comments</h2><div id="cusdis_thread" data-host="https://cusdis.com" data-app-id="8b942081-7e2e-48b1-9637-77da88516f34" data-page-id="{{{slug}}}" data-page-url="{{{url}}}" data-page-title="{{{title}}}"></div>';
let parent = document.getElementsByTagName("footer")[0];
parent.insertBefore(comments, parent.firstChild);
</script>
<script async defer src="https://cusdis.com/js/cusdis.es.js"></script>

This code creates that section I mentioned and fills it with the header and the div element required by the Cusdis script to generate comments. Since myscript element comes before the Cusdis one, and it doesn't have the async defer attributes, it will always finish inserting its HTML before the Cusdis script runs, which is important. More importantly though (in my biased opinion), if the user has JavaScript enabled, the comments section element and all of its contents never gets to the page.

That's about it for my TED talk. Cusdis is nice because it doesn't require a login, but to combat trolls I have to moderate the comments myself. This is also fine, since this site still gets no traffic. But the capability is there, and I am thrilled.