Hugo themes/hyde-hyde Font Awesome v5 -> v6

This is a “local copy” of my discourse.gohugo.io post.

This journey started with wanting to add a bsky.app icon and link to my Hugo site (hyde-hyde theme).

Here’s an approximate ordination of my journey and my solution.

1. try just adding three lines to my <website>/layouts/partials/sidebar/social.html e.g.

{{ with .Site.Params.social.bluesky }}
    <a href="https://bsky.app/{{.}}" rel="me"><i class="fab fa-bluesky fa-lg" aria-hidden="true"></i></a>`
    {{ end }}

Kinda works. I get an icon that’s a circle with an animated ‘?’ in it. This isn’t going to cut it. Obviously some awareness is missing… hmm…

2. A hazy memory says these come from something called “font awesome”. Google “font awesome” and find very obviously-named site, Fontawesome.com .
3. poke around there and to find the Bluesky app icon , do web searches using the code in social.html, etc.. No dice.
4. Remember that in the page code there’s a fontawesome reference. Go find that in Terminal on my Mac with find -X . -type file | xargs fontawesome and it turns out to be this (on many many pages, of course):

./public/page/3/index.html:  <script defer src="https://use.fontawesome.com/releases/v5.11.2/js/all.js" integrity="sha384-b3ua1l97aVGAPEIe48b4TC60WUQbQaGi2jqAWM90y0OZXZeyaTCWtBTKtjW2GXG1" crossorigin="anonymous"></script>

5. Ah. So what file has that in it? Let’s grep some more…ah there it is in the theme folder </website>/themes/hyde-hyde/layouts/partials/footer/font-awesome-js.html
6. What’s in there… let’s cat it, assuming I’m lucky and it’s short… oh good, just one line!

<script defer src="https://use.fontawesome.com/releases/v5.11.2/js/all.js" integrity="sha384-b3ua1l97aVGAPEIe48b4TC60WUQbQaGi2jqAWM90y0OZXZeyaTCWtBTKtjW2GXG1" crossorigin="anonymous"></script>

7. Wonder if I’m getting the most recent feed… nope, Font Awesome page for the free level Bluesky icon hints that v6.5.2 is newest.
8. Oooh, I bet the right url for the free v6.5.2 feed is https://use.fontawesome.com/releases/v6.5.2/js/all.js isn’t it… Yep!
9. OK, I can replace that bit of the string that specifies the version number easy. What’s this integrity= thing, looks like a checksum, so I’m going to need one that matches the current feed… Let’s Google… Ah, this Reddit post leads me to the SRI Hash Generator . Let’s put in that feed url. Hey! Lookit that.

<script src="https://use.fontawesome.com/releases/v6.5.2/js/all.js" integrity="sha384-QvGJBgkqeVjFCXW39Q3psy0yEymI5WTMC5V+6LnvmNIeDfvGo1AI/j0AlTrID9lQ" crossorigin="anonymous"></script>

10. Let’s copy that font-awesome-js.html to my own website for customization as <website>/layouts/partials/footer/font-awesome-js.html then replace the contents with the output from SRI Hash Generator.
11. SWEET SAM IN THE MORNING! IT WORKS!
12. OK, got an icon, and it clicks through to https://bsky.app correctly, but not to my user page. Hrm. I bet the internal param isn’t there. I wonder if I specify the username as the whole URL string for my page after https://bsky.app as the user name in config.toml …

## Social Accounts
   [params.social]
   bluesky = 'profile/myUserName.bsky.social'

13. Victory! The pretty new icon clicks right through to my user page.

Hope this helps someone else trying to figure this out. I’m a CSS novice (I cut my teeth on HTML 1.0 when it was new, and, uh, have not kept up…) so I feel pretty good about figuring this out.

Regards,

Addendum: It occurs to me belatedly that I only had to do this because I haven’t kept the theme source up to date, but I haven’t checked that… OK, looking at the hyde-hyde site it doesn’t look like that’s the issue, heh. no shade to @htr3n , they clearly got busy with Stuff. It’s still a solid theme and I’m happy using it. Thanks!