Adding Syndication Urls to My Posts

Inspired by this weekend’s IndieWebCamp West, I added support to record and display syndication urls for my posts on this site.

The indieweb¹ community encourages posting your content to your own site, and then liberally sharing either copies or links elsewhere on the web. The idea is that you own your content, and you can also give it wider distribution via social media or news aggregrators. They call this POSSE (Publish on your Own Site, Syndicate Elsewhere). Once you share your content “off-site”, it is helpful to visitors if you indicate on the original post where else tt can be found.

I don’t provide a way to comment on my site, but I do share some posts on social media and in other places that are more conducive to conversation. I thought it would be nice to point visitors at those other places where you can find the content and maybe even interact with me.

To capture the URLs, I decided to use a new field in my posts’ frontmatter, named syndication_urls and shaped as a list of strings. Each string in the list represents an alternate URL at which the post is syndicated. The metadata for an example post with syndication URLs looks like:

+++
title = "Pomodoro Technique as Self-Awareness Tool"
date = 2018-11-01T16:57:52-07:00
tags = ["working better"]
syndication_urls = ["https://dev.to/anaulin/pomodoro-technique-as-self-awareness-tool-2n0k", "https://twitter.com/anaulin/status/1058147565647134721?s=20"]
+++

[...post content...]

In the templates that generate the HTML for a post, I display these links like so:

{{ if .Params.syndication_urls }}
  <div class="syndication">
      <i class="fas fa-link"></i>
      This post was also syndicated to:
      {{- range $index, $url := .Params.syndication_urls }}
        {{- $parsed_url := urls.Parse $url -}}
        {{- if $index }}, {{- end }}
        <a class="u-syndication" href="{{ $url }}" rel="syndication">{{ $parsed_url.Host }}</a>
      {{- end }}
    </small>
  </div>
{{ end }}

It’s somewhat ugly, as Hugo‘s Golang-based templates tend to be. But it is simple and it works! As a bonus, it includes the requisite microformats to indicate that these are syndication urls.

Once the post has been rendered, the links looks something like this:

I’m pretty happy with it.

An unexpected bonus is that now I will have a structured way to collect this data, which might come in handy in the future. A future enhancement I’d like to add is replacing the plain text link with nice icons for some well known sites, like Mastodon or Twitter.

1. I don’t love the term indieweb, but I’ll use it for lack of a better one. To me, indieweb is just, well, web. The ideas of owning your own data and making your own site (and having fun with it!) existed well before someone invented this term. The prefix indie, in particular, feels like trying too hard to say “hey, i’m the small guy, i’m the good guy”. I guess folks wanted to be very clear that this is not Facebook or Medium or some other Big Tech Vortex of Doom, dammit. Fair enough. You can read more about this indieweb business on the IndieWeb wiki. Naming quibbles aside, there are good ideas in there. ↩︎

This post was originally published on https://anaulin.org/blog.