trickster 0.0.4

data/README.rdoc

@@ -0,0 +1,200 @@
+= trickster
+
+Trickster is a developer's in-browser presentation software.
+
+Instead of focusing on flashy transitions, it focuses to encourage making a good presentation that looks good on the big screen.  As such, each slide is dynamically sized to be as big as possible.  Code slides have syntax highlighting, and you can call out lines of interest very easily, as well as create animated command-line slides.
+
+It does this by compiling your presentation into an HTML file that, when loaded, will execute the Trickster
+JavaScript, which will dynamically resize each slide to the biggest it can be based on the browser's current size.
+
+== Presentation Format
+
+Your presentation is stored in text file.  Each slide has the following format:
+
+    !<slide_type>: options
+    <content>
+    <content>
+    <content>
+
+Where <tt>slide_type</tt> is one of the types listed below.  <tt>options</tt> is a space-delimited key/value string of options.  <tt>content</tt> is the content of the slide, interpreted based on the slide type.
+
+=== Example:
+
+    !TITLE: background=262626
+    Welcome to my presentation!
+    It's going to be awesome!
+
+    !CODE
+    def some_method(x)
+      if x.nil?
+        return "foo"
+      else
+        return x.upcase
+      end
+    end
+
+    !BULLETS
+    Check these bullets out!
+    * This slide
+    * is great!
+    * and will be huge!
+
+This defines three slides, the first of which is a TITLE with a custom background, the second of which is code, and the third of which is bullets.  When you play the presentation, each bullet is revealed one at a time.
+
+Also note that each slide will be in a +section+ tag, with the CSS class of its type.  This allows you to control styling per slide type.
+== options
+
+background:: although you can customize each slide based on its CSS class, this option allows you to customize the background of this particular slide.  This is useful for IMAGE slides where you might want to better match the image's colors
+transition:: number of milliseconds to transition to the *next* slide.  The default is in the config object, but this can override it per slide.
+
+== Slide Types
+
+== BULLETS
+The first line is the "title" if this slide, rendered in an +H1+.  The remaining are bullets.  If a bullet line is preceded with a <tt>*</tt>, <tt>-</tt>, or <tt>+</tt>, that bullet character is omitted automatically.
+
+== IMAGE
+The first line is the url to the image to show.
+
+== CODE
+
+If the first line starts with <tt>file://</tt>, the contents of this file is read in as the contents of the code block.  Otherwise, the entire contents of the slide is verbatim put into a +pre+ and then +code+ block.  Syntax highlighting is done using a modified version of +highlight.js+.  This modification demarcates each line of the code, and allows you to show line numbers and callout particular lines.
+
+=== Language
+
+By default, no language is specified for highlighting, so +highlight.js+ will make a guess.  If you'd like to be explicit, use the +language+ option, e.g.
+
+    !CODE language=scala
+    def doit(x:String) = {
+      "foo"
+    }
+
+=== Callouts
+
+A code slide accepts an option of +callout+ which is a comma-delimited list of the lines of code to "call out" with special styling.  This is useful if you are talking about particular lines, or are demonstrating new lines having been added to a previous example.
+
+Further, if the line number is preceded with a dash (e.g. <tt>-3</tt>), that line will be styled for strikethrough, in addition to being highlighed.  This is useful to show lines of code that are going to be deleted based on whatever you are talking about.
+
+== COMMANDLINE
+
+This slide is for showing command-line invocations and results. It is assumed to start with a CLI invocation and that such invocations are followed by results, that can be many lines.  When you present the slideshow, the command will be output in a "typewriter" style, after which the result will be shown automatically, with each command acting like a "bullet" to be revealed.
+
+=== Example
+
+    !COMMANDLINE
+    > ls -l
+    -rw-r--r--  1 davec  staff     25 Aug 25 14:49 Gemfile
+    -rw-r--r--  1 davec  staff   1563 Sep  9 16:11 Gemfile.lock
+    -rw-r--r--  1 davec  staff   4136 Sep 10 18:54 README.rdoc
+    drwxr-xr-x  3 davec  staff    102 Sep 10 18:50 tmp
+    > vim Gemfile
+    editing Gemfile
+
+Prompts can be <tt>></tt>, <tt>%</tt>, and <tt>#</tt>.
+
+=== Any other type
+
+These slides take the first three lines of content and display them in an +H1+, +H2+, and +H3+, respectively.  All other lines are ignored.
+
+== Customizations/Styling
+
+You have two points of customization: +custom.js+, which is loaded *after* all the other JS, but before the +load+ event.  This is where you can override Trickster's configuration if you like (e.g. for default transition time).
+
+The second, and more useful, point of customization is +styles.css+ or +styles.scss+.  This is loaded in your presentation and is where you can customize the look and feel of your slideshow.  If you create a <tt>.scss</tt> file, trickster will run SASS on it to convert it to CSS, so you have the full awesome power of SASS available.
+
+=== Styling Recommendations
+
+* Prefer 'em' over explicit sizes, as this will aloww your sizing choices to work at any size (remember that Trickster tries to fit your content to the screen)
+* The <tt>BODY</tt> element will be given the class of the currently-displayed slide, so if you want to, for example, change the background color of a slide based on its type, apply styles to <tt>body.SLIDE_TYPE</tt> and not <tt>section.SLIDE_TYPE</tt>
+* The syntax highlighting is woefully tied to Solarized Light.  Since we are using a patched version of highlight.js that shows line numbers and calls out lines, I had to patch the syntax CSS file to show those highlights.  I've currently only done so for Solarized Light, and this style is hard-coded in the generated HTML file, anway.  Sorry.  Feel free to improve this for me and I'll commit the patch.
+
+== Delivering the Presentation
+
+Simply open `index.html` in your browser.  Your browser should be Safari or Chrome.
+
+Every time you reload, the presentation will be dynamically sized to the size of the browser, so you should configure your browser and monitor to the size of your presentation, then reload.
+
+Occasionally, Trickster will size the slides too larger or too small.  In that case, you can use "-" and "+" to resize the slides on the fly.  If you reload, the sizes will be reset.
+
+=== Keyboard Commands
+
+advance:: "j", space-bar, right-arrow, or the advance button on the Kensington Wireless Presenter.
+back:: "k", backspace, left-arrow, or the back button the Kensington Wireless Presenter.
+restart:: down/stop button on the Kensington Wireless Presenter.
+increase font-size:: "+" or "=" (font-size will be reset if you reload the page)
+decrease font-size:: "-" (font-size will be reset if you reload the page)
+
+== Tips
+
+Trickster discourages verbose slides with lots of text or lots of bullets. This is because these are aspects of terrible presentations.  Instead, create many more slides with fewer amounts of text.
+
+= CLI
+
+== trickster - Bootstrap, generate, and manage your trickster presentation
+
+v0.0.4
+
+=== Global Options
+=== --help
+Show this message
+
+
+
+
+=== --version
+
+
+
+
+
+=== Commands
+==== build [slides_file]
+Generate the presentation from your slides
+
+
+Given your slides_file (defaults to 'slides' in current directory), generates an HTML
+file (based on --output-file) that, when loaded, can be used to play your presentation.
+
+Any .scss files found in the css/ directory will be run through SASS to be converted.
+
+Note that currently, the CSS and JS files included are fixed, so keep all your customizations
+to styles.css/styles.scss and custom.js (these files will not be overwritten when
+you do a trickster update).
+===== Options
+===== -o file
+
+Name of the generated HTML file
+
+[Aliases] --output-file
+[Default Value] index.html
+
+
+==== help command
+Shows a list of commands or help for one command
+
+
+Gets help for the application or its commands. Can also list the commands in a way helpful to creating a bash-style completion function
+==== init dir_name
+Create a new trickster presentation
+
+
+This will create a completely self-contained presentation that can be run just from the files
+in the directory you name.  It will have a static copy of the JavaScript files, JavaScript third-party
+libraries and CSS files you need to run your trickster application.
+
+You can examine the file `slides` to see some examples of how to format your
+presentation.  You can run `trickster build` in the directory to create the HTML
+file from your slides.
+
+Note that if you upgrade trickster, you should run `tricksterd update` in your slide directory
+to get the latest JavaScript and CSS files.
+==== update [dir_name]
+Update an existing slideshow with the latest Trickster JS/CSS files
+
+
+Run this after you've upgraded trickster and want to get the latest features.  Since your 
+slideshow is entirely self-contained, when you upgrade tricksterd, your static JavaScript and
+CSS files will be out of date.
+
+Note that `styles.css`, which was provided by trickster as a basis for styling, will not
+be touched, and your customizations will remain. All other files that trickster gave you
+when you ran `trickster init` will be overwritten.

