article.md

            tasks: ['wintersmith:build'],
            options: {
                spawn: true

---

title: Hello author: the-wintersmith date: 2013-04-30 cover: http://placekitten.com/100/100 <---- Meta data fields from here template: article.jade

Welcome to your new blog! This is the default blog template with RSS, pagination and an archive. There are other templates available -- run `wintersmith new -

Gruntfile.js

'use strict';
var ext = require('./.gruntExt')
module.exports = function (grunt) {

    // Paths and things
    ext.configure({
        path: {
            content: 'contents',
            css: 'contents/css',
            scripts: 'contents/scripts'
        }
    });

    // Styles
    ext.configure({
        sass: {
            styles: {
                files: {
                    '<%= path.css %>/styles.css': 'styles/styles.scss'
                }
            }
        },
        watch: {
            styles: {
                files: 'styles/**/*.scss',
                tasks: ['styles'],
                options: {
                    spawn: true
                }
            }
        }
    });
    ext.registerTask('styles', ['sass:styles']);

    // Components~
    ext.configure({
        sass: {
            cmp: {
                files: [{
                    expand: true,
                    src: 'components/*/*.scss',
                    dest: '.',
                    ext: '.css'
                }]
            }
        },
        jade: {
            cmp: {
                files: [{
                    expand: true,
                    src: 'components/*/*.jade',
                    dest: '.',
                    ext: '.html'
                }]
            }
        },
        typescript: {
            cmp: {
                files: [{
                    expand: true,
                    src: 'components/*/script.ts',
                    dest: '.',
                    ext: '.js'
                }],
                options: {
                    module: 'amd',
                    target: 'es3',
                    basePath: 'src/',
                    sourceMap: true,
                    declaration: true
                }
            }
        },
        iwc: {
            cmp: {
                src: ['components/*'],
                dest: '<%= path.scripts %>/components'
            }
        },
        watch: {
            sass: {
                files: ['components/**/*.scss'],
                tasks: ['sass:cmp'],
                options: {
                    spawn: true
                }
            },
            jade: {
                files: ['components/**/*.jade'],
                tasks: ['jade:cmp'],
                options: {
                    spawn: true
                }
            },
            typescript: {
                files: ['components/**/*.ts'],
                tasks: ['typescript:cmp'],
                options: {
                    spawn: true
                }
            },
            iwc: {
                files: [
                    'components/**/*.css',
                    'components/**/*.js',
                    'components/**/*.html'
                ],
                tasks: ['iwc:cmp'],
                options: {
                    spawn: true
                }
            }
        }
    });
    ext.registerTask('components', ['sass:cmp', 'jade:cmp', 'typescript:cmp', 'iwc:cmp']);

    // Wintersmith
    ext.configure({
        wintersmith: {
            build: {
                options: {
                    action: 'build',
                    config: './config.json'
                }
            }
        },
        connect: {
            build: {
                options: {
                    port: 3009,
                    base: 'build'
                }
            }
        },
        watch: {
            build: {
                files: [
                    'templates/**/*',
                    'contents/**/*',
                    'config.json'
                ],
                tasks: ['wintersmith:build'],
                options: {
                    spawn: true
                }
            }
        }
    });
    ext.registerTask('build', ['wintersmith:build']);

    // Tasks
    ext.initConfig(grunt);
    grunt.registerTask('default', ['styles', 'components', 'build']);
    grunt.registerTask('dev', ['default', 'connect', 'watch']);
};

index.jade

extends layout

block content
  include author
  each article in articles
    article.article.intro
      header
        p.date
          span= moment.utc(article.date).format('DD. MMMM YYYY')
        h2
          a(href=article.url)= article.title
        img(src=article.metadata.cover)  <----- Meta data fields use here
      section.content
        | !{ typogr(article.intro).typogrify() }
        if article.hasMore
          p.more
            a(href=article.url) more

package.json

{
  "dependencies": {
    "moment": "2.3.x",
    "underscore": "1.4.x",
    "typogr": "0.5.x"
  },
  "repository": "none",
  "devDependencies": {
    "matchdep": "~0.3.0",
    "grunt-wintersmith": "0.0.2",
    "grunt-contrib-sass": "~0.7.3",
    "grunt-contrib-watch": "~0.6.1",
    "grunt-contrib-jade": "~0.12.0",
    "grunt-typescript": "~0.3.6",
    "iwc-grunt": "git://github.com/shadowmint/iwc-grunt.git#master",
    "grunt-contrib-connect": "~0.7.1"
  },
  "scripts": {
    "quickstart": "npm install && bower install && grunt dev"
  }
}

Oh yeah, debugging the jade templates, it's just like a for loop in javascript.

If your jade is like:

 = article.foo

And you want to see what's inside that article, you can go:

-for (var key in article) 
=key
=article[key]
br