Guide d’intégration du système de commentaires CWD

J’ai initialisé avec succès un projet Astro et intégré le système de commentaires CWD.

Changements principaux

1. Initialisation du projet : Création d’un nouveau projet Astro en utilisant le modèle basics.
2. Création du composant : Construction d’un composant Astro réutilisable [src/components/CwdComments.astro].

---
interface Props {
  apiBaseUrl: string;
  elId?: string;
  pageSize?: number;
  theme?: 'light' | 'dark';
}
const { apiBaseUrl, elId = 'comments', pageSize = 20, theme = 'light' } = Astro.props;
---

<!-- 1. Conteneur : Utiliser les attributs de données pour passer les paramètres au script -->
<div
  id={elId}
  class="cwd-comments-container"
  data-el-id={elId}
  data-api-base-url={apiBaseUrl}
  data-page-size={pageSize}
  data-theme={theme}
>
</div>
<!-- 2. Importer la bibliothèque : Garder is:inline pour le chargement à tout moment -->
<script is:inline src="https://unpkg.com/cwd-widget@latest/dist/cwd.js"></script>
<!-- 3. Script d'initialisation : Utiliser le module pour importer vos fonctions utilitaires -->
<script>
  import { registerPageInit } from '@/utils/page-init';
  // Définir la logique d'initialisation
  const initComments = () => {
    const containers = document.querySelectorAll('.cwd-comments-container');

    containers.forEach((container) => {
      const el = container as HTMLElement;
      // Empêcher l'initialisation en double
      if (el.children.length > 0 || el.dataset.cwdInitialized) return;
      const apiBaseUrl = el.dataset.apiBaseUrl;
      const theme = el.dataset.theme;
      const pageSize = Number(el.dataset.pageSize);

      // Vérifier si la bibliothèque est chargée
      if ((window as any).CWDComments && apiBaseUrl) {
        try {
          const comments = new (window as any).CWDComments({
            el: el,
            apiBaseUrl,
            pageSize,
            theme,
          });
          comments.mount();
          // Marquer comme initialisé
          el.dataset.cwdInitialized = 'true';
        } catch (e) {
          console.error('[CWD] Échec de l\'initialisation :', e);
        }
      } else {
        // Si le script est encore en cours de chargement, interroger brièvement
        const checkTimer = setInterval(() => {
          if ((window as any).CWDComments) {
            clearInterval(checkTimer);
            // Re-déclencher
            initComments();
          }
        }, 100);
        // Arrêter après 5 secondes
        setTimeout(() => clearInterval(checkTimer), 5000);
      }
    });
    // Retourner la fonction de nettoyage (optionnel)
    return () => {
      // CWD ne fournit peut-être pas de méthode destroy, vider simplement le conteneur
    };
  };
  // 4. Enregistrer avec PageInitManager
  registerPageInit('init-cwd-comments', initComments, { immediate: true });
</script>

3. Intégration de la page : Ajout du composant de commentaires à la page d’accueil [src/pages/index.astro].

Configuration

Le système de commentaires nécessite une URL d’API pour se connecter au backend. Mettez à jour l’attribut apiBaseUrl dans [src/pages/index.astro] (ou où que vous utilisiez ce composant).

Fichier : [src/pages/index.astro]

<CwdComments apiBaseUrl="https://cmt-api.xxx.com" />

Assurez-vous de remplacer https://cmt-api.xxx.com par l’URL réelle de votre Worker déployé.

Utilisation du composant

Vous pouvez utiliser le composant CwdComments dans n’importe quelle page ou layout Astro :

---
import CwdComments from '../components/CwdComments.astro';
---

<CwdComments
  apiBaseUrl="https://cmt-api.xxx.com"
  elId="comments"
  theme="light"
/>

Vérification

Le projet se construit avec succès. Exécutez le serveur de développement pour voir le composant de commentaires (assurez-vous que l’URL de l’API est correctement configurée) :

npm run dev

Réutilisation dans d’autres projets Astro

Pour utiliser ce système de commentaires dans d’autres projets Astro, pas besoin de redéployer le backend ou le panneau d’administration. Copiez simplement le composant frontend.

1. Copier le composant : Copiez [src/components/CwdComments.astro] dans le répertoire src/components/ de votre nouveau projet. Note : Si votre projet utilise les View Transitions, assurez-vous de conserver la logique registerPageInit.

2. Ajouter à la page : Importez et utilisez dans votre page :

   ---
   import CwdComments from '../components/CwdComments.astro';
   ---
   
   <CwdComments apiBaseUrl="https://cmt-api.xxx.com" />

3. Identification unique : Le système distingue automatiquement les commentaires par URL de page (chemin). Tant que le domaine ou le chemin du nouveau projet diffère, les commentaires seront automatiquement isolés.

Rester à jour

Comme CWD est en développement précoce avec des mises à jour fréquentes, suivez cette stratégie de mise à jour :

1. Backend (API) :

   • Exécutez git fetch upstream et git merge upstream/main dans le répertoire cwd pour synchroniser le code.
   • Exécutez npm install pour mettre à jour les dépendances.
   • Exécutez npx wrangler d1 migrations apply CWD_DB (si des changements de base de données existent).
   • Exécutez npm run deploy pour déployer la nouvelle version du Worker.

2. Composant Frontend :

   • Mettez à jour la version de l’URL du script dans src/components/widgets/CwdComments.astro :

     <script is:inline src="https://unpkg.com/cwd-widget@latest/dist/cwd.js"></script>

   • Utilisez @latest pour la dernière version (recommandé pour le développement), ou spécifiez un numéro de version (par exemple @0.0.5) pour la stabilité.

3. Panneau d’administration :

   • Tirez le dernier code (mêmes étapes que le backend).
   • Exécutez npm install et npm run build.
   • Redéployez sur Cloudflare Pages : npx wrangler pages deploy dist --project-name cwd-admin.

Publié le: 6 févr. 2026 · Modifié le: 6 févr. 2026

RR

Construire