Membangun Fitur Komentar Bluesky di Blog Saya

 (natalie.sh)
1 poin oleh GN⁺ 2025-08-08 | 1 komentar | Bagikan ke WhatsApp
  • 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

Bacaan terkait

1 komentar

 
GN⁺ 2025-08-08
Komentar Hacker News

  • Saya berharap ada orang yang menjelaskan ide besar tentang bagaimana Bluesky akan memonetisasi di masa depan; meski dibungkus dalam arsitektur teknis yang rumit, saya penasaran jika akhirnya menjadi sistem berbayar, bentuknya akan seperti apa.

  • Menarik menurut saya; secara pribadi saya suka membaca orang lain yang membangun dan mengoperasikan situs web mereka secara mandiri. Tulisan ini menyebutkan permasalahan sistem komentar dan empat alternatif, tapi saya ingin bilang bahwa metode kelima juga efektif. Setelah mencoba beberapa sistem komentar pihak ketiga, saya akhirnya membuat sistem komentar sederhana sendiri (form.lisp) yang saya gunakan sekarang. Setiap komentar disimpan sebagai file teks, jadi saya tidak perlu khawatir tentang spam, XSS, atau komentar yang tidak bermakna, dan tiap akhir pekan saya memeriksanya secara manual lalu menambahkannya ke blog. Komentar disimpan sebagai file HTML biasa, dan generator situs statis (site.lisp) membuat halaman komentar (contoh komentar) bersama artikel, jadi secara esensi berfungsi sebagai generator komentar statis. Dua belas? (lima) properti yang disebutkan di tulisan itu (tanpa infrastruktur tambahan, konten kaya, identitas asli, dan sebagainya) tidak semuanya cocok, tetapi metode ini cocok untuk saya dan sudah berjalan dengan baik selama minimal 4 tahun.

    • Menerima komentar melalui formulir email lalu menambahkannya secara manual di bagian bawah artikel dari sisi admin juga cukup oke.

    • Metode saya juga sangat cocok untuk blog bertraffic rendah, tetapi secara pribadi saya merasa canggung jika suara orang lain masuk ke situs saya, jadi saya menghapus komentar dan menggunakan blog hanya sebagai ruang ekspresi kepribadian saya. Sebagai gantinya, saya lebih suka meninggalkan umpan balik lewat email ke blogger lain yang menginspirasi saya.

    • Rasanya mirip dengan menerima kontribusi pembaca di surat kabar.

  • Rekomendasi saya adalah cactus.chat; berbasis Matrix dan mendukung tamu, jadi orang bisa berkomentar meski tidak punya akun Matrix. Jika Anda memakai akun sendiri, maka untuk tiap pos Anda akan ikut dalam ruang Matrix.

  • Bluesky sangat berguna untuk penyimpanan informasi berbasis akun pengguna yang sudah ada; saat ini mereka sedang mengembangkan sistem ulasan berbasis Bluesky di peta web open source cartes.app. Tidak mudah, karena perlu membuat lexicon dan terus mengelola DB mengikuti stream Bluesky.

    • Sebenarnya bisa sampai titik tertentu tanpa DB. Di scrapboard.org yang saya buat, API getRecord saja (Dokumentasi) sudah memungkinkan banyak pengambilan data klien.

    • Saya menyarankan pakai mangrove.reviews sebagai pengganti. Layanan itu memakai lisensi CC-BY-SA yang jelas, dan MapComplete.org juga menggunakannya. Bluesky pun suatu saat mungkin bermasalah.

  • Saya skeptis terhadap keberlanjutan model monetisasi Bluesky; kenyataannya apa pun yang saat ini gratis pada dasarnya karena investasi VC (venture capital). Karena itu saya berhati-hati mengadopsinya, dan saya khawatir API akan ditutup atau sistem komentarnya rusak dalam waktu dekat.

    • Bluesky secara arsitektur berjalan di bawah Personal Data Server (PDS) milik pengguna; siapa pun dapat mengganti PDS, dan server aplikasi resmi Bluesky hanya berperan sebagai agregator. Server aplikasi app server, app view buatan pihak ketiga, dan lain-lain juga dapat mengakses data yang sama, jadi tidak ada keharusan untuk bergantung pada API resmi. Dalam banyak hal, keterbukaannya tinggi.

    • Saya sangat percaya pada konsep POSSE. Aspek positif dari “siklus enshittification” adalah kita dapat menikmati pengalaman komunitas online yang nyaman dalam beberapa waktu, lalu berpindah ke tempat lain. Seperti klub bagus yang dulu hilang, saya rasa kita tidak perlu terlalu melekat. Saya juga punya tautan di Mastodon yang merangkum pemikiran saya: penjelasan teoritis

    • Akan ada saatnya Bluesky beralih ke monetisasi, tapi AI dan layanan lain juga pada akhirnya berjalan dengan skema dana VC. Seperti Twitter, Uber, Doordash, meskipun suasananya akhirnya memburuk, selama VC terus menumpahkan dana untuk mengejar kekayaan baru, menikmati ‘kelimpahan’ itu sendiri hingga batasnya juga adalah fenomena yang menarik.

  • Ekosistem Bluesky terasa benar-benar hebat. Saya pernah melihat contoh kasus seperti ini sebelumnya (sistem komentar berbasis Bluesky). Kekurangannya, untuk tiap halaman web harus ada postingan terpisah di Bluesky agar sistem komentar berfungsi; saya pikir akan lebih baik jika ada webcomponent dan sejenisnya.

  • Anda menulis bahwa “selama bertahun-tahun tidak bisa memasang sistem komentar yang layak di blog”, namun pada seluruh blog saya hanya ada dua artikel tahun 2025 (salah satunya artikel ini).

    • Dulu saya pernah melihat bahwa pernah ada blog lain melalui archive.org.

  • Menarik karena ini menjadi cara berinteraksi dengan sosial media tanpa harus langsung berhadapan dengan feed sosial. Saya ingin menambahkan fungsi ini ke blog saya agar orang bisa berkomentar langsung, dan saya bisa berinteraksi dengan Bluesky atau sosial lain hanya lewat antarmuka seperti ini. Membuka feed sering kali berujung pada “doomscrolling” atau membuang-buang waktu, jadi lewat cara ini saya merasakan kemungkinan baru untuk tetap terhubung dengan media sosial sambil menghindari lingkaran setan itu.

    • Saya setuju dengan “kalau buka feed maka yang kelihatan akhirnya hanya informasi yang tidak bermakna.”, walaupun kadang saya juga curiga apakah itu memang bukan tujuan desain semula.

  • Saya merasa Bluesky memberi nuansa bahwa ia menciptakan lagi suasana di internet di mana ide segar bisa keluar dengan bebas.

    • Nyatanya, ini bisa dianggap sebagai opsi integrasi yang lebih terbuka dibandingkan Threads; mungkin ungkapan “inovasi terbuka” lebih cocok dipakai untuk ATProto.

    • Saya tidak ingin menaruh terlalu banyak porsi pada perusahaan atau satu kelompok, tetapi untuk saat ini komunitas Bluesky memang menyenangkan. Saya dulu adalah penggemar Twitter, dan sekarang sepertinya mayoritas pengguna utama Bluesky juga demikian. Bagaimana hasil akhirnya, kita lihat nanti.

    • Saya menganut slogan “bukan platform, tapi protokol”, dan juga istilah “build mode”, intinya adalah membuat sesuatu yang sulit dimiliki atau disalahgunakan.

    • Jika Anda memicu operator Bluesky atau kelompok pengguna tertentu, atau dilaporkan oleh kelompok tertentu, akun dapat langsung diblokir, atau jika masuk daftar hitam yang sudah dibagikan sebelumnya Anda bisa tidak terlihat sebelum sempat bicara. Pada dasarnya, ini terasa seperti upaya membuat lingkungan yang lebih keras lagi dari Twitter lama, ada juga unsur perebutan kekuasaan ala kantin sekolah menengah yang cukup kekanak-kanakan.

  • Karena saya tidak menghosting blog sendiri dan bergantung pada Bluesky, akhirnya Bluesky yang mengelolanya. Mereka bilang tidak ada lock-in platform, tetapi saya penasaran kalau besok Bluesky memblokir akun saya atau perusahaannya bangkrut, apa rencananya. Secara teori, bisa migrasi ke produk yang kompatibel AT, tapi saya khawatir banyak data yang mungkin hilang.

    • Kalau Anda tertarik pada topik ini, di https://whtwnd.com/bnewbold.net ada informasi praktis dan alat-alat tentang membangun relay network, migrasi data, dll yang berbasis Bluesky dan AT Proto. Ada kemajuan di bidang migrasi data, portabilitas, dan dukungan relay alternatif; Anda juga bisa lihat tautan terkait. (Penulis blog itu, kalau disebut, adalah karyawan Bluesky; saya tidak ada hubungannya.)

    • Anda dapat mencadangkan data pribadi Anda di IPFS dengan file CAR dalam bentuk tarball; setelah itu, melalui dokumen did:plc akun atau DNS record Anda dapat memulihkan ke PDS mana pun. Jika PDS saat ini rusak atau diblokir, Anda bisa langsung pindah ke server lain. Ada berbagai implementasi open source seperti relay (node gossip), PDS, klien, appview (backend aplikasi web Bluesky), dan penyedia hosting. Bahkan jika Bluesky mati besok pun, Anda bisa dengan mudah melakukan self-hosting atau meneruskan aplikasi yang sama lewat vendor lain, misalnya zeppelin.social. Direktori PLC masih dikelola Bluesky, tetapi sedang berpindah ke yayasan independen; jika perlu, mudah untuk mereplikasinya. Dengan metode did:web, ketergantungan hanya pada sistem DNS, sehingga independensinya tinggi.

    • Selain itu, Bluesky juga secara nyata menyingkirkan pengguna yang berhaluan libertarian (pro-liberty) atau kanan, sementara atmosfer bagi kaum kiri atau yang netral terhadap politik terasa baik.