Basically, this file is a way for websites to vouch for the human authorship of others. It comes with a web extension you can install that will let you know if a site is vouched by another.

I saw a couple of people doing it and decided to jump on the bandwagon, as it is part of what inspired me to write about human websites before.

Some of the people I saw implementing this protocol were Axxuy, Naty and STFN, but I think the post that got me to pull the trigger was Neil’s.

Handling json is not very human friendly, it’s one of the many funny quirks about this protocol, but alas, it’s just a fun thing to do so, whatever.

For now, I simply created a humans.yml file inside my Jekyll’s _data folder, and created a human.json file in my root directory with the following Liquid template:

---
layout: none
permalink: /human.json
---
{
	"version": "0.1.1",
	"url": "{{ site.url }}",
	"vouches": [
		{% for human in site.data.humans %}
		{
			"url": "{{ human.link }}",
			"vouched_at": "{{ human.date }}"
		},
		{% endfor %}
		{
			"url": "https://examplefinalwebsite.com/",
			"vouched_at": "2026-04-03"
		}
	]
}

The humans.yml file simply looks like this:

- link: "https://example.com"
  date: 2026-04-03
- link: "https://example2.com"
  date: 2026-04-03
- link: "https://example3.com"
  date: 2026-04-03

and last but not least, adding a <link> tag in the HTML <head> section:

<link rel="human-json" href="/path/to/human.json">

Of course, having a YAML file that gets turned into a JSON file is not the best thing ever, but it’s easier to edit and modify on the fly, it only gets generated at build time anyway.

Given what this project entails, I’ve been a bit conflicted on what websites would make it to my own list. The obvious ones are easy, but those that are real people who used generated content in one shape or another, even if the rest is human-made are harder to decide for me.

Part of me wants to be kind of gatekeepy and leave out websites just because they use an generated profile pic, or thumbnail here or there, or maybe they have written a couple of articles about using an LLM to generate some code, or whatever.

But well, I’ve decided to just go by feel for those cases that are hard to pinpoint exactly.

Another word can be said about having to do all of this in the first place. That humans are the ones having to prove themselves, instead of websites being clear about using generated content.

In any case, the project seems very fun. It will probably not be a big thing in most websites, but alas, I don’t mind doing this and vouching for other people. I’ll try to keep it updated over time, and be sure to let me know if you find a site I link that isn’t as human anymore.

This is day 45 of #100DaysToOffload.

I wanted to add an “On This Day” kind of thing to my website for a while, but even though I have made almost 600 posts as of the time of writing, I still have plenty of empty days where I’ve not made a post.

A In any case, the solution was simple, do it by week and call it done. I found a post by Josh Beckman detailing how to do this by day. Using a similar logic, I made use of %V to get the week number and %G to get the year for that week—when a calendar week happens across different years.

You can find it live on my home page, and here’s a simplified version of it with just the basics:

{% assign current_week = site.time | date: "%V" %}
{% assign current_week_year = site.time | date: "%G" %}

<ul>
{% for post in site.posts %}
    {% assign post_week = post.date | date: "%V" %}
    {% assign post_week_year = post.date | date: "%G" %}
    {% if post_week == current_week and post_week_year != current_week_year %}
        <li>{{ post.date | date: "%Y-%m-%d" }} 
            <a href="{{ post.url }}">{{ post.title }}</a>
        </li>
    {% endif %}
{% endfor %}
</ul>

This is a live example of how the output looks like:

• 2025-10-16 I wanna do it but then I don't
• 2025-10-15 Hyper Light Drifter
• 2025-10-15 Rambling about Science Fiction books
• 2025-10-13 I did not play Silksong - W41
• 2024-10-15 I thought my email broke
• 2023-10-18 AMA Responses 1
• 2023-10-17 Just start blogging
• 2022-10-18 My Every Day Carry because why not

Improved music widget

Yesterday I was playing around with the ListenBrainz API—which I use to display my last song I listened to—and realized that there was a way to get the song currently playing instead. I implemented my original script a while back, but I got to work and modified it to get my currently listening song, and fallback to the latest one when nothing’s playing on my ears.

// fetch json file based on given url
async function fetchListen(url) {
	try {
		const response = await fetch(url);
		const data = await response.json();
		return data.payload.listens[0] || null;
	}
	catch (err){
		console.error("Unable to fetch", err);
		return null;
	}
}

function printHtml(container, content){
	container.innerHTML = content;
}

async function getListen(username) {
    // get html id to override later
	const container = document.getElementById('latest-listen');
	const currentUrl = `https://api.listenbrainz.org/1/user/${username}/playing-now`;
	const latestUrl = `https://api.listenbrainz.org/1/user/${username}/listens?count=1`;
	const current = await fetchListen(currentUrl);

	if (current) {
		const track = current.track_metadata.track_name;
		const artist = current.track_metadata.artist_name;
		return printHtml(container, `<b>Currently listening:</b></br>🎵 <i>${track}</i> by <i>${artist}</i>.`);
	}
	const latest = await fetchListen(latestUrl);
	if (latest) {
		const track = latest.track_metadata.track_name;
		const artist = latest.track_metadata.artist_name;
		const listenedAt = new Date(latest.listened_at * 1000); // Convert timestamp
		const dateFormatted = listenedAt.toLocaleString();
		return printHtml(container, `<b>Last listened track:</b></br>🎶 <i>${track}</i> by <i>${artist}</i>. <br>${dateFormatted}`);
	}
	printHtml(container, `<b>No music found</b>`);
}

getListen('joel76');

An upvote button

Naty shared how to have upvotes on a blog and I basically copy-pasted the entire thing. You only need to follow the setup instructions and it will literally just work.

You can find the upvote button in the comments sections of every blogpost! Feel free to click or tap on it.

The one downside is that it’s a third party service, but it’s so simple I can’t really come up with a reason why not to try it out. If it ever breaks or stops being supported, it won’t really be that big of a deal.

Anyway, those were a lot of changes done to my site for one week, I feel kinda cool about that. Feel free to borrow any of these ideas and make it your own.

This website has evolved and changed so much over time, I can feel the itch to start over creeping up, making it minimal while keeping as much of the features I got on it. Maybe a simple CSS overhaul will do the trick though…

This is day 42 of #100DaysToOffload.

I added the following button to the bottom of my articles! I made use of Jekyll’s Liquid syntax.

<a class="button" href="https://share.joinmastodon.org/#text=Check%20this%20blogpost%20by%20%40joel%40fosstodon.org! https://joelchrono.xyz{{ page.url | uri_scape }}" target="_blank" rel="noopener">Share on Mastodon</a>

You can find this line in use on my _includes/comments.html file—available on my git repo, where I also have my Mastodon-based comments section, just in case you are also interested on getting those set up on your static website!

