css-annotate 1.1.0 → 1.2.0

data/CHANGELOG

@@ -1,3 +1,12 @@
+2010-11-11 version 1.2.0
+
+You can now run css-annotate as a Web server with the -s/--server option. Hit
+refresh to reload your CSS.
+
+Now attempts to guess syntax from file extension, so pointing to a SASS file
+would just work.
+
+
 2010-11-11 version 1.1.0
 
 Added shortcut option -c, same as --commented.

data/Gemfile

@@ -3,5 +3,4 @@ gemspec
 
 group :development do
   gem "thin"
-  gem "compass"
 end

data/README.rdoc

@@ -1,9 +1,18 @@
+== Usage
+  
   Usage:
     css-annotate [options] filename
 
   Options:
-    --commented      Show only rules preceded by a comment
+    -c --commented   Show only rules preceded by a comment
+    -p --port [num]  Port number (default 8080)
+    -s --server      Run a Web server
     --syntax [name]  Either sass or scss (default)
 
+  Example:
+    css-annotate lib/css/annotate/style.scss | bcat
+    css-annotate --server lib/css/annotate/style.scss
+
+== Screenshot
 
 http://labnotes.org/wp-content/uploads/2010/11/Your-CSS-annotated.png

data/VERSION

@@ -1 +1 @@
-1.1.0
+1.2.0

data/bin/css-annotate

@@ -1,14 +1,39 @@
 #!/usr/bin/env ruby
 $LOAD_PATH.unshift File.expand_path(File.dirname(__FILE__) + '/../lib')
 require "css/annotate"
+
+options = {}
+if (i = ARGV.index("--syntax")) && ARGV[i+1]
+  options[:syntax] = ARGV[i + 1].to_sym
+  ARGV[i,2] = []
+end
+options[:all] = !(ARGV.delete("--commented") || ARGV.delete("-c"))
+
+server = ARGV.delete("--server") || ARGV.delete("-s")
+if (i = ARGV.index("--port") || ARGV.index("-p")) && ARGV[i+1]
+  port = ARGV[i + 1].to_i
+  ARGV[i,2] = []
+end
+
 if filename = ARGV[0]
-  options = {}
-  if (i = ARGV.index("--syntax")) && ARGV[i+1]
-    options[:syntax] = ARGV[i + 1].to_sym
-    ARGV[i,2] = []
+  if server
+    require "rack"
+    app = lambda do |env|
+      request = Rack::Request.new(env)
+      if request.path == "/"
+        html = CSS::Annotate.new(filename, options).to_html
+        [200, { "Content-Type"=>"text/html", "Content-Length"=>html.length.to_s }, [html]]
+      else
+        [404, {}, "Not found"]
+      end
+    end
+    trap(:INT) { exit! }
+    trap(:QUIT) { exit! }
+    server = Rack::Handler.default
+    server.run app, :Host=>"127.0.0.1", :Port=>port || 8080
+  else
+    $stdout << CSS::Annotate.new(filename, options).to_html
   end
-  options[:all] = !(ARGV.delete("--commented") || ARGV.delete("-c"))
-  $stdout << CSS::Annotate.new(ARGV[0], options).to_html
 else
   print <<-TEXT
 Usage:
@@ -16,8 +41,14 @@ Usage:
 
 Options:
   -c --commented   Show only rules preceded by a comment
+  -p --port [num]  Port number (default 8080)
+  -s --server      Run a Web server
   --syntax [name]  Either sass or scss (default)
 
+Example:
+  css-annotate lib/css/annotate/style.scss | bcat
+  css-annotate --server lib/css/annotate/style.scss
+
   TEXT
   exit -1
 end

data/css-annotate.gemspec

@@ -21,4 +21,5 @@ Gem::Specification.new do |spec|
   spec.required_ruby_version = '>= 1.8.7'
   spec.add_dependency "compass", "~>0.10"
   spec.add_dependency "haml", "~>3.0"
+  spec.add_dependency "rack", "~>1.1"
 end

data/lib/css/annotate.rb

@@ -7,15 +7,14 @@ require "cgi"
 module CSS
   class Annotate
 
-    DEFAULT_OPTIONS = { :syntax=>:scss }
-
     def initialize(filename, options = {})
       @filename = filename
-      @options = DEFAULT_OPTIONS.merge(options)
+      @options = options.clone
       paths = @options[:load_paths] || []
       paths.push File.dirname(@filename)
       paths.concat Compass::Frameworks::ALL.map { |framework| framework.stylesheets_directory }
       @options[:load_paths] = paths
+      @options[:syntax] ||= guess_syntax(filename)
     end
 
     attr_reader :filename, :options, :rows
@@ -34,12 +33,16 @@ module CSS
 
     def to_html
       rows = annotate
-      ERB.new(IO.read(File.dirname(__FILE__) + "/annotate/template.erb")).run(binding)
+      ERB.new(IO.read(File.dirname(__FILE__) + "/annotate/template.erb")).result(binding)
     end
 
     def styles
       Sass::Engine.new(IO.read(File.dirname(__FILE__) + "/annotate/style.scss"), :syntax=>:scss).render
     end
+    
+    def all?
+      !!options[:all]
+    end
 
   protected
 
@@ -75,5 +78,10 @@ module CSS
       rows
     end
 
+    def guess_syntax(filename)
+      ext = File.extname(filename).sub(/^\./, "")
+      %{css sass scss}.include?(ext) ? ext.to_sym : :scss
+    end
+
   end
 end

data/lib/css/annotate/style.scss

