GitHub - reinh/ruhl: Ruby Hypertext Language

Branches Tags

Name		Name	Last commit message	Last commit date
Latest commit History 49 Commits
lib		lib
spec		spec
.gitignore		.gitignore
README		README
Rakefile		Rakefile
VERSION		VERSION
ruhl.gemspec		ruhl.gemspec

Repository files navigation

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 'data-ruhl' 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 data-ruhl="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 data-ruhl="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">
  <tr data-ruhl="_collection: user_list">
    <td data-ruhl="name">John Doe</td>
    <td data-ruhl="email">john@doe.com</td>
  </tr>
</table>

The above will call the :user_list method and iterate over the results.  For each result it will duplicate the tag and it's contents.  For the above example this means:

  <tr data-ruhl="_collection: user_list">
    <td data-ruhl="name">John Doe</td>
    <td data-ruhl="email">john@doe.com</td>
  </tr>

is duplicated for each user in user_list. 

If user_list return an array of User objects like:

[ User.create(:name => 'Rupert Boy', :email => 'rupert@stonean.com'),
  User.create(:name => 'Kaylee Girl', :email => 'kaylee@stonean.com'),
  User.create(:name => 'Monty Man', :email => 'monty@stonean.com')]

<table id="aab">
  <tr>
    <td>Rupert Boy</td>
    <td>rupert@stonean.com</td>
  </tr>
  <tr>
    <td>Kaylee Girl</td>
    <td>kaylee@stonean.com</td>
  </tr>
  <tr>
    <td>Monty Man</td>
    <td>monty@stonean.com</td>
  </tr>
</table>



~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
:: Using a Layout ::
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Layout:
<html>
  <head>
    <title>This is a title template</title>
  </head>
  <body>
    <div data-ruhl="_render_"></div>
  </body>
</html>

Fragment:
<h1 data-ruhl="generate_h1">I am a templated headline</h1>
<p data-ruhl="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" data-ruhl="_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 data-ruhl 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