Porting my Blog to Folium

My blog originally ran on Zensical using GitHub Pages for hosting.

Well... times have gone by. I still really like Zensical but I kinda want to redo this myself. I want it to feel more... well... handmade, really.

Also, I recently started using Obsidian (with syncthing keeping it on my Pi and my phone as well), and I think it would honestly be better for me if I could author posts from there. I'd also be able to author them much more frequently, if I did.

In any case, I decided that first I'd want to write my own SSG first.

Note that this is heavily inspired by vale.rocks, do check out his design and implementation posts if you have the time.

So I decided to think about some names. If you know my previous projects, you might know that I like to choose names that kinda make sense and almost tell you what a project is/does, but also still carries a meaning.

After a bit of research I chose the name: Folium. Which is Latin for "leaf". I mean, in this context, I would say it represents the leaves of a book? Like articles in a blog? I dunno. I'm not one for semantics. Let's get into the actual SSG instead then.

Folium is on GitHub at uukelele/folium.

Anyway, I decided to design Folium to interoperate heavily with Obsidian, such that it's incredibly easy for me to author my blogs in Obsidian, so I decided to support the same markdown features that Obsidian allows.

So Folium is built with Typer, FastAPI, Pydantic, ...ok let's not go there^[1]. Maybe... this is how folium works.

There is a CLI with some commands - folium new, folium serve, folium build, etc.

folium new creates a folium.yml file in the current directory and then interactively asks you for some things to set up the file.

Blogs are Different

Folium is... incredibly opinionated.

This is because every blog is different.

Some people want their blogs to run in the internet browser of a PS2, serving static HTML and no JavaScript. Some people want an RSS feed. Some people want a search functionality. Most people want markdown rendering, but everyone wants different flavours. Some people wants comments, but nobody can agree on which system to use. Giscus? Disqus? And what about third-party integrations, like the Town Square below?

As you can see, there's a lot of thought that goes into making a blog feel like yours. Folium doesn't do that. To put it simply, it makes a blog feel like mine. (That's why I use it.)

The Now Section

I'm really proud of the Now section.

Really proud of it.

It has:

• Auto-updating "last seen online" timer.
• Auto-updating Discord status
• Auto-updating Discord profile
• Auto-updating local time & weather @ my location
• Auto-updating recently played music list
• Auto-updating mood, basically a status page of sorts for me right now.
• Auto-updating "now playing" section with real synced lyrics, so you can see what I'm hearing in real time.

Half of this is only possible thanks to {{ lanyard // lanyard }} by the way, huge thanks to them.

I mean, what more could you ask for? Short of an Auto-updating track-my-screen-in-real-time feature, this is probably more information than most would ever need. But it's cool, so I have it.

Oh, and fun fact, most of these live updates are sent out by a little script running in my waybar. I previously shared this script publicly, but the one I'm using right now has a few tweaks and modifications to connect to a music scrobbler and lanyard's REST API. I tried using mpris-scrobbler for a bit, but it just didn't work for me. It was very flaky and I had to restart the process each time I played a new song.

But what I'm not proud of, is the frontend that implements it. It's a mess. That's because Folium lets you leave <script> tags and I kinda messed around with it, and before I knew it I had some massive script tag calling 50 async IIFEs and adding eventListeners to lanyard:kv on the window.

I plan to add features to Folium to clean this up later.