showoffer 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (206) hide show
  1. data/LICENSE +20 -0
  2. data/README.rdoc +559 -0
  3. data/Rakefile +27 -0
  4. data/bin/showoffer +189 -0
  5. data/lib/commandline_parser.rb +67 -0
  6. data/lib/showoff.rb +515 -0
  7. data/lib/showoff/version.rb +3 -0
  8. data/lib/showoff_utils.rb +360 -0
  9. data/public/css/960.css +653 -0
  10. data/public/css/fg.menu.css +114 -0
  11. data/public/css/onepage.css +60 -0
  12. data/public/css/pdf.css +12 -0
  13. data/public/css/presenter.css +76 -0
  14. data/public/css/reset.css +53 -0
  15. data/public/css/sh_style.css +66 -0
  16. data/public/css/showoff.css +403 -0
  17. data/public/css/spinner_bar.gif +0 -0
  18. data/public/css/theme/images/ui-bg_diagonals-small_100_f0efea_40x40.png +0 -0
  19. data/public/css/theme/images/ui-bg_flat_35_f0f0f0_40x100.png +0 -0
  20. data/public/css/theme/images/ui-bg_glass_55_fcf0ba_1x400.png +0 -0
  21. data/public/css/theme/images/ui-bg_glow-ball_25_2e2e28_600x600.png +0 -0
  22. data/public/css/theme/images/ui-bg_highlight-soft_100_f0efea_1x100.png +0 -0
  23. data/public/css/theme/images/ui-bg_highlight-soft_25_327E04_1x100.png +0 -0
  24. data/public/css/theme/images/ui-bg_highlight-soft_25_5A9D1A_1x100.png +0 -0
  25. data/public/css/theme/images/ui-bg_highlight-soft_95_ffedad_1x100.png +0 -0
  26. data/public/css/theme/images/ui-bg_inset-soft_22_3b3b35_1x100.png +0 -0
  27. data/public/css/theme/images/ui-icons_808080_256x240.png +0 -0
  28. data/public/css/theme/images/ui-icons_8DC262_256x240.png +0 -0
  29. data/public/css/theme/images/ui-icons_cd0a0a_256x240.png +0 -0
  30. data/public/css/theme/images/ui-icons_e7e6e4_256x240.png +0 -0
  31. data/public/css/theme/images/ui-icons_eeeeee_256x240.png +0 -0
  32. data/public/css/theme/images/ui-icons_ffffff_256x240.png +0 -0
  33. data/public/css/theme/ui.accordion.css +9 -0
  34. data/public/css/theme/ui.all.css +2 -0
  35. data/public/css/theme/ui.base.css +9 -0
  36. data/public/css/theme/ui.core.css +37 -0
  37. data/public/css/theme/ui.datepicker.css +62 -0
  38. data/public/css/theme/ui.dialog.css +13 -0
  39. data/public/css/theme/ui.progressbar.css +4 -0
  40. data/public/css/theme/ui.resizable.css +13 -0
  41. data/public/css/theme/ui.slider.css +17 -0
  42. data/public/css/theme/ui.tabs.css +9 -0
  43. data/public/css/theme/ui.theme.css +245 -0
  44. data/public/favicon.ico +0 -0
  45. data/public/highlight/AUTHORS.en.txt +46 -0
  46. data/public/highlight/AUTHORS.ru.txt +46 -0
  47. data/public/highlight/LICENSE +24 -0
  48. data/public/highlight/README.md +136 -0
  49. data/public/highlight/README.ru.md +140 -0
  50. data/public/highlight/classref.txt +437 -0
  51. data/public/highlight/export.html +87 -0
  52. data/public/highlight/highlight.js +630 -0
  53. data/public/highlight/highlight.pack.js +1 -0
  54. data/public/highlight/languages/1c.js +68 -0
  55. data/public/highlight/languages/apache.js +432 -0
  56. data/public/highlight/languages/avrasm.js +75 -0
  57. data/public/highlight/languages/axapta.js +43 -0
  58. data/public/highlight/languages/bash.js +56 -0
  59. data/public/highlight/languages/cmake.js +24 -0
  60. data/public/highlight/languages/cpp.js +62 -0
  61. data/public/highlight/languages/cs.js +41 -0
  62. data/public/highlight/languages/css.js +101 -0
  63. data/public/highlight/languages/delphi.js +70 -0
  64. data/public/highlight/languages/diff.js +64 -0
  65. data/public/highlight/languages/django.js +72 -0
  66. data/public/highlight/languages/dos.js +29 -0
  67. data/public/highlight/languages/erlang-repl.js +81 -0
  68. data/public/highlight/languages/erlang.js +201 -0
  69. data/public/highlight/languages/go.js +58 -0
  70. data/public/highlight/languages/haskell.js +77 -0
  71. data/public/highlight/languages/ini.js +32 -0
  72. data/public/highlight/languages/java.js +45 -0
  73. data/public/highlight/languages/javascript.js +53 -0
  74. data/public/highlight/languages/lisp.js +87 -0
  75. data/public/highlight/languages/lua.js +75 -0
  76. data/public/highlight/languages/mel.js +40 -0
  77. data/public/highlight/languages/nginx.js +224 -0
  78. data/public/highlight/languages/objectivec.js +94 -0
  79. data/public/highlight/languages/parser3.js +52 -0
  80. data/public/highlight/languages/perl.js +143 -0
  81. data/public/highlight/languages/php.js +55 -0
  82. data/public/highlight/languages/profile.js +49 -0
  83. data/public/highlight/languages/python.js +71 -0
  84. data/public/highlight/languages/renderman.js +230 -0
  85. data/public/highlight/languages/ruby.js +203 -0
  86. data/public/highlight/languages/scala.js +60 -0
  87. data/public/highlight/languages/smalltalk.js +55 -0
  88. data/public/highlight/languages/sql.js +90 -0
  89. data/public/highlight/languages/tex.js +62 -0
  90. data/public/highlight/languages/vala.js +75 -0
  91. data/public/highlight/languages/vbscript.js +30 -0
  92. data/public/highlight/languages/vhdl.js +30 -0
  93. data/public/highlight/languages/xml.js +103 -0
  94. data/public/highlight/styles/arta.css +151 -0
  95. data/public/highlight/styles/ascetic.css +45 -0
  96. data/public/highlight/styles/brown_paper.css +105 -0
  97. data/public/highlight/styles/brown_papersq.png +0 -0
  98. data/public/highlight/styles/dark.css +103 -0
  99. data/public/highlight/styles/default.css +121 -0
  100. data/public/highlight/styles/far.css +118 -0
  101. data/public/highlight/styles/github.css +129 -0
  102. data/public/highlight/styles/idea.css +118 -0
  103. data/public/highlight/styles/ir_black.css +103 -0
  104. data/public/highlight/styles/magula.css +118 -0
  105. data/public/highlight/styles/school_book.css +111 -0
  106. data/public/highlight/styles/school_book.png +0 -0
  107. data/public/highlight/styles/solarized_dark.css +96 -0
  108. data/public/highlight/styles/solarized_light.css +96 -0
  109. data/public/highlight/styles/sunburst.css +147 -0
  110. data/public/highlight/styles/vs.css +84 -0
  111. data/public/highlight/styles/zenburn.css +115 -0
  112. data/public/highlight/test.html +1609 -0
  113. data/public/js/coffee-script.js +8 -0
  114. data/public/js/core.js +79 -0
  115. data/public/js/fg.menu.js +645 -0
  116. data/public/js/jTypeWriter.js +26 -0
  117. data/public/js/jquery-1.4.2.min.js +154 -0
  118. data/public/js/jquery-print.js +109 -0
  119. data/public/js/jquery.batchImageLoad.js +56 -0
  120. data/public/js/jquery.cookie.js +96 -0
  121. data/public/js/jquery.cycle.all.js +1284 -0
  122. data/public/js/jquery.doubletap-0.1.js +105 -0
  123. data/public/js/jquery.uuid.js +24 -0
  124. data/public/js/jquery.ws-0.3pre.js +201 -0
  125. data/public/js/onepage.js +5 -0
  126. data/public/js/presenter.js +193 -0
  127. data/public/js/sh_lang/sh_bison.min.js +1 -0
  128. data/public/js/sh_lang/sh_c.min.js +1 -0
  129. data/public/js/sh_lang/sh_caml.min.js +1 -0
  130. data/public/js/sh_lang/sh_changelog.min.js +1 -0
  131. data/public/js/sh_lang/sh_coffeescript.min.js +1 -0
  132. data/public/js/sh_lang/sh_cpp.min.js +1 -0
  133. data/public/js/sh_lang/sh_csharp.min.js +1 -0
  134. data/public/js/sh_lang/sh_css.min.js +1 -0
  135. data/public/js/sh_lang/sh_cucumber.min.js +2 -0
  136. data/public/js/sh_lang/sh_desktop.min.js +1 -0
  137. data/public/js/sh_lang/sh_diff.min.js +1 -0
  138. data/public/js/sh_lang/sh_erlang.min.js +1 -0
  139. data/public/js/sh_lang/sh_flex.min.js +1 -0
  140. data/public/js/sh_lang/sh_glsl.min.js +1 -0
  141. data/public/js/sh_lang/sh_haxe.min.js +1 -0
  142. data/public/js/sh_lang/sh_html.min.js +1 -0
  143. data/public/js/sh_lang/sh_java.min.js +1 -0
  144. data/public/js/sh_lang/sh_javascript.min.js +1 -0
  145. data/public/js/sh_lang/sh_javascript_dom.min.js +1 -0
  146. data/public/js/sh_lang/sh_latex.min.js +1 -0
  147. data/public/js/sh_lang/sh_ldap.min.js +1 -0
  148. data/public/js/sh_lang/sh_log.min.js +1 -0
  149. data/public/js/sh_lang/sh_lsm.min.js +1 -0
  150. data/public/js/sh_lang/sh_m4.min.js +1 -0
  151. data/public/js/sh_lang/sh_makefile.min.js +1 -0
  152. data/public/js/sh_lang/sh_oracle.min.js +1 -0
  153. data/public/js/sh_lang/sh_pascal.min.js +1 -0
  154. data/public/js/sh_lang/sh_perl.min.js +1 -0
  155. data/public/js/sh_lang/sh_php.min.js +1 -0
  156. data/public/js/sh_lang/sh_prolog.min.js +1 -0
  157. data/public/js/sh_lang/sh_properties.min.js +1 -0
  158. data/public/js/sh_lang/sh_python.min.js +1 -0
  159. data/public/js/sh_lang/sh_ruby.min.js +1 -0
  160. data/public/js/sh_lang/sh_scala.min.js +1 -0
  161. data/public/js/sh_lang/sh_sh.min.js +1 -0
  162. data/public/js/sh_lang/sh_slang.min.js +1 -0
  163. data/public/js/sh_lang/sh_sml.min.js +1 -0
  164. data/public/js/sh_lang/sh_spec.min.js +1 -0
  165. data/public/js/sh_lang/sh_sql.min.js +1 -0
  166. data/public/js/sh_lang/sh_tcl.min.js +1 -0
  167. data/public/js/sh_lang/sh_xml.min.js +1 -0
  168. data/public/js/sh_lang/sh_xorg.min.js +1 -0
  169. data/public/js/sh_main.min.js +4 -0
  170. data/public/js/showoff.js +652 -0
  171. data/public/js/showoffcore.js +13 -0
  172. data/public/scripts/script.js +280 -0
  173. data/public/themes/ribbon/fonts/DroidSansMono.svg +626 -0
  174. data/public/themes/ribbon/fonts/DroidSansMono.ttf +0 -0
  175. data/public/themes/ribbon/fonts/PTSans.Bold.Italic.svg +728 -0
  176. data/public/themes/ribbon/fonts/PTSans.Bold.Italic.ttf +0 -0
  177. data/public/themes/ribbon/fonts/PTSans.Bold.Italic.woff +0 -0
  178. data/public/themes/ribbon/fonts/PTSans.Bold.svg +728 -0
  179. data/public/themes/ribbon/fonts/PTSans.Bold.ttf +0 -0
  180. data/public/themes/ribbon/fonts/PTSans.Bold.woff +0 -0
  181. data/public/themes/ribbon/fonts/PTSans.Italic.svg +728 -0
  182. data/public/themes/ribbon/fonts/PTSans.Italic.ttf +0 -0
  183. data/public/themes/ribbon/fonts/PTSans.Italic.woff +0 -0
  184. data/public/themes/ribbon/fonts/PTSans.Narrow.Bold.svg +728 -0
  185. data/public/themes/ribbon/fonts/PTSans.Narrow.Bold.ttf +0 -0
  186. data/public/themes/ribbon/fonts/PTSans.Narrow.Bold.woff +0 -0
  187. data/public/themes/ribbon/fonts/PTSans.Narrow.svg +728 -0
  188. data/public/themes/ribbon/fonts/PTSans.Narrow.ttf +0 -0
  189. data/public/themes/ribbon/fonts/PTSans.Narrow.woff +0 -0
  190. data/public/themes/ribbon/fonts/PTSans.svg +728 -0
  191. data/public/themes/ribbon/fonts/PTSans.ttf +0 -0
  192. data/public/themes/ribbon/fonts/PTSans.woff +0 -0
  193. data/public/themes/ribbon/fonts/TargetBlank.otf +0 -0
  194. data/public/themes/ribbon/fonts/TargetBlank.svg +14 -0
  195. data/public/themes/ribbon/images/grid.png +0 -0
  196. data/public/themes/ribbon/images/linen.png +0 -0
  197. data/public/themes/ribbon/images/ribbon.svg +4 -0
  198. data/public/themes/ribbon/styles/fonts.css +63 -0
  199. data/public/themes/ribbon/styles/print.css +68 -0
  200. data/public/themes/ribbon/styles/reset.css +42 -0
  201. data/public/themes/ribbon/styles/style.css +408 -0
  202. data/views/header.erb +11 -0
  203. data/views/index.erb +13 -0
  204. data/views/onepage.erb +39 -0
  205. data/views/presenter.erb +70 -0
  206. metadata +328 -0
