0
@@ -162,20 +162,41 @@ class Shoes
0
       man = self
0
       dir, = args
0
       FileUtils.mkdir_p File.join(dir, 'static')
0
-      FileUtils.cp "static/manual.css", dir
0
       FileUtils.cp "static/shoes-icon.png", "#{dir}/static"
0
+      %w[manual.css code_highlighter.js code_highlighter_ruby.js].
0
+        each { |x| FileUtils.cp "static/#{x}", "#{dir}/static" }
0
       html_bits = proc do
0
         proc do |sym, text|
0
         case sym when :intro
0
           div.intro { p { self << man.manual_p(text, dir) } }
0
         when :code
0
-          pre { code text.gsub(/^\s*?\n/, ''), :class => "rb" }
0
+          pre { code.rb text.gsub(/^\s*?\n/, '') }
0
         when :colors
0
-        #   color_page
0
+          color_names = (Shoes::COLORS.keys*"\n").split("\n").sort
0
+          color_names.each do |color|
0
+            c = Shoes::COLORS[color.intern]
0
+            f = c.dark? ? "white" : "black"
0
+            div.color(:style => "background: #{c}; color: #{f}") { h3 color; p c }
0
+          end
0
         when :index
0
+          tree = man.class_tree
0
+          shown = []
0
+          i = 0
0
+          index_p = proc do |k, subs|
0
+            unless shown.include? k
0
+              i += 1
0
+              p "▸ #{k}", :style => "margin-left: #{20*i}px"
0
+              subs.uniq.sort.each do |s|
0
+                index_p[s, tree[s]]
0
+              end if subs
0
+              i -= 1
0
+              shown << k
0
+            end
0
+          end
0
+          tree.sort.each &index_p
0
         #   index_page
0
         when :list
0
-          ul { text.each { |x| li x } }
0
+          ul { text.each { |x| li { self << man.manual_p(x, dir) } } }
0
         else
0
           send(TITLES[sym] || :p) { self << man.manual_p(text, dir) }
0
         end

0
@@ -109,7 +109,7 @@ module Shoes::Manual
0
     end
0
   end
0
 
0
-  def index_page
0
+  def class_tree
0
     tree = {}
0
     Shoes.constants.each do |c|
0
       k = Shoes.const_get(c)
0
@@ -126,7 +126,11 @@ module Shoes::Manual
0
         end
0
       end
0
     end
0
+    tree
0
+  end
0
 
0
+  def index_page
0
+    tree = class_tree
0
     shown = []
0
     index_p = proc do |k, subs|
0
       unless shown.include? k
0
@@ -274,8 +278,10 @@ module Shoes::Manual
0
           head do
0
             meta :"http-equiv" => "Content-Type", "content" => "text/html; charset=utf-8"
0
             title "The Shoes Manual // #{title}"
0
+            script :type => "text/javascript", :src => "static/code_highlighter.js"
0
+            script :type => "text/javascript", :src => "static/code_highlighter_ruby.js"
0
             style :type => "text/css" do
0
-              text "@import 'manual.css';"
0
+              text "@import 'static/manual.css';"
0
             end
0
           end
0
           body do

0
@@ -231,10 +231,10 @@ void shoes_cairo_rect(cairo_t *, double, double, double, double, double);
0
   f("+check", check, -1); \
0
   f("+radio", radio, -1); \
0
   f(".app", get_app, 0); \
0
-  f(".after", after, -1); \
0
-  f(".before", before, -1); \
0
-  f(".append", append, -1); \
0
-  f(".prepend", prepend, -1); \
0
+  f("+after", after, -1); \
0
+  f("+before", before, -1); \
0
+  f("+append", append, -1); \
0
+  f("+prepend", prepend, -1); \
0
   f("+flow", flow, -1); \
0
   f("+stack", stack, -1); \
0
   f("+mask", mask, -1); \
0
@@ -247,7 +247,7 @@ void shoes_cairo_rect(cairo_t *, double, double, double, double, double);
0
   f(".release", release, -1); \
0
   f(".motion", motion, -1); \
0
   f(".keypress", keypress, -1); \
0
-  f(".clear", clear_contents, -1); \
0
+  f("+clear", clear_contents, -1); \
0
   f(".visit", goto, 1); \
0
   f(".mouse", mouse, 0); \
0
   f(".cursor", get_cursor, 0); \

0
@@ -60,15 +60,6 @@ div.method a {
0
   border-left: solid 1px #CCC;
0
   border-right: solid 1px #CCC;
0
 }
0
-.sidebar li:hover {
0
-  background: #EEE;
0
-}
0
-.sidebar li:hover ul.sub {
0
-  background: #DDD;
0
-}
0
-.sidebar li:hover .prime {
0
-  background: #DDD;
0
-}
0
 .sidebar ul.sub li {
0
   margin: 0; padding: 0;
0
   font-size: 14px;
0
@@ -90,3 +81,40 @@ div.method a {
0
 .sidebar a:hover {
0
   color: black;
0
 }
0
+div.color {
0
+  width: 31%;
0
+  float: left;
0
+  text-align: center;
0
+  padding: 6px;
0
+  font-size: 80%;
0
+}
0
+div.color h3, div.color p {
0
+  margin: 4px;
0
+}
0
+
0
+/* code highlighting */
0
+pre {
0
+  background: white;
0
+  padding: 8px 0;
0
+  border: solid 1px #ddd;
0
+}
0
+pre .comment, .ruby .comment {
0
+  color: #696;
0
+}                                                                                                            pre .string, .ruby .string {
0
+  color: teal;
0
+}
0
+pre .constant, .ruby .constant {
0
+  font-weight: bold;
0
+}
0
+pre .symbol, .ruby .symbol {
0
+  color: green;
0
+}
0
+pre .keywords, .ruby .keywords {
0
+  color: #662;
0
+}
0
+pre .global, pre .ivar, .ruby .ivar {
0
+  color: #F60;
0
+}
0
+pre .brackets, .ruby .brackets {
0
+  color: #993;
0
+}

0
@@ -154,8 +154,8 @@ Builds a linear gradient from two colors.  For each color, you may pass in a Sho
0
 Create a grayscale color from a level of darkness and, optionally, an alpha level.
0
 
0
 {{{
0
-black = gray(0.0)
0
-white = gray(1.0)
0
+ black = gray(0.0)
0
+ white = gray(1.0)
0
 }}}
0
 
0
 === info(message: a string) » nil ===
0
@@ -176,15 +176,15 @@ Create a color from red, green and blue components.  An alpha level (indicating
0
 When passing in a whole number, use values from 0 to 255.
0
 
0
 {{{
0
-blueviolet = rgb(138, 43, 226)
0
-darkgreen = rgb(0, 100, 0)
0
+ blueviolet = rgb(138, 43, 226)
0
+ darkgreen = rgb(0, 100, 0)
0
 }}}
0
 
0
 Or, use a decimal number from 0.0 to 1.0.
0
 
0
 {{{
0
-blueviolet = rgb(0.54, 0.17, 0.89)
0
-darkgreen = rgb(0, 0.4, 0)
0
+ blueviolet = rgb(0.54, 0.17, 0.89)
0
+ darkgreen = rgb(0, 0.4, 0)
0
 }}}
0
 
0
 This method may also be called as `Shoes.rgb`.