Docusaurus - integracja z Disqus

Ostatnio jestem fanem Docusaurus i zacząłem go używać do tworzenia swojego bloga oraz innych witryn, których jestem własicielem. W jednym z wpisów opisałem jak zintegrować Docusaurus z YouTube, a teraz przyszedł czas na integrację z Disqus. Integracja z Disqus pozwala czytelnikom mojego bloga na komentowanie wpisów, umożliwia dzielić się opinią na ich temat, co jest dla mnie bardzo ważne. Każda opinia wpływa na rozwój bloga jak i również mojej wiedzy.

Disqus

Disqus to amerykańska usługa hostingowa komentarzy blogowych oferująca platformę między innymi do integracji społecznej, sieci społecznościowych, profili użytkowników - zobacz Disqus - Wikipedia.

Pomimo, że Disqus na swoich stronach opisuje metody integracji z różymi produkatmi, zostałem zmuszony do napisania swojego rozwiązania, które całkowicie mnie usatysfakcjonowało. Disqus oferuje dwie inetersujące nas możliwości integracji:

• Rozwiązanie z wykorzystaniem komponentu React (instalacja za pomocą npm/yarn).
• Rozwiązanie z wykorzystaniem skryptu JavaScript, który umieszczamy w pliku HTML (ręczna instalacja z "uniwersalnym kodem").

Rozwiązanie z wykorzystaniem komponentu React

Ogólnie rzecz biorąc, rozwiązanie z wykorzystaniem komponentu React polega na zainstalowaniu paczki disqus-react za pomocą npm/yarn.

Niestety, podczas moich prób integracji z Docusaurus, nie udało mi się osiągnąć oczekiwanego efektu. Chodzi o to, że mam kilka wersji językowych tego samego wpisu i chciałem by komentarze były współdzielone pomiędzy nimi. Aby komentarz dodany pod artykułem w wersji językowej angielskiej był widoczny również w wersji językowej polskiej. Gdy definiowałem w konfiguracji Disqus wspólny url i identifier (np. url="https://slawas.pl/blog/2025-01-25-Docusaurus-Disqus-Integration, identifier="2025-01-25-Docusaurus-Disqus-Integration") dla wpisu obu wersji językowych, to komentarze pojawiały się pod wszystkimi artykułami. W panelu administracyjnym Disqus widziałem, że dostarczona implementacja klienta błędnie budowała adres strony komentarza - zawsze był ustawiany na https://slawas.pl/blog/.

Nie chciało mi się brnąć w analizę w czym tkwił błąd. Podczas późniejszej pracy zauważyłem, że możliwym błędem było to, że identifier nie był wartością reprezentującą adres strony, a jedynie identyfikatorem wpisu. Gdy ustawiłem identifier=window.location.href, to komentarze były widoczne tylko pod jednym wpisem, no ale nie były wspólne pomiędzy wersjami językowymi 😞.

Dlatego zdecydowałem się na rozwiązanie z wykorzystaniem skryptu JavaScript.

Rozwiązanie z wykorzystaniem skryptu JavaScript

Rozwiązanie z wykorzystaniem skryptu JavaScript polega na umieszczeniu poniższego skryptu w pliku HTML:

<div id="disqus_thread"></div>
<script>
    /**
    *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
    *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables    */
    /*
    var disqus_config = function () {
    this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
    this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
    };
    */
    (function() { // DON'T EDIT BELOW THIS LINE
    var d = document, s = d.createElement('script');
    s.src = 'https://slawas.disqus.com/embed.js';
    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

No i zaczęły się schody. Jak dodać taką treść w React? Jestem nowicjuszem w tej technologii i przyznam się, że propozycje rozwiązania wyszukiwane przez wujka Google albo były nie do ogarnięcia (były zbyt skomplikowane), albo nie działały np. kod w przeglądarce ładował się tylko raz i nie reagował na zmiany po załadowaniu nowego wpisu. W końcu znalazłem i napisałem rozwiązanie, które działa i jest proste.

Rozwiązanie z wykorzystaniem komponentu Disqus

Wykorzystałem useEffect oraz Helmet do osiągnięcia efektu, który chciałem. Zainstalowałem w projekcie Helmet poleceniem npm install react-helmet. Rozwiązanie umieściłem w pliku _functions.js.

Zaimportowałem odpowiednie zależności:

import { useEffect } from 'react';
import { Helmet } from 'react-helmet';

Dodałem komponent Disqus, który zdefiniowałem nastepująco:

/**
 * Ustawianie konfiguracji Disqus. Ustawia URL, tytuł strony, język 
 * prezentacji. Konfiguracja jest wywoływana przed załadowaniem 
 * skryptu Disqus.
 * @param {
 *   url: string,
 *   title: string,
 *   lang: string
 * } param0 
 */
function DisqusConfig({url, title, lang}) {
  useEffect(() => {
    window.disqus_config = function () {
      this.page.url = window.location.href;
      this.page.identifier = window.location.href;
      this.language = "en";
      if (url) { 
        this.page.url = url;
        this.page.identifier = url;
      }
      if (title) { this.page.title = title; }
      if (lang) { this.language = lang; }
    };
    return () => { }
  });
}

/**
 * Prezentacja dodawania komentarzy Disqus
 * @param {
 *  shortname: string,
 *  urlContext: string,
 *  urlPage: string,
 *  title: string,
 *  language: string
 * } param0 
 */
export const Disqus = ({children, shortname, urlContext, urlPage, title, language}) => (
  <span>
    <div id="disqus_thread"></div>
    <DisqusConfig url={urlContext + urlPage} title={title} lang={language}/>
    <Helmet>
      <script data-timestamp={"" + new Date()} src={"https://"+ shortname + ".disqus.com/embed.js"} async></script>
    </Helmet>
  </span>
);

Teraz w plikach MDX, w których chcę umieścić komentarze Disqus, importuję ten komponent:

import { Disqus } from '../_functions.js';

i go używam z odpowiednimi parametrami. Na przykład:

<Disqus
  shortname='slawas'
  urlContext="https://slawas.pl/blog/"
  urlPage="2025-01-25-Docusaurus-Disqus-Integration"
  language="pl"
  >
</Disqus>

I to wszystko. Teraz możecie cieszyć się komentarzami Disqus na waszej stronie tak jak ja w tym artykule (widać poniżej) 😆.