bluesky post

bluesky-post

Komponen web untuk menampilkan posting bluesky dan metadata mereka.

Demo | Demo Template Kustom | Bacaan lebih lanjut

Contoh

Contoh Penggunaan Umum:

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

Contoh Menggunakan Template Kustom:

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

Contoh Menggunakan Template Kustom yang Lebih Kompleks:

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

Fitur

Komponen web ini memungkinkan Anda untuk:

• Ubah tautan pos bluesky biasa menjadi posting bluesky yang dikutip
• Permukaan post metadata di samping pos, misalnya jumlah balasan, jumlah repost, seperti jumlah
• Gunakan templat khusus untuk semua contoh komponen pada halaman menggunakan data-key="name" atribut data
• Gunakan template khusus untuk instance tertentu menggunakan atribut template
• Ambil data bersarang menggunakan atribut data-key dan referensi kunci JavaScript yang khas, misalnya data-key="record.text"

Instalasi

Anda memiliki beberapa opsi (pilih salah satunya):

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

Penggunaan

Pastikan Anda memasukkan <script> dalam proyek Anda (pilih salah satunya):

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

Menggunakan Template Kustom

Template default untuk komponen terlihat seperti ini:

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

Namun Anda dapat menyesuaikan template dengan menggunakan elemen <template> dengan id bluesky-post-template , yang akan digunakan untuk setiap contoh komponen pada halaman. Berikut adalah contoh yang baru saja memaparkan metrik kesombongan dari pos bluesky sebagai <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 >

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

 < 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 diterapkan menggunakan atribut data-key data. Nilai atribut ini harus sesuai dengan titik data dalam respons API pos publik bluesky. Dokumentasi Bluesky resmi memiliki contoh respons status di sini.

Perhatikan bahwa untuk elemen <a> dan <img> Nilai tidak akan diterapkan pada kontennya jika string yang dikembalikan dimulai dengan http dan sebaliknya akan diterapkan masing -masing pada atribut href dan src .

Lihat demo Template Kustom serta kode sumber untuk referensi.

Kredit

Dengan terima kasih kepada orang -orang berikut:

• Zach Leatherman karena menginspirasi Template Repo Komponen Web ini