💾 Archived View for gmi.bacardi55.io › blog › 2024 › 03 › 24 › march-blog-update captured on 2024-08-24 at 23:55:03. Gemini links have been rewritten to link to archived content
⬅️ Previous capture (2024-05-10)
-=-=-=-=-=-=-
Posted on 2024-03-24
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:
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:
And now:
If you don't want to play 7 difference, changes are:
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:
And now:
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:
After:
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[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:
To:
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:
To:
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:
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:
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:
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:
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:
And after:
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):
I did the same for the [/uses] and [blogRoll] pages.
I also updated the [blog history] page to show the new homepage.
updated the listing page earlier this month
As pictures are worth a thousand words:
Bio on home and about pages before:
Bio on home and about pages after:
listing items before:
List items now:
The difference is even more visible on phone (I don't have a "before" screenshot though…):
The block quote wasn't easily visible:
But it is better now:
Regarding the light mode version, it went from:
To:
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^^).
Footnotes
_________
[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.