├── Procfile ├── Readme.md ├── gist.html ├── gistdeck.css ├── gistdeck.js └── index.html /Procfile: -------------------------------------------------------------------------------- 1 | web: python -m SimpleHTTPServer $PORT -------------------------------------------------------------------------------- /Readme.md: -------------------------------------------------------------------------------- 1 | # GistDeck 2 | 3 | GistDeck is a presentation layer for one of our favorite text sharing tools. 4 | 5 | ## Instructions 6 | 7 | * View homepage 8 | * Drag to Bookmarks Bar GistDeck 9 | * Visit Gist 10 | * Click Bookmarklet 11 | * Present, using left and right keys 12 | 13 | # Examples 14 | 15 | # Topic 16 | 17 | An h1 is a topic. 18 | 19 | ## Subtopic 20 | 21 | An h2 is a subtopic. This subtopic is followed with a paragraph. Pellentesque id 22 | lorem nunc, varius porttitor nulla. Phasellus in sapien tellus, id congue metus. 23 | Cras et vestibulum nisl. Mauris interdum tincidunt augue vitae tincidunt. 24 | 25 | ## Subtopics are often supported with lists: 26 | 27 | * Some people call these bullets 28 | * In markdown and html we call them list items 29 | * A list item can also have code 30 | * `ruby -pe 'next unless $_ =~ /bullet/' < file.md` 31 | 32 | ## Subtopics can also have images: 33 | 34 | ![](http://placekitten.com/g/400/400) 35 | 36 | If an image is displayed after an h2, and before the supporting paragraph, it 37 | will be floated right. Nam dictum blandit faucibus. In hac habitasse platea 38 | dictumst. Fusce faucibus sagittis sapien vel posuere. 39 | 40 | ## Subtopics love code snippets: 41 | 42 | 1. In Ruby you can map like this: 43 | 44 | ```ruby 45 | ['a', 'b'].map { |x| x.uppercase } 46 | ``` 47 | 48 | 2. In Rails, you can do a shortcut: 49 | 50 | ```ruby 51 | ['a', 'b'].map(&:uppercase) 52 | ```` 53 | 54 | # GistDeck by noah and todd 55 | 56 | -------------------------------------------------------------------------------- /gist.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | From Gist to Deck 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 37 | 38 | 39 | 40 | 41 |
42 | 43 | 44 | 90 | 91 |
92 |
93 | 94 |
95 |
96 |
97 |
    98 | 99 |
  • 100 |
  • 101 |
    102 | 103 | 104 | 105 |
    106 |
    • 107 |
  • 108 |
    109 | 110 | 111 |
    112 |
    • 113 |
114 |

115 | secret 116 | 117 |
118 |
119 | 120 | 121 | seaofclouds 122 | / 123 | gist:b273f7a3089b1a238f5a 124 |
125 |
126 | Last updated 127 |
128 |

129 |
130 | 131 |
132 |
133 | 134 | 135 | 136 |
137 |

From Gist to Deck

138 |
139 | 140 |
141 |
142 |
143 | 171 |
172 | 173 |
    174 |
  • 175 | Download Gist 176 |
    • 177 |
  • 178 | 179 | 180 |
    • 181 |
  • 182 | 183 | 184 |
    • 185 |
  • 186 | 187 | 188 |
    • 189 |
190 |
191 | 192 | 193 |
194 |
195 |
196 |
197 |
198 | 199 | gistfile1.md 200 |
201 |
202 | Markdown 203 |
    204 |
    • 205 |
    • 206 |
207 |
208 |
209 |
210 | File suppressed. Click to show. 211 |
212 | 213 |
214 |
215 |

216 | Crafting a presentation can be difficult

217 | 218 |

219 | Too many tools

220 | 221 |

tools

222 | 223 |
    224 |
  • Keynote
    • 225 |
  • ShowOff
    • 226 |
  • PowerPoint
    • 227 |
  • PDFs
    • 228 |
  • etc
    • 229 |

