È questo il modo corretto per creare un componente tema?

Sviluppatore
1

Ho esperienza nella creazione di soluzioni personalizzate con altre piattaforme/framework e voglio capire se questo è il modo corretto per creare un componente tema in Discourse.

Sembra funzionare, ma non significa necessariamente che sia il modo corretto.

In breve, questo dovrebbe nascondere la reazione a seconda della categoria in cui si trova un argomento. È il modo giusto per farlo?

<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

Sebbene questo approccio sia tecnicamente possibile, non è quello ideale.

Invece di utilizzare i tag script e $(document).ready di jQuery, sarebbe meglio integrarsi correttamente con il sistema di rendering di Ember.

Per iniziare, è consigliabile creare un repository per il componente del tema con una struttura di cartelle appropriata. Dai un’occhiata alla CLI discourse_theme, poiché questa genererà automaticamente quella struttura per te, semplificandoti lo sviluppo del componente. (In alternativa, esiste anche lo skeleton del tema se ti serve solo la struttura e non le altre funzionalità della CLI del tema).

Da qui, ti consiglio di utilizzare gli strumenti che Discourse mette a disposizione per l’estensibilità, come apiInitializers, la pluginAPI, gli outlet dei plugin, ecc., per ottenere ciò che stai cercando di fare.

Il modo migliore per imparare queste cose è consultare le Guide per gli sviluppatori qui su Meta, in particolare le sezioni relative ai temi/componenti del tema. Inoltre, ti consiglio di esplorare la categoria Customization > Theme component e di esaminare i loro repository GitHub. Studiare il loro codice e come realizzano le varie funzionalità ti sarà molto utile.

Spero che questo ti sia utile!

3

Se questo è il tuo obiettivo, puoi farlo con semplice CSS:

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