Indieweb Replies

I've been posting links on the blog for a while. It started as summaries of my monthly reading but has morphed into daringfireball-style commentary on neat internet posts by neat internet people.

I didn't have a visual metaphor for "posts that I write" vs. "commentary on posts that I didn't write," and that's held me back for a bit… but I found some time to hack it together.

I have finished the first iteration on this, and I'm pleased as punch.

For the design I chose a simple unicode circle arrow ↺ for the "reply" icon. I think it's clear enough without being too distracting. I eventually created a CSS class to show it… it let's me use it flexibly on both the body link and the header:

.is-reply:before {
  content: '↺';

  display: inline-block;
  margin-right: .25em;

  font-size: 1.4em;
  font-weight: 400;
  font-family: monospace;

  color: lighten($accent, 30%);
}

Fun fact: text-decoration can't be overridden by a child element¹ including :before pseudo-elements… unless that pseudoelement has a display property of inline-block. I have no idea why. It feels like a consistent glitch rather than a feature, but what's the difference when it comes to CSS? 🤷

The other fun bug was with Firefox. Apparently the way it decided to fallback the unicode character was different than webkit based browsers. Setting font-family: monospace ensured that the fallback font was consistent in Gecko-land.

On posts that are a reply to a single link and depend on it for context, I updated the YAML frontmatter:

reply:
  title: Keeping a Separate Creativity Computer
  url: https://thenewsprint.co/2022/03/28/keeping-a-separate-creativity-computer/

This means that everywhere in Middleman I can query for if article.reply to find out if this article is a reply or not. I use that in my filtered RSS for just my essays:

articles.reject { |a| a.data.reply }

When it comes time to display the source's URL, I can format a consistent link pretty easily:

<a href="<%= article.data.reply.url %>" class="u-in-reply-to  is-reply">
  <%= article.data.reply.title %> - <%= URI(article.data.reply.url).host %>
</a>

While I was having fun with the design I snuck in some functionality as well… indieweb replies! The reply is a good fit for the kind of content I'm posting: I'm reading on my phone and I see something I like and is worth sharing with my friends. I'll use Drafts.app to yank the content in, format it, throw it into Working Copy, and Github CI posts automagically.

All that was required to be a legitimate reply was to add the class .u-in-reply-to to the link in the .h-entry div that contains the content. I quickly checked with the linter and it seems that everything is useful and usable.

At some point I'll figure out some kind of automated CI process to send webmention pings when Github CI builds a new article, but that can wait for now.

If you don't want to see these reply/commentary posts there is an Essay specific RSS feed just for you.