Menangani Konflik Kode antara Disqus dengan DaisyUI

Mon, Mar 18, 2024 12:25 AM
Administrator

Tutorial

Awal Mula

Saat saya sedang mengerjakan penambahan fitur komentar seperti pada website Ancrek ini seperti dibawah postingan ini. Sebelum muncul Komentar Disqus yang dapat dilihat seperti dibawah postingan, saya mengalami error yang bikin kesal hampir 1 harian, hingga sampai bertanya ke AI dan tak mendapatkan jawaban.

Disqus Error dengan Coloring DaisyUI!

Dan akhirnya saya mencoba untuk mengakali sistem coloring yang berbeda antara DaisyUI dengan fitur komentar disqus yang akan saya bahas di postingan kali ini.

Apa yang menjadi masalah?

Masalah yang terjadi adalah ketika saya ingin membuat fitur komentar yang tidak membebani server dan memoderasi komentar, maka saya punya ide untuk menggunakan fitur pihak ketiga, dan pihak ketiga itu adalah Disqus.

Saya memilih Disqus karena saya mengenal lama dengan Disqus, biasanya website berbasis Wordpress juga sering menggunakan Disqus ketimbang fitur komentar bawaan Wordpress.

Dalam pengimplementasian Disqus, Kita bisa memilih untuk menggunakan Universal Code, itu yang saya gunakan dalam pengimplementasian fitur komentar pada website ini, dan basic fitur komentarnya juga gratis dan menurut saya bisa mencakup seluruh kebutuhan komentar. Anda dapat melihat fitur yang ditawarkan ke admin disini Disqus Pricing.

Disqus Pricing!

Pengimplementasiannya terbilang cukup mudah karena sudah dijelaskan pada Universal Code, yang terpenting anda telah mendaftar disitus disqus dan membuat Sites baru pada disqus.

Errornya dimana?

Ah baik, sepertinya saya menjelaskan terlalu panjang x lebar x tinggi hingga tidak mencapai substansi. Errornya muncul dari sini.

Error mulai terjadi!

Saya kira awalnya adalah error dikarenakan DaisyUI tidak support dengan Disqus, pertama saya mengganti DaisyUI dengan Flowbite.

Yang belum mengetahui Flowbite, adalah hampir sama dengan DaisyUI, sebuah library yang menyediakan kumpulan komponen siap pakai untuk digunakan dalam pembuatan website, mungkin anda lebih mengenal Bootstrap dan saya juga menggunakan itu dulu, namun semenjak mengenal TailwindCSS, sayapun beralih dari Bootstrap. namun tetap tergantung kebutuhan website itu sendiri

Penyelesaian

Mengganti Flowbite saya kira merupakan solusi dari permasalahan tersebut, namun ternyata tidak. tetap pada error yang sama. Saya pun mencari hingga menggunakan Google AI - Gemini yang baru saja Rebranding dari Bard.

Gemini!

Dari pertanyaan Apakah fungsi oklch bisa dikonversi menjadi rgb hingga menambahkan library baru yang sama saja tidak menyelesaikan masalah, dan akhirnya sayapun berpikir...

oklch adalah color mode yang digunakan DaisyUI sebagai sistem warnanya, dan Disqus hanya memparse warna berbentuk rgb/rgba saja.

Akhirnya sayapun mencoba untuk mengakali sistem pembacaan warna oleh disqus dengan cara "memaksakan" style, terutama background-color dan color. Dan Alhamdulillah Disqus berhasil dimuat tidak lagi berkonflik dengan disqus.

Disqus berhasil dimuat!

Konklusi

Dari pengimplementasian komentar yang dikira simpel namun jika tidak mencoba memperbaiki dan memahami error yang ada yang ada tetap error. saya bersyukur karena fitur ini telah rilis dan saya mengundang anda untuk berkomentar dibawah mengenai apa yang saya alami, dengan adanya fitur komentar, penulis dapat mendapatkan umpan balik atau istilah inggrisnya feedback dari apa yang saya tulis.

Saya mengucapkan terima kasih kepada pembaca, dan semoga anda yang sedang stuck dalam menghadapi masalah dan untuk mendapatkan solusi semoga dilancarkan dan dipermudah aamiin...