Thought I’d make a shorter post for once. Could it just be part of my weeknotes? maybe, but I write whatever I want on my website. I actually realized this thanks to a short update post, not too different to this one, on Andreas’ website. Cool stuff!

Anyway, I should go back to playing CrossCode before the day is over, I have a bunny to catch.

This is day 28 of #100DaysToOffload

Honestly, more power to you, it is absolutely fine to be interested in trying new things, start something from scratch or turning everything upside down, just because you can.

Or, you know, maybe don’t?

I should mention this post was inspired by Ava who wrote a great article about just sticking with what you already have, so go give it a read! I think it helped me form some of the thoughts I share here.

As for me, well, I am always a work in progress, I guess. While stagnating forever is not ideal in many situations, there are some things where it’s perfectly fine to not try to fix what isn’t broken.

I’ve been only blogging for a little more than four years now, since I started in 2021. It’s not much compared to those who’ve been doing it for literal decades, but it’s not nothing either.

So far, I’ve managed to be happy with what I have. Jekyll to generate my site, Neovim to edit my files, and some shellscripts to automate stuff have been plenty for my needs.

Jekyll is one of the more traditional static site generators around, popularized because of its integration with GitHub pages and other hosting services, and because it’s simply really good at what it does.

It’s not the only option of course, and people adopt and switch around from one place to another. There are other SSGs like Hugo, Eleventy, Pelican, or Zola, and even CMS software like Kirby. There are also blogging platforms that take away the hosting and maintenance and let you just write, such as Bearblog, Pika or Pagecord, for example.

Despite everything, I’m still really satisfied with what Jekyll offers me. It has been a gratifying journey where I’ve created plenty of bash scripts, templates, key bindings, liquid snippets and even plugins to organize stuff exactly how I want it to. And once it was all setup, my blogging workflow has remained virtually unchanged, only with some small additions here and there.

Don’t get me wrong, there have been some hiccups here and there, when it comes to installing Ruby and running Jekyll locally, and when dealing with the Jekyll or Ruby version not matching the one set in the hosting service I use—it was usually my fault to be honest.

In the end, it’s still all leading to the same result. A static website built by uploading files to a GitHub repository.

If anything, some of my automation scripts are less used nowadays, because I have been editing my posts from my phone instead of my laptop, so all my fancy flourishes get skipped, but hey, the post gets published and that’s good enough for me.

I’ve felt the urge to switch things up from time to time, but if I ever feel that boredom creeping in, I am more than satisfied by creating a new website theme, cleaning up my existing stylesheet, or adding new pages. I think the moment I want to do something that cannot be achieved with Jekyll’s feature-set or a bash script, will be when I finally try something else, but that bar has not been reached so far, to be honest.

So, yeah, I think that the fun for me is in a couple things:

1. Just writing! - When everything is fine and good, I can just dedicate myself to writing, it doesn’t matter if it’s in my phone, or my own laptop with my fancy setup, or some other computer device, as long as I just write Markdown I don’t really care that much. Just publish the post to my website and trust I didn’t mess up a link or something. I can always fix it later anyway.

2. Working within limitations. - I have managed to achieve everything I’ve wanted thus far with my website. And sure there are things I haven’t bothered to try yet, like a search bar or a guestbook page. But I know there are ways to get them, I just need to take the time to set everything up, or not! It is my website after all.

In my experience, that’s what everything boils down to. Everyone sets their own bar wherever they want. Some find it easy to move to something else as soon as things get boring, or too difficult. Others just want to try new things, like how a Linux user keeps distro-hopping for years only to end up on Debian (or maybe Arch) in the end. And others, are up to the challenge, and are willing to stick with their choice and get familiar with it.

Obviously, there are some legitimate reasons to change platforms. Right now I’m pretty annoyed by the fact that my site is still primarily hosted on GitHub. I know of Codeberg and some other alternatives, but I haven’t gotten around to making the change, and I am not sure if Vercel, my current hosting provider even supports building my site from something other than GitHub.

In the end, I’ve been happy with my setup for many years, for the most part, and I barely have to think about it nowadays, I’m just focusing on creating new pages and redesigning existing stuff, but I have no urge to do any drastic changes. I actually kind of dread it, given the amount of templates/plugins/features that for better or worse lock me down to Jekyll, but at the same time, if it’s not an issue, I don’t need to worry about it!

We’ll see how everything goes.

For now, I’ll only do a quick list of multiple website changes I did this past week for the sake of cleaning up some stuff and making everything just a tidy bit better.

I already did one of these , but I guess that writing so much and using my website even more often kinda gets me inspired to fix all the little caveats I find here and there, which is pretty cool

A lot of the changes are pretty unnoticeable, but at least I know they are there, which is what matters.

Most of this is relatively non-sensical words if you are unfamiliar with Jekyll and static site generators, but it’s really not a big deal.

• Implemented microformats support for my main page and my articles.
• Turned the more section into a more.yml, placed it on the _data folder and used a for loop to generate it.
• Adjusted the CSS stylesheet so the more section looks like blocks instead of a regular list. Same class as the blogposts in the main page.
• Turned the navigation bar into a flex element, to make it more responsive, the gap between each list item is now equal.
• Added Blogroll and RSS to the navigation bar.
• Removed the whitespace in between the navigation bar list elements by doing the for loop in a single line.
• Fixed and cleaned up the RSS Feed’s XSL human readable structure which had been broken for a while.
• Made the avatar in my about page responsive.
• Fixed the blurry favicon issues with Real Favicon Generator.
• Added author and permalink to the bottom of the posts template.
• Fixed the IndieWeb Webring setup with some extra rel=me link elements.
• Added some more buttons on my blogroll, and removed some dead links.

I am probably missing a couple of things, but I am pretty happy with all these changes. No long explanations this time, I just want to go sleep and get ready for tomorrow!

A new week is upon us! and Blaugust2025 shall continue.

Sharing my last listened track!

I added a little bit of text to my landing page a long while ago, that shows the last song I listened to. This is done using the Listebrainz API and a small javascript function.

Again, this was already there but I never mentioned it anywhere so, may as well do it now.

async function getLatestListen(username) {
	const url = `https://api.listenbrainz.org/1/user/${username}/listens?count=1`;
	const container = document.getElementById('latest-listen');
	try {
		const response = await fetch(url);
		const data = await response.json();
		if (data.payload && data.payload.listens && data.payload.listens.length > 0) {
			const listen = data.payload.listens[0];
			const track = listen.track_metadata.track_name;
			const artist = listen.track_metadata.artist_name;
			const listenedAt = new Date(listen.listened_at * 1000); // Convert timestamp
			const dateFormatted = listenedAt.toLocaleString();
			container.innerHTML = `
	  <b>Last listened track:</b></br>
	  <i>${track}</i> by <i>${artist}</i>. <br>${dateFormatted}
	`;
		} else {
			container.innerHTML = `<p>No recent listens found.</p>`;
		}
	} catch (error) {
		console.error("Error fetching listen:", error);
		container.innerHTML = `<p>Failed to load latest listen.</p>`;
	}
}
getLatestListen("your_user");

