Como fazer um post de slide?

[jrgong]

Também estou explorando opções no momento. Deve ser possível implementá-lo como um componente de tema, certo?

Por exemplo, existem bibliotecas de markdown para slides que poderiam ser usadas:

Aqui estão os melhores repositórios do GitHub para isso, classificados pela facilidade com que podem ser adaptados para um Componente de Tema do Discourse.

1. Remark.js (Altamente Recomendado para Discourse)

• GitHub: gnab/remark

• Como funciona: O Remark é projetado especificamente para ser executado inteiramente no navegador. Você fornece a ele uma string Markdown (onde os slides são separados por ---), e ele gera dinamicamente o HTML/CSS necessário para a apresentação em tempo real.

• Por que se encaixa no Discourse: Como não requer etapas de compilação, você pode facilmente carregar o script remark.min.js através do seu componente de tema do Discourse. Você pode capturar o Markdown da postagem de um usuário e passá-lo diretamente para o motor Remark.

2. Reveal.js

• GitHub: hakimel/reveal.js

• Como funciona: O Reveal.js é o “peso pesado” das apresentações web. Embora seja principalmente uma estrutura de apresentação HTML, ele possui um plugin Markdown integrado.

• Por que se encaixa no Discourse: É extremamente rico em recursos (notas do orador, exportação para PDF, animações, tipografia matemática). Ele pode ser executado no lado do cliente, mas é muito mais pesado que o Remark.js. Você precisaria carregar a biblioteca principal do Reveal, o plugin Markdown e o tema CSS do Reveal no seu componente do Discourse.

3. Marp (Ecossistema de Apresentação Markdown)

• GitHub: marp-team/marp

• Como funciona: O Marp é o padrão moderno para slides em Markdown, utilizando um conceito chamado “Diretivas” para lidar com a estilização CSS diretamente no frontmatter do Markdown.

• Por que se encaixa no Discourse: O Marp depende muito de ferramentas CLI e Node.js para renderização. No entanto, eles oferecem o Marpit (@marp-team/marpit), a estrutura principal que pode analisar Markdown e gerar HTML/CSS. Implementar isso no Discourse exigiria que você empacotasse o Marpit em um arquivo JavaScript do lado do cliente usando uma ferramenta como Webpack ou Rollup antes de carregá-lo como um componente de tema.

---

Como Implementar Isso como um Componente de Tema do Discourse

Para reaproveitar um desses (como o Remark.js) em um componente de tema do Discourse, você desejará usar a API de Plugin do Discourse para interceptar blocos Markdown específicos antes que eles sejam renderizados na página.

Aqui está um esboço de alto nível de como você pode construí-lo:

1. Definir um Gatilho: Decida como os usuários dirão ao Discourse para renderizar os slides. Uma ótima maneira é usar uma linguagem de bloco de código específica, como ```slides ou um wrapper BBCode do Discourse como [wrap=slides].

2. Carregar a Biblioteca: No about.json do seu componente de tema, inclua o script externo para Remark.js ou Reveal.js para que ele carregue quando o usuário visitar o fórum.

3. Decorar o Conteúdo Cozido: Use a API JavaScript do Discourse (api.decorateCookedElement) para procurar seus blocos de gatilho sempre que uma postagem for renderizada.

4. Renderizar: Quando a API encontrar um bloco ```slides, ela oculta o bloco de código padrão, cria um novo contêiner <div> e inicializa a biblioteca de slides dentro desse contêiner usando o texto bruto do bloco de código.