Cara mudah tambahin Disqus di Astro

Disqus adalah salah satu sistem komentar yang cukup populer, bisa dipakai dimana saja, mulai dari CMS tradisional macam WordPress, Joomla atau Drupal. Blogspot juga bisa, pokoknya platform web yang populer lah, didukung penuh. Bahkan Gatsby dan Jekyll saja didukung. Terus gimana sama Astro, anak baru yang cerdas ini?

Persiapan

Sebelum mulai pasang Disqus di Astro, kamu perlu menyiapkan beberapa hal:

1. Kunjungi situs Disqus.com, dan buat akun atau masuk jika kamu sudah terdaftar
2. Klik I want to install Disqus on my site
3. Tambahkan nama situs web atau nama bisnis (bebas), dan kategori yang cocok

   Catatan: Jangan ikut ketik tanda backtick   di awal dan akhir kode/perintah, itu cuma penanda blok kode untuk memudahkan penulisan.

4. Pilih paket gratis

Instalasi

Disqus adalah platform komentar yang agnostik, dia tidak terbatas pada platform tertentu. Kalau enggak ada framework yang kita pakai saat ini (misalnya Astro), kita bisa buat sendiri komponennya dan menerapkan Disqus di bagian manapun di framework, misalnya di akhir artikel tunggal.

Kalau dilihat dari gambar diatas, enggak ada Astro di daftar itu. Untuk Static Site disitu cuma ada Jekyll sama Gatsby, sisanya kebanyakan CMS dan platform web yang populer. Tapi tenang, karena kita pakai Astro, kita buat aja komponennya sendiri, kita modifikasi kode kustom dari Universal Code Disqus. (Tombol I don’t see my platform listed, install manually with Universal Code).

Cari bagian kode yang ada embed.js, nantinya bagian ini akan kita salin dan ditempel di komponen Astro kita.

Buat komponen di src/components/Disqus.astro, isi dengan kode ini:

<div id="disqus_thread"></div>

<script is:inline>
    if (!window.DisqusWidget) {
        window.DisqusWidget = {
            overwriteGlobalSelectors: function () {
                window.$disqus = document.querySelector('#disqus_thread')
            },
            init: function () {
                this.overwriteGlobalSelectors()
                this.addListeners()
                this.initDisqus()
            },
            addListeners: function () {
                // After language switched
                document.addEventListener('astro:after-swap', () => {
                    this.overwriteGlobalSelectors()
                    this.initDisqus()
                })
            },
            initDisqus: () => {
                // early escape if $disqus not exists
                if (window.$disqus === null) {
                    return
                }

                // Reset DISQUS, Rather than loading new embed.js
                if (window.DISQUS) {
                    window.DISQUS.reset({
                        reload: true
                    })
                    return
                }

                (function () { // DON'T EDIT BELOW THIS LINE
                    const d = document, s = d.createElement('script');
                    s.src = '[PATH_TO_EMBED_JS]';
                    s.setAttribute('data-timestamp', String(+new Date()));
                    (d.head || d.body).appendChild(s);
                })();
            }
        }

        window.DisqusWidget.init()
    }
</script>

<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by
    Disqus.</a></noscript>

Jangan lupa ganti [PATH_TO_EMBED_JS] dengan path .js yang kamu dapatkan dari Universal Code. Kamu juga boleh hapus listener astro:after-swap diatas kalau memang tidak membutuhkannya,

Implementasi

Setelah kamu berhasil buat komponen Astro, sekarang tempatkan di halaman artikel tunggal yang biasanya ada di src/layout/PostLayout.astro atau bagian lain, misal di src/layout/PostSingle.astro kalau kamu pakai bookworm-light-astro.

---
// src/layout/PostLayout.astro
import BaseLayout from './BaseLayout.astro';
import { getCollection } from 'astro:content';
import Disqus from '../components/Disqus.astro';

Props {
  .<props-1>
  .<props-2>
}

export {
  .< export - 1 >
  .< export - 2 >
}

const {
  .< const - 1 >
  .< const - 2 >
}
---

<BaseLayout>
<!-- kode lainnya -->

  <!-- kode artikel tunggal (tag, category, authors, dll) -->

  <!-- kode Disqus -->
  <Disqus /> {/* <-- Oh, sepertinya di sini, setelah "kode artikel tunggal" */}
</BaseLayout>

Kesimpulan

Penambahan sistem komentar Disqus ini ngebantu banget buat orang-orang yang terbiasa dengan antarmuka yang biasa mereka temui di blog-blog berbasis WordPress atau Blogspot. Mungkin cukup ribet buat pemula atau mereka yang baru pakai Astro, tapi ini bukan masalah, karena akhirnya kita bisa pakai antarmuka komentar yang sama di framework/platform yang beda, sekaligus kita belajar cara kerja framework yang kita pakai sekarang.

Tutorial ini dibuat karena kami sendiri ngalamin kebuntuan pakai sistem komentar, pernah pakai git-based seperti Utterances tapi kayaknya pembaca kurang minat atau enggak ngerti cara pakainya (git-based kurang populer di Indonesia), pernah juga pakai Facebook, tapi lagi-lagi terkendala auth login, enggak semua orang suka dan punya akun Facebook. Jadinya, cara aman yaitu pakai Disqus, pengguna bisa daftar pakai metode yang beragam, mau pakai akun Google, Apple, Facebook, Twitter atau email pun bisa.