Comment faire un post de diapositives ?

[jrgong]

J’explore également les options actuellement. Il devrait être possible de l’implémenter en tant que composant de thème, n’est-ce pas ?

Par exemple, il existe des bibliothèques de conversion Markdown en diapositives qui pourraient être utilisées :

Voici les meilleurs dépôts GitHub pour cela, classés en fonction de la facilité avec laquelle ils peuvent être adaptés en un composant de thème Discourse.

1. Remark.js (Fortement recommandé pour Discourse)

• GitHub : gnab/remark

• Fonctionnement : Remark est spécifiquement conçu pour s’exécuter entièrement dans le navigateur. Vous lui fournissez une chaîne Markdown (où les diapositives sont séparées par ---), et il génère dynamiquement le HTML/CSS requis pour la présentation à la volée.

• Pourquoi cela convient à Discourse : Comme il ne nécessite aucune étape de construction, vous pouvez facilement charger le script remark.min.js via votre composant de thème Discourse. Vous pouvez capturer le Markdown du message d’un utilisateur et le transmettre directement au moteur Remark.

2. Reveal.js

• GitHub : hakimel/reveal.js

• Fonctionnement : Reveal.js est le poids lourd des présentations web. Bien qu’il s’agisse principalement d’un framework de présentation HTML, il dispose d’un plugin Markdown intégré.

• Pourquoi cela convient à Discourse : Il est extrêmement riche en fonctionnalités (notes du présentateur, exportation PDF, animations, composition mathématique). Il peut s’exécuter côté client, mais il est beaucoup plus lourd que Remark.js. Vous devrez charger la bibliothèque principale Reveal, le plugin Markdown et le thème CSS de Reveal dans votre composant Discourse.

3. Marp (Écosystème de présentation Markdown)

• GitHub : marp-team/marp

• Fonctionnement : Marp est la norme moderne pour les diapositives Markdown, utilisant un concept appelé « Directives » pour gérer le thème CSS directement dans le frontmatter Markdown.

• Pourquoi cela convient à Discourse : Marp dépend fortement des outils CLI et de Node.js pour le rendu. Cependant, ils proposent Marpit (@marp-team/marpit), le framework de base qui peut analyser le Markdown et produire du HTML/CSS. L’implémentation de ceci dans Discourse nécessiterait que vous regroupiez Marpit dans un fichier JavaScript côté client à l’aide d’un outil comme Webpack ou Rollup avant de le télécharger en tant que composant de thème.

---

Comment implémenter ceci en tant que composant de thème Discourse

Pour réutiliser l’un d’entre eux (comme Remark.js) dans un composant de thème Discourse, vous voudrez utiliser l’API de plugin Discourse pour intercepter des blocs Markdown spécifiques avant qu’ils ne soient rendus sur la page.

Voici un plan général de la façon dont vous pouvez le construire :

1. Définir un déclencheur : Décidez comment les utilisateurs indiqueront à Discourse de rendre les diapositives. Une excellente façon consiste à utiliser un langage de bloc de code spécifique, comme ```slides ou un wrapper BBCode Discourse tel que [wrap=slides].

2. Charger la bibliothèque : Dans le fichier about.json de votre composant de thème, incluez le script externe pour Remark.js ou Reveal.js afin qu’il se charge lorsque l’utilisateur visite le forum.

3. Décorer le contenu cuit (Cooked Content) : Utilisez l’API JavaScript de Discourse (api.decorateCookedElement) pour rechercher vos blocs déclencheurs chaque fois qu’un message est rendu.

4. Rendre : Lorsque l’API trouve un bloc ```slides, elle masque le bloc de code par défaut, crée un nouveau conteneur \u003cdiv\u003e et initialise la bibliothèque de diapositives à l’intérieur de ce conteneur en utilisant le texte brut du bloc de code.