Código AddEvent no funciona en Discourse

Estoy intentando agregar algo de código en Discourse para un calendario de eventos. He aplicado la sangría de cuatro espacios, pero parece que no funciona.

Aquí está el fragmento de código:

image

Esto es lo que obtengo…

No soy un programador habitual, así que, por favor, si pudieras simplificar la jerga, te lo agradecería muchísimo. :pray:

La causa aquí es que Discourse filtra la entrada de los usuarios en las publicaciones como medida de seguridad. No querrías que usuarios aleatorios ejecuten scripts en tu sitio, por lo que los filtramos.

Puedes usar un componente de tema para que esto funcione. Si agregas algo como esto en un nuevo componente de tema, bajo la pestaña de encabezado, y luego lo agregas a tu tema activo, podrás usar esa inserción.

<script type="text/discourse-plugin" version="0.8">
  const  loadScript  = require("discourse/lib/load-script").default;
  const { next } = require("@ember/runloop");

  api.decorateCookedElement(
    post => {
      const calendars = post.querySelectorAll(`[data-wrap="addEvent"]`);
      if (!calendars.length) return;

      calendars.forEach(calendar => {
        const wrapper = document.createElement("div");
        wrapper.dataset.calendar = calendar.dataset.calendar;
        wrapper.dataset.configure = false;
        wrapper.classList.add("ae-emd-cal");
        calendar.append(wrapper);
      });

      next(() =>
        loadScript("https://addevent.com/js/cal.embed.t1.init.js")
      );
    },
    { id: "AddEvent decorator", onlyStream: true }
  );
</script>

Una vez que hagas esto, puedes agregar el calendario de AddEvent a una publicación añadiendo algo como esto en tu publicación.

[wrap=addEvent calendar=bJ306355][/wrap]

Puedes cambiar el atributo calendar=bJ306355 para agregar el identificador específico del calendario que deseas incrustar.

Lo último que necesitas hacer es poner en la lista blanca el script de AddEvent en la configuración de tu sitio (esta es otra capa de seguridad).

Busca content_security_policy_script_src en el panel de administración y agrega este enlace allí

https://addevent.com

Avísame si esto funciona para ti y puedo empaquetarlo como un componente de tema.

Hola @Johani,

Tu solución me funciona. Solo quería hacértelo saber.

¡Gracias!

Así que acabo de crear un nuevo componente de tema para renderizar un calendario AddEvent.

:link: GitHub - graydenshand/discourse_upcoming_addevent: Replace the DiscourseEvent "upcoming events" calendar with an AddEvent embed · GitHub

En lugar de incrustar el calendario en una publicación, lo cual es demasiado estrecho para mostrar la versión de escritorio de la incrustación, este componente de tema se apropia de la página “Próximos eventos” del complemento DiscourseCalendar.

Tenga en cuenta que, para lograr esto, tuve que personalizar el script de AddEvent (https://addevent.com/js/cal.embed.t1.init.js) para permitir la nueva renderización entre transiciones de página.