black 0.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 99eecfa085e6ccf657becb02d58d2f9f212681ee
+  data.tar.gz: 8a6ee0cfd842e8ea2ec590a8216fca0392d389eb
+SHA512:
+  metadata.gz: a5403f9ffed1ee25bc0da3cc94359bc336b5a8b936ec10b32392662c8b40044896d623753dd8727603b73728abe86f6cce8645c3667fa83cacc803b079a267ae
+  data.tar.gz: d5c9c561ac12a0d2e2913d2e908960bf849b1e8de0d1330d01e2e53b8f70a72f6cce6992b3fec0c6535fb0f30475e7890a64871cf661798e1bab2511009fd7a0

data/Gemfile

@@ -0,0 +1,2 @@
+source "https://rubygems.org"
+gemspec

data/README.md

@@ -0,0 +1,74 @@
+## Black
+
+Black parses diff output from `diff` and `git diff` and provides an enumerable ruby interface for lines and metadata.
+
+Black uses this diff interface to render a syntax-highlighted diff view in HTML.
+
+## Status
+
+Black isn't documented yet.
+
+I'm getting this out for those who are compfortable diving into the source and getting some initial value from it.
+
+Consider this a work in progress.
+
+## Usage
+
+```ruby
+diff = Black::Diff.new('older string', 'newer string', 'file-name.html')
+output = Black::HTMLView.render(diff: diff)
+```
+
+The filename determines how the content will be highlighted.
+
+The output is HTML only. To output the css:
+
+```ruby
+css = Black::Stylesheets.css({ style: :compressed })
+```
+
+Black uses sass, so all options are passed right into sass options. Have a look at `Black::Stylesheets` for more info.
+
+## Version
+
+**0.0.1** - Please consider the API alpha and unstable.
+
+Black adheres to [Semantic Versioning](http://semver.org/)
+
+## Dependencies
+
+1. [rouge](https://github.com/jneen/rouge) for syntax highlighting
+1. [sass](http://sass-lang.com/) for stylesheet management
+
+
+## Rubies
+
+Tested with ruby 1.9.3+
+
+ruby 1.8.x not supported
+
+## Platforms
+
+This only supports unix-based systems at the moment.
+
+But the shell execution is wrapped like so:
+
+```ruby
+# Black::Diff.execute()
+def self.execute(*command_args)
+  `diff #{ command_args.join(' ') }`
+end
+```
+
+So you can reimplement this method to suit your own platform needs:
+```ruby
+class Black::Diff
+  def self.execute(*command_args)
+    # do some custom stuff
+  end
+end
+```
+
+## License 
+
+[MIT](http://www.opensource.org/licenses/mit-license.html)

data/Rakefile

@@ -0,0 +1,23 @@
+$LOAD_PATH.unshift(File.join(File.dirname(__FILE__), *%w[lib]))
+require 'rubygems'
+require 'rake'
+require 'bundler'
+require 'black/version'
+
+name = Dir['*.gemspec'].first.split('.').first
+gemspec_file = "#{name}.gemspec"
+gem_file = "#{name}-#{ Black::VERSION }.gem"
+
+task :release => :build do
+  sh "git commit --allow-empty -m 'Release #{Black::VERSION}'"
+  sh "git tag v#{Black::VERSION}"
+  sh "git push origin master --tags"
+  sh "git push origin v#{Black::VERSION}"
+  sh "gem push pkg/#{name}-#{Black::VERSION}.gem"
+end
+
+task :build do
+  sh "mkdir -p pkg"
+  sh "gem build #{ gemspec_file }"
+  sh "mv #{ gem_file } pkg"
+end

data/black.gemspec

@@ -0,0 +1,23 @@
+$LOAD_PATH.unshift 'lib'
+require 'black/version'
+
+Gem::Specification.new do |s|
+  s.name              = "black"
+  s.version           = Black::Version
+  s.date              = Time.now.strftime('%Y-%m-%d')
+  s.license           = "http://www.opensource.org/licenses/MIT"
+  s.summary           = 'Black parses diff output to render a syntax-highlighted diff view in HTML'
+  s.homepage          = "https://github.com/plusjade/black"
+  s.email             = "plusjade@gmail.com"
+  s.authors           = ['Jade Dominguez']
+  s.description       = 'Black parses diff output to render a syntax-highlighted diff view in HTML'
+
+  s.add_dependency 'rouge', "~> 1"
+  s.add_dependency 'sass', "~> 3"
+
+  s.files = `git ls-files`.
+              split("\n").
+              sort.
+              reject { |file| file =~ /^(\.|rdoc|pkg|coverage)/ }
+end
+

data/lib/black.rb

@@ -0,0 +1,13 @@
+# encoding: UTF-8
+Encoding.default_internal = 'UTF-8'
+
+require 'fileutils'
+
+module Black
+  Root = File.expand_path(File.join(File.dirname(__FILE__), '..'))
+  def self.root ; Root ; end
+end
+
+FileUtils.cd(path = File.join(File.dirname(__FILE__), 'black')) do
+  Dir[File.join('**', '*.rb')].each { |f| require File.join(path, f) }
+end

data/lib/black/diff.rb

@@ -0,0 +1,137 @@
+module Black
+  class Diff
+    # wrapper to execute `diff` in the shell.
+    # Reimplement this to suit your own platform needs
+    def self.execute(*command_args)
+      `diff #{ command_args.join(' ') }`
+    end
+
+    include Enumerable
+
+    attr_reader :older, :newer, :filename
+
+    def initialize(older, newer, filename=nil)
+      @older = older
+      @newer = newer
+      @filename = filename
+    end
+
+    def each
+      if block_given?
+        diff_parsed.each do |line|
+          yield line
+        end
+      else
+        diff_parsed.enum_for(:each) 
+      end
+    end
+
+    # diff two strings using unix 'diff' command
+    def execute
+      files = [Tempfile.new('black'), Tempfile.new('black')]
+      files.first.write(@older)
+      files.last.write(@newer)
+      files.each { |a| a.read }
+
+      args = [files.first.path, files.last.path] + OutputParser.diff_options
+
+      Diff.execute(args)
+    ensure
+      files.each do |file|
+        if file && File.exist?(file.path)
+          file.close
+          file.unlink
+        end
+      end
+    end
+
+    def diff_parsed
+      OutputParser.parse(execute.enum_for(:lines))
+    end
+
+    module OutputParser
+      # `diff` command arguments to format the output
+      def self.diff_options
+        %w(-u)
+      end
+
+      # Parse the diff output
+      def self.parse(diff_enumerator)
+        Enumerator.new do |y|
+          index = 0
+          old_line_number = 1
+          new_line_number = 1
+
+          diff_enumerator.each do |line|
+            type = identify_type(line)
+            next if type == 'file-header'
+
+            if type == "metadata"
+              old_line_number = line.match(/\-[0-9]*/)[0].to_i.abs rescue 0
+              new_line_number = line.match(/\+[0-9]*/)[0].to_i.abs rescue 0
+            end
+
+            d = {
+              "type" => type,
+              "index" => index,
+              "old_line_number" => old_line_number,
+              "new_line_number" => new_line_number,
+              "content" => line
+            }
+
+            y.yield Line.new(d)
+
+            index += 1
+            new_line_number += 1 if %w(addition unchanged).include?(type)
+            old_line_number += 1 if %w(deletion unchanged).include?(type)
+          end
+        end
+      end
+
+      def self.identify_type(line)
+        if line.start_with?('---', '+++')
+          "file-header"
+        elsif line[0] == "+"
+          "addition"
+        elsif line[0] == "-"
+          "deletion"
+        elsif line.match(/^@@ -/)
+          "metadata"
+        else
+          "unchanged"
+        end
+      end
+    end
+
+    # Nicer line API for views
+    class Line
+      def initialize(line)
+        @line = line
+      end
+
+      def changed?
+        ['addition', 'deletion'].include? @line['type']
+      end
+
+      def deletion?
+        type == 'deletion'
+      end
+
+      def content
+        @content ||= @line['content'].slice(/^.{1}/, @line['content'].length)
+      end
+
+      def type
+        @line['type']
+      end
+
+      def new_line_number
+        type == 'deletion' ? nil : @line['new_line_number']
+      end
+
+      def old_line_number
+        type == 'addition' ? nil : @line['old_line_number']
+      end
+    end
+  end
+end

data/lib/black/git.rb

@@ -0,0 +1,134 @@
+require './diff'
+
+module Black
+  module Git
+    # wrapper to execute git in the shell.
+    # Reimplement this to suit your own platform needs
+    def self.execute(path, *command_args)
+      FileUtils.cd(path) do
+        return `git #{ command_args.join(' ') } --no-color`
+      end
+    end
+
+    class Repository
+      def initialize(path)
+        unless File.directory?(path)
+          raise "#{ path } is not a valid directory"
+        end
+
+        @path = path
+      end
+
+      def commits
+        Enumerator.new do |y|
+          commits_dict.each_key do |index|
+            y.yield commit_at(index)
+          end
+        end
+      end
+
+      # Return a diff object for each file in the given commit
+      def commit_at(index_or_sha)
+        if index_or_sha.is_a?(Integer)
+          index = index_or_sha
+          sha = commits_dict[index_or_sha]
+        else
+          index = commits_dict.key(index_or_sha)
+          sha = index_or_sha
+        end
+        sha_prev = commits_dict[index-1]
+        output = diff_output(sha)
+
+        commands = %w(diff-tree --no-commit-id --name-status -r)
+        commands.push('--root') if index.zero?
+        commands.push(sha)
+
+        Black::Git
+          .execute(@path, commands)
+          .lines
+          .map
+          .with_index do |line, i|
+            status, filename = line.split(/\s+/)
+            status = status.chomp
+            filename = filename.chomp
+
+            Black::Git::Diff.new(@path, sha, sha_prev, output[i], filename, status)
+          end
+      end
+
+      # Store a lookup dictionary for all commits
+      def commits_dict
+        return @commits_dict if @commits_dict
+
+        @commits_dict = {}
+        Black::Git
+          .execute(@path, %w(rev-list HEAD --reverse))
+          .each_line
+          .with_index{ |a, i| @commits_dict[i] = a.chomp }
+
+        @commits_dict
+      end
+
+      # Get diff output on all files in each commit rather than one file at a time.
+      def diff_output(sha)
+        output = []
+        marker = 0
+
+        Black::Git
+          .execute(@path, %w(show --format='%b' --no-prefix -U1000).push(sha))
+          .each_line do |line|
+            if line.start_with?('diff --git')
+              marker += 1
+            else
+              if output[marker]
+                output[marker] += line
+              else
+                output[marker] = line
+              end
+            end
+          end
+
+        # there are two empty lines at the top of the git show output
+        output.shift
+        output
+      end
+    end
+
+    class Diff
+      include Enumerable
+
+      attr_reader :older, :newer, :filename, :status
+
+      def initialize(path, sha, sha_previous, diff_output, filename, status)
+        @path = path
+        @sha = sha
+        @sha_previous = sha_previous
+        @diff_output = diff_output
+        @filename = filename
+        @status = status
+      end
+
+      def each
+        if block_given?
+          diff_parsed.each do |line|
+            yield line
+          end
+        else
+          diff_parsed.enum_for(:each) 
+        end
+      end
+
+      def newer
+        @newer ||= Black::Git.execute(@path, "show", "#{ @sha }:#{ @filename }")
+      end
+
+      def older
+        @older ||= Black::Git.execute(@path, "show", "#{ @sha_prev }:#{ @filename }")
+      end
+
+      def diff_parsed
+        Black::Diff::OutputParser.parse(@diff_output.enum_for(:lines))
+      end
+    end
+  end
+end

data/lib/black/html_view.rb

@@ -0,0 +1,68 @@
+require 'erb'
+require 'rouge'
+
+module Black
+  module HTMLView
+    DefaultData = {
+      template_path: File.join(::Black.root, 'lib/black/templates/diff.html.erb'),
+    }
+
+    def self.render(data={})
+      data = DefaultData.merge(data)
+      context = Context.new(data)
+      template = File.read(data[:template_path])
+      ERB.new(template).result(context.get_binding)
+    end
+
+    class Context
+      def initialize(data)
+        data.each do |name, value|
+          self.class.class_eval do
+            define_method(name) { value }
+          end
+        end
+      end
+
+      # return syntax-highlighted version of the line
+      def highlight(line)
+        line.deletion? ?
+          older[line.old_line_number-1] :
+          newer[line.new_line_number-1]
+      end
+
+      def content
+        @content ||= rogueify(diff.newer)
+      end
+
+
+      def get_binding
+        binding
+      end
+
+      private
+
+      # The source needs to be syntax-highlighted as a whole because it
+      # can have multiple syntax types e.g. index.html contains HTML/CSS/JS.
+      # highlighting lines one-by-one misses the context and doesn't work.
+      #
+      # Both older and newer sources are highlighted. The diffed line in question
+      # then references its old/new line number to grab the correct syntax-highlighted line.
+
+      # Collection of syntax-highlighted lines from older source
+      def older
+        @older ||= rogueify(diff.older).lines.to_a
+      end
+
+      # Collection of syntax-highlighted lines from newer source
+      def newer
+        @newer ||= rogueify(diff.newer).lines.to_a
+      end
+
+      def rogueify(source)
+        lexer = Rouge::Lexer.guess({ filename: diff.filename, source: source })
+        formatter = Rouge::Formatters::HTML.new(wrap: false)
+        formatter.format(lexer.new.lex(source))
+      end
+    end
+  end
+end

data/lib/black/preview.rb

@@ -0,0 +1,52 @@
+require 'erb'
+
+module Black
+  # rack compatable preview generator
+  # Usage:
+  # Create a new rack application 
+  # in config.ru:
+  #   require 'rack'
+  #   require 'black'
+  #
+  #   diff = Black::Diff.new('older string', 'newer string', 'file-name.html')
+  #   content = Black::HTMLView.render(diff: diff)
+  #   run Black::Preview.new(content)
+  # Then run the rack app:
+  # $ rackup config.ru
+  class Preview
+    Template = <<-TEXT
+    <!doctype html>
+    <html>
+    <head>
+      <style>
+        html, body { margin: 0; padding: 0; }
+        <%= css %>
+      </style>
+    </head>
+    <body>
+      <%= content %>
+    </body>
+    </html>
+    TEXT
+
+    def initialize(content, css=nil)
+      @css = css
+      @content = content
+    end
+
+    def call(env)
+      @css ||= Black::Stylesheets.css({ style: :compressed })
+
+      context = Context.new(@content, @css)
+      output = ::ERB.new(Template).result(context.get_binding)
+
+      [200, {'Content-Type' => 'text/html'}, [output]]
+    end
+
+    class Context < Struct.new(:content, :css)
+      def get_binding
+        binding
+      end
+    end
+  end
+end

data/lib/black/stylesheets.rb

@@ -0,0 +1,35 @@
+require 'sass'
+
+module Black
+  module Stylesheets
+    SyntaxStylesheet = File.join(::Black.root, 'lib/black/templates/stylesheets/syntax.css.scss')
+    DiffStylesheet = File.join(::Black.root, 'lib/black/templates/stylesheets/diff.css.scss')
+    DefaultOptions = {
+      syntax: :scss
+    }
+
+    def self.css(options={})
+      template = File.open(DiffStylesheet).read
+      template += File.open(SyntaxStylesheet).read
+
+      render(template, options)
+    end
+
+    def self.syntax(options={})
+      template = File.open(SyntaxStylesheet).read
+      render(template, options)
+    end
+
+    def self.diff(options={})
+      template = File.open(SyntaxStylesheet).read
+      render(template, options)
+    end
+
+    private
+
+    def self.render(template, options={})
+      engine = Sass::Engine.new(template, DefaultOptions.merge(options))
+      engine.render
+    end
+  end
+end

data/lib/black/templates/diff.html.erb

@@ -0,0 +1,22 @@
+<div class="diff-file">
+  <div class="diff-header">
+    <strong><%= diff.filename %></strong>
+  </div>
+  <div class="diff-content">
+    <table class="text-file">
+    <%  diff.each do |line| %>
+      <% next if line.type == 'metadata' %>
+      <tr class="line_holder <%= line.type %>">
+        <td class="old_line" data-lnum="<%= line.old_line_number %>"></td>
+        <td class="new_line" data-lnum="<%= line.new_line_number %>"></td>
+        <td class="line_content">
+        <% if line.changed? %>
+          <i class="state"></i>
+        <% end %>
+          <pre class="highlight"><code><%= highlight(line) %></code></pre>
+        </td>
+      </tr>
+    <% end %>
+    </table>
+  </div>
+</div>

data/lib/black/templates/stylesheets/diff.css.scss

@@ -0,0 +1,432 @@
+// Lifted from: https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/stylesheets/sections/diff.scss
+// Contains edits.
+$monospace_font : 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
+$boder-color: #212121;
+$deleted : red; // not used
+$added : green; // not used
+$old-background-color: #FDD;
+$new-background-color: #CFD;
+$code-holder-background-color: #212121;
+$dark-bg-color: #212121;
+$lighter-bg-color: #272822;
+
+.diff-file {
+  margin-bottom: 1em;
+  position: relative;
+  textarea.file-content {
+    display: none;
+    width: 99%;
+    height: 95%;
+    max-height: 500px;
+    position: absolute;
+    top: 30px;
+    background-color: #333;
+    color: #ccc;
+    font-family: $monospace_font;
+    border:1px solid #000;
+  }
+
+  .diff-header {
+    position: relative;
+    padding: 5px 10px;
+    color: #9e9e9e;
+    background-color: $dark-bg-color;
+    > strong {
+      font-family: $monospace_font;
+      font-weight: normal;
+    }
+    .diff-btn-group {
+      float: right;
+
+      .btn {
+        background-color: #EEE;
+        color: #666;
+        font-weight: bolder;
+      }
+    }
+
+    .commit-short-id {
+      font-family: $monospace_font;
+      font-size: smaller;
+    }
+
+    .file-mode {
+      font-family: $monospace_font;
+    }
+  }
+
+  .diff-content {
+    border: 1px solid $boder-color;
+    border-top: 0;
+    overflow: auto;
+    overflow-y: hidden;
+    background: #212121;
+    color: #616161;
+    font-size: 14px;
+    .old {
+      span.idiff {
+        background-color: #FAA;
+      }
+    }
+    .new {
+      span.idiff {
+        background-color: #AFA;
+      }
+    }
+
+    table {
+      width: 100%;
+      font-family: $monospace_font;
+      border: none;
+      margin: 0px;
+      padding: 0px;
+      border-collapse: collapse;
+      tr {
+        td {
+          line-height: 20px;
+          font-size: 14px;
+          background-color: $code-holder-background-color;
+          pre {
+            background-color: $code-holder-background-color;
+          }
+        }
+        &.context {
+          td {
+            //opacity: 0.8;
+          }
+        }
+        &.addition {
+          td {
+            background-color: rgba(0, 200, 83, 0.09);
+            pre {
+              background-color: transparent;
+            }
+            i.state:before {
+              font-style: normal;
+              content: "+";
+              color: #4CAF50;
+            }
+          }
+        }
+        &.deletion {
+          td {
+            background-color: rgba(244, 67, 54, 0.09);
+            pre {
+              background-color: transparent;
+            }
+            i:before {
+              font-style: normal;
+              content: "-";
+              color: #F44336;
+            }
+          }
+        }
+        &:hover {
+          td {
+            background-color: rgba(255, 255, 255, 0.02);
+            pre {
+              background-color: rgba(255, 255, 255, 0.02);
+            }
+          }
+        }
+      }
+    }
+
+    .text-file-parallel div {
+      display: inline-block;
+      padding-bottom: 16px;
+    }
+    .diff-side {
+      overflow-x: scroll;
+      width: 508px;
+      height: 700px;
+    }
+    .diff-side.diff-side-left{
+      overflow-y:hidden;
+    }
+    .diff-side table, td.diff-middle table {
+      height: 700px;
+    }
+    .diff-middle {
+      width: 114px;
+      vertical-align: top;
+      height: 700px;
+      overflow: hidden
+    }
+    .old_line:before, .new_line:before {
+      content: attr(data-lnum);
+    }
+    .old_line, .new_line, .diff_line {
+      margin: 0px;
+      padding: 0px;
+      border: none;
+      padding: 0px 5px;
+      border-right: 1px solid #212121;
+      color: #505050;
+      //background-color: #212121;
+      text-align: right;
+      min-width: 35px;
+      max-width: 50px;
+      width: 35px;
+      font-family: Consolas, "Liberation Mono", Courier, monospace;
+      a {
+        float: left;
+        width: 35px;
+        font-weight: normal;
+        color: #666;
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+      &.new {
+        //background: $new-background-color;
+        color: green;
+      }
+      &.old {
+        background: $old-background-color;
+      }
+    }
+    .diff_line {
+      padding: 0;
+    }
+    .line_holder {
+      &.old .old_line,
+      &.old .new_line {
+        background: #FCC;
+        border-color: #E7BABA;
+      }
+      &.new .old_line,
+      &.new .new_line {
+        background: #CFC;
+        border-color: #B9ECB9;
+      }
+    }
+    .line_content {
+      display: block;
+      position: relative;
+      height: 20px;
+      margin: 0px;
+      padding: 0px;
+      border: none;
+      .state {
+        position: absolute;
+        left: 10px;
+        top: 0;
+      }
+      pre {
+        padding: 0px 30px;
+        margin: 0;
+      }
+      &.new {
+        color: green;
+      }
+      &.old {
+        background: $old-background-color;
+      }
+      &.matched {
+        color: #ccc;
+        background: #fafafa;
+      }
+      &.parallel {
+        display: table-cell;
+      }
+    }
+  }
+
+  .image {
+    background: #ddd;
+    text-align: center;
+    padding: 30px;
+    .wrap{
+      display: inline-block;
+    }
+
+    .frame {
+      display: inline-block;
+      background-color: #fff;
+      line-height: 0;
+      img{
+        border: 1px solid #FFF;
+        background: image-url('trans_bg.gif');
+        max-width: 100%;
+      }
+      &.deleted {
+        border: 1px solid $deleted;
+      }
+
+      &.added {
+        border: 1px solid $added;
+      }
+    }
+    .image-info{
+      font-size: 12px;
+      margin: 5px 0 0 0;
+      color: grey;
+    }
+
+    .view.swipe{
+      position: relative;
+
+      .swipe-frame{
+        display: block;
+        margin: auto;
+        position: relative;
+      }
+      .swipe-wrap{
+        overflow: hidden;
+        border-left: 1px solid #999;
+        position: absolute;
+        display: block;
+        top: 13px;
+        right: 7px;
+      }
+      .frame{
+        top: 0;
+        right: 0;
+        position: absolute;
+        &.deleted{
+          margin: 0;
+          display: block;
+          top: 13px;
+          right: 7px;
+        }
+      }
+      .swipe-bar{
+        display: block;
+        height: 100%;
+        width: 15px;
+        z-index: 100;
+        position: absolute;
+        cursor: pointer;
+        &:hover{
+          .top-handle{
+            background-position: -15px 3px;
+          }
+          .bottom-handle{
+            background-position: -15px -11px;
+          }
+        };
+        .top-handle{
+          display: block;
+          height: 14px;
+          width: 15px;
+          position: absolute;
+          top: 0px;
+          background: image-url('swipemode_sprites.gif') 0 3px no-repeat;
+        }
+        .bottom-handle{
+          display: block;
+          height: 14px;
+          width: 15px;
+          position: absolute;
+          bottom: 0px;
+          background: image-url('swipemode_sprites.gif') 0 -11px no-repeat;
+        }
+      }
+    } //.view.swipe
+    .view.onion-skin{
+      .onion-skin-frame{
+        display: block;
+        margin: auto;
+        position: relative;
+      }
+      .frame.added, .frame.deleted {
+        position: absolute;
+        display: block;
+        top: 0px;
+        left: 0px;
+      }
+      .controls{
+        display: block;
+        height: 14px;
+        width: 300px;
+        z-index: 100;
+        position: absolute;
+        bottom: 0px;
+        left: 50%;
+        margin-left: -150px;
+
+        .drag-track{
+          display: block;
+          position: absolute;
+          left: 12px;
+          height: 10px;
+          width: 276px;
+          background: image-url('onion_skin_sprites.gif') -4px -20px repeat-x;
+        }
+
+        .dragger {
+          display: block;
+          position: absolute;
+          left: 0px;
+          top: 0px;
+          height: 14px;
+          width: 14px;
+          background: image-url('onion_skin_sprites.gif') 0px -34px repeat-x;
+          cursor: pointer;
+        }
+
+        .transparent {
+          display: block;
+          position: absolute;
+          top: 2px;
+          right: 0px;
+          height: 10px;
+          width: 10px;
+          background: image-url('onion_skin_sprites.gif') -2px 0px no-repeat;
+        }
+
+        .opaque {
+          display: block;
+          position: absolute;
+          top: 2px;
+          left: 0px;
+          height: 10px;
+          width: 10px;
+          background: image-url('onion_skin_sprites.gif') -2px -10px no-repeat;
+        }
+      }
+    } //.view.onion-skin
+  }
+  .view-modes{
+
+    padding: 10px;
+    text-align: center;
+
+    background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf));
+    background-image: -webkit-linear-gradient(#eee 6.6%, #dfdfdf);
+    background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf);
+    background-image: -ms-linear-gradient(#eee 6.6%, #dfdfdf);
+    background-image: -o-linear-gradient(#eee 6.6%, #dfdfdf);
+
+    ul, li{
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      display: inline-block;
+    }
+
+    li{
+      color: grey;
+      border-left: 1px solid #c1c1c1;
+      padding: 0 12px 0 16px;
+      cursor: pointer;
+      &:first-child{
+        border-left: none;
+      }
+      &:hover{
+        text-decoration: underline;
+      }
+      &.active{
+        &:hover{
+          text-decoration: none;
+        }
+        cursor: default;
+        color: #333;
+      }
+      &.disabled{
+        display: none;
+      }
+    }
+  }
+}

data/lib/black/templates/stylesheets/syntax.css.scss

@@ -0,0 +1,109 @@
+.highlight {
+  margin-bottom: 30px;
+  overflow: auto; 
+  background-color: inherit !important;
+  table {
+    border-collapse: collapse;
+    td {
+      &.gutter {
+        padding-right: 10px;
+        color: #505050;
+        font-size: 14px;
+        border-right: 1px solid #333;
+      }
+      &.code {
+        font-size: 14px;
+        pre {
+          margin-left: 10px;
+        }
+      }
+    }
+  }
+}
+
+.highlight table td { padding: 5px; }
+.highlight table pre { margin: 0; }
+.highlight, .highlight .w {
+  color: #93a1a1;
+  background-color: #002b36;
+}
+.highlight .err {
+  color: #151515;
+  background-color: #ac4142;
+}
+.highlight .c, .highlight .cd, .highlight .cm, .highlight .c1, .highlight .cs {
+  color: #505050;
+}
+.highlight .cp {
+  color: #f4bf75;
+}
+.highlight .nt {
+  color: #f4bf75;
+}
+.highlight .o, .highlight .ow {
+  color: #d0d0d0;
+}
+.highlight .p, .highlight .pi {
+  color: #d0d0d0;
+}
+.highlight .gi {
+  color: #90a959;
+}
+.highlight .gd {
+  color: #ac4142;
+}
+.highlight .gh {
+  color: #6a9fb5;
+  background-color: #151515;
+  font-weight: 600;
+}
+.highlight .k, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kv {
+  color: #aa759f;
+}
+.highlight .kc {
+  color: #d28445;
+}
+.highlight .kt {
+  color: #d28445;
+}
+.highlight .kd {
+  color: #d28445;
+}
+.highlight .s, .highlight .sb, .highlight .sc, .highlight .sd, .highlight .s2, .highlight .sh, .highlight .sx, .highlight .s1 {
+  color: #90a959;
+}
+.highlight .sr {
+  color: #75b5aa;
+}
+.highlight .si {
+  color: #8f5536;
+}
+.highlight .se {
+  color: #8f5536;
+}
+.highlight .nn {
+  color: #f4bf75;
+}
+.highlight .nc {
+  color: #f4bf75;
+}
+.highlight .no {
+  color: #f4bf75;
+}
+.highlight .na {
+  color: #6a9fb5;
+}
+.highlight .m, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mb, .highlight .mx {
+  color: #90a959;
+}
+.highlight .ss {
+  color: #90a959;
+}
+
+// overrides
+
+.highlight {
+  .w {
+    background-color: inherit;
+  }
+}

data/lib/black/version.rb

@@ -0,0 +1,3 @@
+module Black
+  Version = VERSION = '0.0.1'
+end

metadata

@@ -0,0 +1,86 @@
+--- !ruby/object:Gem::Specification
+name: black
+version: !ruby/object:Gem::Version
+  version: 0.0.1
+platform: ruby
+authors:
+- Jade Dominguez
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2015-01-15 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rouge
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '1'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '1'
+- !ruby/object:Gem::Dependency
+  name: sass
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '3'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '3'
+description: Black parses diff output to render a syntax-highlighted diff view in
+  HTML
+email: plusjade@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- Gemfile
+- README.md
+- Rakefile
+- black.gemspec
+- lib/black.rb
+- lib/black/diff.rb
+- lib/black/git.rb
+- lib/black/html_view.rb
+- lib/black/preview.rb
+- lib/black/stylesheets.rb
+- lib/black/templates/diff.html.erb
+- lib/black/templates/stylesheets/diff.css.scss
+- lib/black/templates/stylesheets/syntax.css.scss
+- lib/black/version.rb
+homepage: https://github.com/plusjade/black
+licenses:
+- http://www.opensource.org/licenses/MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.2.2
+signing_key: 
+specification_version: 4
+summary: Black parses diff output to render a syntax-highlighted diff view in HTML
+test_files: []