The document discusses creating static websites using Rails 3.1. It recommends generating a new Rails project using the 45north template, creating a PagesController with static views, using layouts, partials and helpers for DRY code, internationalizing text with locales, leveraging the asset pipeline for assets, using SCSS for stylesheets, and implementing views with Haml for cleaner HTML. Templates, partials, helpers and the asset pipeline allow creating DRY, well-structured static sites in Rails.

1. Statische websites in Rails 3.1
- Maar waarom?
- Rails 3.1 project aanmaken met 45north_template
- PagesController aanmaken met statische views
- Layout, partials en helpers gebruiken
- Lo(l)cales
- Asset pijpleiding in Rails 3.1
- SCSS >>>>>>>>>>>>>>>> (twee schermen verder) >>> CSS
- Haml >>>> ERB

2. 45north_template
- Simpele manier om Rails 3.1 template te maken
- Github repo: https://github.com/45north/45north_template
~/.bash_profile
function rails3() {
curl "https://raw.github.com/45north/45north_template/master/generate_template" | bash -s "$@";
cd "$@";
}
Terminal
rails3 rails3_static

3. Statische Views
Terminal
rails g controller pages
/app/controllers/pages_controller.rb
class PagesController < ApplicationController
def index
end
def about
end /config/routes.rb
get "about" => "pages#about", :as => :about
def contact
get "contact" => "pages#contact", :as => :contact
end
root :to => "pages#index"
end
/app/views/pages
/ index.html.haml / about.html.haml / contact.html.haml
- content_for(:title, "Home") - content_for(:title, "About") - content_for(:title, "Contact")
%h1 Home %h1 About %h1 Contact

4. Layout
- Alle standaard HTML in layout stoppen
- Yield = Awesome
/app/views/layouts/application.html.haml
!!! HTML5
%html
%head
%title Rails 3 Static - #{yield(:title)}
= stylesheet_link_tag("application")
= javascript_include_tag("application")
= csrf_meta_tags
%body
%ul#menu
%li= link_to("Home", :root)
%li= link_to("About", :about)
%li= link_to("Contact", :contact)
= yield

5. Partials
- Partials = DRY
- Voor grote stukken HTML die vaker voorkomen
- Template Inheritance in Rails 3.1
/app/views/application/_menu.html.haml
DRY
%ul#menu
%li= link_to("Home", :root)
%li= link_to("About", :about)
%li= link_to("Contact", :contact)
Partial toevoegen DON’T REPEAT YOURSELF
%body
= render("menu")
= yield

6. Helpers
- Helpers = DRY
- Helpers voor kleine stukken HTML die vaker voorkomen
/app/helpers/application_helper.rb
module ApplicationHelper
def menu_li(lbl, path, *args)
options = args.extract_options!
options.merge!(:class => "active") if url_for(path) == request.fullpath
DRY
content_tag(:li, link_to(lbl, path), options)
end
end
Helper aanroepen
%ul#menu
DON’T REPEAT YOURSELF
= menu_li("Home", :root)
= menu_li("About", :about)
= menu_li("Contact", :contact)

7. Locales
- Statische teksten » Locale
- YAML (bijna net zo awesome als Haml)
/config/locales/en.yml
en:
home:
page_title: "Home"
about:
page_title: "About"
contact: Meer weten?
page_title: "Contact"
http://guides.rubyonrails.org/
i18n.html
Locale aanspreken
= t("home.page_title")

8. Asset pipeline Meer weten?
http://guides.rubyonrails.org/
JavaScript, CSS en Images asset_pipeline.html
/public = No-way
/app/assets = Yes-way # => Speciaal voor jouw applicatie.
/lib/assets = Yes-way # => Je eigen libraries.
/vendor/assets = Yes-way # => Libraries van anderen.
/app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require_tree .
/app/assets/stylesheets/application.css
/*
*= require_self
*= require_tree .
*/

9. SCSS = SASS + CSS syntax
- Standaard in Rails 3.1
/app/assets/stylesheets/application.css.scss
$primary-color: #500;
$focus-color: #f00;
@mixin menu {
padding: 0; margin: 0;
float: left; width: 100%;
list-style: none;
li { Meer weten?
float: left;
a { color: $primary-color; } http://sass-lang.com/
&.active a { color: $focus-color; }
}
}
#menu {
@include menu;
}

10. Haml
- Makkelijker HTML schrijven
- Beter dan ERB (duh)
- 2 spaces (soft tab)
- Lange regels = No-go
%h1.my_class H1-tag met class
%span#my_id Span-tag met id
#header Div-tag met id
.footer Div-tag met class
= "Ruby code uitvoeren en laten zien"
- "Ruby code uitvoeren en niet laten zien" Meer weten?
/ HTML comment
%ul
http://haml-lang.com/
%li
Nesten doe
je zo.
%li En zo
%li= "En zo met Ruby"
%li{ :name => "attribuut" }
%li(name="attribuut")

11. DEMO TIME!
https://github.com/RobinBrouwer/rails3_static