Home Blog About

Some Updates

Last Updated:

Tags: site-updates

What’s Up

I’ve been focused on the “Build a Website” series for this website, but I’ve also been putting a lot of effort into upgrading the look and feel of the website, while also fixing a few bugs on the way. I think that I’ll be doing this kind of an article every once in a while to try and summarize some of the things I’m either most proud of or most interested in.

At this point I am mostly focusing on the basics. I’m working with Material.io as my styling framework. This has had its own problems to overcome, but for the time being I’ll put the nitty-gritty in its own separate article.

Style Upgrades / Bug Fixes

I haven’t strayed too far from the original design for this site. I did have a few bugs that needed to be fixed. First, was a bug I had in the navtabs up at the top of this site. This was due to a mix up I had. See, I made the mistake of missing an “mdc-tab-indicator”. My code was something like that below.

<div class="mdc-tab-scroller">
  <div class="mdc-tab-scroller__scroll-area">
    <div class="mdc-tab-scroller__scroll-content"> {{ range .Site.Menus.main }}
      {{ $active := or ($current.IsMenuCurrent "main" .) ($current.HasMenuCurrent "main" .)}}
      {{ $active = or $active (eq .Name $current.Title) }}
      {{ $active = or $active (and (eq .Name "post") (eq $current.Section "post")) }}
      {{ $active = or $active (and (eq .Name "about") (eq $current.Page.Name "About Me")) }}
      <a class="mdc-tab{{ if $active }} mdc-tab--active{{ end }}"
         role="tab" aria-selected="true" tabindex="0" href="{{ .URL }}">
        <span class="mdc-tab__content">
          <span class="mdc-tab__icon material-icons" aria-hidden="true">{{ .Pre }}</span>
          <span class="mdc-tab__text-label">{{ .Title }}</span>
        </span>
        {{ if $active }}
        <span class="mdc-tab-indicator mdc-tab-indicator--active">
          <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
        </span>
        {{ end}}
        <span class="mdc-tab__ripple"></span>
      </a>
      {{ end }}

Which is wrong… subtly wrong. That “mdc-tab-indicator” section always needs to be present, otherwise the button rippling won’t work correctly, and you’ll get a bunch of console errors. I’ll be doing an article on this specific issue which will delve into how I figured out this was a problem, It’ll be a deep-dive.

I’ve also updated the entire site to set up different font stacks for mobile devices, and additionally I’ve made the nav-bar collapse the titles for mobile / small screens. Neat!

Series Stuff

This one I’m really proud of: I’ve been working on a series of articles to detail how to set up a website like this one. Until this month I haven’t been able to really group those together in a coherent way. I wanted to be able to publish articles about other things while I was doing this but without a distinct grouping I’d run the risk of it turning into an incoherent mess.

I’ve upgraded posts on this site to include “series” as a part of the front matter and taxonomy. What this means in practice is that I can group articles together in a group that get their own landing pages. Check out the “Build a Website” series I’ve been talking so much about to see those upgrades.

A mini-tutorial: if you want a series like I’ve got it set up, then add this to your config.toml file

[taxonomies]
    category = "categories"
    series = "series"
    tag="tags"

FYI by default you only have the tag and category taxonomies. After you’ve done this, whenever you add this variable to the front matter of your posts it’ll be tacked on to the corresponding series summary page. This makes 2 new pages for you to customize: the series hub, and optionally a hub for each individual series.

I like customizing these pages and adding my own text to them. If you don’t do this, you’ll get a plain, but useful summary page. I’ll do a longer article going over this later.

Upgrading the Header Stuff

At the top of every post I’ve now added a few things that will tell you a little more about the page you’re looking at. Things like when the article was published, tags, and the series that it’s associated with. I’ve done this with a few partials on my post template. These partials render special pieces, depending on whether or not the post has a series tag, and whether or not it’s got any tags associated with it.

The next big upgrade was making the series link between themselves. I did find some helpful posts from other people who’ve done the same thing. At the bottom of every post are some upgrades, and series get an extra upgrade. Every post is now linked temporally, or they can go forward and back in time using the next / previous buttons. Series have an additional group at the bottom that shows you where you are in the series, and also give you a link to that series! Pretty nifty!

Upgrading The Article Cards

I’ve made similar changes to the article Headers on my cards. For my lists I’ve also added a little upgrade that includes the date. This was way easier than upgrading the posts page, and it’s a simple shortcode tacked on to the card itself.

The far trickier upgrade was fixing the summary render page. One thing that I’m apparently fond of is adding a plethora of links to the front side of my articles. I’ve been told by the hugo community (or rather the leader of the Hugo community) that this is bad and I should feel bad.

just wanted to say, that I have also the “problem”. The author from my favorite theme (mainroad), told me the same, that it is for now not possible to have a summary with styles. I have often only two or three sentences with a link or a short command. It did not find it usefull, to put every the, also to add it to my imported Wordpress posts. So it would be great to have summary but with CSS/Mardown enabled

The discussion and resolution is here

This sentiment only exists because of what I’d consider a bug: if you have any links in your summary, it breaks the rendering of that summary. For me, it wrecks the groupings of the card and plops a bunch of sub-groupings in there. I’m not really sure why. I wasn’t the only person to run into this issue, nor notice how standoffish the accepted answer of, “maybe don’t do that,” was, but luckily I found an individual also figured out how to fix it! Here’s the article that helped me. Thanks a bunch! I did my own tinkering and got it running.

Finally Writing Articles

I’ve gotten the first 3 articles done in my “Build a Website” series, last of which was the SCSS setup. I actually had much more to say about that subject, but I was looking at about 6000 words and not getting to the end so I paired it waaay back. I’m not sure if I want to dive into the fine details for CSS styling on this site, and I felt like I wanted to keep that article focused on propping up a site that’d work, and give a general understanding of why it works. CSS is a topic too deep to cover in one article, and that’s why on MDN they break it down into a bunch of sub-tutorials!

I’ve got two new types of articles coming down the pipeline: deep-dives where I’ll go into dense detail about how I figured something out, tool-tips which is where I’ll look at some of the tools I use in a bit of an editorial / love-letter format, and finally random think piece articles where I expand on a fixation I had.

I’m thinking about either propping up new websites to handle things I’m interested in that might bloat this website, or possibly making distinct sections in this website to handle that a bit more elegantly.

What I’ll be doing soon

  • Articles
    • Finish the “Build a Website” series
      • I’ve got at least 3 more articles to go with this one
    • Write a Tool-Tip for Vim (my favorite editor) (2021-01-03)
    • Write that wonky off-the-wall think-piece article
  • Image Assets
    • Some of these articles really ask for pictures to be included. I’ll try and figure that out.
  • Getting a Contact Page set up!
    • Yeah… So you should be able to email me here right? (2021-01-12)
    • Linking up some of my other info
  • RSS Feeds
    • This is built-in with Hugo, so coming soon! (2021-01-19
  • Miscellaneous Fixes
    • Fixing that Mobile layout: Particularly, I have an issue with the top content squashing against itself (2020-11-29)
    • Fix the Code blocks to not overflow in an unsightly manner (2020-11-28)
    • Fix the Summary rendering for Series (2020-11-29)
    • Add a series / tags navigation page in a more central location(2020-12-17 & 2020-11-29)
    • Add pagination once I hit ~20 articles (2021-01-11)
    • Update the content policy for the site
  • General Snazzy-ness
    • Add additional glitz and glam to the top of the site. I’ve got ideas. (2020-12-17)
    • Upgrade the Home Page to be a bit more welcoming.
    • Upgrade the look and feel of the site. (2020-12-17)

Until the next update, take care everyone