Saya menambahkan bagian komentar Bluesky ke blog saya

• Contoh implementasi yang memungkinkan komentar ditampilkan di situs statis dengan menggunakan Bluesky API
• Karena Bluesky menangani autentikasi akun, manajemen spam, penyimpanan, dan moderasi, tidak perlu memelihara server terpisah
• Implementasinya terdiri dari sekitar 200 baris kode TypeScript, memanfaatkan @bluesky/api dan Tanstack react-query
• Komentar ditampilkan dalam bentuk read-only, dan dimuat otomatis dengan menghubungkan ID postingan Bluesky ke metadata tiap artikel blog
• Implementasi eksperimental yang menunjukkan kemungkinan menggabungkan platform sosial terbuka dan blog statis

---

Latar belakang implementasi bagian komentar Bluesky

• Titik awalnya adalah kesulitan untuk meng-host fitur komentar sendiri pada situs yang dibuat secara statis
  • Konten statis yang dideploy ke CDN tidak bisa menyimpan data dinamis
  • Menjalankan VPS atau layanan cloud terpisah menambah biaya dan beban pengelolaan
• Bluesky adalah platform terbuka berbasis API publik dan protokol AT yang sudah menyediakan fungsi-fungsi yang dibutuhkan untuk mengelola komentar
  • Bluesky menangani autentikasi akun, penyaringan spam, penyimpanan, dan moderasi
  • Di sisi blog, cukup panggil API untuk menampilkan komentar

Alternatif lain dan alasan memilih Bluesky

• Alternatif seperti Twitter, Disqus, dan giscus (berbasis GitHub Discussions) juga sempat dipertimbangkan
• Bluesky dibangun di atas protokol AT yang terdesentralisasi, sehingga risikonya lebih rendah untuk berada di bawah kendali satu perusahaan tertentu
• Dibanding pendekatan berbasis GitHub, Bluesky lebih cocok untuk hosting komentar karena merupakan platform yang berpusat pada percakapan

Cara implementasi

• Penulis merujuk pada paket bluesky-comments yang dipublikasikan Cory Zue, tetapi memilih untuk mengimplementasikannya sendiri
  • Kode dibuat sendiri demi kustomisasi yang sesuai dengan gaya situs dan kemudahan pengembangan di masa depan
  • Total implementasi, termasuk komponen UI dan fungsi API, berukuran sekitar 200 baris
• Pada awalnya sempat mempertimbangkan fitur posting langsung melalui OAuth, tetapi dikeluarkan karena kompleksitas UI dan keterbatasan waktu
  • Hasil akhirnya adalah implementasi fitur tampilan komentar read-only saja

Susunan teknis

• Situs dibangun menggunakan React Server Components dan Parcel
  • Konten ditulis dalam MDX, sehingga JavaScript/JSX bisa disertakan secara langsung
  • Objek metadata pada tiap artikel menyertakan bskyPostId untuk menghubungkannya ke postingan Bluesky
• Menggunakan Bluesky TypeScript SDK (@bluesky/api) untuk mengambil data thread komentar dari endpoint getPostThread
• Permintaan API dikelola dengan Tanstack react-query
  • Status error, loading, dan retry ditangani secara otomatis

Desain UI

• Dari respons Bluesky, hanya konten teks yang diekstrak lalu ditampilkan dalam UI komentar yang sederhana
• Struktur thread dibedakan dengan indentasi dan garis batas di sisi kiri
  • Gambar profil dan tanggal posting mengacu pada desain Bluesky
• Di bagian atas ditambahkan tautan ke postingan Bluesky asli untuk mendorong partisipasi dalam percakapan
• Tidak ada fitur menulis komentar; pengguna meninggalkan balasan langsung di Bluesky

Kemungkinan ke depan

• Jika diperlukan, implementasi ini bisa dirilis sebagai paket terpisah
  • Namun kode saat ini masih disesuaikan untuk situs pribadi penulis
  • Karena strukturnya sederhana, pengembang lain juga bisa dengan mudah mengimplementasikannya dengan merujuk ke source code
• Masih belum jelas apakah integrasi komentar Bluesky akan membantu meningkatkan keterlibatan di blog

Respons pengguna Bluesky

• Banyak pengguna Bluesky meninggalkan respons positif di komentar seperti “ide bagus”, “respons cepat”, “cocok sebagai alternatif Disqus”
• Sebagian juga mengajukan pertanyaan tentang manajemen spam, penanganan komentar bertingkat, dan dukungan lampiran
• Penulis menjelaskan bahwa fitur moderasi pribadi di Bluesky dapat digunakan untuk menyembunyikan komentar tertentu

[GN⁺]

Opini Hacker News