data/bin/trickster

@@ -0,0 +1,134 @@
+#!/usr/bin/env ruby
+
+require 'gli'
+require 'trickster'
+require 'erb'
+require 'fileutils'
+
+include GLI::App
+
+program_desc 'Bootstrap, generate, and manage your trickster presentation'
+
+version Trickster::VERSION
+
+desc 'Create a new trickster presentation'
+long_desc <<EOS
+This will create a completely self-contained presentation that can be run just from the files
+in the directory you name.  It will have a static copy of the JavaScript files, JavaScript third-party
+libraries and CSS files you need to run your trickster application.
+
+You can examine the file `slides` to see some examples of how to format your
+presentation.  You can run `trickster build` in the directory to create the HTML
+file from your slides.
+
+Note that if you upgrade trickster, you should run `tricksterd update` in your slide directory
+to get the latest JavaScript and CSS files.
+EOS
+arg_name 'dir_name'
+command :init do |c|
+  c.action do |global_options,options,args|
+    dir = args.shift
+    FileUtils.mkdir(dir)
+    File.open(File.join(dir,'slides'),'w') do |file|
+      file.puts <<EOF
+Title of your slideshow
+!TITLE
+Title of your slideshow
+Subtitle
+Sub-sub title
+
+!SECTION: background=dddddd
+A section
+
+!BULLETS
+A bullet list
+* can use any
+- reasonable
++ bullet
+
+!CODE: callout=3,4,5
+class YourCode
+
+  def initialize(will)
+    @be_highlighted
+  end
+
+end
+EOF
+      base = File.expand_path(File.join(File.dirname(__FILE__),'..'))
+
+      copier = Trickster::FileCopier.new(base,dir)
+      copier.copy_files('js','js')
+      copier.copy_files('js/lib','js')
+      copier.copy_files('css','css')
+
+      puts "Your slideshow is ready, run trickster build to build it"
+    end
+  end
+end
+
+desc 'Update an existing slideshow with the latest Trickster JS/CSS files'
+long_desc <<EOS
+Run this after you've upgraded trickster and want to get the latest features.  Since your 
+slideshow is entirely self-contained, when you upgrade tricksterd, your static JavaScript and
+CSS files will be out of date.
+
+Note that `styles.css`, which was provided by trickster as a basis for styling, will not
+be touched, and your customizations will remain. All other files that trickster gave you
+when you ran `trickster init` will be overwritten.
+EOS
+arg_name '[dir_name]'
+command :update do |c|
+  c.action do |global_options,options,args|
+    dir = args.shift
+    dir = '.' if dir.nil?
+    base = File.expand_path(File.join(File.dirname(__FILE__),'..'))
+
+    copier = Trickster::FileCopier.new(base,dir)
+    copier.copy_files('js','js', :except => "custom.js")
+    copier.copy_files('js/lib','js')
+    copier.copy_files('css','css', :except => "styles.css")
+  end
+end
+
+desc 'Generate the presentation from your slides'
+arg_name '[slides_file]'
+long_desc <<EOS
+Given your slides_file (defaults to 'slides' in current directory), generates an HTML
+file (based on --output-file) that, when loaded, can be used to play your presentation.
+
+Any .scss files found in the css/ directory will be run through SASS to be converted.
+
+Note that currently, the CSS and JS files included are fixed, so keep all your customizations
+to styles.css/styles.scss and custom.js (these files will not be overwritten when
+you do a trickster update).
+EOS
+command :build do |c|
+  c.desc          'Name of the generated HTML file'
+  c.arg_name      'file'
+  c.default_value 'index.html'
+  c.flag          [:o,'output-file']
+
+  c.action do |global_options,options,args|
+    file    = File.open(args.shift || 'slides')
+    css_dir = File.join(File.dirname(file),'css')
+    lines   = file.readlines.map(&:chomp)
+    parser  = Trickster::SlideParser.new(lines,Trickster::SlideRenderer.new)
+    body    = parser.body
+    title   = parser.title
+
+    erb = ERB.new(File.new(File.expand_path(File.join(File.dirname(__FILE__),'..','erb','index.html.erb'))).readlines.join(""))
+    File.open(options[:'output-file'],"w") do |file|
+      file.puts erb.result(binding)
+    end
+    Dir["#{css_dir}/*.scss"].each do |sass_file|
+      css_file = sass_file.gsub(/\.scss$/,'.css')
+      command = "sass #{sass_file} #{css_file}"
+      unless system(command)
+        STDERR.puts "Problem running '#{command}'"
+      end
+    end
+  end
+end
+
+exit run(ARGV)

