Browse files

More work on web site

  • Loading branch information...
1 parent f670b8b commit d16d9ebef58e8bc7c45b3475060475acc5d3d5d0 @winton committed Jul 5, 2011
Showing with 290 additions and 77 deletions.
  1. +71 −39 README.md
  2. +4 −4 bin/stasis
  3. BIN site/arrow.png
  4. +44 −0 site/controller.rb
  5. +6 −23 site/index.html.haml
  6. +111 −11 site/stasis.css.scss
  7. +54 −0 site/stasis.js.coffee
View
110 README.md
@@ -10,23 +10,41 @@ The end goal? Making a high-performance web framework that serves pages solely t
Install
-------
- gem install stasis
+Install via RubyGems:
-Example Project
----------------
+<!-- language:console -->
+
+ $ gem install stasis
+
+Verify the install:
+
+<!-- language:console -->
+
+ $ stasis -h
+
+Templates
+---------
+
+Example directory structure:
+
+<!-- language:console -->
project/
index.html.haml
subdirectory/
index.html.haml
other.txt
-Open terminal and run `stasis` on the project:
+Open terminal and run `stasis`:
+
+<!-- language:console -->
$ cd project
$ stasis
-This generates a `public` directory:
+You now have a `public` directory:
+
+<!-- language:console -->
project/
public/
@@ -44,6 +62,8 @@ Controllers
Let's add controllers to the project:
+<!-- language:console -->
+
project/
controller.rb
index.html.haml
@@ -54,8 +74,8 @@ Let's add controllers to the project:
Each controller executes once before rendering templates at the same directory level or below.
-Before Filters
---------------
+Before
+------
In your controller:
@@ -102,29 +122,29 @@ For example, to ignore paths with an underscore at the beginning (partials):
ignore /_.*/
-Rendering
----------
+Render
+------
-Render within a template:
+Within a template:
%html
%body= render '_partial.html.haml'
-Render within a `before` block:
+Within a `before` block:
before 'index.html.haml' do
@partial = render '_partial.html.haml'
end
-Render text:
+Text:
render :text => 'Hello'
-Render with local variables:
+Local variables:
render 'index.html.haml', :locals => { :x => true }
-Render with a block for the template to `yield` to:
+Include a block for the template to `yield` to:
render 'index.html.haml' { 'Hello' }
@@ -159,32 +179,44 @@ In this example, text files are copied to `public` before `index.html.erb` rende
The default priority is `0`.
-Supported Template Engines
---------------------------
-
-Stasis uses [Tilt](https://github.com/rtomayko/tilt) to support the following template engines:
+More
+----
- ENGINE FILE EXTENSIONS REQUIRED LIBRARIES
- -------------------------- ----------------- ----------------------------
- ERB .erb none (included ruby stdlib)
- Interpolated String .str none (included ruby core)
- Haml .haml haml
- Sass .sass haml
- Less CSS .less less
- Builder .builder builder
- Liquid .liquid liquid
- RDiscount .markdown rdiscount
- RedCloth .textile redcloth
- RDoc .rdoc rdoc
- Radius .radius radius
- Markaby .mab markaby
- Nokogiri .nokogiri nokogiri
- CoffeeScript .coffee coffee-script (+node coffee)
- Slim .slim slim (>= 0.7)
-
-Automatic Regeneration
-----------------------
+### Automatic Regeneration
To continuously regenerate your project as you modify files, run:
- stasis -a
+<!-- language:console -->
+
+ $ stasis -a
+
+### Supported Markup Languages
+
+Stasis uses [Tilt](https://github.com/rtomayko/tilt) to support the following template engines:
+
+<!-- language:console -->
+
+ ENGINE FILE EXTENSIONS
+ -------------------------- ----------------------
+ ERB .erb, .rhtml
+ Interpolated String .str
+ Erubis .erb, .rhtml, .erubis
+ Haml .haml
+ Sass .sass
+ Scss .scss
+ Less CSS .less
+ Builder .builder
+ Liquid .liquid
+ RDiscount .markdown, .mkd, .md
+ Redcarpet .markdown, .mkd, .md
+ BlueCloth .markdown, .mkd, .md
+ Kramdown .markdown, .mkd, .md
+ Maruku .markdown, .mkd, .md
+ RedCloth .textile
+ RDoc .rdoc
+ Radius .radius
+ Markaby .mab
+ Nokogiri .nokogiri
+ CoffeeScript .coffee
+ Creole (Wiki markup) .creole
+ Yajl .yajl
View
8 bin/stasis
@@ -6,17 +6,17 @@ Stasis::Gems.activate %w(slop)
require 'slop'
opts = Slop.parse :help => true do
- on :a, :auto, 'Auto-regenerate'
- on :b, :beanstalk, 'Beanstalk addresses (comma-separated, default: localhost:11300)', :optional => true, :as => Array, :default => "localhost:11300"
- on :o, :only, 'Only generate specific files (comma-separated)', :as => Array
+ on :b, :beanstalk, "Beanstalk addresses\t\t(comma-separated, default: localhost:11300)", :optional => true, :as => Array, :default => "localhost:11300"
+ on :d, :development, "Development mode\t\t(auto-regenerate)"
+ on :o, :only, "Only generate specific files\t(comma-separated)", :as => Array
end
args = []
opts.parse { |arg| args << arg }
dir = args.first || Dir.pwd
-if opts.auto?
+if opts.development?
Stasis::Auto.new(dir)
elsif opts.only?
Stasis.new(dir).generate(:only => opts[:only])
View
BIN site/arrow.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
44 site/controller.rb
@@ -1,10 +1,54 @@
+require 'albino'
require 'nokogiri'
before 'index.html.haml' do
@readme = Nokogiri::HTML(render('../README.md')).css('body')
+
+ # Remove everything before the first <h2> tag
@readme.children.each do |node|
break if node.name == 'h2'
node.remove
end
+
+ # Link <h2> tags
+ @links = @readme.css('h2').collect do |node|
+ href = node.text.downcase
+ name = node.text
+ node.inner_html = '<a name="' + href + '" href="#' + href + '">' + node.inner_html + '</a>'
+ { :name => name, :href => href }
+ end
+
+ @readme.css('pre').each do |pre|
+
+ # Retrieve language from comment
+ language = nil
+ comment = pre.previous.previous
+ if comment && comment.comment?
+ language = comment.content.strip.split('language:')[1]
+ end
+ language ||= :ruby
+
+ # Insert <pre> tags before the previous element (because its floated right)
+ unless pre.previous_element.name == 'h2'
+ pre.previous_element.add_previous_sibling(pre)
+ end
+
+ # Insert <div class="clear"> before each <pre> tag
+ pre.add_previous_sibling('<div class="clear"></div>')
+
+ # Pygmentize
+ pre.replace Albino.colorize(pre.css('code').text, language)
+ end
+
+ # Insert <div class="clear"> before each <h3> tag
+ @readme.css('h3').each do |h3|
+ h3.add_previous_sibling('<div class="clear"></div>')
+ end
+
+ # Replace colons at the end of <p> tags with arrows.
+ @readme.css('p').each do |p|
+ p.inner_html = p.inner_html.strip.gsub(/:$/, '<img src="arrow.png" class="arrow" />')
+ end
+
@readme = @readme.inner_html
end
View
29 site/index.html.haml
@@ -6,31 +6,14 @@
%link{ :href => "http://fonts.googleapis.com/css?family=Amaranth|Open+Sans:400,600,700&v2", :rel => "stylesheet", :type => "text/css" }
%body
%ul
- %li
- %a{ :href => '#install' } Install
- %li
- %a{ :href => '#templates' } Templates
- %li
- %a{ :href => '#controllers' } Controllers
- %li
- %a{ :href => '#before' } Before
- %li
- %a{ :href => '#layouts' } Layouts
- %li
- %a{ :href => '#ignore' } Ignore
- %li
- %a{ :href => '#render' } Render
- %li
- %a{ :href => '#instead' } Instead
- %li
- %a{ :href => '#helpers' } Helpers
- %li
- %a{ :href => '#priority' } Priority
- %li
- %a{ :href => '#more' } More
+ - @links.each do |link|
+ %li
+ %a{ :href => "##{link[:href]}" }= link[:name]
#title
%img{ :src => 'stasis.png' }>
stasis
%img.reverse{ :src => 'stasis.png' }>
#tm Static Sites Made Powerful
- #body~ @readme
+ #body
+ ~ @readme
+ .clear
View
122 site/stasis.css.scss
@@ -1,6 +1,4 @@
// normal: 400, semi-bold: 600, bold: 700
-// font-family: 'Amaranth', sans-serif;
-// font-family: 'Open Sans', sans-serif;
a {
color: #2281D1;
@@ -16,21 +14,25 @@ body {
color: #CCD7E1;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
- margin: 0;
+ margin: 0 0 50px;
}
ul {
background-color: #CCD7E1;
- font-size: 13px;
+ font-size: 14px;
font-weight: 600;
margin: 0;
padding: 0;
+ position: fixed;
text-align: center;
+ top: 0px;
+ width: 100%;
+ z-index: 10000;
li {
display: inline;
line-height: 25px;
- padding: 0 12px;
+ padding: 0 9px;
}
}
@@ -39,7 +41,7 @@ ul {
font-family: 'Amaranth', sans-serif;
font-size: 110px;
font-weight: 400;
- margin-top: 25px;
+ margin-top: 50px;
text-align: center;
text-shadow: 0px 5px 1px rgba(0,0,0,0.07);
@@ -67,31 +69,129 @@ ul {
#tm {
font-size: 19.4px;
font-weight: 700;
- margin-top: 30px;
+ margin-top: 35px;
text-align: center;
}
#body {
- margin: 60px auto 0;
+ margin: 20px auto 0;
width: 800px;
h2 {
- border-bottom: 1px solid #484C4F;
+ border-bottom: 2px solid #434445;
clear: both;
font-size: 19.4px;
padding: 20px 0 5px;
+
+ a {
+ color: #3393E4;
+ }
+ }
+
+ h3 {
+ font-size: 18px;
+ }
+
+ p {
+ font-size: 16px;
+ line-height: 32px;
+ margin: 0;
+ padding: 10px 0 20px;
+
+ .arrow {
+ padding-left: 6px;
+ vertical-align: -1px;
+ }
}
pre {
background-color: #282929;
clear: both;
float: right;
- padding: 10px 15px 10px 20px;
- width: 390px;
+ margin: 10px 0 15px 20px;
+ padding: 10px 15px;
+ width: 360px;
-webkit-box-shadow: rgba(0, 0, 0, 0.25) 0 1px 2px inset;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
+
+ .clear {
+ clear: both;
+ }
+
+ code, pre {
+ font-family: Consolas, Monaco,"Lucida Console";
+ }
+
+ code {
+ background-color: #282929;
+ padding: 4px 4px 2px;
+ }
+
+ .highlight pre {
+ font-size: 13px;
+
+ * { font-family: Consolas, Monaco,"Lucida Console"; }
+ .hll { background-color: #ffffcc }
+ .c { color: #5F5A60; font-style: italic } /* Comment */
+ .err { border:#B22518; } /* Error */
+ .k { color: #CDA869 } /* Keyword */
+ .cm { color: #5F5A60; font-style: italic } /* Comment.Multiline */
+ .cp { color: #5F5A60 } /* Comment.Preproc */
+ .c1 { color: #5F5A60; font-style: italic } /* Comment.Single */
+ .cs { color: #5F5A60; font-style: italic } /* Comment.Special */
+ .gd { background: #420E09 } /* Generic.Deleted */
+ .ge { font-style: italic } /* Generic.Emph */
+ .gr { background: #B22518 } /* Generic.Error */
+ .gh { color: #000080; font-weight: bold } /* Generic.Heading */
+ .gi { background: #253B22 } /* Generic.Inserted */
+ .go { } /* Generic.Output */
+ .gp { font-weight: bold; color: #CF6A4C } /* Generic.Prompt */
+ .gs { font-weight: bold } /* Generic.Strong */
+ .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
+ .gt { } /* Generic.Traceback */
+ .kc { } /* Keyword.Constant */
+ .kd { color: #e9df8f; } /* Keyword.Declaration */
+ .kn { } /* Keyword.Namespace */
+ .kp { color: #9B703F } /* Keyword.Pseudo */
+ .kr { } /* Keyword.Reserved */
+ .kt { } /* Keyword.Type */
+ .m { } /* Literal.Number */
+ .s { } /* Literal.String */
+ .na { color: #F9EE98 } /* Name.Attribute */
+ .nb { } /* Name.Builtin */
+ .nc { color: #9B859D; font-weight: bold } /* Name.Class */
+ .no { color: #9B859D } /* Name.Constant */
+ .nd { color: #7587A6 } /* Name.Decorator */
+ .ni { color: #CF6A4C; font-weight: bold } /* Name.Entity */
+ .nf { color: #9B703F; font-weight: bold } /* Name.Function */
+ .nn { color: #9B859D; font-weight: bold } /* Name.Namespace */
+ .nt { color: #CDA869; font-weight: bold } /* Name.Tag */
+ .nv { color: #7587A6 } /* Name.Variable */
+ .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
+ .w { color: #141414 } /* Text.Whitespace */
+ .mf { color: #CF6A4C } /* Literal.Number.Float */
+ .mh { color: #CF6A4C } /* Literal.Number.Hex */
+ .mi { color: #CF6A4C } /* Literal.Number.Integer */
+ .mo { color: #CF6A4C } /* Literal.Number.Oct */
+ .sb { color: #8F9D6A } /* Literal.String.Backtick */
+ .sc { color: #8F9D6A } /* Literal.String.Char */
+ .sd { color: #8F9D6A; font-style: italic; } /* Literal.String.Doc */
+ .s2 { color: #8F9D6A } /* Literal.String.Double */
+ .se { color: #F9EE98; font-weight: bold; } /* Literal.String.Escape */
+ .sh { color: #8F9D6A } /* Literal.String.Heredoc */
+ .si { color: #DAEFA3; font-weight: bold; } /* Literal.String.Interpol */
+ .sx { color: #8F9D6A } /* Literal.String.Other */
+ .sr { color: #E9C062 } /* Literal.String.Regex */
+ .s1 { color: #8F9D6A } /* Literal.String.Single */
+ .ss { color: #CF6A4C } /* Literal.String.Symbol */
+ .bp { color: #00aaaa } /* Name.Builtin.Pseudo */
+ .vc { color: #7587A6 } /* Name.Variable.Class */
+ .vg { color: #7587A6 } /* Name.Variable.Global */
+ .vi { color: #7587A6 } /* Name.Variable.Instance */
+ .il { color: #009999 } /* Literal.Number.Integer.Long */
+ }
}
View
54 site/stasis.js.coffee
@@ -0,0 +1,54 @@
+###
+$(document).ready(function() {
+ function filterPath(string) {
+ return string
+ .replace(/^\//,'')
+ .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
+ .replace(/\/$/,'');
+ }
+ var locationPath = filterPath(location.pathname);
+ var scrollElem = scrollableElement('html', 'body');
+
+ $('a[href*=#]').each(function() {
+ var thisPath = filterPath(this.pathname) || locationPath;
+ if ( locationPath == thisPath
+ && (location.hostname == this.hostname || !this.hostname)
+ && this.hash.replace(/#/,'') ) {
+ var $target = $(this.hash), target = this.hash;
+ if (target) {
+ var targetOffset = $target.offset().top;
+ $(this).click(function(event) {
+ event.preventDefault();
+ $(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
+ location.hash = target;
+ });
+ });
+ }
+ }
+ });
+
+ // use the first element that is "scrollable"
+ function scrollableElement(els) {
+ for (var i = 0, argLength = arguments.length; i <argLength; i++) {
+ var el = arguments[i],
+ $scrollElement = $(el);
+ if ($scrollElement.scrollTop()> 0) {
+ return el;
+ } else {
+ $scrollElement.scrollTop(1);
+ var isScrollable = $scrollElement.scrollTop()> 0;
+ $scrollElement.scrollTop(0);
+ if (isScrollable) {
+ return el;
+ }
+ }
+ }
+ return [];
+ }
+
+});
+###
+
+(x) ->
+ alert 'test'
+ alert 'test2'

0 comments on commit d16d9eb

Please sign in to comment.