parade 0.10.1 → 0.10.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (40) hide show
  1. checksums.yaml +6 -14
  2. data/README.md +187 -120
  3. data/lib/parade/commands/html_output.rb +1 -1
  4. data/lib/parade/parsers/dsl.rb +29 -0
  5. data/lib/parade/parsers/presentation_file_parser.rb +3 -9
  6. data/lib/parade/renderers/columns_renderer.rb +29 -11
  7. data/lib/parade/renderers/content_with_caption_renderer.rb +87 -0
  8. data/lib/parade/section.rb +9 -0
  9. data/lib/parade/server.rb +5 -1
  10. data/lib/parade/slide.rb +6 -1
  11. data/lib/parade/slide_post_renderers.rb +3 -0
  12. data/lib/parade/version.rb +1 -1
  13. data/lib/public/css/themes/default.css +0 -1
  14. data/lib/public/css/themes/hayfield.css +58 -0
  15. data/lib/public/css/themes/minimal.css +144 -0
  16. data/lib/public/js/parade-command-input.js +3 -0
  17. data/lib/public/js/parade-keyboard-input.js +0 -4
  18. data/lib/public/js/parade.js +0 -12
  19. data/lib/views/footer.erb +0 -1
  20. data/lib/views/help.erb +0 -1
  21. data/lib/views/not_found.erb +21 -0
  22. data/lib/views/print.erb +5 -0
  23. metadata +51 -50
  24. data/lib/parade/parsers/json_file_parser.rb +0 -67
  25. data/lib/public/css/jquery-ui/images/ui-bg_diagonals-small_100_f0efea_40x40.png +0 -0
  26. data/lib/public/css/jquery-ui/images/ui-bg_flat_35_f0f0f0_40x100.png +0 -0
  27. data/lib/public/css/jquery-ui/images/ui-bg_glass_55_fcf0ba_1x400.png +0 -0
  28. data/lib/public/css/jquery-ui/images/ui-bg_glow-ball_25_2e2e28_600x600.png +0 -0
  29. data/lib/public/css/jquery-ui/images/ui-bg_highlight-soft_100_f0efea_1x100.png +0 -0
  30. data/lib/public/css/jquery-ui/images/ui-bg_highlight-soft_25_327E04_1x100.png +0 -0
  31. data/lib/public/css/jquery-ui/images/ui-bg_highlight-soft_25_5A9D1A_1x100.png +0 -0
  32. data/lib/public/css/jquery-ui/images/ui-bg_highlight-soft_95_ffedad_1x100.png +0 -0
  33. data/lib/public/css/jquery-ui/images/ui-bg_inset-soft_22_3b3b35_1x100.png +0 -0
  34. data/lib/public/css/jquery-ui/images/ui-icons_808080_256x240.png +0 -0
  35. data/lib/public/css/jquery-ui/images/ui-icons_8DC262_256x240.png +0 -0
  36. data/lib/public/css/jquery-ui/images/ui-icons_cd0a0a_256x240.png +0 -0
  37. data/lib/public/css/jquery-ui/images/ui-icons_e7e6e4_256x240.png +0 -0
  38. data/lib/public/css/jquery-ui/images/ui-icons_eeeeee_256x240.png +0 -0
  39. data/lib/public/css/jquery-ui/images/ui-icons_ffffff_256x240.png +0 -0
  40. data/lib/public/css/spinner_bar.gif +0 -0
checksums.yaml CHANGED
@@ -1,15 +1,7 @@
1
1
  ---
