Rework plugin

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) {
-    var file, match, str;
-    for (var f in files) {
-      file = files[f];
-      match = f.match(fileRegEx);
-      if (match) {
-        if (file.template) {
-          if (file.docs) {
-            file.docs = marked(file.docs);
-          }
-          if (file.contents) {
-            str = marked(file.contents.toString());
-            file.contents = new Buffer(str);
-          }
-          file.js_resource = '<script src="loader.js?id=' + match[1] +
-              '"></script>';
-          var js = files[match[1] + '.js'].contents.toString();
-          file.js_inline = js.replace(cleanupJSRegEx, '');
-          var cssFilename = match[1] + '.css';
-          if (cssFilename in files) {
-            file.css_resource = '<link rel="stylesheet" href="' + cssFilename +
+      // add js tag and source
+      var jsFilename = id + '.js';
+      if (!(jsFilename in files)) {
+        done(new Error('No .js file found for ' + filename));
+        return;
+      }
+      file.js = {
+        tag: '<script src="loader.js?id=' + id + '"></script>',
+        source: files[jsFilename].contents.toString().replace(
+            cleanupJSRegEx, '')
+      };
+
+      // add css tag and source
+      var cssFilename = id + '.css';
+      if (cssFilename in files) {
+        file.css = {
+          tag: '<link rel="stylesheet" href="' + cssFilename + '">',
+          source: files[cssFilename].contents.toString()
+        };
+      }
+
+      // 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) {
-            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.'));
+          file.resources = resources.join('\n');
         }
       }
     }
   }
+  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) {