Avatar in main page!

Yesterday I decided to add my pixeart avatar to my landing page, this was actually done in a pretty peculiar way that not many of you may know!

If you download the photo, you’ll notice it’s actually 64x64 pixels. If you copy and paste it anywhere, it will probably look super small, and as soon as you scale it up, it will get aliased and look bad.

I don’t remember where I discovered how to make small resolution pixel art render correctly, but the first time I did it was for the badges at the bottom of my website, so I just applied the same CSS to this.

This is neat because it lets me use a much smaller file, taking up less resources than a high res scaled up version of the same thing!

Simply add the following CSS and you should be good:

img {
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
    image-rendering: crisp-edges;
}

New webring!

I added myself to Polyring, a webring started by Dušan a long while ago. As of the time of this blog’s publication, I’m probably not approved yet, but well, it’ll get sorted out, right?

Fun thing, adding my avatar to the main page was actually an idea I stole from Dušan’s landing page as well, oops.

External resources vs a single file

Another change I did recently was loading a couple things I used to have hard-coded in the html of my website.

First, the logo used to be an embedded vector graphic in my header section, but now I decided to source the svg file instead.

The listenbrainz script used to be in the html too, but now it isn’t.

In theory, those things should get cached, making subsequent page loads faster. Especially if you navigate around on my static site a lot, having to download the html with the svg embedded every single time might be eating a couple kilobytes, but now that it’s just a file, it should be faster.

However, I’ve noticed that it keeps loading everything, almost as if it was getting redownloaded whenever I switch to another section of my website. I can’t figure out why, but if you have an idea of what might be causing this behavior (or, if it’s not happening for you at all), please let me know!

UPDATE: 5 minutes later, I discovered I only need to create a vercel.json file in my root directory with the following text, which should be changed according to the location of your static files and how long do you want them to stay cached (in seconds):

{
    "headers": [
    {
        "source": "/assets/(.*)",
            "headers": [
            {
                "key": "Cache-Control",
                "value": "public, max-age=2678400, immutable"
            }
            ]
    }
    ]
}

Thanks Amin for pointing me in the right direction!

A booklog update

For some reason I hadn’t updated my read books in a while. I am already reading Nemesis Games and last time my booklog still showed The Big Time at 56%! So, that’s fixed now.

Final thoughts

I keep wanting to make a more substantial website redesign, but I keep getting busy with other things, or just distracted, or playing videogames and stuff like that. Oh well, one day inspiration will strike, I’m sure.

For now, I still really like what I got going on, so, maybe don’t try to fix what isn’t broken?

At least I don’t have the itch to switch blogging platforms every two days like some people out there. 😉

Mastodon update, cool article author links!

So, Mastodon 4.3 just came out for Fosstodon, the instance I use and help moderate, and there’s now a pretty cool feature for bloggers and websites to display the Mastodon account of the author of articles and stuff!

So, I just added this line to my headers and let’s hope it works well!

<meta property="fediverse:creator" content="@joel@fosstodon.org" />

I haven’t tested this just yet, but this blogpost should work already! It was introduced earlier in the year, but it’s now available for everyone to try!

A spam wave is upon us

At the same time, a huge wave of random spam accounts started popping up, and I gotta thank the people in Fosstodon for reporting all of those accounts, I had a good time spamming the ban hammer on them, it had been a while since the last time I used my moderation powers so frenetically.

Changing my urls formatting

Another thing I did out of nowhere is change my permalink format to /date/YYYY-MM-DD-slug which is something based on a post by [Bix Frankonis] on url formats and SEO pandering. It’s a bit rambley and opinionated, but aren’t we all. But this line explains the main reasoning:

Blog permalinks should contain human-readable temporal data. It’s a hill on which I’m willing to die metaphorically.

All of my old links will still work, thanks to the super neat jekyll-redirect-from plugin, and to apply this change globally, I just had to add the following line to my _config.yml

permalink: /blog/:year-:month-:day-:title

For more information on formatting permalinks on Jekyll, you can check their website’s documentation!

New Switch games!

Ever since the article I wrote about my obsession with collecting Switch games I have acquired Castlevania Advance Collection, Dragon Quest XI S Echoes of an Elusive Age and Nintendo Switch Sports. I also pre-ordered the pysical edition of Balatro, Marvel vs Capcom Fighting Collection and Outer Wilds—which is already out, but I wanted it for the free shipping. I also ordered Pokémon Legends Arceus, Hades and Hollow Knight. As well as pre-ordering—via LRG I’m sorry 🤢—TMNT: Shredder’s Revenge Ultimate Edition and Castlevania Dominus Collection.

I have already played almost 2 hours of Dragon Quest and I have to admit I am pleasantly surprised by it. I have been making progress on Prince of Persia: The Lost Crown a lot this past week, I am close to beating it, and then I’ll probably focus on another Metroidvania to play alongside DQ.

Regardless, I have gotten too many games now, and I really need to stop. But I can’t! Mario & Luigi Brothership is coming soon!

This is day 79 of #100DaysToOffload

Turns out it’s very simple, just use the <progress> element! Pretty well documented on the MDN web docs to be honest.

Simply by using something like the following:

<label for="progress">Progress:</label>
<progress id="progress" max="100" value="70">70%</progress>

We get something like this!

Progress:

So, in order to add that to my booklog, I simply had to add a progress variable to the YAML file I use on _data/books.yml like so:

- title: "Leviathan Wakes"
  author: "James S.A. Corey"
  cover: "/assets/img/books/leviathan-wakes.jpg"
  start: "2024-09-19"
  end: "In progress"
  progress: 16

And of course, style the bar, which was a bit of a pain at least for the filled portion of it.

progress::-moz-progress-bar { background: var(--border); }
progress::-webkit-progress-value { background: var(--border); }
progress {
    color: var(--border);
    height: 12px;
    width: 80%;
    border: 0px;
    background-color: var(--bg);
    border-radius: 8px;
}

And in the end, we end up with something like this!

Book Progress:

Here’s the complete liquid syntax for my booklog section! The complete file including the CSS styling can be found on my GitHub repo.

{% if site.data.books %}
  {% assign books_by_year = site.data.books | sort: 'end' | group_by_exp: "item", "item.end | date: '%Y'" %}
  {% for year_group in books_by_year reversed %}
  <h3>{{ year_group.name }}</h3>
  <div class="responsive-grid">
  {% for item in year_group.items reversed %}
  <div class="book-cover-container">
  <div class="book-cover">
  <img class="book-cover" src="{{ item.cover }}">
  </div>
  <div class="content">
      <div class="info">
      <div class="title"><i>{{ item.title }}</i></div>
      <div class="artist">by {{ item.author }}</div>
      <div class="dates">Started: {{ item.start }}</div>
      {% if item.progress < 100 %}
      <div class="dates">
      <label for="file">Progress: {{ item.progress }}%</label>
      <progress id="file" value="{{ item.progress }}" max="100">{{ item.progress }}%</progress>
      </div>
      {% else %}
      <div class="dates">Finished: {{ item.end }}</div>
      {% endif %}
      </div>
      </div>
      </div>
          {% endfor %}
  </div>
  {% endfor %}
{% endif %}

