By Galdin Raphael —

Testing Bluesky as a comments system

Temporary post to test Bluesky as a comments system.

I'm trying to set this up with https://github.com/ascorbic/bluesky-comments-tag since it's lightweight and customizable.

I added this to the global {{ghost_foot}}:

<script async>
  if(window.blueskyPostId) {
    let comments = document.createElement('bluesky-comments');
    comments.setAttribute('url', 'https://bsky.app/profile/galdin.dev/post/'+ window.blueskyPostId);
  
    const blogEl = document.getElementsByClassName('gh-content')[0];
    blogEl.innerHTML += '<p></p><p><a href="https://bsky.app/profile/galdin.dev/post/'+ window.blueskyPostId +'">Reply on Bluesky to comment.</a></p>'
    blogEl.appendChild(comments);
  }
</script>
<script type="module" async>
  import "https://esm.sh/bluesky-comments-tag/load";
</script>

Script to display Bluesky comments for every post with a window.blueskyPostId defined.

And the following to the {{ghost_head}} for this particular page:

<script>
    window.blueskyPostId = '3li5zbu6v222t'
</script>

I wish Ghost supported custom attributes so I don't have to pasting a script tag to each post.