--- title: "Bluesky comments now work on Webtrotion" slug: bluesky-comments-now-work-on-webtrotion canonical_url: https://nerdymomocat.github.io/posts/bluesky-comments-now-work-on-webtrotion/ collection: Stream published_at: 2024-11-26T00:00:00.000Z updated_at: 2024-11-28T00:00:00.000Z tags: - Coding - Webtrotion author: "Nerdy Momo Cat" --- ## Navigation Context - Canonical URL: https://nerdymomocat.github.io/posts/bluesky-comments-now-work-on-webtrotion/ - You are here: Home > Posts > Stream > Bluesky comments now work on 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 - [One year of Webtrotion](https://nerdymomocat.github.io/posts/one-year-of-webtrotion/) #### Other Pages Mentioned On This Page - [Making Webtrotion](https://nerdymomocat.github.io/posts/making-webtrotion/) - [Bluesky post embeds now work on Webtrotion](https://nerdymomocat.github.io/posts/bluesky-post-embeds-now-work-on-webtrotion/) Two days ago, I added this comment to [![](https://nerdymomocat.github.io/_astro/command-line_blue.CaAzBUD-_Z1EYdWV.svg)Making Webtrotion](https://nerdymomocat.github.io/posts/making-webtrotion/): [![Image uploaded to Notion](https://nerdymomocat.github.io/_astro/image.DKDg0NtN_ZgKEp2.webp)](https://nerdymomocat.github.io/_astro/image.DKDg0NtN_ZgKEp2.webp) After Emily’s [post](https://emilyliu.me/blog/comments), there was a flurry of efforts to use bluesky as a commenting system. I am actually surprised more people didn’t use Twitter as a commenting system when their API was free for all. That led to Cory [creating a package](https://www.coryzue.com/writing/bluesky-comments/), which was react based. So, I tried finding if people had previously added bluesky comments to astro, and of course they had: see [graysky](https://graysky.app/blog/2024-02-05-adding-blog-comments), [snorre](https://snorre.io/blog/2023-08-19-atproto-bluesky-comment-system/) (also has the option to reply from the comment section but needs bluesky app password, I’ll revisit this after OAuth), and [Jade’s](https://blog.jade0x.com/post/adding-bluesky-comments-to-your-astro-blog/) (statically builds comments, and doesn’t update in real-time). Then I found Lou’s post [here](https://bsky.app/profile/louee.bsky.social/post/3lbsizqjik22o) and was relieved to know that you can do this without react. I ended up using the version by Matt [here](https://github.com/ascorbic/bluesky-comments-tag) (the person whose code I am using for [Bluesky post embeds now work on Webtrotion](https://nerdymomocat.github.io/posts/bluesky-post-embeds-now-work-on-webtrotion/) as well). The good part about Matt’s version is that it has an option to search for `did:{xx}plc:{{yy}` format, instead of expecting people to find the exact `at` format URI. And lastly, I used [this post](https://jack.is/posts/bluesky-comments) from Jack to auto-search a post (and the idea of using a `echo-feed-emoji`). There is a react version of this (modified from Cory’s version) [here](https://nicoritschel.com/writing/bluesky) by Nico. Update Nov 27, 2024, 04:20 AM: I saw this cool trick by [Garrick](https://bsky.app/profile/grrrck.xyz/post/3lbu5opiixc2j) [here](https://github.com/gadenbuie/quarto-bluesky-comments/blob/main/_extensions/bluesky-comments/bluesky-comments.js) to filter out hidden, blocked or not found replies and added that to the script. All this together, and webtrotion now has its bluesky commenting system. I am not going to add an explicit URL here to show that auto-search works, while I added an explicit URL to the Bluesky post embeds post. [![Image uploaded to Notion](https://nerdymomocat.github.io/_astro/image.C4N64h4H_UvgLs.webp)](https://nerdymomocat.github.io/_astro/image.C4N64h4H_UvgLs.webp) [![Image uploaded to Notion](https://nerdymomocat.github.io/_astro/image.CqSsm42B_Z8hvHP.webp)](https://nerdymomocat.github.io/_astro/image.CqSsm42B_Z8hvHP.webp) ![](https://nerdymomocat.github.io/_astro/info-alternate_gray.xE4Ugu2z_Z1EYdWV.svg) How to use **Bluesky Comments** in Webtrotion _Remember, these are currently only read-only comments, interaction needs to happen on Bluesky (there is a handy-dandy link added on top of comments). Once Bluesky has OAuth, I’ll try to make it so that people can also comment through your webpage._ **Step 1:** If you are just now duplicating the template here, you should be fine. If you have already been using Webtrotion, add a property called `Bluesky Post Link` to the database with type as `URL`. Make sure that the property name matches. **Step 2:** In your `constants-config.json` file, you will see this: ``` "bluesky-comments": { "show-comments-from-bluesky": false, "auto-search-for-match": { "turn-on-auto-search": false, "author": "", "echo-feed-emoji": "" } } ``` - `show-comments-from-bluesky` decides whether you want to show a bluesky comment section at all or not. It is `false` by default, but if you turn it to `true`, bluesky comment rendering script will be executed. - Now, whichever link you paste into `Bluesky Post Link` for a post, that thread will be used to render the comments on your post. - If we used this system as is, given Webtrotion builds every 8 hours (configurable), we would need to wait for it to compile to post, then make a post on Bluesky, then copy that URL and paste it into the `Bluesky Post Link` field, and wait for it to build again. `auto-search-for-match` allows you to automatically search your profile for posts that mention the link (only parent posts, not in replies). - `turn-on-auto-search` decides whether you want to turn auto-search on or off. - `author` is your bluesky handle. You can specify this as handle (do not include `@` sign) or as the `did:` protocol value. If you do not specify a handle here, auto-search will not be executed. - `echo-feed-emoji`: Only searches posts that mention the echo-feed character. If you set it to empty, it will search all your parent posts. The variables look like this: ``` const post_slug = new URL( getPostLink(post.Slug), import.meta.env.SITE ).toString(); const bluesky_url = post.BlueSkyPostLink || ""; const BLUESKY_COMM = { "show-comments-from-bluesky": true, "auto-search-for-match": { "turn-on-auto-search": false, "author": "", "echo-feed-emoji": "", }, }; ``` Here is the latest version of the script: [ File not found · nerdymomocat-templates/webtrotion-astro-notion-cms-website-blog Your own notion website with astro. Contribute to nerdymomocat-templates/webtrotion-astro-notion-cms-website-blog development by creating an account on GitHub. ![title](https://www.google.com/s2/favicons?domain=github.com) https://github.com/nerdymomocat-templates/webtrotion-astro-notion-cms-website-blog/blob/main/src/components/blog/PostComments.astro ![title](https://opengraph.githubassets.com/bdec1990a5fd0a39649fea8d9dac17a992af61578bfc542626c47fe1c702dbb4/nerdymomocat-templates/webtrotion-astro-notion-cms-website-blog) ](https://github.com/nerdymomocat-templates/webtrotion-astro-notion-cms-website-blog/blob/main/src/components/blog/PostComments.astro) Bookmark for [https://github.com/nerdymomocat-templates/webtrotion-astro-notion-cms-website-blog/blob/main/src/components/blog/PostComments.astro](https://github.com/nerdymomocat-templates/webtrotion-astro-notion-cms-website-blog/blob/main/src/components/blog/PostComments.astro)