Site Update

I’ve updated the website, huzzah! I’ve already pushed some of the updates, but here’s the quick list of changes:

• I replaced the site names under Elsewhere with social icons. This was because I’d added a link to my mastodon profile earlier and it overflows onto the next line. Even with the icon, the full handle — @nigelsezyarr@mstdn.ca — is too wide. But eh, it works.

• All I had to do was add a new plugin, gatsby-plugin-react-svg, and then add the icons with some code like

  import IconMastodon from "../icons/mastodon.svg";
  // ... then in my render function:
  <ul>
    <li>
      <IconMastodon alt="Mastodon" />
      <Link to={mastodon_url} rel="me">@nigelsezyarr</Link>
    </li>
  </ul>

• But wait! When I pushed to Netlify, the build failed. What gives?

  Ah. At some point I upgraded the version of Node I used locally, but I didn’t muck around with the version in the build. OK, I tried upgrading the version in the build as well, and … no, it still failed.

• Right! I’d been meaning to upgrade things anyway — I hadn’t touched my dependencies since setting up the new site in 2019. So I jumped from Gatsby version two to version five and broke everything. Fortunately, the biggest change was migrating from gatsby-image to gatsby-plugin-image, and there’s a migration guide.

• Hey, if I’m mucking around with things anyway, I should set up category pages. The links in those Year in Review posts are getting awfully long, and linking to an index page would be much easier.

• If I’m doing that, I might as well go through all my old posts and set the categories properly. Now I have index pages for Roleplaying.

• Lastly, I fixed a bunch of broken posts. Some broke due to the new markdown engine, like Dublin 2019; and others have been broken since exporting all the data from Wordpress, like Housing pros and cons.

I gotta say, things made a lot more sense this time. React and GraphQL are still a bit foreign to me, but it wasn’t hard to get things working. It was fun!

UPDATE - 2023-01-29

Err. <Link>s are meant for internal links, not external. This is a better example:

<ul>
  <li>
    <IconMastodon alt="Mastodon" />
    <a href={mastodon_url} rel="me">@nigelsezyarr</a>
  </li>
</ul>