Embed slide presentations in your site using Deck.js


Create simple presentations in the browser using Deck.js and all of Orchid's simple content management.


dependencies {
libraryDependencies += "io.github.javaeden.orchid" % "OrchidPresentations" % "0.21.2"



Basic Usage

Presentations consist of a deck of slides in a subdirectory of presentations/. Each presentation should be a separate directory in presentations/, and the content files within that presentation directory are the individual slides in the presentation deck.

. / (resources root)
├── homepage.md
├── config.yml
└── presentations/
    └── demo1/ <-- presentation key is "demo1"
        ├── slide-1.md
        ├── slide-2.md
        └── slide-3.md

These presentations can then be displayed in your Orchid site as a presentation component, which has a presentation property that references the name of one of your presentations (the name of the directory that contains slides). The presentation component adds the CSS and Javascript necessary to use Deck.js to display the content of your slides. Note that Deck.js requires JQuery to work. If you're using a theme that doesn't already have JQuery added, you'll need to add it yourself.

// pages/presentation.md
  - type: 'presentation'
    presentation: 'demo1' <-- uses presentation slides from `presentations/demo1/` directory

Note that a limitation of Deck.js is that only one presentation can be used on a page at a time, so only a single presentation should be added to each page.

Slide Ordering

The content files that make up the presentation are ordered according to their order on disk, and the filename becomes the unique ID added to the slide so that Deck.js is able to move between the slides. If the filenames are not ordered as you need them, you may manually set the ordering of slides by prefixing the filename with a number that is the slide order, such as 01-slide-one.md and 02-slide-two.md, which is stripped away from the slide ID.