├── LICENSE ├── README.md ├── index.html └── slides.json /LICENSE: -------------------------------------------------------------------------------- 1 | mithril-slides 2 | Copyright (c) 2015 Weera Wu 3 | 4 | Permission is hereby granted, free of charge, to any person obtaining a copy 5 | of this software and associated documentation files (the "Software"), to deal 6 | in the Software without restriction, including without limitation the rights 7 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the Software is 9 | furnished to do so, subject to the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be included in all 12 | copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 20 | SOFTWARE. 21 | 22 | Mithril 23 | Copyright (c) 2014 Leo Horie 24 | 25 | Permission is hereby granted, free of charge, to any person obtaining a copy 26 | of this software and associated documentation files (the "Software"), to deal 27 | in the Software without restriction, including without limitation the rights 28 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 29 | copies of the Software, and to permit persons to whom the Software is 30 | furnished to do so, subject to the following conditions: 31 | 32 | The above copyright notice and this permission notice shall be included in all 33 | copies or substantial portions of the Software. 34 | 35 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 36 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 37 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 38 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 39 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 40 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 41 | SOFTWARE. 42 | 43 | SVG Loaders 44 | Copyright (c) 2014 Sam Herbert 45 | 46 | Permission is hereby granted, free of charge, to any person obtaining a copy 47 | of this software and associated documentation files (the "Software"), to deal 48 | in the Software without restriction, including without limitation the rights 49 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 50 | copies of the Software, and to permit persons to whom the Software is 51 | furnished to do so, subject to the following conditions: 52 | 53 | The above copyright notice and this permission notice shall be included in all 54 | copies or substantial portions of the Software. 55 | 56 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 57 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 58 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 59 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 60 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 61 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 62 | SOFTWARE. 63 | 64 | Material icons 65 | Copyright (c) 2016 Google 66 | 67 | Licensed under the Apache License, Version 2.0 (the "License"); 68 | you may not use this file except in compliance with the License. 69 | You may obtain a copy of the License at 70 | 71 | http://www.apache.org/licenses/LICENSE-2.0 72 | 73 | Unless required by applicable law or agreed to in writing, software 74 | distributed under the License is distributed on an "AS IS" BASIS, 75 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 76 | See the License for the specific language governing permissions and 77 | limitations under the License. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # mithril-slides 2 | A Keynote-inspired presentation app written with Mithril 3 | 4 | ![screenshots](https://cloud.githubusercontent.com/assets/592709/17454537/012dc70c-5bc4-11e6-86e1-5d5ce2bc35b8.gif) 5 | 6 | ## Features 7 | * Create slides as a [simple JSON file](slides.json) 8 | * Embed websites, web apps or YouTube videos 9 | * Present ideas using only a web browser 10 | * Support mobile or tablet devices 11 | * A total of 4 themes to choose from 12 | 13 | ![themes](https://user-images.githubusercontent.com/592709/32982023-6333a648-ccb0-11e7-87e6-cdb94c5573f0.png) 14 | 15 | ## Getting started 16 | 1. Clone mithril-slides repository at the command prompt if you haven't yet: 17 | 18 | $ git clone https://github.com/wulab/mithril-slides.git 19 | 20 | 2. Change directory to `mithril-slides` and start a web server: 21 | 22 | $ cd mithril-slides 23 | $ python -m SimpleHTTPServer 8000 # Python 2 24 | $ python -m http.server 8000 # Python 3 25 | 26 | 3. Using a browser, go to `http://localhost:8000` and you'll see example slides. 27 | 28 | 4. To add or edit slides, make changes to the `slides.json` file and reload your browser. 29 | 30 | ## Keyboard shortcuts 31 | Shortcuts for navigating slides are listed below. 32 | 33 | Action | Shortcut 34 | ------------------------- | -------------------------------------------- 35 | Advance to the next slide | Right Arrow, Down Arrow, Space bar or Return 36 | Go to previous slide | Left Arrow, Up Arrow or Backspace 37 | Quit presentation mode | Esc or Q 38 | Show or hide the pointer | C 39 | Change presentation theme | T 40 | 41 | ## Offline mode 42 | mithril-slides requires an internet connection to work. If you are to present in a 43 | place without one. You can still use mithril-slides by checking out `offline` branch 44 | before starting a web server: 45 | 46 | $ git checkout offline 47 | $ python -m SimpleHTTPServer 8000 # Python 2 48 | $ python -m http.server 8000 # Python 3 49 | 50 | You also need to change src properties of all image and embed objects in your 51 | `slides.json` file to local files. 52 | 53 | ## Known issues 54 | Some websites can not be embedded because they have secure HTTP headers (either 55 | `X-Frame-Options` or `Content-Security-Policy`) set in their responses. To remove 56 | those headers, you need a browser extension. For Google Chrome, install 57 | [ModHeader][1] extension and add response headers for above headers with empty 58 | values. For Firefox, install [Modify Response Headers][2] add-on and add filters for 59 | those headers. The following slide can be used to test your setup: 60 | 61 | { 62 | "embed": { 63 | "src": "https://github.com/", 64 | "width": "1024", 65 | "height": "768", 66 | "sandbox": "allow-forms allow-same-origin allow-scripts" 67 | } 68 | } 69 | 70 | [1]: https://chrome.google.com/webstore/detail/modheader/idgpnmonknjnojddfkpgkljpfnnfcklj 71 | [2]: https://addons.mozilla.org/en-US/firefox/addon/modify-response-headers/ -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | mithril-slides 5 | 130 | 131 | 366 | -------------------------------------------------------------------------------- /slides.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "title": "Lorem Ipsum Dolor", 4 | "subtitle": "Duis aute irure" 5 | }, 6 | 7 | { 8 | "image": { 9 | "src": "http://placehold.it/770x578", 10 | "width": "770", 11 | "height": "578" 12 | }, 13 | "title": "Lorem Ipsum Dolor", 14 | "subtitle": "Duis aute irure" 15 | }, 16 | 17 | { 18 | "title": "Lorem Ipsum Dolor" 19 | }, 20 | 21 | { 22 | "title": "Lorem Ipsum Dolor", 23 | "bullets": [ 24 | "Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua", 25 | "Ut enim ad minim veniam", 26 | "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur" 27 | ] 28 | }, 29 | 30 | { 31 | "bullets": [ 32 | "Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua", 33 | "Ut enim ad minim veniam", 34 | "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur", 35 | "Excepteur sint occaecat cupidatat" 36 | ] 37 | }, 38 | 39 | { 40 | "image": { 41 | "src": "http://placehold.it/1024x768", 42 | "width": "1024", 43 | "height": "768" 44 | } 45 | }, 46 | 47 | { 48 | "embed": { 49 | "src": "http://en.wikipedia.org/wiki/Lorem_ipsum", 50 | "width": "1024", 51 | "height": "768" 52 | } 53 | }, 54 | 55 | { 56 | "embed": { 57 | "src": "https://player.vimeo.com/video/5799640", 58 | "width": "1024", 59 | "height": "578" 60 | } 61 | }, 62 | 63 | { 64 | 65 | } 66 | ] 67 | --------------------------------------------------------------------------------