lavender/lavender

jade-esque templates for PHP 5.3

Lavender

Lavender is a templating language for php loosely based on jade., _(*1)

installation

via composer:, _(*2)

first get yourself some composer. next you need to make yourself a composer.json, here's an example., _(*3)

{
  "require": {
    "lavender/lavender": "*"
  }
}

then run php composer.phar install or composer install depending on how you installed composer. once composer has finished it will generate an autoloader in vendor/autoload.php which you can require() from your application's bootstrap process., _(*4)

via git:, _(*5)

add the lavender submodule with git submodule add git@github.com:golavender/lavender.git <folder to clone to> and include it with require "<where you put lavender>/src/Lavender/lavender.php", _(*6)

usage

once you have installed and included lavender the only required configuration is to tell lavender where the views directory is., _(*7)

Lavender::config(array(

  /*
   * required - path to views directory
   */
  'view_dir'       => String,

  /*
   * optional - cache view files, if this is true
   *            the cache folder needs to be emptied
   *            every time view files are changed
   */
  //'caching'        => FALSE,

  /*
   * optional - defaults to something random in your tmp directory
   */
  //'cache_dir'      => NULL,

  /*
   * optional - defaults to "lavender"
   */
  //'file_extension' => String,

  /*
   * optional - defaults to TRUE
   *
   * renders a debugging error page instead of throwing an exception.
   * in production you should disable this and use a 500 page.
   */
  //'handle_errors'  => Boolean, 
));

rendering a template is as easy as, _(*8)

$output = Lavender::view('some_template')->compile();

// or if you need to pass data into the template (probably the case)

$output = Lavender::view('some_template')->compile(array(
  'data'      => 'some data that the template will use',
  'more_data' => "moar data",
));

language reference

html:, _(*9)

section#some_id.foo.bar(attribute1='foo',attribute2='bar')

becomes, _(*10)

<section id="some_id" class="foo bar" attribute1="foo" attribute2="bar"></section>

child nodes are indented below their parent, _(*11)

section.foo
  div(data-something='foo') 
  div(data-something='bar') 

becomes, _(*12)

<section class="foo">
  <div data-something="foo"></div>
  <div data-something="bar"></div>
</section>

there is a shortcut if you just want a div, you can skip right to class or id definitions, _(*13)

.foobar text text
#foobar text text

becomes, _(*14)

<div class="foobar">text text</div>
<div id="foobar">text text</div>

text can be added to nodes in two ways, _(*15)

section.foo
  div(data-something='foo') this is some text 
  div(data-something='bar')
    | this is also some text 

Lavender knows not to put a closing tag on certain nodes. (we got the list from here), _(*16)

input(type="text",value="fooooobar")

becomes, _(*17)

<input type="text" value="fooooobar">

doctype:, _(*18)

do you always forget the syntax for doctype? Lavender exists to solve your first world problems. just throw a !!! at the top of your layout and you get yourself a nice html doctype. doctypes supported are html, transitional, strict, frameset, 1.1, basic and mobile. here are some pretty examples., _(*19)

!!!

defaults to html but you can also specify, _(*20)

!!! html

the word doctype works too, _(*21)

doctype html

```lavender doctype strict, <sub>(*22)</sub>

**comments**

comments are a thing

```lavender
// this is an html comment. it will be rendered to the page
//- this is a lavender comment. it will not be rendered

conditional comments, <sub>(*23)</sub>

the IE shorthand can be used to generate conditional comments for Internet Explorer. check out this if you're not farmiliar with conditional comments., <sub>(*24)</sub>

IE
  script(src="some script to make IE work")
IE lt 7
  script(src="some script to make super old IE work")

becomes, <sub>(*25)</sub>

<!--[if IE]>
  <script src="some script to make IE work"></script>
<![endif]-->
<!--[if lt IE 7]>
  <script src="some script to make super old IE work"></script>
<![endif]-->

variables:, <sub>(*26)</sub>

lavender views can be passed variables from the parent php application or they can be defined right in the template., <sub>(*27)</sub>

this just assigns a variable without outputting anything to the page, <sub>(*28)</sub>

- some_variable = "this is stored in a variable"

