Ruhl (Ruby Hypertext Language)

This project is here to flesh out an idea. What I want is to have developers work with HTML and with the simple addition of a ‘ruby’ attribute, convert it to a dynamic page.

At no time in the dev process would the view be unviewable in a browser.

The view could actually retain the original template data the designer used because this replaces the content. I think this is a nice plus.

Notes (use cases) for me to remember:

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Basic Use

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<h1 ruby=“page_header”>

Method :page_header would know how to represent itself in the context of the h1 element.

The ruby executed would replace the content of the element it was being called on.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Replacing attribute values

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<meta ruby=“content: meta_description” content=‘This is a description template’ 

id='metaDescription' name='description' />

content: meta_description is telling the parser to replace attribute ‘content’ with results from meta_description method.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Don’t use iterators in views

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<table id=“aab” ruby=“_collection: user_list”>

<tr>
  <td ruby="name">John Doe</td>
  <td ruby="email">[email protected]</td>
</tr>

</table>

A few things to note about this:

1) The method _collection calls (in this case :user_list) must implement :each

2) Ruhl iterates over the results and renders the inner html 

against each object.

3) Ruhl will first try to call the ruby method (:name) against the 

local object.  If the local object does not respond_to? the ruby method,
Ruhl will try to call it against the scope.

If user_list return an array of User objects like:

[ User.create(:name => ‘Rupert Boy’, :email => ‘[email protected]’),

User.create(:name => 'Kaylee Girl', :email => '[email protected]'),
User.create(:name => 'Monty Man', :email => '[email protected]')]

<table id=“aab”>

<tr>
  <td>Rupert Boy</td>
  <td>[email protected]</td>
</tr>
<tr>
  <td>Kaylee Girl</td>
  <td>[email protected]</td>
</tr>
<tr>
  <td>Monty Man</td>
  <td>[email protected]</td>
</tr>

</table>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Using a Layout

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Layout: <html>

<head>
  <title>This is a title template</title>
</head>
<body>
  <div ruby="_render_"></div>
</body>

</html>

Fragment: <h1 ruby=“generate_h1”>I am a templated headline</h1> <p ruby=“my_content”>Lorem ipsum dolor sit amet</p>

To use:

Ruhl::Engine.new(File.read(fragment), :layout => path_to_layout).render(self)

Returns the expected result of parsed Layout w/ parsed Fragment.

Note the use of the render method. This is a ‘special’ method that Ruhl uses to inject the results of the parsed fragment into the layout.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Using a Partial

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Main: <html>

<head>
  <title>This is a title template</title>
</head>
<body>
  <div id="wrap">
    <div id="sidebar" ruby="_partial: sidebar_partial">
      <h3>Sidebar links</h3>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
      </ul>
    </div>
    <div id="main">
      <h1> My main content</h1>
      <p>Text designers would put here to test their layout</p>
    </div>
  </div>
</body>

</html>

Sidebar: <h3>Real Sidebarlinks</h3> <ul>

<li><a href="#">Real Link 1</a></li>
<li><a href="#">Real Link 2</a></li>
<li><a href="#">Real Link 3</a></li>
<li><a href="#">Real Link 4</a></li>

</ul>

To use:

Ruhl::Engine.new(File.read(path_to_main)).render(self)

Returns the expected result of parsed Main with sidebar div contents replaced with parsed sidebar partial contents.

Note the use of the _partial key. This is a ‘special’ key that Ruhl uses to inject the results of the parsed partial into the contents of the calling node.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Notes

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  • No eval (I don’t think eval is evil, it’s just not the way this works)

  • The ruby attribute is always removed from the output.

  • Each method called must accept a tag parameter.

    e.g def page_header(tag)

  • Since it’s just HTML, syntax highlighting is built-in.

    For vim, just add this to your ~/.vimrc:

    au BufNewFile,BufRead *.ruhl set filetype=html

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

TODO

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

1) Test more scenarios