2
- !binary "U0hBMQ==":
3
- metadata.gz: !binary |-
4
- MmQ4ZTVkZmZkN2YwYWIwYmZlNjZlNDdmMGY1OWIyMGI2MjhkNDY4NQ==
5
- data.tar.gz: !binary |-
6
- OWU1ZWIyZDNiYmYwYzExMTJhZjU2ZDc2MTQxMTVjZWM3Y2U5MzJlOQ==
7
- !binary "U0hBNTEy":
8
- metadata.gz: !binary |-
9
- OWI5MmRhMDUyYjkyYzczYzhlMzA1ZjExYTBjOWJkNmVkMzg0NTEwOTYxYzFj
10
- NWMzNDEwNWNhNTU3ZDI5NzA3ZjAxMTBiOGRiMTdjZjUzNzBlMDE4ZGI2NThh
11
- ZTg3N2UyMWY3OTc0YTgyMGFmYzU2NjdhYmEwMjk0NWQ4ZGQwMTc=
12
- data.tar.gz: !binary |-
13
- ZTdjMGQ0NTdiOWU5YTJhMGY0ZDE1YTE0ODdkMDk3MjBkOGE3MzM3ZWIzMjY2
14
- MWM5ZTliOWI4ZDI1MDgwODQxMDI2N2RkYjc3MjAyZTFlZmE1OWRiMWU0NDNl
15
- YzlhYTFiZGQzNDE0MDBjOWM0NGFiYjFjZDQ1Y2QyY2JhMjg2Y2Q=
2
+ SHA1:
3
+ metadata.gz: 2b9e156e31b994c4536b2c06cc7cff5f03c18423
4
+ data.tar.gz: 3e5b45537e939e66e5b9aae56a0b38995f496a3c
5
+ SHA512:
6
+ metadata.gz: f95b09c283bff3f343bd80225b0608ef817774be7052a393d07d662ac086eaadd23ec081d1dcff9db133f0bf563ddb226b5de58797800b2c5490c7aa408ac72a
7
+ data.tar.gz: ff4046e9225a14fef00a4c396cf377e3917ced7c83b5b0960bd4f485acb6acb4e5a3c3fdf70f8c32d13520bf61bc7209fbf14f959e51d5f6edd017d072af2719
data/README.md CHANGED
@@ -1,14 +1,12 @@
1
- # Parade Presentation Software
2
1
 
3
- Parade is an open source presentation software that consists of a Sinatra web
4
- app that serves up markdown files in a presentation format. Parade can serve a
5
- directory or be configured to run with a simple configuration file.
2
+ ![parade](lib/public/parade.png)
6
3
 
7
- ## Comparison Vs PowerPoint / Keynote
4
+ Parade is a slide presentation deck built with developers in mind.
8
5
 
9
- Parade is easily out-done by professional presentation software packages as
10
- far as out-of-the-box style and design. However, there are benefits that
11
- Parade has over presentational software:
6
+ You compose parade presentations in markdown files and these files are presented
7
+ as a small web-application. This allows you to quickly build technical
8
+ presentations within minutes within your text editor instead of the tedious
9
+ drag'n'drop and arrange you find in most presentation packages.
12
10
 
13
11
  ### Highlights
14
12
 
@@ -31,19 +29,25 @@ Parade has over presentational software:
31
29
 
32
30
  * Web
33
31
 
34
- >Slide presentations are basically websites -- they run in your browser from your desktop. This allows for a wide range of possibilities for customization and expandability.
32
+ > Slide presentations are basically websites -- they run in your browser
33
+ from your desktop. This allows for a wide range of possibilities for
34
+ customization and expandability.
35
35
 
36
36
  * Basic Templating and Color Schemes
37
37
 
38
- > Several templates and color scheme options have been provided to help you get started. While Parade does not currently provide anything near the variety of many other presentation packages, it is well-suited for basic presentations.
38
+ > Several templates and color scheme options have been provided to help you
39
+ get started. While Parade does not currently provide anything near the
40
+ variety of many other presentation packages, it is well-suited for basic
41
+ presentations.
42
+
43
+ ### Lowlights
39
44
 
40
45
  * Design Flexibility (pros and cons)
41
46
 
42
47
  > Unless you're skilled in CSS/Animations, you will likely have a harder
