https://github.com/geut/choo-slides
A fun way to create your presentation
https://github.com/geut/choo-slides
choo choo-slides slides
Last synced: about 1 year ago
JSON representation
A fun way to create your presentation
- Host: GitHub
- URL: https://github.com/geut/choo-slides
- Owner: geut
- License: mit
- Created: 2017-11-23T10:44:58.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-09-23T20:37:03.000Z (almost 8 years ago)
- Last Synced: 2025-04-18T16:18:44.590Z (over 1 year ago)
- Topics: choo, choo-slides, slides
- Language: JavaScript
- Homepage:
- Size: 388 KB
- Stars: 6
- Watchers: 3
- Forks: 5
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# choo-slides
> Create your presentation in a fun way
[](https://travis-ci.org/geut/choo-slides)
[](https://badge.fury.io/js/%40geut%2Fchoo-slides)
## What?
Create your presentation in a fun way!
- :ballot_box_with_check: Your slides are just `choo views`.
- :ballot_box_with_check: There is a default style and you can use tachyons!
- :ballot_box_with_check: Routing is done.
- :ballot_box_with_check: You can move around emitting: `FORWARD` AND `BACKWARD` builtin events.
- :ballot_box_with_check: UI Controls included.
- :ballot_box_with_check: Support for notes included.
## Install
`$ npm install @geut/choo-slides`
## Getting started
You can quickly create a project using [create-choo-app](https://github.com/choojs/create-choo-app).
From there, I usually create a `slides` folder. This is where your slides live and your slides are just [choo views](https://choo.io/docs/views). For example:
```javascript
var { headline } = require('@geut/choo-slides/components')
module.exports = function () {
return headline({ title: 'Your slide title' })
}
```
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:
```javascript
const slides = [
require('./intro'),
require('./features'),
require('./useit')
]
module.exports = slides
```
Finally, you should include this file in your choo app and `use` it.
```javascript
const chooSlides = require('@geut/choo-slides')
const slides = require('./slides')
// and then, after creating your choo app
app.use(chooSlides({ slides }))
```
You can take a look at the [example](./example/) directory. :cool:
## 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.
## Components :new:
Some default components are available under: `@geut/choo-slides/components`. Currently you can find:
| component | HTML Element |
| ----------- |:------------:|
| headline | h1 .. h6 |
| text | p |
| list | ul |
| listItem | li |
> Checkout the [example](./example/) to see components in action.
_Note:_ this is just a temporal solution around componentization for `choo-slides`.
## License
[MIT License](./LICENSE)