You may have noticed, is a solitary writing corner. A place to dump ideas and see them form. I intend to continue using it as such, but close friends wish to interact with my ideas. It appears I have no reason to hide from them and force them to Facebook if they do not wish to do so. As of today, this blog has comments. Yey.
There's a slight philosophical debate between my ideas, for I wish to keep the writing moving towards a consistent direction. Towards exploration. Towards insight. Hopefully, towards some form of sense-making. I firmly believe readers can contribute in that direction. Yet I would like your default experience here to be that of reading a sort of story. To relax and enjoy the ride, not to be compelled to fight for one idea or another. Therefore, comments will be hidden by default behind a subtle button at the end of these posts.
I'm still working on the design... things are not final... and especially login is something I have to tweak eventually. Most notably, if you wish your name to be displayed, and not run your ideas under an "Anonymous" ticker, you will need to create an account. I wish to edit this component so I can eventually let you choose a name without an account, but that will take some time. Do note that nothing is shared with any external third parties. All data is stored within my control and no corporation is eating up analytics.
How did I do it?
This ain't the most glamorous of technical topics to cover, but we haven't gone technical on this website yet, and we were bound to eventually.
First, choosing a comments system. Most go for disqus, which is free and great and all, but it is a rather big. It also milks analytics data for ads. I honestly want something small, simple, with no dependencies on the external world. Found a few overkill options, but really, the only self hosted comment system which looked decent, small, and worth investigating was Commento.
In order to self host this little guy, I had to build it from source (allegedly binaries exist, but I was unable to download them). As I've learned, I will eventually have to modify the source to get this to look good.
The documentation is decent (except I couldn't run the default
go distribution for the Ubuntu instance I used to build this, and had to compile the latest stable build of the language as well). I set up a postgres server, created a linux user to access that DB, gave commento the right credentials and he was up and running. Ow, I also had to set up a subdomain in nginx for it.
The commento binary I had just built is properly sent to
systemd service is created to ensure the feature stays up, all content it needs for the control panels and settings screens is built alongside the binary, so let's move that to a folder in
/var/www. We're good to go! We can connect to the comment service! Embedding should be easy, right? Just drop the 2 lines in the template for these articles.
Well. Yeah, but it doesn't meld well with the site, so let's find a way to work remotely while we don't break the site. Fortunately, the commento dashboard lets you set up multiple domains in the control panel. Add one for
localhost:8080 (or whatever port I want to use locally). Magically, that works. Woohoo, I can test comments without affecting the website, and none of the comments I write to test with will be visible to the world once I deploy. Perfect.
Apparently, the documentation mentions a custom
data-css-override attribute I can use to specify my own CSS, but how do I even get a basis to start from. I know I will be using the browser developer tools to inspect every button in this plugin to change colors and positions... but there has to be something better, some where I can use the same variables I use in the theme.
Fortunately, commento's frontend works the same way npm builds the blog's theme. I'm not a web guy, I don't know all the JS magic, and I do not yet understand all of the specific ways the template system works. Yet somehow, if I copy all the
.sass files from commento's source, add them to my theme, generate another, copy the way the main
.css file of the theme is bundled via webpack something something... and just reference it in the post template the same way the main
.css file is referenced. It just works. Huh... Ok. Now to change colors!
Almost everything runs smoothly, searching through the project replacing things one at a time. Making sure it looks decent within both the dark and light theme of the site. Unfortunately, some thing apparently need changing in commento itself... and I have to add ugly workarounds until then. This tool is built to create a full discussion board with upvotes and featured posts, and user scores. I do not want to gamify anything on this site. I will do the quick and ugly hide until then, and clean it properly next time. I'l also have to see what I'll do with certain colors which are hardcoded in the
js frontend code of the plugin and are very nasty to override via
css. I will investigate those eventually.
To be fair, this entire project was mostly copy-paste. And sometimes programming is like that. Figure out every single element in a UI and change the color and position to something I like (or was in the theme). And for this kind of configuration work, I think that is ok. I'm just glad now that if I change a variable in the theme it will be updated in the comments as well. There's still a lot to optimize, and clean, but it's at a point where they work... so, here you go!