Modular Slideshows


The Modular Markdown Guide details the recommended approach and key benefits of adopting a modular design when developing and managing slideshow presentation content. Especially when you are developing course or training materials.

This guide takes modularity one step further, showing you how you can use modular markdown to deliver modular slideshows.

What is a Modular Slideshow?

A Modular Slideshow is a slideshow built using modular markdown that allows you to publish mini-decks. Each mini-deck presents a subset of slides found within the master presentation. Mini-decks can be shared independently with any audience.

This feature is especially powerful when you are developing slide decks to deliver course and training materials. Modular slideshows allow you to develop complete course content that can share common slides, assets, and styles. And then deliver your course to your audience as as series of topic-specific mini-decks.

Example: HTML5 Training Slideshow Revisited

The Modular Markdown Guide demonstrated how a modular approach can be used to deliver training materials using an example course, an Introduction to HTML5. Here is the repository file and directory structure for that example:

.
├── PITCHME.md
|
├── PITCHME.yaml
|
├── common
│   ├── about
│   │   └── PITCHME.md
│   └── contact
│       └── PITCHME.md
|
└── training
    |
    └── topics
        |
        ├── css
        |   |
        │   ├── PITCHME.md
        |   |
        │   ├── selectors
        │   │   └── PITCHME.md
        |   |
        │   └── syntax
        │       └── PITCHME.md
        |
        ├── html
        |   |
        │   ├── PITCHME.md
        |   |
        │   ├── attributes
        │   │   └── PITCHME.md
        |   |
        │   └── tags
        │       └── PITCHME.md
        |
        └── js
            |
            ├── PITCHME.md
            |
            ├── callbacks
            │   └── PITCHME.md
            └── objects
                └── PITCHME.md

The above file and directory structure recognizes the inherently modular - HTML, CSS, and JavaScript - nature of the Introduction to HTML5 course content.

The master presentation delivered by the content in this repository delivers the full set of content across all topics covered by the example HTML5 course. The master presentation could be shared at the following (fictitious) slideshow URL:

https://gitpitch.com/acmecorp/html5

The example that follows below demonstrates how mini-slideshows can be delivered with zero-modifications to the master content.

Example: HTML5 Training Mini-Slideshows

The following example takes advantage of existing content within the example Introduction to HTML5 repository to deliver chapter-specific mini-decks. These mini-decks can be used to simplify the delivery of the training course materials.

The following directory outline shows the addition of new chapter specific PITCHME.md markdown files:

.
├── PITCHME.md
|
├── PITCHME.yaml
|
├── chapter
|   |
|   ├── css
|   │   └── PITCHME.md
|   |
|   ├── html
|   │   └── PITCHME.md
|   |
|   └── topics
|       └── PITCHME.md
|
└── training
    |
    └── ...

The addition of the new PITCHME.md chapter content allows us to reuse existing markdown content per topic and deliver individual mini-decks for HTML, CSS, and JavaScript.

The content of the new chapter/css/PITCHME.md markdown file might look as follows:


---?include=course/common/greeting/PITCHME.md

---?include=course/topics/css/PITCHME.md

---?include=course/topics/css/selectors/PITCHME.md

---?include=course/topics/css/syntax/PITCHME.md

---?include=course/common/contact-me/PITCHME.md

As you can see above, the content of our new CSS chapter mini-deck is created purely by reusing existing presentation content found in the repository. No file, asset, or style duplication.

To present this new CSS-chapter specific mini-deck, simply identify the chapter as a query parameter on the standard slideshow URL, for example (fictitious):

https://gitpitch.com/acmecorp/html5?p=chapter/css

This exact same approach can be used to deliver mini-decks for the HTML and JavaScript chapters too. Giving you great flexibility when presenting training course materials to any audience.

Example: The GitPitch Demo Deck

The GitPitch Demo Deck provides a real-world example of a Modular Slideshow. An overview of the repository file and directory structure for the demo deck is shown here:


.
├── assets
│   ├── css
│   │   └── PITCHME.css
│   └── img
│       ├── robot.jpg
│       └── fireworks.gif
├── deck
│   ├── code
│   │   └── PITCHME.md
│   ├── desktop
│   │   └── PITCHME.md
│   ├── layout
│   │   └── PITCHME.md
│   ├── media
│   │   └── PITCHME.md
│   ├── theme
│   │   └── PITCHME.md
│   └── widgets
│       └── PITCHME.md
│
├── PITCHME.yaml
└── PITCHME.md

The master presentation for The Demo Deck is found at the following slideshow URL:

https://gitpitch.com/gitpitch/demo-deck

For demonstration purposes the slide content for this deck has been partitioned into distinct topics. Where each topic is maintained within it's own dedicated PITCHME.md markdown file.

One consequence of this modular design of the demo deck is that each topic can be opened and viewed as an independent slideshow presentation, or mini-deck.

For example, to present the widgets topic as an independent mini-deck, simply identify the widgets as a query parameter on the standard slideshow URL, for example:

https://gitpitch.com/gitpitch/demo-deck?p=deck/widgets

This exact same approach can be used to present any of distinct topics as an independent mini-deck.