note the - symbol, which evaluates an expression without outputting. the content of the variable can then later be output using the = symbol, <sub>(*29)</sub>

- some_variable = "this is stored in a variable"

span.foo= some_variable

span.bar
  = some_variable

becomes, <sub>(*30)</sub>

<span class="foo">this is stored in a variable</div>
<span class="bar">this is stored in a variable</div>

arrays too, <sub>(*31)</sub>

- some_array = ['foo', 'bar', 'baz']

and associative arrays, <sub>(*32)</sub>

- some_array = {key1: 'foo', key2: 'bar', key3: 'baz'} 

conditionals:, <sub>(*33)</sub>

markup can be conditionally rendered using the if keyword. Lavender supports all the conditional operations you know and love !, &&, ||, <. >, <=, >=, ==, != and does a truthy check against the result., <sub>(*34)</sub>

- some_variable = "this is stored in a variable"

if some_variable
  span.foo= some_variable

if some_variable_that_doesnt_exist
  span.foo this won't be rendered

if FALSE
  div this isn't rendered
elseif FALSE
  div still not rendered
elseif TRUE
  div wooooooooo
else
  div sadface

becomes, <sub>(*35)</sub>

<span class="foo">this is stored in a variable</div>
<div>wooooooooo</div>

TRUE and FALSE (and true and false) are keywords in Lavender, they can be assinged to variables or used in conditionals directly (but if you actually do that then wat), <sub>(*36)</sub>

- my_variable = TRUE

if my_variable
  div this will show up

if false
  div this will not

loops:, <sub>(*37)</sub>

Lavender supports iterating over arrays and associative arrays with the each keyword, <sub>(*38)</sub>

ul
  each value in some_random_array
    li= value 

ul
  each value, key in some_random_array
    li(data-key=key)= value 

you may have noticed how i snuck in using variables for your html attributes there, yea you can do that too., <sub>(*39)</sub>

else:, <sub>(*40)</sub>

the else keyword can be used after loops or conditionals, <sub>(*41)</sub>

if FALSE
  div will not show up
else
  div will show up

- empty_array = []

each value in empty_array
  div nothing to see here
else
  div empty array!

math:, <sub>(*42)</sub>

math. you can do it. supported operators are %, +, -, *, /, (, ), <sub>(*43)</sub>

div
  | 1 + 1 = 
  = 1 + 1

div
  | 2 - 3 = 
  = 2 - 3

div
  | 2 * 3 = 
  = 2 * 3

div
  | 10 / 5 = 
  = 10 / 5

ul
  each value, key in some_random_array
    if key % 2 == 0
      li(data-key=key)= value 

include:, <sub>(*44)</sub>

partials are a thing, <sub>(*45)</sub>

span stuff and things

div.content
  include /path/relative/to/view/directory/somefile

div.content
  include /path/relative/to/view/directory/somefile with {stuff: "Asdfasdf"}

extends:, <sub>(*46)</sub>

Lavender supports block style layout extension. this means that in the parent template you define blocks using the block keyword. then in the child template you only have blocks which override the blocks in the parent template, <sub>(*47)</sub>

so if this was layout.lavender, <sub>(*48)</sub>

h1 this is a pretty cool web page

block header
  | you can put some default content in here
  | it will be displayed if no child template
  | overrides it

div.content
  block content

and this is the child template, <sub>(*49)</sub>

extends layout

block header
  div
    span
      | foo bar baz


block content
  | content
  | more content
  | moar content

and you were to render the child temlate, you would get, <sub>(*50)</sub>

this is a pretty cool web page






  foo bar baz







  content
  more content
  moar content

a special case has been added to allow definining variables at the top of your child templates, these variables can be referenced from the layout to do cool things like specifying a list of javascript files necessary for a template to work or setting the page title., <sub>(*51)</sub>

whitespace

newlines are added automatically after every html element, if you don't want the newline you can add a - to the node definition like so., <sub>(*52)</sub>

p
  a(href="/some/place")- click here for some cool stuff
  |.

automagic whitespace management is hard and subject to change., <sub>(*53)</sub>

filters

