Olá -
Ainda não consegui fazer isso funcionar por nenhum dos meios que encontrei e gostaria de saber se são apenas minhas expectativas que estão erradas.
Estou integrando com minha instalação do pretix (para vender ingressos para eventos). Isso deve consistir simplesmente em adicionar HTML a uma postagem e garantir que o HTML e o CSS do pretix estejam incluídos.
<link rel="stylesheet" type="text/css" href="https://pretix.eu/demo/democon/widget/v1.css">
<script type="text/javascript" src="https://pretix.eu/widget/v1.en.js" async></script>
<!-- em outro lugar, em uma postagem -->
<pretix-widget event="https://pretix.eu/demo/democon/">
</pretix-widget>
<noscript>
<div class="pretix-widget">
<div class="pretix-widget-info-message">
JavaScript está desativado no seu navegador. Para acessar nossa loja de ingressos sem JavaScript,
por favor <a target="_blank" href="https://pretix.eu/demo/democon/">clique aqui</a>.
</div>
</div>
</noscript>
Obviamente, os scripts do pretix escaneiam o documento em busca dos elementos apropriados por tag e, em seguida, os substituem por entradas personalizáveis (como eu quero).
Acredito que posso (e desejo) realizar essa integração de forma leve, e estava pensando que poderia simplesmente usar os componentes de tema personalizados para conseguir isso, incluindo os scripts/estilos externos do pretix e adicionando o HTML do widget às postagens (ou seja, apenas com ‘configuração’).
Primeiro me deparei com proteções CSP (bom) e a lista de permissões (também bom). Da mesma forma, adicionei a configuração CSP, mas agora aparentemente não consigo alterar a lista de permissões sem alterações reais de código - então me vejo tendo que inserir HTML ‘saborizado’ nas postagens e, em seguida, tentar alterá-los após a renderização.
Prosegui tentando usar um pouco de JS leve na especificação do componente de tema (apenas como um script inline) - algo como isto, apenas usando a exclusão [data-*] da lista de permissões.
function upgradeWidgets() {
const divsWithDataEvent = document.querySelectorAll('div[data-event]');
divsWithDataEvent.forEach((div) => {
const attributes = div.attributes;
for (let i = 0; i < attributes.length; i++) {
const attr = attributes[i];
if (attr.nodeName.startsWith('data-')) {
const newAttrName = attr.nodeName.replace('data-', '');
const attrValue = attr.nodeValue;
div.setAttribute(newAttrName, attrValue);
div.removeAttribute(attr.nodeName);
}
}
});
}
Claro, isso agora está sujeito a problemas de tempo - não consigo usar o hook onload (o script é removido do componente de tema?!) e todos os outros eventos DOM que consigo capturar de scripts não estão em um ponto onde este HTML da postagem esteja confiavelmente disponível no documento.
Tenho certeza de que existe alguma maneira particularmente idiomática de fazer tudo isso no Discourse - mas eu esperava que não precisasse ser um especialista para realizar uma integração tão leve.
Ficarei feliz em receber alguma orientação aqui.