mastodon post

mastodon-post

Komponen Web untuk menampilkan mastodon post dan metadatanya.

Demo | Demo templat khusus | Bacaan lebih lanjut

Contoh

Contoh penggunaan umum:

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

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

Contoh menggunakan templat khusus:

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

Contoh penggunaan templat khusus yang lebih kompleks:

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

Fitur

Komponen Web ini memungkinkan Anda untuk:

• Ubah link mastodon post biasa menjadi mastodon post yang dikutip
• Tampilkan metadata postingan di samping postingan, misalnya jumlah balasan, jumlah reblog, jumlah favorit
• Gunakan templat khusus untuk semua contoh komponen pada halaman menggunakan atribut data data-key="name"
• Gunakan templat khusus untuk contoh tertentu menggunakan atribut template
• Ambil data bertingkat menggunakan atribut data-key dan referensi kunci JavaScript biasa, misalnya data-key="account.display_name" atau data-key="media_attachments[0]preview_url"

Instalasi

Anda memiliki beberapa pilihan (pilih salah satu dari ini):

1. Instal melalui npm: npm install @daviddarnes/mastodon-post
2. Unduh sumber secara manual dari GitHub ke proyek Anda.
3. Lewati langkah ini dan gunakan skrip secara langsung melalui CDN pihak ketiga (tidak disarankan untuk penggunaan produksi)

Penggunaan

Pastikan Anda menyertakan <script> dalam proyek Anda (pilih salah satu dari ini):

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

Menggunakan templat khusus

Templat default untuk komponen tersebut terlihat seperti ini:

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

Namun Anda dapat menyesuaikan template dengan menggunakan elemen <template> dengan id mastodon-post-template , yang akan digunakan untuk setiap komponen pada halaman. Berikut ini contoh yang memperlihatkan metrik cantik dari mastodon post sebagai <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 >

Anda juga dapat menggunakan templat berbeda pada halaman yang sama dengan menggunakan atribut template untuk menargetkan elemen <template> dengan id tertentu :

 < 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 diterapkan menggunakan atribut data-key data. Nilai atribut ini harus sesuai dengan titik data dalam respons API status publik Mastodon. Dokumentasi resmi Mastodon memiliki contoh respons status di sini. Atribut data-key juga memungkinkan Anda menargetkan data bertumpuk menggunakan notasi titik JavaScript biasa:

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

Perhatikan bahwa untuk elemen <a> dan <img> nilainya tidak akan diterapkan ke kontennya jika string yang dikembalikan dimulai dengan http dan sebagai gantinya akan diterapkan ke atribut href dan src .

Lihat demo templat khusus serta kode sumber untuk referensi.

Kredit

Dengan ucapan terima kasih kepada orang-orang berikut:

• Zach Leatherman yang telah menginspirasi template repo Komponen Web ini