slide-em-up 0.1.4 → 0.1.5

data/README.md

@@ -5,13 +5,14 @@ Slide'em up is a presentation tool. You write some slides in markdown, choose
 a style and it displays it in HTML5. With a browser in full-screen, you can
 make amazing presentations!
 
+
 TODO
 ----
 
-* Add specs :p
-* https://github.com/rubygems/rubygems-test/blob/master/README.txt
 * Explain how to install and use it in README
+* Same command line stuff than showoff
 * Many more things
+* Add more themes
 
 
 Issues or Suggestions

data/bin/slide-em-up

@@ -7,9 +7,5 @@ require "goliath/runner"
 presentation = SlideEmUp::Presentation.new(Dir.pwd)
 
 runner = Goliath::Runner.new(ARGV, nil)
-runner.app = Rack::Builder.new do
-  use Rack::CommonLogger
-  map '/slides' do run SlideEmUp::SlidesAPI.new(presentation) end
-  map '/'       do run SlideEmUp::AssetsAPI.new(presentation) end
-end
+runner.app = SlideEmUp::SlidesAPI.new(presentation)
 runner.run

data/lib/slide-em-up.rb

@@ -1,5 +1,4 @@
 module SlideEmUp
-  autoload :AssetsAPI,    "slide-em-up/assets_api"
   autoload :Presentation, "slide-em-up/presentation"
   autoload :SlidesAPI,    "slide-em-up/slides_api"
   autoload :VERSION,      "slide-em-up/version"

data/lib/slide-em-up/presentation.rb

@@ -1,5 +1,5 @@
 require "albino"
-require "nolate"
+require "erubis"
 require "redcarpet"
 require "yajl"
 
@@ -11,25 +11,27 @@ module SlideEmUp
     Section = Struct.new(:number, :title, :slides)
     Slide   = Struct.new(:number, :classes, :markdown, :html)
 
-    attr_accessor :meta, :theme
+    attr_accessor :meta, :theme, :common, :titles
 
     def initialize(dir)
       infos   = extract_normal_infos(dir) || extract_infos_from_showoff(dir) || {}
       infos   = { "title" => "No title", "theme" => "default" }.merge(infos)
       @meta   = build_meta(infos["title"], dir)
       @theme  = build_theme(infos["theme"])
+      @common = build_theme("common")
       @titles = infos["sections"]
     end
 
     def html
-      str = File.read("#{theme.dir}/index.nlt")
-      nolate str, :meta => meta, :theme => theme, :sections => sections
+      str = File.read("#{theme.dir}/index.erb")
+      Erubis::Eruby.new(str).result(:meta => meta, :theme => theme, :sections => sections)
     end
 
     def path_for_asset(asset)
-      try = "#{theme.dir}/#{asset}"
-      return try if File.exists? try
-      Dir["#{meta.dir}/**/#{asset}"].first
+      Dir[     "#{meta.dir}#{asset}"].first ||
+        Dir[  "#{theme.dir}#{asset}"].first ||
+        Dir[ "#{common.dir}#{asset}"].first ||
+        Dir["#{meta.dir}/**#{asset}"].first
     end
 
   protected
@@ -78,7 +80,8 @@ module SlideEmUp
         slides = parts.map.with_index do |slide,j|
           @codemap = {}
           classes, md = slide.split("\n", 2)
-          html = Redcarpet.new(extract_code md).to_html
+          tmp  = extract_code(md)
+          html = Redcarpet.new(tmp).to_html
           html = process_code(html)
           Slide.new(j, classes, md, html)
         end

data/lib/slide-em-up/slides_api.rb

@@ -1,21 +1,59 @@
+require "time"
 require "rack/utils"
+require "rack/mime"
 require "goliath/api"
 
 
 module SlideEmUp
   class SlidesAPI < Goliath::API
-    use ::Rack::ContentLength
-
     def initialize(presentation)
       @presentation = presentation
     end
 
     def response(env)