Once again, you can see the whole thing in action on my booklog. Now I just have to remember to update it often!

This is day 76 of #100DaysToOffload

A series of events happened that somehow made me think I really should dedicate a bunch of time to modifiying my website structure once again.

I am not quite sure of what exactly triggered me to do this, but there are many things that made me keep going at it until today. Among them is sickness, and boredom and—Yep, pretty much that.

Last month I was PenPals with Kev Quirk and we exchanged quite a few emails, there I mentioned wanting to make my site more colorful and the like. I didn’t go that far just yet, but since Kev preferred a light mode, as well as many others, I decided to add one for my site.

I had a light theme months (maybe more than a year) ago, back when I was just using SimpleCSS with some colors changed and minimal changes. At some point—probably just to save some bytes of data or some random reason—I decided to get rid of the light colors and left the site with my dark Tokyo-Night based color theme. Regardless, it is back now for those who may need it! I am not the biggest fan of it, but it works well enough now—I think.

Another change that I made quite recently was trying to go for a more semantic use of HTML. I usually used <div> elements whenever I wanted not much, but more than I actually needed. This time I decided to go for a more proper approach. Still making use of them when necessary, but not as much as before. Thanks to Jekyll, just by modifying the base layouts I already had 99% of the work done, and only a some pages had to be changed by hand.

I created some new bits to make my site a bit flashier too, thanks to Flexbox I modified my homepage, my blogroll and my booklog to fit more content and have it wrap nicely.

Finally, inspired by the site Noisy Deadlines, I also went ahead to something I used to have before, which is a Monospace font! My personal choice this time around is IBM Plex Mono, its been a favorite of mine for quite a while and I quite love its italics.

Anyway, feel free to look around the site, I also added some breadcrumbs to the top section, right under the header, a move inspired by Benjamin Hollon’s site, that has gone through some changes as well recently!

Sorry for the delay between posts, as I’ve mentioned, I was a bit sick, and I am still a little bit. So, I am delayed with my writing, with work and also some commissions from my Ko-Fi page, so if you requested one from me, please have patience, I’ll get to it as soon as I can!

This is day 21 of #100DaysToOffload

However, I don’t see this as a failure, but as a way to keep improving myself, and something to write about in the process! So, I corrected the way I add a “reply via email (and fediverse) link” to each feed item, and also made my feed human-readable!

Adding Reply via Email (and Fediverse!) properly

Features such as includes and templates, can lead one towards the wrong path, and such was the case when I implemented email replies. I originally created an file in the _include folder, and I simply included it in every single article at the end, the contents of that file were hidden via CSS with display:none, it was a rushed and ugly way of doing this.

I decided to check what the rest of my friends were doing. And that’s where I noticed that in kevquirk.com’s source code for its Jekyll version, the feed.xml file was simply, a customized feed template that included the reply via email button at the end. In his case, he escapes the XML and pasted it directly:

<description>
{{ post.content | xml_escape }}
&lt;p style=&quot;font-size:1.3rem&quot;&gt;&lt;a href=&quot;mailto:{{ site.email | xml_escape }}?subject={{ post.title | xml_escape }}&quot;&gt;Reply to this post via email&lt;/a&gt;&lt;/p&gt;
</description>

I was using the jekyll-feed plugin for this, but I decided to change it for my own custom template too, but I am using the Atom format, instead of RSS 2.0. Since my current feed was using the Atom format, I didn’t want to break something by changing it too much.

As for the way I implemented the reply link, I went for a different—maybe more elegant—method, where I can still edit the proper HTML easily via an include, and capturing its output in a variable that I can then escape. Here is what it looks like:

<content type="html" xml:base="{{ post.url | absolute_url }}">
    {{ post.content | xml_escape }}
    {% capture replies %}{% include replies.html %}{% endcapture %}
    {{ replies | xml_escape }}
</content>

Now the end of every article contains a link to reply to it, just like on the website!

Customizing the look of my RSS feed with XSLT

Now, after doing the reply via email thing, I wasn’t feeling like only sharing a blogpost with one single website change that isn’t even that noticeable to begin with!

This is why I also decided to work on making my RSS feed human-readable, inspired by this post from Minutes to Midnight—although I recall seeing this applied on some other people’s feeds—I finally went ahead and tried XSLT templating!

This was quite a great excercise, but it proved to be harder than expected given the fact that Simone Silvestroni used RSS 2.0 like Kev. Therefore, I couldn’t just copy and paste—I had to find out how to apply this to my Atom feed. After some research online, it wasn’t that difficult—here’s what my template looks like now:

