I added commenting with Commento

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:

• Open source
• Does not track you or sell your information
• You can host Commento on your own server, or you can have hosting done for you for a small fee
• Import or export comments from/to another commenting system

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

$body$

<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:

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

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>
<ul>
    $for(posts)$
        <li>
            <a href="$url$">$title$</a> - $date$ <span class="commentcount">(<a href="$url$#commento"></a>)</span>
        </li>
    $endfor$
</ul>