Following up on my earlier post about Rails deployment (it can still be a pain), I’ve made my first little Ruby CMS using eRuby (i.e. Ruby without Rails). The idea is simple: Google has a wonderful word processor that clients can use to edit web pages. Why not harness that ability for simple web pages that need just a little bit of content editing here and there?

The GetDoc class uses hpricot to parse and cache a public Google document, and then show the result wherever is needed in the web page. Here is a sample .rhtml file from the project. The source code is available at github:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<%
  require File.join(File.dirname(__FILE__), "ruby/get_doc")
  # Default document is a Google word processing document
  google_doc = GetDoc.new("dcjnq5tv_4gw4qk2")

  # Getting a document from somewhere other than google
  # docs is possible, but it is a little more complicated,
  # because we need to specify the following:
  # 1. The URL of the post without the domain
  # 2. The domain of the blog, and the location in the
  #    string to insert the post (%s)
  # 3. A transformation proc which can extract the content
  #    from the blog using hpricot
  blog_post = GetDoc.new(
    "2008/07/15/lucky-to-be-a-programmer",
    "http://blog.inquirylabs.com/%s") do |hpricot|
      (hpricot / ".PostHead h1:first").to_html +
      (hpricot / ".PostContent:first").inner_html
  end

  # Uncomment the following line to have the cache cleared
  # for EVERY page load:
  # GetDoc.reset_cache
%>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>Sample GetDoc Page</title>
    <style type="text/css" media="screen">
      #left {
        width: 50%;
        float: left;
      }
      #right {
        width: 50%;
        float: right;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="top">
        <div id="header">
          <div id="title">Sample GetDoc Page</div>
        </div>
        <div id="content">
          <div id="left">
            <h1>Google Doc</h1>
            <%= google_doc %>
          </div>
          <div id="right">
            <div class="sideitem">
              <h1>Blog Post</h1>
              <%= blog_post %>
            </div>
          </div>
        </div>
    </div>
  </body>
</html>

Note that it is also possible (as demonstrated above) to customize GetDoc for blogs or other sources of HTML data. What a wonderful web!