/* ----------------------------------------------------------------- */

app.set('view engine', 'jade');
app.set('views','./views');

/* ----------------------------------------------------------------- */

var express = require('express');
var http = require('http');
var app = express();

app.set('view engine', 'jade');
app.set('views','./views');

app.use(app.router);
app.use(express.static('./public'));
app.locals.pretty = true;

app.get('/', function(req, res) {
  res.render('index', {title:'Learning Jade'});
});

http.createServer(app).listen(3000, function(){
  console.log('App started');
});

/* ----------------------------------------------------------------- */

doctype 5
html

  head
    title #{title}
    style(type='text/css')
      #wrapper {
        font: 14px Arial;
        width: 300px;
        padding: 5px;
        border: 1px solid #ccc;
        margin: 0 auto;
      }
      #content {
        margin: 10px 0;
      }
      .highlighted {
        background: #d0ff5e;
      }

  body
    #wrapper

      h1 #{title}
      #content
        p Jade is intuitive, Jade is logical. Jade makes HTML easy, Jade saves time.
        p.highlighted Here is some highlighted text.
        button#alert Click Me

      footer
        span Copyright &copy; 2013 
        a(href='/') Home

    // script tag at the end to query the DOM straightaway
    script
      var greeting = 'Welcome to Jade';
      document.querySelector('#alert').onclick = function() {
        alert(greeting);
      };

/* ----------------------------------------------------------------- */

div
  span

/* ----------------------------------------------------------------- */

div
  span Hola!

/* ----------------------------------------------------------------- */

div
  div
    div
    button Click Me

/* ----------------------------------------------------------------- */

html
  head
    title Hello
  body Hello World!

/* ----------------------------------------------------------------- */

div: a(href='/about') About Me

/* ----------------------------------------------------------------- */

div: ul: li One

/* ----------------------------------------------------------------- */

div.container: div.content Hello!

/* ----------------------------------------------------------------- */

div.one: div.two: div.three Three levels deep

/* ----------------------------------------------------------------- */

div: span: strong: em: #main

/* ----------------------------------------------------------------- */

p#main-content

/* ----------------------------------------------------------------- */

span#target

/* ----------------------------------------------------------------- */

div#username DiamondDave

/* ----------------------------------------------------------------- */

#social
  #fb Facebook
  #twitter Twitter

/* ----------------------------------------------------------------- */

.highlighted This text is highlighted

/* ----------------------------------------------------------------- */

#target.highlighted ID and class together

/* ----------------------------------------------------------------- */

.highlighted#target Order doesn't matter

/* ----------------------------------------------------------------- */

.highlighted.important Multiple classes

/* ----------------------------------------------------------------- */

p.normal
  .start The text starts here

/* ----------------------------------------------------------------- */

p(id='main', class='hilight special')

/* ----------------------------------------------------------------- */

#main(data-name='Lee')

/* ----------------------------------------------------------------- */

a(href='/main').special#main-link

/* ----------------------------------------------------------------- */

img(src='/images/logo.png')#logo.

/* ----------------------------------------------------------------- */

- user_type = 'regular'
div(class=user_type) Hi

/* ----------------------------------------------------------------- */

div Here goes some text

/* ----------------------------------------------------------------- */

p One-line paragraph

/* ----------------------------------------------------------------- */

button Click Me

/* ----------------------------------------------------------------- */

p
  | one two
  | buckle my shoe

/* ----------------------------------------------------------------- */

pre
  | step 1
  |   step 2
  |     step 3

/* ----------------------------------------------------------------- */

p
  | Username: 
  span.username DiamondDave

/* ----------------------------------------------------------------- */

p
  span Diamond
  span Dave
  | is the
  span  username

/* ----------------------------------------------------------------- */

p.
  one two
  buckle my shoe

/* ----------------------------------------------------------------- */

pre.
  step 1
    step 2
      step 3

/* ----------------------------------------------------------------- */

style
  body {
    padding: 10px;
    font: 14px Arial;
  }

/* ----------------------------------------------------------------- */

script
  var name = 'Dave';
  alert(name);

/* ----------------------------------------------------------------- */

