- Sistem komentar konvensional (Disqus, hosting mandiri, GitHub Issues, dll.) tidak digunakan karena masalah kecepatan, pelacakan, beban pemeliharaan, dan batasan pengguna
- Bluesky cocok untuk komentar blog karena tanpa perlu memelihara infrastruktur, dukungan konten kaya, akun berbasis identitas asli, dan percakapan lintas platform
- Cara implementasinya adalah: publikasi postingan blog → bagikan ke Bluesky → tambahkan AT URI ke metadata postingan blog → ambil dan tampilkan thread komentar dari postingan tersebut
- Komponen dipisah menjadi 3: menampilkan semua komentar, menampilkan komentar + balasan per komentar, dan menangani embed gambar dan tautan
- Dengan pendekatan rekursif, menampilkan balasan hingga kedalaman maksimal 5 tingkat; menampilkan grid gambar dan modal, kartu tautan, dan menampilkan teks pengganti untuk embed yang tidak didukung
- Integrasi Astro + React, diload di klien dengan
client:load, dan diaktifkan dengan menambahkan DID serta postCid di frontmatter
- Untuk stabilitas tipe, memanfaatkan tipe TypeScript dari
@atcute/client, dan struktur progressive enhancement agar konten utama tetap tampil normal meski JavaScript dinonaktifkan
- Tanpa server atau DB, performa dijaga dengan memanfaatkan API Bluesky dan CDN
- Pendekatan ini menjaga skalabilitas dan kemandirian dengan menghubungkan ke platform yang sudah dipakai pengguna, bukan membangun ulang fitur sosial per situs
Alasan Memilih Bluesky sebagai Sistem Komentar
- Tidak perlu memelihara infrastruktur
- Mendukung konten kaya, seperti gambar, tautan, dan postingan kutipan
- Kepercayaan dan akuntabilitas berdasarkan akun Bluesky
- Trafik lintas blog dan media sosial dimungkinkan
- Pemisahan kepemilikan konten (postingan blog milik Anda, komentar milik penulis)
Memahami Protokol AT
- DID: pengenal pengguna terdesentralisasi
- CID: pengenal konten
- AT URI: alamat berbentuk
at://did:.../app.bsky.feed.post/...
- Dapat mengambil thread komentar dengan memanggil API
getPostThread tanpa memerlukan autentikasi
Struktur Komponen
- Komponen komentar utama
- Komponen rendering komentar + balasan
- Komponen penanganan embed gambar, tautan, dan lainnya
Penanganan Komentar Bertingkat
- Render rekursif dengan batas kedalaman maksimal 5 tingkat
- Menampilkan hierarki komentar lewat indentasi visual
Penanganan Konten Kaya
- Gambar: disediakan oleh CDN, menampilkan grid multi-gambar dan modal
- Tautan eksternal: rendering kartu dengan thumbnail dan deskripsi
- Embed lainnya: menampilkan teks pengganti
Integrasi Astro
- Menggunakan komponen React +
client:load
- Menambahkan DID Bluesky dan postCid di frontmatter untuk mengaktifkan komentar
Pengalaman Pengembangan
- Dukungan tipe TypeScript meningkatkan stabilitas
- Dengan Progressive Enhancement, kegagalan API tidak memengaruhi konten utama
- Memanfaatkan infrastruktur Bluesky tanpa beban server/DB
Kesimpulan
- Menghindari masalah sistem komentar lama dengan menghubungkan ke platform yang sudah digunakan pengguna
- Kemungkinan peningkatan partisipasi saat Bluesky berkembang
- Berbasis ATProto, sehingga mudah beralih ke AppView lain atau implementasi sendiri
Belum ada komentar.