PRESENTA Lib is a config-driven presentation library that creates modern web documents for the automation era.
new Presenta('#wrapper', {
scenes:[{
blocks:[{
type:'text',
content:`<h1>Hello there</h1>`
}],
}]
})
PRESENTA Lib requires a serializable object on purpose, to facilitate interoperability, data transformation as well as fostering novel tools to create presentational documents.
# Installation
PRESENTA Lib is a javascript library without external dependencies. It comes as UMD, thus, you can install it in several ways.
# Unpkg
Include in an existing HTML file quickly:
<script src="https://unpkg.com/@presenta/lib"></script>
<script>
new Presenta()
</script>
# Skypack
Same as before but in ES6:
<script type="module">
import Presenta from 'https://cdn.skypack.dev/@presenta/lib'
new Presenta()
</script>
# Npm+ES6
For Node.js users:
npm install @presenta/lib
then include in the browser with:
<script src="/node_modules/@presenta/lib/dist/presenta.min.js"></script>
<script>
new Presenta()
</script>
or with an ES6 bundler:
import * as Presenta from '@presenta/lib'
new Presenta()
# Getting started
Each PRESENTA Lib document requires an HTML wrapper:
<div id="app"></div>
Then, bind it (passing both a selector or a DOM node) alongside the config object:
new Presenta('#app', {
scenes: []
})
Add a scene
, an object that contains, at least, the blocks
array:
new Presenta('#app', {
scenes: [{
blocks:[]
}]
})
A block
object is the minimal unit of content. The are many block types, text
is one of them:
new Presenta('#app', {
scenes: [{
blocks:[{
type: 'text',
text: '<h1>Welcome PRESENTA</h1>'
}]
}]
})
# Architecture
A PRESENTA Lib document contains a list of scenes that can be displayed one at a time. Each scene contains one or more block of content. The scene is responsible to keep blocks together. A block is the minimum unit that renders a specific content from a given config object.
PRESENTA Lib is designed to be extensible by using external plugins. There are three types of plugins, depending of the function you wish to add:
- Blocks (content and media)
- Modules (scene and block extensions)
- Controllers (router controllers or global capabilities)
# Blocks
Each scene
can include one or more blocks. A block
is responsible to render a specific content or media, such as text
, image
or video
.
You can find additional block types here as external plugins.
To learn more about each block specific settings, jump to this section of the Reference.
# Modules
A module allows to extend a scene or a block both from functional and presentation perspective as well.
Modules config live in their proper field at document
level:
{
scenes:[...],
modules: {
steps: true,
styles: {},
...
},
}
at scene
level:
{
scenes:[{
blocks:[...],
modules: {
steps: true,
styles: {},
...
},
}],
}
or at block
level as well:
{
scenes:[{
blocks:[{
type: 'text',
content: 'Some Text',
modules: {
steps: true,
styles: {},
...
},
}
}]
}],
}
To learn more about the available modules and their specific settings, jump to this section of the Reference.
# Controllers
PRESENTA Lib comes with an internal router
that can be configured and extended by means of controllers
. A controller can provide also global functionality and behaviors that are independent of the routing activity.
Controllers config live in their proper field:
{
scenes:[...],
controllers: {
keyboard: true,
transitions: {},
...
},
}
Controllers can be set at document
level only.
To learn more about the available controllers and their specific settings, jump to this section of the Reference.