私のブログ投稿に Bluesky の「いいね！」を表示する方法-CSSチュートリアル-php.cn

私は今、Bluesky で時間を過ごすのをとても楽しんでいます。全体の経験で私が本当に楽しんでいることの 1 つは、プロジェクトがほぼオープンソースであり、人々がそのプラットフォームを使って本当に素晴らしいものを構築しており、楽しむための素晴らしい API がいくつかあることです。

私は、Webmentions 標準と、それを使用してインターネット上のリンクに対する「いいね」やコメント/返信などのデータを表示することで、サイト間の会話を促進する方法についてよく知っています。私は数年前に Webmentions と協力して、他のソーシャルメディアプラットフォームからの Webmention データを自分のサイトに表示しました。ただし、API からデータを取得するだけで十分な場合、多くの困難を乗り越えなければならないように感じることがよくありました。

この投稿では、Bluesky API を使用して、公開ブログ投稿に関連付けた Bluesky 投稿に「いいね！」をしたユーザーのアバターのコレクションを取得します。これにより、次のようなものをブログに表示できます。あなたのウェブサイト。

How I show Bluesky likes on my blog posts

ワークフロー

この Web サイトはイレブンティで構築された静的サイトであるため、公開されたブログ投稿を Bluesky 投稿に関連付けるにはいくつかの手順が必要です。

ブログ投稿を公開すると、静的サイトの構築がトリガーされます
公開されたブログ投稿にリンクする Bluesky 投稿を公開します
Bluesky 投稿の ID を、公開されたブログ投稿 (CMS などで) に関連付けます
サイトを再構築します
利益

技術的な選択肢

この Web サイトは、クライアント側 JavaScript を控えめに使用する静的サイトです。この機能の JavaScript コードは、ブログ投稿に Bluesky Post ID が関連付けられている場合、条件付きでブログページテンプレート上で実行されます。

このアプローチの代替案は、(私の場合) エッジ関数を使用してリクエスト時に静的 HTML レスポンスを変更することですが、過去には、この方法でサードパーティ API を呼び出すとパフォーマンスの問題が発生しました。最初のバイトまでの時間 (TTFB) が期待よりも遅い。詳細については、「残忍な TTFB をどのように修正したか」をお読みください。

さらに、私のウェブサイトのこの機能は段階的な機能強化であり、ページの機能は Bluesky の「いいね！」の表示に依存していません。したがって、クライアントで Bluesky API の呼び出しが失敗したとしても、それは問題ではなく、DOM を適切にクリーンアップできます。これと同じコードをサーバー上で実行すると、(少なくとも適切なエラー処理がなければ) ページのレンダリングがブロックされ、投稿が読まれなくなる可能性があります。大変残念です。

私のサイトは静的サイトなので、技術的には ビルド時間 で Bluesky データを取得し、各ブログ投稿でデータを静的にレンダリングできます。しかし、私はこの機能がほぼリアルタイムのインタラクティブな体験であることで喜びをもたらすことを望んでいました。さらに、データの同期を保つためにウェブサイトを 1 分ごとに再構築するのは理想的ではありません。

パフォーマンスの最適化

n 個のサードパーティ画像 (ユーザーアバター) をロードしていることを考えると、画像のサイズが重要です。幸いなことに、Bluesky API は各ユーザーに対して少なくとも 2 つの画像サイズを提供しているため、最も小さいサイズを使用したいと考えています。

さらに、n 個の画像をロードしていて、ロードにどれくらい時間がかかるか、ページレイアウトにどの程度の影響があるかがわからないことを考慮して、累積レイアウトシフト (CLS) を回避するためにいくつかの考慮事項が行われています。）できるだけ。これらについては、以下のコード例とともに概説します。

ブログ投稿に Bluesky の「いいね！」を表示するための前提条件

Bluesky アカウント
ウェブサイト
いくつかのブログ投稿
Bluesky 投稿 ID をブログ投稿データとともに保存する方法 (例: マークダウンでブログを書いている場合は、前付に投稿 ID を保存します。CMS を使用している場合は、ブログ投稿にフィールドを追加します)コンテンツモデルなど)

