bluesky post

bluesky-post

Bluesky投稿とそのメタデータを表示するWebコンポーネント。

デモ|カスタムテンプレートデモ|さらに読む

例

一般的な使用例：

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

カスタムテンプレートを使用した例：

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

より複雑なカスタムテンプレートを使用した例：

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

特徴

このWebコンポーネントを使用すると、次のことができます。

• 通常のBluesky Postリンクを引用されたBluesky Postに変える
• ポストメタデータをポストに沿って表面化します。たとえば、返信数、再投稿数など
• data-key="name" data属性を使用して、ページ上のコンポーネントのすべてのインスタンスにカスタムテンプレートを使用します
• template属性を使用して、特定のインスタンスにカスタムテンプレートを使用します
• data-key属性と典型的なJavaScriptキー参照を使用してネストされたデータを取得しますdata-key="record.text"

インストール

いくつかのオプションがあります（これらのいずれかを選択してください）：

1. NPM経由でインストール： npm install @daviddarnes/bluesky-post
2. GitHubからプロジェクトに手動でソースをダウンロードします。
3. この手順をスキップし、サードパーティのCDNを介してスクリプトを直接使用します（生産の使用にはお勧めしません）

使用法

プロジェクトに<script>を含めることを確認してください（これらのいずれかを選択してください）。

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

カスタムテンプレートを使用します

コンポーネントのデフォルトテンプレートは次のようになります。

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

ただし、ページ上のコンポーネントのすべてのインスタンスに使用されるbluesky-post-templateのidを使用して、 <template>要素を使用してテンプレートをカスタマイズできます。これは、BlueSky Postの虚栄心メトリックを<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 >

特定のidを持つターゲット<template>要素にtemplate属性を使用して、同じページで異なるテンプレートを使用することもできます。

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

データはdata-keyデータ属性を使用して適用されます。この属性の値は、Bluesky Public Post API応答内のデータポイントに対応する必要があります。公式のBlueskyドキュメントには、ここにステータス応答の例があります。

<a>および<img>要素の場合、返される文字列がhttpで始まり、代わりにhrefおよびsrc属性にそれぞれ適用される場合、値はコンテンツに適用されないことに注意してください。

参照用のソースコードと同様に、カスタムテンプレートデモとソースコードをご覧ください。

クレジット

次の人々に感謝します：

• このWebコンポーネントのレポンテンプレートを刺激してくれたZach Leatherman