Как создать пост-слайд?

[jrgong]

Сейчас тоже изучаю варианты. Должно быть возможно реализовать это как компонент темы, верно?

Например, существуют библиотеки для преобразования Markdown в слайды, которые можно использовать:

Вот лучшие репозитории GitHub для этой задачи, ранжированные по простоте адаптации под компонент темы Discourse.

1. Remark.js (Настоятельно рекомендуется для Discourse)

• GitHub: gnab/remark

• Как это работает: Remark разработан специально для работы исключительно в браузере. Вы передаете ему строку Markdown (где слайды разделены ---), и он динамически генерирует необходимый HTML/CSS для презентации на лету.

• Почему это подходит для Discourse: Поскольку не требуется никаких этапов сборки, вы можете легко загрузить скрипт remark.min.js через компонент вашей темы Discourse. Вы можете извлечь Markdown из сообщения пользователя и передать его непосредственно в движок Remark.

2. Reveal.js

• GitHub: hakimel/reveal.js

• Как это работает: Reveal.js — это мощное решение для веб-презентаций. Хотя это прежде всего фреймворк для HTML-презентаций, у него есть встроенный плагин для Markdown.

• Почему это подходит для Discourse: Он чрезвычайно функционален (заметки докладчика, экспорт в PDF, анимации, математическая верстка). Он может работать на стороне клиента, но он значительно тяжелее, чем Remark.js. Вам потребуется загрузить основную библиотеку Reveal, плагин Markdown и тему CSS Reveal в ваш компонент Discourse.

3. Marp (Markdown Presentation Ecosystem)

• GitHub: marp-team/marp

• Как это работает: Marp — это современный стандарт для слайдов в Markdown, использующий концепцию «Директив» для обработки темизации CSS непосредственно внутри заголовка (frontmatter) Markdown.

• Почему это подходит для Discourse: Marp сильно зависит от инструментов CLI и Node.js для рендеринга. Однако они предлагают Marpit (@marp-team/marpit) — базовый фреймворк, который может парсить Markdown и выдавать HTML/CSS. Реализация этого в Discourse потребует упаковки Marpit в клиентский JavaScript-файл с помощью инструмента вроде Webpack или Rollup перед загрузкой в качестве компонента темы.

---

Как реализовать это как компонент темы Discourse

Чтобы переделать один из этих инструментов (например, Remark.js) в компонент темы Discourse, вам следует использовать API плагинов Discourse для перехвата определенных блоков Markdown перед их отображением на странице.

Вот высокоуровневый план того, как вы можете это реализовать:

1. Определите триггер: Решите, как пользователи будут указывать Discourse на необходимость рендеринга слайдов. Отличный способ — использовать специальный язык для блоков кода, например ```slides или обертку Discourse BBCode вида [wrap=slides].

2. Загрузите библиотеку: В файле about.json вашего компонента темы укажите внешний скрипт для Remark.js или Reveal.js, чтобы он загружался при посещении пользователем форума.

3. Обработайте обработанный контент: Используйте JavaScript API Discourse (api.decorateCookedElement), чтобы искать ваши блоки-триггеры при рендеринге каждого сообщения.

4. Рендеринг: Когда API находит блок ```` ```slides ``, он скрывает блок кода по умолчанию, создает новый контейнер <div> и инициализирует библиотеку слайдов внутри этого контейнера, используя необработанный текст из блока кода.