Merge pull request #14 from wpp/walkthrough

Move walkthrough to shoesrb.com

config.ru

@@ -17,6 +17,7 @@ Shoes = Webmachine::Application.new do |app|
     add ["contribute"], ContributePage
     add ["downloads"], DownloadsPage
     add ["downloads", :filename], DownloadResource
+    add ["walkthrough"], WalkthroughPage
     add ['*'], StaticResource, :root => "public"
   end
   app.configure do |config|

posts/bundler-integration.md

@@ -15,7 +15,7 @@ This reminded me of a Gemfile, so why not add Bundler support? So I did! Create
 a `Gemfile`:
 
     source "https://test.rubygems.org"
-    
+
     gem "twitter"
 
 And in your application use this setup block:

public/css/bootstrap.css

@@ -69,53 +69,53 @@ img {
   height: 100px;
 }
 #lion{
-	background: url('/img/sprite.png') no-repeat -6px -59px;
-	width: 100px;
-	height: 100px;
+  background: url('/img/sprite.png') no-repeat -6px -59px;
+  width: 100px;
+  height: 100px;
   margin: 40px;
   display: inline-block;
 }
 #mountain_lion{
-	background: url('/img/sprite.png') no-repeat -6px -262px;
-	width: 100px;
-	height: 100px;
+  background: url('/img/sprite.png') no-repeat -6px -262px;
+  width: 100px;
+  height: 100px;
   margin: 40px;
   display: inline-block;
 }
 #windows{
-	background: url('/img/sprite.png') no-repeat 0 -369px;
-	width: 110px;
-	height: 99px;
+  background: url('/img/sprite.png') no-repeat 0 -369px;
+  width: 110px;
+  height: 99px;
   margin: 40px;
   display: inline-block;
 }
 #ubuntu{
-	background: url('/img/sprite.png') no-repeat -4px -161px;
-	width: 100px;
-	height: 100px;
+  background: url('/img/sprite.png') no-repeat -4px -161px;
+  width: 100px;
+  height: 100px;
   margin: 40px;
   display: inline-block;
 }
 #tutorials{
   background: url('/img/sprite.png') no-repeat 0px -482px;
-	width: 45px;
-	height: 33px;
+  width: 45px;
+  height: 33px;
   display: inline-block;
   vertical-align: middle;
   margin: 5px;
 }
 #blog{
-	background: url('/img/sprite.png') no-repeat -1px -524px;
-	width: 45px;
-	height: 35px;
+  background: url('/img/sprite.png') no-repeat -1px -524px;
+  width: 45px;
+  height: 35px;
   display: inline-block;
   vertical-align: middle;
   margin: 5px;
 }
 #contribute{
-	background: url('/img/sprite.png') no-repeat -57px -515px;
-	width: 48px;
-	height: 44px;
+  background: url('/img/sprite.png') no-repeat -57px -515px;
+  width: 48px;
+  height: 44px;
   display: inline-block;
   vertical-align: middle;
   margin: 5px;
@@ -125,9 +125,9 @@ img {
   top: -50px;
   right: -10px;
 
- 	background: url('/img/sprite2.png') no-repeat -1px -52px;
-	width: 429px;
-	height: 178px;
+  background: url('/img/sprite2.png') no-repeat -1px -52px;
+  width: 429px;
+  height: 178px;
   display: inline-block;
   vertical-align: middle;
 }
@@ -166,33 +166,33 @@ img {
   height: 128px;
 }
 #walk{
- 	background: url('/img/sprite2.png') no-repeat -52px -4px;
-	width: 40px;
-	height: 42px;
+  background: url('/img/sprite2.png') no-repeat -52px -4px;
+  width: 40px;
+  height: 42px;
   display: inline-block;
   vertical-align: middle;
   margin: 2px;
 }
 #book{
- 	background: url('/img/sprite2.png') no-repeat 0 0;
-	width: 44px;
-	height: 48px;
+  background: url('/img/sprite2.png') no-repeat 0 0;
+  width: 44px;
+  height: 48px;
   display: inline-block;
   vertical-align: middle;
   margin: 2px;
 }
 #manual{
   background: url('/img/sprite2.png') no-repeat -163px -1px;
-	width: 62px;
-	height: 48px;
+  width: 62px;
+  height: 48px;
   display: inline-block;
   vertical-align: middle;
   margin: 2px;
 }
 #rdocs{
- 	background: url('/img/sprite2.png') no-repeat -95px 0;
-	width: 63px;
-	height: 49px;
+  background: url('/img/sprite2.png') no-repeat -95px 0;
+  width: 63px;
+  height: 49px;
   display: inline-block;
   vertical-align: middle;
   margin: 2px;
