Rework plugin

config/examples/example.html

@@ -9,7 +9,7 @@
     <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 }}}
-    {{{ css_resource }}}
+    {{{ css.tag }}}
     <link rel="stylesheet" href="../resources/prism/prism.css" type="text/css">
     <script src="../resources/zeroclipboard/ZeroClipboard.min.js"></script>
     <title>{{ title }}</title>
@@ -46,8 +46,8 @@
         <form method="POST" target="_blank" action="http://jsfiddle.net/api/post/jquery/1.11.0/">
           <input type="button" class="btn btn-info" id="copy-button" value="Copy example code">
           <input type="submit" class="btn btn-primary" id="jsfiddle-button" value="Create JSFiddle">
-          <textarea class="hidden" name="js">{{ js_inline }}</textarea>
+          <textarea class="hidden" name="js">{{ js.source }}</textarea>
-          <textarea class="hidden" name="css">{{ css_inline }}</textarea>
+          <textarea class="hidden" name="css">{{ css.source }}</textarea>
           <textarea class="hidden" name="html">{{ contents }}</textarea>
           <input type="hidden" name="wrap" value="l">
           <input type="hidden" name="resources" value="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css,https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js,https://cdnjs.cloudflare.com/ajax/libs/ol3/{{ ol_version }}/ol.css,https://cdnjs.cloudflare.com/ajax/libs/ol3/{{ ol_version }}/ol.js">
@@ -61,9 +61,9 @@
 &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/{{ ol_version }}/ol.css" type="text/css"&gt;
 &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/{{ ol_version }}/ol.js"&gt;&lt;/script&gt;
 {{ resources }}
-{{#if css_inline}}
+{{#if css.source}}
 &lt;style&gt;
-{{ css_inline }}
+{{ css.source }}
 &lt;/style&gt;
 {{/if}}
 &lt;/head&gt;
@@ -73,7 +73,7 @@
 {{ contents }}
 &lt;/div&gt;
 &lt;script&gt;
-{{ js_inline }}
+{{ js.source }}
 &lt;/script&gt;
 &lt;/body&gt;
 &lt;/html&gt;</code></pre>
@@ -85,7 +85,7 @@
     <script src="../resources/bootstrap/js/bootstrap.min.js"></script>
     <script src="../resources/example-behaviour.js"></script>
     <script src="../resources/prism/prism.min.js"></script>
-    {{{ js_resource }}}
+    {{{ js.tag }}}
 
   </body>
 </html>

tasks/build-examples.js

@@ -6,7 +6,7 @@ var templates = require('metalsmith-templates');
 var marked = require('marked');
 var pkg = require('../package.json');
 
-var fileRegEx = /([^\/^\.]*)\.html$/;
+var markupRegEx = /([^\/^\.]*)\.html$/;
 var cleanupJSRegEx = /.*(goog\.require(.*);|.*renderer: exampleNS\..*,?)[\n]*/g;
 var isCssRegEx = /\.css$/;
 var isJsRegEx = /\.js$/;
@@ -15,64 +15,91 @@ var srcDir = path.join(__dirname, '..', 'examples_src');
 var destDir = path.join(__dirname, '..', 'examples');
 var templatesDir = path.join(__dirname, '..', 'config', 'examples');
 
-function main(callback) {
+/**
+ * A Metalsmith plugin that adds metadata to the example HTML files.  For each
+ * example HTML file, this adds metadata for related js and css resources. When
+ * these files are run through the example template, the extra metadata is used
+ * to show the complete example source in the textarea and submit the parts to
+ * jsFiddle.
+ *
+ * @param {Object} files The file lookup provided by Metalsmith.  Property names
+ *     are file paths relative to the source directory.  The file objects
+ *     include any existing metadata (e.g. from YAML front-matter), the file
+ *     contents, and stats.
+ * @param {Object} metalsmith The metalsmith instance the plugin is being used
+ *     with.
+ * @param {function(Error)} done Called when done (with any error).
+ */
+function augmentExamples(files, metalsmith, done) {
+  for (var filename in files) {
+    var file = files[filename];
+    var match = filename.match(markupRegEx);
+    if (match && filename !== 'index.html') {
+      if (!file.template) {
+        done(new Error('Missing template in YAML front-matter:' + filename));
+        return;
+      }
+      var id = match[1];
+      if (file.docs) {
+        file.docs = marked(file.docs);
+      }
+      if (file.contents) {
+        file.contents = new Buffer(marked(file.contents.toString()));
+      }
 
-  function build(files) {
+      // add js tag and source
-    var file, match, str;
+      var jsFilename = id + '.js';
-    for (var f in files) {
+      if (!(jsFilename in files)) {
-      file = files[f];
+        done(new Error('No .js file found for ' + filename));
-      match = f.match(fileRegEx);
+        return;
-      if (match) {
+      }
-        if (file.template) {
+      file.js = {
-          if (file.docs) {
+        tag: '<script src="loader.js?id=' + id + '"></script>',
-            file.docs = marked(file.docs);
+        source: files[jsFilename].contents.toString().replace(
-          }
+            cleanupJSRegEx, '')
-          if (file.contents) {
+      };
-            str = marked(file.contents.toString());
+
-            file.contents = new Buffer(str);
+      // add css tag and source
-          }
+      var cssFilename = id + '.css';
-          file.js_resource = '<script src="loader.js?id=' + match[1] +
+      if (cssFilename in files) {
-              '"></script>';
+        file.css = {
-          var js = files[match[1] + '.js'].contents.toString();
+          tag: '<link rel="stylesheet" href="' + cssFilename + '">',
-          file.js_inline = js.replace(cleanupJSRegEx, '');
+          source: files[cssFilename].contents.toString()
-          var cssFilename = match[1] + '.css';
+        };
-          if (cssFilename in files) {
+      }
-            file.css_resource = '<link rel="stylesheet" href="' + cssFilename +
+
+      // 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];
+          if (isJsRegEx.test(resource)) {
+            resources[i] = '<script src="' + resource + '"></script>';
+          } else if (isCssRegEx.test(resource)) {
+            resources[i] = '<link rel="stylesheet" href="' + resource +
                 '">';
-            file.css_inline = files[cssFilename].contents.toString();
+          } else {
+            done(new Error('Invalid value for "resource": ' +
+                resource + 'is not .js or .css: ' + filename));
+            return;
           }
-          if (file.resources) {
+          file.resources = resources.join('\n');
-            var resources = file.resources.split(',');
-            var resource;
-            for (var i = resources.length - 1; i >= 0; --i) {
-              resource = 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 {
-                callback(new Error(f + ': Invalid value for "resource": ' +
-                    resource + ' is no .js or .css.'));
-              }
-              file.resources = resources.join('\n');
-            }
-          }
-        } else if (f !== 'index.html') {
-          callback(new Error(f + ': Invalid YAML front-matter.'));
         }
       }
     }
   }
+  done();
+}
 
-
+function main(callback) {
   new Metalsmith('.')
       .source(srcDir)
       .destination(destDir)
       .metadata({
         'ol_version': pkg.version
       })
-      .use(build)
+      .use(augmentExamples)
       .use(templates({
         engine: 'handlebars',
         directory: templatesDir
@@ -82,7 +109,6 @@ function main(callback) {
       });
 }
 
-
 if (require.main === module) {
   main(function(err) {
     if (err) {