Add a New Social to Beautifulhugo
Tags: hugo, beautifulhugo, social
Published: 2021-04-26 03:43:14

Fairly recently I changed my theme for my personal blog. I switched to [Beautifulhugo](https://github.com/halogenica/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](https://dev.to) and [Flipboard](https://flipboard.com).

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](https://dev.to/p/badges) 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.
```toml
[[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
```toml
[[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
```toml
[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.
```toml
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.

```bash
grep -rn "flipboard" .
```
which returned
```bash
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

```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](https://bas-man.github.io/).

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
```toml
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.