Iman Codes

Might be a little silly to have a blog post about implementing comments on WriteAs when this blog itself doesn’t have comments implemented, but I thought I’d put it up here anyway. I have no idea how Javascript works so I only managed to get comments up on my personal blog thanks to various resources, specifically by Dino.

But, it's code and should probably go up on the code blog!

I wanted a lightweight, privacy-focused commenting system and didn't want to wait for Remark.as to be open for non-paying Write.as users. Also, I didn't want to pay through the nose for a system that will probably get like, 2 comments total over the lifetime of my blog. Plus I didn't want to host it myself, because it'd probably be more of a hassle than it's worth!

I tried out a couple options that were recommended on the Write.as discussion forums but in the end, I went with Talkyard.

Getting the Javascript up and running was way easier when I could refer to Dino's implementation of Hyvor Talk, but it did take some finagling, since I don't really know what I'm doing.

A lot of the implementation methods for Write.as comments involved placing a code snippet at the bottom of each post, often with the Write.as signature function to make things easier – but that would also put comments onto pinned posts, which is sometimes not what you're going for. But Dino's code for Hyvor Talk was pretty elegant – it would automatically insert the code at the bottom of each post, eliminating the need to manually copy and paste it each time or use the signature function. He also had a way to exclude your pinned posts – that part would be manual, but one has way fewer pinned posts than regular blog posts!

Anyway, something that I managed to do specifically for Talkyard is take the post slug and use it as the Talkyard ID. This means that as long as I don't change my post slug, I can automatically port my comments if I change the post title or domain name! Which is super convenient since I'll probably move off the writeas.com domain at some point for the personal blog – I just haven't committed yet.

I think the script is relatively readable so I've just copied and pasted it below:

var currentURL = window.location.href;
var isAboutPage = /\/about$/i.test(currentURL);
var isArchivePage = /\/archive$/i.test(currentURL);

var element = document.querySelector('meta[property="og:url"]');
var content = element && element.getAttribute("content");
var postSlug = content.split('/').pop();

var talkyardServerUrl = 'server URL here';

var talkyardDiv = '<br><hr><br><div class="talkyard-comments" data-discussion-id="talkyardID"></div>'

talkyardDiv = talkyardDiv.replace("talkyardID", postSlug);


if (document.getElementById("post-body") && !isArchivePage && !isAboutPage) {
    document.getElementsByTagName("article")[0].insertAdjacentHTML('beforeend', talkyardDiv );
}

// src: https://c1.ty-cdn.net/-/talkyard-comments.min.js

Looking at it now, I realize I haven't excluded my (empty) tags page from here, so maybe I'll do that... eventually... As an aside, I do like Write.as but there is a lot of manual work for some stuff. Its primary focus is writing and I appreciate it a lot, because it minimizes all the distractions that come from other blogging platforms! But that means it doesn't have a lot of stuff that comes out-of-box from other platforms too (see: this whole post about putting comments up lol).

But moving on, I also customized the CSS for Talkyard to match my personal blog. That's actually why I haven't implemented it on this code blog, even though Talkyard allows you to put it on as many sites as you'd like – the theming would clash completely! My personal blog is very bright and pink, while this one is cool blues. The default theme would've actually been acceptable on the code blog, but as of now, without learning a whole lot more about Javascript and CSS, I don't think I'd be able to have two separate themes.

Talkyard says, on its CSS and Javascript page customization page:

We'll give you a simpler way to choose colors, later.

so we'll see if that comes to fruition! My theming was a complete hack job, so I'm looking forward to... not having it be a complete hack job, lol. And that's why I won't be sharing the CSS here.

When I tested things out, it seemed to work really nicely. There’s some moderation features, which will be nice if I ever need that (hopefully not!).

Anyway, hopefully this post will help me in the future, or if I’m really lucky, someone else trying to set up Talkyard on their own Write.as blog, haha.

#javascript #css