mastodon post

mastodon-post

mastodon postとそのメタデータを表示する Web コンポーネント。

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

例

一般的な使用例:

 < script type =" module " src =" mastodon-post.js " > </ script >

< mastodon-post >
  < a href =" https://mastodon.design/@DavidDarnes/109824258017750161 " >
    Discuss on Mastodon
  </ a >
</ mastodon-post >

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

 < script type =" module " src =" mastodon-post.js " > </ script >

< template id =" mastodon-post-template " >
  < blockquote data-key =" content " > </ blockquote >
</ template >

< mastodon-post >
  < a href =" https://mastodon.design/@DavidDarnes/109824258017750161 " >
    Discuss on Mastodon
  </ a >
</ mastodon-post >

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

 < script type =" module " src =" mastodon-post.js " > </ script >

< template id =" mastodon-post-template " >
  < dl >
    < dt > Reposts </ dt >
    < dd data-key =" reblogs_count " > </ dd >
    < dt > Replies </ dt >
    < dd data-key =" replies_count " > </ dd >
    < dt > Favourites </ dt >
    < dd data-key =" favourites_count " > </ dd >
  </ dl >
  < a data-key =" url " >
    View original post from < img alt =" avatar " data-key =" account.avatar " />
    < strong data-key =" account.display_name " > </ strong > on
    < strong data-key =" hostname " > </ strong >
  </ a >
</ template >

< mastodon-post >
  < a href =" https://mastodon.design/@DavidDarnes/109824258017750161 " >
    Discuss on Mastodon
  </ a >
</ mastodon-post > 

特徴

この Web コンポーネントを使用すると、次のことが可能になります。

• 通常のmastodon postリンクを引用されたmastodon postに変換します
• 投稿のメタデータを投稿と一緒に表示します (返信数、リブログ数、お気に入り数など)。
• data-key="name"データ属性を使用して、ページ上のコンポーネントのすべてのインスタンスにカスタム テンプレートを使用します。
• template属性を使用して特定のインスタンスにカスタム テンプレートを使用する
• data-key属性と一般的な JavaScript キー参照を使用して、ネストされたデータを取得します (例: data-key="account.display_name"またはdata-key="media_attachments[0]preview_url"

インストール

いくつかのオプションがあります (次のいずれかを選択してください)。

1. npm 経由でインストール: npm install @daviddarnes/mastodon-post
2. GitHub からソースをプロジェクトに手動でダウンロードします。
3. この手順をスキップし、サードパーティ CDN 経由でスクリプトを直接使用します (運用環境での使用はお勧めしません)。

使用法

プロジェクトに<script>を必ず含めてください (次のいずれかを選択してください)。

 <!-- Host yourself -->
< script type =" module " src =" mastodon-post.js " > </ script > 

 <!-- 3rd party CDN, not recommended for production use -->
< script
  type =" module "
  src =" https://www.unpkg.com/@daviddarnes/[email protected]/mastodon-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 =" content " > </ blockquote >
  < figcaption >
    < cite >
      < a data-key =" url " >
        < span data-key =" username " > </ span >
        @
        < span data-key =" hostname " > </ span >
      </ a >
    </ cite >
    < dl >
      < dt > Reposts </ dt >
      < dd data-key =" reblogs_count " > </ dd >
      < dt > Replies </ dt >
      < dd data-key =" replies_count " > </ dd >
      < dt > Favourites </ dt >
      < dd data-key =" favourites_count " > </ dd >
    </ dl >
  </ figcaption >
</ figure >

ただし、 mastodon-post-templateのidを持つ<template>要素を使用してテンプレートをカスタマイズできます。この要素は、ページ上のコンポーネントのすべてのインスタンスに使用されます。 mastodon postのバニティメトリクスを<dl>として公開する例を次に示します。

 < template id =" mastodon-post-template " >
  < dl >
    < dt > Reposts </ dt >
    < dd data-key =" reblogs_count " > </ dd >
    < dt > Replies </ dt >
    < dd data-key =" replies_count " > </ dd >
    < dt > Favourites </ dt >
    < dd data-key =" favourites_count " > </ dd >
  </ dl >
</ template >

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

 < template id =" custom-template " >
  < a data-key =" content, url " > </ a >
</ template >

< mastodon-post template =" custom-template " >
  < a href =" https://mastodon.design/@DavidDarnes/109824258017750161 " >
    Discuss on Mastodon
  </ a >
</ mastodon-post >

データは、 data-keyデータ属性を使用して適用されます。この属性の値は、Mastodon パブリック ステータス API 応答内のデータ ポイントに対応する必要があります。 Mastodon の公式ドキュメントには、ステータス応答の例が記載されています。 data-key属性を使用すると、一般的な JavaScript ドット表記を使用してネストされたデータをターゲットにすることもできます。

 < template id =" mastodon-post-template " >
  < figure >
    < blockquote data-key =" content " > </ blockquote >
    < figcaption >
      < cite >
        < a data-key =" url " >
          View original post from
          < img alt =" avatar " data-key =" account.avatar " />
          < strong data-key =" account.display_name " > </ strong > on
          < strong data-key =" hostname " > </ strong >
        </ a >
      </ cite >
    </ figcaption >
  </ figure >
</ template >

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

カスタム テンプレートのデモと参考用のソース コードを確認してください。

クレジット

以下の方々に感謝します。

• この Web コンポーネント リポジトリ テンプレートのインスピレーションを与えてくれた Zach Leatherman