inferno-presenter
v0.3.4
Published
A framework to create html presentations
Downloads
3
Readme
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.