43
- time creating presentations with as much polish as other programs provide. However, this approach also makes Parade incredibly flexible if you do understand CSS/Animations.
44
-
45
-
46
- ### Works In Progress
48
+ time creating presentations with as much polish as other programs provide.
49
+ However, this approach also makes Parade incredibly flexible if you do
50
+ understand CSS/Animations.
47
51
 
48
52
  * Resizing
49
53
 
@@ -82,6 +86,13 @@ or show the end result of the code execution.
82
86
  >
83
87
  > Move to the previous slide
84
88
  >
89
+ >
90
+ > ### *\`* (backtick)
91
+ >
92
+ > Launches a visor terminal within your presentation that allows you to go to
93
+ > a specific slide by number, name or partial match of the slide title:
94
+ > `goto 12`, `goto start`, `goto end`, `goto javascript`.
95
+ >
85
96
  > ### *h* or *?*
86
97
  >
87
98
  > Toggle help
@@ -154,15 +165,14 @@ the `#`elements within your document.
154
165
  ### Separator: !SLIDE
155
166
 
156
167
  Relying on the `#` as a separator is not always ideal. Alternatively, you can
157
- use the `!SLIDE` separator. This also provides you with the ability to define
158
- additional metadata with your slides and presentation.
168
+ use the `!SLIDE` separator.
159
169
 
160
170
  ```markdown
161
171
  !SLIDE
162
172
 
163
173
  # My Presentation
164
174
 
165
- !SLIDE bullets incremental transition=fade
175
+ !SLIDE
166
176
 
167
177
  # Bullet Points
168
178
 
@@ -176,9 +186,8 @@ additional metadata with your slides and presentation.
176
186
 
177
187
  ## Notes
178
188
 
179
- You can define special notes that are shown in presenter mode.
180
-
181
- > Presenter mode has been removed until it can be rebuilt
189
+ You can define special notes to your markdown which will not be displayed in
190
+ the final presentation to the user.
182
191
 
183
192
  Add a line that starts with .notes:
184
193
 
@@ -191,71 +200,84 @@ Add a line that starts with .notes:
191
200
  .notes The reason that the second thing came about is because things changed.
192
201
  ```
193
202
 
194
- > In this example, the HTML output will contain a `<p class='notes'>`
195
- Toggle presenter notes with the `n` key while in the presentation.
196
203
 
197
- > Presenter mode has been removed until it can be rebuilt
204
+ # Presentation Customization
198
205
 
199
- ### Metadata
206
+ There are many ways you are able to customize your presentation.
200
207
 
201
- #### HTML IDs
208
+ ## Themes
209
+
210
+ Parade comes with a set of themes which can be enabled in your **parade** file:
211
+
212
+ ```ruby
213
+
214
+ title "My Presentation"
215
+
216
+ theme "hack"
217
+
218
+ section "Introduction" do
219
+ slides "intro.md"
220
+ end
202
221
 
203
- ```markdown
204
- !SLIDE #slide-id-1
205
222
  ```
206
223
 
207
- > In this example the id of the slide div would be set to `#slide-id-1`
224
+ ### Available Themes
225
+
226
+ * archetect
227
+ * hack
228
+ * hayfield
229
+ * merlot
230
+ * minimal
231
+ * slate
208
232
 
209
- You can define an ID that will be added to the slide's `div`. This id will be
210
- set to any value prefaced with the `#` character.
211
233
 
212
- #### Transitions
234
+ ## Slide Layout
235
+
236
+ Parade supports various slide formats. These can be specified alongside the
237
+ slide separators. By adding a slide format, it adds a special CSS class to the
238
+ slide that is rendered. You may also specify custom CSS classes and an Id.
239
+
240
+ ### HTML IDs
213
241
 
214
242
  ```markdown
215
- !SLIDE transition=fade
243
+ !SLIDE #slide-id-1
216
244
  ```
