How to verify Mastodon account in Hugo and LoveIt theme

2023-05-02 406 words 2 minutes

Contents

I recently joined Mastodon, the open source and decentralized social network, quite similar to Twitter.

One of the things you can do in Mastodon is to verify your account using an external resource, such as a blog or a domain. To do so, you have to insert a html code like this in your blog:

<a rel="me" href="https://mastodon.online/@jcastp">Mastodon</a>

and then add that blog URL in your Mastodon profile.

Simple, right?

I wanted to do it in my Hugo blog, using the LoveIt theme.

The LoveIt theme has this social ribbon you can add your social media, and is defined in the <hugo_root>/themes/LoveIt/assets/data/social.yml. In that file you can see some definitions. Also, checking the theme documentation, you can add some other data in the config.toml file of your site, such as this:

[params.social.Mastodon]
  # weight when arranging icons (the greater the weight, the later the icon is positioned)
  weight = 0
  # your social ID
  id = "@jcastp"
  # prefix of your social link
  prefix = "https://mastodon.online/"
  # content hovering on the icon
  title = "Mastodon"

But, as you can see, there is no way to add the rel="me" part in that snippet, that seems to be essential to verify your account, as you can do in other themes, like here.

There are two options here.

The first one is to add the link directly. I did that on the footer, but it showed a redundant “mastodon” mention, and I want the site to be slick. So I added this to the config.toml site config file:

[params.footer]
  enable = true
  # LoveIt NEW | 0.2.0 Custom content (HTML format is supported)
  custom = '<a rel="me" href="https://mastodon.online/@jcastp"></a>'

That worked and the link is invisible, as it has no text in the viewable part.

Second option is to read the documentation of the theme, mainly here, where it states that it supports now the rel="me" option by default.

So, if you filled the Mastodon information above, the result is shown in the page source code as:

<a href="https://mastodon.online/@jcastp" title="Mastodon" target="_blank" rel="noopener noreffer me">

As you can see, my first method is crude and redundant, so I removed it, and I rely now in the default theme method, that works pretty well.

Lesson here: read the documentation, search in the code, look for other more elegant solution before deploying yours, for the developers are usually pretty smart and well seasoned people, and probably they have already figured it out ;)