Site Design Update

Adding Some Flair#

I was unhappy with the functionality of the standard list page of the minima theme. Essentially, I needed something less minimal. So, looking for other themes on the Hugo official site I found the Anubis theme and it had what I wanted as regards a more complete list page for the posts.

Cannibalizing Anubis#

I installed it as a git submodule and then began to cannibalize the list templates therein. I’m happy with the result and also learned to use some more advanced (for me) features of including summary, adjusting the summaryLenght in the config.toml file and also ensuring that the links generated to the posts themselves, the tag list pages and the category list pages were relative links (relref) and not absolute links to avoid appending the external link icon to these links.

{{ define "main" }}
	<main>
	{{ if isset .Data "Term" }}
		<h2>{{ .Data.Singular | title }} - "{{ .Data.Term }}"</h2>
	{{ else }}
	{{ end }}
		<div>
		{{ $pages := where (where .Pages "Type" "in" site.Params.mainSections) "Params.hidden" "!=" true}}
		{{ range $pages }}
			<div>
				<div>
				<header>
				<h2><a href="{{ .RelPermalink }}">{{ trim .Title " " }}</a></h2>
					</header>
				</div>
				{{ partial "post-info.html" . }}
				</div>
			{{ end }}
		</div>
	</main>
{{ end }}
// And the post-info.html

{{ $dateFormat := "2006-01-02" }}
    {{ if .Site.Params.dateFormat }}
        {{ $dateFormat = .Site.Params.dateFormat }}
    {{ end }}
    <div>
        {{ if not .Site.Params.disableSummary }}
            <div>
                <p>{{ .Summary | safeHTML }}</p>
            </div>
        {{ end }}
        <div class="post-info">
            {{ if and (.Truncated) (.Site.Params.readMore) }}
            <div class="read-more">
                <a class="u-url" href="{{ .RelPermalink }}">{{ i18n "readMore" }}</a>
            </div>
        {{ end }}
        {{ if .Params.date }}
            <div class="post-date">{{ .Params.date.Format $dateFormat }}</div>
        {{ end }}
        <div class="post-taxonomies">
            {{ if .Params.categories }}
                <ul class="post-categories">
                    {{ range $cat_name := .Params.categories }}
                        {{ $cat := ($.Site.GetPage (printf "/categories/%s" $cat_name)) }}
                        <li><a href="{{ $cat.RelPermalink }}">{{ $cat.Title | default $cat_name }}</a></li>
                    {{ end }}
                </ul>
                {{ end }}
                {{ if .Params.tags }}
                    <ul class="post-tags">
                        {{ range $tag_name := .Params.tags }}
                            {{ $tag := ($.Site.GetPage (printf "/tags/%s" $tag_name)) }}
                            <li><a href="{{ $tag.RelPermalink }}">#{{ $tag.Title | default $tag_name }}</a></li>
                        {{ end }}
                    </ul>
            {{ end }}
            </div>
    </div>
</div>

That was fun and only took a while to get up and running. The color scheme in dark mode versus light mode might need some revisiting but for the moment I’m happy with the results.

CSS External Link Indicator#

If you’re interested, I use the following CSS on my site to have an automatic addition of an external link icon to all external links. This link is internal, while this is to the same destination but uses an absolute link.

// Show external links
a:not(.icon)[href^="http"]::after {
  content: url(/images/external.svg);
}
@media (prefers-color-scheme: dark) {
  a:not(.icon)[href^="http"]::after {
    content: url(/images/external_dark.svg);
  }
}

Code Snippet Woes#

Next on the cards is to try and reduce the with of the line number column in the code snippets. At present it occupies far too much space and adds to the need for excessive horitzonal scrolling in the snippets.

Too much Indent due to line number colum size

At present the width is set to auto for the line number column and it smells like a rabbit hole.

Later. Done: July, 2, 2022

Multi-word tags and categories in Hugo FrontMatter#

Some of the tags and categories I apply to my posts are multi-word and this is causing problems when creating links to these tag/cat pages from the list page.

That’s one issue, which I don’t yet understand, given that I’m unsure how the tags/cats info is displayed/processed on the post-info.html template. This is causing the links under each post listing on the code index page, that is, the list of published posts, to fail. this is not good.

So quick fix, reduce the tags used to single words. This might be the best quick win. However, this means a data loss. What would I choose instead of Binary Search, binary or search. Neither are apt for what I wanted to express. The plot thickens.

I know the tags pages has no problems displaying and linking the multi-word tags, so it’s possible. That’s a great first step, knowing it’s possible already.

Time to investigate. #TODO

note: Meanwhile I’m deactivating the tags and categories as shown on the list pages. No point generating broken links.

Could I use Python to Generate Tags?#

But, perhaps more interestingly I’m curious now how to automatically generate the tags as opposed to simply trying to remember previous tags that might be relevant and simultaneously come up with new tags that might describe the content accurately.

Pointwise Mutual Information seems to be the stackoverflow recommendation most voted for here. So there’s that, which if we’re being honest seems like a much more interesting and perhaps applicable skill than fixing the existing multi-word tags/cats issue.

Impact Effort Matrix#

This morning I was learning a little about the use of the impact/Effort Matrix as a means to decide the next course of action in a project. There’s far more to it than that but it piqued my interest, and relates directly to an earlier post’s questions regarding burnout.

So that seems like a fun rabbit hole. #TODO