#content

  :markdown

    #Websites

    1. [Wikipedia](http://www.wikipedia.org/)
    2. [Google](http://www.google.com/)
    3. [Yahoo!](http://www.yahoo.com/)

    **IMPORTANT**: Install the `markdown` module

/* ----------------------------------------------------------------- */

doctype
doctype 5
doctype default
doctype transitional
doctype strict
doctype frameset
doctype 1.1
doctype basic
doctype mobile
doctype xml

/* ----------------------------------------------------------------- */

doctype html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
doctype html DIY "-//WHATEVER"
doctype my-custom-doctype

/* ----------------------------------------------------------------- */

app.get('/', function(req, res) {
  res.render('index', {title:'Learning Jade'});
});

/* ----------------------------------------------------------------- */

title #{title}
…
h1 #{title}

/* ----------------------------------------------------------------- */

app.get('/', function(req, res) {
  res.render('index', {
    title: 'Superheroes',
    message: 'The champs are back!',
    html_message: 'The <b>champs</b> are back!'
  });
});

/* ----------------------------------------------------------------- */

- var title = 'Super!'

/* ----------------------------------------------------------------- */

title = 'Super!'

/* ----------------------------------------------------------------- */

p #{title} - #{html_message}

/* ----------------------------------------------------------------- */

p #{title} - !{html_message}

/* ----------------------------------------------------------------- */

img(alt=title, src='/logo.png')

/* ----------------------------------------------------------------- */

actor_type = 'frog'
actor_name = 'Croaky'
territory = 'pond'
territory_name = 'Pondy'

p Once upon a time there was a #{actor_type} named #{actor_name}, in a #{territory} called #{territory_name}. #{actor_name} was loved by everyone in #{territory_name}. 

/* ----------------------------------------------------------------- */

p= title

/* ----------------------------------------------------------------- */

p= html_message

/* ----------------------------------------------------------------- */

p!= html_message

/* ----------------------------------------------------------------- */

p= '&copy; ' + new Date().getFullYear()

/* ----------------------------------------------------------------- */

p= actor_name + ' is a ' + actor_type

/* ----------------------------------------------------------------- */

p= 'Once upon a time there was a ' + actor_type + ' named ' + actor_name + ', in a ' + territory + ' called ' + territory_name +'. '+ actor_name + ' was loved by everyone in '+ territory_name + '.'

/* ----------------------------------------------------------------- */

= title

/* ----------------------------------------------------------------- */

#{title}

/* ----------------------------------------------------------------- */

app.get('/', function(req, res) {
  res.render('index', {
    title: 'Superheroes',
    heroes: [
      {name: 'Fooman', role: 'captain', skills: ['dancing', 'invisibility']},
      {name: 'Barman', role: 'entertainer', skills: ['bar tending', 'x-ray vision']},
      {name: 'Napman', role: 'hacker', skills: ['computer hacking', 'nunchucks']},
      {name: 'Zipman', role: 'collector', skills: ['zipping', 'flight']}
    ]
  });
});

/* ----------------------------------------------------------------- */

- for (var i in heroes) {
  div #{i}. #{heroes[i].name}
- }

/* ----------------------------------------------------------------- */

- for (var i in heroes)
  div #{i}. #{heroes[i].name}

/* ----------------------------------------------------------------- */

- if (typeof(title) != 'undefined')
  = title
- else
  = 'Title is missing'

/* ----------------------------------------------------------------- */

- heroes.forEach(function(hero, i) {
  div= hero.name
- })

/* ----------------------------------------------------------------- */

pre

  n = 10
  - while (n > 0)
    = n + '\n'
    - n--

/* ----------------------------------------------------------------- */

- function greet(name)
  p Hi #{name}!

- greet('Fred')
- greet('Ned')

/* ----------------------------------------------------------------- */

if hero.role == 'captain'
  .msg Aye Captain!
else if hero.role == 'hacker' && hero.name != 'Napman'
  .msg Who goes there?
else
  .msg Avast!

/* ----------------------------------------------------------------- */

for hero in heroes
  div= hero.name

/* ----------------------------------------------------------------- */

for hero, i in heroes
  div Hero No.#{i} - #{hero.name}

/* ----------------------------------------------------------------- */

for hero in heroes
  if hero.role == 'hacker'
    div Got the hacker!
    - break
  div= hero.role

/* ----------------------------------------------------------------- */

i = 0

while i < 5
  div= i
  i++

/* ----------------------------------------------------------------- */

each hero in heroes
  unless hero.role == 'captain'
    div #{hero.name}, report for duty!

/* ----------------------------------------------------------------- */

each hero in heroes
  if hero.role != 'captain'
    div #{hero.name}, report for duty!

/* ----------------------------------------------------------------- */

case hero.role
  when 'captain'
    div Yarr!
  when 'hacker'
    div w00t!
  default
    div Avast!


/* ----------------------------------------------------------------- */

h1 Included Header

/* ----------------------------------------------------------------- */

The Main Content
----------------
A **Markdown** file was included and rendered in the HTML.

/* ----------------------------------------------------------------- */

<div id="footer">Footer &copy; 2013</div>

/* ----------------------------------------------------------------- */

body {
  padding: 10px;
  font: 14px Arial, sans-serif;
}
a {
  color: #0066ff;
}

/* ----------------------------------------------------------------- */

alert('JavaScript included');

/* ----------------------------------------------------------------- */

!!! 5
html
  head
    title Include Examples
    include includes/style.css
  body
    include includes/header.jade
    include includes/content.md
 p ... and here is something original from the Jade file.
    include includes/footer.html
    include includes/script.js

/* ----------------------------------------------------------------- */

!!! 5
html
  head
    title Learning Inheritance
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
p The inherited content goes below:
    block content
    block footer

/* ----------------------------------------------------------------- */

extends layout

block content
  h2 Image Content
  img(src='/images/01.jpg') 

block footer
  #footer Images - Copyright &copy; 2013

/* ----------------------------------------------------------------- */

extends layout

block content
  h2 Text Content
  p.
    Jade is intuitive, Jade is logical.
Jade makes HTML easy, Jades saves time.

block footer
  #footer Text - Copyright &copy; 2013

/* ----------------------------------------------------------------- */

!!! 5
html
  head
    block head
      script(src='/library.js')
  body
    block content
      p Default Content
    block footer
      #footer The original footer

/* ----------------------------------------------------------------- */

extend layout-demo

prepend head
  script(src='/one.js')

append head
  script(src='/two.js')

block content
  p Inherited Content

/* ----------------------------------------------------------------- */

//- Define the mixin
mixin skills_list
  ul
    li Dancing
    li Computer Hacking
    li Nunchucks

//- Call the mixin
mixin skills_list

/* ----------------------------------------------------------------- */

[
  {name: 'Fooman', role: 'captain'},
  {name: 'Barman', role: 'entertainer'},
  {name: 'Napman', role: 'hacker'},
  {name: 'Zipman', role: 'collector'}
]

/* ----------------------------------------------------------------- */

mixin heroes_list(hero)
  if hero.role == 'captain'
    li Captain #{hero.name}
  else
    li #{hero.name}

ul
  each hero in heroes
    +heroes_list(hero)

/* ----------------------------------------------------------------- */

skills = ['Dancing', 'Computer Hacking', 'Nunchucks'];

mixin skills_list
  ul
    each skill in skills
      li.skill= skill

+skills_list

/* ----------------------------------------------------------------- */

p
&#61; message

/* ----------------------------------------------------------------- */

p
  !&#61; message

/* ----------------------------------------------------------------- */

p \#{message}

/* ----------------------------------------------------------------- */

p \!{message}

/* ----------------------------------------------------------------- */

p \\#{message}

/* ----------------------------------------------------------------- */

p \\!{message}

/* ----------------------------------------------------------------- */

// Here is a comment
p Howdy?

/* ----------------------------------------------------------------- */

//- This comment will not be shown in the HTML
p Something interesting

/* ----------------------------------------------------------------- */

//
  p This paragraph will be commented out

/* ----------------------------------------------------------------- */

//-
  p This paragraph won't even show up in the HTML

/* ----------------------------------------------------------------- */

// if lt 8
  script
    alert('Upgrade your browser!');
