araspitzu / Oi

A WYSIWYG Editor to create slides in impress.js.

✨ BIG NEWS ✨

I rewrite the framework of impress.js with ReactJS, it's called React-impressJS

React-impressJS provides the better way to build a React App, it operate Steps with Virtual DOM but not DOM!

If you are playing impress.js with ReactJS, you should give it a shot!!

And please stay tuned for [ Oi ] ☺️

2017/03/28, OAwan

The NEW VERSION is under development.

It'll be more friendly to use, more powerful and more impressive!

Please stay tuned, Coming soon!! 😉

2016/11/15, OAwan

[ Oi ]

A WYSIWYG Editor to create slides in impress.js.

Have a BIG thought and try [ Oi ] out !

You must first know

• What is impress.js, and how it works.
• What is React and Redux.
• Familiar with es2015 (ES6).

Current progress

Features

• Create step
• Edit every step in slides
• Delete step but not the #OVERVIEW
• Download the slides as HTML with basic style ( [ NEW! ] Download with hint and author stamp )
• Export the slides as JSON (Now only download a HTML file, but you can import it directly!!)
• The best part is WYSIWYG for impress.js
• [ NEW! ] Import 🎉
• [ NEW! ] Easy guided tours with react-joyride

Todo..

• Support more browser and Pad (Better on Chrome now)
• Validation of input
• Import
• More theme to choose (Only basic style for slides from impress.js demo currently)
• Optimize component re-render (TinymceEditor, EditPanel, etc.)
• Improve the UX/UI (please help... T^T)
• Maybe OAuth(?)

... anything you thought please PR or give an issue, thanks!!!

Wonderful works via [ Oi ]

https://project.oawan.me/Oi - [ Oi ]

If you have any work of slides or website via [ Oi ], please let me know (leave an issue or push a PR), I'd love to share your wonderful works!!

Development/Building

1. This project made by React with Redux, you can checkout Dependencies first.
2. And you can develop with Redux DevTools Extension, checkout Additional

Let's start

1. Install NodeJS.
2. Fork this project or clone it git clone https://github.com/GeorgioWan/Oi.git .
3. cd Oi
4. Install development dependencies npm install .
5. Please checkout your branch git checkout -b YOUR-BRANCH-NAME .
6. Start to develop npm run dev (it will run with webpack-dev-server)

Additional

You can develop [ Oi ] with redux-devtools-extension, it can show you what action you dispatch and what's change in state.

Start with

• react-hot-boilerplate

Dependencies

React

• React
• Redux

Webpack

• Webpack
• webpack-dev-server
• babel-loader
• react-hot-loader

Others

• TinyMCE - [ Oi ] current HTML editor.
• react-bootstrap
• react-joyride - Guided tours for [ Oi ].
• redux-devtools-extension
• Animate.css

License

Copyright © 2016 Georgio Wan - MIT License