Wie erstelle ich einen Slide-Post?

[jrgong]

Ich erkunde derzeit auch Optionen. Es sollte möglich sein, dies als Theme Component zu implementieren, oder?

Zum Beispiel gibt es Bibliotheken für Markdown zu Folien, die verwendet werden könnten:

Hier sind die besten GitHub-Repositories dafür, geordnet nach der Leichtigkeit, mit der sie in eine Discourse Theme Component integriert werden können.

1. Remark.js (Sehr empfohlen für Discourse)

• GitHub: gnab/remark

• Funktionsweise: Remark wurde speziell dafür entwickelt, vollständig im Browser zu laufen. Man übergibt ihm einen Markdown-String (wobei Folien durch --- getrennt sind), und es generiert dynamisch das erforderliche HTML/CSS für die Präsentation im laufenden Betrieb.

• Warum es zu Discourse passt: Da keine Build-Schritte erforderlich sind, können Sie das Skript remark.min.js einfach über Ihre Discourse Theme Component laden. Sie können den Markdown aus dem Beitrag eines Benutzers erfassen und direkt an die Remark-Engine übergeben.

2. Reveal.js

• GitHub: hakimel/reveal.js

• Funktionsweise: Reveal.js ist der Schwergewichtler unter den Web-Präsentationen. Obwohl es in erster Linie ein HTML-Präsentationsframework ist, verfügt es über ein integriertes Markdown-Plugin.

• Warum es zu Discourse passt: Es ist extrem funktionsreich (Sprechernotizen, PDF-Export, Animationen, mathematische Typensetzung). Es kann clientseitig ausgeführt werden, ist aber viel schwerer als Remark.js. Sie müssten die Kern-Reveal-Bibliothek, das Markdown-Plugin und das Reveal-CSS-Theme in Ihre Discourse-Komponente laden.

3. Marp (Markdown Presentation Ecosystem)

• GitHub: marp-team/marp

• Funktionsweise: Marp ist der moderne Standard für Markdown-Folien und verwendet ein Konzept namens „Directives“, um CSS-Theming direkt im Markdown-Frontmatter zu handhaben.

• Warum es zu Discourse passt: Marp ist stark auf CLI-Tools und Node.js für das Rendering angewiesen. Sie bieten jedoch Marpit (@marp-team/marpit), das Kernframework, das Markdown parsen und HTML/CSS ausgeben kann. Die Implementierung in Discourse würde erfordern, dass Sie Marpit mithilfe eines Tools wie Webpack oder Rollup in eine clientseitige JavaScript-Datei bündeln, bevor Sie es als Theme Component hochladen.

---

Implementierung als Discourse Theme Component

Um eine dieser Optionen (wie Remark.js) in eine Discourse Theme Component umzuwandeln, sollten Sie die Discourse Plugin API verwenden, um bestimmte Markdown-Blöcke abzufangen, bevor sie auf der Seite gerendert werden.

Hier ist ein grober Bauplan, wie Sie es erstellen können:

1. Einen Auslöser definieren: Entscheiden Sie, wie Benutzer Discourse anweisen, Folien zu rendern. Ein guter Weg ist die Verwendung einer bestimmten Codeblock-Sprache, wie ```slides oder einer Discourse BBCode-Umhüllung wie [wrap=slides].

2. Die Bibliothek laden: Fügen Sie in der about.json Ihrer Theme Component das externe Skript für Remark.js oder Reveal.js hinzu, damit es geladen wird, wenn der Benutzer das Forum besucht.

3. Den gekochten Inhalt dekorieren: Verwenden Sie die Discourse JavaScript API (api.decorateCookedElement), um nach Ihren Auslöserblöcken zu suchen, wann immer ein Beitrag gerendert wird.

4. Rendern: Wenn die API einen ```slides Block findet, blendet sie den Standard-Codeblock aus, erstellt einen neuen \u003cdiv\u003e-Container und initialisiert die Folienbibliothek in diesem Container mithilfe des Roh-Textes aus dem Codeblock.