Revised Presentations Website

In the previous post about being able to give presentations using a website, I shared the Javascript code that is used for navigation of the slides/page with the keyboard. That code has since been revised with the latest layout changes made.

I create a subdomain that will house all of the presentations and the presentations will live on their own website. I have seen other presenters create "living presentations". These presentations are created one time, but used and revised repeatedly. After the presentation, you do not have to send the sldies to the audience. Instead they can go to the website and view the slides. If the slides change in the future, then the audience will still have access to the latest version of the content.

With this website, some custom CSS was added so that specific elements are displayed in text that can be easily seen on larger screens. Also so that layouts for each slide do not have to be created.

On Page Navigation

On the page, the user can click the links in the upper right of the screen to navigate the slides. To minimize distractions, these buttons are icons used from the Get Bootstrap Icons website.

Here is the code that is in place for the buttons. Using the static site generator MkDocs, it will substitute the previous and next links in for the URLs to those pages. Also has logic to conditionally show the buttons so that you do not go into the next presentation (organizated by folders).

{% set currentDirectory = page.url.split('/')[0] %}

<ul class="navbar-nav ms-auto mb-2 mb-md-0">
    {% if page and currentDirectory in page.previous_page.url %}
    <li class="nav-item">
        <a id="previousLink" class="nav-link active" href="/{{ page.previous_page.url }}">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-skip-forward-fill" viewBox="0 0 20 20">
                <path
                    d="M.5 3.5A.5.5 0 0 0 0 4v8a.5.5 0 0 0 1 0V8.753l6.267 3.636c.54.313 1.233-.066 1.233-.697v-2.94l6.267 3.636c.54.314 1.233-.065 1.233-.696V4.308c0-.63-.693-1.01-1.233-.696L8.5 7.248v-2.94c0-.63-.692-1.01-1.233-.696L1 7.248V4a.5.5 0 0 0-.5-.5" />
            </svg>
        </a>
    </li>
    {% endif %}
    {% if page and currentDirectory in page.next_page.url %}
    <li class="nav-item">
        <a id="nextLink" class="nav-link active" href="/{{ page.next_page.url }}">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-skip-forward-fill" viewBox="0 0 20 20">
                <path
                    d="M15.5 3.5a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-1 0V8.753l-6.267 3.636c-.54.313-1.233-.066-1.233-.697v-2.94l-6.267 3.636C.693 12.703 0 12.324 0 11.693V4.308c0-.63.693-1.01 1.233-.696L7.5 7.248v-2.94c0-.63.693-1.01 1.233-.696L15 7.248V4a.5.5 0 0 1 .5-.5" />
            </svg>
        </a>
    </li>
    {% endif %}
</ul>

Keyboard Navigation

To get the similar functionality like Powerpoint and other presenting software, Javascript was used to make the keypresses work in the same manner. With this code, the keypresses click the link on the page if it is present.

Because the website is a static generator and the content is written in Markdown, additional function is created to make the external links show up in a new tab/window. This eliminates the need to have HTML within the Markdown to make this possible. Users are able to go to the page if Javascript is disabled, but it will not open in a new tab.

const bgDark = "bg-dark";
const bodyElement = document.getElementById("body");
const previousLink = document.getElementById("previousLink");
const nextLink = document.getElementById("nextLink");

function addSlideShowNavigation() {
    document.addEventListener("keyup", (event) => {
        switch (event.key) {
            case 'ArrowRight':
            case ' ':
            case 'PageDown':
            case 'Enter':
                goToNextSlide();
                break;

            case 'ArrowLeft':
            case 'PageUp':
                goToPreviousSlide();
                break;

            case 'b':
            case 'B':
                bodyElement.classList.toggle(bgDark);
                break;
        }
    });
}

function goToPreviousSlide() {
    if (previousLink !== null) {
        previousLink.click();
    }
}

function goToNextSlide() {
    if (nextLink !== null) {
        nextLink.click();
    }
}

function addTargetToExternalLinks() {
    document.querySelectorAll('a').forEach(link => {
        if (link.hostname !== window.location.hostname) {
            link.setAttribute('target', '_blank');
        }
    });
}

addSlideShowNavigation();
addTargetToExternalLinks();

Conclusion

To see this in action, you can visit the Presentations website.