Est-ce la bonne façon de créer un composant de thème ?

Dev
1

J’ai de l’expérience dans la création de solutions personnalisées avec d’autres plateformes/frameworks et je souhaite comprendre si c’est la bonne façon de créer un composant de thème dans Discourse.

Cela semble fonctionner, mais cela ne signifie pas nécessairement que c’est la bonne méthode.

En bref, cela devrait masquer la réaction en fonction de la catégorie dans laquelle se trouve un sujet. Est-ce la bonne façon de procéder ?

<script type="text/discourse-plugin" version="0.1">
$(document).ready(function() {
    try {
      const isTopicPage = /^\/t\//.test(window.location.pathname);
      
      if (!isTopicPage) return;

      const allowedCategories = ['ask-a-question'];

      const topic = Discourse.__container__.lookup("controller:topic");
      const categorySlug = topic && topic.get("model.category.slug");
      const isAllowedCategory = categorySlug && allowedCategories.includes(categorySlug);

      const toggleReactionEmoji = () => {
        const emoji = document.querySelector("[data-reaction='frog']");
        
        if (emoji) {
          emoji.style.display = isAllowedCategory ? '' : 'none';
          console.log(`Emoji with data-reaction='frog' ${isAllowedCategory ? 'shown' : 'hidden'}.`);
        }
      };

      toggleReactionEmoji();

      const observer = new MutationObserver(mutations => {
        mutations.forEach(mutation => {
          mutation.addedNodes.forEach(node => {
            if (node.nodeType === 1) {
              const emoji = node.querySelector("[data-reaction='frog']");
              if (emoji) {
                emoji.style.display = isAllowedCategory ? '' : 'none';
                console.log(`Emoji with data-reaction='frog' found in mutation and ${isAllowedCategory ? 'shown' : 'hidden'}.`);
              }
            }
          });
        });
      });

      observer.observe(document.body, { childList: true, subtree: true });

      api.cleanupStream(() => observer.disconnect());

    } catch (error) {
      console.error("An error occurred in the emoji toggle script:", error);
    }
  });
</script>
2

Bien que cette méthode soit techniquement possible, elle n’est pas l’approche idéale.

Il serait préférable d’utiliser correctement le système de rendu d’Ember plutôt que d’avoir recours aux balises <script> et à $(document).ready de jQuery.

Pour commencer, il serait judicieux de créer un dépôt pour votre composant de thème avec une structure de dossiers appropriée. Consultez la CLI discourse_theme, car elle génère automatiquement cette structure pour vous et facilite le développement du composant. (Sinon, vous pouvez également utiliser le squelette de thème si vous n’avez besoin que de la structure et non des autres fonctionnalités de la CLI de thème).

À partir de là, j’utiliserais les outils mis à disposition par Discourse pour l’extensibilité, tels que les apiInitializers, la pluginAPI, les emplacements de plugins (plugin outlets), etc., afin de réaliser ce que vous souhaitez faire.

La meilleure façon d’apprendre à utiliser ces éléments est de consulter les guides pour les développeurs disponibles sur Meta, en particulier les sections consacrées aux thèmes et aux composants de thème. De plus, je vous recommande de parcourir la catégorie Customization > Theme component et de consulter les dépôts GitHub associés. Examiner leur code et la manière dont ils implémentent leurs fonctionnalités vous sera également très utile.

J’espère que ces indications vous aideront !

3

Si tel est votre objectif, vous pouvez le faire avec un simple CSS :

body.category-ask-a-question .discourse-reactions-picker.frog {
  display: none;
}