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

#datascience > as a data scientist, I do the data science-y things on a regular basis

#meta > it's about this blog itself, or maybe about me, idk

#css > it's about CSS, and probably about the blog style

#wids2021 > Women in Data Science 2021: all about the conference and the datathon

Of course, there were other gifs as well. It was a) the era, and b) come on, I was like 9.

Anyway, I've been going back to my roots and playing with the CSS here, aka “stealing” code from elsewhere to make my site look half-decent haha.

I'm using the Narrow Road, Deep North theme from the Write.as theme gallery but am slowly making it my own. I've also taken some of the CSS from Tea Time – mainly the link hover highlighting.

But the code I'm happiest about “borrowing” is the code blocks! Write.as is in Markdown and supports both inline code and code blocks, and has syntax highlighting through highlight.js. I was struggling to customize the code blocks though, and came across this blog post on how to change the highlight.js theme in Write.as, conveniently enough.

Anyway, I did the thing (since the colours of Narrow Road, Deep North are based on the Nord colour theme, I of course used that one from the highlight.js themes). It somehow it wasn't still working – I couldn't get the language detection, and it wouldn't even do the plain text bit, so I decided to go, well, simpler. Changing the highlight.js theme didn't even change my inline code, so I had to get that anyway.

I ended up on this article, where I kinda just... took things and only vaguely understood how it works. But hey, it works and I don't think anything looks too wonky! And if I do find something weird, I'll be more able to fix it. Plus, now I have the fancy CSS for my inline code and my plain code blocks:

ooooh fancy, i'm a code block
look at me be all code-y

And then I played around a bit more and did, in fact, get the syntax highlighting to work. Apparently the Markdown code blocks won't auto-detect language, so I have to be specific in the HTML. So here's the CSS for my inline and plain code blocks to show off the syntax highlighting bit:

/* 
    oooh comments, look at me go
    also this is CSS for my inline and block code, formatted to work in write.as

*/

pre {
  color: #eceff4;
  background: #2e3440 !important;
  border-radius: .5rem !important;
}

p > code,
li > code,
dd > code,
td > code {
  color: #eceff4;
  background: #2e3440 !important;
  font-size: 0.9rem !important;
  padding: .2rem .3rem .2rem !important;
  border-radius: .2rem !important;
}

So there you have it. Mostly I wanted this up so if I do need to change my code blocks around, I can refer to this page and refresh as needed, haha.

#css