I told @rb that I would focus first on posting on my blog before customizing it. Then I proceeded to focus on customizing my blog. I guess old habits die hard.

Well, at least I can write about how exactly I customized my blog.

The Changelog

Webmentions

For now, this blog has very basic webmention-receiving support, powered by Webmention.io. It's been a long time since I dabbled in Indieweb coding, so I have to refresh my knowledge before doing anything fancier.

Footer

This took me the longest to code, since I changing my mind on how it should look.

First, I wanted to use the icons that appear in omg.lol profile pages. After some digging around in source code, I figured out how to call the icon sheet:

/* Declare this under <style> in your HTML */

@import url('https://omgalol.cache.lol/profiles/icons/omg.lol-icons.css');

... then I decided to remove all the icons, for a reason I'll explain later.

I also added my copyright notice, links to my blog's feeds, and a link to the blog's git repository.

Second, I wanted to make the footer my Indieweb h-card. I also made sure that my h-card was backwards-compatible with hCard as well.

(Side note: I also marked up my omg.lol profile page so it's also an Indieweb h-card.)

Finally, I used Indiewebify to check that my h-card works! Technically, it's a representative h-card, but semantics.

Goodbye, fonts and icons

While I was designing my blog, I remembered that the 512kb Club is a thing that exists:

The 512KB Club is a collection of performance-focused web pages from across the Internet. To qualify your website must satisfy both of the following requirements:

1. It must be an actual site that contains a reasonable amount of information, not just a couple of links on a page (more info here).
2. Your total UNCOMPRESSED web resources must not exceed 512KB.

Additional details can be found in their FAQ.

The idea is to show that it's possible to create meaningful websites without huge images, fancy fonts, elaborate animations, and mysterious scripts.

Then there's sourcehut, which follows brutalist web design, as explained by its developer, Drew DeVault. For someone who came from Codeberg, sourcehut's design takes some time getting used, but I found it less distracting and more pleasing to the eyes.

Drawing from these inspirations, I made it a personal challenge to make my blog as small as possible while keeping a simple aesthetic. That means stripping all calls to external fonts... and icon sheets.

Instead, I use web-safe fonts that should work in all devices. (Except Linux, because it's a cool OS that lets users decide their own system fonts.) Sorry, @adam, the default weblog.lol fonts were lovely.

/* Sans-serif fonts */

font-family: Verdana, Tahoma, 'Trebuchet MS', Arial, sans-serif;

/* Serif fonts */

font-family: Georgia, Palatino, 'Times New Roman', serif;

/* Monospace fonts */

font-family: 'Courier New', monospace;

I also removed all the icon markup I carefully coded earlier, so links to my online accounts are now simple text instead of icons. Sorry, Past Me.

My biggest challenge... was my profile picture in the footer. I researched online, but couldn't conclude which image format was the best for websites. I also had to resize my profile picture from 800px to 100px. Thus, I decided to just test the four most common image formats: PNG, JPG, SVG, and WEBP. WEBP contributed to the smallest website size while still looking good at 100px, so I went with that.

As of this writing, my blog in ~108kb uncompressed. The minimalist aesthetic reminds me of WriteFreely, and I really like it.

Dracula theme and accessibility

I first discovered Dracula when I was looking for a decent colorscheme for vim. Ever since then, I've used it in any software that it supports. That includes my blog, but in this instance, I have to set the colors myself. Fortunately, Dracula has a color guide that I've bookmarked.

Then I remembered a blog post (about sourcehut again) that I've read before, and realized that I also wanted to make my blog more accessible. This will probably take me much longer to implement while I'm still reading about web accessibility standards. So far, I've used Are my Colours Accessible? to check which combination of Dracula colors are best for visual acuity, but in the future, I'll do more than that.

Templates

Adam wasn't kidding when he said templates were powerful. Reading the weblog.lol documentation and the weblog-related posts from the 2022 25 Days of omg.lol, I managed to configure a post template with automatic h-entry markup (and hAtom backwards compatibility), as well as a draft template that asks for a custom slug and tags.

If you check my previous blog post using Indiewebifyme, it will report that the h-entry markup works. (Well, if you ignore it asking that I put another h-card inside the h-entry, or about missing POSSE links. I don’t know yet why it’s asking for the former, and I haven't figured out a way to automate the latter.)

Nostr

Yes, I have a Nostr profile. No, I won't tell you what's my public key, because I don't use that profile at all. I think the concept is cool, but I haven't had the time to find a relay that's not full of crypto-spam.

However, I did get interested in verifying my Nostr profile, so I quickly whipped up .well-known/nostr.json on my blog. It didn't work at first, and took me a while to figure out why... because I copied code that used fancy quotation marks! Anyway, I fixed the code so the verification thing works. Just take my word for it.

WebFinger

I didn't plan this, much less know that it existed, until I stumbled upon James Tomasino's post on using a custom domain for Mastodon discovery. But I thought it was a cool feature, so I wanted to implement it in my blog.

I used MastoGuide's guide to generate the appropriate code for /.well-known/webfinger and /.well-known/host-meta using my blog and my Mastodon account. Fortunately, weblog.lol supports serving files, as long as they're writable in plain text; I just had to set the appropriate metadata. But I had to read the specs on WebFinger and Web Host Metadata first so I could declare the correct media content types for the files.

I'm happy to report that it works now — you can try searching darylsun@blog.darylsun.space in Mastodon.

Link previews

This was another surprise, as it took me a while to realize that Discord not showing link previews was not Discord acting weird again. I compared my blog with other blogs powered by weblog.lol, and realized that the HTML meta property tags for my blog were missing.

Reading the specs of the Facebook Open Graph protocol and Twitter Cards was not on my web development bingo card, but they helped me set up working link previews for Discord.

Future plans

• Add /about and /links to my blog in the future. I thought that my omg.lol profile page looked cluttered, so I removed the status widget and my extended bio. /about will be something similar to a personal user guide, while /links will contain descriptions for my contact and social media accounts.
• Finish setting up /uses. I need to finish noting down my setups first.
• Learn how to sign my posts and pages with PGP. I haven't figured out how to integrate this with my current blogging setup.
• Use Bridgy to cross-post links to my blog posts on my Mastodon account. Bridgy's documentation confuses me so far; for now, I'm cross-posting manually.

Other Shenanigans

Yes, I also do non-blog-related things.

• I got a Bluesky invite, courtesy of @taurean. After setting up my profile, I made my first post and immediately got followed by random strangers and bots. If this is Bluesky's way of welcoming people, it had the opposite effect on me. Nope, thanks.
• Daniel Supernault, Pixelfed's lead developer, recently announced that Pixelfed will soon support reblogs. A decade of Tumblr flashed before my mind's eye. No, I didn't go and get a Pixelfed account... yet.
• I'm trying to comment on Lemmy more, though currently I'm sticking to Beehaw's local communities. I consider myself nice, but there was a recent thread on the lack of engagement on the main Lemmy instance, and I... may have sassed someone in the comments. (If you're wondering why one of their comments is gone, it's because the mods deleted it for violating Beehaw rules.)

Well, I think that's the most notable things of this week. See you all next time!