Gli embed sono effettivamente possibili sia nell’interfaccia utente di Discourse (ad esempio sopra un elenco di argomenti) tramite un tema, sia nel Plugin Landing Pages. Per quest’ultimo, ho creato un esempio utilizzando questa piccola versione del Dinosaur Game. Puoi giocarci qui: Pavilion (solo desktop).

Per questo non è stato necessario scrivere codice. Ho semplicemente caricato le risorse sul nostro CDN (trascinando la cartella in uno “spazio” DigitalOcean), creato una pagina con il percorso “dinosaur” e copiato/incollato questo HTML (entrambe le operazioni eseguite tramite l’interfaccia di amministrazione).
HTML
<div class="landing page dinosaur">
<div class="container">
<h1>Dinosaur Game!</h1>
<canvas id="game" height="200" width="800"></canvas>
<p class="controls">premi la barra spaziatrice per iniziare</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>
Il Plugin Landing Pages applica le impostazioni CSP e CORS di Discourse, che ho già configurato per gestire gli script dal nostro CDN (tramite le impostazioni del sito pertinenti).
La prossima settimana pubblicherò un argomento completo nella knowledge base su “Come ospitare e incorporare risorse” dedicato a questo plugin, per coprire questo caso d’uso.