This content is originally from my own blog. Check it out here!
Background
Ever since I made this blog, I wanted to have comments. None of the available solutions fit what I wanted or could do. My main requirements were:
completely client-side
don't require an account for some obscure service
have the setup mostly automatic.
Also I really like ATProto, so I was mostly thinking on doing something with that. One of the ideas was having some custom comment Lexicon and add a page where someone could login with their ATProto account and leave that comment. What I didn't like about this idea was that I didn't want people to trust me with their login, even if there's no server involved. Another approach is using Bluesky replies as comments like described in this post. What makes me dislike this option is that it forces me to either automatically share new blog posts to Bluesky to have the link from where to get the comments or manually post and link it, which would involve me manually editing stuff.
Leaflet
"Why Leaflet?" you may ask. Well it's an ATProto native blogging platform popular within the ATProto circle. Main reason why I went and tried syncing my blog to it was that I wanted to make a post about Bluesky(annoyed drama rant). I get 3 benefits from this:
discoverability - Leaflet has a Discover page with blogs that recently posted something or are popular and additionally there are Bluesky feeds that also show them
comments - it has built in comment system, so if I could fetch all of them somehow, I could show them on my website; one minus with Leaflet's comments is that they're more limited compared to Bsky with all the embeds, but it's fine
shared account and trust - ATProto is an open protocol which you can access with one account on many services, also I think people would put more trust into Leaflet compared to some random website.
It's deving time
Picked up my TypeScript nails and my NeoVim hammer and started working. While doing that I had a lot of opportunities to work on/with stuff I didn't before. First of all, I never worked on a CLI app, my experience so far was with either basic stuff in school, web dev and game dev. Some things I had to figure out were:
how to handle commands and args (picked citty from unjs for that)
how to package it (I'm using tsdown)
how to handle configs.
Config is probably the thing that I hate the most here. As of writing this I am still not happy with how it is. There are barely any checks (when loading, I do some when the vars are used) and few variables should probably be changed (like publicationUri). But it works, so it's kinda fine.
This was also my first experience with using npm for publishing. I hate it. UI feels clunky and bit old, and tokens only last up to 3 months I think (ok I get it, safety, but I totally expect a CI build failing cause token is expired). Apart from that it's ok. Maybe I should check out JSR.
Last but not least, this project was a good opportunity to try out Tangled. I like it. It's snappy, has Git forge basics like issues, pull requests, CI works and it's free, I don't have anything to complain about it, it's only getting better. Only thing I wish that was there is static web hosting like GitHub Pages, although this can be somewhat solved with wisp.place, and private repos. If I don't need these or any other features that are not on Tangled on some project I'll definitely consider using it to host that project, maybe I'll even move some old ones.
Result
Out of all this work came out leaflet-md. A CLI app that grabs Markdown from the folder you set it to search in, converts it to Leaflet's format and automatically uploads it. It also spits out a JSON file containing the mappings between Markdown file path and Leaflet's record key. What this allows me and others to do is to import that JSON file and use it for example to know from what Leaflet post to grab the comments from. That's exactly what I wanted, it automatically gives me a mapping from blog post id to record key and it's different from Bsky, because it's not really sharing the blog post, but making it available on a different platform. You may also see the results of this work. You can read this post on either my website or Leaflet. It's a bit of a spoiler, if I'm gonna be honest. Additionally you can see a section on my website's blog for the comments from Leaflet.
There is still some work to do on it, but I'm happy with getting it out. Also here's the source code for that component. It's not meant as a ready thing though, you should modify it to work for your case. Do whatever you want with it, it's BSD0.
Also a joke I'm kinda doing with the name leaflet-md is that "MD" part is meant to be medical area related thing like House MD or something. I'm imagining a logo for it be a leaf with the head mirror thingy. Kinda stupid, but I'm just silly.
Conclusion
I am happy with what came out of this. Me and others got a useful tool. I now have comments on my blog. Found few bugs in Leaflet when working on this. Everyone wins.
Also this is my first project to get so popular, I'm thankful for all the stars, comments and likes (my attention mind goblin is very satisfied).
Also want to give few thanks:
leaflet.pub - for existing and letting me steal reuse their comments data
mackuba.eu - for slamming me with shower of issues while I wasn't looking, was shocked with how many appeared, but that's good, it pointed me towards what I should fix
mary.my.id - for atcute library, it's great
bad-example.com - for microcosm, great project for getting backlinks, records, resolving user's DID document and others I have yet to use
oppi.li and anirudh.fi for making Tangled and evan.jarrett.net for adding tag support in CI to it
Anyway now here's a bunch of links: