Emails, not comments

History

I’ve been on the fence about having comments on my blog over the years. Between 2011 and 2017, I handled them in several different ways, with periods of having no comments in-between:

Disqus, which unfortunately is owned by an ad company now. It’s also very heavy.

When I used Anchor CMS, I used its built-in comments system, which worked but then it turned out you could only delete comments by directly editing the database.

I also used WordPress’ built-in comments system, which, when coupled with Akismet for spam prevention and Lightweight Subscribe To Comments, actually worked very well.

As of April though, I use a static site generator called Eleventy to power this site. It’s hard to add comments to an SSG without using a third-party script like Disqus, and I decided to not have comments altogether.

Inspiration

I recently visited Kev Quirk’s site, where each of his posts have a “Reply via email” button. I love this idea, private one-on-one casual emails are a rarity for me these days.

Adding an email reply button to each post in Eleventy

In my posts layout I added a link after {{ content | safe }}:

{{ content | safe }}
<div class="text-center py-10">
    <p>Have some thoughts on this post?</p>
    <a class="button" href="mailto:[email protected]?subject=Re: {{ title }}">Reply with an email</a>
</div>

You’ll notice in the href attribute of the <a> element, I’ve added the subject feature to the mailto link, along with the shortcode for the post {{ title }}. When 11ty renders the html, it will convert {{ title }} to the title of the post, like so:

<a class="button" href="mailto:[email protected]?subject=Re: {{ title }}">Reply with an email</a>

That way the respective post title is added to the Title field in the email, so I can easily tell which post they’re emailing about.

You can get even more fancy with the mailto spec, and add body content:

mailto:[email protected]?subject=Re: {{ title }}&body=This is a reply to {{ title }} that appeared at {{ page.url }}.

This post on CSS-Tricks is a good overview on mailto, and this handy generator can help you craft your mailto action.

Disabling comments later

Have a post that is getting a lot of emails and you want to make it not-as-easy for people to email you? Add this if condition around your email link:

{% if comments != false %}
<div class="text-center py-10">
    <p>Have some thoughts on this post?</p>
    <a class="button" href="mailto:[email protected]?subject=Re: {{ title }}">Reply with an email</a>
</div>
{% endif %}

Then, if you add comments: false to your post’s frontmatter, it will hide the email link.

Adding an email reply link to each post in your 11ty RSS feed

Let’s get even more fancy and help our RSS feed readers out.

I use the Eleventy RSS plugin to generate the feed for my site. In your feed.njk template, you’ll want to add some html to the <content> field after {{ post.templateContent }} (but you can’t, more on that in the next paragraph.):

<content>
{{ post.templateContent | htmlToAbsoluteUrls(absolutePostUrl) }}
{% if post.data.comments != false %}
<p>Have some thoughts? <a href="mailto:[email protected]?subject=Re: {{ post.data.title }}">Send me an email.</a></p>
{% endif %}
</content>

You thought this would be dead simple, right? Me too. Turns out, XML needs certain characters escaped, otherwise your link will not work.

11ty can escape html for you using the escape filter. Put your html code in a component file (literally just an .njk file) and include it like so:

{% set comments %}{% include "components/rsscomments.njk" %}{% endset %}
{{ comments | escape }}

We have to include it in this special way (using set) because we can’t directly apply filters to the include Nunjucks template.

(Thanks to Deniz Akşimşek for the solution! I was originally just going to run the code through XML Escape.)

Zoom out:

<content>    
{{ post.templateContent | htmlToAbsoluteUrls(absolutePostUrl) }}
{% if post.data.comments != false %}
{% set comments %}{% include "components/rsscomments.njk" %}{% endset %}
{{ comments | escape }}
{% endif %}
</content>

Aren’t you worried about bots and spam?

I use CloudFlare, which hides email addresses from known bots and spammers. However, based on my very limited dataset, the spammers do not seem to be taking advantage of scraping mailto addresses these days, and much prefer contact forms. I have a couple sites not behind CloudFlare with email addresses in mailto links, and I only get spam via the contact forms.

I still made a separate alias for comments just in case I want to add filtering later.