217
245
 
218
- > In this example, the slide will __fade__ when it is viewed. This will set
219
- `data-transition='fade'` on the slides's `div`.
246
+ > In this example the id of the slide div would be set to `#slide-id-1`
220
247
 
221
- You can define transitions from the available body of transitions.
248
+ You can define an ID that will be added to the slide's `div`. This id will be
249
+ set to any value prefaced with the `#` character.
222
250
 
223
- The transitions are provided by jQuery Cycle plugin. See http://www.malsup.com/jquery/cycle/browser.html to view the effects and http://www.malsup.com/jquery/cycle/adv2.html for how to add custom effects.
251
+ ### CSS Classes for Slide Sections
224
252
 
225
- ##### Available Transitions
253
+ Sometimes you want to add CSS classes to an entire section of slides:
226
254
 
227
- * none (this is the default)
228
- * blindX, blindY, blindZ
229
- * cover
230
- * curtainX, curtainY
231
- * fade
232
- * fadeZoom
233
- * growX, growY
234
- * scrollUp, scrollDown, scrollLeft, scrollRight
235
- * scrollHorz, scrollVert
236
- * shuffle
237
- * slideX, slideY
238
- * toss
239
- * turnUp, turnDown, turnLeft, turnRight
240
- * uncover
241
- * wipe
242
- * zoom
255
+ ```ruby
256
+ section "Iteration 0" do
257
+ css_classes "title-and-content"
258
+ slides "iteration-zero-intro.md"
259
+ slides "iteration-zero-example.md"
260
+ end
261
+
262
+ section "Iteration 1" do
263
+ css_classes title"
264
+ slides "iteration-one-intro.md"
265
+ slides "iteration-one-example.md"
266
+ end
267
+ ```
243
268
 
244
- #### CSS Classes
269
+ ### CSS Classes for Individual Slides
245
270
 
246
271
  ```markdown
247
272
  !SLIDE bullets incremental my-custom-css-class
248
273
  ```
249
- > In this example, this will add custom css classes to the slide's `div` will
274
+ > In this example, this will add css classes to the slide's `div` and will
250
275
  display the following classes:
251
- `class='content bullets incremental my-custom-css-class'`. _Note:_ the content
252
- class is added by the default slide template.
253
-
254
- All remaining single terms are added as css classes to the slide's `div`.
276
+ `class='content bullets incremental my-custom-css-class'`.
255
277
 
256
- ##### Defined Classes
278
+ #### Defined Classes
257
279
 
258
- Parade defines a number of special CSS classes:
280
+ Parade defines a number of common slide formats:
259
281
 
260
282
  > ### title
261
283
  > places the content closer to the center of the page
@@ -299,21 +321,24 @@ Parade defines a number of special CSS classes:
299
321
  > click on the code to execute it and display the results on the slide
300
322
  >
301
323
  > ### blank
302
- > a slide without content is removed unless you specify that the slide is
303
- > blank.
324
+ > a slide without content is removed from the presentation unless you specify
325
+ > that the slide is blank.
304
326
 
305
327
 
306
- # Presentation Customization
328
+ #### Loading Custom CSS
307
329
 
308
- ## Themes
330
+ By default Parade will load most CSS it finds within the the
331
+ directory which parade was launched; the current working directory.
309
332
 
310
- Parade comes with a set of themes which can be enabled in your **parade** file:
333
+ You may however also specify a single resource folder or multiple resource folders
334
+ which parade will load instead of the current working directory.
311
335
 
312
336
  ```ruby
313
337
 
314
338
  title "My Presentation"
315
339
 
316
340
  theme "hack"
341
+ resources "stylesheets"
317
342
 
318
343
  section "Introduction" do
319
344
  slides "intro.md"
@@ -321,12 +346,9 @@ end
321
346
 
322
347
  ```
323
348
 
