Some tweaks to the blog

This week and the past one I felt like I didn't want to write, and that's ok. I didn't open this blog in order to create content for people, but for myself. However, I still wanted to play around with the website and see if I could tweak and implement stuff that I saw around the internet. Here are some changes I implemented.

Tweaked dates in post lists #

Instead of only the month, now the blog list on the Homepage and in the Archive shows the day too. It makes more sense to me.

Reply via email button! #

I firstly saw this on Kev Quirk's blog and I liked the idea. It is an easy and clean implementation without the need for a comment engine or a database. I tried to style the reply button to be more in line with the overall style here. You can see it at the end of this page, for now it's pretty neat!

p.s. the post footer was also a bit tweaked to better highlight the next/previous post section.

Visual hint for current page on footer #

This was only implemented on the header in the eleventy starter blog through this:

<ul class="nav">
{%- for entry in collections.all | eleventyNavigation %}
    <li class="nav-item"><a href="{{ entry.url }}"{% if entry.url == page.url %} aria-current="page"{% endif %}>{{ entry.title }}</a></li>
{%- endfor %} 
</ul>

The process through which I was adding elements to the footer before was manually listing the pages that I wanted there. However in that way I could not add an active navigation state easily to the visited page (this solution did not work for me).

The answer was simpler than I thought, since the <li> elements were added in the header through an Eleventy Collection, I leveraged those specifically. I added a tag header for pages that will go in the header, and footer for pages that will go in the footer, and then changed the code above to only get collections.header or collections.footer like this:

<!-- Footer -->
<ul class="nav">
{%- for entry in collections.footer | eleventyNavigation %}
    <li class="nav-item"><a href="{{ entry.url }}"{% if entry.url == page.url %} aria-current="page"{% endif %}>{{ entry.title }}</a></li>
{%- endfor %}
    <li class="nav-item"><a href="/feed/feed.xml">RSS</a></li>
</ul>

Side note: since I was creating two new tags I also had to avoid showing them in the Tags page. I did this by editing the eleventy filter already present in eleventy.config.js:

eleventyConfig.addFilter("filterTagList", function filterTagList(tags) {
  return (tags || []).filter(tag => ["all", "nav", "post", "posts", "header", "footer"].indexOf(tag) === -1);
});

I like this solution! now if I want to add/remove elements from the footer or headers, I just need to edit the tags and they will update automatically.

Uses page #

Finally I managed to take the time and populate my Uses page! While this is technically done by developers, I still think it might be useful to have one.

Style tweaks #

I tweaked some css-related stuff. I did not account very much for dark mode in the beginning. I tweaked some colors before but I forgot the svg icon in the header, which until now looked like this:

desc

Now it should look better with a rounded white background (the laziest solution, I know). I also darkened the blue a little bit to be less bright, the picture below doesn't really do justice but the text is still clear imho.

desc

Meta #

Other minor miscellaneous changes

Future tweaks #

There are other things I want to try in the future. For example, I don't really like the absence of a copy button on code blocks. However, for now, all the implementations I saw, are a bit beyond my current knowledge of javascript to implement them in a reliable way.

Reply by email
Back to top