Skip to content

jacksonwillis/hir

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

45 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

hir: HTML in Ruby

Build Status

$ gem install hir

Examples

Ruby as HTML!

require "hir"

hir { strong "Hello, world!" } #=> "<strong>Hello, world!</strong>"

Nesting elements

hir do
  h1 "grocery list"

  ul do
    li "apple"
    li "cheese"
    li "milk"
  end
end #=> "<h1>grocery list</h1><ul><li>apple</li><li>cheese</li><li>milk</li></ul>"

Attributes and self-closing tags

hir { meta! charset: "UTF-8" } #=> "<meta charset='UTF-8'/>"
hir { p "Lorem ipsum", class: "foo" } #=> "<p class='foo'>Lorem ipsum</p>"

Use outside of the hir block by including the module HIR::Tags

include HIR::Tags
header { h1 "lol" } #=> "<header><h1>lol</h1></header>"

Extension

Declare your own tags!

HIR::Tags.add_tag :myTag
hir { myTag "test" } #=> "<myTag>test</myTag>"

Custom tags

def error_box(content = "", &block)
  hir { div(content, class: "error", &block) }
end

error_box                        #=> "<div class='error'></div>"
error_box "An error has occured" #=> "<div class='error'>An error has occured</div>"

error_box "The following errors have occured:" do
  ul do
    li "FuntimeError"
    li "StackUnderflowError"
  end
end #=> "<div class='error'>The following errors have occured:<ul><li>FuntimeError</li><li>StackUnderflowError</li></ul></div>"

Template layout

require "hir"

def default_layout(&content)
  hir do
    doctype!
    html do
      head do
        title "hir test"
        meta! charset: "UTF-8"
      end
      body do
        header do
          h1 "hir test"
        end
        section(nil, id: "content", &content)
      end
    end
  end
end

default_layout { p "Lorem ipsum, dolor sit amet" }
#=> "<!DOCTYPE html>\n<html><head><title>hir test</title>" \
#   "<meta charset='UTF-8'/></head><body><header><h1>hir test</h1></header>" \
#   "<section id='content'><p>Lorem ipsum, dolor sit amet</p></section></body></html>"