💾 Archived View for gmi.bacardi55.io › blog › 0001 › 01 › 01 › test-no-frontmatter captured on 2024-08-24 at 23:50:31. Gemini links have been rewritten to link to archived content
⬅️ Previous capture (2024-05-10)
-=-=-=-=-=-=-
+++
title = "March Blog Updates: less is more!"
author = ["Bacardi55"]
date = 2024-03-24
tags = ["hugo"]
categories = ["blog"]
draft = false
toc = 1
coffee = 1
+++
March, as February, was a month full of small and big tweaks to the design of this blog. For this update, I tried to have in mind the famous "less is more". It's interesting to see how much "work" having a "minimalist" theme and blog is :).
One thing I remember from an autobiography from Stephen King was that he insisted on removing words and being more concise. It helps both the writer and the reader. That's what I tried to do as well during this update.
All theme tweaks are made in order to improve readability, accessibility and navigation simplicity. If you think any of these changes go against those goals, please let me know!
For "posterity", let's detail these changes.
One of the big change that will be visible in many screenshots (hence why I start with it) is the apparition of emojis… I'm usually not the biggest fan of using emojis everywhere, but used with caution, it can be a nice visual help. With the recent addition of new content types (and one still to be added), I thought it would improve the readability.
Emojis are used for 4 reasons: distinguishing content types and vacabularies/taxonomies, highlighting links to subscribe and decorating specific pages.
Each content type has its own emojis, making them easily identifiable, specifically in the archive page:
I also added an emoji for each taxonomy type:
There are 3 ways of subscribing to content from this website: RSS Feeds, Fediverse BOTs or h-feed. I've added small svg files (yes, technically, not emojis…) for all 3.
Example for the blog posts listing page that shows all three:
{{< figure src="/images/posts/2024/03/blog-title.png" caption="<span class=\"figure-number\">Figure 1: Screenshot of the title of the blog list page" >}}
While not the initial goal, some emojis were added to some pages too:
I'm not going to add one each time, only when I really makes sens.
The homepage lost weight extensively last month already, but I did more changes this month.
At the end of February, the homepage looked like this:
{{< figure src="/images/posts/2024/03/homepage-before.png" caption="<span class=\"figure-number\">Figure 2: Screenshot of the homepage at the end of February 2024" >}}
And now:
{{< figure src="/images/posts/2024/03/homepage-after.png" caption="<span class=\"figure-number\">Figure 3: Screenshot of the homepage as of March 2024" >}}
If you don't want to play 7 difference, changes are:
* For the blog section, I still list the latest one (which could be displayed twice if featured)
The archive page, while less than a month old, was updated to leverage the emojis instead of the [contentTypeName] within the titles. I haven't change this in the RSS feeds though (at least yet). I may change that in the future, but I'm not sure if it is the right thing to do for the RSS feeds.
The initial all/archives page looked like this:
{{< figure src="/images/posts/2024/03/archives-before.png" caption="<span class=\"figure-number\">Figure 4: Screenshot of archive page in early March" >}}
And now:
{{< figure src="/images/posts/2024/03/archives-after.png" caption="<span class=\"figure-number\">Figure 5: Screenshot of archive page at the end of March" >}}
The intro text is easier to read and I've added the links to the Category and Tags pages.
Table of content are now easier to read, simply by adding border around:
Before:
{{< figure src="/images/posts/2024/03/toc-before.png" caption="<span class=\"figure-number\">Figure 6: Screenshot of a table of content before the March update" >}}
After:
{{< figure src="/images/posts/2024/03/toc-after.png" caption="<span class=\"figure-number\">Figure 7: Screenshot of a table of content after the March update" >}}
Simple but effective, IMHO.
Other than that, just small tweaks like the background color of highlighted text, some spacing or adding # to tag names.
I've moved back the subscription part of the about page to a dedicated page, with a link to that page in the footer (see menus below). Now that I've added web feeds icons in all concerned pages, finding these links is a lot easier, so it doesn't have to be in the about page anymore.
The About page has the same top area than the homepage for consistency. It is also now focused on providing information about me and this website. I've also included a message to remove the barrier to contact me (hopefully).
The subscribe page is there to explicitly provides all feeds and bots URLs without cluttering the about page.
I've been struggling lately with my menus… I want, at the same time, something minimal with a limited number of links, but also "enough" links so most content is easily accessible without requiring many clicks to be found… This is what I came up with.
For the header, I tend to prefer a limited number of links as I find they can really bloat the header and not be easily usable. I'm familiar with the "hamburger menus" trend… but a/ I don't personally like them and b/ they require javascript[^fn:1] to work efficiently. So no hamburger menu for me…
Instead of eating a hamburgers, the header menu went through a diet and now only displays 3 links: blog, All (= Archives) and About.
I believe that these are the 3 main ones. Blog posts are the heart of this website and the listing page allow visitors to go to the tags, categories or series pages.
All will allow a quick glance at all published content and the about page will help visitors learn more about me and find everything else.
It went from:
{{< figure src="/images/posts/2024/03/header-before.png" caption="<span class=\"figure-number\">Figure 8: Screenshot of header as of Feb 2024" >}}
To:
{{< figure src="/images/posts/2024/03/header-after.png" caption="<span class=\"figure-number\">Figure 9: Screenshot of the header as of March 2024" >}}
The footer went a bit in the other direction and grew a lot. So much so that I decided to split it in 2 distinct menus: one global footer menu to access main pages, and a blog related menus to access blog related pages.
The footer went from:
{{< figure src="/images/posts/2024/03/footer-before.png" caption="<span class=\"figure-number\">Figure 10: Screenshot of the footer as of February 2024" >}}
To:
{{< figure src="/images/posts/2024/03/footer-after.png" caption="<span class=\"figure-number\">Figure 11: Screenshot of the footer as of March 2024" >}}
The footer menu contains links to the main pages I want to be directly accessible, like the content type listing page and some handpicked pages like the Stats or BlogRoll pages. This is the menu that may change the most if I decide other pages should be there.
Below the footer menu, I've added a new menu dedicated to blog related links (the "main" content type of this website). The menu links to the listing page as well as the series, tags and categories pages.
Vocabulary pages, like the Categories or Tags pages, have been slightly updated. They now show a link to the RSS feed in the title as well as an introduction above the content.
To add custom content to these listing pages with hugo, simply create a content/<NameOfTheTaxonomy>/_index.md file. For example for the Tags page, I created a content/tags/_index.md file with my content in it (and the frontmatter part of course).
As an example, the Tags page:
{{< figure src="/images/posts/2024/03/tags-after.png" caption="<span class=\"figure-number\">Figure 12: Screenshot of Tags listing page" >}}
Similar to the vocabulary page, the term page (the page of a specific term), like the dev tag page, also display the RSS icon to go to the RSS feed directly.
Same as the vocabulary page, I've added an introduction content above the list to be more understandable. As opposed to the vocabulary page, I didn't created a custom content for that. All I did was adding a generic sentence within the template to display a simple message: “Content linked to the taxonomy term « NameOfTerm »:” with of course NameOfTerm being the name of the term being looked at.
For example:
{{< figure src="/images/posts/2024/03/devtag-after.png" caption="<span class=\"figure-number\">Figure 13: Screenshot of Dev tag listing page" >}}
I've already written about how Series are managed with taxonomy, but since I've decided to make the series related pages a bit nicer.
The listing page hasn't changed much, except it also display the RSS icon to access the feeds for this list as well as an intro message. Same as for the vocabulary or term page, to add a custom content, create a content/series/_index.md file.
What I wanted to do on each series main page (pages listing posts from a series), was the ability to customize its content to add more information about the series itself.
To do so with hugo, you have to create a content/<vocabulary>/<taxonomyTerm>/_index.md file. For example, to customize the Frame.Work Laptop Setup series page, I had to create a content/series/frame.work-laptop-setup/_index.md file. The <taxonomyTerm> must be urlize.
It allows me to indicate if a series is still (potentially) ongoing (like the frame.work laptop one) or finished (like the homeautomation or previous homelab one - a new homelab series is coming though!).
For example, the homelab series page looks like this now:
{{< figure src="/images/posts/2024/03/homelabseries-after.png" caption="<span class=\"figure-number\">Figure 14: Screenshot of the homelab series page" >}}
Nothing crazy, but I have further idea for this usage, specially for the homelab 2023/24 series that is coming.
The Gemlog page has been updated to to add a small introduction. Same as above, I did it by adding a content/gemlog/_index.md file. It was already there but I re arranged the content. It also has the RSS, Fediverse and h-feed icons in the title like the blog post and bookmarks pages. I can now put a nice warning about Gemini and the needs of a dedicated browser:
{{< figure src="/images/posts/2024/03/gemlog-after.png" caption="<span class=\"figure-number\">Figure 15: Screenshot of the gemlog listing page" >}}
The static pages listing page has also been updated. Pages are no longer listed chronologically (no sense for those). The start of the page will show manually picked pages I want to put at the front. Then the list of all static pages is shown.
In a screenshot, before the changes:
{{< figure src="/images/posts/2024/03/staticpages-before.png" caption="<span class=\"figure-number\">Figure 16: Screenshot of static pages listing page before the changes" >}}
And after:
{{< figure src="/images/posts/2024/03/staticpages-after.png" caption="<span class=\"figure-number\">Figure 17: Screenshot of static pages listing page after the changes" >}}
I have updated the /ideas page, both in term of content and design. I've actualized the list of ideas based on last month changes.
In term of design, I've just added a way to go directly to each section of the page (via anchor links):
{{< figure src="/images/posts/2024/03/idea-after.png" caption="<span class=\"figure-number\">Figure 18: Screenshot of the /idea page" >}}
I did the same for the /uses and blogRoll pages.
I also updated the blog history page to show the new homepage.
As pictures are worth a thousand words:
Bio on home and about pages before:
{{< figure src="/images/posts/2024/03/bio-before.png" caption="<span class=\"figure-number\">Figure 19: Screenshot of bio on the homepage before the March update" >}}
Bio on home and about pages after:
{{< figure src="/images/posts/2024/03/bio-after.png" caption="<span class=\"figure-number\">Figure 20: Screenshot of bio on the homepage after the March update" >}}
listing items before:
{{< figure src="/images/posts/2024/03/listitems-before.png" caption="<span class=\"figure-number\">Figure 21: Screenshot of list element before late March update" >}}
List items now:
{{< figure src="/images/posts/2024/03/listitems-after.png" caption="<span class=\"figure-number\">Figure 22: Screenshot of list element after late March update" >}}
The difference is even more visible on phone (I don't have a "before" screenshot though…):
{{< figure src="/images/posts/2024/03/listitems-phone-after.png" caption="<span class=\"figure-number\">Figure 23: Screenshot of list element after latest March update on small screen size" >}}
The block quote wasn't easily visible:
{{< figure src="/images/posts/2024/03/blockquote-before.png" caption="<span class=\"figure-number\">Figure 24: Screenshot of the blockquote at the end of February 2024" >}}
But it is better now:
{{< figure src="/images/posts/2024/03/blockquote-after.png" caption="<span class=\"figure-number\">Figure 25: Screenshot of the blockquote at the end of March 2024" >}}
Regarding the light mode version, it went from:
{{< figure src="/images/posts/2024/03/lightmode-before.png" caption="<span class=\"figure-number\">Figure 26: Screenshot of the light mode at the end of February 2024" >}}
To:
{{< figure src="/images/posts/2024/03/lightmode-after.png" caption="<span class=\"figure-number\">Figure 27: Screenshot of the light mode at the end of March 2024" >}}
This concludes the updates I made on this blog theme this month, we'll see if April will be as productive (but I doubt it, as I believed I'm approaching a "final" state^^).
[^fn:1]: : Well, a hamburger menu without Javascript is doable, but only if you break accessibility. I didn't want neither to break accessibility nor adding Javascript to this site, so hamburger menu was a no go.