@daviddarnes/bluesky-replies

bluesky-replies

A Web Component to display Bluesky post replies.

Demo | Further reading

Examples

General usage example:

<script type="module" src="bluesky-replies.js"></script>

<bluesky-replies>
  <a href="https://bsky.app/profile/darn.es/post/3laucrkat3s2c">
    Discuss on Bluesky
  </a>
</bluesky-replies>

Example usage combined with bluesky-post:

<script type="module" src="bluesky-replies.js"></script>
<script type="module" src="bluesky-post.js"></script>

<bluesky-replies>
  <bluesky-post>
    <a href="https://bsky.app/profile/darn.es/post/3laucrkat3s2c">
      Discuss on Bluesky
    </a>
  </bluesky-post>
</bluesky-replies>

Example using a custom template:

<script type="module" src="bluesky-replies.js"></script>

<template id="bluesky-replies-template">
  <ul>
    <li data-key="reply">
      <details>
        <summary data-key="author.handle"></summary>
        <span data-key="record.text"></span>
      </details>
    </li>
  </ul>
</template>

<bluesky-replies>
  <a href="https://bsky.app/profile/darn.es/post/3laucrkat3s2c">
    Discuss on Bluesky
  </a>
</bluesky-replies>

Features

This Web Component allows you to:

• Turn a regular Bluesky post link into a list of replies to that post
• Surface reply metadata alongside the reply, e.g. reply count, repost count, like count
• Use a custom template for all instances of the component on the page using a data-key="name" data attributes
• Use a custom template for specific instances using the template attribute
• Retrieve nested data using the data-key attribute and typical JavaScript key referencing, e.g. data-key="reocrd.text"

Installation

You have a few options (choose one of these):

• Install via npm: npm install @daviddarnes/bluesky-replies
• Download the source manually from GitHub into your project.
• Skip this step and use the script directly via a 3rd party CDN (not recommended for production use)

Usage

Make sure you include the <script> in your project (choose one of these):

<!-- Host yourself -->
<script type="module" src="bluesky-replies.js"></script>

<!-- 3rd party CDN, not recommended for production use -->
<script
  type="module"
  src="https://www.unpkg.com/@daviddarnes/bluesky-replies@1.0.0/bluesky-replies.js"
></script>

<!-- 3rd party CDN, not recommended for production use -->
<script
  type="module"
  src="https://esm.sh/@daviddarnes/bluesky-replies@1.0.0"
></script>

Using a custom template

The default template for the component looks like this:

<ul>
  <li data-key="reply">
    <figure>
      <figcaption>
        <cite data-key="author.displayName"></cite>
      </figcaption>
      <blockquote data-key="record.text"></blockquote>
    </figure>
  </li>
</ul>

However you can customise the template by using a <template> element with an id of bluesky-replies-template, which will be used for every instance of the component on the page. Here's an example which just exposes the vanity metrics of the Bluesky post as a <dl>:

<template id="bluesky-replies-template">
  <ul>
    <li data-key="reply">
      <details>
        <summary data-key="author.handle"></summary>
        <span data-key="record.text"></span>
      </details>
    </li>
  </ul>
</template>

You can also use different templates on the same page by using the template attribute to target <template> elements with a specific id:

<template id="custom-template">
  <ul>
    <li data-key="reply">
      <strong data-key="author.displayName"></strong>
      <span data-key="record.text"></span>
    </li>
  </ul>
</template>

<bluesky-replies template="custom-template">
  <a href="https://bsky.app/profile/darn.es/post/3laucrkat3s2c">
    Discuss on Bluesky
  </a>
</bluesky-replies>

Data is applied using a data-key data attribute. The value of this attribute should correspond to a data point within a Bluesky public post API response. The official Bluesky documentation has an example of a status response here.

The only data-key value unique to bluesky-replies is the reply value, which denotes the element which will be used to iterate for each reply, which will often be an li element or similar.

Note that for <a> and <img> elements the value won't be applied to it's content if the string being returned starts with http and instead will be applied to the href and src attributes respectively.

Check out the custom template demo as well as the source code for reference.

Credit

With thanks to the following people:

• Zach Leatherman for inspiring this Web Component repo template