Come creare un post a scorrimento?

[jrgong]

Sto esplorando anche io le opzioni. Dovrebbe essere possibile implementarlo come componente tema, giusto?

Ad esempio, ci sono librerie da Markdown a slide che potrebbero essere utilizzate:

Ecco i migliori repository GitHub per questo, classificati in base alla facilità con cui possono essere adattati in un Componente Tema di Discourse.

1. Remark.js (Altamente Raccomandato per Discourse)

• GitHub: gnab/remark

• Come funziona: Remark è progettato specificamente per essere eseguito interamente nel browser. Gli si fornisce una stringa Markdown (dove le slide sono separate da ---), e genera dinamicamente l’HTML/CSS richiesto per la presentazione al volo.

• Perché si adatta a Discourse: Poiché non richiede passaggi di build, puoi facilmente caricare lo script remark.min.js tramite il tuo componente tema di Discourse. Puoi catturare il Markdown dal post di un utente e passarlo direttamente al motore Remark.

2. Reveal.js

• GitHub: hakimel/reveal.js

• Come funziona: Reveal.js è il pezzo grosso delle presentazioni web. Sebbene sia principalmente un framework di presentazione HTML, ha un plugin Markdown integrato.

• Perché si adatta a Discourse: È estremamente ricco di funzionalità (note per l’oratore, esportazione PDF, animazioni, composizione matematica). Può essere eseguito lato client, ma è molto più pesante di Remark.js. Dovresti caricare la libreria principale di Reveal, il plugin Markdown e il tema CSS di Reveal nel tuo componente Discourse.

3. Marp (Ecosistema di Presentazione Markdown)

• GitHub: marp-team/marp

• Come funziona: Marp è lo standard moderno per le slide Markdown, utilizzando un concetto chiamato “Direttive” per gestire il tema CSS direttamente all’interno del frontmatter Markdown.

• Perché si adatta a Discourse: Marp fa molto affidamento su strumenti CLI e Node.js per il rendering. Tuttavia, offrono Marpit (@marp-team/marpit), il framework principale che può analizzare il Markdown e produrre HTML/CSS. Implementare questo in Discourse richiederebbe di includere Marpit in un file JavaScript lato client utilizzando uno strumento come Webpack o Rollup prima di caricarlo come componente tema.

---

Come Implementarlo come Componente Tema di Discourse

Per riutilizzare uno di questi (come Remark.js) in un componente tema di Discourse, vorrai utilizzare la Discourse Plugin API per intercettare specifici blocchi Markdown prima che vengano renderizzati sulla pagina.

Ecco uno schema di alto livello su come puoi costruirlo:

1. Definire un Trigger: Decidi come gli utenti diranno a Discourse di renderizzare le slide. Un ottimo modo è usare un linguaggio di blocco codice specifico, come ```slides o un wrapper BBCode di Discourse come [wrap=slides].

2. Caricare la Libreria: Nel file about.json del tuo componente tema, includi lo script esterno per Remark.js o Reveal.js in modo che venga caricato quando l’utente visita il forum.

3. Decorare il Contenuto Cotto (Cooked Content): Usa l’API JavaScript di Discourse (api.decorateCookedElement) per cercare i tuoi blocchi trigger ogni volta che viene renderizzato un post.

4. Renderizzare: Quando l’API trova un blocco ```slides, nasconde il blocco codice predefinito, crea un nuovo contenitore \u003cdiv\u003e e inizializza la libreria di slide all’interno di quel contenitore utilizzando il testo grezzo proveniente dal blocco codice.