---
layout: none
title: rss feed | joelchrono
permalink: "/feed.xsl"
---
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet 
version="1.0" 
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:atom="http://www.w3.org/2005/Atom"
exclude-result-prefixes="atom"
>
<xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>
<xsl:template match="/">
  <html xmlns="http://www.w3.org/1999/xhtml">
    {% include head.html %}
    <body>
      <header>
        <center class="home-top"><a href="/">
            <svg width="80" height="60.5" version="1.1" viewBox="0 0 80 60.5" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(1.76 0 0 1.76 -2.4 -12.1)"><g fill="#a9b1d6"><path d="m36.9 6.84-0.79 4.5 2.77-0.913z"/><path d="m33.2 7.73 0.288 4.14 2.66-0.523z"/><path d="m29.9 9.46 1.1 4.2 2.5-1.79z"/><path d="m27.1 11.7 1.75 4.28 2.13-2.32z"/><path d="m24.8 14.5 2.6 4.2 1.4-2.68z"/><path d="m23.1 17.6 3.71 3.53v-3.15z"/><path d="m39.9 9.33a15.3 15.4 0 0 0-15 12.5l4.42-0.877a1.88 1.88 0 0 1 1.91 0.77 9.69 9.74 0 0 1 9.18-6.69 9.69 9.74 0 0 1 6.22 2.27l-0.345-6.53a15.3 15.4 0 0 0-6.38-1.4zm-15.1 17.7a15.3 15.4 0 0 0 13.3 13l-1.24-6.24a9.69 9.74 0 0 1-5.74-6.45 1.88 1.88 0 0 1-1.79 0.617zm21.9 5.15a9.69 9.74 0 0 1-3.22 1.78l-1.18 5.96a15.3 15.4 0 0 0 4.05-1.2z" stop-color="#000000"/></g><g fill="#9ece6a"><g stroke-linecap="round" stroke-linejoin="round"><path d="m30.1 23.6a0.792 0.792 0 0 0-0.792 0.792 0.792 0.792 0 0 0 0.792 0.792h7.69a0.792 0.792 0 0 0 0.792-0.792 0.792 0.792 0 0 0-0.792-0.792z" color="#000000"/><path class="a" d="m29.7 26.1-8.41-1.67 8.41-1.67z" stroke="#9ece6a"/><path d="m40.2 21.2c-1.75 0-3.19 1.43-3.19 3.18s1.44 3.18 3.19 3.18 3.19-1.43 3.19-3.18-1.44-3.18-3.19-3.18zm0 1.58c0.897 0 1.61 0.706 1.61 1.59 0 0.886-0.708 1.59-1.61 1.59s-1.61-0.706-1.61-1.59c0-0.886 0.708-1.59 1.61-1.59z" color="#000000"/><path d="m40.9 32.3a0.792 0.591 0 0 1-0.792 0.591 0.792 0.591 0 0 1-0.792-0.591v-5.74a0.792 0.591 0 0 1 0.792-0.591 0.792 0.591 0 0 1 0.792 0.591z" color="#000000"/><path class="a" d="m38.5 32.2 1.67 8.41 1.67-8.41z" stroke="#9ece6a"/></g><path d="m1.36 30.2v4.89l4.93 4.89v-9.77z"/></g><path d="m6.25 40h8.35v-4.89h-8.35z" fill="#739449"/><path d="m6.35 13.6h8.2v-4.89h-8.2z" fill="#739449"/><g fill="#9ece6a"><path d="m14.5 40h0.0928l4.84-4.89h-4.93z"/><path d="m14.6 8.74v4.89h4.93z"/><path d="m14.5 13.6v21.5h4.93v-21.5h-4.89z"/></g></g></svg>
        </a></center>
        <center>
          {% include navigation.html %}
        </center>
        <p>This is a web feed that can be viewed in the browser. <b>Subscribe for free</b> by copying the URL <code> joelchrono.xyz/feed.xml </code> into your RSS reader. </p>

        <p>Read how <a href="/blog/improving-my-rss-feed/">I improved this feed, and made it <b>human-readable</b></a>.</p>
      </header>
      <main>
        <h2><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 455.731 455.731" xml:space="preserve"> <path style="fill:#f78422" d="M0 0h455.731v455.731H0z"/> <path style="fill:#fff" d="M296.208 159.16C234.445 97.397 152.266 63.382 64.81 63.382v64.348c70.268 0 136.288 27.321 185.898 76.931 49.609 49.61 76.931 115.63 76.931 185.898h64.348c-.001-87.456-34.016-169.636-95.779-231.399z"/> <path style="fill:#fff" d="M64.143 172.273v64.348c84.881 0 153.938 69.056 153.938 153.939h64.348c0-120.364-97.922-218.287-218.286-218.287z"/> <circle style="fill:#fff" cx="109.833" cy="346.26" r="46.088"/> </svg> Latest 20 posts</h2>
        <xsl:apply-templates select="atom:feed/atom:entry[position() &lt;= 20]"/>
      </main>
      {% include footer.html %}
    </body>
  </html>
  </xsl:template>
  <xsl:template match="atom:entry">
    <article class="posts wrapper">
      <p class="blog-data"><a href="{atom:link[@rel='alternate']/@href}"><b><xsl:value-of select="atom:title"/></b></a></p>
      <div><xsl:value-of select="atom:summary" disable-output-escaping="yes" /></div>
      <small class="post-date">
        <!--Display the date in YYYY-MM-DD format-->
        <xsl:variable name="year" select="substring(atom:published, 1, 4)"/>
        <xsl:variable name="month" select="substring(atom:published, 6, 2)"/>
        <xsl:variable name="day" select="substring(atom:published, 9, 2)"/>
        <xsl:value-of select="concat($year, '-', $month, '-', $day)"/>
      </small>
    </article>
  </xsl:template>
</xsl:stylesheet>

You can check out how my RSS feed like in any browser! You will probably not be able to tell it is an xml file, but when you paste it into your RSS feed reader, it will be recognized like any other!

Final thoughts

The new features in my RSS feed are honestly quite simple, and seem pretty easy to achieve now that I put my mind into it. I wonder why didn’t I do this sooner. Now I have to go back and edit the last line of every single markdown file in my posts folder, containing the include I no longer need…

Or I can write a script, and then blog about that :P

This is day 14 of #100DaysToOffload

A thread by Molly White, ended up being the nail in the head where I decided to update my blogroll and make it better, adding context and a nicer design than before.

Anyway, I already wrote A TON of descriptions—around 30 or so—and also did quite a bit of HTML and liquid templating. So I don’t want to write much more right now.

Go check out my updated blogroll and feel free to check the source code of this website if you want to implement something similar on Jekyll! The important files are in the root folder (blogroll.md, and blogroll.opml), except for the one located at _data/blogroll.yaml

I hope the people who find themselves mentioned there have a chuckle with my descriptions, no harm is intended! Coming up with what to say, for the decent amount of sites that could simply have been “a random dude who likes tech and blogs about blogging”… let’s say that it was quite the task!

If you feel that I forgot you, PLEASE LET ME KNOW!, I edited a bunch and I tried to see if everyone was there but, sometimes things go unnoticed. If you’re there let me know what you think of your descriptions! I am quite interested in reading your thoughts.

This is day 12 of #100DaysToOffload

To kick things off, I will share how I fix the problems mentioned by Kev’s article, one by one! Here they are:

1. Easily insert links to my other posts
2. Drag & drop images into posts
3. Preview my posts without running a local server (I don’t care about this one)
4. Publish with a single command/button click

Inserting link to other posts

Following the same logic as Kev, as long as I have the link in my clipboard, I have these couple of lines in my vim config

