Los embeds son realmente posibles tanto en la interfaz de Discourse (por ejemplo, encima de una lista de temas) usando un tema, como en el Plugin de Páginas de Aterrizaje. Para este último, he creado un ejemplo usando esta pequeña versión del Juego del Dinosaurio. Puedes jugar aquí: Pavilion (solo escritorio).
No se requiere codificación para esto. Lo único que hice fue subir esos recursos a nuestro CDN (arrastré y solté la carpeta en un ‘espacio’ de DigitalOcean), crear una página con la ruta “dinosaur” y copiar/pegar este HTML (todo a través de la interfaz de administración).
HTML
<div class="landing page dinosaur">
<div class="container">
<h1>¡Juego del Dinosaurio!</h1>
<canvas id="game" height="200" width="800"></canvas>
<p class="controls">presiona la barra espaciadora para empezar</p>
<script src="https://pavilion-assets.nyc3.digitaloceanspaces.com/dinosaur/js/helpers.js"></script>
<script src="https://pavilion-assets.nyc3.digitaloceanspaces.com/dinosaur/js/objects/game-object.js"></script>
<script src="https://pavilion-assets.nyc3.digitaloceanspaces.com/dinosaur/js/objects/cactus.js"></script>
<script src="https://pavilion-assets.nyc3.digitaloceanspaces.com/dinosaur/js/objects/dinosaur.js"></script>
<script src="https://pavilion-assets.nyc3.digitaloceanspaces.com/dinosaur/js/objects/background.js"></script>
<script src="https://pavilion-assets.nyc3.digitaloceanspaces.com/dinosaur/js/objects/score.js"></script>
<script src="https://pavilion-assets.nyc3.digitaloceanspaces.com/dinosaur/js/game.js"></script>
<script>
new Game({
el: document.getElementById("game")
});
window.onkeydown = function(e) {
return e.keyCode !== 32;
};
</script>
</div>
</div>
El Plugin de Páginas de Aterrizaje implementa la configuración de CSP y CORS de Discourse, que ya he configurado para manejar scripts desde nuestro CDN (a través de la configuración del sitio correspondiente).
La próxima semana publicaré un tema completo de la base de conocimientos titulado “Cómo alojar e incrustar recursos” para ese plugin, cubriendo este caso de uso.