inferno-presenter

This is a framework to build beautiful web slides. It is based on inferno and rxjs to provide high performance and extensibility.

Creating a inferno-presenter project

To get started, you should create an npm package and install the inferno-presenter library:

npm init
npm i -D inferno-presenter webpack webpack-dev-server

In your package.json file you can now insert the following scripts:

{
  "scripts": {
    "start": "slides serve",
    "build": "slides dist"
  }
}

Alternatively you can use the docker image to get everything up and running quickly.

Getting started

Now you should be able to generate the basic project layout and shoot up the development server with the npm start script:

npm start

Slides

• You can place your slides within src/slides and they will be automatically picked up.
• By now we support .tsx, .jsx and .md slides. They will all be converted to inferno components.
• All slides have to implement the Slide interface:

  interface Slide {
    /**
    * The id of the slide. This has to be unique and will be added to the slide container on the page.
    */
    id: string;
    /**
    * The slide title.
    */
    title: string;
    /**
    * Either a functional component or a component class. This component will be rendered as the slide content.
    */
    Component: any;
  }

• Take a look at the demo directory for some inspiration.

Styles

• Base styles are placed in src/main.scss
• If you want to apply styles to your single slides, you can place a .sass, .scss or .css file with the same basename next to the slide file. You can use the slide id to restrict the styles to the context.