Comment afficher les likes de Bluesky sur mes articles de blog-tutoriel CSS-php.cn

J'aime vraiment passer du temps sur Bluesky en ce moment. L'une des choses que j'apprécie vraiment dans toute cette expérience, c'est que le projet est plutôt Open Source, que les gens créent des choses vraiment sympas avec la plate-forme et qu'il existe de belles API avec lesquelles s'amuser.

Je connais la norme Webmentions et la façon dont elle peut être utilisée pour faciliter les conversations entre sites en affichant des données telles que les likes et les commentaires/réponses aux liens sur Internet. J'ai travaillé avec Webmentions il y a quelques années pour afficher les données Webmention d'autres plateformes de médias sociaux sur mon site. Cependant, il semblait souvent y avoir beaucoup d'obstacles à franchir, alors qu'il suffisait d'obtenir quelques données à partir d'une API.

Dans cet article, nous allons utiliser l'API Bluesky pour récupérer une collection d'avatars d'utilisateurs qui ont aimé une publication Bluesky que vous avez associée à un article de blog public, afin que vous puissiez afficher quelque chose qui ressemble à ceci sur votre site Web.

How I show Bluesky likes on my blog posts

Le flux de travail

Étant donné que ce site Web est un site statique construit avec Eleventy, quelques étapes sont nécessaires pour associer un article de blog publié à un article Bluesky.

Publiez un article de blog, qui déclenche la création d'un site statique
Publiez un article Bluesky contenant un lien vers l'article de blog publié
Associez l'ID de l'article Bluesky à cet article de blog publié (dans un CMS, par exemple)
Reconstruire le site
Bénéfice

Choix techniques

Ce site Web est un site statique qui utilise avec parcimonie JavaScript côté client. Le code JavaScript de cette fonctionnalité s'exécute sur mes modèles de page de blog sous condition si un article de blog est associé à un identifiant Bluesky Post.

Des alternatives à cette approche seraient (dans mon cas) d'utiliser une fonction Edge pour modifier la réponse HTML statique au moment de la requête, mais dans le passé, j'ai eu des problèmes de performances en appelant des API tierces de cette manière, telles que un délai jusqu'au premier octet (TTFB) plus lent que souhaité. Lisez Comment j'ai corrigé mon Brutal TTFB pour plus de contexte.

De plus, cette fonctionnalité sur mon site Web est une amélioration progressive, et la fonction de la page ne dépend pas de l'affichage des likes Bluesky. Par conséquent, si les appels à l’API Bluesky échouent sur le client, cela n’a pas d’importance et nous pouvons nettoyer le DOM de manière appropriée. Si nous exécutions ce même code sur un serveur, cela pourrait bloquer le rendu de la page (au moins sans gestion appropriée des erreurs) et la publication ne serait pas lue. Grande honte.

Mon site étant un site statique, techniquement, je pourrais récupérer les données Bluesky au temps de construction et restituer les données de manière statique sur chaque article de blog. Cependant, je voulais que cette fonctionnalité apporte de la joie en étant une expérience interactive en temps quasi réel. Et en plus, il ne serait pas idéal de reconstruire mon site Web toutes les minutes environ, pour garder les données synchronisées.

Optimiser pour les performances