230 | Too many options

231 | 232 |

233 | 234 |
    235 |
  • Templates
    • 236 |
  • Clip Art
    • 237 |
  • Screen Sizes
    • 238 |
  • Fonts
    • 239 |
  • Transitions
    • 240 |

241 | Too many distractions

242 | 243 |

244 | 245 |
    246 |
  • Toolbars
    • 247 |
  • Sidebars
    • 248 |
  • Drawing tools
    • 249 |
  • Windows
    • 250 |
  • Lolcats
    • 251 |

252 | Why can't it be easier?

253 | 254 |

Why must we install software?

255 | 256 |

Why can't we use simple tools?

257 | 258 |

Why can't we use a simple interface?

259 | 260 |

Why can't we publish instantly?

261 | 262 |

263 | Introducing GistDeck

264 | 265 |

266 | 267 |

268 | GistDeck is a presentation layer for one of our favorite text sharing tools.

269 | 270 |

271 | Built with tools you use every day

272 | 273 |

Browser

274 | 275 |

Gist

276 | 277 |

HTML, CSS, JS

278 | 279 |

280 | No Software

281 | 282 |

No Apps, No Servers

283 | 284 |

Only You

285 | 286 |

Your Browser

287 | 288 |

And an idea worth sharing

289 | 290 |

291 | Some examples

292 | 293 |

294 | This is a topic

295 | 296 |

front and center

297 | 298 |

299 | This is a Subtopic

300 | 301 |

This is a paragraph. Pellentesque id lorem nunc, varius porttitor nulla. Phasellus in sapien tellus, id congue metus. Cras et vestibulum nisl. Mauris interdum tincidunt augue vitae tincidunt.

302 | 303 |

304 | Subtopics can have bullets:

305 | 306 |
    307 |
  • Supporting Bullet
    • 308 |
  • Most people call this a list
    • 309 |
  • Phasellus et mauris et mauris
    • 310 |
  • A list item can have code
    • 311 |
  • ruby -pe 'next unless $_ =~ /bullet/' < file.md
    • 312 |

313 | Subtopics can have images:

314 | 315 |

316 | 317 |

Sollicitudin vestibulum magna. Nulla facilisi. Fusce rutrum bibendum dapibus. Nam dictum blandit faucibus. In hac habitasse platea dictumst. Fusce faucibus sagittis sapien vel posuere.

318 | 319 |

320 | Subtopics love code snippets:

321 | 322 |
    323 |
  1. 324 |

    In Ruby you can map like this:

    325 | 326 | 
    ['a', 'b'].map { |x| x.uppercase }
327 |
    328 |
    2. 329 |
  2. 330 |

    In Rails, you can do a shortcut:

    331 | 332 | 
    ['a', 'b'].map(&:uppercase)
333 |
    334 |
    3. 335 |

336 | This presentation is a gist!

337 | 338 |

https://gist.github.com/gists/b273f7a3089b1a238f5a

339 | 340 |

341 | 342 |

343 | Whaaaaat?

344 | 345 |

346 | 347 |
    348 |
  1. Install Bookmarklet
    2. 349 |
  2. Visit Gist
    3. 350 |
  3. Click Bookmarklet
    4. 351 |
  4. Present
    5. 352 |

353 | Contribute on Github

354 | 355 |

https://github.com/nzoschke/gistdeck

356 | 357 |

358 | fin

359 | 360 |

by noah and todd

361 |
362 |
363 | 364 | 365 | 366 |
367 |
368 |
369 | 370 |
371 | 372 |
373 |
374 | 375 |
376 |
377 | 378 | trauber 379 | 380 | 381 | commented 382 | 383 | 384 | 385 | 386 | 387 | 388 | 389 | 390 |
391 | 392 | 393 |
394 |
395 | 396 |
397 |

