Labarum: Can I has Cheeseburger and Debugging

In my last post about the labarum theme, I ranted about how I wasn’t going to re-invent the wheel. In this post, I’ll be talking about how I made some minor tweaks and decided to update the version to 1.3!

This post is mostly a “why did I do this” versus a “how did I do it”.

On the Edge of obscure

When I first started working with static site generators, I used a tool called Pelican. The site is still up at https://mandaris.github.io, but I had messed up the layout in the last couple of commits and haven’t gone back to fix.

I have a tendency to focus on details that don’t really matter to 90% of most readers and (I’m assuming) most writers of HTML.

If you were to look at a list of personal blogs, I doubt that you’d find more than a handful that use esoteric tags such as <dt> or <rt>.

I continued this trend with this release by adding some tweaks to <ins>, <del>, and <s>.

At this point, the changes are direct by me loading the page up and making adjustments in the browsers inspector.

Part of the reason that I keep looking into this is that goldmark/commonmark define strikethrough as a delete in the resultant HTML.

Obscure Examples

Here are some example paragraphs with the styling mentioned above.

This is a paragraph with deleted text.

This is a paragraph with inserted text.

This is a paragraph with strikethrough.

And just for giggles here is a ruby(ruby) example.

Toggling Debug

Early on in this project, I enabled some debugging from Hugo. It was really useful when making the theme, and hidden by default.

As the template has become more stable, I want to reduce the amount of text that is being sent over. Yes, I know that text is almost negligible but why generate it if I’m not using it.

As a user, you don’t need to do anything. Generating the debug output is optional and toggled off by default.

I’ve added the following to the plugin.json file to make it an option.

"field": "params.themeDebug",
"label": "Generate the debug information",
"type": "boolean"

And then I have if statement in front of the corresponding debug code

{{ if .Params.themeDebug }}

Can I has?

This is the most exciting part of this release for me!

During the discussion of implementing the table of contents, I had written that I about using has but couldn’t because it wasn’t supported in Firefox.

Well, the feature is now available to anyone using version 121 or newer of Firefox and other popular browsers¹!

This came at a great time as I wanted to better integrate the plugins that Micro.blog offers. I wrote about the plugins late last year. That solution seemed to work for a while, but the <div> would sometimes render when it was empty. I was counting on Hugo’s handling of whitespace to remove any spaces and thus making the browser skip over rendering it.

I created a class in my CSS that would default to hiding things.

.optional {
  display: hidden;
}

I then follow this directly with code that makes it a block element if it has certain elements in it.

.optional:has(a, p, img) {
  display: block;
  margin-top: 1rem;
  padding: 5px;
}

After that, I added the optional class to the <div>in _default/single.html that contains plugins.

<div class="[ style-box ] [ optional ] [ text-center ]">

Next steps?

I don’t know.

Seriously.

I could add some styling to the optional components. Some of the other themes make those components look really good and was tempted to use something similar.

But, I don’t have the energy anymore and I want to focus on my writing. In fact, this release was mostly done a while ago and I’ve just been waiting to write up the changes.

If you have anything that you’d like to comment on, please feel free to email me at info@MandarisMoore.com.