data/LICENSE ADDED
@@ -0,0 +1,20 @@
1
+ Copyright (c) 2009 Scott Chacon
2
+
3
+ Permission is hereby granted, free of charge, to any person obtaining
4
+ a copy of this software and associated documentation files (the
5
+ "Software"), to deal in the Software without restriction, including
6
+ without limitation the rights to use, copy, modify, merge, publish,
7
+ distribute, sublicense, and/or sell copies of the Software, and to
8
+ permit persons to whom the Software is furnished to do so, subject to
9
+ the following conditions:
10
+
11
+ The above copyright notice and this permission notice shall be
12
+ included in all copies or substantial portions of the Software.
13
+
14
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
15
+ EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
16
+ MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
17
+ NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
18
+ LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
19
+ OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
20
+ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
@@ -0,0 +1,559 @@
1
+ = ShowOff Presentation Software
2
+
3
+ ShowOff is a Sinatra web app that reads simple configuration files for a
4
+ presentation. It is sort of like a Keynote web app engine - think S5 +
5
+ Slidedown. I am using it to do all my talks in 2010, because I have a deep
6
+ hatred in my heart for Keynote and yet it is by far the best in the field.
7
+
8
+ The idea is that you setup your markdown slide files in section subdirectories
9
+ and then startup the showoff server in that directory. It will read in your
10
+ <tt>showoff.json</tt> file for which sections go in which order and then will give
11
+ you a URL to present from.
12
+
13
+ It can:
14
+
15
+ * show simple text
16
+ * show images
17
+ * show syntax highlighted code
18
+ * bullets with incremental advancing
19
+ * re-enact command line interactions
20
+ * call up a menu of sections/slides at any time to jump around
21
+ * execute Javascript, Coffeescript or Ruby live and display results
22
+ * do simple transitions (instant, fade, slide in)
23
+ * show a pre-show slideshow while you wait to start
24
+
25
+ It might will can:
26
+
27
+ * show a timer - elapsed / remaining
28
+ * perform simple animations of images moving between keyframes
29
+ * show synchronized, hidden notes on another browser (like an iphone)
30
+ * show audience questions / comments (twitter or direct)
31
+ * let audience members go back / catch up as you talk
32
+ * let audience members vote on sections (?)
33
+ * broadcast itself on Bonjour
34
+ * let audience members download slides, code samples or other supplementary material
35
+ * let you write on the slide with your mouse, madden-style via canvas
36
+ * automatically resize text to fit screen [see Alex's shrink.js]
37
+
38
+ Some of the nice things are that you can easily version control it, you
39
+ can easily move sections between presentations, and you can rearrange or
40
+ remove sections easily.
41
+
42
+ = Usage
43
+
44
+ ShowOff is meant to be run in a ShowOff formatted repository - that means that
45
+ it has a <tt>showoff.json</tt> file and a number of sections (subdirectories) with
46
+ markdown files for the slides you're presenting.
47
+
48
+ $ gem install showoff
49
+ $ git clone (showoff-repo)
50
+ $ cd (showoff-repo)
51
+ $ showoff serve
52
+
53
+ If you run 'showoff' in the example subdirectory of ShowOff itself, it will
54
+ show an example presentation, so you can see what it's like.
55
+
56
+ You can also run 'showoff serve' inside a section subdirectory. If there is no
57
+ <tt>showoff.json</tt> file then it will make its best guess, creating a presentation
58
+ from all `.md` files in alphabetical order in the given (or current)
59
+ directory.
60
+
61
+ = Slide Format
62
+
63
+ You can break your slides up into sections of however many subdirectories deep
64
+ you need. ShowOff will recursively check all the directories mentioned in
65
+ your <tt>showoff.json</tt> file for any markdown files (.md). Each markdown file can
66
+ have any number of slides in it, separating each slide with the '!SLIDE'
67
+ keyword and optional slide styles.
68
+
69
+ For example, if you run 'showoff create my_new_pres' it will create a new
70
+ starter presentation for you with one .md file at one/slide.md which will have
71
+ the following contents:
72
+
73
+ !SLIDE
74
+
75
+ # My Presentation #
76
+
77
+ !SLIDE bullets incremental transition=fade
78
+
79
+ # Bullet Points #
80
+
81
+ * first point
82
+ * second point
83
+ * third point
84
+
85
+ That represents two slides, the first contains just a large title, and the
86
+ second is faded into view showing the title and three bullets that are then
87
+ incrementally shown. In order for ShowOff to see those slides, your
88
+ <tt>showoff.json</tt> file needs to look something like this:
89
+
90
+ {
91
+ "name": "Something",
92
+ "description": "Example Presentation",
93
+ "sections": [
94
+ {"section":"one"}
95
+ ]
96
+ }
97
+
98
+ If you have multiple sections in your talk, you can make this json array
99
+ include all the sections you want to show in which order you want to show
100
+ them.
101
+
102
+ Instead of a hash, you can use a plain string as an entry in the `sections`
103
+ section of `showoff.json`.
104
+
105
+ And if that plain string starts with '#' then it is interpreted not as a
106
+ filename, but as markdown. This is used for inserting interstitial slides
107
+ or notes -- for instance, Alex Chaffee's
108
+ [Ruby Notes](http://github.com/alexch/ruby_notes)
109
+ uses it to insert lab instructions between lecture slide sections, which may
110
+ vary from venue to venue.
111
+
112
+ If you want to keep the ability to emit an HTML document from your
113
+ Markdown source file -- say, for a TextMate preview or a GitHub rendering
114
+ -- you can use angle brackets around the `!SLIDE` keyword and styles, e.g.
115
+
116
+ <!SLIDE bullets incremental transition=fade>
117
+
118
+ Some useful styles for each slide are:
119
+
120
+ * center - centers images on a slide
121
+ * full-page - allows an image to take up the whole slide
122
+ * bullets - sizes and separates bullets properly (fits up to 5, generally)
123
+ * smbullets - sizes and separates more bullets (smaller, closer together)
124
+ * subsection - creates a different background for titles
125
+ * command - monospaces h1 title slides
126
+ * commandline - for pasted commandline sections (needs leading '$' for commands, then output on subsequent lines)
127
+ * code - monospaces everything on the slide
128
+ * incremental - can be used with 'bullets' and 'commandline' styles, will incrementally update elements on arrow key rather than switch slides
129
+ * small - make all slide text 80%
130
+ * smaller - make all slide text 70%
131
+ * execute - on Javascript, Coffeescript and Ruby highlighted code slides, you can click on the code to execute it and display the results on the slide
132
+
133
+ Check out the example directory included to see examples of most of these.
134
+
135
+ Transitions can be supplied through the use of transition=tname on the !SLIDE
136
+ definition, where tname is one of the following supported transitions:
137
+
138
+ * blindX
139
+ * blindY
140
+ * blindZ
141
+ * cover
142
+ * curtainX
143
+ * curtainY
144
+ * fade
145
+ * fadeZoom
146
+ * growX
147
+ * growY
148
+ * none (this is the default)
149
+ * scrollUp
150
+ * scrollDown
151
+ * scrollLeft
152
+ * scrollRight
153
+ * scrollHorz
154
+ * scrollVert
155
+ * shuffle
156
+ * slideX
157
+ * slideY
158
+ * toss
159
+ * turnUp
160
+ * turnDown
161
+ * turnLeft
162
+ * turnRight
163
+ * uncover
164
+ * wipe
165
+ * zoom
166
+
167
+ 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.
168
+
169
+ You can manage the presentation with the following keys:
170
+
171
+ * space, cursor right: next slide
172
+ * shift-space, cursor left: previous slide
173
+ * d: debug mode
174
+ * c, t: table of contents (vi)
175
+ * f: toggle footer
176
+ * z, ?: toggle help
177
+ * p: toggle preshow
178
+
179
+ = Showing plain old markdown
180
+
181
+ If a markdown file has no !SLIDE keywords, then showoff will treat every line
182
+ beginning with a single hash -- i.e. every H1 -- as a new slide in "bullets"
183
+ style. Remember that you can't specify classes or transitions in this mode,
184
+ and as soon as you add one !SLIDE you need them everywhere.
185
+
186
+ = Preshow
187
+
188
+ If you want to show a slideshow while you wait to speak, you can run a preshow. Add a +_preshow+ directory
189
+ to your project (I use a symlink, so I don't have to add all the images into Git), put a bunch of images in the +_preshow+ directory and optionally add a +preshow+.+json+ file that provides descriptions for any of the images.
190
+ If you then press 'p' at the beginning of your presentation, it will prompt you for a number of minutes until
191
+ you start. Then it will count down the time until then, flipping through your pictures to entertain the
192
+ audience in the meantime. Press 'p' again to stop, or wait until the timer runs out.
193
+
194
+ = Custom JavaScript
195
+
196
+ To insert custom JavaScript into your presentation you can either place it into
197
+ a file (with extension .js) into the root directory of your presentation or you
198
+ can embed a <+script+> element directly into your slides. This JavaScript will be
199
+ executed—as usually—as soon as it is loaded.
200
+
201
+ If you want to trigger some JavaScript as soon as a certain page is shown or
202
+ when you switch to the next or previous slide, you can bind a callback to a
203
+ custom event:
204
+
205
+ * *showoff:show* will be triggered as soon as you enter a page
206
+ * *showoff:next* will be triggered when you switch to the next page
207
+ * *showoff:incr* will be triggered when you advance to the next increment on the page
208
+ * *showoff:prev* will be triggered when you switch to the previous page
209
+
210
+ These events are triggered on the "div.content" child of the slide, so you must
211
+ add a custom and unique class to your SLIDE to identify it:
212
+
213
+ !SLIDE custom_and_unique_class
214
+ # 1st Example h1
215
+ <script>
216
+ // bind to custom event
217
+ $(".custom_and_unique_class").bind("showoff:show", function (event) {
218
+ // animate the h1
219
+ var h1 = $(event.target).find("h1");
220
+ h1.delay(500)
221
+ .slideUp(300, function () { $(this).css({textDecoration: "line-through"}); })
222
+ .slideDown(300);
223
+ });
224
+ </script>
225
+
226
+ This will bind an event handler for *showoff:show* to your slide. The
227
+ h1-element will be animated, as soon as this event is triggered on that slide.
228
+
229
+ If you bind an event handler to the custom events *showoff:next* or
230
+ *showoff:prev*, you can prevent the default action (that is switching to the
231
+ appropriate slide) by calling *event.preventDefault()*:
232
+
233
+ !SLIDE prevent_default
234
+ # 2nd Example h1
235
+ <script>
236
+ $(".prevent_default").bind("showoff:next", function (event) {
237
+ var h1 = $(event.target).find("h1");
238
+ if (h1.css("text-decoration") === "none") {
239
+ event.preventDefault();
240
+ h1.css({textDecoration: "line-through"})
241
+ }
242
+ });
243
+ </script>
244
+
245
+ This will bind an event handler for *showoff:next* to your slide. When you press
246
+ the right arrow key the first time, the h1-element will be decorated. When you
247
+ press the right array key another time, you will switch to the next slide.
248
+
249
+ The same applies to the *showoff:prev* event, of course.
250
+
251
+
252
+ = Custom Stylesheets
253
+
254
+ To insert custom Stylesheets into your presentation you can either place it into
255
+ a file (with extension .css) into the root directory of your presentation or
256
+ you can embed a <+link+> element directly into your slides. This stylesheet will
257
+ be applied as soon as it is loaded.
258
+
259
+ The content generated by the slide is wrapped with a +div+ with the class .+content+ like this.
260
+
261
+ <div ref="intro/01_slide/1" class="content" style="margin-top: 210px;">
262
+ <h1>jQuery &amp; Sinatra</h1>
263
+ <h2>A Classy Combination</h2>
264
+ </div>
265
+
266
+ This makes the .+content+ tag a perfect place to add additional styling if that
267
+ is your preference. An example of adding some styling is here.
268
+
269
+ .content {
270
+ color: black;
271
+ font-family: helvetica, arial;
272
+ }
273
+ h1, h2 {
274
+ color: rgb(79, 180, 226);
275
+ font-family: Georgia;
276
+ }
277
+ .content::after {
278
+ position: absolute;
279
+ right: 120px;
280
+ bottom: 120px;
281
+ content: url(jay_small.png);
282
+ }
283
+
284
+ Note that the example above uses CSS3 styling with ::+after+ and the +content+
285
+ -attribute to add an image to the slides.
286
+
287
+ = Language highlighting
288
+
289
+ Showoff uses {shjs}[http://shjs.sourceforge.net/] to highlight code blocks.
290
+ If you begin a code block with three @-signs followed by a
291
+ {programming language name}[http://shjs.sourceforge.net/doc/documentation.html],
292
+ that line will be stripped and the rest of the block will become sparkly
293
+ and colorful.
294
+
295
+ @@@ ruby
296
+ 10.times { puts "Whee!" }
297
+
298
+ = Custom Ruby Files
299
+
300
+ If you want to have executable Ruby code on your slides you must set the
301
+ environment variable ENV['SHOWOFF_EVAL_RUBY']. This can be done with
302
+
303
+ export SHOWOFF_EVAL_RUBY=1
304
+
305
+ or
306
+
307
+ # On Heroku
308
+ heroku config:add SHOWOFF_EVAL_RUBY=1
309
+
310
+
311
+ If you need supporting libraries when you evaluate the code. You can do this by
312
+ putting Ruby files (*.rb) into the root directory of the presentation then they
313
+ will be required when the presentation loads.
314
+
315
+ = Presenter Notes
316
+
317
+ Add a line that starts with .notes:
318
+
319
+ .notes my notes here
320
+
321
+ Toggle presenter notes with the n key while in the presentation.
322
+
323
+ = Editor integration
324
+
325
+ The "add slide" feature can allow you to add the necessary boilerplate from your editor. If you are using vim, you can
326
+
327
+ !showoff add -t code Check This Code
328
+
329
+ And your buffer will get
330
+
331
+ !SLIDE
332
+ # Check This Code #
333
+ @@@ Ruby
334
+ code_here()
335
+
336
+ added where your cursor was. Binding this to a keybinding can allow you to add new slides quickly.
337
+
338
+ = Command Line Interface
339
+
340
+ showoff command_name [command-specific options] [--] arguments...
341
+
342
+ * Use the command +help+ to get a summary of commands
343
+ * Use the command <tt>help command_name</tt> to get a help for +command_name+
344
+ * Use <tt>--</tt> to stop command line argument processing; useful if your arguments have dashes in them
345
+
346
+ == Commands
347
+ [<tt>add</tt>] Add a new slide at the end in a given dir
348
+ [<tt>create</tt>] Create new showoff presentation
349
+ [<tt>help</tt>] Shows list of commands or help for one command
350
+ [<tt>heroku</tt>] Setup your presentation to serve on Heroku
351
+ [<tt>github</tt>] Setup your presentation to serve on GitHub Pages
352
+ [<tt>serve</tt>] Serves the showoff presentation in the current directory (or a given dir)
353
+ [<tt>static</tt>] Generate static version of presentation
354
+
355
+
356
+ == <tt>showoff add [title]</tt>
357
+
358
+ Add a new slide at the end in a given dir
359
+
360
+ *Aliases*
361
+ * <tt><b>new</b></tt>
362
+
363
+ Outputs or creates a new slide. With -d and -n, a new slide is created in the given dir, numbered to appear
364
+ as the last slide in that dir (use -u to avoid numbering). Without those, outputs the slide markdown to
365
+ stdout (useful for shelling out from your editor). You may also specify a source file to use for a code
366
+ slide.
367
+
368
+ === options for add
369
+
370
+ These options are specified *after* the command.
371
+
372
+ [<tt>-d, --dir=dir</tt>] Slide dir (where to put a new slide file)
373
+ [<tt>-n, --name=basename</tt>] Slide name (name of the new slide file)
374
+ [<tt>-s, --source=path to file</tt>] Include code from the given file as the slide body
375
+ [<tt>-t, --style, --type=valid showoff style/type</tt>] Slide Type/Style <i>( default: <tt>title</tt>)</i>
376
+ [<tt>-u, --nonumber</tt>] Dont number the slide, use the given name verbatim
377
+
378
+
379
+ == <tt>showoff create dir_name</tt>
380
+
381
+ Create new showoff presentation
382
+
383
+ *Aliases*
384
+ * <tt><b>init</b></tt>
385
+
386
+ This command helps start a new showoff presentation by setting up the proper directory structure for you. It takes the directory name you would like showoff to create for you.
387
+
388
+ === options for create
389
+
390
+ These options are specified *after* the command.
391
+
392
+ [<tt>-d, --slidedir=arg</tt>] sample slide directory name <i>( default: <tt>one</tt>)</i>
393
+ [<tt>-n, --nosamples</tt>] Dont create sample slides
394
+
395
+
396
+ == <tt>showoff help [command]</tt>
397
+
398
+ Shows list of commands or help for one command
399
+
400
+
401
+ == <tt>showoff heroku heroku_name</tt>
402
+
403
+ Setup your presentation to serve on Heroku
404
+
405
+ Creates the Gemfile and config.ru file needed to push a showoff pres to heroku. It will then run heroku create for you to register the new project on heroku and add the remote for you. Then all you need to do is commit the new created files and run git push heroku to deploy.
406
+
407
+
408
+ == <tt>showoff github</tt>
409
+
410
+ Generates a static version of your site and puts it in a gh-pages branch for static serving on GitHub.
411
+
412
+ === options for github
413
+ These options are specified *after* the command.
414
+
415
+ [<tt>-f, --force</tt>] force overwrite of existing Gemfile/.gems and config.ru files if they exist
416
+ [<tt>-g, --dotgems</tt>] Use older-style .gems file instead of bundler-style Gemfile
417
+ [<tt>-p, --password=arg</tt>] add password protection to your heroku site
418
+
419
+
420
+ == <tt>showoff serve </tt>
421
+
422
+ Serves the showoff presentation in the current directory
423
+
424
+ ==== options for serve
425
+ These options are specified *after* the command.
426
+
427
+ [<tt>-f, --pres_file=arg</tt>] Presentation file <i>(default: <tt>showoff.json</tt>)</i>
428
+ [<tt>-h, --host=arg</tt>] Host or ip to run on <i>( default: <tt>localhost</tt>)</i>
429
+ [<tt>-p, --port=arg</tt>] Port on which to run <i>( default: <tt>9090</tt>)</i>
430
+
431
+
432
+ == <tt>showoff static name</tt>
433
+
434
+ Generate static version of presentation
435
+
436
+ = PDF Output
437
+
438
+ Showoff can produce a PDF version of your presentation. To do this, you must install a few things first:
439
+
440
+ gem install pdfkit
441
+
442
+ You'll then need to install a version of wkhtmltopdf available at the {wkhtmltopdf repo}[http://code.google.com/p/wkhtmltopdf/wiki/compilation] (or brew install wkhtmltopdf on a mac) and make sure that +wkhtmltopdf+ is in your path:
443
+
444
+ export $PATH="/location/to/my/wkhtmltopdf/0.9.9:$PATH"
445
+
446
+
447
+
448
+ Then restart showoff, and navigate to <tt>/pdf</tt> (e.g. http://localhost/pdf) of your presentation and a PDF will be generated with the browser.
449
+
450
+ = Completion
451
+
452
+ == ZSH completion
453
+ You can complete commands and options in ZSH, by installing a script:
454
+
455
+ mkdir -p $HOME/.zsh/Completion
456
+ cp script/_showoff $HOME/.zsh/Completion
457
+ echo 'fpath=(~/.zsh/Completion $fpath)' >> $HOME/.zshrc
458
+
459
+ == <tt>bash</tt> completion
460
+
461
+ You can complete commands for showoff by putting the following in your <tt>.bashrc</tt> (or whatever
462
+ you use when starting <tt>bash</tt>):
463
+
464
+ complete -F get_showoff_commands
465
+ function get_showoff_commands()
466
+ {
467
+ if [ -z $2 ] ; then
468
+ COMPREPLY=(`showoff help -c`)
469
+ else
470
+ COMPREPLY=(`showoff help -c $2`)
471
+ fi
472
+ }
473
+
474
+ = Real World Usage
475
+
476
+ So far, ShowOff has been used in the following presentations (and many others):
477
+
478
+ * LinuxConf.au 2010 - Wrangling Git - Scott Chacon
479
+ http://github.com/schacon/showoff-wrangling-git
480
+ * SF Ruby Meetup - Resque! - Chris Wanstrath
481
+ http://github.com/defunkt/sfruby-meetup-resque
482
+ * RORO Sydney Talk, Feb 2010 - Beyond Actions - Dave Bolton
483
+ http://github.com/lightningdb/roro-syd-beyond-actions
484
+ * LRUG's February meeting - Showing Off with Ruby - Joel Chippindale
485
+ http://github.com/mocoso/showing-off-with-ruby
486
+ * PyCon 2010 - Hg and Git; Can't we all just get along? - Scott Chacon
487
+ http://github.com/schacon/pycon-hg-git
488
+ * PdxJs Tech Talk - Asynchronous Coding For My Tiny Ruby Brain - Rick Olson
489
+ http://github.com/technoweenie/pdxjs-twitter-node
490
+ * RORO Perth Talk - Rails 3; A Brief Introduction Darcy Laycock
491
+ http://github.com/Sutto/roro-perth-rails-3
492
+ * PDXRB Tech Talk - Here's Sinatra - Jesse Cooke
493
+ http://github.com/jc00ke/pdxrb_sinatra
494
+ * Red Dirt Ruby Conference May 2010 - Plain Old Tokyo Storage - Jeremy Hinegardner
495
+ http://github.com/copiousfreetime/plain-old-tokyo-storage-presentation
496
+ http://plain-old-tokyo-storage.heroku.com/
497
+ * Lambda Lounge and StrangeLoop 2010 - JavaScript Functions : The Good Parts - Idioms for Encapsulation and Inheritance - Scott Bale
498
+ http://github.com/scottbale/JavaScript-Function-Idioms
499
+ * Open Source Bridge 2010 - Creating a low-cost clustered virtualization environment w/ Ganeti - Lance Albertson
500
+ http://github.com/ramereth/presentation-ganeti
501
+ * RailsConf 2010 - Domain-driven Test-assisted Production Rails Crisis Interventions - Rick Bradley
502
+ http://railsconf2010.rickbradley.com/ http://github.com/rick/presentation_railsconf_2010
503
+ * WebWorkersCamp - 25 promising projects in 50 minutes - Bruno Michel
504
+ http://github.com/nono/Presentations/tree/master/20100703_25_promising_projects_in_50_minutes/
505
+ * 11th Libre Software Meeting 2010 - Ruby 1.9, The future of Ruby? - Bruno Michel
506
+ http://github.com/nono/Presentations/tree/master/20100708_RMLL_Ruby_1.9/
507
+ * Lone Star PHP 2011 - Drupal - Chris Christensen
508
+ https://github.com/christianchristensen/Presentations/tree/master/20110611-lonestarphp-drupal
509
+ * Railsbridge Open Workshops - Sarah Allen, Sarah Mei, and Alex Chaffee
510
+ http://github.com/alexch/workshop
511
+ * SDRuby Lightning Talk - Readable Regexps - Ian Young
512
+ https://github.com/iangreenleaf/sdruby-lightningtalk-tregexp
513
+
514
+
515
+ If you use it for something, please let me know so I can add it.
516
+
517
+ = Editor Support
518
+
519
+ * TextMate Bundle - Showoff.tmdbundle - Dr Nic Williams
520
+ http://github.com/drnic/Showoff.tmbundle
521
+
522
+ * Emacs major-mode - showoff-mode - Nick Parker
523
+ http://github.com/developernotes/showoff-mode
524
+
525
+ = Future Plans
526
+
527
+ I really want this to evolve into a dynamic presentation software server,
528
+ that gives the audience a lot of interaction into the presentation -
529
+ helping them decide dynamically what the content of the presentation is,
530
+ ask questions without interupting the presenter, etc. I want the audience
531
+ to be able to download a dynamically generated PDF of either the actual
532
+ talk that was given, or all the available slides, plus supplementary
533
+ material. And I want the presenter (me) to be able to push each
534
+ presentation to Heroku or GitHub pages for archiving super easily.
535
+
536
+ = Why Not S5 or Slidy or Slidedown?
537
+
538
+ S5 and Slidy are really cool, and I was going to use them, but mainly I wanted
539
+ something more dynamic. I wanted Slidy + Slidedown, where I could write my
540
+ slideshows in a structured format in sections, where the sections could easily
541
+ be moved around and between presentations and could be written in Markdown. I
542
+ also like the idea of having interactive presentation system and didn't need
543
+ half the features of S5/Slidy (style based print view, auto-scaling, themes,
544
+ etc).
545
+
546
+ = Requirements
547
+
548
+ * Ruby (duh)
549
+ * Sinatra (and thus Rack)
550
+ * BlueCloth
551
+ * Nokogiri
552
+ * json
553
+ * GLI gem
554
+ * Firefox or Chrome to present
555
+ * PDFKit (optional, for generating PDF of presentation) https://github.com/jdpace/PDFKit
556
+
557
+ = Contributing
558
+
559
+ See the CONTRIB.txt file for how to contribute to this project