programatic expressions in Lavender are a little limited, none of your favorite php functions are available for modifying the template data. this is by design, we don't think there should be a ton of logic in templates when that logic could be in controllers or models. however since you have to be able to do some templating logic we added filters. it's super easy to add your own filters to Lavender and there are (or will be) plenty in place out of the box. here's how they work., <sub>(*54)</sub>

- myvariable = "some really cool text"

div
  span
    | i'm gonna filter some stuff. it's gonna be cool. 
    = myvariable | upper 

becomes, <sub>(*55)</sub>

```html, <sub>(*56)</sub>

```` profound right? not that we invented this, we copied the idea from twig. the filters Lavender comes with are:, <sub>(*57)</sub>

upper: ="string"|upper becomes STRING, <sub>(*58)</sub>

trim: =" string "|trim becomes string, <sub>(*59)</sub>

title: ="this is a title"|title becomes This Is A Title, <sub>(*60)</sub>

split: "these are some words"|split(' ') becomes the array ['these', 'are', 'some', 'words'], <sub>(*61)</sub>

sort: "these are some words"|split(' ')|sort becomes the array ['are', 'some', 'these', 'words'], <sub>(*62)</sub>

capitalize: = "these are some words"|capitalize becomes These are some words, <sub>(*63)</sub>

date: = "1396372567"|date becomes 4/1/2014 = "1396372567"|date('Y') becomes 2014, <sub>(*64)</sub>

default: = []|default('foobar') becomes foobar, <sub>(*65)</sub>

first: = ['asdf','qwer']|first becomes asdf, <sub>(*66)</sub>

join: = ['asdf','qwer']|join becomes asdf qwer = ['asdf','qwer']|join('-') becomes asdf-qwer, <sub>(*67)</sub>

last: = ['asdf','qwer']|last becomes qwer = ['asdf','qwer', 'zxcv']|last(2)|join('-') becomes qwer-zxcv, <sub>(*68)</sub>

keys: {'asdf': 'foo','qwer': 'bar'}|keys becomes the array ['asdf', 'qwer'], <sub>(*69)</sub>

length: = ['asdf','qwer']|length becomes 2, <sub>(*70)</sub>

lower: = "FOO BAR"|lower becomes foo bar, <sub>(*71)</sub>

nl2br: = "new\nline"|nl2br becomes new<br>line, <sub>(*72)</sub>

round: = 12345.123|round(2) becomes 12345.12, <sub>(*73)</sub>

merge: ['foo', 'bar']|merge(['baz']) becomes the array ['foo', 'bar', 'baz'], <sub>(*74)</sub>

replace: = "foo bar"|replace(' ', '-') becomes foo-bar, <sub>(*75)</sub>

reverse: ['asdf', 'qwer']|reverse becomes the array ['qwer', 'asdf'], <sub>(*76)</sub>

slice: ['foo', 'bar', 'baz']|slice(1, 1) becomes the array ['bar'], <sub>(*77)</sub>

number_format: = 10000000000.12345|number_format() becomes 10,000,000,000 = 10000000000.12345|number_format(2, ',', '.') becomes 10.000.000.000,12, <sub>(*78)</sub>

ceil: = 10000000000.12345|ceil becomes 10000000001, <sub>(*79)</sub>

floor: = 10000000000.12345|floor becomes 10000000000, <sub>(*80)</sub>

relative: if you had a timestamp variable timestamp|relative would return things like 'just now' or 'in 3 days' or 6 minutes ago, <sub>(*81)</sub>

contains: = ['asdf', 'qwer']|contains('asdf') returns TRUE, <sub>(*82)</sub>

is:, <sub>(*83)</sub>

= ['asdf', 'qwer']|is('list') returns TRUE, <sub>(*84)</sub>

= {asdf: 'qwer'}|is('object') returns TRUE, <sub>(*85)</sub>

= 8|is('number') returns TRUE, <sub>(*86)</sub>

= myVariable|is('My_Class_Name') also works, <sub>(*87)</sub>

json: = ['asdf', 'qwer']|json returns "['asdf','qwer']", <sub>(*88)</sub>

url_encode: = user@email.com|url_encode becomes user%40email.com, <sub>(*89)</sub>