@geut/choo-slides

choo-slides

Create your presentation in a fun way

What?

Create your presentation in a fun way!

• ☑️ Your slides are just choo views.
• ☑️ There is a default style and you can use tachyons!
• ☑️ Routing is done.
• ☑️ You can move around emitting: FORWARD AND BACKWARD builtin events.
• ☑️ UI Controls included.
• ☑️ Support for notes included.

Install

$ npm install @geut/choo-slides

Getting started

You can quickly create a project using create-choo-app. From there, I usually create a slides folder. This is where your slides live and your slides are just choo views. For example:

var html = require('choo/html')

module.exports = function (state, emit) {
  return html`
    <h1>
    THIS IS A BOLD STATEMENT. LOL.
    </h1>
  `
}

I like to use index.js files to group things and export them from a single place that is easy to find. Usually like this:

const slides = [
  require('./intro'),
  require('./features'),
  require('./useit')
]

module.exports = slides

Finally, you should include this file in your choo app, and use it.

const chooSlides = require('@geut/')
const slides = require('./slides')

// and then, after creating your choo app
app.use(chooSlides({ slides }))

You can take a look at the example directory. 🆒

Usage

As mentioned before, usage is quite simple. choo-slides works like a plugin. It extends your choo-app adding support for navigating your slides like a presentation tool. Also, adds a baseline style available via sheetify.

var css = require('sheetify')
var choo = require('choo')
var chooSlides = require('@geut/choo-slides')
var mySlides = require('./slides');

var app = choo()
app.use(chooSlides({ slides: mySlides }))

app.mount('body')

Options

• slides: an array of choo views.
• slideView: a function representing a choo view. This can be used to overwrite the original slideView that comes with choo-slides.
• notFoundView: a function representing a choo view. This can be used to overwrite the original "not found" view.

License

MIT License