@@ -263,11 +263,11 @@ body {
   line-height: 18px;
   color: #333333;
   background-color: #ffffff;
-	background: url('/img/background.jpg') no-repeat center center fixed;
-	-webkit-background-size: cover;
-	-moz-background-size: cover;
-	-o-background-size: cover;
-	background-size: cover;
+  background: url('/img/background.jpg') no-repeat center center fixed;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
 }
 a {
   color: #0088cc;
@@ -3653,3 +3653,7 @@ a.thumbnail:hover {
 .invisible {
   visibility: hidden;
 }
+.walkthrough {
+  background: red;
+  border: 1px solid black;
+}

public/css/code.css

@@ -0,0 +1,135 @@
+/*
+
+Original style from softwaremaniacs.org (c) Ivan Sagalaev <Maniac@SoftwareManiacs.Org>
+
+*/
+
+pre code {
+  display: block; padding: 0.5em;
+  background: #F0F0F0;
+}
+
+pre code,
+pre .subst,
+pre .tag .title,
+pre .lisp .title,
+pre .clojure .built_in,
+pre .nginx .title {
+  color: black;
+}
+
+pre .string,
+pre .title,
+pre .constant,
+pre .parent,
+pre .tag .value,
+pre .rules .value,
+pre .rules .value .number,
+pre .preprocessor,
+pre .ruby .symbol,
+pre .ruby .symbol .string,
+pre .aggregate,
+pre .template_tag,
+pre .django .variable,
+pre .smalltalk .class,
+pre .addition,
+pre .flow,
+pre .stream,
+pre .bash .variable,
+pre .apache .tag,
+pre .apache .cbracket,
+pre .tex .command,
+pre .tex .special,
+pre .erlang_repl .function_or_atom,
+pre .markdown .header {
+  color: #800;
+}
+
+pre .comment,
+pre .annotation,
+pre .template_comment,
+pre .diff .header,
+pre .chunk,
+pre .markdown .blockquote {
+  color: #888;
+}
+
+pre .number,
+pre .date,
+pre .regexp,
+pre .literal,
+pre .smalltalk .symbol,
+pre .smalltalk .char,
+pre .go .constant,
+pre .change,
+pre .markdown .bullet,
+pre .markdown .link_url {
+  color: #080;
+}
+
+pre .label,
+pre .javadoc,
+pre .ruby .string,
+pre .decorator,
+pre .filter .argument,
+pre .localvars,
+pre .array,
+pre .attr_selector,
+pre .important,
+pre .pseudo,
+pre .pi,
+pre .doctype,
+pre .deletion,
+pre .envvar,
+pre .shebang,
+pre .apache .sqbracket,
+pre .nginx .built_in,
+pre .tex .formula,
+pre .erlang_repl .reserved,
+pre .prompt,
+pre .markdown .link_label,
+pre .vhdl .attribute,
+pre .clojure .attribute,
+pre .coffeescript .property {
+  color: #88F
+}
+
+pre .keyword,
+pre .id,
+pre .phpdoc,
+pre .title,
+pre .built_in,
+pre .aggregate,
+pre .css .tag,
+pre .javadoctag,
+pre .phpdoc,
+pre .yardoctag,
+pre .smalltalk .class,
+pre .winutils,
+pre .bash .variable,
+pre .apache .tag,
+pre .go .typename,
+pre .tex .command,
+pre .markdown .strong,
+pre .request,
+pre .status {
+  font-weight: bold;
+}
+
+pre .markdown .emphasis {
+  font-style: italic;
+}
+
+pre .nginx .built_in {
+  font-weight: normal;
+}
+
+pre .coffeescript .javascript,
+pre .javascript .xml,
+pre .tex .formula,
+pre .xml .javascript,
+pre .xml .vbscript,
+pre .xml .css,
+pre .xml .cdata {
+  opacity: 0.5;
+}

public/css/wt.css

@@ -0,0 +1,43 @@
+.walkthrough {
+  background: white;
+  padding: 40px;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+}
+h1 {
+  line-height: 2em;
+}
+h2 {
+  line-height: 2em;
+}
+h3 {
+  line-height: 2em;
+}
+p {
+  font-size: 14px;
+  line-height: 1.43em;
+}
+pre {
+  float: right;
+  margin-top: 20px;
+  min-width: 453px;
+}
+pre code {
+  float: left;
+}
+.row2 {
+  padding: 0px;
+  background: #fff;
+  *zoom: 1;
+}
+.row2:before, .row2:after {
+  display: table;
+  content: "";
+}
+.row2:after {
+  clear: both;
+}
+hr {
+  margin-top: 40px;
+}
+

resources/walkthrough.rb

@@ -0,0 +1,9 @@
+require 'metadown'
+
+class WalkthroughPage < Webmachine::Resource
+  def to_html
+    walkthrough = Metadown.render(File.read("walkthrough/README.md"))
+    Template.new(:walkthrough).render(walkthrough: walkthrough)
+  end
+end
+

views/layout.html.haml

@@ -6,8 +6,13 @@
       %meta{:content => "width=device-width, initial-scale=1.0", :name => "viewport"}
         %meta{:content => "The website for Shoes, a GUI toolkit for Ruby", :name => "description"}
           %meta{:content => "Team Shoes", :name => "author"}
+
+            %link{:href => "/css/code.css", :rel => "stylesheet"}
+            %script{:type => "text/javascript", :src => "/js/highlight.pack.js"}
+            <script>hljs.initHighlightingOnLoad();</script>
             / Le styles
             %link{:href => "/css/bootstrap.css", :rel => "stylesheet"}
+            %link{:href => "/css/wt.css", :rel => "stylesheet"}
               :css
                 body {
                   padding-top: 60px;

views/tutorials.html.haml

@@ -9,7 +9,7 @@
     %h2 The Walkthrough
     #walk
     %p The quickest way to get started with Shoes.
-    %a{:href => "https://github.com/ashbb/shoes_tutorial_walkthrough"} Click here.
+    %a{:href => "/walkthrough"} Click here.
 
   .span5
     %h2 The Manual

views/walkthrough.html.haml

@@ -0,0 +1,2 @@
+.walkthrough
+    = walkthrough.output