Add a New Social to Beautifulhugo

Fairly recently I changed my theme for my personal blog. I switched to Beautifulhugo. I find it to be a nice clean theme.

Beautifulhugo supports a lot of social sites. However, it is also missing some that I like. In particular Dev.to and Flipboard.

I had previously added these to the other theme I was using. So I went about adding them to Beautifulhugo.

Adding a Dev.to Social Link

I started with a quick search to see if there was any guide regarding dev.to, actually I already knew there was, as I had found it previously, I just wanted to find it quickly.

Dev.to provides this nice page which lists a number of options. Take note that it lists Font Awesome. If you follow this link to Font Awesome you will get to some more information where we can see the hex value for dev.to within Font Awesome, that being f6cc.

Understanding how Beautifulhugo Organises Socials

Beautifulhugo stores the social configuration and data in three places.

1. config.toml
2. data/beautifulhugo/socail.toml
3. themes/beautifulhugo/static/fontawesome/webfonts/fa-brands-400.svg This is assuming you are using the theme as a submodule in git. And have named the theme beautifulhugo. Other SVG images may be stored in other files.

Knowing that Dev has a hex code of f6cc. I used the following grep command from within the theme directory.

grep -rn "f6cc" .

This returned the following result

beautifulhugo/static/fontawesome/css/all.css:1178:  content: "\f6cc"; }
beautifulhugo/static/fontawesome/webfonts/fa-brands-400.svg:3007:    <glyph glyph-name="dev" unicode="&#xf6cc;" 

So I checked the fa-brands-400.svg file. Which gave me the following.

<glyph glyph-name="dev" unicode="&#xf6cc;" 
d="M120.12 239.71c3.87012 -2.90039 5.82031 -7.25977 5.83008 -13.0596v-69.6504c0 -5.80957 -1.94043 -10.1602 -5.82031 -13.0596c-3.87988 -2.90039 -7.76953 -4.35059 -11.6494 -4.35059h-17.4502v104.47h17.4395c3.87988 0 7.77051 -1.44922 11.6504 -4.34961z
M404.1 416c24.2002 0 43.8408 -19.5898 43.9004 -43.7998v-360.4c-0.0595703 -24.21 -19.6904 -43.7998 -43.9004 -43.7998h-360.199c-24.2002 0 -43.8408 19.5898 -43.9004 43.7998v360.4c0.0595703 24.21 19.7002 43.7998 43.9004 43.7998h360.199zM154.2 156.81
l-0.00976562 70.9307c-0.0107422 18.8193 -11.9307 47.2793 -47.3701 47.2793h-47.3799v-165.46h46.3994c36.75 -0.0595703 48.3604 28.4404 48.3604 47.25zM254.88 245.47l0.00976562 29.5205h-63.1895c-11.1504 -0.280273 -19.9805 -9.54004 -19.71 -20.6904v-125.109
c0.279297 -11.1602 9.55957 -19.9805 20.7197 -19.6904h62.1797v29.5703h-53.29v38.4102h32.5703v29.5693h-32.5703v38.4199h53.2803zM358.52 130.18l38.4609 144.801h-32.5801l-29.5703 -113.721l-29.71 113.721h-32.5703l38.5303 -144.801
c10.5898 -24.6299 34.2402 -30.75 47.4395 0z" />

This told me that we already have the required svg specification for the image. So I would not need to find one and download it.

Looking at social.toml and fa-brands-400.svg. I was able to determine with fairly good confidence that glyph glyph-name="something" matched the id found in social.toml.

I then checked how Dev.to shows a user's profile page. The URL that is used is:
https://dev.to/username

Editing the social.toml file

Let's take a look at a couple of examples.

[[social_icons]]
id = "mastodon"
url = "https://%s"
title = "Mastodon"
icon = "fab fa-mastodon"

[[social_icons]]
id = "weibo"
url = "https://weibo.com/%s"
title = "Weibo"
icon = "fab fa-weibo"

So I simply appended the following code

[[social_icons]]
id = "dev"
url = "https://dev.to/%s"
title = "Dev"
icon = "fab fa-dev"

Take note that the value for id in social.toml matches the value for glyph-name in fa-brands-400.svg. And the use of fab fa-dev for the icon

At this point we have the elements in place to be able to add a Dev social link in the footer of our site page.

Enabling Dev

Now we need to edit the config.toml

Looking at the config we find the following

[Author]
  #name = "Some Person"
  #website = "yourwebsite.com"
  #email = "youremail@domain.com"
--snip--
  #weibo = "username"
  #slack = "username"

Within our own config we simply append to the end of this list.

dev = "basman" # My Dev.to username

With these changes, I was able to add a nice social link back to Dev.to. Don't forget to remove the # mark.

Adding my Flipboard Coding Magazine

This was done in a very similar fashion.

First I checked that flipboard was available.

grep -rn "flipboard" .

which returned

beautifulhugo/static/fontawesome/webfonts/fa-brands-400.svg:2336:    <glyph glyph-name="flipboard" unicode="&#xf44d;" 

So I knew it was available.

Next I added flipboard to the social.toml

[[social_icons]]
id = "flipboard"
url = "https://flipboard.com/@redacted/coding-kq8v8rh8z?from=share"
title = "Flipboard"
icon = "fab fa-flipboard"

In this case I hard coded the link to my magazine. It has been redacted here. But you are free to access it from my blog.

Finally we still actually need to make this active by editing config.toml

Because I have hard coded the flipboard link. I just needed to add the following

flipboard = ""

Closing

I hope you find this useful if you are using Beautifulhugo as your theme. I think it's pretty straight forward to add a missing social link.