├── .babelrc ├── .eslintrc ├── .gitignore ├── .npmignore ├── .prettierrc ├── README.md ├── blocks.js ├── demo ├── github-button.js ├── images │ ├── camera.jpg │ ├── conference.jpg │ ├── presa-ui.jpg │ └── stairs.jpg ├── index.html ├── index.js └── sidebar-layout.js ├── package.json ├── src ├── assets │ ├── icons.js │ └── raw │ │ ├── arrow-left.svg │ │ ├── arrow-right.svg │ │ ├── fullscreen.svg │ │ ├── presa-logo.png │ │ ├── presa-ui.png │ │ ├── presa.svg │ │ └── toc.svg ├── blocks │ ├── code │ │ ├── code.js │ │ ├── color-scheme.js │ │ └── index.js │ ├── index.js │ ├── typography.js │ └── video-background.js ├── components │ ├── birds-eye-mode │ │ └── index.js │ ├── built-with.js │ ├── controls │ │ ├── control-button.js │ │ ├── control-group.js │ │ ├── fullscreen-toggle.js │ │ ├── index.js │ │ ├── mini-progress.js │ │ ├── slide-switcher.js │ │ └── toc-toggle.js │ ├── fragment │ │ ├── constants.js │ │ ├── fragment.js │ │ ├── index.js │ │ ├── manager.js │ │ └── next-index.js │ ├── fullscreen-mode │ │ └── index.js │ ├── global-background.js │ ├── presentation-container.js │ ├── presentation.js │ ├── remote-control.js │ ├── slide │ │ ├── background.js │ │ ├── context.js │ │ ├── index.js │ │ ├── layouts.js │ │ ├── placeholder.js │ │ ├── slide-decl.js │ │ ├── slide-theme.js │ │ └── slide.js │ └── slideshow-mode │ │ ├── index.js │ │ └── toc.js ├── index.js └── theme.js ├── tests ├── fragments.test.js ├── next-index.test.js ├── support │ └── test-container.js └── video-background.test.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "react", 4 | [ 5 | "env", 6 | { 7 | "targets": { 8 | "browsers": ["last 2 versions", "not samsung 6.2"] 9 | } 10 | } 11 | ] 12 | ], 13 | "plugins": [ 14 | "transform-object-rest-spread", 15 | "babel-plugin-transform-class-properties" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es6": true, 5 | "jest/globals": true 6 | }, 7 | "parser": "babel-eslint", 8 | "parserOptions": { 9 | "ecmaVersion": 2017, 10 | "sourceType": "module", 11 | "ecmaFeatures": { 12 | "experimentalObjectRestSpread": true, 13 | "jsx": true 14 | } 15 | }, 16 | "plugins": ["react", "jest"], 17 | "extends": ["plugin:react/recommended","eslint:recommended", "prettier"] 18 | } 19 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # Created by https://www.gitignore.io/api/osx,node,sublimetext 3 | lib 4 | dist 5 | 6 | ### Node ### 7 | # Logs 8 | logs 9 | *.log 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Runtime data 15 | pids 16 | *.pid 17 | *.seed 18 | *.pid.lock 19 | 20 | # Directory for instrumented libs generated by jscoverage/JSCover 21 | lib-cov 22 | 23 | # Coverage directory used by tools like istanbul 24 | coverage 25 | 26 | # nyc test coverage 27 | .nyc_output 28 | 29 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 30 | .grunt 31 | 32 | # Bower dependency directory (https://bower.io/) 33 | bower_components 34 | 35 | # node-waf configuration 36 | .lock-wscript 37 | 38 | # Compiled binary addons (http://nodejs.org/api/addons.html) 39 | build/Release 40 | 41 | # Dependency directories 42 | node_modules/ 43 | jspm_packages/ 44 | 45 | # Typescript v1 declaration files 46 | typings/ 47 | 48 | # Optional npm cache directory 49 | .npm 50 | 51 | # Optional eslint cache 52 | .eslintcache 53 | 54 | # Optional REPL history 55 | .node_repl_history 56 | 57 | # Output of 'npm pack' 58 | *.tgz 59 | 60 | # Yarn Integrity file 61 | .yarn-integrity 62 | 63 | # dotenv environment variables file 64 | .env 65 | 66 | .cache 67 | 68 | ### OSX ### 69 | *.DS_Store 70 | .AppleDouble 71 | .LSOverride 72 | 73 | # Icon must end with two \r 74 | Icon 75 | 76 | # Thumbnails 77 | ._* 78 | 79 | # Files that might appear in the root of a volume 80 | .DocumentRevisions-V100 81 | .fseventsd 82 | .Spotlight-V100 83 | .TemporaryItems 84 | .Trashes 85 | .VolumeIcon.icns 86 | .com.apple.timemachine.donotpresent 87 | 88 | # Directories potentially created on remote AFP share 89 | .AppleDB 90 | .AppleDesktop 91 | Network Trash Folder 92 | Temporary Items 93 | .apdisk 94 | 95 | ### SublimeText ### 96 | # cache files for sublime text 97 | *.tmlanguage.cache 98 | *.tmPreferences.cache 99 | *.stTheme.cache 100 | 101 | # workspace files are user-specific 102 | *.sublime-workspace 103 | 104 | # project files should be checked into the repository, unless a significant 105 | # proportion of contributors will probably not be using SublimeText 106 | # *.sublime-project 107 | 108 | # sftp configuration file 109 | sftp-config.json 110 | 111 | # Package control specific files 112 | Package Control.last-run 113 | Package Control.ca-list 114 | Package Control.ca-bundle 115 | Package Control.system-ca-bundle 116 | Package Control.cache/ 117 | Package Control.ca-certs/ 118 | Package Control.merged-ca-bundle 119 | Package Control.user-ca-bundle 120 | oscrypto-ca-bundle.crt 121 | bh_unicode_properties.cache 122 | 123 | # Sublime-github package stores a github token in this file 124 | # https://packagecontrol.io/packages/sublime-github 125 | GitHub.sublime-settings 126 | 127 | # End of https://www.gitignore.io/api/osx,node,sublimetext 128 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/molefrog/presa/31a68fd268c4af880d8f27c0298272f23f9fc304/.npmignore -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "singleQuote": true 4 | } 5 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | Present with joy in React. Minimal and self-contained framework for presentations built with `styled-components`. 4 | Presa aims to be: 5 | 6 | * **Lightweight.** No external css needed and as minimal dependencies as possible. 7 | * **Extendable.** _Presa_ uses `styled-components` so almost all of its internal components can be extended and themized. 8 | * **Modular.** Core barebone and building blocks are separated and may be optionally excluded from the presentation. 9 | * **Aestetically pleasing.** Simple but functional UI, typography included. 10 | 11 | Here is how Presa UI looks like: 12 | 13 | [![Presa UI](/demo/images/presa-ui.jpg)](http://molefrog.com/stateful-animations/) 14 | 15 | List of currently supported features: 16 | 17 | * Slideshow mode with optinonal table of the contents in a sidebar. 18 | * Fullscreen API. 19 | * Supports clicker and keyboard navigation. 20 | * _Bird's eye_ view mode. 21 | * Slides are _components_. They are not rendered until the slide is active. 22 | 23 | ### Getting started 24 | 25 | Let's add a simple slide with a background. 26 | 27 | ```JavaScript 28 | import { Presentation, Slide } from 'presa' 29 | 30 | // No need to pass indexes here 31 | const Deck = () => ( 32 | 33 | 34 | Let talk about JavaScript! 35 | 36 | 37 | ) 38 | 39 | // Make sure you render into a full-page container 40 | ReactDOM.render(, container) 41 | ``` 42 | 43 | If you do that in your app, Presa will run automatically. 44 | 45 | ### Contributing 46 | 47 | Feel free to open issues and PRs! If you want to develop Presa locally you can test your features 48 | by adding them to the demo deck inside the `demo/` folder. To open the development server run `yarn dev`. 49 | 50 | The project uses [Prettier](https://prettier.io/) which runs automatically before every commit making 51 | the code base consistent. See also [text editor integrations](https://prettier.io/docs/en/editors.html). 52 | -------------------------------------------------------------------------------- /blocks.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./lib/blocks') 2 | -------------------------------------------------------------------------------- /demo/github-button.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | 3 | class GithubButton extends Component { 4 | render() { 5 | const { user, repo, className } = this.props 6 | const type = this.props.type || 'star' 7 | 8 | const frameSource = 9 | '//ghbtns.com/github-btn.html' + 10 | `?user=${user}&repo=${repo}&type=${type}&count=true&size=large` 11 | 12 | return ( 13 |