a-slides

Customisable slideshow scaffolding using Jekyll and Generators

Design philosphy

• Minimalist to encourage running own Javascript inside generators to control slides
• Extensible via plugins
• provides minimal styling so addtional styling can be provided by slide author

How to use

As a github pages site:

An example site is in https://github.com/AdaRoseEdwards/a-slides/tree/master/jekyll-template it has two methods of creating slide content:

• Single page blog post which becomes a slide deck at the push of a button, in which blockquotes get treated as slides and the text around them becomes speakers notes. .* Source
• Each Jekyll post is a treated as a slide in the slide deck. .* Source, part1 index.html .* Source, part2 the posts directory

on it's own

• include build/a-slides.js and build/a-slides.css in your page.
• when the script is done it converts appropriate DOM into slides.

<div class="a-slides_slide-container">
    <div class="a-slides_slide active" data-slide-id="slide-id-for-deep-linking">
        <div class="dark a-slides_slide-content">
            Slide 1 Content goes here
        </div>
        <div class="a-slides_notes">
            Slide 1 Notes goes here
        </div>
    </div>
    <div class="a-slides_slide active" data-slide-id="slide-the-second-slide">
        <div class="dark a-slides_slide-content">
            Slide 2 Content goes here
        </div>
        <div class="a-slides_notes">
            Slide 2 Notes goes here
        </div>
    </div>
</div>

API:

Initialising

    const slideData = {'slide-id': {
        setup() {},
        action: function *() {
            this.appendChild(window.MAKE.markdown('# Hello'));
            yield;
            this.appendChild(window.MAKE.markdown('# World'));
        },
        teardown: {
            this.innerHTML = '';
        }
    }};

    new ASlides(slideData, {
        slideContainer: document.querySelector('.a-slides_slide-container'),
        plugins: [
            ASlides.prototype.plugins.markdownTransform, // needs to be run first
            ASlides.prototype.plugins.slideController, // needs to be run before buttons are added to it.
            ASlides.prototype.plugins.deepLinking,
            ASlides.prototype.plugins.interactionKeyboard,
            ASlides.prototype.plugins.interactionTouch({ // has configuration
                use: ['swipe-back']
            }),
            ASlides.prototype.plugins.bridgeServiceWorker,
            ASlides.prototype.plugins.bridgeWebRTC({ // PeerJS plugin so one slide controls the rest
                peerSettings: {
                    host: 'example-peerjs-server.com',
                    secure: true,
                    port: 9000,
                    debug: 2,
                    path:"/peerjs"
                }
            })
        ]
    });

    if (location.search === '?presentation') {
        slideContainer.classList.add('presentation');
    }

    if (location.search === '?notes') {
        slideContainer.classList.add('hide-presentation');
    }

Inbuilt Plugins

• markdownTransform: .* Converts the content of any dom element with a class of '.marked' into html using markdown syntax.

• slideController: .* Adds some buttons to the top of the screen for going in and out of presentation mode

• deepLinking: .* If the url contains a hash which matches a slide-id that slide gets displayed on load

• interactionKeyboard: .* Adds key controls for progressing to the next slide or going back to the previous

• interactionTouch: .* So one can swipe forward or back to previous slides.

• bridgeServiceWorker: .* Allows one open tab to control another so you can have notes on one display and the presentation on another. .* Requires a service worker set to echo some events, example:

    // Send a signal to all connected windows.
    // Used for service worker bridge in a-slides
    function reply(data) {
        return self.clients.matchAll({type: 'window'})
        .then(function (windows) {
            windows.forEach(function (w) {
                w.postMessage(data);
            });
        });
    }

    // Echo messages back to every window
    self.addEventListener('message', function(event) {
        reply(event.data);
    });

• bridgeWebRTC: .* Uses the peer.js library to connect to and control another client via WebRTC. Requires an existing peer.js signaling server.

Animating slides

Slide animations are defined as such:

{'slide-id': {
    setup() {},
    action: function *() {
        this.appendChild(window.MAKE.markdown('# Hello'));
        yield;
        this.appendChild(window.MAKE.markdown('# World'));
    },
    teardown: {
        this.innerHTML = '';
    }
}}

• Animations are defined as generators, when the yeild whenever you are awaiting an input from the presenter.
• setup is run and action are run when the slide is being moved into position.
• action's next() is called repeatedly with each input.
• teardown() is called after the slide has been hidden
• resetting a slide will run teardown() and reinitialise action()
• for a complex example see: https://github.com/AdaRoseEdwards/progressive-web-apps-talk/blob/gh-pages/scripts/content/LoaPN.js

Events

• a-slides_slide-setup
• a-slides_slide-show
• a-slides_slide-teardown
• a-slides_refresh-slide (fireable)
• a-slides_next-slide (fireable)
• a-slides_previous-slide (fireable)
• a-slides_goto-slide (fireable)

// goto a slide by id or by dom element
slideContainer.fire('a-slides_goto-slide', {slide: 0});
slideContainer.fire('a-slides_goto-slide', {slide: document.querySelector('.a-slide')});

Writing plugins

Todo

Styling

Example SCSS file: jekyll-template/styles/slides.scss