Merge 11e4958 into 1ceb80b

examples/external-sources/.gitignore

@@ -0,0 +1,2 @@
+# Ignore metalsmith output
+build

examples/external-sources/Readme.md

@@ -0,0 +1,11 @@
+# external-sources
+
+This example shows how to incorporate external data sources into your Metalsmith site. It generates a really simple directory page using a JSON file with names and contact info formatted with a pug layout.
+
+
+
+## How it works
+
+A Metalsmith plugin looks at the metadata of every page. If that page has a `jsonFilePath` item, it `require`s the JSON file and adds it to the page's `jsonData` key. Then, `metalsmith-pug` renders the page's template with the Metalsmith metadata as locals, so the template renders each person in a row in the table.
+
+The plugin works for every page, so any page with a `jsonFilePath` key gets that JSON file loaded into `jsonData`.

examples/external-sources/index.js

@@ -0,0 +1,36 @@
+var Metalsmith = require('metalsmith');
+var pug        = require('metalsmith-pug');
+
+Metalsmith(__dirname)
+    .source('./src')
+    .destination('./build')
+    .clean(false)
+
+    // Middleware to load in a JSON file specified in
+    // YAML front matter. This takes the `jsonFileLocation`
+    // attribute, opens that path, and loads it into
+    // `jsonData` in each page's metadata
+    .use(function(pages, metalsmith, done){
+        for(var pageUrl in pages){
+            if(typeof pages[pageUrl].jsonFileLocation != 'undefined'){
+                pages[pageUrl].jsonData = require(pages[pageUrl].jsonFileLocation);
+                console.log("Loaded json data for page " + pageUrl);
+            }
+        }
+
+        done();
+    })
+
+    // Apply the metalsmith-pug middleware to render Pug
+    // templates with the metalsmith file metadata.
+    .use(pug({
+        // Expose the Metalsmith per-page metadata to
+        // the Pug template.
+        useMetadata: true
+    }))
+
+    // Run the build
+    .build(function(err){
+        if(err) { throw err; }
+        console.log("Done build")
+    })

examples/external-sources/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "external-sources-example",
+  "description": "Incorporate data files into your Metalsmith site.",
+  "main": "index.js",
+  "dependencies": {
+    "metalsmith": "^2.2.0",
+    "metalsmith-pug": "^1.1.0"
+  }
+}

examples/external-sources/people.json

@@ -0,0 +1,20 @@
+[
+    {
+        "firstname":"Laurena",
+        "lastname":"Spiers",
+        "email":"lauspiers@gmail.com",
+        "notes":"Really good dev and Metalsmith expert."
+    },
+    {
+        "firstname":"Bob",
+        "lastname":"Jones",
+        "email":"bob.jones@boring-names.com",
+        "notes":"Not great at parties. Wears khakis."
+    },
+    {
+        "firstname":"James",
+        "lastname":"lewis",
+        "email":"j.lewis@trendy-web-design.io",
+        "notes":"Knows Rails, and has a Travis CI sticker on his laptop."
+    }
+]

examples/external-sources/src/index.pug

@@ -0,0 +1,44 @@
+---
+jsonFileLocation: "./people.json"
+
+---
+
+head
+    title Metalsmith external data example
+
+    style.
+        .container{
+            margin:0 auto;
+            max-width:900px;
+        }
+
+        .people-table{
+            border-collapse: collapse;
+            width:100%;
+        }
+
+        .people-table, th, td{
+            border: 1px solid #ccc;
+        }
+
+body: .container
+    h1 Metalsmith external data example
+    h4 Really really simple directory from a JSON file.
+    p If you change any of the data in the `people.json` file, this table will be updated whenever Metalsmith rebuilds the page. 
+
+    hr
+
+    table.people-table
+        thead
+            tr
+                td: b First name
+                td: b Last name
+                td: b Email address
+                td: b Notes
+        tbody
+            each person in jsonData
+                tr
+                    td= person.firstname
+                    td= person.lastname
+                    td= person.email
+                    td= person.notes