Étant donné que nous chargeons n images tierces (avatars d'utilisateurs), la taille des images est importante. Heureusement, l'API Bluesky fournit au moins deux tailles d'image pour chaque utilisateur, et nous souhaitons utiliser la plus petite.

De plus, étant donné que nous chargeons n images et que nous ne savons pas combien de temps elles prendront pour se charger ni quel effet elles auront sur la mise en page, certaines considérations ont été prises pour éviter le décalage cumulatif de la mise en page (CLS ) autant que possible. Ceux-ci seront décrits aux côtés des exemples de code ci-dessous.

Conditions préalables pour afficher les likes Bluesky sur vos articles de blog

Un compte Bluesky
Un site internet
Quelques articles de blog
Un moyen de stocker un identifiant de publication Bluesky avec les données de votre article de blog (par exemple, si vous écrivez vos blogs en markdown, stockez l'identifiant de publication dans votre introduction ; si vous utilisez un CMS, ajoutez un champ à votre article de blog modèle de contenu, etc.)

Le code

Jetons un coup d'œil au HTML, CSS et JavaScript qui font que la magie opère.

Le HTML

Le HTML est contenu dans un élément section. Ce composant contient :

un élément h3, qui sera renseigné avec le nombre total de likes (votre élément de niveau de titre peut varier),
un lien vers la publication Bluesky pour encourager les gens à l'aimer, et
un élément ul vide, prêt à être rempli d'avatars Bluesky.

Pour les classes CSS, j'utilise la syntaxe BEM, mais vous pouvez utiliser le système CSS de votre choix. Pour cibler les éléments DOM en JavaScript, j'utilise des attributs de données préfixés par data-bsky ; vous pouvez cibler les éléments DOM à l'aide de classes CSS en JavaScript, mais je préfère utiliser des attributs de données pour séparer les préoccupations. Vous pouvez même utiliser des identifiants sur les éléments et cibler ceux-ci avec JavaScript si vous le souhaitez.

Le bskyPostId associé à un article de blog est ajouté dans un attribut de données sur une balise méta à côté de ce composant. Ceci est purement unique à ma configuration, étant donné que je construis un site statique et que j'ai besoin d'accéder à une variable de construction côté client dans un fichier JavaScript séparé. Vous pouvez avoir accès à votre bskyPostId dans l'état de votre application, par exemple, si vous utilisez un framework différent. Modifiez comme bon vous semble.

<meta data-bsky-post-id="${post.bskyPostId}" />

<section>



<h3>
  
  
  The CSS
</h3>

<p>The CSS you see here has been slightly modified from my implementation to avoid you having to use my custom properties and personal spacing preferences. Please add what you need to make your implementation right for you.</p>

<p>I’d like to call out the magic number min-height: 400px on the parent container class, .post__likes; this is to maintain a fixed height of at least 400px for the element on page load, so that the avatars don't shift the page content around as they gradually load in (the container will expand vertically on mobile). This is to prevent a bad CLS score. In the JavaScript code below, you’ll notice that I’ve specified a limit on the number of avatars fetched, based on how many avatars will fit comfortably inside this fixed-height container.<br>
</p>

<pre class="brush:php;toolbar:false">.post__likes {
  min-height: 400px; /* to avoid CLS as much as possible! */
}

.post__likesTitle {
  font-size: 2rem;
  color: #000;
}

.post__likesCta {
  color:  #000;
  font-size: 1.25rem;
  font-style: italic;
  display: block;
}

.post__likesList {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.post__like {
  width: 4rem;
  aspect-ratio: 1/1;
  margin-right: -1rem;
  border-radius: 100%;
  filter: drop-shadow(0px 0.125rem 0.125rem rgba(0, 0, 0, 0.25));
}

.post__like__avatar {
  border-radius: 100%;
}

.post__like--howManyMore {
  width: 4rem;
  aspect-ratio: 1/1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  font-weight: bold;
  font-style: italic;
  background-color: #208bfe; /* Bluesky blue */
  color: #fff;
}

Copier après la connexion

Le Javascript

Avertissement : ce code est fourni en JavaScript brut ; vous pouvez adapter ce code à votre propre framework de site Web si vous le souhaitez, mais la beauté de l'écrire en JavaScript simple est que vous pouvez l'utiliser tel quel sur n'importe quel front-end.

Tout d’abord, vous devrez définir quelques variables. La LIMITE précise le nombre maximum d'avatars que vous souhaitez afficher sur votre page en fonction de la manière dont vous souhaitez les afficher. Ma limite est fixée à 59 car c'est le nombre d'avatars qui s'intègrent parfaitement sur quatre lignes (avec un espace supplémentaire pour afficher le nombre de likes supplémentaires). Le nombre maximum d'avatars que vous pouvez récupérer avec ce point de terminaison d'API est de 100.

Le bskyPostId est extrait de la balise méta comme décrit dans la section HTML ci-dessus (vous devrez peut-être le faire différemment en fonction de votre framework et du code existant).

Afin de modifier le DOM après avoir récupéré les données, nous devons accéder aux éléments conteneur, likesContainer et likesCount à l'aide de document.querySelector().

Remplacez la valeur de myDid par votre propre DID Bluesky. Et tout le reste est prêt à partir.

<meta data-bsky-post-id="${post.bskyPostId}" />

<section>



<h3>
  
  
  The CSS
</h3>

<p>The CSS you see here has been slightly modified from my implementation to avoid you having to use my custom properties and personal spacing preferences. Please add what you need to make your implementation right for you.</p>

<p>I’d like to call out the magic number min-height: 400px on the parent container class, .post__likes; this is to maintain a fixed height of at least 400px for the element on page load, so that the avatars don't shift the page content around as they gradually load in (the container will expand vertically on mobile). This is to prevent a bad CLS score. In the JavaScript code below, you’ll notice that I’ve specified a limit on the number of avatars fetched, based on how many avatars will fit comfortably inside this fixed-height container.<br>
</p>

<pre class="brush:php;toolbar:false">.post__likes {
  min-height: 400px; /* to avoid CLS as much as possible! */
}

.post__likesTitle {
  font-size: 2rem;
  color: #000;
}

.post__likesCta {
  color:  #000;
  font-size: 1.25rem;
  font-style: italic;
  display: block;
}

.post__likesList {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.post__like {
  width: 4rem;
  aspect-ratio: 1/1;
  margin-right: -1rem;
  border-radius: 100%;
  filter: drop-shadow(0px 0.125rem 0.125rem rgba(0, 0, 0, 0.25));
}

.post__like__avatar {
  border-radius: 100%;
}

.post__like--howManyMore {
  width: 4rem;
  aspect-ratio: 1/1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  font-weight: bold;
  font-style: italic;
  background-color: #208bfe; /* Bluesky blue */
  color: #fff;
}

Copier après la connexion

Ensuite, nous allons définir deux fonctions qui modifient le DOM en utilisant les données des API Bluesky.

La fonction drawHowManyMore ne s'exécute que s'il y a plus de likes sur la publication que ce qui a été récupéré par l'API getLikes. Encore une fois, j'utilise la syntaxe BEM pour mon CSS ; si vous utilisez quelque chose de différent, vous devrez mettre à jour les classes ajoutées à l'élément likesMore.

La fonction drawLikes parcourt les données J'aime de l'API getLikes et crée un élément img pour chaque acteur. Notez que nous remplaçons avatar par avatar_thumbnail dans la chaîne like.actor.avatar. Il s'agit d'afficher une image de 128 x 128 px, au lieu de 1 000 x 1 000 px par défaut. N'oubliez pas l'attribut de texte alt sur l'élément img.

const LIMIT = 59;

const bskyPostId = document.querySelector("[data-bsky-post-id]").dataset.bskyPostId;

const container = document.querySelector("[data-bsky-container]");
const likesContainer = document.querySelector("[data-bsky-likes]");
const likesCount = document.querySelector("[data-bsky-likes-count]");

const myDid = "add_your_did";
const bskyAPI = "https://public.api.bsky.app/xrpc/";
const getLikesURL = `${bskyAPI}app.bsky.feed.getLikes?limit=${LIMIT}&uri=`;
const getPostURL = `${bskyAPI}app.bsky.feed.getPosts?uris=`;

Copier après la connexion

Voir le fichier JavaScript complet sur GitHub.

Quelques observations sympas

Cela ne prend que quelques secondes entre un utilisateur de Bluesky qui aime une publication et son avatar qui apparaît sur un article de blog.
Les acteurs J'aime sont triés par horodatage décroissant, donc quand quelqu'un aime votre message sur Bluesky, ils apparaissent en en haut à gauche de l'avatar. liste. J'espère que cela crée encore plus de joie que prévu (au moins pour la lecture des géographies de gauche à droite).
L'API Bluesky getPosts se met à jour plus rapidement que l'API getLikes. Cela signifie que lors d'une actualisation de page, le nombre de likes est généralement à jour et les avatars peuvent mettre encore une seconde ou deux à apparaître lors d'une autre actualisation.

Partagez vos résultats avec moi sur Bluesky

J'espère qu'il va sans dire que j'aimerais voir vos implémentations et comment vous avez fait fonctionner ce code pour votre site Web. Lorsque vous êtes prêt à publier à ce sujet sur Bluesky, identifiez le pseudo @whitep4nth3r.com dans les réponses, et j'aimerais que cela mette mon visage sur votre article de blog.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!