<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title>Comma on Melabit</title>
    <link>https://melabit.com/en/tags/comma/</link>
    <description>Recent content in Comma on Melabit</description>
    <generator>Hugo</generator>
    <language>en</language>
    <lastBuildDate>Wed, 05 Mar 2025 06:00:00 +0000</lastBuildDate>
    <atom:link href="https://melabit.com/en/tags/comma/index.xml" rel="self" type="application/rss+xml" />
    <item>
      <title>From melabit to melabit: managing comments with Jekyll</title>
      <link>https://melabit.com/en/2025/03/05/from-melabit-to-melabit-managing-comments-with-jekyll/</link>
      <pubDate>Wed, 05 Mar 2025 06:00:00 +0000</pubDate>
      <guid>https://melabit.com/en/2025/03/05/from-melabit-to-melabit-managing-comments-with-jekyll/</guid>
      <description>&lt;p&gt;As  noted in the &lt;a href=&#34;https://melabit.com/en/2025/03/01/from-melabit-to-melabit-developing-a-web-site-in-jekyll/&#34;&gt;last post&lt;/a&gt;, Jekyll does not have a built-in commenting system, but its themes often allow comments to be managed by connecting to third-party services such as &lt;a href=&#34;https://disqus.com/&#34;&gt;Disqus&lt;/a&gt; and similar platforms.&lt;/p&gt;&#xA;&lt;p&gt;The problem with these services is that they can stop working overnight (as happened last year with &lt;a href=&#34;https://web.archive.org/web/20240331055510/https://muut.com/&#34;&gt;Muut&lt;/a&gt;, which no longer even has a website), or they have opaque usage policies and user data collection practices.&lt;/p&gt;&#xA;&lt;p&gt;Another issue, which is far from negligible, is that most of these services require users to register before they can comment. Registration is useful for filtering inappropriate comments or spam, but it also acts as a barrier for casual readers who just want to share their thoughts.&lt;/p&gt;&#xA;&lt;p&gt;Then there is the problem of cost. Some comment management services are paid and not exactly cheap, take &lt;a href=&#34;https://talk.hyvor.com/&#34;&gt;Hyvor Talk&lt;/a&gt; as an example, which costs 12 euros per month. A price that is more than reasonable for a professional site or a small business that wants to interact with its users &amp;ndash; especially since these services often also handle newsletters and other promotional materials &amp;ndash; but that is completely out of scale for a toy handmade blog like this one.&lt;/p&gt;&#xA;&lt;h4 id=&#34;looking-for-the-ideal-commenting-system&#34;&gt;Looking for the ideal commenting system&lt;/h4&gt;&#xA;&lt;p&gt;My interest in comment-related issues began a year ago when, after the sudden shutdown of Muut, I observed the enormous work being done behind the scenes by &lt;a href=&#34;https://muloblog.netlify.app/&#34;&gt;Mimmo&lt;/a&gt;, MacMomo, and Paoloo to recover from Muut all the comments from &lt;a href=&#34;https://macintelligence.org/post/2024-04-01-tra-nuova-vita-e-pesce-d-aprile/&#34;&gt;Quickloox&lt;/a&gt; &amp;ndash; one of the must-read blogs for anyone interested in Apple, Macs, and related topics &amp;ndash; convert them to the format of the new commenting engine, and &lt;a href=&#34;https://macintelligence.org/post/2024-04-06-caratteri-difficili/&#34;&gt;reinsert them neatly into the blog&lt;/a&gt;.&lt;sup id=&#34;fnref:1&#34;&gt;&lt;a href=&#34;#fn:1&#34; class=&#34;footnote-ref&#34; role=&#34;doc-noteref&#34;&gt;1&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;&#xA;&lt;p&gt;A few months later, I began working on my own &lt;a href=&#34;https://melabit.com/en/2025/01/02/da-melabit-a-melabit-addio-wordpress-ciao-jekyll/&#34;&gt;transition from WordPress to a Jekyll&lt;/a&gt;, and the commenting system was one of the main problems to solve. With WordPress, this isn&amp;rsquo;t an issue, because comments are integrated and stored in the site&amp;rsquo;s database along with the text of the post. But with a static site, like the one generated by Jekyll, it is necessary to implement some mechanism to add comments, which by their very nature are dynamic objects.&lt;/p&gt;&#xA;&lt;p&gt;In hindsight, I could have followed &lt;a href=&#34;https://muloblog.netlify.app/post/2024-03-09-comma-commentare/&#34;&gt;Mimmo&amp;rsquo;s advice&lt;/a&gt; and chosen &lt;a href=&#34;https://github.com/Dieterbe/comma&#34;&gt;Comma&lt;/a&gt; from the beginning. But coming from WordPress, using a database seemed like the most natural approach.&lt;/p&gt;&#xA;&lt;p&gt;So I tried &lt;a href=&#34;https://cusdis.com/&#34;&gt;Cusdis&lt;/a&gt;, &lt;a href=&#34;https://commento.io/&#34;&gt;Commento&lt;/a&gt;, &lt;a href=&#34;https://github.com/souramoo/commentoplusplus&#34;&gt;Commento++&lt;/a&gt;, &lt;a href=&#34;https://remark42.com/&#34;&gt;Remark42&lt;/a&gt;, and &lt;a href=&#34;https://github.com/zoomment&#34;&gt;Zooment&lt;/a&gt;, all database-based commenting systems.&lt;sup id=&#34;fnref1:1&#34;&gt;&lt;a href=&#34;#fn:1&#34; class=&#34;footnote-ref&#34; role=&#34;doc-noteref&#34;&gt;1&lt;/a&gt;&lt;/sup&gt; I carefully followed the instructions step by step, I used Docker, I ran Linux virtual machines on the cloud, I tested services that are supposed to handle everything automatically, like &lt;a href=&#34;https://railway.app/&#34;&gt;Railway&lt;/a&gt; and &lt;a href=&#34;https://vercel.com/&#34;&gt;Vercel&lt;/a&gt;. Nothing worked. There wasn&amp;rsquo;t a single commenting system that worked like it should!!&lt;sup id=&#34;fnref:2&#34;&gt;&lt;a href=&#34;#fn:2&#34; class=&#34;footnote-ref&#34; role=&#34;doc-noteref&#34;&gt;2&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;&#xA;&lt;p&gt;I also ruled out all systems that rely on GitHub, such as &lt;a href=&#34;https://github.com/giscus/giscus&#34;&gt;Giscus&lt;/a&gt;, &lt;a href=&#34;https://staticman.net/&#34;&gt;Staticman&lt;/a&gt;, or &lt;a href=&#34;https://github.com/utterance/utterances&#34;&gt;utterances&lt;/a&gt;. These are perfect for developers who already have a GitHub account, but impractical for casual readers who would be forced to create yet another unnecessary account. That left only one option. &lt;a href=&#34;https://github.com/Dieterbe/comma&#34;&gt;Comma&lt;/a&gt;, of course.&lt;/p&gt;&#xA;&lt;h4 id=&#34;working-on-comma&#34;&gt;Working on Comma&lt;/h4&gt;&#xA;&lt;p&gt;And Comma it was. Comma is written in Go and is distributed only as source code. To compile it, we need a compiler for the &lt;a href=&#34;https://go.dev/&#34;&gt;Go language&lt;/a&gt;. On a Mac, the compiler can be installed by downloading the &lt;a href=&#34;https://go.dev/doc/install&#34;&gt;prepackaged package&lt;/a&gt; and following the instructions, or via the usual &lt;a href=&#34;https://brew.sh/&#34;&gt;Homebrew&lt;/a&gt; with&lt;/p&gt;&#xA;&lt;pre tabindex=&#34;0&#34;&gt;&lt;code&gt;$ brew install golang&#xA;&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;Similarly, on Linux, Go can be installed by downloading a &lt;a href=&#34;https://go.dev/doc/install&#34;&gt;compressed file&lt;/a&gt; and extracting it into the &lt;code&gt;usr/local&lt;/code&gt; directory, or using the package manager commands of our distribution,&lt;/p&gt;&#xA;&lt;pre tabindex=&#34;0&#34;&gt;&lt;code&gt;$ sudo apt install golang&#xA;$ sudo dnf install golang&#xA;$ sudo pacman -S go&#xA;&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;depending on whether we are using Debian/Ubuntu, Fedora/CentOS, Arch, or one of their countless derivatives.&lt;/p&gt;&#xA;&lt;p&gt;Once Go is installed, compiling Comma is a matter of seconds,&lt;/p&gt;&#xA;&lt;pre tabindex=&#34;0&#34;&gt;&lt;code&gt;$ git clone https://github.com/Dieterbe/comma.git&#xA;$ cd comma/src&#xA;$ go build&#xA;&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;where the last command checks that the program compiles correctly. If everything is fine, we can run&lt;/p&gt;&#xA;&lt;pre tabindex=&#34;0&#34;&gt;&lt;code&gt;$ go install .&#xA;&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;which compiles the source code and installs the &lt;code&gt;comma&lt;/code&gt; executable in &lt;code&gt;~/go/bin/&lt;/code&gt; (as usual, the &lt;code&gt;~&lt;/code&gt; represents the &lt;code&gt;Home&lt;/code&gt; directory of the account we are using).&lt;/p&gt;&#xA;&lt;p&gt;Before cloning the Comma repository, I made a &lt;a href=&#34;https://github.com/sabinomaggi/comma&#34;&gt;fork in my personal account&lt;/a&gt;, but only because I wanted to tweak a bit the code a bit.&lt;/p&gt;&#xA;&lt;p&gt;The first thing I did was to change the filename extension of the comments from &lt;code&gt;.cmt&lt;/code&gt; to &lt;code&gt;.xml&lt;/code&gt; (lines 67 and 105 of my &lt;code&gt;comment.go&lt;/code&gt; file). Comma comments are stored as &lt;a href=&#34;https://en.wikipedia.org/wiki/XML&#34;&gt;XML files&lt;/a&gt;, and there was no reason to use a non-standard extension. Also, this change makes it easier to open them with a text editor, which will automatically format them for better readability. A small convenience, but very useful during development. To further improve readability, I also added four spaces before each XML tag (lines 71-73 of &lt;code&gt;comment.go&lt;/code&gt;).&lt;/p&gt;&#xA;&lt;p&gt;Lastly, I removed the requirement to enter an email address when submitting a comment (lines 94-96 of &lt;code&gt;main.go&lt;/code&gt;). My goal was to have a site free of any form of user tracking, thus avoiding many &lt;a href=&#34;https://school-of-scrap.com/2018/come-sistemare-il-blog-per-gdpr-se-sei-solo-una-blogger-bloggerperlavoroconpassione/&#34;&gt;headaches related to GDPR compliance&lt;/a&gt;.&lt;sup id=&#34;fnref:3&#34;&gt;&lt;a href=&#34;#fn:3&#34; class=&#34;footnote-ref&#34; role=&#34;doc-noteref&#34;&gt;3&lt;/a&gt;&lt;/sup&gt; In theory, this could pose some security risks, but do we really think that someone with malicious intent would enter their real email address?&lt;/p&gt;&#xA;&lt;p&gt;For the frontend &amp;ndash; i.e., how the user sees his new comment as well as the list of previous comments &amp;ndash; I used most of the &lt;a href=&#34;https://github.com/Dieterbe/dieterblog/blob/master/layouts/partials/comments.html&#34;&gt;original code&lt;/a&gt; from the author of Comma, adapting it to work with Jekyll. To that I added Markdown support and filtering of potentially malicious code from comments. For these two features, I &lt;a href=&#34;https://gitlab.com/emeralit/quickloox-contest/-/blob/main/blog-v4/layouts/partials/comments.html&#34;&gt;took a lot of inspiration&lt;/a&gt; from the code that by Mimmo, MacMomo, and Paoloo wrote for Quickloox.&lt;/p&gt;&#xA;&lt;p&gt;As for the icons associated with each commenter, I chose to generate them with &lt;a href=&#34;https://jdenticon.com/&#34;&gt;Jdenticon&lt;/a&gt;, probably because its symmetrical geometric patterns fit my personality better.&lt;/p&gt;&#xA;&lt;p&gt;The final appearance of the comments seems quite pleasant and well integrated with the rest of the site, and the localization works well, even in small details like the more prominent thin line under &amp;ldquo;Add a comment,&amp;rdquo; that changes depending on whether the text is in Italian or in English.&lt;/p&gt;&#xA;&lt;p&gt;&lt;img src=&#34;https://melabit.com/img/2025-03-05-da-melabit-a-melabit-gestire-i-commenti-con-jekyll/form-di-commento.png&#34; alt=&#34;&#34;&gt;&lt;br&gt;&#xA;&lt;img src=&#34;https://melabit.com/img/2025-03-05-da-melabit-a-melabit-gestire-i-commenti-con-jekyll/comment-form.png&#34; alt=&#34;&#34;&gt;&lt;/p&gt;&#xA;&lt;p&gt;All the frontend code is in &lt;code&gt;_includes/custom/comma-comments.html&lt;/code&gt;. While I was at it, I also added a small JavaScript function to the post page (&lt;code&gt;_layouts/post.html&lt;/code&gt;) that allows users to jump back to the top of the post with a single click. I originally needed it during development, but I believe it could be useful for readers as well, so I left it in the final code.&lt;/p&gt;&#xA;&lt;h4 id=&#34;putting-all-together&#34;&gt;Putting all together&lt;/h4&gt;&#xA;&lt;p&gt;Once the comment system and the code to display them on the site are ready, we need to make everything work together. First, we need to create a folder to store all the comments,&lt;/p&gt;&#xA;&lt;pre tabindex=&#34;0&#34;&gt;&lt;code&gt;$ cd&#xA;$ mkdir ~/comments&#xA;&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;and start Comma manually,&lt;/p&gt;&#xA;&lt;pre tabindex=&#34;0&#34;&gt;&lt;code&gt;$ ~/go/bin/comma ~/comments localhost:5888&#xA;$ &#xA;&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;telling it it to listen for new comments on port &lt;code&gt;5888&lt;/code&gt; of the local computer &lt;code&gt;localhost&lt;/code&gt; and save them in the &lt;code&gt;~/comments&lt;/code&gt; folder. The last step is to add a line to &lt;code&gt;_config.yml&lt;/code&gt; to connect Jekyll to the comment server&lt;/p&gt;&#xA;&lt;pre tabindex=&#34;0&#34;&gt;&lt;code&gt;#--- Comma comments ---&#xA;commentserver: http://localhost:5888&#xA;&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;and everything should work on the first try.&lt;/p&gt;&#xA;&lt;p&gt;If instead of a physical computer we are using a cloud virtual machine, we will need to replace &lt;code&gt;localhost&lt;/code&gt; with the machine&amp;rsquo;s &lt;code&gt;reverse DNS name&lt;/code&gt; (see the &lt;a href=&#34;https://melabit.com/en/2025/03/01/from-melabit-to-melabit-developing-a-web-site-in-jekyll/&#34;&gt;previous post&lt;/a&gt;). However, the exact steps depend on the service we are using, so I can&amp;rsquo;t be more specific.&lt;/p&gt;&#xA;&lt;p&gt;On a real site, things get a bit more complex, for example, because one needs to use the secure &lt;code&gt;https:&lt;/code&gt; protocol instead of simple &lt;code&gt;http:&lt;/code&gt;, which requires proper web server configuration. But again, the details depend on the web server, the configuration of installed services, and so on, making it impossible to explain everything without writing a whole manual.&lt;/p&gt;&#xA;&lt;p&gt;However, I can say for sure that a real website requires Comma to be started automatically, just like the web server that manages the site.&lt;/p&gt;&#xA;&lt;p&gt;Assuming that the site is running on a Linux server (in the next post, I will explain why using a Mac as a web server doesn&amp;rsquo;t make much sense) and that Comma was installed by the user &lt;code&gt;webuser&lt;/code&gt;, in order to start Comma automatically on every system reboot (as well as when the program stops unexpectedly), we need to run&lt;/p&gt;&#xA;&lt;pre tabindex=&#34;0&#34;&gt;&lt;code&gt;$ cd /etc/systemd/system&#xA;$ sudo touch comma.service&#xA;&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;which creates an empty configuration file called &lt;code&gt;comma.service&lt;/code&gt;. We need to add the following lines to this file,&lt;/p&gt;&#xA;&lt;pre tabindex=&#34;0&#34;&gt;&lt;code&gt;[Unit]&#xA;Description=comma backend server&#xA;After=network-online.target&#xA;Wants=network-online.target&#xA;&#xA;[Service]&#xA;ExecStart=/home/webuser/go/bin/comma /home/webuser/comments :5888&#xA;Restart=always&#xA;RestartSec=1&#xA;User=webuser&#xA;Group=webuser&#xA;&#xA;[Install]&#xA;WantedBy=graphical.target&#xA;&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;making sure to replace &lt;code&gt;webuser&lt;/code&gt; with the actual username of the user who installed Comma. Running,&lt;/p&gt;&#xA;&lt;pre tabindex=&#34;0&#34;&gt;&lt;code&gt;$ sudo systemctl enable comma&#xA;&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;activates the automatic startup mechanism, allowing us to almost forget about Comma&amp;rsquo;s existence. To manually interact with the service, we can use the following commands,&lt;/p&gt;&#xA;&lt;pre tabindex=&#34;0&#34;&gt;&lt;code&gt;$ sudo systemctl status comma&#xA;$ sudo systemctl stop comma&#xA;$ sudo systemctl start comma&#xA;&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;which are useful for checking the status of the service or manually stopping and restarting it. These commands are particularly useful during debugging, but can also be helpful in production, so it&amp;rsquo;s good to know they exist.&lt;/p&gt;&#xA;&lt;h4 id=&#34;conclusions&#34;&gt;Conclusions&lt;/h4&gt;&#xA;&lt;p&gt;I had originally planned to end this long journey through the technical description of the new site here. However, while writing this post, I realized that a few words about hosting might be useful. And that will be the subject of the &lt;a href=&#34;https://melabit.com/en/2025/03/18/from-melabit-to-melabit-hosting-jekyll/&#34;&gt;next post&lt;/a&gt;.&lt;/p&gt;&#xA;&lt;div class=&#34;footnotes&#34; role=&#34;doc-endnotes&#34;&gt;&#xA;&lt;hr&gt;&#xA;&lt;ol&gt;&#xA;&lt;li id=&#34;fn:1&#34;&gt;&#xA;&lt;p&gt;And not even a &lt;em&gt;small&lt;/em&gt; database like &lt;a href=&#34;https://www.sqlite.org/&#34;&gt;SQLite&lt;/a&gt;! All these comment systems use heavyweights like &lt;a href=&#34;https://mariadb.org/&#34;&gt;MariaDB&lt;/a&gt; or &lt;a href=&#34;https://www.postgresql.org/&#34;&gt;PosgreSQL&lt;/a&gt;.&amp;#160;&lt;a href=&#34;#fnref:1&#34; class=&#34;footnote-backref&#34; role=&#34;doc-backlink&#34;&gt;&amp;#x21a9;&amp;#xfe0e;&lt;/a&gt;&amp;#160;&lt;a href=&#34;#fnref1:1&#34; class=&#34;footnote-backref&#34; role=&#34;doc-backlink&#34;&gt;&amp;#x21a9;&amp;#xfe0e;&lt;/a&gt;&lt;/p&gt;&#xA;&lt;/li&gt;&#xA;&lt;li id=&#34;fn:2&#34;&gt;&#xA;&lt;p&gt;If I were mean, I might think the instructions were wrong on purpose to push me to use their paid cloud solutions. But I am a good guy.&amp;#160;&lt;a href=&#34;#fnref:2&#34; class=&#34;footnote-backref&#34; role=&#34;doc-backlink&#34;&gt;&amp;#x21a9;&amp;#xfe0e;&lt;/a&gt;&lt;/p&gt;&#xA;&lt;/li&gt;&#xA;&lt;li id=&#34;fn:3&#34;&gt;&#xA;&lt;p&gt;I have nothing against GDPR. In fact, I think it is a very useful regulation, at least in theory. In practice, however, it does little to &lt;a href=&#34;https://www.laleggepertutti.it/207857_gdpr-il-paradosso-della-nuova-legge-sulla-privacy&#34;&gt;truly protect user privacy&lt;/a&gt; and ultimately becomes a not-so-useful bureaucratic burden.&amp;#160;&lt;a href=&#34;#fnref:3&#34; class=&#34;footnote-backref&#34; role=&#34;doc-backlink&#34;&gt;&amp;#x21a9;&amp;#xfe0e;&lt;/a&gt;&lt;/p&gt;&#xA;&lt;/li&gt;&#xA;&lt;/ol&gt;&#xA;&lt;/div&gt;&#xA;</description>
    </item>
  </channel>
</rss>