324
- ### Available Themes
349
+ The following will look for a folder named *stylesheets* relative to the current
350
+ working directory and load all the CSS files found within the directory.
325
351
 
326
- * archetect
327
- * hack
328
- * merlot
329
- * slate
330
352
 
331
353
  ### Customized Footer
332
354
 
@@ -336,7 +358,6 @@ The presentation has the following default footer:
336
358
  <div id="footer">
337
359
  <span id="slideInfo"></span>
338
360
  <span id="debugInfo"></span>
339
- <span id="notesInfo"></span>
340
361
  </div>
341
362
  ```
342
363
 
@@ -354,9 +375,88 @@ end
354
375
 
355
376
  This example will load a file named `customer_footer.erb` within your presentation directory.
356
377
 
357
- ## Loading Custom CSS and JavaScript
378
+ ### Customized Slide
379
+
380
+ Sometimes adding a class is not strong enough for what you need. So that's why
381
+ it is possible to override the entire slide
382
+ [template](https://github.com/burtlo/parade/blob/master/lib/views/slide.erb).
383
+
384
+ ### Overriding the default slide template for a presentation or section
385
+
386
+ ```ruby
387
+
388
+ # Overrides the default slide template for the entire presentation
389
+ # This file is in the root directory of the presentation
390
+ template "default", "slide.erb"
391
+
392
+ section "Iteration" do
393
+ # Overrides the default slide template for this SECTION of the presentation
394
+ # This file is in the root directory of the presentation
395
+ template "default", "iteration-slide.erb"
396
+ slides "outline.md"
397
+ end
398
+ ```
399
+
400
+ #### Setting a custom template for a single slide
401
+
402
+ ```markdown
403
+ !SLIDE
404
+
405
+ Introduction
406
+
407
+ !SLIDE template=full_screen
408
+ ```
409
+
410
+ ```ruby
411
+
412
+ section "Introduction" do
413
+ # Overrides the all slides with the 'full_screen' template value set
414
+ # This file is in the root directory of the presentation
415
+ template "full_screen", "full_screen.erb"
416
+ slides "outline.md"
417
+ end
418
+ ```
419
+
420
+
421
+ ## Slide Transitions
422
+
423
+ What is a presentation without slide transitions. Parade supports a variety
424
+ for slide transitions that can be specified alongside the side separator.
425
+
426
+ ```markdown
427
+ !SLIDE transition=fade
428
+ ```
429
+
430
+ > In this example, the slide will __fade__ when it is viewed. This will set
431
+ `data-transition='fade'` on the slides's `div`.
432
+
433
+ You can define transitions from the available body of transitions.
434
+
435
+ The transitions are provided by jQuery Cycle plugin. See http://www.malsup.com/jquery/cycle/browser.html to view the effects and http://www.malsup.com/jquery/cycle/adv2.html for how to add custom effects.
436
+
437
+ ##### Available Transitions
438
+
439
+ * none (this is the default)
440
+ * blindX, blindY, blindZ
441
+ * cover
442
+ * curtainX, curtainY
443
+ * fade
444
+ * fadeZoom
445
+ * growX, growY
446
+ * scrollUp, scrollDown, scrollLeft, scrollRight
447
+ * scrollHorz, scrollVert
448
+ * shuffle
449
+ * slideX, slideY
450
+ * toss
451
+ * turnUp, turnDown, turnLeft, turnRight
452
+ * uncover
453
+ * wipe
454
+ * zoom
455
+
456
+
457
+ ## Loading Custom JavaScript
358
458
 
359
- By default Parade will load most CSS and JavaScript it finds within the the
459
+ By default Parade will load most JavaScript it finds within the the
360
460
  directory which parade was launched, the current working directory.
361
461
 
362
462
  You may however also specify a single resource folder or multiple resource folders
@@ -368,7 +468,6 @@ title "My Presentation"
368
468
 
369
469
  theme "hack"
370
470
  resources "scripts"
371
- resources "stylesheets"
372
471
 
373
472
  section "Introduction" do
374
473
  slides "intro.md"
@@ -378,15 +477,15 @@ end
378
477
 
379
478
  The following will look for a folder named *scripts* and a folder named
380
479
  *stylesheets* relative to the current working directory and load all
381
- the CSS and JavaScript files found within those directories.
480
+ the JavaScript files found within those directories.
382
481
 
383
482
 
384
- ## Custom JavaScript
483
+ ### Custom JavaScript
385
484
 
386
485
  To insert custom JavaScript into your presentation you can either place it into
387
486
  a file (with extension .js) into the root directory of your presentation or you
388
487
  can embed a *script* element directly into your slides. This JavaScript will
389
- be executed—as usually—as soon as it is loaded.
488
+ be executed as soon as it is loaded.
390
489
 
391
490
  If you want to trigger some JavaScript as soon as a certain page is shown or
392
491
  when you switch to the next or previous slide, you can bind a callback to a
@@ -543,6 +642,10 @@ This command helps start a new parade presentation by setting up the proper dire
543
642
  >
544
643
  > description:"Presentation Description" - a description of the presentation
545
644
 
645
+ #### Example
646
+ ```parade gen presentation dir:dir_name title:"My preso"
647
+ description:"Descrip"```
648
+
546
649
  ## parade generate outline
547
650
 
548
651
  Create new parade outline file
@@ -607,59 +710,23 @@ Generates a pdf representation of the presentation.
607
710
  >
608
711
  > *-o, --output=file* Presentation output file
609
712
 
610
-
611
713
  # Future Plans
612
714
 
613
- I really want this to evolve into a dynamic presentation software server,
614
- that gives the audience a lot of interaction into the presentation -
615
- helping them decide dynamically what the content of the presentation is,
616
- ask questions without interrupting the presenter, etc. I want the audience
617
- to be able to download a dynamically generated PDF of either the actual
618
- talk that was given, or all the available slides, plus supplementary
619
- material. And I want the presenter (me) to be able to push each
620
- presentation to Heroku or GitHub pages for archiving super easily.
621
-
622
-
623
715
  ## Presenter Tools
624
716
 
625
- * simple highlighting (highlight region of slide / click to highlight)
626
- * timer (time left, percent done, percent time done)
627
- * editing slides
628
- * preview
629
- * let you write on the slide with your mouse, madden-style via canvas
717
+ * Elapsed / Remaining Timer
718
+ * Drawing mode over the slides (Madden-style via canvas)
719
+ * Highlighting (highlight region of slide / click to highlight)
630
720
 
631
721
  ## Presentation Layout
632
722
 
633
- * theme support
634
- * squeeze-to-fit style
635
- * simple animations (image from A to B)
636
- * show a timer - elapsed / remaining
637
- * perform simple animations of images moving between keyframes
638
- * automatically resize text to fit screen [see Alex's shrink.js]
639
-
640
- ## Output Formats
641
-
642
- * pdf with notes
643
- * webpage
644
- * let audience members download slides, code samples or other supplementary
645
- material
646
-
647
- ## Clean up
648
-
649
- * More modularity with presentation filters and renderers to allow presenters
650
- to create custom ones for the particular slide show
651
- * Modular approach to features
652
- * Clean up Javascript
723
+ * More Themes
724
+ * Key-Frame Animations
725
+ * Better slide resizing
653
726
 
654
727
  ## Interaction
655
728
 
656
729
  * questions / comments system
657
730
  * audience vote-based presentation builder, results live view
658
731
  * show audience questions / comments (twitter or direct)
659
- * let audience members go back / catch up as you talk
660
732
  * let audience members vote on sections (?)
661
-
662
- ## Platforms
663
-
664
- * show synchronized, hidden notes on another browser (like an iphone)
665
- * broadcast itself on Bonjour