expositio

Simple and lean presentation tool.

Usage no npm install needed!

<script type="module">
  import expositio from 'https://cdn.skypack.dev/expositio';
</script>

README

Expositio

A simple and lean presentation tool.

About

Expositio is a presentation tool that allows to build and package presentations as modern javascript applications.

The design phylosophy is to build a fast and reliable presentation, by utilizing modern CSS (through less) as much as possible. Only navigation features are controlled with javascript, using a reactive programming style.

Getting started

The simplest way to create a new presentation is to use scaffolding of the expositio command line tool.

[my-presentation]$ npx expositio@latest init
[my-presentation]$ npm start

Upgrading

A changelog is kept in RELEASES.md, which lists the major changes.

Configuration

Progress bar

Presentation process can be shown in an animated bar, at the bottom of the window. A process bar is rendered inside the html element with id slide-progress, if any.

This is enabled by default when using expositio init. To disable, remove the slide-process container.

Slide numbers

Expositio can also show the presentation process in terms of numbers (i.e. 1/n), in an html element with id slidenum.

To enable this, add the element to your document. While you can fully customize the element tag and its position in the document, the included themes expect an inline element (e.g. span or em) in the footer.

Theme switcher

A theme switcher will be shown in the top-left corner, if using the data-theme attribute (see below). The switcher can be disabled using theme-switcher in the config object passed to Expositio.main.

Presentations using autoload.js have no theme selector, or they would have no way to disable.

Themes

Builtin themes can be chosen with the data-theme attribute on the #expositio presention root tag.

All Expositio styling is contained within the #expositio root element, so slides can be combined with additional content on the page. As commonly the page consists of Expositio alone, the attribute expositio="standalone" can be set on the document root to take control of the full document body. expositio init generates such a standalone presentation.

Custom theme

Of course you can also create a custom theme. Create a less entrypoint (e.g. theme.less) and import the base builtin theme, and pick a terminal theme. Then customize any variables or add your own styles.

A good start would be to customize the default foreground (@default-fg) and background (@default-bg) colors, and (optionally) set a highlight color (@highlight-fg). The base theme derives the rest of the colors, but of course any variable can be overridden by the custom theme.

For example:

@import "~expositio/layout/themes/base";
@import "~expositio/layout/themes/terms/xterm";

@default-bg: #fff;
@default-fg: #000;
@highlight-fg: #00ced1;

Custom themes cannot utilize the data-theme selection, so point the stylesheet link to your custom theme and disable the builtin theme switcher.

When you create a nice theme, a PR is much appreciated :)

Creating slides

Slides and fragments are marked with style classes. A slide is a single page in the presentation. Fragments mark the boundaries of elements that become visisble at a time. I.e. fragments help control navigation flow, to prevent revealing the full slide content at once.

The slide desk is contained is an element with the slides class. Every slide is marked by the slide class. Fragments are marked with fragment.

For an example of showing bullet points one-by-one, see examples/framents.html.

Terminal

The builtin terminal view allows for using (animated) terminals in a presention, to show use of shell commands. An example is shown in the examples/terminal.html example.

Code

Code fragments can be shows in the terminal view. See examples/code.html for an example.

License

Copyright 2020-2022, Bart Bakker.

This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with this program. If not, see https://www.gnu.org/licenses/.