parade 0.10.1 → 0.10.2
Sign up to get free protection for your applications and to get access to all the features.
- 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
|
+
![parade](lib/public/parade.png)
|
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
|