bluesky post

bluesky-post

Un componente web para mostrar publicaciones de Bluesky y sus metadatos.

Demostración | Demostración de plantilla personalizada | Lectura adicional

Ejemplos

Ejemplo de uso general:

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

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

Ejemplo usando una plantilla personalizada:

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

< template id =" bluesky-post-template " >
  < blockquote data-key =" content " > </ blockquote >
</ template >

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

Ejemplo utilizando una plantilla personalizada más compleja:

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

< template id =" bluesky-post-template " >
  < dl >
    < dt > Reposts </ dt >
    < dd data-key =" repostCount " > </ dd >
    < dt > Replies </ dt >
    < dd data-key =" replyCount " > </ dd >
    < dt > Likes </ dt >
    < dd data-key =" likeCount " > </ dd >
  </ dl >
  < a data-key =" url " >
    View original post from < strong data-key =" username " > </ strong > on < strong data-key =" hostname " > </ strong >
  </ a >
</ template >

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

Características

Este componente web le permite:

• Convierta un enlace de publicación de Bluesky regular en una publicación de bluesky citada
• Superficie los metadatos posteriores junto con el post, por ejemplo, el recuento de respuesta, el recuento de reposiciones, como el recuento
• Use una plantilla personalizada para todas las instancias del componente en la página utilizando un data-key="name" atributos de datos
• Use una plantilla personalizada para instancias específicas utilizando el atributo template
• Recupere los datos anidados utilizando el atributo de data-key y la referencia típica de la tecla JavaScript, por ejemplo, data-key="record.text"

Instalación

Tiene algunas opciones (elija una de estas):

1. Instalar a través de NPM: npm install @daviddarnes/bluesky-post
2. Descargue la fuente manualmente de GitHub en su proyecto.
3. Omita este paso y use el script directamente a través de un CDN de terceros (no recomendado para el uso de producción)

Uso

Asegúrese de incluir el <script> en su proyecto (elija uno de estos):

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

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

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

Usando una plantilla personalizada

La plantilla predeterminada para el componente se ve así:

 < figure >
  < blockquote data-key =" record.text " > </ blockquote >
  < figcaption >
    < cite >
      < a data-key =" url " > @ < span data-key =" username " > </ span > </ a >
    </ cite >
    < dl >
      < dt > Reposts </ dt >
      < dd data-key =" repostCount " > </ dd >
      < dt > Replies </ dt >
      < dd data-key =" replyCount " > </ dd >
      < dt > Likes </ dt >
      < dd data-key =" likeCount " > </ dd >
    </ dl >
  </ figcaption >
</ figure >

Sin embargo, puede personalizar la plantilla utilizando un elemento <template> con una id de bluesky-post-template , que se utilizará para cada instancia del componente en la página. Aquí hay un ejemplo que solo expone las métricas de tocador de la publicación de Bluesky como un <dl> :

 < template id =" bluesky-post-template " >
  < dl >
    < dt > Reposts </ dt >
    < dd data-key =" repostCount " > </ dd >
    < dt > Replies </ dt >
    < dd data-key =" replyCount " > </ dd >
    < dt > Likes </ dt >
    < dd data-key =" likeCount " > </ dd >
  </ dl >
</ template >

También puede usar diferentes plantillas en la misma página utilizando el atributo template a los elementos de Target <template> con una id específica:

 < template id =" custom-template " >
  < a data-key =" record.text, url " > </ a >
</ template >

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

Los datos se aplican utilizando un atributo data-key de datos. El valor de este atributo debe corresponder a un punto de datos dentro de una respuesta de la API pública de Bluesky Post. La documentación oficial de Bluesky tiene un ejemplo de respuesta de estado aquí.

Tenga en cuenta que para los elementos <a> e <img> el valor no se aplicará a su contenido si la cadena que se devuelve comienza con http y en su lugar se aplicará a los atributos href y src respectivamente.

Consulte la demostración de la plantilla personalizada, así como el código fuente como referencia.

Crédito

Gracias a las siguientes personas:

• Zach Leatherman por inspirar esta plantilla de repositorio de componentes web