I added commenting with Commento

Posted on September 25, 2019
Tags: hakyll, software

I added commenting to my blog with Commento. Commento is a Javascript-based commenting system which can be easily added to any website. Commento has the following features:

I added support for Commento to my Hakyll-based site by creating a new file templates/commento.html with the following contents:


<div id="commento"></div>
<script defer src="https://cdn.commento.io/js/commento.js"></script>

and then I updated my site.hs so that posts are processed as follows:

    match "posts/*" $ do
        route $ setExtension "html"
        compile $ pandocCompiler
            >>= loadAndApplyTemplate "templates/post.html"    (postCtxWithTags tags)
            >>= linkImages
            >>= saveSnapshot "content"
            >>= loadAndApplyTemplate "templates/commento.html" (postCtxWithTags tags)
            >>= loadAndApplyTemplate "templates/default.html" (postCtxWithTags tags)
            >>= relativizeUrls
            >>= fixForLynx
            >>= fixBrForLynx

I created commento.html as a new template, because adding the snippet to post.html would have made comments show up in the Atom feed, and adding the snippet to default.html would have added comments to every page, including the home page, rather than just posts.

I also added support for comment counts in the places where posts are listed. I added:

<script src="https://cdn.commento.io/js/count.js"></script>

to archive.html and index.html. Then I added:

span.commentcount {
    font-size: 12px;

to default.css. Finally, I changed post-item.html to be:

    <a href="$url$">$title$</a> - $date$ <span class="commentcount">(<a href="$url$#commento"></a>)</span>

For some reason, tag.html doesn’t use post-item.html, so I had to update tag.html, as well:

<script src="https://cdn.commento.io/js/count.js"></script>
            <a href="$url$">$title$</a> - $date$ <span class="commentcount">(<a href="$url$#commento"></a>)</span>