Proper lists for example resources

config/examples/example.html

@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
-    {{{ resources }}}
+    {{{ extra_head }}}
     {{{ css.tag }}}
     <link rel="stylesheet" href="../resources/prism/prism.css" type="text/css">
     <script src="../resources/zeroclipboard/ZeroClipboard.min.js"></script>

examples_src/d3.html

@@ -5,7 +5,9 @@ shortdesc: "Example of using ol3 and d3 together."
 docs: >
   <p>The example loads TopoJSON geometries and uses d3 (<code>d3.geo.path</code>) to render these geometries to a canvas element that is then used as the image of an ol3 image layer.</p>
 tags: "d3"
-resources: "http://d3js.org/d3.v3.min.js,http://d3js.org/topojson.v1.min.js"
+resources:
+  - http://d3js.org/d3.v3.min.js
+  - http://d3js.org/topojson.v1.min.js
 ---
 <div class="row-fluid">
   <div class="span12">

examples_src/overlay.html

@@ -5,7 +5,8 @@ shortdesc: "Demonstrates overlays."
 docs: >
   <p>The popups are created using <a href="http://twitter.github.com/bootstrap/javascript.html#popovers">Popovers</a> from Bootstrap.</p>
 tags: "overlay, popup, bootstrap, popover, mapquest, openaerial"
-resources: overlay.css
+resources:
+  - overlay.css
 ---
 <div class="row-fluid">
   <div class="span12">

examples_src/overviewmap-custom.html

@@ -5,7 +5,8 @@ shortdesc: "Example of OverviewMap control with advanced customization."
 docs: >
   <p>This example demonstrates how you can customize the overviewmap control using its supported options as well as defining custom CSS.  You can also rotate the map using the shift key to see how the overview map reacts.</p>
 tags: "overview, overviewmap"
-resources: overviewmap-custom.css
+resources:
+  - overviewmap-custom.css
 ---
 <div class="row-fluid">
   <div class="span12">

examples_src/polygon-styles.html

@@ -7,7 +7,8 @@ docs: >
    * The first style is for the polygons themselves.
    * The second style is to draw the vertices of the polygons.
 tags: "polygon, vector, style, GeometryFunction"
-resources: polygon-styles.css
+resources:
+  - polygon-styles.css
 ---
 <div class="row-fluid">
   <div class="span12">

examples_src/popup.html

@@ -7,7 +7,8 @@ docs: >
     Click on the map to get a popup.  The popup is composed of a few basic elements: a container, a close button, and a place for the content.  To anchor the popup to the map, an <code>ol.Overlay</code> is created with the popup container.  A listener is registered for the map's <code>click</code> event to display the popup, and another listener is set as the <code>click</code> handler for the close button to hide the popup.
   </p>
 tags: "overlay, popup, mapquest, openaerial"
-resources: popup.css
+resources:
+  - popup.css
 ---
 <div class="row-fluid">
   <div class="span12">

examples_src/readme.md

@@ -7,4 +7,4 @@ The `.html` files in this folder are built by applying the templates in the `con
 * shortdesc: A short description for the example index
 * docs: Documentation of the example. Can be markdown.
 * tags: Tags for the example index
-* resources: Additional js or css resources required by the example. This is a comma separated list of URLs.
+* resources: Additional js or css resources required by the example. This is a YAML list of URLs.

examples_src/sphere-mollweide.html

@@ -5,7 +5,8 @@ shortdesc: "Example of a Sphere Mollweide map with a Graticule component."
 docs: >
   Example of a Sphere Mollweide map with a Graticule component.
 tags: "graticule, Mollweide, projection, proj4js"
-resources: http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.2.1/proj4.js
+resources:
+  - http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.2.1/proj4.js
 ---
 <div class="row-fluid">
   <div class="span12">

tasks/build-examples.js

@@ -70,22 +70,21 @@ function augmentExamples(files, metalsmith, done) {
 
       // add additional resources
       if (file.resources) {
-        var resources = file.resources.split(',');
-        var resource;
-        for (var i = resources.length - 1; i >= 0; --i) {
-          resource = resources[i];
+        var resources = [];
+        for (var i = file.resources.length - 1; i >= 0; --i) {
+          var resource = file.resources[i];
           if (isJsRegEx.test(resource)) {
             resources[i] = '<script src="' + resource + '"></script>';
           } else if (isCssRegEx.test(resource)) {
             resources[i] = '<link rel="stylesheet" href="' + resource +
                 '">';
           } else {
-            done(new Error('Invalid value for "resource": ' +
-                resource + 'is not .js or .css: ' + filename));
+            done(new Error('Invalid value for resource: ' +
+                resource + ' is not .js or .css: ' + filename));
             return;
           }
-          file.resources = resources.join('\n');
         }
+        file.extra_head = resources.join('\n');
       }
     }
   }