parade 0.10.1 → 0.10.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +6 -14
- data/README.md +187 -120
- data/lib/parade/commands/html_output.rb +1 -1
- data/lib/parade/parsers/dsl.rb +29 -0
- data/lib/parade/parsers/presentation_file_parser.rb +3 -9
- data/lib/parade/renderers/columns_renderer.rb +29 -11
- data/lib/parade/renderers/content_with_caption_renderer.rb +87 -0
- data/lib/parade/section.rb +9 -0
- data/lib/parade/server.rb +5 -1
- data/lib/parade/slide.rb +6 -1
- data/lib/parade/slide_post_renderers.rb +3 -0
- data/lib/parade/version.rb +1 -1
- data/lib/public/css/themes/default.css +0 -1
- data/lib/public/css/themes/hayfield.css +58 -0
- data/lib/public/css/themes/minimal.css +144 -0
- data/lib/public/js/parade-command-input.js +3 -0
- data/lib/public/js/parade-keyboard-input.js +0 -4
- data/lib/public/js/parade.js +0 -12
- data/lib/views/footer.erb +0 -1
- data/lib/views/help.erb +0 -1
- data/lib/views/not_found.erb +21 -0
- data/lib/views/print.erb +5 -0
- metadata +51 -50
- data/lib/parade/parsers/json_file_parser.rb +0 -67
- data/lib/public/css/jquery-ui/images/ui-bg_diagonals-small_100_f0efea_40x40.png +0 -0
- data/lib/public/css/jquery-ui/images/ui-bg_flat_35_f0f0f0_40x100.png +0 -0
- data/lib/public/css/jquery-ui/images/ui-bg_glass_55_fcf0ba_1x400.png +0 -0
- data/lib/public/css/jquery-ui/images/ui-bg_glow-ball_25_2e2e28_600x600.png +0 -0
- data/lib/public/css/jquery-ui/images/ui-bg_highlight-soft_100_f0efea_1x100.png +0 -0
- data/lib/public/css/jquery-ui/images/ui-bg_highlight-soft_25_327E04_1x100.png +0 -0
- data/lib/public/css/jquery-ui/images/ui-bg_highlight-soft_25_5A9D1A_1x100.png +0 -0
- data/lib/public/css/jquery-ui/images/ui-bg_highlight-soft_95_ffedad_1x100.png +0 -0
- data/lib/public/css/jquery-ui/images/ui-bg_inset-soft_22_3b3b35_1x100.png +0 -0
- data/lib/public/css/jquery-ui/images/ui-icons_808080_256x240.png +0 -0
- data/lib/public/css/jquery-ui/images/ui-icons_8DC262_256x240.png +0 -0
- data/lib/public/css/jquery-ui/images/ui-icons_cd0a0a_256x240.png +0 -0
- data/lib/public/css/jquery-ui/images/ui-icons_e7e6e4_256x240.png +0 -0
- data/lib/public/css/jquery-ui/images/ui-icons_eeeeee_256x240.png +0 -0
- data/lib/public/css/jquery-ui/images/ui-icons_ffffff_256x240.png +0 -0
- data/lib/public/css/spinner_bar.gif +0 -0
checksums.yaml
CHANGED
@@ -1,15 +1,7 @@
|
|
1
1
|
---
|
2
|
-
|
3
|
-
metadata.gz:
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
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
|
-
|
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
|
+

|
6
3
|
|
7
|
-
|
4
|
+
Parade is a slide presentation deck built with developers in mind.
|
8
5
|
|
9
|
-
|
10
|
-
|
11
|
-
|
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
|
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
|
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.
|
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.
|
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
|
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
|
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
|
-
|
204
|
+
# Presentation Customization
|
198
205
|
|
199
|
-
|
206
|
+
There are many ways you are able to customize your presentation.
|
200
207
|
|
201
|
-
|
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
|
-
|
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
|
-
|
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
|
243
|
+
!SLIDE #slide-id-1
|
216
244
|
```
|
217
245
|
|
218
|
-
> In this example
|
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
|
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
|
-
|
251
|
+
### CSS Classes for Slide Sections
|
224
252
|
|
225
|
-
|
253
|
+
Sometimes you want to add CSS classes to an entire section of slides:
|
226
254
|
|
227
|
-
|
228
|
-
|
229
|
-
|
230
|
-
|
231
|
-
|
232
|
-
|
233
|
-
|
234
|
-
|
235
|
-
|
236
|
-
|
237
|
-
|
238
|
-
|
239
|
-
|
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
|
-
|
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
|
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'`.
|
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
|
-
|
278
|
+
#### Defined Classes
|
257
279
|
|
258
|
-
Parade defines a number of
|
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
|
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
|
-
|
328
|
+
#### Loading Custom CSS
|
307
329
|
|
308
|
-
|
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
|
-
|
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
|
-
|
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
|
-
|
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
|
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
|
480
|
+
the JavaScript files found within those directories.
|
382
481
|
|
383
482
|
|
384
|
-
|
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
|
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
|
-
*
|
626
|
-
*
|
627
|
-
*
|
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
|
-
*
|
634
|
-
*
|
635
|
-
*
|
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
|