For the first iteration we focused on the static design of the site. A common menu linked to secondary pages. Because Webby lets me use ERB, I can write (and test, naturally) simple helper methods in Ruby to build up the menu:
def menu_items
@pages.find(:all, :in_directory => "/main", :sort_by => 'order')
end
Then in the layout (which is mostly HTML but can also use ERB):
<% menu_items.each do |page| %>
<% if is_current_page?(page) %>
<li class='current'><p><%= page.title %></p> </li>
<% else %>
<li><%= link_to_page(page) %></li>
<% end %>
<% end %>
If this needs to be reused, it too can be moved into a helper - Webby is great for DRYing up site code.
After we had the initial design, we naturally decided to sprinkle some effects. Rather than have the menu links load new pages, we used a JQuery animation to fade in the linked content on the main page. For this iteration, we just had to change our full pages into partials (by simply adding an underscore to the filename). Now in our layout, we can generate each partial's content into hidden divs:
<% @partials.find(:all, :in_directory => "/main") do |partial| %>
<div id='<%= partial.name %>' style='display: none'>
<div><%= render(:partial => partial) %></div>
</div>
<% end %>
Some simple Javascript now lets the menu items update the main content area with a nice fade effect and no full page load.
But now we've actually incurred some information loss: instead of a nice url such as http://somedomain.com/about, our menu links use http://somedomain.com/#, with Javascript doing the work of detecting which link was clicked. Now we can't easily publish our nice urls, plus we might negatively affect SEO. The next iteration fixes that.
Our content pages have become partials, which can easily be re-used. By creating new Webby pages for each content page, we can simply render each partial. So in the about content file, we just have to:
---
title: About Us
order: 1
filter: erb
---
<%= render(:partial => "main/about") %>
and we get back our full, url-addressable content page.
So now after a couple of iterations our site has a bit of sizzle, is SEO-friendly and even works with Javascript turned off! Webby has been a great benefit in achieving this by letting us make small, incremental changes with minimal code duplication. And it means I get to write Ruby code for my HTML/CSS/Javascript website!
