Rails is great. I love it. I want it to have my babies. But it's not so good at making folks who are stuck in the world of PageMaker and Dreamweaver feel at home. I have some clients who have bricks of html and they just want it to go web-side. Some are actually pretty web-savvy but they don't have any interest in learning rhtml. Or Liquid. They don't want to re-write their html in markdown or textile. And they certainly don't want every revision of a page to go through me and have me charge them just for Railsifying their document. They want to make a page in one of their WYSIWYG editors and post it online. That's it.

Any app is bound to get to a size where it needs an 'About' page, a Privacy Policy, or a Terms of Service. These are not worth their own controllers and often should be managed by the site's owners - not the developer. Ergo: the SimplePages plugin.

Update: The plugin now uses page caching - so you get all the benefits of a db-powered Rails app and all the performance of a static page!

View Plugin in SVN

note: Simple Pages requires the new-and-awesomeproved Engines plugin. Engines is now lightweight and allows any plugin to behave more like a Django app (a feature sorely needed in Rails).

What is SimplePages?

SimplePages provides a full controller/model/view/helper/migration/test stack for managing plain html pages that are editable right from your browser. You paste in your html and everybody else sees your Rails layout with the html inside. It's cake.

How to install SimplePages:

ruby script/plugin install -x http://svn.rails-engines.org/plugins/engines
ruby script/plugin source http://svn.6brand.com/projects/plugins/
ruby script/plugin install -x simple_pages

Add the following line to your config/routes.rb file:

ActionController::Routing::Routes.draw do |map|
  # all your important routes
  map.from_plugin :simple_pages
  # some lower-priority routes
end

And, finally, install the migration with the following command:

ruby script/generate plugin_migration

If you navigate to yoursite.com/pages you'll find you can now start doin' stuff.

Enhancements you should do:

One of the first things you might notice is that errors start popping up with helpful messages. They'll guide you to figuring out how to integrate your authentication scheme into the plugin and they'll remind you if you forgot to do any of the necessary installation. The most important change you should make is to add a method in application.rb called can_manage_pages? and have it test for whether the current user should be allowed to do stuff.

Version control your pages!

SimplePages has built-in support for techno-weenie's acts_as_versioned. Simply install his plugin (and run SimplePage.create_versioned_table if you've already installed SimplePages) and now you'll have access to all changes you make for your pages.

I’ve been mostly table-free for a while now in my layouts but I’ve had a particular bit of trouble with forms. Getting the labels and inputs aligned has been a huge pain because it seems like every form has a tons of exceptions to it and doing anything to the `input` tag means you need to go through and exclude all your radio buttons from it. I don’t know about you but most of my clients look quizzically at radio buttons that are 150px wide.

Enter Definition Lists

 Garbage Burrito has an awesome post about the html tags we’ve all forgotten about – definition lists among them. Thabenksta reintroduced me to this wonderful tag and it’s saved my ass just today.

The thing about definition lists is that they contain sets of pairs. The problem with `ul`s and `divs` has been the the only way to put an `input` into it and making that `input` behave differently than a `label` is to give s special class to the `input` or to the `label`.

Here’s some code that I’ve had to use to make a `ul`-based form with aligned inputs and labels (labels on the left):

<style>
input.radio {
  width: auto;
}
label {
  cursor: pointer;
}
form.aligned label, form.aligned .label {
  margin: 2px 0px;
  border-top: 1px solid #EEE;
  display: block;
  clear: left;
  float: left;
  width: 90px;
  font-size: 1em;
  font-weight: bold;
}
form.aligned input, form.aligned .input, form.aligned textarea {
  margin: 2px 0px;
  display: block;
  clear: none;
  float: left;
}

</style>

That’s a mouthful. And, even worse, its just not pretty.

Here’s an example of an aligned form using a `dl` tag. I put labels in the `dt` and inputs (or whatever, it’s encapsulated!) in the `dd`.

<style>
dt {
  min-height: 1em; /* to make sure it stays aligned if it's empty */
  float: left;
  clear: left;
}
dd {
  min-height: 1em;
  margin-left: 100px;
}

</style>

That’s it. Then it’s not only pretty but also much more semantic to code up my forms:

Onward and upward.