nnoremap <Leader>3 ciw[<C-r>"]()<Esc>
vnoremap <Leader>3 c[<C-r>"]()<Esc>
nnoremap <Leader>4 ciw[<C-r>"](<Esc>"*pli)<Esc>
vnoremap <Leader>4 c[<C-r>"](<Esc>"*pli)<Esc>

These keybindings will add the Markdown syntax for a link. Be it for a single word (when in normal mode) or in selected text (in visual mode). Pretty handy!

Drag and drop images into posts

I already talked about this in a previous post, which happened to also be a response to Kev.

In short, I just right click the image from my file manager (Thunar), click the prompt in the right-click menu, paste my clipboard content on VIM, and call it a day.

The script does the following:

1. Prompt rofi to add a title/caption to the image
2. Optimize image using ImageMagick’s convert
3. Copy the image to my assets folder
4. Generate a WEBP version of the image
5. Copy the text to add it to my post easily

Here it is, in case you are interested.

#!/bin/bash

### AIJK (Add image to Jekyll)
### By joelchrono12

pic=$1
name=$(rofi -l 0 -width 50 -p "Title" -dmenu)
filen=$(echo $name | tr " ,.!" "-"| awk '{print tolower($0)}')
today=$(date +"%Y-%m-%d")
filename=($today-$filen)
path=/home/chrono/git/joelchrono12.ml #without / at the end
imgs=/assets/img/blogs/ #example = /assets/img/blogs/
#last_post=$(/bin/ls ${path}/_posts/*.md | sort -r | head -n 1)

convert $1 -quality 75 ${path}${imgs}${filename}.png
cwebp -q 85 ${path}${imgs}${filename}.png -o ${path}${imgs}${filename}.webp

#printf "\n![${name}](${imgs}${filename}.png)"
printf "\n{%% include img.html image='${imgs}${filename}.png' caption='${name}' %%}" | xclip -selection clipboard

The last line uses a Jekyll include, I commented a simpler version using regular Markdown syntax if you only need that. You can check why I use an include here.

If you want you can also check the full post about adding images to Jekyll, to learn how to use the script properly.

Single command publishing

As I stated, I don’t particularly care about previewing my posts in real time. So, how do I publish my posts with a single command?

Again, I already wrote about this a few times, but here’s my current implementation of the script:

It also shares my blog to Mastodon and gets the toot id to enable comments for that blogpost. You can learn how to add comments to your static site using Mastodon in this post.

#!/usr/bin/bash
# Run at root directory of website

# All markdown files start with YYYY-MM-DD
lastpost=$(/usr/bin/ls ~/git/joelchrono12.ml/_posts/*.md | sort -r | head -n 1) 
#getdesc=$(grep "description:" $lastpost | cut -d " " -f2-)
geturl=$(grep "permalink:" $lastpost | cut -d " " -f2-)
#gettags=$(grep "tags:" $lastpost | cut -d " " -f2- | sed -r 's/([^ ]+)/#\1/g')
post=$(echo -e "$1\n\nhttps://joelchrono12.xyz${geturl}")
posturl=$(toot post "$post" | cut -d/ -f5)
echo $posturl
sed -i "s/109938904113012486/$posturl/g" "$lastpost"

git add *
git commit -m "new post, with comments"
git push

exit

More tools!

Here is a link of different posts I’ve done to fix the following problems!

• Create new posts automatically
• Sorting tags by name and post quantity
• Quick tag editing
• Editing URLs (without breaking old ones)
• Jekyll collections
• Sort blog archive by month and year

I should probably make a tag for this specific topic, I haven’t done a great job separating these tutorials from the rest. For now, you can check the jekyll, coding and tutorial tags in case something interests you.

You can always check this website’s source code or message me in case you want help with something!

This is day 41 of #100DaysToOffload

UPDATE: For the sake of accessibility, I added a button that uses javascript to disable the animation. Other metods to do so without it are mentioned below

I spent so much time doing so many changes and fixes, that I am honestly too tired to do a proper explanation of everything I did. I was also so lazy that I worked on a single commit all the time just amending the changes I was doing on it. Don’t worry, I also did a good branch to test all the changes being done. I kind of want to figure out how to merge certain commits to a different branch and such, to, for example, move this article to a different branch but not move all the CSS and layout changes I’ve done.

Regardless, here are some of the changes I did in a simple list to call it a day and go mindlessly watch YouTube videos:

Background change

My background is now the Time Gate animation from Chrono Trigger. I googled a bit and found a very awesome HD version of it, which you can admire here:

This animation comes from what’s effectively a loading screen from Chrono Trigger, my absolute favorite game of all time, the only one I’ve completed more than once and will probably be played again this year, its kind of an unwritten law.

Anyways, that video, converted to a GIF or WEBP animation, would still weight a ton. Therefore I decided to compress it quite a bit. Thankfully, I managed to go below the 512KB required by my club. So there’s that. I am probably going to lose my Green Team badge though. I found a different GIF that is actually quite smaller, to less than 90KB, but didn’t like it as much.

I also did a button using this animation, a lot simpler, without my logo, but kind of sick if I do say so myself.

Thanks to a suggestion by Benjamin Hollon you will be able to disable the animated background using the @media (prefers-reduced-motion) CSS media feature.

Rest of changes

As you can tell, I redesign the blog layout quite a bit, now almost everything is going to be inside its own solid colored container, to not make it all unreadable due to the animated background. It took a bit of time to add some divs to some of my Jekyll layouts. But after it was over, it was over for good.

• Latest blogs will now show an excerpt of the content of the blogpost. its a bit more text, and I think it looks quite nice.
• The contact section is now divided in Instant Messaging and Social Networks, and I added a few more accounts of mine in there.
• I added a couple more programs to my uses page.
• I redesigned the top section of posts, with the published date, word count, reading time and tags. It’s more responsive and compact, its also adapted to smaller screens such as phones.
• In the footer, I placed the buttons a bit higher, removed links that didn’t make much sense or were replaced by a buttons.
• The layout of the section for articles from blogs I follow now includes an excerpt from the article in question.

There probably are some other small changes I forgot, but I think my site looks quite nice now. I may do even more changes in the future but I wanted to keep a similar layout and color scheme, because I still really like Tokyo-Night and how it looks. I feel like the background combines quite well with it, so I am happy with how it all turned out. I append a few images for you to compare the old layout with the new!

This is day 37 of #100DaysToOffload

But I literally only had to change like 2 lines of code, and I don’t even know when the changes will be merged, if they don’t conflict with whatever checks they do to see if the update was done properly.

Other than that, I have finally managed to receive some feedback via email regarding my blog!

Funnily enough, both of them were about some part of my blog being utterly broken.

The first one was my fault, it looks like I had some misstyped html in one of my Jekyll layouts, I had hfer instead of href and that stayed like that for months, and only now someone noticed. Thank you kind stranger! You even used a gpg signature and you have my respect!

The second email was about something broken with my tags. They’re usually located at my website in /tags/nameoftag, usually. But they were not there anymore. I just couldn’t figure out what was going out, until I decided to try and add .html to the end of the url, and there it was. For some reason the behaviour of my local Jekyll build and the one used by Vercel was different.

I use a Jekyll plugin (a ruby script which can be found in this site’s source code) to generate the files that eventually get populated with articles that match the tags they got. Thankfully, I just had to modify it a bit, so now it adds a permalink to the file metadata, and now it works just fine.

Still, I am so confused, since locally and in Netlify this problem did not happen at all. I got no idea.

Anyways, maybe in the future I’ll also talk a bit about how I contributed a package to Void Linux. Its absolutely nothing special, but I have to write about something after all.

This is day 8 of my second run of #100DaysToOffload

I had been showcasing a tag cloud in my home page for quite a while, I don’t know how many actually used it at all (let me know if you did please, I wanna know), but I decided to move it to my tags section, which has been there for a while. However, I also decided to try and sort them in a better way.

So far, I think jekyll sorted my tags in whatever order they were created. This was clearly not ideal for me.

I took my time to look around online and see other ways to do this from different blogs such as this one, (while writing this blog I came across another similar post). I found them kinda hard to understand so wrote this anyways. I think the code I found is kinda good but please, let me know if it can be improved!

Here’s how I can sort them alphabetically as well as based on the amount of posts each has.

Sorting by name

The following snippet will sort all tags by name and will also show the amount of posts they contain.

<ul>
{% assign sorted_tags = site.tags | sort %}
{% for tag in sorted_tags %}
{% assign t = tag | first %}
{% assign posts = tag | last %}
<li><a href="/tags/{{ tag[0] }}/">{{ tag[0]}}</a> has {{ tag[1] | size }} posts</li>
{% endfor %}
</ul>

Sorting by post quantity

This one was a little trickier, but still quite simple to do.

<ul>
{% capture tags %}
{% for tag in site.tags %}
{{ tag[1].size | plus: 1000 }}#{{ tag[0] }}#{{ tag[1].size }}
{% endfor %}
{% endcapture %}
{% assign sortedtags = tags | split:' ' | sort %}
{% for tag in sortedtags reversed %}
{% assign tagitems = tag | split: '#' %}
<li><a href="/tags/{{ tagitems[1] }}/">{{ tagitems[1]}}</a> has {{ tagitems[2] }} posts</li>
{% endfor %}
</ul>

Finishing up

So, that’s it. Did you expect me to explain it? This is not original material, I understand the first one maybe but I do not know what the plus: 1000 does on the second snippet nor anything in that line. Regardless, it works just fine for me to be honest and perhaps it could work for you.

I still find Jekyll to be quite enjoyable, it seems to me like most blogs nowadays are either Hugo or plain old WordPress. Maybe its just my own bias and its nothing like that.

Besides, Void Linux itself, the one above all, uses Jekyll. Therefore, I will do my duty and stay loyal to it… until I get bored, or something.

Also, this is gonna be day 3 of my second run of #100DaysToOffload, always has been.

So I decided to keep both webp and jpg files available. I am not sure of what makes a browser choose one over the other. For now, I pretty much copy pasted the solution used by Simone on his blog, I only added some code to support .gif files, since WebP supports animation too.

Implementing this was not difficult at all. I created a file inside of my _includes folder containing the following template:

<figure class="{{ include.class | default: 'img' }}">
  <picture>
    <source srcset="{{ include.image | replace:'.png','.webp' | replace:'.jpg','.webp' | replace:'.jpeg','.webp' | replace: '.gif','.webp' }}" type="image/webp">
    <source srcset="{{ include.image }}" {% if include.image contains '.jpg' or include.image contains '.jpeg' %}type="image/jpeg"{% elsif include.image contains '.png' %}type="image/png" {%elsif include.image contains '.gif'%}type="image/gif"{% endif %}>
    <img class="mx-auto" src="{{ include.image }}" alt="{{ include.alt | default: include.caption }}" {{ include.width ? include.width | prepend: 'width="' | append: '"' }} {{ include.height ? include.height | prepend: 'height="' | append: '"' }}>
  </picture>
  {% if include.caption %}<figcaption class="caption">{{ include.caption }}</figcaption>{% endif -%}
</figure>

Now all I have to do when using an image in a blogpost is provide both a webp and a jpg/png/gif file with the same filename, and use the following template:

{% include img.html image="/path/to/assets/image.jpg" width="512px" alt="Alternate text" caption="A caption" %}

I was already using Jekyll’s includes for a lot of things, such as the comments system, the articles of blogs I follow and other things. Its a really powerful tool that I quite like. However, editing each existing file could take me a long time. I actually did a poll on mastodon to see what people would do. As of the writing of this post, most people say they would handle this by hand. And, to be honest, that’s kinda what I did, but I had some tricks up my sleve.

Vim macros to the rescue

Using macros with Vim is simply fantastic, I took a while to mention them, for some reason, all I had to do was implement 2 macros for the different kinds of markup I’ve used. Be it plain markdown (![title](source)) or plain html (<figure><img></img><figcaption></figcaption></figure>). There were a couple of edge cases, like when I included links inside of the captions and such.

There are many examples and videos that talk about doign Vim macros, so I will just share some videos of how they worked out.

For Markdown, I pretty much look for ![ and then used Vim keybindings to go word for word w, to the end of the line $ and such, rinse and repeat.

The steps to make a macro for HTML were a bit more complicated, but doable nonetheless.

My macro had some problems, since I was doing dt" to delete the contents of something until a quote showed up, along other similar things, adding a link to a figcaption broke my macro in a couple cases. But other than that, it worked alright. I also had to run my macro from a certain position relative to the HTML, or else other things would not work properly.

I guess doing macros is pretty much its own artform, I’ve seen some uses for them that blew me away. If you have not used them for anything before, you might want to give them a try next time you script something!

Finishing thoughts

If I am honest, I still don’t know how I feel about it making use of includes in this way, since making the changes here was kinda annoying. But, thinking about it, it only took me like half an hour to do. I don’t know, maybe simply using something like xclip or xdotool to quickly access the plain HTML template would be a lot better to keep my markdown platform agnostic. I will think about it, but for now Jekyll is still my platform of choice.

Converting images to WebP

I decided to fix that today, by installing the WebP tools provided by Google, and available in some repos (not Fedora, for some reason) and with some very simple bash scripts which pretty much did this:

$IMGFILES="/path/to/assets"
$POSTS="/path/to/posts"

for f in $FILES
do
  echo "Processing $f file..."
  # take action on each file. $f store current file name
  .jpg -q 85 "$f" -o "${f%.*}.jpg";
  #cat "$f"
done

sed -i 's/.jpg/.jpg/g' $POSTS/*
sed -i 's/.png/.jpg/g' $POSTS/*

I would not recommend running this script. I actually had to take care of some posts that mentioned .png or .jpg somewhere without actually using an image, such as other scripts and stuff like that. I also had some images that were in other subfolders and such, so this took a couple extra minutes.

It really was nothing special though, the changes were done pretty quickly and now my website is overall lighter than before, which I guess its a good thing.

I was quite inspired by this post by Bradley Taunt, so go check him out too, although you probably already know him if you are into web development and such.

Enabling Code Highlighting on my website

Also, as you might have noticed on the code snipped above, I finally got code hightlighting to work. I had enabled it a long time ago, since its not really a hard feature to add to Jekyll, but all this time I never bothered to setup the CSS file, since I could not find one available, even though there are other ones. But I came across this repo and got it working, I had to pip install pygments and then run the instructions in the repo. To generate the CSS file I also ran this:

pygmentize -S nord -f html -a .highlight

You can pipe that into a CSS file, or paste it to your already existing file if you are lazy like me.

I am so happy I took the time to do this since now my coding blogs are going to look a lot better, which is awesome. Sadly I have to manually check which code snippets do not define which language is used, since those are not gonna get colored. That’s a job for future me, I guess. If you check any post without syntax highlighting let me know by contacting me!

https://joelchrono12.xyz/2022/06/23/change-urls-without-breaking-old-links-in-jekyll.html

However, by setting a permalink in the yaml metadata, I can simply have something like:

https://joelchrono12.xyz/blog/change-urls-without-breaking-old-links/

Which is shorter and easier to type.

However, before doing my rofi script for automatic post creation I initially created my markdown files by hand, and I didn’t really had a format to follow, some of my posts had /blog/post.title, others had no permalink set at all, and others just had /post.title.

This means that the generated static files are all over the place, and I kinda wanted to clean that up.

The solution is really simple. I just installed the jekyll-redirect-from plugin. After reading the README in their repo, I realized this was exactly what I needed. I won’t really explain it here since its fairly easy to do, but feel free to ask me if you feel like it.

You can test out how the plugin works on my website, here are some of the old URLs that should now redirect you to the new one. You may also find some of those old posts of mine kinda interesting too!

• A comparison on Newpipe and Youtube Vanced
• Privacy focused browsers for Android
• Asking for forgiveness for small things
• Changing my Android custom rom

Even in those old articles I link to some more posts that are still using a different format, which will be redirected too. If you found this useful please let me know!

I have been working for my University during the last few months, but I don’t really have to do a lot of the time, so I recently picked up on my oldest hobby, origami.

I love origami, and I’ve been meaning to talk about it almost since I started this blog, but I’ve not put much effort into even trying. But since I had done quite a lot of folds lately, and had already taken a bunch of pictures of them, all I had to do was put them together and organize them a little bit.

This is not a tutorial, Jekyll’s documentation is pretty decent on this topic, so I’ll just share the small changes I did for my use case.

My _config.yml file had these lines added

collections:
  origami:
    output: true
feed:
  collections:
    origami:
      path: "/origami.xml"

I am using the jekyll-feed plugin, which should already be used by your blog if you provide RSS feeds!

After doing those changes I created an origami.md file in my website’s root directory that served as a template. It has some metadata that is not really that important but this is the main thing. You can always access my website’s source code too.

<div>
 <table>
  <tr>
    <th>Model</th>
    <th>Author</th>
    <th>Tutorial</th>
    <th style="text-align: right">Photo</th>
  </tr>
{% for origami in site.origami reversed %}
  <tr>
    <td><a href="{{ origami.url }}">{{ origami.title }}</a></td>
    <td><a href="{{ origami.creator.site }}">{{ origami.creator.name }}</a></td>
    {% if origami.tutorial %}
    <td><a href="{{ origami.tutorial }}">Yes</a></td>
    {% else%}
    <td>No</td>
    {% endif %}
    <td style="text-align: right"><img width="210px" src="{{ origami.image }}"
    alt="{{ origami.description }}" title="{{ origami.description }}"></td>
  </tr>
{% endfor %}
</table>
</div>

Now all I had to do was create files inside a directory named _origami, add some metadata in YAML format, in between dashes, and call it a day. Like the following example.

layout: origami
header: Owl by Nguyễn Hùng Cường
title: Owl
creator:
    name: Nguyễn Hùng Cường
    site: https://www.flickr.com/people/blackscorpion/
tutorial: https://youtu.be/DExjwwnKCAY
date: 2022-05-05
description: "An Owl with a great 3D look, really smooth and clean looking."
image: /assets/img/origami/owl_nhc.jpg

So, anyways, its pretty simple to do. I wanted to get back into writing since it had been a while, so this is pretty much it. Thanks for reading!

The script comes as a request by Ru, or at least this is what I hope she meant when she posted:

Static site users who embed images frequently – what’s your workflow for it? #AskFedi

Well, my previous workflow was simple enough:

1. Take pictures.
2. Move to assets folder.
3. Rename them to something like $date-$filename_without_spaces.png.
4. Add markdown syntax and type the whole thing.
5. Cry because you messed up the directory path.

So I went ahead and decided to work on a little script I named aijk (Add image to Jekyll), using bash and rofi, tools that I’ve used before with decent success. I am actually really happy of how it turned out.

The script

#!/bin/bash

### AIJK (Add image to Jekyll)
### By joelchrono12

pic=$1
name=$(rofi -l 0 -width 50 -p "Title" -dmenu)
filen=$(echo $name | tr " ,.!" "-"| awk '{print tolower($0)}')
today=$(date +"%Y-%m-%d")
filename=($today-$filen)
path=/path/to/website #without / at the end
imgs=/from/site_root/to/assets/ #example = /assets/img/blogs/
last_post=$(/usr/bin/ls /path/to/markdown/files/*.md | sort -r | head -n 1)

convert $1 -quality 75 ${path}${imgs}${filename}.png

printf "\n![${name}](${imgs}${filename}.png)" >> $last_post

How to use

Once added to your $PATH and making it executable, all you need is to change the required paths in the script, I think most of you will be able to figure it out on your own, but reach me out if you need help.

You can run it just by doing this:

aijk file.png

This is how it works:

• Obtain picture file from argument.
• Add a Title to file via a rofi input.
• Create filename for file itself.
• Set paths to different required things (depends on your site).
• Get the latest markdown files from your site.
• Make changes to picture so its smaller or whatever (can be customized, requires ImageMagick).
• Print formatted markdown line to bottom of the latest markdown file.

Adding a Graphical option for mouse users

You can run this script with absolute ease from your terminal, if that’s what you want, but I also figured out a way to do it from a GUI if you are using Thunar as a file manager (might be possible with others, haven’t checked).

1. Open Thunar > Edit > Configure custom actions.
2. Add a new entry for aijk and save it.

1. Set the appearance conditions to images only.
2. Right click on any image to try it out!

Final thoughts

I am not completely happy with how this works. But this is usable and easy to expand, there could be a way to select the destination file instead of just getting the latest one. But I don’t normally add new images to old posts anyways, so I figured most people would be ok with how this works right now.

The script also assumes you want to start all your files with the date, and that your markdown files also start with the dates, since sort will fail to place the line in the latest file, if such file is not the first in its output.

There is also no way to do this with multiple files as of now, I might be able to come up with something, I could just create another script that makes use of this one to make multiple additions at once.

Anyways, this is what I’ll do now to add images, I will simply right click, click again and give them a name!. Or do it properly in the terminal, whatever fits me best.

This has been day 95 of #100DaysToOffload. Make sure to check out Ru’s website, since she single-handedly managed to inspire me to work on this quick script.

NOTE: This is actually day 96, from here it all went wrong. If you don’t understand this note, [read here]