Commit 070e8d6f authored by Thomas Jensen's avatar Thomas Jensen

Feature/comments

parent d88a1ed2
......@@ -157,5 +157,5 @@ pre code {
background-color: #eee;
padding: 1em;
border-radius: 0.5em;
margin-top: 2em;
margin: 2em 0;
}
......@@ -132,11 +132,12 @@ I aim to keep it clean and uncluttered, and as fast as possible. I try to avoid
* [DuckDuckGo](https://duckduckgo.com/); search box
* [YouTube](https://www.youtube.com/); embedded videos
* [Github](https://github.com/); links to code repositories
* [JustComments](https://just-comments.com); comments
If you are interested in seeing what I have planned for, and currently ongoing on the website — it's all in the [issue board](https://gitlab.com/thomasjsn/uctrl-dev/boards) on GitLab.
### Running cost
So what does it cost to keep a website like this going?
So what does it cost **per month** to keep a website like this going?
Service | What | Cost
------- | ---- | ----
......@@ -145,9 +146,11 @@ Service | What | Cost
[Fathom](https://usefathom.com/) | Analytics | $0
[Hugo](https://gohugo.io/) | Site generator | $0
[Domeneshop](https://domainname.shop) | Domain name | $1.2
:moneybag: | **Grand total** | $1.2
[JustComments](https://just-comments.com) | Comments | $0.1 <sup>2</sup>
:moneybag: | **Grand total** | $1.3
1. Actually I have a bronze subscription, costing $4 pr month, that I use for private projects. For public projects, like this website — all features are available on the free plan.
1. I do have a bronze subscription, costing $4 pr month, that I use for private projects. For public projects, like this website — all features are available on the free plan.
2. The pricing is [pay-as-you-go](https://just-comments.com/pricing.html), $0.1 covers about 6500 pageviews. Way more than I have.
### Why uCtrl?
I first got the domain _uctrl.net_ back in 2009, _uctrl.org_ in 2017, and _uctrl.dev_ in 2019. The "u" represents both μ (micro) and you, "ctrl" is of course control. Both meanings appeal to me.
......
---
title: "Turning comments on"
description: "I've turned comments on these are the services I evaluated."
date: 2019-06-17
tags:
- Meta
---
## Why
I've been contemplating turning on comments for a while now. I do occasionally get emails from some readers, not often, but it happens. I really appreciate the feedback and reading about other peoples setups and solutions. Comments are a double-edged sword — it might make it easier for engaged readers to leave their feedback, ideas, and corrections. But it might also attract spam and low-quality comments.
After careful consideration; I decided to turn comments on. Should they turn out to no be useful, I can simply turn them back off.
## Which one
Seeing as this is a static website, "native comments" is not a thing. So the hunt was on for a commenting system or service. The most common, which Hugo actually has an internal template for, is Disqus. That was not going to happen — the amount of bloat, advertising, tracking, and general privacy issues that Disqus adds makes it a no-go for me.
So what then? I had a few requirements;
* I didn't want to self-host it.
* I'd like it to be open-source.
* It should be easy to export comments, to avoid vendor lock-in.
* There should be some spam filtering.
* It should be possible to leave anonymous comments.
* Lightweight, with no privacy issues.
* OAuth login is nice, as are email notifications.
I found [several](https://darekkay.com/blog/static-site-comments/) [sources](https://gohugo.io/content-management/comments/#comments-alternatives) [online](https://news.ycombinator.com/item?id=18308087) listing Disqus alternatives — these were the ones I ended up evaluating:
### Isso
{{< figure "screenshot_isso" Keep />}}
I know I said I didn't want to self-host, but I gave [Isso](https://posativ.org/isso/) a go anyway. It was easy to get it up and running — it's written in Python and uses an SQLite database. I didn't like how it looked, it seemed a bit outdated, and it was not as lightweight as I would have liked. So I moved on.
### TalkYard
{{< figure "screenshot_talkyard" Keep />}}
I initially got quite excited about [TalkYard](https://www.talkyard.io/blog-comments); it's open-source and available as a service. With a very generous, but a bit confusing, [pricing model](https://www.talkyard.io/plans-blog-comments) — pay what you want, at least €0.5, for up to 100 new comments, per month. With the first 100 comments being free! It did, however, feel a bit clunky, pulling in multiple external libraries and adding 140 KB of page weight. The blog comments are just a small part of a large community-like system; it felt a bit overkill for my use-case. On the positive side; the developer was quick to respond to my questions and fix a couple of issues that I found and reported.
### utterances
{{< figure "screenshot_utterances" Keep />}}
[utterances](https://utteranc.es/) is a bit different. It utilizes GitHub issues as comments, so each post gets created as an issue, and the conversations become comments. Clever! However, it means that a GitHub account is required for leaving comments, and it's subject to the GitHub API [rate limits](https://developer.github.com/v3/#rate-limiting). The markdown support and moderation tools are excellent, because; Github issues. However, I didn't want to integrate that tightly with Github, seeing as my website lives on GitLab.
### JustComments
{{< figure "screenshot_just-comments" Keep />}}
[JustComments](https://just-comments.com/) was a pleasant surprise, it's lightweight, only loading comments if the user scrolls down. And the [pricing model](https://just-comments.com/pricing.html) is based on the number of page views, making it very cost effecting for low traffic sites, like mine. The developer was also very responsive. However, it lacked a few things I wanted; like proper moderation tools and post previews. It does have moderation; it's just not very advanced. You can hide "bad" comments; either with a link in the email notification or by looking up the comment ID. Emailing with the developer — I found out that both these things are on the road-map. :+1:
### Staticman
{{< figure "staticman" Keep />}}
I got a bit overwhelmed by the number of moving parts required with [Staticman](https://staticman.net/). It's very different from the others, in that comments are posted to an API which stores them as data files — which are included when the site is built. Dynamic comments, as static content. It's not a turn-key solution, and I wasn't up for spending time implanting it. I might, however, re-evaluate it in the future. Keeping all comments stored as data files, together with the source, and without any 3rd party service is pretty neat!
### Commento
{{< figure "screenshot_commento" Keep />}}
Lastly, I tried [Commento](https://github.com/adtac/commento), and I liked it; it's open-source, privacy-focused, lightweight, has spam filtering and is available as a service. The [pricing model](https://commento.io/pricing) is "pay what you want," with a minimum of $3. It has even received a Mozilla Open Source Support award in recognition of its contributions in making the internet more privacy-friendly. Sweet! I also found [this excellent post](https://victorzhou.com/blog/replacing-disqus/) comparing Disqus and Commento; it's worth a read.
I really wanted to use Commento, but there were a few things that held me back. I tried to reach the developer on the support email, and Twitter — to no avail. I didn't get any response. Looking at the [status page](https://status.commento.io/), it seemed to me that the service was not that stable or performant. Last three weeks the API have been all yellow (partially degraded performance :-1:). I even experienced the certificate for the status page expiring. I posted an [issue](https://gitlab.com/commento/commento/issues/188), and the developer was quick to respond and corrected it.
{{< figure "screenshot_commento-status" Keep />}}
## Showdown
For me — the choice stood between JustComments and Commento, because:
JustComments
: Simplistic, sets out to solve one task — comments.
: Pay-as-you-go pricing model.
: Responsive and friendly developer.
: Active development, with new features on the road-map.
: Light-weight.
Commento
: Open-source.
: Can be self-hosted.
: Pay what you want pricing model.
: Spam filtering.
: Light-weight.
Let's make a comparison:
| Area | JustComments | Commento |
| ---- | ------------ | -------- |
| Open-source | Only the front-end | Yes! |
| Self-hosted | No | Yes! |
| Privacy-friendly | Yes! | Yes! |
| Weight | 22 KB | 11 KB |
| Pricing | Pay-as-you-go, $0.3 = 20k loads | What you want, minimum $3 |
| API | Yes | Coming soon |
| Data export | Only through API | Yes |
| Voting | No, but on road-map | Yes |
| Preview | No, but on road-map | Yes |
| Markdown | Yes | Yes |
| Editing | No — admin edit on road-map | Yes |
| Syntax highlighting | By including [highlight.js](https://just-comments.com/docs.html#code-highlighting) | Yes |
| Custom page ID | Yes | No |
| Moderation | Limited, improvement on road-map | Yes |
| Email notifications | Yes | Yes |
| Spam filtering | reCAPTCHA — Akismet on road-map | Akismet |
| OAuth | Twitter — Facebook on road-map | Twitter, Facebook, GitLab, Github |
| Developer responsiveness | Excellent, hours, even minutes | No response on email or Twitter |
| Service quality | Looks good, AWS serverless | Questionable, looks like Digital Ocean |
| Back-end stack | AWS serverless, DynamoDB | Go, PostgreSQL |
In many (most?) areas, Commento comes out on top. But it fails in two crucial areas — developer responsiveness and service quality. Having emailed quite a bit with [Alex](https://60devs.com/authors/oleksii.rudenko/), the creator of JustComments, I am confident that the product is on the right track.
## Implementation
To add JustComments to my Hugo website, I created a [partial](https://gitlab.com/thomasjsn/uctrl-dev/tree/master/layouts/partials), which I added to my [single.html](https://gitlab.com/thomasjsn/uctrl-dev/blob/master/layouts/_default/single.html) layout.
```
{{- $url := urls.Parse .Site.BaseURL -}}
{{- $host := index (split $url.Host ":") 0 -}}
{{- $path := default .RelPermalink .Params.commentUrl }}
<div class="just-comments"
data-pageid="{{ printf "%s%s" $host $path }}"
data-allowguests="true"
data-disablesharebutton="true"
data-enableemailnotifications="true"
data-apikey="my-api-key-from-dashboard">
</div>
<script async src="https://just-comments.com/w.js"></script>
```
I'm setting the `data-pageid` to `domain/slug/`, with the option of overriding the slug in the page frontmatter. That way I can keep the comments, even if a page gets moved or renamed.
## Why not self-host?
I'm a big fan of self-hosting and making pieces of code talk to other pieces of code. But I didn't want to self-host comments, for a couple of reasons;
* I want the website stack to be reasonably uncomplicated. Allowing myself time to write, instead of just tinkering.
* I don't know yet if comments will be useful, or if I will keep them turned on. No point spending time fiddling too much with it.
* A good commenting system required integrations with other services, such as spam filtering, OAuth and mail service.
## Afterword
So comments are on — I've also added an email link on all pages. To make it easy to give feedback or ask questions for those that don't feel like commenting.
Is it valuable to have comments turned on? I don't know yet. But I suspect I will find out. Hopefully, they will bring good reader interactions and conversations. If not — they can always be turned back off.
Want to give JustComments a try? Scroll down to see it in action :point_down:
{{< unsplash name="Jason Rosewell" url="https://unsplash.com/@jasonrosewell" >}}
......@@ -53,9 +53,12 @@
<img src="/img/dev-prisma-200.jpg">
<p>I'm <a href="/about/#me">Thomas</a>, from Norway — a cigar smoking boyfriend and father of three sons. In my mid-30s, facinated by computers with Linux, electronics and home automation things. I sometimes find time to write about it.</p>
</div>
<p style="margin: 0">Anything to add or ask? Send me an <a href="mailto:feedback@uctrl.dev?subject={{ .File.Path }}">e-mail</a>, I do respond. {{ ":smiley:" | emojify }}</p>
{{ end }}
<p style="margin: 0">Anything to add or ask? Leave a comment below or send me an <a href="mailto:feedback@uctrl.dev?subject={{ .File.Path }}">e-mail</a> — I do respond. {{ ":smiley:" | emojify }}</p>
</div>
{{ partial "just-comments.html" . }}
{{ else }}
</div>
{{ end }}
</article>
</main>
<nav class="end-nav side-padding">
......
{{- $url := urls.Parse .Site.BaseURL -}}
{{- $host := index (split $url.Host ":") 0 -}}
{{- $path := default .RelPermalink .Params.commentUrl }}
<div class="just-comments"
data-pageid="{{ printf "%s%s" $host $path }}"
data-allowguests="true"
data-disablesharebutton="true"
data-enableemailnotifications="true"
data-apikey="99aaa6d6-e8d0-414b-a733-9f3c68540d2e">
</div>
<script async src="https://just-comments.com/w.js"></script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment