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.


1. 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.



2. 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.



3. 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.



4. Example: The GitPitch Quickstart Template

The Quickstart Template provides a real-world example of a Modular Slideshow. An overview of the repository file and directory structure for the template is shown here:

.
├── PITCHME.md
|
├── PITCHME.yaml
|
└── template
    |
    ├── css
    │   └── PITCHME.css
    |
    ├── img
    |   |
    │   ├── batman.png
    │   ├── dataflow.png
    │   ├── developer.jpg
    │   ├── einstein.png
    │   └── ....
    └── md
        |
        ├── about/PITCHME.md
        ├── announcement/PITCHME.md
        ├── code-presenting/PITCHME.md
        ├── header-footer/PITCHME.md
        ├── image/PITCHME.md
        ├── list-content/PITCHME.md
        ├── quotation/PITCHME.md
        ├── sidebar/PITCHME.md
        ├── sidebox/PITCHME.md
        ├── split-screen/PITCHME.md
        └── wrap-up/PITCHME.md

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

https://gitpitch.com/gitpitch/the-template

However, the template has grouped related slide designs into popular categories. And the slide designs for each category are delivered within their own dedicated PITCHME.md markdown files.

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

For example, to present the split-screen designs as an independent mini-deck, simply identify the split-screen category as a query parameter on the standard slideshow URL, for example:

https://gitpitch.com/gitpitch/the-template?p=template/md/split-screen

This exact same approach can be used to present any of the slide-design categories as an independent mini-deck. You can visit The Template Slide Designs Guide to see how these mini-decks are used to simplify the browsing and discovery of specific slide designs for template users.