data/css/highlight-solarized_light.min.css

@@ -0,0 +1,37 @@
+pre code{display:block;padding:.5em;background:#fdf6e3;color:#657b83}pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc{color:#93a1a1;font-style:italic}pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#859900}pre .number,pre .command,pre .string,pre .tag .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#2aa198}pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id{color:#268bd2}pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#b58900}pre .preprocessor,pre .preprocessor .keyword,pre .shebang,pre .symbol,pre .symbol .string,pre .diff .change,pre .special,pre .attr_selector,pre .important,pre .subst,pre .cdata,pre .clojure .title{color:#cb4b16}pre .deletion{color:#dc322f}pre .tex .formula{background:#eee8d5}
+pre {
+  counter-reset: lines;
+}
+pre .line {
+  counter-increment: lines;
+}
+pre .line::before {
+  content: counter(lines); text-align: right;
+  display: inline-block; width: 2em;
+  padding-right: 0.5em; margin-right: 0.5em;
+  color: #eee8d5;
+}
+
+pre .line-callout::before {
+  content: '\2192'; text-align: right;
+  display: inline-block; width: 2em;
+  padding-right: 0.5em; margin-right: 0.5em;
+  color: #002b36;
+}
+
+.lines-callout {
+  border-radius: 0.25em;
+  padding-top: 0.15em;
+  padding-bottom: 0.15em;
+}
+
+.lines-callout {
+  padding-top: 0.1em;
+  padding-bottom: 0.1em;
+  /*
+  border-radius: 0.25em;
+  border: solid 0.05em #073642;
+  box-shadow: 0 0.3em 0.2em -0.2em #002b36;
+  */
+  background: #eee8d5;
+}