コード

魔法を実現する HTML、CSS、JavaScript を見てみましょう。

HTML

HTML はセクション要素内に含まれています。このコンポーネントには以下が含まれます:

h3 要素。いいねの総数が入力されます (見出しレベルの要素は異なる場合があります)。
人々に「いいね！」を促すための Bluesky 投稿へのリンク
空の UL 要素。Bluesky アバターで埋める準備ができています。

CSS クラスには BEM 構文を使用していますが、お好みの CSS システムを使用できます。 JavaScript で DOM 要素をターゲットにするために、data-bsky というプレフィックスを付けた data-attributes を使用しています。 JavaScript で CSS クラスを使用して DOM 要素をターゲットにすることもできますが、私は懸念を分離するためにデータ属性を使用することを好みます。必要に応じて、要素に ID を使用し、JavaScript でそれらをターゲットにすることもできます。

ブログ投稿に関連付けられた bskyPostId は、このコンポーネントの隣のメタタグのデータ属性に追加されます。私が静的サイトを構築しており、別の JavaScript ファイル内のクライアント側のビルド時変数にアクセスする必要があることを考えると、これは純粋に私の設定に固有のものです。たとえば、別のフレームワークを使用している場合、アプリの状態で bskyPostId にアクセスできる場合があります。必要に応じて編集してください。

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

ログイン後にコピー

JavaScript

免責事項: このコードはプレーンな JavaScript で提供されています。必要に応じて、このコードを独自の Web サイトフレームワークに適合させることもできますが、これをプレーンな JavaScript で記述する利点は、そのまま任意のフロントエンドで使用できることです。

まず、いくつかの変数を定義する必要があります。 LIMIT は、表示方法に応じて、ページに表示するアバターの最大数を指定します。私の制限は 59 に設定されています。これは、4 行に収まるアバターの数がこの数であるためです (さらに「いいね！」の数を表示するための追加スペースが必要です)。この API エンドポイントで取得できるアバターの最大数は 100 です。

上記の HTML セクションで説明したように、bskyPostId はメタタグから取得されます (フレームワークと既存のコードに応じて、これを別の方法で行う必要がある場合があります)。

データを取得した後に DOM を変更するには、document.querySelector() を使用してコンテナ、likeContainer、および likesCount 要素にアクセスする必要があります。

myDid の値を独自の Bluesky DID に置き換えます。それ以外はすべて順調です。

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

ログイン後にコピー

次に、Bluesky API からのデータを使用して DOM を変更する 2 つの関数を定義します。

drawHowManyMore 関数は、getLikes API によって取得された数よりも多くの「いいね」が投稿にある場合にのみ実行されます。繰り返しますが、CSS には BEM 構文を使用しています。別のものを使用している場合は、likesMore 要素に追加されるクラスを更新する必要があります。

drawLikes 関数は、getLikes API からの Like データをループし、アクターごとに img 要素を作成します。 like.actor.avatar 文字列内の avatar を avatar_thumbnail に置き換えていることに注意してください。これは、デフォルトの 1000x1000 ピクセルの代わりに 128x128 ピクセルの画像を表示するためです。 img 要素の alt text 属性を忘れないでください。

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

ログイン後にコピー

GitHub で完全な JavaScript ファイルを表示します。

いくつかのクールな観察

Bluesky ユーザーが投稿に「いいね」を押してから、アバターがブログ投稿に表示されるまで、わずか数秒しかかかりません。
「いいね！」アクターはタイムスタンプの降順で並べ替えられるため、誰かが Bluesky であなたの投稿に「いいね！」をすると、アバターの左上に表示されます。リスト。これにより、意図した以上の喜びが生まれることを願っています (少なくとも地理を左から右に読む場合には)。
Bluesky getPosts API は getLikes API よりも速く更新されます。これは、通常、ページを更新するといいね数が最新になり、別の更新でアバターが表示されるまでにさらに 1 ～ 2 秒かかる可能性があることを意味します。