Código AddEvent não funciona no Discourse

Estou tentando adicionar um código no Discourse para um calendário de eventos. Fiz a indentação de quatro espaços, mas parece que não está funcionando.

Aqui está o trecho de código:

image

É isso que estou obtendo…

Não sou um programador habitual, então, se puderem simplificar a linguagem técnica, ficaria muito grato. :pray:

A causa aqui é que o Discourse filtra a entrada do usuário em posts como medida de segurança. Você não gostaria que usuários aleatórios executassem scripts no seu site, então os filtramos.

Você pode usar um componente de tema para fazer isso funcionar. Se você adicionar algo como este em um novo componente de tema — na aba de cabeçalho — e depois adicioná-lo ao seu tema ativo, será possível usar esse embed.

<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>

Depois de fazer isso, você pode adicionar o calendário do AddEvent a um post incluindo algo como este em sua publicação.

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

Você pode alterar o atributo calendar=bJ306355 para adicionar o identificador específico do calendário que deseja incorporar.

A última coisa que você precisa fazer é adicionar o script do AddEvent à lista de permissões nas configurações do seu site (isso é outra camada de segurança).

Procure por content_security_policy_script_src no painel administrativo e adicione este link lá

https://addevent.com

Me avise se isso funcionar para você, e posso empacotá-lo como um componente de tema.

Olá @Johani,

Sua solução funcionou para mim. Só queria te avisar.

Obrigado!

Então, acabei de criar um novo componente de tema para renderizar um calendário AddEvent.

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

Em vez de incorporar o calendário em uma postagem, o que é muito estreito para exibir a versão desktop do embed, este componente de tema assume o controle da página “Próximos Eventos” do plugin DiscourseCalendar.

Observe que, para fazer isso, precisei personalizar o script do AddEvent (https://addevent.com/js/cal.embed.t1.init.js) para permitir re-renderizações entre transições de página.