Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Move walkthrough to shoesrb.com

  • Loading branch information...
commit de4a26800c66e55a7fb7b02d500b36b7c698587b 1 parent 38f2415
Philipp Weissensteiner authored
View
1  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|
View
2  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:
View
82 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;
+}
View
135 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;
+}
View
43 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;
+}
+
View
BIN  public/img/wt/000.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/img/wt/001.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/img/wt/002.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/img/wt/003.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/img/wt/004.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/img/wt/005.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/img/wt/007.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/img/wt/008.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/img/wt/009.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/img/wt/010.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/img/wt/011.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/img/wt/012.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/img/wt/013.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/img/wt/014.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/img/wt/015.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/img/wt/016.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/img/wt/nks-kidnap--modified.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/img/wt/nks-kidnap.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/img/wt/shoes.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
1  public/js/highlight.pack.js
@@ -0,0 +1 @@
+var hljs=new function(){function l(o){return o.replace(/&/gm,"&amp;").replace(/</gm,"&lt;").replace(/>/gm,"&gt;")}function b(p){for(var o=p.firstChild;o;o=o.nextSibling){if(o.nodeName=="CODE"){return o}if(!(o.nodeType==3&&o.nodeValue.match(/\s+/))){break}}}function h(p,o){return Array.prototype.map.call(p.childNodes,function(q){if(q.nodeType==3){return o?q.nodeValue.replace(/\n/g,""):q.nodeValue}if(q.nodeName=="BR"){return"\n"}return h(q,o)}).join("")}function a(q){var p=(q.className+" "+q.parentNode.className).split(/\s+/);p=p.map(function(r){return r.replace(/^language-/,"")});for(var o=0;o<p.length;o++){if(e[p[o]]||p[o]=="no-highlight"){return p[o]}}}function c(q){var o=[];(function p(r,s){for(var t=r.firstChild;t;t=t.nextSibling){if(t.nodeType==3){s+=t.nodeValue.length}else{if(t.nodeName=="BR"){s+=1}else{if(t.nodeType==1){o.push({event:"start",offset:s,node:t});s=p(t,s);o.push({event:"stop",offset:s,node:t})}}}}return s})(q,0);return o}function j(x,v,w){var p=0;var y="";var r=[];function t(){if(x.length&&v.length){if(x[0].offset!=v[0].offset){return(x[0].offset<v[0].offset)?x:v}else{return v[0].event=="start"?x:v}}else{return x.length?x:v}}function s(A){function z(B){return" "+B.nodeName+'="'+l(B.value)+'"'}return"<"+A.nodeName+Array.prototype.map.call(A.attributes,z).join("")+">"}while(x.length||v.length){var u=t().splice(0,1)[0];y+=l(w.substr(p,u.offset-p));p=u.offset;if(u.event=="start"){y+=s(u.node);r.push(u.node)}else{if(u.event=="stop"){var o,q=r.length;do{q--;o=r[q];y+=("</"+o.nodeName.toLowerCase()+">")}while(o!=u.node);r.splice(q,1);while(q<r.length){y+=s(r[q]);q++}}}}return y+l(w.substr(p))}function f(q){function o(s,r){return RegExp(s,"m"+(q.cI?"i":"")+(r?"g":""))}function p(y,w){if(y.compiled){return}y.compiled=true;var s=[];if(y.k){var r={};function z(A,t){t.split(" ").forEach(function(B){var C=B.split("|");r[C[0]]=[A,C[1]?Number(C[1]):1];s.push(C[0])})}y.lR=o(y.l||hljs.IR,true);if(typeof y.k=="string"){z("keyword",y.k)}else{for(var x in y.k){if(!y.k.hasOwnProperty(x)){continue}z(x,y.k[x])}}y.k=r}if(w){if(y.bWK){y.b="\\b("+s.join("|")+")\\s"}y.bR=o(y.b?y.b:"\\B|\\b");if(!y.e&&!y.eW){y.e="\\B|\\b"}if(y.e){y.eR=o(y.e)}y.tE=y.e||"";if(y.eW&&w.tE){y.tE+=(y.e?"|":"")+w.tE}}if(y.i){y.iR=o(y.i)}if(y.r===undefined){y.r=1}if(!y.c){y.c=[]}for(var v=0;v<y.c.length;v++){if(y.c[v]=="self"){y.c[v]=y}p(y.c[v],y)}if(y.starts){p(y.starts,w)}var u=[];for(var v=0;v<y.c.length;v++){u.push(y.c[v].b)}if(y.tE){u.push(y.tE)}if(y.i){u.push(y.i)}y.t=u.length?o(u.join("|"),true):{exec:function(t){return null}}}p(q)}function d(D,E){function o(r,M){for(var L=0;L<M.c.length;L++){var K=M.c[L].bR.exec(r);if(K&&K.index==0){return M.c[L]}}}function s(K,r){if(K.e&&K.eR.test(r)){return K}if(K.eW){return s(K.parent,r)}}function t(r,K){return K.i&&K.iR.test(r)}function y(L,r){var K=F.cI?r[0].toLowerCase():r[0];return L.k.hasOwnProperty(K)&&L.k[K]}function G(){var K=l(w);if(!A.k){return K}var r="";var N=0;A.lR.lastIndex=0;var L=A.lR.exec(K);while(L){r+=K.substr(N,L.index-N);var M=y(A,L);if(M){v+=M[1];r+='<span class="'+M[0]+'">'+L[0]+"</span>"}else{r+=L[0]}N=A.lR.lastIndex;L=A.lR.exec(K)}return r+K.substr(N)}function z(){if(A.sL&&!e[A.sL]){return l(w)}var r=A.sL?d(A.sL,w):g(w);if(A.r>0){v+=r.keyword_count;B+=r.r}return'<span class="'+r.language+'">'+r.value+"</span>"}function J(){return A.sL!==undefined?z():G()}function I(L,r){var K=L.cN?'<span class="'+L.cN+'">':"";if(L.rB){x+=K;w=""}else{if(L.eB){x+=l(r)+K;w=""}else{x+=K;w=r}}A=Object.create(L,{parent:{value:A}});B+=L.r}function C(K,r){w+=K;if(r===undefined){x+=J();return 0}var L=o(r,A);if(L){x+=J();I(L,r);return L.rB?0:r.length}var M=s(A,r);if(M){if(!(M.rE||M.eE)){w+=r}x+=J();do{if(A.cN){x+="</span>"}A=A.parent}while(A!=M.parent);if(M.eE){x+=l(r)}w="";if(M.starts){I(M.starts,"")}return M.rE?0:r.length}if(t(r,A)){throw"Illegal"}w+=r;return r.length||1}var F=e[D];f(F);var A=F;var w="";var B=0;var v=0;var x="";try{var u,q,p=0;while(true){A.t.lastIndex=p;u=A.t.exec(E);if(!u){break}q=C(E.substr(p,u.index-p),u[0]);p=u.index+q}C(E.substr(p));return{r:B,keyword_count:v,value:x,language:D}}catch(H){if(H=="Illegal"){return{r:0,keyword_count:0,value:l(E)}}else{throw H}}}function g(s){var o={keyword_count:0,r:0,value:l(s)};var q=o;for(var p in e){if(!e.hasOwnProperty(p)){continue}var r=d(p,s);r.language=p;if(r.keyword_count+r.r>q.keyword_count+q.r){q=r}if(r.keyword_count+r.r>o.keyword_count+o.r){q=o;o=r}}if(q.language){o.second_best=q}return o}function i(q,p,o){if(p){q=q.replace(/^((<[^>]+>|\t)+)/gm,function(r,v,u,t){return v.replace(/\t/g,p)})}if(o){q=q.replace(/\n/g,"<br>")}return q}function m(r,u,p){var v=h(r,p);var t=a(r);if(t=="no-highlight"){return}var w=t?d(t,v):g(v);t=w.language;var o=c(r);if(o.length){var q=document.createElement("pre");q.innerHTML=w.value;w.value=j(o,c(q),v)}w.value=i(w.value,u,p);var s=r.className;if(!s.match("(\\s|^)(language-)?"+t+"(\\s|$)")){s=s?(s+" "+t):t}r.innerHTML=w.value;r.className=s;r.result={language:t,kw:w.keyword_count,re:w.r};if(w.second_best){r.second_best={language:w.second_best.language,kw:w.second_best.keyword_count,re:w.second_best.r}}}function n(){if(n.called){return}n.called=true;Array.prototype.map.call(document.getElementsByTagName("pre"),b).filter(Boolean).forEach(function(o){m(o,hljs.tabReplace)})}function k(){window.addEventListener("DOMContentLoaded",n,false);window.addEventListener("load",n,false)}var e={};this.LANGUAGES=e;this.highlight=d;this.highlightAuto=g;this.fixMarkup=i;this.highlightBlock=m;this.initHighlighting=n;this.initHighlightingOnLoad=k;this.IR="[a-zA-Z][a-zA-Z0-9_]*";this.UIR="[a-zA-Z_][a-zA-Z0-9_]*";this.NR="\\b\\d+(\\.\\d+)?";this.CNR="(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)";this.BNR="\\b(0b[01]+)";this.RSR="!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|\\.|-|-=|/|/=|:|;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~";this.BE={b:"\\\\[\\s\\S]",r:0};this.ASM={cN:"string",b:"'",e:"'",i:"\\n",c:[this.BE],r:0};this.QSM={cN:"string",b:'"',e:'"',i:"\\n",c:[this.BE],r:0};this.CLCM={cN:"comment",b:"//",e:"$"};this.CBLCLM={cN:"comment",b:"/\\*",e:"\\*/"};this.HCM={cN:"comment",b:"#",e:"$"};this.NM={cN:"number",b:this.NR,r:0};this.CNM={cN:"number",b:this.CNR,r:0};this.BNM={cN:"number",b:this.BNR,r:0};this.inherit=function(q,r){var o={};for(var p in q){o[p]=q[p]}if(r){for(var p in r){o[p]=r[p]}}return o}}();hljs.LANGUAGES.ruby=function(e){var a="[a-zA-Z_][a-zA-Z0-9_]*(\\!|\\?)?";var j="[a-zA-Z_]\\w*[!?=]?|[-+~]\\@|<<|>>|=~|===?|<=>|[<>]=?|\\*\\*|[-/+%^&*~`|]|\\[\\]=?";var g={keyword:"and false then defined module in return redo if BEGIN retry end for true self when next until do begin unless END rescue nil else break undef not super class case require yield alias while ensure elsif or include"};var c={cN:"yardoctag",b:"@[A-Za-z]+"};var k=[{cN:"comment",b:"#",e:"$",c:[c]},{cN:"comment",b:"^\\=begin",e:"^\\=end",c:[c],r:10},{cN:"comment",b:"^__END__",e:"\\n$"}];var d={cN:"subst",b:"#\\{",e:"}",l:a,k:g};var i=[e.BE,d];var b=[{cN:"string",b:"'",e:"'",c:i,r:0},{cN:"string",b:'"',e:'"',c:i,r:0},{cN:"string",b:"%[qw]?\\(",e:"\\)",c:i},{cN:"string",b:"%[qw]?\\[",e:"\\]",c:i},{cN:"string",b:"%[qw]?{",e:"}",c:i},{cN:"string",b:"%[qw]?<",e:">",c:i,r:10},{cN:"string",b:"%[qw]?/",e:"/",c:i,r:10},{cN:"string",b:"%[qw]?%",e:"%",c:i,r:10},{cN:"string",b:"%[qw]?-",e:"-",c:i,r:10},{cN:"string",b:"%[qw]?\\|",e:"\\|",c:i,r:10}];var h={cN:"function",bWK:true,e:" |$|;",k:"def",c:[{cN:"title",b:j,l:a,k:g},{cN:"params",b:"\\(",e:"\\)",l:a,k:g}].concat(k)};var f=k.concat(b.concat([{cN:"class",bWK:true,e:"$|;",k:"class module",c:[{cN:"title",b:"[A-Za-z_]\\w*(::\\w+)*(\\?|\\!)?",r:0},{cN:"inheritance",b:"<\\s*",c:[{cN:"parent",b:"("+e.IR+"::)?"+e.IR}]}].concat(k)},h,{cN:"constant",b:"(::)?(\\b[A-Z]\\w*(::)?)+",r:0},{cN:"symbol",b:":",c:b.concat([{b:j}]),r:0},{cN:"symbol",b:a+":",r:0},{cN:"number",b:"(\\b0[0-7_]+)|(\\b0x[0-9a-fA-F_]+)|(\\b[1-9][0-9_]*(\\.[0-9_]+)?)|[0_]\\b",r:0},{cN:"number",b:"\\?\\w"},{cN:"variable",b:"(\\$\\W)|((\\$|\\@\\@?)(\\w+))"},{b:"("+e.RSR+")\\s*",c:k.concat([{cN:"regexp",b:"/",e:"/[a-z]*",i:"\\n",c:[e.BE,d]}]),r:0}]));d.c=f;h.c[1].c=f;return{l:a,k:g,c:f}}(hljs);
View
9 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
+
View
5 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;
View
2  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
View
2  views/walkthrough.html.haml
@@ -0,0 +1,2 @@
+.walkthrough
+ = walkthrough.output
View
391 walkthrough/README.md
@@ -0,0 +1,391 @@
+Hello!
+======
+
+In case you've just arrived: Shoes is a graphics toolkit for writing colorful apps using [the Ruby programming language](http://www.ruby-lang.org/en/). Ruby is built into Shoes.
+
+![000.jpg](./img/wt/000.jpg)
+
+Shoes wants to fit in. It will change the way it looks for each person's computer. These screenshots were taken on my computer, but when you run them for yourself they will look just like your other programs. Try it!
+
+----------------------
+
+## The Tutorial Walkthrough
+
+Okay, so, a simple Shoes program.
+
+<div class="row2">
+ <img src="./img/wt/001.png">
+ <pre>
+ <code class="ruby">
+ Shoes.app { button "Push me" }
+ </code>
+ </pre>
+</div>
+
+You can just save the program in a file called little.rb and open it with Shoes.
+The braces `{` and `}` are a kind of container. The button is "in" the app.
+
+----------------------
+
+We can place a few buttons in a *stack*.
+
+<div class="row2">
+ <img src="./img/wt/002.png">
+ <pre>
+ <code class="ruby">
+ Shoes.app {
+ stack {
+ button "A bed of clams"
+ button "A coalition of cheetahs"
+ button "A gulp of swallows"
+ }
+ }
+ </code>
+ </pre>
+</div>
+
+Stacks are essential! The most important two elements in Shoes are *stacks* and *flows*.
+
+----------------------
+
+Okay, let's give the stack a bit of a *margin*. Scoot it out from the edge.
+
+<div class="row2">
+ <img src="./img/wt/003.png">
+ <pre>
+ <code class="ruby">
+ Shoes.app {
+ background white
+ stack(:margin => 8) {
+ button "A bed of clams"
+ button "A coalition of cheetahs"
+ button "A gulp of swallows"
+ }
+ }
+ </code>
+ </pre>
+</div>
+
+We also painted the *background* white. Did you see that?
+
+<!--
+TODO: Make the margin 50. It has to be noticeable.
+TODO: Change the background to another more noticeable colour. Re-screenshot.
+-->
+
+----------------------
+
+Time for something new, artwork! Let's draw!
+
+<div class="row2">
+ <img src="./img/wt/004.png">
+ <pre>
+ <code class="ruby">
+ Shoes.app {
+ oval(
+ :left => 10,
+ :top => 10,
+ :radius => 40
+ )
+ }
+ </code>
+ </pre>
+</div>
+
+The Shoes brush always starts out black.
+
+Notice that while buttons just dropped into the window, we drew the circle at a specific place. At 10 pixels from the left edge of the window and 10 pixels below the top edge.
+
+----------------------
+
+Now, a rectangle and an arrow.
+
+<div class="row2">
+ <img src="./img/wt/005.png">
+ <pre>
+ <code class="ruby">
+ Shoes.app {
+ fill red
+ rect(
+ :left => 10,
+ :top => 10,
+ :width => 40
+ )
+ arrow(
+ :left => 30,
+ :top => 60,
+ :width => 40
+ )
+ }
+ </code>
+ </pre>
+</div>
+
+The *fill* is red on these shapes. And the *stroke* is black. (Because we didn't change it.) These two pens - stroke and fill - draw every shape.
+
+Did you see how the arrow is a little overtop of the rectangle?
+
+<!--
+TODO: Change the colour of the two shapes. Then update the screenshot.
+-->
+
+----------------------
+
+Of course, you can always design your app with an *image*. Even images from the web!
+
+<div class="row2">
+<img src="./img/wt/nks-kidnap.png">
+ <pre>
+ <code class="ruby">
+ Shoes.app {
+ image "http://spiralofhope.com/i/ruby-shoes--nks-kidnap.png"
+ }
+ </pre>
+ </code>
+</div>
+
+<!--
+As of 2011-08-27, GitHub does not allow hotlinking. If a Shoes program tries to use an image that is stored on a GitHub server, nothing will display. This is why this example image must be hosted elsewhere. The image will still be placed in the github repository and referred-to locally, so we don't ever lose it.
+
+The remotely-hosted image was also edited to remove the toolbar. It's been archived locally (nks-kidnap--modified.png) so it doesn't get lost.
+-->
+
+Shoes even caches images in memory and on disk, like browsers do. Images are loaded in background threads as well, to prevent apps from slowing down.
+
+----------------------
+
+Now, a very important element: the *para*. As in: paragraph. Probably the third most important element (after stacks and flows.)
+
+<div class="row2">
+ <img src="./img/wt/007.png">
+ <pre>
+ <code class="ruby">
+ Shoes.app {
+ para strong("Q."), " Are you beginning to grasp hold of Shoes?"
+ }
+ </code>
+ </pre>
+</div>
+
+----------------------
+
+Beyond para, you've got *title* and *subtitle*, which are bigger fonts. You can add a bunch of font styles as well. Look for *strong* and *em* in this bit.
+
+<div class="row2">
+<img src="./img/wt/008.png">
+<pre>
+ <code class="ruby">
+ Shoes.app {
+ stack(:margin => 6) {
+ title "A Question"
+ para strong("Q."), " Are you beginning to grasp hold of Shoes?"
+ para em(strong("A."), " Quit pestering me, I'm hacking here.")
+ }
+ }
+ </code>
+</pre>
+</div>
+
+----------------------
+
+Keep track of stuff by naming them as variables.
+
+<div class="row2">
+<img src="./img/wt/009.png">
+<pre>
+ <code class="ruby">
+ Shoes.app {
+ @push = button "Push me"
+ @note = para "Nothing pushed so far"
+ }
+ </code>
+</pre>
+</div>
+
+----------------------
+
+
+You can then put the variables into action. When the button is clicked, the `@note` changes to the message shown in the picture.
+
+<div class="row2">
+<img src="./img/wt/010.png">
+<pre>
+ <code class="ruby">
+ Shoes.app {
+ @push = button "Push me"
+ @note = para "Nothing pushed so far"
+ @push.click {
+ @note.replace "Aha! Click!"
+ }
+ }
+ </code>
+</pre>
+</div>
+
+----------------------
+
+See if you can figure out this one. How does the gradient work? How are the letters styled?
+
+<div class="row2">
+<img src="./img/wt/011.png">
+<pre>
+ <code class="ruby">
+ Shoes.app do
+ background "#F3F".."#F90"
+ title(
+ "Shoooes",
+ :top => 60,
+ :align => "center",
+ :font => "Trebuchet MS",
+ :stroke => white
+ )
+ end
+ </code>
+</pre>
+</div>
+
+In this example, I used *do* and end *rather* than the braces `{` and `}`. They have the same meaning.
+
+----------------------
+
+Aha, here's a flow. It keeps the text box and the button side-by-side.
+
+<div class="row2">
+<img src="./img/wt/012.png">
+<pre>
+ <code class="ruby">
+ Shoes.app do
+ background "#EFC"
+ border(
+ "#BE8",
+ :strokewidth => 6
+ )
+ stack(:margin => 12) do
+ para "Enter your name"
+ flow do
+ edit_line
+ button "OK"
+ end
+ end
+ end
+ </code>
+</pre>
+</div>
+
+----------------------
+
+In this one, we make a five-point star. And it follows the mouse around as you move.
+
+<div class="row2">
+<img src="./img/wt/013.png">
+<pre>
+ <code class="ruby">
+ Shoes.app do
+ @shape = star(:points => 5)
+ motion do |left, top|
+ @shape.move left, top
+ end
+ end
+ </code>
+</pre>
+</div>
+
+----------------------
+
+On to a taste of animation. The Shoes icon moves randomly a bunch of times each second.
+
+<div class="row2">
+<img src="/img/wt/014.png">
+<pre>
+ <code class="ruby">
+ Shoes.app do
+ @shoes = image(
+ "http://spiralofhope.com/i/ruby-shoes--shoes.png",
+ :top => 100,
+ :left => 100
+ )
+ animate do |i|
+ @shoes.top += (-20..20).rand
+ @shoes.left += (-20..20).rand
+ end
+ end
+ </code>
+</pre>
+</div>
+
+----------------------
+
+<!--
+TODO: Update this screenshot to remove the blank line at the top.
+-->
+
+Remember a few examples ago when we handled a button click? How about doing the same with a link?
+
+<div class="row2">
+<img src="/img/wt/015.png">
+<pre>
+ <code class="ruby">
+ Shoes.app do
+ @poem = stack do
+ para "My eyes have blinked again
+ And I have just realized
+ This upright world
+ I have been in.
+ My eyelids wipe
+ My eyes hundreds of times
+ Reseting and renovating
+ The scenery."
+ end
+ para(
+ link("Clear").click do
+ @poem.clear
+ end
+ )
+ end
+ </code>
+</pre>
+</div>
+
+So, when the link gets clicked, the stack gets cleared. The poem will disappear.
+
+----------------------
+
+Okay, last one for now. Let's generate a hundred random circles. This example also uses the *rgb* method to make colors from red, green and blue fractions.
+
+<div class="row2">
+<img src="/img/wt/016.png">
+ <pre>
+ <code class="ruby">
+ Shoes.app(:width => 300, :height => 400) do
+ fill rgb(0, 0.6, 0.9, 0.1)
+ stroke rgb(0, 0.6, 0.9)
+ strokewidth 0.25
+ 100.times do
+ oval(
+ :left => (-5..self.width).rand,
+ :top => (-5..self.height).rand,
+ :radius => (25..50).rand
+ )
+ end
+ end
+ </code>
+ </pre>
+</div>
+
+Don't worry if you haven't picked up a whole lot reading through these. To get the hang of it, you'll need to alter these yourself. Try fiddling with the numbers and colors. Experiment, you know?
+
+----------------------
+
+![shoes.png](./img/wt/shoes.png)
+
+Ready for more? See the [manuals](http://shoesrb.com/manual/Hello.html) page for a pair of longer instructions. Particularly the guide book [Nobody Knows Shoes](http://cloud.github.com/downloads/shoes/shoes/nks.pdf), which teaches the ten essential commands to get going with Shoes.
+
+<!--
+The pdf should be hosted under direct control, probably shoesrb.com
+-->
+
+
+<!--
+TODO: If any one screenshot is updated, all screenshots must be updated. =(
+TODO: Consider colour for colourblindness? e.g. don't use red.
+-->
Please sign in to comment.
Something went wrong with that request. Please try again.