How to make a slide post?

[jrgong]

Currently exploring options as well. It should be possilbe to implement it as theme component, right?

E.g. there are markdown to slides libraries that could be used:

Here are the best GitHub repositories for this, ranked by how easily they can be adapted into a Discourse Theme Component.

1. Remark.js (Highly Recommended for Discourse)

• GitHub: gnab/remark

• How it works: Remark is designed specifically to run entirely in the browser. You feed it a Markdown string (where slides are separated by ---), and it dynamically generates the HTML/CSS required for the presentation on the fly.

• Why it fits Discourse: Because it requires zero build steps, you can easily load the remark.min.js script via your Discourse theme component. You can capture the Markdown from a user’s post and pass it directly into the Remark engine.

2. Reveal.js

• GitHub: hakimel/reveal.js

• How it works: Reveal.js is the heavy hitter of web presentations. While it is primarily an HTML presentation framework, it has a built-in Markdown plugin.

• Why it fits Discourse: It is extremely feature-rich (speaker notes, PDF export, animations, math typesetting). It can run client-side, but it is much heavier than Remark.js. You would need to load the core Reveal library, the Markdown plugin, and the Reveal CSS theme into your Discourse component.

3. Marp (Markdown Presentation Ecosystem)

• GitHub: marp-team/marp

• How it works: Marp is the modern standard for Markdown slides, utilizing a concept called “Directives” to handle CSS theming directly inside the Markdown frontmatter.

• Why it fits Discourse: Marp relies heavily on CLI tools and Node.js for rendering. However, they do offer Marpit (@marp-team/marpit), the core framework which can parse Markdown and output HTML/CSS. Implementing this in Discourse would require you to bundle Marpit into a client-side JavaScript file using a tool like Webpack or Rollup before uploading it as a theme component.

---

How to Implement This as a Discourse Theme Component

To repurpose one of these (like Remark.js) into a Discourse theme component, you’ll want to use the Discourse Plugin API to intercept specific Markdown blocks before they render on the page.

Here is a high-level blueprint of how you can build it:

1. Define a Trigger: Decide how users will tell Discourse to render slides. A great way is to use a specific code block language, like ```slides or a Discourse BBCode wrap like [wrap=slides].

2. Load the Library: In your theme component’s about.json, include the external script for Remark.js or Reveal.js so it loads when the user visits the forum.

3. Decorate the Cooked Content: Use the Discourse JavaScript API (api.decorateCookedElement) to look for your trigger blocks whenever a post is rendered.

4. Render: When the API finds a ```slides block, it hides the default code block, creates a new <div> container, and initializes the slide library inside that container using the raw text from the code block.