@@ -3,41 +3,64 @@ body {
   padding: 0;
   font-family: "Helvetica";
 }
+
+.toggle {
+  position: absolute;
+  right: 1em;
+  top: 0.3em;
+  font-size: 90%;
+  /* Link to show all rules */
+  [rel="show"] { display: none }
+  /* Link to show only commented rules */
+  [rel="hide"] { display: inherit }
+}
+
 /* Place on annotation table */
 table.annotated {
+  table-layout: fixed;
   width: 100%;
   margin: 0;
   padding: 0;
   border-collapse: collapse;
   border-bottom: 1px solid #ccc;
 
-  /* Apply to column that contains CSS selector/comment */
-  td.comment {
-    vertical-align: top;
-    padding: 0.3em 2em 0.6em 1em;
-
-    h2 {
-      font-size: 12pt;
-      margin: 0 0 0.1em 0;
-      color: #444;
+  tr {
+    /* Apply to any row that has selector with comment */
+    &.commented {
+      display: table-row;
     }
 
-    blockquote {
-      padding: 0;
-      margin: 0;
+    /* Apply to column that contains CSS selector/comment */
+    td.selector {
+      vertical-align: top;
+      padding: 1em 2em 1em 1em;
+
+      h2 {
+        font-size: 12pt;
+        margin: 0 0 0.1em 0;
+        color: #444;
+      }
+
+      blockquote {
+        padding: 0;
+        margin: 0;
+      }
     }
-  }
 
-  /* Apply to column that contains CSS style */
-  td.code {
-    background: #eef;
-    vertical-align: top;
-    padding: 0.3em 1em 0.6em 2em;
-    border-left: 1px solid #ccc;
-  }
+    /* Apply to column that contains CSS style */
+    td.style {
+      width: 40em;
+      background: #eef;
+      vertical-align: top;
+      padding: 1em 1em 1em 2em;
+      border-left: 1px solid #ccc;
+      overflow: hidden;
+      border-bottom: 1px dashed #ccc;
+    }
 
-  tr:hover td {
-    background: #ddf;
+    &:hover td {
+      background: #ddf;
+    }
   }
 }
 .footer {

data/lib/css/annotate/template.erb

@@ -2,19 +2,42 @@
   <head>
     <title>Your CSS, annotated</title>
     <style><%= styles %></style>
+    <% if all? %>
+      <script type="text/javascript">
+        function toggle(show) {
+          var styles = document.styleSheets[0];
+          var rules = styles.cssRules || styles.rules;
+          for (var i in rules) {
+            var rule = rules[i];
+            if (rule.selectorText == "table.annotated tr")
+              rule.style.display = show ? "table-row" : "none";
+            if (rule.selectorText == ".toggle [rel=\"show\"]")
+              rule.style.display = show ? "none" : "inherit";
+            if (rule.selectorText == ".toggle [rel=\"hide\"]")
+              rule.style.display = show ? "inherit" : "none";
+          }
+        }
+      </script>
+    <% end %>
   </head>
   <body>
+    <% if all? %>
+      <div class="toggle">
+        <a href="javascript:toggle(false)" rel="hide">Only commented</a>
+        <a href="javascript:toggle(true)" rel="show">Show all</a>
+      </div>
+    <% end %>
     <table class="annotated">
       <% rows.each do |row| %>
-        <tr>
-          <td class="comment">
+        <tr class="<%= "commented" if row[:comment] %>">
+          <td class="selector">
             <h2><%= h row[:selector] %></h2>
-            <blockquote><%= h row[:comment] %></blockquote>
-          </div></td>
-          <td class="code"><pre><%= h row[:style]%></pre></td>
+            <% if row[:comment] %><blockquote><%= h row[:comment] %></blockquote><% end %>
+          </td>
+          <td class="style"><pre><%= h row[:style]%></pre></td>
         </tr>
       <% end %>
-    <table>
+    </table>
     <div class="footer">
       Generated from <span class="filename"><%= filename %></span> on
       <%= Time.now.strftime("%c") %> by <a href="http://github.com/assaf/css-annotate">CSS Annotate</a>

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification 
 name: css-annotate
 version: !ruby/object:Gem::Version 
-  hash: 19
+  hash: 31
   prerelease: false
   segments: 
   - 1
-  - 1
+  - 2
   - 0
-  version: 1.1.0
+  version: 1.2.0
 platform: ruby
 authors: 
 - Assaf Arkin
@@ -15,7 +15,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2010-11-11 00:00:00 -08:00
+date: 2010-11-12 00:00:00 -08:00
 default_executable: 
 dependencies: 
 - !ruby/object:Gem::Dependency 
@@ -48,6 +48,21 @@ dependencies:
         version: "3.0"
   type: :runtime
   version_requirements: *id002
+- !ruby/object:Gem::Dependency 
+  name: rack
+  prerelease: false
+  requirement: &id003 !ruby/object:Gem::Requirement 
+    none: false
+    requirements: 
+    - - ~>
+      - !ruby/object:Gem::Version 
+        hash: 13
+        segments: 
+        - 1
+        - 1
+        version: "1.1"
+  type: :runtime
+  version_requirements: *id003
 description: Uses in-line docs to map the stylesheet. Supports CSS and SCSS.
 email: assaf@labnotes.org
 executables: 
@@ -77,7 +92,7 @@ licenses: []
 post_install_message: To get started, run the command css-annotate
 rdoc_options: 
 - --title
-- css-annotate 1.1.0
+- css-annotate 1.2.0
 - --main
 - README.rdoc
 - --webcvs