+      path_info = Rack::Utils.unescape(env["PATH_INFO"])
+      if path_info == "/"
+        serve_slides
+      elsif path_info.include? ".."
+        unauthorized_access
+      else
+        serve_asset(path_info)
+      end
+    end
+
+  protected
+
+    def serve_slides
       body = @presentation.html
       [200, {
         "Content-Type"   => "text/html; charset=utf-8",
         "Content-Length" => Rack::Utils.bytesize(body).to_s
       }, [body] ]
     end
+
+    def serve_asset(path_info)
+      path = @presentation.path_for_asset(path_info)
+      return page_not_found(path_info) unless path && File.readable?(path)
+      body = File.read(path)
+      [200, {
+        "Last-Modified"  => File.mtime(path).httpdate,
+        "Content-Length" => Rack::Utils.bytesize(body).to_s,
+        "Content-Type"   => Rack::Mime.mime_type(File.extname(path), 'text/plain'),
+      }, [body] ]
+    end
+
+    def page_not_found(path_info)
+      [404, {
+        "Content-Type"   => "text/plain",
+        "Content-Length" => "0"
+      }, ["File not found: #{path_info}\n"] ]
+    end
+
+    def unauthorized_access
+      [403, {
+        "Content-Type"   => "text/plain",
+        "Content-Length" => "0"
+      }, ["Forbidden\n"] ]
+    end
   end
 end

data/lib/slide-em-up/version.rb

@@ -1,3 +1,3 @@
 module SlideEmUp
-  VERSION = "0.1.4"
+  VERSION = "0.1.5"
 end

data/themes/3d_slideshow/css/main.css

@@ -9,11 +9,29 @@
 
 @font-face {
 	font-family: 'League Gothic';
-	src: url('/fonts/league_gothic-webfont.ttf') format('truetype');
+	src: url('../fonts/league_gothic-webfont.ttf') format('truetype');
 	font-weight: normal;
 	font-style: normal;
 }
 
