Wie ich Bluesky-Likes in meinen Blogbeiträgen zeige

Im Moment genieße ich es wirklich, Zeit bei Bluesky zu verbringen. Eines der Dinge, die mir an der gesamten Erfahrung wirklich gefallen, ist, dass das Projekt weitgehend Open Source ist, die Leute einige wirklich coole Dinge mit der Plattform erstellen und es einige nette APIs gibt, mit denen man Spaß haben kann.

Ich bin mit dem Webmentions-Standard vertraut und weiß, wie er verwendet werden kann, um standortübergreifende Konversationen zu erleichtern, indem Daten wie „Gefällt mir“-Angaben und Kommentare/Antworten auf Links im Internet angezeigt werden. Ich habe vor einigen Jahren mit Webmentions zusammengearbeitet, um Webmention-Daten von anderen Social-Media-Plattformen auf meiner Website anzuzeigen. Allerdings fühlt es sich oft wie eine Menge Hürden an, die man überwinden muss, wenn man nur ein paar Daten von einer API abrufen kann.

In diesem Beitrag werden wir die Bluesky-API verwenden, um eine Sammlung von Avataren von Benutzern abzurufen, denen ein Bluesky-Beitrag gefallen hat, den Sie mit einem öffentlichen Blog-Beitrag verknüpft haben, damit Sie etwas anzeigen können, das so aussieht Ihre Website.

Der Arbeitsablauf

Da es sich bei dieser Website um eine statische Website handelt, die mit Eleventy erstellt wurde, sind einige Schritte erforderlich, um einen veröffentlichten Blog-Beitrag mit einem Bluesky-Beitrag zu verknüpfen.

1. Veröffentlichen Sie einen Blog-Beitrag, der einen statischen Site-Build auslöst
2. Veröffentlichen Sie einen Bluesky-Beitrag, der auf den veröffentlichten Blog-Beitrag verweist
3. Verknüpfen Sie die ID des Bluesky-Beitrags mit dem veröffentlichten Blog-Beitrag (z. B. in einem CMS)
4. Erstellen Sie die Website neu
5. Gewinn

Technische Entscheidungen

Diese Website ist eine statische Website, die clientseitiges JavaScript sparsam verwendet. Der JavaScript-Code für diese Funktionalität wird auf meinen Blog-Seitenvorlagen unter der Bedingung ausgeführt, dass mit einem Blog-Beitrag eine Bluesky-Beitrags-ID verknüpft ist.

Alternativen zu diesem Ansatz wären (in meinem Fall) die Verwendung einer Edge-Funktion, um die statische HTML-Antwort zum Zeitpunkt der Anfrage zu ändern, aber in der Vergangenheit hatte ich Leistungsprobleme beim Aufrufen von APIs von Drittanbietern auf diese Weise, z eine langsamere Zeit bis zum ersten Byte (TTFB) als gewünscht. Lesen Sie, wie ich mein brutales TTFB repariert habe, um mehr Kontext zu erhalten.

Außerdem handelt es sich bei dieser Funktion auf meiner Website um eine progressive Verbesserung, und die Funktion der Seite ist nicht davon abhängig, dass Bluesky-Likes angezeigt werden. Daher spielt es keine Rolle, wenn Aufrufe der Bluesky-API auf dem Client fehlschlagen, und wir können das DOM entsprechend bereinigen. Wenn wir denselben Code auf einem Server ausführen würden, könnte er das Rendern der Seite blockieren (zumindest ohne ordnungsgemäße Fehlerbehandlung) und der Beitrag würde nicht gelesen. Große Schande.

Da meine Website eine statische Website ist, könnte ich technisch gesehen die Bluesky-Daten zur Erstellungszeit abrufen und die Daten in jedem Blog-Beitrag statisch rendern. Ich wollte jedoch, dass diese Funktion Freude bereitet, indem sie ein interaktives Erlebnis nahezu in Echtzeit bietet. Und außerdem wäre es nicht ideal, meine Website etwa jede Minute neu zu erstellen, um die Daten synchron zu halten.

Optimierung für Leistung

Da wir n Bilder von Drittanbietern (Benutzer-Avatare) laden, ist die Größe der Bilder wichtig. Glücklicherweise stellt die Bluesky-API mindestens zwei Bildgrößen für jeden Benutzer bereit, und wir möchten die kleinste verwenden.

Angesichts der Tatsache, dass wir n Bilder laden und nicht wissen, wie lange das Laden dauern wird oder welchen Einfluss sie auf das Seitenlayout haben werden, wurden außerdem einige Überlegungen angestellt, um Cumulative Layout Shift (CLS) zu vermeiden ) so weit wie möglich. Diese werden zusammen mit den Codebeispielen unten beschrieben.

Voraussetzungen, um Bluesky-Likes in Ihren Blogbeiträgen anzuzeigen

1. Ein Bluesky-Konto
2. Eine Website
3. Einige Blogbeiträge
4. Eine Möglichkeit, eine Bluesky-Beitrags-ID mit Ihren Blog-Beitragsdaten zu speichern (z. B. wenn Sie Ihre Blogs im Markdown schreiben, speichern Sie die Beitrags-ID in Ihrem Titelblatt; wenn Sie ein CMS verwenden, fügen Sie Ihrem Blog-Beitrag ein Feld hinzu Inhaltsmodell usw.)

Der Code

Werfen wir einen Blick auf HTML, CSS und JavaScript, die diese Magie möglich machen.

Der HTML

Der HTML-Code ist in einem Abschnittselement enthalten. Diese Komponente enthält:

