Comment intégrer les commentaires Giscus dans Point Rouge

Héberger un blog statique léger sur une plateforme comme GitHub Pages présente de nombreux avantages, mais enlève également une certaine interactivité. Heureusement, Giscus existe et offre un moyen d’intégrer les commentaires des utilisateurs sur des sites statiques.

Table des matières

Comment Giscus fonctionne

Giscus utilise l’API GitHub pour lire et stocker les commentaires publiés par les utilisateurs de GitHub dans les Discussions associées à un dépôt.

Intégrez les scripts client de Giscus à votre site, configurez-les avec l’URL du bon dépôt, et les utilisateurs pourront consulter et publier des commentaires lorsqu’ils seront connectés à GitHub.

Cette approche ne nécessite aucun serveur : les commentaires sont stockés sur GitHub, puis chargés dynamiquement côté client. Elle convient donc parfaitement à un blog statique comme Point Rouge.

Mise en place de Giscus

Giscus se configure facilement sur giscus.app. Voici les principales étapes.

Conditions préalables

Pour utiliser Giscus, les conditions suivantes doivent être remplies :

• le référentiel est publique
• le Application Giscus est installé
• le Discussions la fonctionnalité est activée pour votre référentiel

Si l’une de ces conditions ne peut pas être remplie, Giscus ne pourra malheureusement pas être intégré.

Configuration de Giscus

Vous devez ensuite configurer Giscus. Dans la plupart des cas, les valeurs présélectionnées conviennent. Vous pourrez toujours ajuster ces réglages ultérieurement.

Cependant, vous devez

• sélectionnez la bonne langue pour l’interface utilisateur
• préciser le GitHub référentiel auquel vous souhaitez vous connecter, généralement le référentiel contenant votre hébergement hébergé statiquement Point Rouge bloguer sur GitHub Pages
• créer et définir un Announcement tapez une discussion sur GitHub si vous voulez vous assurer que personne ne peut créer de commentaires aléatoires directement sur GitHub
• définir la palette de couleurs

Une fois les paramètres configurés, Giscus génère une balise <script> dont vous aurez besoin dans les étapes suivantes.

Balise de script simple

Vous devriez maintenant avoir une balise de script qui ressemble à ceci :

<script
  src="https://giscus.app/client.js"
  data-repo="[ENTER REPO HERE]"
  data-repo-id="[ENTER REPO ID HERE]"
  data-category="[ENTER CATEGORY NAME HERE]"
  data-category-id="[ENTER CATEGORY ID HERE]"
  data-mapping="pathname"
  data-strict="0"
  data-reactions-enabled="1"
  data-emit-metadata="0"
  data-input-position="bottom"
  data-theme="preferred_color_scheme"
  data-lang="en"
  crossorigin="anonymous"
  async
></script>

Ajoutez-le simplement au code source du site. Très probablement, si vous utilisez Point Rouge et souhaitez activer les commentaires sur les publications, accédez à PostDetails.astro et collez-le à l’endroit souhaité où vous souhaitez que les commentaires apparaissent, peut-être sous le Share this post on: boutons.

<Layout {...layoutProps}>
  <main>
    <ShareLinks />

    <script
      src="https://giscus.app/client.js"
      data-repo="[ENTER REPO HERE]"
      data-repo-id="[ENTER REPO ID HERE]"
      data-category="[ENTER CATEGORY NAME HERE]"
      data-category-id="[ENTER CATEGORY ID HERE]"></script>
  </main>
  <Footer />
</Layout>src/layouts/PostDetails.astro

Et c’est fait ! Vous avez intégré avec succès les commentaires dans Point Rouge!

Composant React avec thème clair/sombre

La balise de script intégrée à la mise en page reste assez statique : la configuration de Giscus, y compris theme, est codée en dur. Comme Point Rouge propose un sélecteur de thème clair/sombre, les commentaires devraient idéalement changer de thème avec le reste du site. Une intégration un peu plus avancée de Giscus est nécessaire pour y parvenir.

Commençons par installer le composant React de Giscus :

npm i @giscus/react && npx astro add react

Ensuite, nous créons un nouveau Comments.tsx Composant de réaction dans src/components:

import Giscus, { type Theme } from "@giscus/react";
import { GISCUS } from "@/constants";
import { useEffect, useState } from "react";

interface CommentsProps {
  lightTheme?: Theme;
  darkTheme?: Theme;
}

export default function Comments({
  lightTheme = "light",
  darkTheme = "dark",
}: CommentsProps) {
  const [theme, setTheme] = useState(() => {
    const currentTheme = localStorage.getItem("theme");
    const browserTheme = window.matchMedia("(prefers-color-scheme: dark)")
      .matches
      ? "dark"
      : "light";

    return currentTheme || browserTheme;
  });

  useEffect(() => {
    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
    const handleChange = ({ matches }: MediaQueryListEvent) => {
      setTheme(matches ? "dark" : "light");
    };

    mediaQuery.addEventListener("change", handleChange);

    return () => mediaQuery.removeEventListener("change", handleChange);
  }, []);

  useEffect(() => {
    const themeButton = document.querySelector("#theme-btn");
    const handleClick = () => {
      setTheme(prevTheme => (prevTheme === "dark" ? "light" : "dark"));
    };

    themeButton?.addEventListener("click", handleClick);

    return () => themeButton?.removeEventListener("click", handleClick);
  }, []);

  return (
    <div className="mt-8">
      <Giscus theme={theme === "light" ? lightTheme : darkTheme} {...GISCUS} />
    </div>
  );
}src/components/Comments.tsx

Ce composant React enveloppe le composant Giscus natif et ajoute deux propriétés : lightTheme et darkTheme. Grâce à deux écouteurs d’événements, les commentaires suivent le thème du site et basculent dynamiquement entre les modes clair et sombre lorsque le thème du site ou du navigateur change.

Nous devons également définir le GISCUS config, pour lequel l’emplacement optimal est dans constants.ts:

import type { GiscusProps } from "@giscus/react";

...

export const GISCUS: GiscusProps = {
  repo: "[ENTER REPO HERE]",
  repoId: "[ENTER REPO ID HERE]",
  category: "[ENTER CATEGORY NAME HERE]",
  categoryId: "[ENTER CATEGORY ID HERE]",
  mapping: "pathname",
  reactionsEnabled: "0",
  emitMetadata: "0",
  inputPosition: "bottom",
  lang: "en",
  loading: "lazy",
};src/constants.ts

Notez que définir theme ici remplacera les propriétés lightTheme et darkTheme. Le thème redeviendra alors statique, comme dans l’intégration précédente de Giscus avec la balise <script>.

Pour terminer le processus, ajoutez le nouveau composant Commentaires à PostDetails.astro (en remplacement du script balise de l’étape précédente).

import Comments from "@/components/Comments";

<ShareLinks />

<Comments client:only="react" />

<hr class="my-6 border-dashed" />

<Footer />src/layouts/PostDetails.astro

Et c’est tout !