Numbers in ordered lists are clipped on my netbook. Seven inch screen is probably not a good format for gistdeck andyway I guess?

398 |
399 |
400 | 401 |
402 |
403 | 404 |
405 |
406 |
407 | 408 |
409 |
412 | 413 | 414 |
415 | 416 |
417 |
418 | 419 |
420 |
421 | 425 | 426 | 427 | Comments are parsed with GitHub Flavored Markdown 428 | 429 | 430 |
431 | 432 | 433 | 434 |
435 |
436 | 437 |
438 |
439 | 440 |
441 |
442 |
443 | 444 | nzoschke 445 | commented 446 | 447 | 448 | 449 |
450 |
451 |
452 |
453 |

Nothing to preview

454 |
455 |
456 |
457 |
458 |
459 |
460 |
461 |
462 |
463 | 464 |
465 | 466 |
467 |
468 | 469 |
470 |
471 | 472 |
473 |
474 | 475 |
476 |
477 |
478 | 479 |
480 |
481 | 482 | Something went wrong with that request. Please try again. 483 | 484 |
485 |
486 | 487 | 505 | 506 | 507 | 508 | -------------------------------------------------------------------------------- /gistdeck.css: -------------------------------------------------------------------------------- 1 | 2 | /* hide gist interface */ 3 | #header, 4 | #revisions, 5 | #comments, 6 | #delete_link, 7 | #footer, 8 | .files .file-box .meta, 9 | .fork-info, 10 | .root-pane, 11 | .uncommentable, 12 | .js-comment-form { 13 | display:none !important; 14 | } 15 | 16 | .secondary, 17 | .files { 18 | float: none !important; 19 | width: auto !important; 20 | } 21 | 22 | .main { 23 | width:auto !important; 24 | } 25 | 26 | .file-box, .file-box article { 27 | background:none !important; 28 | background: transparent !important; 29 | } 30 | 31 | /* hide and reset gist header except for author gravatar and name */ 32 | .pagehead-actions, 33 | .entry-title > span, 34 | .gist-author strong, 35 | .gist-timestamp { 36 | display: none !important; 37 | } 38 | 39 | .pagehead, 40 | .entry-title { 41 | margin: 0 !important; 42 | padding: 0 !important; 43 | border: none !important; 44 | } 45 | 46 | /* hide github interface */ 47 | .last-commit, 48 | .commit, 49 | .breadcrumb, 50 | #readme .name, 51 | a.anchor span { 52 | display:none !important; 53 | } 54 | 55 | #readme, .markdown-body { 56 | background:none !important; 57 | background: transparent !important; 58 | border: 0 none !important; 59 | padding: 0 !important; 60 | } 61 | 62 | /* reset github interface styles */ 63 | .bubble, 64 | .bubble .file-box { 65 | background: none !important; 66 | border: none !important; 67 | margin: 0 !important; 68 | padding: 0 !important; 69 | } 70 | 71 | /* basic style */ 72 | 73 | body { 74 | background-attachment: fixed; 75 | background-color: #E6E6EC; 76 | background-image:-webkit-gradient(linear, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #E6E6EC), color-stop(100%, #B7B6CB)); 77 | background-image:-webkit-linear-gradient(#E6E6EC, #B7B6CB); 78 | background-image:-moz-linear-gradient(#E6E6EC, #B7B6CB); 79 | background-image:-o-linear-gradient(#E6E6EC, #B7B6CB); 80 | background-image:-ms-linear-gradient(#E6E6EC, #B7B6CB); 81 | background-image: linear-gradient(#E6E6EC, #B7B6CB); 82 | font-family: "helvetica neue", helvetica, arial, geneva, sans-serif !important; 83 | font-size: 13px !important; 84 | color:#676482 !important; 85 | text-shadow: hsla(246, 13%, 100%, 0.5) 0px 1px 0px; 86 | padding-bottom:600px !important; 87 | } 88 | 89 | a { 90 | color: #4E51A3 !important; 91 | } 92 | a:hover { 93 | text-decoration:none; 94 | color: #514ECA !important; 95 | } 96 | 97 | .file-box { 98 | font-size:36px !important; 99 | line-height:54px !important; 100 | padding: 30px !important; 101 | border:0 none !important; 102 | width:1024px; 103 | margin:0 auto; 104 | } 105 | 106 | /* owner/gravatar/description becomes title screen */ 107 | .pagehead { 108 | background:none !important; 109 | background: transparent !important; 110 | text-align: center !important; 111 | padding: 30px !important; 112 | margin-top:120px !important; 113 | } 114 | 115 | .gist-author { 116 | font-weight:normal !important; 117 | font-size: 0px !important; /* removes the trailing slash */ 118 | color: #676482 !important; 119 | text-shadow: hsla(246, 13%, 100%, 0.5) 0px 1px 0px; 120 | } 121 | 122 | .gist-author img { 123 | height:36px !important; 124 | width: 36px !important; 125 | margin-bottom: 7px; 126 | margin-right: 6px; 127 | } 128 | 129 | .gist-author .author a { 130 | color: #676482 !important; 131 | font-size: 24px !important; 132 | font-weight:normal !important; 133 | } 134 | 135 | .gist-description p { 136 | font-size:54px !important; 137 | line-height:54px !important; 138 | font-weight:normal !important; 139 | text-align:center !important; 140 | color:#5E559E !important; 141 | } 142 | 143 | /* slide text style */ 144 | 145 | h1, h2, h3, h4, p { 146 | color: #676482 !important; 147 | text-align:center !important; 148 | } 149 | h1, h2, h3, h4 { 150 | border: 0 none !important; 151 | text-align:center; 152 | font-weight:normal !important; 153 | } 154 | 155 | /* slides */ 156 | 157 | h1, h2 { 158 | font-size:54px !important; 159 | line-height:72px !important; 160 | margin-bottom: 36px !important; 161 | color:#5E559E !important; 162 | } 163 | h2 { 164 | color:#3F3969 !important; 165 | } 166 | h3 { 167 | font-size:45px !important; 168 | line-height:54px !important; 169 | margin-bottom:18px; 170 | } 171 | p, li, h4 { 172 | margin: 0 !important; 173 | padding: 0 !important; 174 | font-size: 36px !important; 175 | line-height:54px !important; 176 | } 177 | li * { 178 | text-align: left !important; 179 | } 180 | li, p { 181 | margin-bottom:24px !important; 182 | } 183 | /* slides with images and text */ 184 | 185 | h2 + p img { 186 | float:right !important; 187 | margin-left: 20px !important; 188 | } 189 | 190 | 191 | 192 | .file-box img { 193 | -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(80%, transparent), to(rgba(255,255,255,0.2))); 194 | } 195 | /* code style */ 196 | 197 | .file-box div.highlight { 198 | background: none !important; 199 | background: transparent !important; 200 | } 201 | div.highlight pre, pre, .markdown-body code { 202 | border: 1px solid hsla(246, 13%, 45%, 0.4) !important; 203 | background: hsla(246, 13%, 99%, 0.6) !important; 204 | -webkit-border-radius: 6px !important; 205 | -moz-border-radius: 6px !important; 206 | border-radius: 6px !important; 207 | text-align:left; 208 | } 209 | div.highlight pre, pre code, li code { 210 | font-size:16px !important; 211 | text-align: left; 212 | } 213 | -------------------------------------------------------------------------------- /gistdeck.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | // Cache window and slides jQuery selectors 4 | var $window = $(window); 5 | var $slides = $(".pagehead, .markdown-body h1, .markdown-body h2"); 6 | 7 | function initialize() { 8 | var GISTDECK_CSS_URL= window.GISTDECK_CSS_URL || "https://gistdeck.herokuapp.com/gistdeck.css"; 9 | 10 | $('') 11 | .addClass('gistdeck-css') 12 | .appendTo('head'); 13 | 14 | // Set gap before all slides but first, and after slides container, equal to the window height 15 | $slides.not($slides.first()).css('margin-top', $window.height()); 16 | $('.markdown-body').css('margin-bottom', $window.height()); 17 | // so the gist description also looks like a slide 18 | $('.gist-description').css('margin-bottom', $window.height()); 19 | 20 | $(document).on('keydown.gistdeck', function(e) { 21 | if (e.which == 37) displaySlide(getCurrentSlideIdx()-1); 22 | else if (e.which == 39) displaySlide(getCurrentSlideIdx()+1); 23 | else if (e.which == 27) resetGist(); 24 | }); 25 | 26 | displaySlide(0); 27 | } 28 | 29 | function resetGist() { 30 | // Reset margins 31 | $slides.not($slides.first()).css('margin-top', ''); 32 | $('.markdown-body').css('margin-bottom', ''); 33 | $('.gist-description').css('margin-bottom', ''); 34 | 35 | $(document).scrollTop(0); 36 | $('.gistdeck-css').remove(); 37 | 38 | // Unbind every gistdeck event handler 39 | $(document).off('.gistdeck'); 40 | } 41 | 42 | function getCurrentSlideIdx() { 43 | var idx = 0; 44 | var viewportBottom = $window.scrollTop() + $window.height(); 45 | 46 | for (var i=0; i < $slides.length; i++) { 47 | if ($slides.eq(i).offset().top > viewportBottom) break; 48 | idx = i; 49 | } 50 | 51 | return idx; 52 | } 53 | 54 | function displaySlide(n) { 55 | n = Math.min(n, $slides.length-1); 56 | n = Math.max(n, 0); 57 | 58 | var s = $slides.eq(n); 59 | var top = s.offset().top; 60 | 61 | // To vertically center the H1 slides, we must calculate the height of the 62 | // slide content. To do this, get the difference between the bottom of the 63 | // last and top of the first slide element. We should only do this if there 64 | // is a next slide. 65 | var lastSlideELement = $slides.eq(n+1).prev(); 66 | var titleTop = 150; 67 | var contentHeight = 0; 68 | if (lastSlideELement.length === 0) { 69 | // lastSlideELement will be empty if we are at the last slide. In that case 70 | // find the last element. .nextAll().andSelf() ensures we don't end up with 71 | // an empty set since nextAll() will return empty if at the last element. 72 | lastSlideELement = s.nextAll().andSelf().last(); 73 | } 74 | contentHeight = (lastSlideELement.offset().top + lastSlideELement.height()) - top; 75 | // The top line is half the window plus half the content height. 76 | titleTop = ($window.height()/2) - (contentHeight/2); 77 | 78 | var padding = { 79 | "DIV": top, 80 | "H1": titleTop, 81 | "H2": 20 82 | }[$slides[n].tagName]; 83 | 84 | $(document).scrollTop(top - padding); 85 | } 86 | 87 | if ($('.gistdeck-css').length) { 88 | resetGist(); 89 | } else { 90 | initialize(); 91 | } 92 | 93 | })(); 94 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | GistDeck - simple presentations with Gist 7 | 8 | 9 | 105 | 106 | 107 | 108 | 109 |
110 |

111 | GistDeck 112 |

113 | 114 |

GistDeck is a presentation layer for one of our favorite text sharing tools.

115 | 116 |
    117 |
  1. 118 | Drag to Bookmarks Bar 119 | GistDeck 120 |
    2. 121 |
  2. 122 | Visit Gist 123 |
    3. 124 |
  3. Click Bookmarklet
    4. 125 |
  4. Present, using left and right keys
    5. 126 |
127 |
128 |

129 | by noah and todd 130 |

131 |
132 | 133 | 134 | 144 | 145 | 146 | 147 | --------------------------------------------------------------------------------