• ein h3-Element, das mit der Gesamtzahl der „Gefällt mir“-Angaben gefüllt wird (Ihr Element auf Überschriftenebene kann variieren),
• einen Link zum Bluesky-Beitrag, um die Leute zu ermutigen, ihn zu mögen, und
• ein leeres ul-Element, bereit zum Füllen mit Bluesky-Avataren.

Für die CSS-Klassen verwende ich die BEM-Syntax, Sie können jedoch jedes beliebige CSS-System verwenden, das Sie bevorzugen. Um die DOM-Elemente in JavaScript anzusprechen, verwende ich Datenattribute mit dem Präfix data-bsky; Sie können mithilfe von CSS-Klassen in JavaScript auf DOM-Elemente abzielen, aber ich bevorzuge die Verwendung von Datenattributen, um Anliegen zu trennen. Sie könnten sogar IDs für die Elemente verwenden und diese bei Bedarf mit JavaScript gezielt ansprechen.

Die mit einem Blog-Beitrag verknüpfte bskyPostId wird einem Datenattribut in einem Meta-Tag neben dieser Komponente hinzugefügt. Dies ist ein reiner Einzelfall für mein Setup, da ich eine statische Site erstelle und auf der Clientseite Zugriff auf eine Build-Time-Variable in einer separaten JavaScript-Datei benötige. Möglicherweise haben Sie in Ihrem App-Status Zugriff auf Ihre bskyPostId, wenn Sie beispielsweise ein anderes Framework verwenden. Bearbeiten Sie es nach Belieben.

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

Das JavaScript

Haftungsausschluss: Dieser Code wird in einfachem JavaScript bereitgestellt; Sie können diesen Code bei Bedarf an Ihr eigenes Website-Framework anpassen, aber das Schöne daran, ihn in einfachem JavaScript zu schreiben, ist, dass Sie ihn unverändert auf jedem Frontend verwenden können.

Zuerst müssen Sie einige Variablen definieren. Das LIMIT gibt die maximale Anzahl an Avataren an, die Sie auf Ihrer Seite anzeigen möchten, je nachdem, wie Sie sie anzeigen möchten. Mein Limit liegt bei 59, weil so viele Avatare gut in vier Reihen passen (mit zusätzlichem Platz, um anzuzeigen, wie viele weitere Likes es gibt). Die maximale Anzahl an Avataren, die Sie mit diesem API-Endpunkt abrufen können, beträgt 100.

Die bskyPostId wird aus dem Meta-Tag abgerufen, wie im HTML-Abschnitt oben beschrieben (je nach Framework und vorhandenem Code müssen Sie dies möglicherweise anders machen).

Um das DOM nach dem Abrufen der Daten zu ändern, müssen wir mit document.querySelector() auf die Elemente Container, likesContainer und likesCount zugreifen.

Ersetzen Sie den Wert von myDid durch Ihren eigenen Bluesky DID. Und alles andere ist startklar.

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

Als nächstes definieren wir zwei Funktionen, die das DOM mithilfe der Daten aus den Bluesky-APIs ändern.

Die Funktion drawHowManyMore wird nur ausgeführt, wenn der Beitrag mehr Likes enthält, als von der getLikes-API abgerufen wurden. Auch hier verwende ich die BEM-Syntax für mein CSS. Wenn Sie etwas anderes verwenden, müssen Sie aktualisieren, welche Klassen dem likesMore-Element hinzugefügt werden.

Die Funktion „drawLikes“ durchläuft die Likes-Daten der getLikes-API und erstellt ein img-Element für jeden Akteur. Beachten Sie, dass wir avatar durch avatar_thumbnail in der Zeichenfolge like.actor.avatar ersetzen. Dadurch wird ein Bild mit einer Größe von 128 x 128 Pixel anstelle der Standardgröße von 1000 x 1000 Pixel angezeigt. Vergessen Sie nicht das Alt-Text-Attribut im img-Element.

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=`;

Sehen Sie sich die vollständige JavaScript-Datei auf GitHub an.

Einige coole Beobachtungen

1. Es dauert nur wenige Sekunden, bis ein Bluesky-Benutzer einen Beitrag mit „Gefällt mir“ markiert, bis sein Avatar in einem Blog-Beitrag erscheint.

2. Die Likes-Akteure sind nach Zeitstempel des Likes absteigend sortiert. Wenn also jemand Ihren Beitrag auf Bluesky mag, erscheint er oben links im Avatar Liste. Ich hoffe, dass dies noch mehr Freude bereitet als beabsichtigt (zumindest für Leseregionen von links nach rechts).

3. Die Bluesky getPosts API wird schneller aktualisiert als die getLikes API. Das bedeutet, dass bei einer Seitenaktualisierung die Likes-Zahl im Allgemeinen aktuell ist und es bei einer weiteren Aktualisierung ein oder zwei weitere Sekunden dauern kann, bis die Avatare angezeigt werden.

Teilen Sie mir Ihre Ergebnisse auf Bluesky mit

Ich hoffe, es versteht sich von selbst, dass ich gerne Ihre Implementierungen sehen würde und wie Sie diesen Code auf Ihrer Website zum Laufen gebracht haben. Wenn Sie bereit sind, darüber auf Bluesky zu posten, markieren Sie den Benutzernamen @whitep4nth3r.com in den Antworten, und ich freue mich, wenn mein Gesicht in Ihrem Blog-Beitrag erscheint.

Das obige ist der detaillierte Inhalt vonWie ich Bluesky-Likes in meinen Blogbeiträgen zeige. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!