¿Es esta la forma correcta de crear un componente de tema?

Desarrollador
1

Tengo experiencia creando soluciones personalizadas con otras plataformas/frameworks y quiero entender si esta es la forma correcta de crear un componente de tema en Discourse.

Parece estar funcionando, pero eso no significa necesariamente que sea la forma correcta.

En resumen, esto debería ocultar la reacción dependiendo de la categoría en la que se encuentre un tema. ¿Es esta la forma correcta de hacerlo?


$(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 con 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 con data-reaction='frog' encontrado en la mutación y ${isAllowedCategory ? 'mostrado' : 'oculto'}.`);
              }
            }
          });
        });
      });

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

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

    } catch (error) {
      console.error("Ocurrió un error en el script de alternancia de emoji:", error);
    }
  });
1 me gusta
2

Aunque esta forma de hacer las cosas es técnicamente posible, no es el enfoque ideal.

En lugar de usar etiquetas de script y $(document).ready de jQuery, sería mejor trabajar correctamente con el sistema de renderizado de Ember.

Para empezar, sería bueno crear un repositorio de componentes temáticos con una estructura de carpetas adecuada para tu componente temático. Echa un vistazo a la CLI discourse_theme, ya que te proporcionará esa estructura y te facilitará el desarrollo del componente. (Alternativamente, también existe el esqueleto de tema si solo necesitas la estructura y no ninguna de las otras ventajas de la CLI de temas).

A partir de aquí, utilizaría herramientas que Discourse tiene para la extensibilidad, como apiInitializers, la pluginAPI, los plugin outlets, etc., para lograr lo que intentas hacer.

La mejor manera de aprender sobre estas cosas es examinar las Guías para desarrolladores aquí en Meta (específicamente las secciones de temas/componentes temáticos). Además, te recomiendo que revises la categoría Theme component y busques sus repositorios de GitHub. Examinar su código y cómo logran las cosas también te ayudará.

¡Espero que esto ayude!

7 Me gusta
3

Si este es tu objetivo, puedes hacerlo con CSS simple:

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