   [config]
   (let [vizs (visualizations config)
         viz-link-fn (fn [{path :path title :title}]
-                       [:a.btn.btn-large.span5 {:href path} title])]
-    (vdd-page 
-      "Visualization Driven Development - Core"
-      vizs
-      [:div.hero-unit
-       [:h1 "Visualization Driven Development"]
-       [:p "TODO description here"]]
-      
-      [:div.row
-       [:div.span6
-        [:h3 "Built In Visualizations"]
-        (for [viz (:built-in vizs)]
-          (viz-link-fn viz))]
-       
-       [:div.span6
-        [:h3 "Project Visualizations"]
-        (for [viz (:project vizs)]
-          (viz-link-fn viz))]])))
+                      [:a.btn.btn-large.span5 {:href path} title])]
+    (vdd-page :title "Visualization Driven Development - Core"
+              :viz vizs
+              :content [:div.container 
+                        [:div.hero-unit
+                         [:h1 "Visualization Driven Development"]
+                         [:p "TODO description here"]]
+                        [:div.row
+                         [:div.span6
+                          [:h3 "Built In Visualizations"]
+                          (for [viz (:built-in vizs)]
+                            (viz-link-fn viz))]
+                         [:div.span6
+                          [:h3 "Project Visualizations"]
+                          (for [viz (:project vizs)]
+                            (viz-link-fn viz))]]])))
 
 (defn data-viewer-page
   "Returns a visualization page that allows arbitrary data to be viewed"
   [config]
   (let [vizs (visualizations config)]
-    (vdd-page 
-      "VDD - Data Viewer"
-      vizs
-      [:h1 "Data Viewer"]
-      [:p "TODO some text here describing the data viewer and that it allows you to show arbitrary data in the browser."]
-      [:p "TODO some code here showing an example"]
-      [:div#target]
-      (javascript-tag "$(function() { 
-                      vdd.data.enableDataView($('div#target')); 
-                      });"))))
+    (vdd-page :title "VDD - Data Viewer"
+              :vizs vizs
+              :content [:div.container
+                        [:h1 "Data Viewer"]
+                        [:p "TODO some text here describing the data viewer and that it allows you to show arbitrary data in the browser."]
+                        [:p "TODO some code here showing an example"]
+                        [:div#target "Data will appear here."]]
+              :javascripts [(javascript-tag "$(function() { 
+                                            vdd.data.enableDataView($('div#target')); 
+                                            });")])))

         (for [{path :path title :title} (:project vizs)]
           [:li [:a {:href path} title]])]]]]]]])

(defn- vdd-page 
  "Creates a visualization page taking the page title, the vizs to link to in the
  navbar and the page contents."
  [title vizs & contents]
  (html5 
    [:head 
     [:meta {:charset "utf-8"}]
     [:title title]
     [:meta {:name "viewport" 

                  ; to override the body padding top and bottom styles in smaller pages
                  "/vdd/vdd.css"
                  "/bootstrap/css/bootstrap-responsive.min.css" 
                  )])

(defn- footer []
  [:div.container
    [:footer 
     [:hr]
     [:p "&copy; Jason Gilman 2013"]]])

(defn- vdd-page 
  "Creates a visualization page taking the page title, the vizs to link to in the
  navbar and the page contents."
  [& {title :title vizs :vizs content :content javascripts :javascripts}]
  (html5 
    (head title)
    (vec (concat [:body 
           (navbar vizs)
           content
           (footer)
           (include-js "/jquery/jquery.min.js"
                       "/bootstrap/js/bootstrap.min.js"
                       "/autobahn/autobahn.min.js"
                       "/vdd/vdd-core.js")]
          javascripts))))

(defn- project-visualizations
  "Finds the visualizations available in the configured :viz-root."
