David J Nevin+= Code

Last updated: Jul 9, 2022

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.

100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
{{ 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.

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.

100
101
102
103
104
105
106
107
108
// 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


Next: Python Project Ideas
Previous: Taking Stock