bluesky post

bluesky-post

Un composant Web pour afficher les publications bluesky et leurs métadonnées.

Démo | Demo de modèle personnalisé | Dès la lecture

Exemples

Exemple d'utilisation générale:

 < 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 >

Exemple à l'aide d'un modèle personnalisé:

 < 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 >

Exemple utilisant un modèle personnalisé plus complexe:

 < 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 > 

Caractéristiques

Ce composant Web vous permet de:

• Transformez un lien de publication bluesky ordinaire en un post bluesky cité
• Faire surface les métadonnées du poteau le long du post, par exemple le nombre de réponses, le nombre de republiage, comme le nombre
• Utilisez un modèle personnalisé pour toutes les instances du composant sur la page à l'aide d'un data-key="name" Attributs de données
• Utilisez un modèle personnalisé pour des instances spécifiques à l'aide de l'attribut template
• Récupérez les données imbriquées à l'aide de l'attribut data-key et du référencement de clé JavaScript typique, par exemple data-key="record.text"

Installation

Vous avez quelques options (choisissez-en une):

1. Installer via NPM: npm install @daviddarnes/bluesky-post
2. Téléchargez la source manuellement à partir de GitHub dans votre projet.
3. Ignorez cette étape et utilisez le script directement via un CDN tiers (non recommandé pour une utilisation en production)

Usage

Assurez-vous d'inclure le <script> dans votre projet (choisissez-en un):

 <!-- 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 >

Utilisation d'un modèle personnalisé

Le modèle par défaut pour le composant ressemble à ceci:

 < 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 >

Cependant, vous pouvez personnaliser le modèle en utilisant un élément <template> avec un id de bluesky-post-template , qui sera utilisé pour chaque instance du composant sur la page. Voici un exemple qui expose simplement les mesures de vanité du post bluesky en tant que <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 >

Vous pouvez également utiliser différents modèles sur la même page en utilisant l'attribut template à des éléments Target <template> avec un id spécifique:

 < 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 >

Les données sont appliquées à l'aide d'un attribut data-key Data. La valeur de cet attribut doit correspondre à un point de données dans une réponse API publique Bluesky Public. La documentation officielle de Bluesky a un exemple de réponse de statut ici.

Notez que pour les éléments <a> et <img> , la valeur ne sera pas appliquée à son contenu si la chaîne renvoyée commence par http et sera plutôt appliquée aux attributs href et src respectivement.

Consultez la démo du modèle personnalisé ainsi que le code source pour référence.

Crédit

Merci aux personnes suivantes:

• Zach Leatherman pour avoir inspiré ce modèle de repo composant Web