슬라이드 포스트는 어떻게 만드나요?

[jrgong]

현재 옵션들을 탐색하고 있습니다. 테마 컴포넌트로 구현하는 것이 가능할 것 같지 않나요?

예를 들어, 사용할 수 있는 마크다운 슬라이드 라이브러리가 있습니다:

이것을 Discourse 테마 컴포넌트로 얼마나 쉽게 적응시킬 수 있는지에 따라 순위가 매겨진 최고의 GitHub 저장소들입니다.

1. Remark.js (Discourse에 강력히 추천)

• GitHub: gnab/remark

• 작동 방식: Remark는 완전히 브라우저에서 실행되도록 설계되었습니다. 마크다운 문자열(슬라이드는 ---로 구분)을 입력하면, 프레젠테이션에 필요한 HTML/CSS를 동적으로 실시간으로 생성합니다.

• Discourse에 적합한 이유: 빌드 단계가 전혀 필요하지 않으므로, Discourse 테마 컴포넌트를 통해 remark.min.js 스크립트를 쉽게 로드할 수 있습니다. 사용자의 게시물에서 마크다운을 캡처하여 Remark 엔진에 직접 전달할 수 있습니다.

2. Reveal.js

• GitHub: hakimel/reveal.js

• 작동 방식: Reveal.js는 웹 프레젠테이션 분야의 강력한 도구입니다. 주로 HTML 프레젠테이션 프레임워크이지만, 내장된 마크다운 플러그인을 제공합니다.

• Discourse에 적합한 이유: 기능이 매우 풍부합니다(발표자 노트, PDF 내보내기, 애니메이션, 수식 타이포그래피). 클라이언트 사이드에서 실행할 수 있지만, Remark.js보다 훨씬 무겁습니다. Discourse 컴포넌트에 Reveal 핵심 라이브러리, 마크다운 플러그인 및 Reveal CSS 테마를 로드해야 합니다.

3. Marp (마크다운 프레젠테이션 생태계)

• GitHub: marp-team/marp

• 작동 방식: Marp는 마크다운 슬라이드의 현대적 표준으로, 마크다운 프론트매터 내에서 CSS 테마를 직접 처리하기 위해 "디렉티브(Directives)"라는 개념을 사용합니다.

• Discourse에 적합한 이유: Marp는 렌더링을 위해 CLI 도구와 Node.js에 크게 의존합니다. 그러나 마크다운을 파싱하고 HTML/CSS를 출력할 수 있는 핵심 프레임워크인 Marpit(@marp-team/marpit)을 제공합니다. 이를 Discourse에 구현하려면 Webpack이나 Rollup과 같은 도구를 사용하여 Marpit을 클라이언트 사이드 JavaScript 파일로 번들링한 후 테마 컴포넌트로 업로드해야 합니다.

---

Discourse 테마 컴포넌트로 구현하는 방법

이 중 하나(예: Remark.js)를 Discourse 테마 컴포넌트로 재사용하려면, 페이지에 렌더링되기 전에 특정 마크다운 블록을 가로채기 위해 Discourse 플러그인 API를 사용해야 합니다.

다음은 이를 구축할 수 있는 고수준의 청사진입니다:

1. 트리거 정의: 사용자가 Discourse에 슬라이드를 렌더링하도록 지시하는 방법을 결정합니다. 좋은 방법 중 하나는 ```slides와 같은 특정 코드 블록 언어나 [wrap=slides]와 같은 Discourse BBCode 래핑을 사용하는 것입니다.

2. 라이브러리 로드: 테마 컴포넌트의 about.json에 Remark.js 또는 Reveal.js의 외부 스크립트를 포함하여 사용자가 포럼을 방문할 때 로드되도록 합니다.

3. 쿠킹된 콘텐츠 꾸미기(Decorate): Discourse JavaScript API(api.decorateCookedElement)를 사용하여 게시물이 렌더링될 때마다 트리거 블록을 찾습니다.

4. 렌더링: API가 ```slides 블록을 발견하면, 기본 코드 블록을 숨기고 새로운 <div> 컨테이너를 생성한 다음, 코드 블록의 원본 텍스트를 사용하여 해당 컨테이너 안에 슬라이드 라이브러리를 초기화합니다.