Critical Info

The changes outlined in this post introduce a new theme, Lightbi, for Rootstalk, as well as a new project repository and dev deployment of the site as an Azure Static Web App. Those critical details are:

Also…

To reduce costs I’ve already eliminated the old deployment of the old main branch to https://icy-tree-020380010.azurestaticapps.net/. With these changes the test and evaluation (staging) deployment of the project’s develop branch as an Azure App Service at https://thankful-flower-0a2308810.1.azurestaticapps.net/ is also going away.

All of these Azure development changes are reflected in the new project’s README.md file.

RootstalkZen is No Longer Responsive

The theme that was originally created for Rootstalk, namely RootstalkZen, was intended to be responsive, and it probably was at one time. Unfortuantely, RootstalkZen was created and implemented just as the COVID 19 pandemic was advancing around the world, and that forced the student who created it to leave the Grinnell College campus (along with everyone else) much earlier than planned. Subsequently, the theme became part of Rootstalk without a lot of documentation or collaboration. Before long the theme got modified to the point where it was no longer properly responsive. Steps were taken to try and mitigate that “bad” behavior, but the issue was never adequately addressed, until now (May, 2023).

Matomo Analytics

Matomo analytics collected for https://rootstalk.grinnell.edu, the production instance of Rootstalk, during the month of April 2023 (see https://analytics.summittservices.com/index.php?module=CoreHome&action=index&date=last7&period=range&idSite=15#?period=range&date=2023-04-01,2023-04-30&category=Dashboard_Dashboard&subcategory=1) show that about 37% (77) of the 206 site visits were made from a smartphone or similar, small device. That percentage was deemed high enough to warrant taking steps to correct the errant responsive behavior.

The Lightbi Theme

I used the Command-Option-M hotkey in Firefox to toggle Responsive Design Mode controls allowing me to evaluate differnt web pages in various media formats. I browsed through demos of the complete list of Hugo themes looking for a responsive theme that included the 3-column layout that is feature of Rootstalk we wish to keep. I tested several themes including Mediumish, Blist, and Hugo W3 Simple before settling on Lightbi and its live demo at https://lightbi-hugo-theme.netlify.app/.

Lightbi is relatively simple utilizing .css rather than .scss and it provides a single point of customization in its ./static/css/main.css file. I started by overriding a number of the theme’s example site (./themes/lightbi/exampleSite) template files. The overrides are in subdirectories of ./layouts and I tried to be generous with comments included in those files.

Search is Also Broken

In addtion to poor responsive behavior Rootstalk using the RootstalkZen search feature also appeared to be broken. It was also noted that having “Search” hidden away in the menu was not conducive to making it easily accessible.

Implementing Pagefind

Not long ago I took steps to add Pagefind search to my personal blog and it works nicely! So, I’m going to try and implement the same for Rootstalk beginning the process with the guidance shared by Bryce Wray in his Pagefind is quite a find for site search post.

That’s all folks… for now.