--- title: "One year of Webtrotion" slug: one-year-of-webtrotion canonical_url: https://nerdymomocat.github.io/posts/one-year-of-webtrotion/ collection: Notes published_at: 2024-11-27T00:00:00.000Z updated_at: 2025-10-29T00:00:00.000Z tags: - Thoughts - Webtrotion - Coding excerpt: "Almost exactly an year ago, I had published Webtrotion. Webtrotion was mainly meant to be used by me, and it is still very much mainly just used by me, and no one else - and that is okay." author: "Nerdy Momo Cat" --- ## Navigation Context - Canonical URL: https://nerdymomocat.github.io/posts/one-year-of-webtrotion/ - You are here: Home > Posts > Notes > One year of Webtrotion ### Useful Next Links - [Home](https://nerdymomocat.github.io/) - [Bundles](https://nerdymomocat.github.io/collections/bundles/) - [Logbook](https://nerdymomocat.github.io/collections/logbook/) - [Notes](https://nerdymomocat.github.io/collections/notes/) - [Stream](https://nerdymomocat.github.io/collections/stream/) ### Related Content #### Pages That Mention This Page - [Webtrotion 2.0: Footnotes, Citations, and JSON5 Config](https://nerdymomocat.github.io/posts/webtrotion-20-footnotes-citations-and-json5-config/) #### Other Pages Mentioned On This Page - [Introducing Webtrotion](https://nerdymomocat.github.io/posts/introducing-webtrotion/) - [Bluesky comments now work on Webtrotion](https://nerdymomocat.github.io/posts/bluesky-comments-now-work-on-webtrotion/) Almost exactly an year ago, I had published Webtrotion . Webtrotion was mainly meant to be used by me, and it is still very much mainly just used by me, and no one else - and that is okay. I made sure to provide enough configurability such that if **I** wanted to change things around later down the line without directly modifying the code, I could, and hopefully that would help other people adopt the website too. In the last 2 weeks, I added 3 features: integrated umami tracking, added bluesky as comments functionality , and added RSS with content. And Dec 5, 2024, I updated to Astrov5. Not much has changed honestly on first glance, and the images below are a bit different also because of the changes in original page, but you can see the slight differences here. [![Screenshot of the newer implementation](https://nerdymomocat.github.io/_astro/image.B2c-kmBS_Z1VBUP.webp)](https://nerdymomocat.github.io/_astro/image.B2c-kmBS_Z1VBUP.webp) Screenshot of the **newer** implementation [![Screenshot of the older implementation](https://nerdymomocat.github.io/_astro/image.DMWT6CHI_UYA3U.webp)](https://nerdymomocat.github.io/_astro/image.DMWT6CHI_UYA3U.webp) Screenshot of the **older** implementation ## Background Context I had started my personal website back in May of 2023 based off Quarto. But I never enjoyed writing content in Quarto. Sure, I could make it look nice and fancy, but I had to accept the fact, that I would never like writing long-form content in markdown. I really love block based editors. It is a pretty simple UX change, but the fact that I can drag things around and put things side by side, apparently, matters a lot to me. So, when I could not stick to using Quarto and the convoluted `yaml` system I had, I decided to find ways that allowed me to author in anything else than markdown, and those that were free. Especially because, I just wanted to host them as a static website, I did not need fancy stuff, and I wanted it to be portable enough such that if my plans change, I am not hoisting it around. Which landed me on deciding on Notion. Sure, I played around with other WYSIWYG editors, but no other editor comes close to Notion, and ultimately, that is why I was looking around in the first place, right? And I found two major camps of options — using Notion’s public site and render it on your own, similar to super or react notion, or use Notion’s API. I wanted to go down the API route. Why? It feels safer in a way. The biggest problem though, is that you cannot render collections through API — and I kinda made peace with it; if I was choosing markdown, I wouldn’t be rendering Notion collections anyway, so why should this make a difference. ## Choosing to Develop Webtrotion Honestly, when I first decided to use Notion as a CMS, there were hundreds of existing options. From GitHub solutions using public pages to platforms like [super.so](http://super.so/) that could render databases (which I still can't), the choices were many. Then there were indie apps claiming to use Notion as a CMS - some popular ones with high price tags, and free ones charging based on the number of websites. I'm glad I chose none of those options. Since I didn't want to make my pages public, most options were automatically eliminated. I'm also relieved I avoided those newer apps because, except for maybe two (the expensive ones), all of them are now defunct - and you never want your blog to be defunct. That's why I use GitHub Pages. While GitHub Pages might not last beyond 10 years, that lifespan is acceptable to me. The typical one-year or six-month lifetime of an indie project, hoping for adoption from the Notion community though, doesn’t sit well with me. So, I decided to find a base repository I could develop that didn't use React (which I wanted to avoid) but worked with vanilla JavaScript and CSS. ## Deciding on the Base Repository Long story short, I found [Otoyo’s github repository](https://github.com/otoyo/astro-notion-blog) that did most of what I wanted, in a template format that I didn’t really like. I really like Astro’s cactus template, not because I had used Astro before, but because it was pretty aesthetic 🤷‍♀️. I knew that I didn’t know enough about the area to start this on my own, so I asked someone on fiverr to merge the two for me. The major change I wanted to make was, I needed to host the complete website, not just the blog component. So, late October, 5 months after I started using Quarto, I asked someone on fiverr to help me out — to combine otoyo’s github repository with Astro cactus’ looks. [![Image uploaded to Notion](https://nerdymomocat.github.io/_astro/image.DlWcbRC3_15Xyua.webp)](https://nerdymomocat.github.io/_astro/image.DlWcbRC3_15Xyua.webp) And they did it! It didn’t have everything I wanted, but it did have enough for me to get started a month later, thanksgiving of 2023. And here were my initial commits to the repository, mostly focussing on improving the looks and making it look like I wanted to. [![Image uploaded to Notion](https://nerdymomocat.github.io/_astro/image.B3uz5xPQ_ZyaTLH.webp)](https://nerdymomocat.github.io/_astro/image.B3uz5xPQ_ZyaTLH.webp) ## Adding Features Over the past few months, I added multiple features to the setup. While I was making a decision, I did think, what if I found the perfect integration — and then realized that if I was dependent on someone else for a solution, I wouldn’t be able to integrate things that I wanted. So, I set out to do just that. Making it look more like Notion when need be, look a tiny bit better in many use cases, but also integrate some shortcode like functionality. So, here is a list of all features added above and over what already existed in Otoyo’s and Astro Cactus’ implementation: ### Improvements #### Performance - `Webp` image transformation for reduced image size - Cache system that works with github pages - Preload and LazyLoad strategies for videos - Twitter and TikTok embed improvements #### Access - Support for slugs in any language (auto and explicit) - Theme toggle between light and dark mode - Responsive font sizes (14px mobile, 16px desktop) - Scroll to top functionality - Improved accessibility with ARIA labels - Better semantic HTML structure - Enhanced keyboard navigation - Improved print styling and optimization - Converted checkboxes to icons in ToDo component #### Match what Notion Does - Support for audio blocks - Support for custom emoji in mentions - Match colors with exact Notion colors - Block based linking support - Support for link mentions and link previews - Better table of contents with floating functionality (that also works on mobile) - Improved table styling with Notion-like gray tables - Tag descriptions support ### Additional Features #### Setup and Layout - Stream-like preview for posts (Google Blogger style) - View transitions support - Generate OpenGraph images - Add last updated date option - Add social links to footer - Allow font configuration for both text and open graph images - Support for google analytics and umami - Command+K (⌘K) or Ctrl+K search functionality - Support for BlueSky and giscus comments - Pin posts to top functionality - Recent posts on homepage option - Interlinked content section - Generate RSS, _now with content_ #### Content - Shiki transforms for code blocks - Popover implementation for links and mentions - HTML rendering options via shortcodes (@July 4, 2024): - ` ` for iframe rendering - ` ` for direct body injection - Support for data tables with search and sort functionality ## Looking Back Honestly, I enjoyed this project a lot. It got me back into using JavaScript and experimenting with different interesting styles. I really like Astro, though there's an issue with it being so new - every update might bring unexpected issues that I run into, even within the same major version. And then, I do not like the newer content loaders for Notion, which tend to flatten everything. That's probably the next thing I'll look into. I really enjoyed this process. I can add custom components and use this website for whatever I want. While it may not support newsletters (like substack) or have an integration with ghost/buttondown, and isn’t as future safe and easy/quick to build as a markdown based website, I think it was worth continuing because I've never updated a site as frequently as I have with this setup. This project also led me to accept that I don't like writing in Markdown, which has been a significant "accept what I can’t change, change what I can, and know the difference" moment for me. I realized I prefer writing in block based, rich-text editors (so, mostly, Craft and Notion). Notion did launch their Sites 2.0 feature by the way, which offers almost everything you'd want, but it requires a custom domain and additional payments for that custom domain to be connected. I really wanted a static site, and while previous issues like changing slugs are now fixed, it's still a trade-off. You can at least showcase your inline database when using Notion's built-in site feature, though I wish there was a way around some limitations. But I get to do nice code blocks using shiki, and, I get bluesky comments. All in all, I really liked this experience as I achieved my main goal: having a website that I actually want to write and publish on. That has been the most important outcome.