example of modeling webpages with javascript objects

app.js

var foobar = require('foobar')
  , app = foobar()

// this is an example of an entire webpage modeled in this fashion.
// partials may be modeled in this way as well, and most of these
// values should get opinionated defaults

document = {

    // automatically add these to the head, ease of use

    title: 'The Foobar Example Webpage'
  , description: 'There is no example like this one, trust me on this'
  , keywords: 'Example, Foobar, Webpage'
  , doctype: 'html'
  , charset: 'utf-8'
  , http-equiv: { type: 'X-UA-Compatible', content: 'IE=edge' }
  , viewport: 'width=device-width, initial-scale=1'
  , styles: [
        { url: '/css/reset.css' }
      , { url: '/css/main.css' }
      , { url: '/css/example.css' }
    ]

    // begin actual webpage

  , html: {
        head: []
      , body: [
            { tag: 'h1', content: 'foobar' } 
          , { tag: 'div', attributes: ['class="myClass"', 'id="foo"'], content: [
                    { tag: 'p', content: 'foobaaaaar' } // receives id fooclass
                  , { tag: 'p', content: 'foooooobar' }   
            ]}
        ]}
    ]
}

// this can be done with this syntax as well
document.title = 'new title'

// this could be problematic
document.html.body[1].content[0].attributes = ['class="fooClass"']

app.get('/', document)

partial.js

//example of templating

var foobar = require('foobar')
  , app = foobar()

var navbar = {
    tag: 'div'
  , content: [
        { tag: 'h1', content: app.name }
      , { tag: 'ul', content: [
              { tag: 'li', content: 'foobar' }
            , { tag: 'li', content: 'foobar' }
        ]}
    ]
}

var footer = { tag: 'small', content: 'copyright, foobar 2k13!' }

var document = app.template([ navbar, { tag: 'div' }, footer ]) // only done once!

app.get('/', document)