Les intégrations sont en fait possibles à la fois dans l’interface utilisateur de Discourse (par exemple, au-dessus d’une liste de sujets) grâce à un thème, et via le plugin Landing Pages. Pour ce dernier, j’ai créé un exemple en utilisant cette petite version du jeu du Dinosaure. Vous pouvez y jouer ici : Pavilion (uniquement sur ordinateur de bureau).

Aucune programmation n’a été nécessaire pour cela. J’ai simplement téléchargé ces ressources sur notre CDN (j’ai glissé-déposé le dossier dans un espace DigitalOcean), créé une page avec le chemin « dinosaur » et copié-collé ce code HTML (le tout via l’interface d’administration).
HTML
<div class="landing page dinosaur">
<div class="container">
<h1>Jeu du Dinosaure !</h1>
<canvas id="game" height="200" width="800"></canvas>
<p class="controls">appuyez sur la barre d'espace pour démarrer</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>
Le plugin Landing Pages applique les paramètres CSP et CORS de Discourse, que j’ai déjà configurés pour autoriser les scripts provenant de notre CDN (via les paramètres du site concernés).
La semaine prochaine, je publierai un article complet dans la base de connaissances intitulé « Comment héberger et intégrer des ressources » pour couvrir ce cas d’utilisation avec ce plugin.