Hola,
Todavía no he conseguido que esto funcione por ningún medio que he encontrado, y me gustaría saber si son solo mis expectativas las que están equivocadas.
Me estoy integrando con mi instalación de pretix (para vender entradas para eventos). Esto debería consistir simplemente en añadir HTML a una publicación y asegurarse de que se incluyan el HTML y CSS de pretix.
<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>
<!-- en otro lugar, en una publicación -->
<pretix-widget event="https://pretix.eu/demo/democon/">
</pretix-widget>
<noscript>
<div class="pretix-widget">
<div class="pretix-widget-info-message">
JavaScript está deshabilitado en tu navegador. Para acceder a nuestra tienda de entradas sin JavaScript,
por favor <a target="_blank" href="https://pretix.eu/demo/democon/">haz clic aquí</a>.
</div>
</div>
</noscript>
Obviamente, los scripts de pretix escanean el documento en busca de los elementos apropiados por etiqueta y luego los reemplazan con entradas personalizables (como busco).
Creo que puedo (y deseo) lograr esta integración de forma ligera, y estaba pensando que podría simplemente usar los componentes de tema personalizados para lograr esto incluyendo los scripts/estilos externos de pretix y añadiendo el HTML del widget a las publicaciones (es decir, solo con la ‘configuración’).
Primero me encontré con las protecciones CSP (buenas) y la lista de permitidos (también buena). Igualmente, he añadido la configuración CSP, pero ahora aparentemente no puedo alterar la lista de permitidos sin realizar alteraciones de código reales, por lo que me veo obligado a insertar HTML ‘con sabor’ en las publicaciones y luego intentar alterarlas después de renderizarlas.
Procedí a intentar usar un poco de JS ligero en la especificación del componente de tema (solo como un script en línea), algo como esto, usando la exclusión [data-*] de la lista de permitidos.
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);
}
}
});
}
Por supuesto, esto ahora está sujeto a problemas de tiempo: no puedo engancharme a onload (¿el script se elimina del componente del tema?!) y a cada otro evento DOM que puedo atrapar desde los scripts no está en un punto en el que este HTML de publicación esté disponible de manera confiable en el documento.
Estoy seguro de que hay alguna forma particularmente idiomática de hacer todo esto en Discourse, pero esperaba no tener que ser un experto para realizar una integración tan ligera.
Agradecería alguna orientación al respecto.