Este é o jeito correto de criar um componente de tema?

Dev
1

Tenho experiência na criação de soluções personalizadas com outras plataformas/frameworks e quero entender se esta é a maneira correta de criar um componente de tema no Discourse.

Parece estar funcionando, mas isso não significa necessariamente que seja a maneira correta.

Em resumo, isso deve ocultar a reação dependendo da categoria em que um tópico está. Esta é a maneira correta de fazer isso?

<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 com data-reaction='frog' ${isAllowedCategory ? 'mostrado' : 'oculto'}.`);
        }
      };

      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 com data-reaction='frog' encontrado na mutação e ${isAllowedCategory ? 'mostrado' : 'oculto'}.`);
              }
            }
          });
        });
      });

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

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

    } catch (error) {
      console.error("Ocorreu um erro no script de alternância de emoji:", error);
    }
  });
</script>
1 curtida
2

Embora essa forma de fazer as coisas seja tecnicamente possível, não é a abordagem ideal.

Em vez de usar tags de script e $(document).ready do jQuery, seria melhor trabalhar corretamente com o sistema de renderização do Ember.

Para começar, seria bom criar um repositório de componente de tema com uma estrutura de pastas adequada para o seu componente de tema. Dê uma olhada na CLI discourse_theme, pois ela criará essa estrutura para você e facilitará o desenvolvimento do componente. (Alternativamente, há também o esqueleto de tema se você precisar apenas da estrutura e não de nenhum outro recurso da CLI de tema).

A partir daqui, eu usaria as ferramentas que o Discourse tem para extensibilidade, como apiInitializers, a pluginAPI, plugin outlets, etc., para alcançar o que você está tentando fazer.

A melhor maneira de aprender sobre essas coisas é consultar os Guias do Desenvolvedor aqui no Meta (especificamente as seções de tema/componente de tema). Além disso, eu percorreria a categoria Theme component e encontraria seus repositórios no GitHub. Examinar o código deles e como eles realizam as coisas também ajudará você.

Espero que isso ajude!

7 curtidas
3

Se este for o seu objetivo, você pode fazer isso com CSS simples:

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