+@font-face {
+  font-family: 'Crimson Text';
+  font-style: normal;
+  font-weight: 600;
+  src: local('Crimson Text Semibold'), local('CrimsonText-Semibold'), url('../fonts/crimson_text_semibold.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Crimson Text';
+  font-style: normal;
+  font-weight: normal;
+  src: local('Crimson Text'), local('CrimsonText-Roman'), url('../fonts/crimson_text.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Crimson Text';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Crimson Text Bold'), local('CrimsonText-Bold'), url('../fonts/crimson_text_bold.ttf') format('truetype');
+}
 
 /*********************************************
  * GLOBAL STYLES

data/themes/3d_slideshow/{index.nlt → index.erb}

@@ -2,11 +2,10 @@
 <html>
   <head>
     <meta charset="utf-8">
-	<title><%= meta.title %></title>
-    <link href='http://fonts.googleapis.com/css?family=Crimson+Text:regular,600,bold' rel='stylesheet' type='text/css'>
-    <link rel="stylesheet" href="/css/reset.css">
-    <link rel="stylesheet" href="/css/main.css">
-    <link rel="stylesheet" href="/css/colorful.css">
+    <title><%= meta.title %></title>
+    <link rel="stylesheet" href="css/reset.css">
+    <link rel="stylesheet" href="css/main.css">
+    <link rel="stylesheet" href="css/pygments/colorful.css">
   </head>
   <body>
     <div id="main">
@@ -20,6 +19,6 @@
         </section>
       <% end %>
     </div>
-    <script src="/js/slideshow.js"></script>
+    <script src="js/slideshow.js"></script>
   </body>
 </html>

data/themes/html5rocks/README

@@ -0,0 +1,2 @@
+Slides from Google (slides.html5rocks.com) cleaned up for new presentations
+https://github.com/paulgreg/blankhtml5slides

data/themes/html5rocks/css/default.css

@@ -0,0 +1,501 @@
+body {
+  font: 16px "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0px; top: 0px;
+}
+
+.presentation {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  left: 0px;
+  top: 0px;
+  display: block;
+  overflow: hidden;
+  background: #778;
+}
+
+.slides {
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  position: absolute;
+  display: none;
+  -webkit-transition: -webkit-transform 1s ease-in-out;
+  -moz-transition: -moz-transform 1s ease-in-out;
+  -o-transition: -o-transform 1s ease-in-out;
+  transition: transform 1s ease-in-out;
+}
+
+.slide {
+  display: none;
+  position: absolute;
+  overflow: hidden;
+  width: 900px;
+  height: 700px;
+  left: 50%;
+  top: 50%;
+  margin-top: -350px;
+  background-color: #eee;
+  background: -webkit-gradient(linear, left bottom, left top, from(#bbd), to(#fff));
+  background: -moz-linear-gradient(bottom, #bbd, #fff);
+  background: linear-gradient(bottom, #bbd, #fff);
+  -webkit-transition: margin 0.25s ease-in-out;
+  -moz-transition: margin 0.25s ease-in-out;
+  -o-transition: margin-left 0.25s ease-in-out;
+  transition: margin 0.25s ease-in-out;
+}
+
+.slide:nth-child(even) {
+  -moz-border-radius: 20px 0;
+  -khtml-border-radius: 20px 0;
+  border-radius: 20px 0; /* includes Opera 10.5+ */
+  -webkit-border-top-left-radius: 20px;
+  -webkit-border-bottom-right-radius: 20px;
+}
+
+.slide:nth-child(odd) {
+  -moz-border-radius: 0 20px;
+  -khtml-border-radius: 0 20px;
+  border-radius: 0 20px;
+  -webkit-border-top-right-radius: 20px;
+  -webkit-border-bottom-left-radius: 20px;
+}
+
+.slide p, .slide textarea {
+  font-size: 20px;
+}
+
+.slide .counter {
+  color: #999999;
+  position: absolute;
+  left: 20px;
+  bottom: 20px;
+  display: block;
+  font-size: 12px;
+  width: 100%;
+}
+
+.slide:not(.transitionSlide) .counter:after {
+  content: '';
+  width: 32px;
+  height: 32px;
+  background-repeat: no-repeat;
+  background-position: right bottom;
+  position: absolute;
+  bottom: 0;
+  right: 45px;
+  opacity: 0.25;
+}
+
+.slide.title > .counter,
+.slide.segue > .counter,
+.slide.mainTitle > .counter {
+  display: none;
+}
+
+.slide.transitionSlide h2 {
+  font-size: 40px;
+  margin: 0;
+  line-height: 10px;
+}
+.slide.transitionSlide p {
+  margin: 0;
+}
+
+.slide.transitionSlide img {
+  opacity: 0.25;
+  width: 64px;
+  height: 64px;
+}
+
+.vbox {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-box-align: stretch;
+
+  display: -moz-box;
+  -moz-box-orient: vertical;
+  -moz-box-align: stretch;
+
+  display: box;
+  box-orient: vertical;
+  box-align: stretch;
+}
+
+.hbox {
+  display: -webkit-box;
+  -webkit-box-orient: horizontal;
+  -webkit-box-align: stretch;
+
+  display: -moz-box;
+  -moz-box-orient: horizontal;
+  -moz-box-align: stretch;
+
+  display: box;
+  box-orient: horizontal;
+  box-align: stretch;
+}
+
+.flex {
+  -webkit-box-flex: 1;
+  -moz-box-flex: 1;
+  box-flex: 1;
+}
+
+.noflex {
+  -webkit-box-flex: 0;
+  -moz-box-flex: 0;
+  box-flex: 0;
+}
+
+.boxcenter {
+  -webkit-box-pack: center;
+  -moz-box-pack: center;
+  box-pack: center;
+}
+
+.slide.far-past {
+  display: block;
+  margin-left: -2400px;
+}
+
+.slide.past {
+  visibility: visible;
+  display: block;
+  margin-left: -1400px;
+}
+
+.slide.current {
+  visibility: visible;
+  display: block;
+  margin-left: -450px;
+}
+
+.slide.future {
+  visibility: visible;
+  display: block;
+  margin-left: 500px;
+}
+
+.slide.far-future {
+  display: block;
+  margin-left: 1500px;
+}
+
+body.three-d div.presentation {
+  /*background: -webkit-gradient(radial, 50% 50%, 10, 50% 50%, 1000, from(#333), to(#000));        */
+}
+
+body.three-d div.slides {
+  -webkit-transform: translateX(50px) scale(0.8) rotateY(10deg);
+  -moz-transform: translateX(50px) scale(0.8) rotateY(10deg);
+  -o-transform: translateX(50px) scale(0.8) rotateY(10deg);
+  transform: translateX(50px) scale(0.8) rotateY(10deg);
+}
+
+/* Content */
+/*
+  Font sizes:
+  header h1 - 50px
+  h2, p - 20px
+  default, pre, input - 16px
+*/
+
+@font-face {
+  font-family: 'JunctionRegular';
+  src: url('/src/fonts/junction02/junction02-webfont.eot');
+  src: local('☺'), url('/src/fonts/junction02/junction02-webfont.woff') format('woff'), url('/src/fonts/junction02/junction02-webfont.ttf') format('truetype'), url('/src/fonts/junction02/junction02-webfont.svg#webfontwzJOjWvv') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'LeagueGothicRegular';
+  src: url('/src/fonts/leaguegothic/leaguegothic-webfont.eot');
+  src: local('☺'), url('/src/fonts/leaguegothic/leaguegothic-webfont.woff') format('woff'), url('/src/fonts/leaguegothic/leaguegothic-webfont.ttf') format('truetype'), url('/src/fonts/leaguegothic/leaguegothic-webfont.svg#webfontWgfhmMGx') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+header {
+  font-family: 'Droid Sans';
+  font-weight: normal;
+  letter-spacing: -.05em;
+  color: black;
+  text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px;
+  position: absolute;
+  left: 30px;
+  top: 25px;
+  margin: 0;
+  padding: 0;
+  font-size: 50px;
+}
+
+h1 {
+  font-size: 100%;
+  display: inline;
+  font-weight: normal;
+  padding: 0;
+  margin: 0;
+}
+
+h2 {
+  font-family: 'Droid Sans';
+  color: black;
+  font-size: 20px;
+  padding: 0;
+  margin: 15px 0 5px 0;
+}
+      
+h2:first-child {
+  margin-top: 0;
+}
+
+section, footer {
+  font-family: 'Droid Sans';
+  color: #3f3f3f;
+  text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px;
+  margin: 100px 30px 0;
+  display: block;
+  overflow: hidden;
+}
+
+footer {
+  font-size: 12px;
+  margin: 20px 0 0 30px;
+}
+
+a {
+  color: inherit;
+  display: inline-block;
+  text-decoration: none;
+  line-height: 110%;
+  border-bottom: 2px solid #3f3f3f;
+}
+
+.gmap a {
+  line-height: 100%;
+  border-bottom: none;
+}
+
+li {
+  list-style: none;
+  padding: 10px 0;
+}
+
+button {
+  font-size: 20px;
+}
+
+pre button {
+  margin: 2px;
+}
+
+.summary {
+  font-size: 30px;
+}
+
+.bullets {
+  font-size: 40px;
+}
+
+section.left {
+  float: left;
+  width: 390px;
+}
+
+section.small {
+  font-size: 24px;
+}
+
+section.small ul {
+  margin: 0 0 0 15px;
+  padding: 0;
+}
+
+section.small li {
+  padding-bottom: 0;
+}
+
+section.middle {
+  line-height: 68px;
+  text-align: center;
+  display: table-cell;
+  vertical-align: middle;
+  height: 700px;
+  width: 900px;
+}
+
+pre {
+  text-align: left;
+  font-family: 'Droid Sans Mono', Courier;
+  padding: 10px 20px;
+  background: rgba(255, 0, 0, 0.05);
+  -webkit-border-radius: 8px;
+  -khtml-border-radius: 8px;
+  -moz-border-radius: 8px;
+  border-radius: 8px;
+  border: 1px solid rgba(255, 0, 0, 0.2);
+}
+
+pre select {
+  font-family: Monaco, Courier;
+  border: 1px solid #c61800;
+}
+  
+input {
+  font-size: 16px;
+  margin-right: 10px;
+  font-family: Helvetica;
+  padding: 3px 5px;
+}
+input[type="range"] {
+  width: 100%;
+}
+
+button {
+  font-family: Verdana;
+}
+
+button.large {
+  font-size: 32px;
+}
+  
+pre b {
+  font-weight: normal;
+  color: #c61800;
+  text-shadow: #c61800 0 0 1px;
+  /*letter-spacing: -1px;*/
+}
+pre em {
+  font-weight: normal;
+  font-style: normal;
+  color: #18a600;
+  text-shadow: #18a600 0 0 1px;
+}
+pre input[type="range"] {
+  height: 6px;
+  cursor: pointer;
+  width: auto;
+}
+
+div.example {
+  display: block;
+  padding: 10px 20px;
+  color: black;
+  background: rgba(255, 255, 255, 0.4);
+  -webkit-border-radius: 8px;
+  -khtml-border-radius: 8px;
+  -moz-border-radius: 8px;
+  border-radius: 8px;
+  margin-bottom: 10px;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+video {
+  -moz-border-radius: 8px;
+  -khtml-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  border-radius: 8px;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+.css,
+.js,
+.html,
+.key {
+  font-family: 'Droid Sans';
+  color: black;
+  display: inline-block;
+  padding: 6px 10px 3px 10px;
+  font-size: 25px;
+  line-height: 30px;
+  text-shadow: none;
+  letter-spacing: 0;
+  bottom: 10px;
+  position: relative;
+  -moz-border-radius: 10px;
+  -khtml-border-radius: 10px;
+  -webkit-border-radius: 10px;
+  border-radius: 10px;
+  background: white;
+  box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;
+  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;
+  -o-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;
+}
+
+.key { font-family: Arial; }
+
+:not(header) > .css,
+:not(header) > .js,
+:not(header) > .html,
+:not(header) > .key {
+  margin: 0 5px;
+  bottom: 4px;
+}
+
+.css {
+  background: -webkit-gradient(linear, left top, left bottom, from(#ff4), to(#ffa));
+  background-color: #ff4;
+  background: -moz-linear-gradient(left top, #ff4, #ffa);
+}
+.js {
+  background: -webkit-gradient(linear, left top, left bottom, from(#4f4), to(#afa));
+  background-color: #4f4;
+  background: -moz-linear-gradient(left top, #4f4, #afa);
+}
+.html {
+  background: -webkit-gradient(linear, left top, left bottom, from(#e88), to(#fee));
+  background-color: #e88;
+  background: -moz-linear-gradient(left top, #e88, #fee);
+}
+
+.two-column {
+  -webkit-column-count: 2;
+  -moz-column-count: 2;
+  column-count: 2;
+}
+
+.summary li::before, .bullets li::before {
+  content: '· ';
+}
+
+.stroke {
+  -webkit-text-stroke-color: red;
+  -webkit-text-stroke-width: 1px;
+} /* currently webkit-only */
+
+.center {
+  text-align: center;
+}
+
+.formula {
+  font-size: 50px;
+}
+
+#presentation-counter {
+  color: #ccc;
+  font-size: 100px;
+  letter-spacing: 1px;
+  position: absolute;
+  top: 40%;
+  left: 0;
+  width: 100%;
+  text-align: center;
+}
+
+[data-build] > * {
+  -webkit-transition: opacity 0.5s ease-in-out 0.2s; 
+  -moz-transition: opacity 0.5s ease-in-out 0.2s; 
+  -o-transition: opacity 0.5s ease-in-out 0.2s; 
+}
+
+[data-build] > *.to-build {
+  opacity: 0;
+}