TeknoCerdas.com – Salam cerdas untuk kita semua. Salah satu fitur yang sering tidak ada pada static website adalah kolom komentar pengunjung. Tidak terkecuali TeknoCerdas yang juga merupakan static website. Salah satu alternatif adalah menggunakan GitHub Comments untuk static website yang dimiliki.
Ada beberapa nilai plus ketika menggunakan GitHub Comments pada website, diantaranya:
- Gratis. Tidak perlu mengeluarkan biaya.
- Notifikasi ketika ada komentar baru. Ini adalah cara kerja default dari sistem Issue yang ada pada GitHub.
- Tidak perlu memikirkan masalah infrastruktur untuk sistem komentar.
- Komentar di-fetch dari komputer klien. Tidak ada kode pada sisi server yang perlu diimplementasikan.
Konsepnya secara sederhana adalah dengan membuat sebuah issue pada sebuah repository di GitHub untuk setiap artikel yang ingin terdapat komentar.
Langkah-langkah yang diperlukan adalah:
- Membuat sebuah issue baru pada repository di GitHub.
- Mengambil data komentar menggunakan AJAX melalui CORS proxy server.
- Melakukan parsing untuk menampilkan 5 komentar pertama.
- Tampilkan link menjuju halaman komentar asli pada GitHub.
Pada contoh ini saya tidak menggunakan GitHub API untuk mendapatkan data komentar karena alasan rate limit pada layanan tersebut. Sebagai unauthenticated atau guest user rate limit untuk API adalah 60 request per jam.
Harusnya itu sudah cukup karena user dapat dipastikan memiliki IP yang berbeda-beda kecuali mereka mengakses dari satu kantor atau lokasi Wi-Fi yang sama. Namun untuk kepastikan uptime layanan komentar maka dipilih scraping langsung halaman GitHub Comments untuk menghindari rate-limit.
Untuk melakukan posting komentar, pengguna harus memiliki akun GitHub. Posting komentar dilakukan langsung dari halaman GitHub bukan dari halaman artikel.
GitHub Issue yang digunakan adalah berikut.
https://github.com/rioastamal-examples/teknocerdas-github-comments/issues/1
Dan dibawah ini adalah kode HTML dan Javascript yang digunakan pada artikel ini untuk menampilkan komentar dari halaman GitHub Issue diatas.
Memuat komentar...
Penjelasan Kode GitHub Comments
Pada kode diatas disiapkan sebuah div container untuk menampung komentar yang akan ditampilkan yaitu div poc-github-comments.
Fungsi doCORSRequest() berfungsi untuk melakukan request ke URL GitHub melalui CORS Proxy server dalam hal ini digunakan cors-anywhere.herokuapp.com.
Setelah respon diterima maka element yang menyimpan daftar komentar pada issue tersebut disimpan dalam variabel nodes yaitu element div.timeline-comment-group. Loop dilakukan dari index ke-1 karena index ke-0 dianggap adalah pesan yang ingin ditampilkan kepada pengguna.
Semua komentar akan ditampung dalam variabel commentsHTML sebelum dimasukkan kedalam container div poc-github-comments melalui properti innerHTML.
Langkah terakhir adalah dengan menyediakan link ke sistem komentar asli pada GitHub agar pengguna dapat melihat keseluruhan komentar. Markdown tidak diparsing karena dikhawatirkan ada masalah keamanan dan tampilan yang tidak konsisten.
GitHub comments untuk static website merupakan salah satu alternatif terbaik menurut penulis untuk memberikan fitur komentar pada sebuah website.
