Colophon

Following the guide from IndieWeb for what a Colophon page includes, I’ll do my best to lay down how I’ve set up my side of the internet.

Website repository

The code for this website can be found on Github.

Website Icon

The favicon is a red (#681310) squircle with my nickname on it using the font Anybody for the letter C and Victor Mono for the letters hi. The letter spacing for this is also adjusted so all letters are neatly put together in the middle.

Website Fonts

The heading font used is Anybody and the body font is Victor Mono. Both fonts are loaded into my website using Fontsource.

Website domain

chisenires.design is a domain bought on Porkbun back in 2021.

Tools

Framework

This current website is built with Astro, using the base blog as a template and then re-implemented the styles and overall implementation from chi-11ty. Some weren’t kept for now, like the Blog Stats page as that was using a plugin that was built specifically for Eleventy.

My old website used to be hosted on Micro.blog but I’ve since moved away from it since I wanted to save up on subscription costs, and paying with USD does hurt after paying enough times 😅

Hosting

This website is also hosted on a self-hosted instance of Coolify. Please do not ask me anything about this, my boyfriend was the one that set it up for me 😅 (and yes, this does have a subscription cost to it too but it feels less negligible since it’s paid yearly and I share the costs too :)) )

Metadata Thumbnails

For the auto generated thumbnails, I use Cloudinary (this is a referral link!). I initially wrote about in this post when I was still on 11ty, but I’ve now discovered that Cloudinary has an integration with Astro after seeing these docs!

Toggling dark-mode

For the dark-light-switch, I use the ThemeIcon Astro component after also copying implementations online on how to do this with CSS and the littlest JavaScript possible.

Webmentions

For webmentions, I wrote about my initial experience in setting them up in this blog post. As for the setup, based on how I understood it, I make use of the webmention npm package and also followed the instructions laid out in webmention.app docs.

Since migrating to Astro, I’ve mostly reused the same JavaScript code from my previous 11ty implementation, but now I understand more the moving parts:

• @utils/webmentions.js — This is where the main actions happen, and is what fetches the data.
• @utils/webmentionFilters.js — This is where the functions to process the stuff pulled by webmentions.js and rendered in the Astro components are placed.
• @components/WebmentionsLoader.astro — This is the component that connects to webmentions.js to pull the available webmentions for a particular post, if any. It also uses functions defined in webmentionFilters.js to process the data.
• @components/Webmentions.astro — This is what renders the section for webmentions showing up in a particular post. It shows the overall number of interactions via webmentions, and also makes use of a Webmention component to render them if they have content.
• @components/Webmention.astro — This is the individual webmention card that usually gets rendered if there’s a reply to the post or the post was mentioned by someone elsewhere.

Aside from all of those, in my package.json scripts, I also have a postbuild action that should run after the whole site has been rendered. (Pending testing again in production… 😆)

Website Analytics

For website analytics, I also share track page views and sessions using Umami (mostly for my personal consumption). You can view this website’s analytics here (since I made it public, and wrote about it here): chisenires.design website analytics via Umami

Writing posts

To write posts, I open my repo in Obsidian and use the following plugins to help me in crafting my posts:

All of these can be seen in my Obsidian folder.

• Templater: To make use of a post_template.md (view on Github) for easier formatting of the YAML front matter.
• Linter: To help populate the date (if it’s a new post, to get the date when the file was created) and date_updated (when the file was last edited/updated) YAML properties.
• Better Word Count: I just have this installed but I haven’t really had use for it yet. I guess it’s mostly for my benefit, to see how many words I’ve written so far…
• Smart Typography: I wanted my quotes to be actual quotes “” and not like "" these, and everything else followed.
• Reading Time: Another plugin that’s more for my eyes rather than for anything shown on my website, though initially I did install it so I could try and “get” the value and place it somewhere. Haven’t gotten to that yet.
• Code Editor Shortcuts: Since I’m more used to the keyboard shortcuts for Code Editors like Sublime Text, VS Code, and the like, I wanted to mimic that experience in Obsidian as I typed.
• Unicode Search: This is just here in case I wanted to get a specific special character and I figured I’d get it while not leaving Obsidian. Normally I’d just search the internet for it and copy and paste, but then I do have this plugin. 😁
• Emoji Autocomplete: A very important Obsidian plugin for me as someone very expressive in typing and using a lot of emojis. Saves me 2-3 keypresses at the same time 😆
• Permalink Opener: I’ve never really used this yet, but I keep it around once I get around to using it, once I figure out how to set up the actual permalink for the blog posts I put out and save it in the YAML front matter.

Workflow for publishing

Usually when I want to write something and share as a post, I open my website’s Obsidian setup and create a post using the post_template.md so it automatically makes a post and I can fill in the title and description if I wanted to.

If something is still a draft, I just don’t commit it yet into the repository. I can also technically mark them as drafts, but I’ve found myself to forget the posts I make if I leave it in drafts for too long, so my goal is to publish something as soon as I set aside time to write it.

After writing and formatting whatever it is I wanted to share, I’ll add the new post file in a commit and push to my main branch. Once Coolify detects a new commit was added to my website’s Github repo, it auto triggers a new deployment and after a few minutes, I’d get notified if the build was pushed to production successfully. That’s when I know my blog post (and any other changes I made to my website) is now out in the open! 😄

Tracking things I want to update on my website

I make use of the Issues Tab of my website’s Github repo to track the things I wanna work on.

The reason I used this was simply because I found it really cool that Github (or is it just git?) automatically closes issues so long as you remember to mention them in the commit messages pushed to the repo. I learned this while contributing to the code of our current Design System at work, while working with my teammate who’s a UX engineer. Amaze ✨