Nannou tutorial

Imagine we need to generate HTML for simple blog application. Blog has a basic layout, with header, footer, simple cascaded side menu, and content part with blog posts of different types: texts, images, cites.

Step 1: Define object structure

First we need to know how our blog data represented by objects. Let blog post with text be:

>>> blog_text = {
...     "meta": {
...             "author": "John Doe",
...             "published": "4, Thursday, 2001"
...     },
...     "message": "Blog post content"
... }

and blog post with image be:

>>> blog_image = {
...     "meta": {
...             "author": "John Doe",
...             "published": "3, Thursday, 2001"
...     },
...     "image": "/media/funnypic.jpg"
... }

Menu represented by simple tree structure:

>>> menu = {
...     'link': '',
...     'title': 'Navigation',
...     'children': [
...             {
...             'link': '/',
...             'title': 'Home',
...             'children': []
...             },
...             {
...             'link': '/pages/about',
...             'title': 'About me',
...             'children': []
...             }]
... }

And a simple basic layout object:

>>> layout = {
...     'title': 'My blog',
...     'menu': menu,
...     'content': [blog_text, blog_image],
...     'footer': '(c) 2011, John Doe'
... }

Step 2: Writing template

Next step we should write template. It consist of patterns — which detects objects by signatures and code snippets — which tells how to generate code from objects.