• Jika Anda merender blog atau situs web dengan static site generator, ada usulan untuk mengambil komentar sebagai file konten dan memasukkannya ke dalam proses build

  1. mengumpulkan komentar lewat email, skrip CGI, program server, dan sebagainya
  2. meninjaunya secara manual untuk menghapus spam
  3. menyimpan komentar sebagai file .md atau .html
  4. lalu merendernya bersama saat build situs
     Proses ini memang memakan banyak kerja manual, tetapi punya keunggulan berupa pemblokiran spam dan kepemilikan data penuh
  • Saya juga membuat sistem serupa berbasis email. Detailnya saya tulis di artikel blog saya
  • Untuk situs kecil, biasanya hanya perlu mengelola beberapa komentar per hari, jadi peninjauan manual masih sangat memungkinkan. Selain itu, ini juga bisa dengan mudah diotomatisasi lewat pembaruan file Markdown otomatis
  • Ada yang bercanda, “Saya hanya menerima komentar lewat faks ;)”
  • Ada juga yang menanggapi, “Terdengar mengerikan,” menganggapnya tidak efisien

• Jika Anda tidak ingin memakai React, Anda bisa melihat web component komentar Bluesky yang saya buat
  Bisa dilihat di repositori GitHub dan playground tema.
  Kustomisasi tema-nya sangat mudah

• Dengan mengambil ide dari tulisan asli, ada yang mengimplementasikannya sebagai sistem komentar berbasis Mastodon
  Detailnya bisa dilihat di artikel blog saya

  • Sebenarnya, integrasi komentar Fediverse seperti ini sudah lama dicoba dengan Mastodon maupun Bluesky
    Referensi: artikel blog terkait

• Ada pembicaraan bahwa karena undang-undang terkait ujaran kebencian di UE, operator situs bisa dihukum jika tidak memfilter komentar, dan saya penasaran bagaimana kenyataannya
  Karena itu saya memilih mematikan fitur komentar sepenuhnya

  • Saya bukan ahli hukum, tetapi risiko seperti ini sering dibesar-besarkan karena motif politik. Hukum UE mempertimbangkan skala dan tujuan situs. Saya belum pernah mendengar kasus situs pribadi kecil dihukum
  • Dengan memanfaatkan moderation labeler Bluesky, pemfilteran awal dimungkinkan. Memang belum ada yang disesuaikan dengan standar UE, tetapi Anda bisa membuat labeler sendiri untuk menyaring hanya komentar bermasalah
  • Terlepas dari soal hukum, saya memang tidak ingin ujaran kebencian muncul di situs yang membawa nama saya

• Blog saya sepenuhnya statis, dan dengan skrip Cloudflare Worker 50 baris, komentar bisa diterima lalu langsung ditambahkan ke Markdown.
  Ini bisa dilakukan tanpa perlu meng-embed fitur komentar

  • Akan menarik jika komentar di-auto-commit sebagai Pull Request, sehingga PR bisa dipakai sebagai alat peninjauan komentar
  • Ada yang bercanda, “Akan lebih keren lagi kalau itu benar-benar ColdFusion”
  • Ada juga yang bertanya, “Bisakah Anda membagikan tautan atau detail implementasinya?”

• Dengan memanfaatkan API Bluesky, ini juga bisa diotomatisasi dengan cara otomatis mencari postingan pertama yang berisi tautan blog tertentu lalu menghubungkannya sebagai komentar

• Saya juga membuat akun untuk uji coba karena sepertinya ini bisa membantu pertumbuhan Bluesky. Ini tampak seperti ide growth hacking yang cukup menarik

  • Tetapi saya rasa SNS berorientasi profit pada akhirnya akan menjadi seperti Twitter.
    Idealnya, sistem komentar self-hosted atau berbasis Fediverse akan lebih berkelanjutan
  • Ada juga pendapat bahwa sulit untuk sukses hanya dengan pesan “kami bukan platform yang itu”

• Blog saya tidak terlalu populer, tetapi dulu saya pernah mengalami neraka spam dan komentar kebencian
  Jadi saya tidak berniat lagi membuka fitur komentar di blog pribadi

• Bahkan pada sistem berbasis Bluesky, Anda tetap bisa menambahkan labeler sendiri untuk melakukan sensor mandiri dengan memfilter komentar yang memiliki label tertentu

• Saya juga melakukan hal serupa dengan ide yang mirip, menambahkan fitur komentar per lokasi OSM di cartes.app selain di blog saya
  Review bisa ditinggalkan dengan akun ATproto, dan datanya disimpan di PDS dalam bentuk JSON milik pengguna

  • Ada komentar yang bertanya, “Keren sekali. Bagaimana Anda mengumpulkan datanya, apakah dengan mendengarkan Bluesky firehose?”