I recently setup a new Jekyll site for my blog. With Jekyll I can create my pages in AsciiDoc and Jekyll converts them to html for me.

I’m using the default minima theme. While the theme has support for Mastodon, it doesn’t have PixelFed and I doubt it supports some of the other ActivityPub federated services I use.

The minima theme has a block for each social media site.

{%- for mst in site.mastodon -%}
  {%- if mst.username and mst.instance -%}
    <li>
      <a href="https://{{ mst.instance| cgi_escape | escape}}/@{{mst.username}}">
        <svg class="svg-icon">
          <use xlink:href="{{ '/assets/minima-social-icons.svg#mastodon' | relative_url }}"></use>
        </svg>
        <span class="username">{{ mst.username|escape }}</span>
      </a>
    </li>
  {%- endif -%}
{%- endfor -%}

The social media include page has something like that for each service it supports. The Mastodon one is different with the outer loop, but overall it’s a lot of repeat code. It also sets the order they show up on the page rather than letting you do it with the configuration.

Luckily, I found a better way. That page shows how to create one block that loops through the configured accounts. It depends on using font-awesome, which also doesn’t have PixelFed. It’s an improvment, but still not sufficient. Like all the other examples I found, that page doesn’t show how to just use an image from a local directory.

I figured it out and now have SVG icons for both Mastodon and PixelFed.

Here’s my modified version of that loop.

  {% if site.data.social-media %}
    <div id="social-media">
      {% assign sm = site.data.social-media %}
      {% for entry in sm %}
        {% assign key = entry | first %}
        {% if sm[key].id %}
	<a href="{{ sm[key].href }}{{ sm[key].id }}" title="{{ sm[key].title }}"><img src="/path/to/logos/{{ sm[key].logo-file }}" width=20> {{ sm[key].id }}</a>
        {% endif %}
      {% endfor %}
    </div>
  {% endif %}

I created an include file in _data that has my social media accounts.

mastodon:
  id: 'FLOX_advocate'
  href: 'https://floss.social/@'
  title: 'Mastodon'
  logo-file: 'Mastodon-logo-simple.svg'
pixelfed:
  id: 'FLOX_advocate'
  href: 'https://PixelFed.social/'
  title: 'PixelFed'
  logo-file: 'pixelfed-icon-color.svg'

I now have logos, account name, links to my social media pages and alt text. They’re in the footer, so on every page on the blog.

It’s not perfect as I’m currently hard-coding logo size. That probably doesn’t work well on both a 4k display and on a phone. I’ll work on that.

With Jekyll I spent the last couple days experimenting with it on my deployment container. I could build the site and view it there to see if it was working. Now that I’m ready, I’ll finish this blog post and push the updated site to the web server, which is running a simple Apache2 setup.

Thanks to https:/LetsEncrypt.org/[Let’s Encrypt] for the TLS certificate. Thanks also to EFF, Mozilla and the other Let’s Encrypt founders who created the service for us.

I also found some pages on adding Mastodon content to Jekyll web sites. Still need to look into that and see if it’s something I want.