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,32 +15,60 @@ 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
-  function build(files) {
+ * example HTML file, this adds metadata for related js and css resources. When
-    var file, match, str;
+ * these files are run through the example template, the extra metadata is used
-    for (var f in files) {
+ * to show the complete example source in the textarea and submit the parts to
-      file = files[f];
+ * jsFiddle.
-      match = f.match(fileRegEx);
+ *
-      if (match) {
+ * @param {Object} files The file lookup provided by Metalsmith.  Property names
-        if (file.template) {
+ *     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) {
-            str = marked(file.contents.toString());
+        file.contents = new Buffer(marked(file.contents.toString()));
-            file.contents = new Buffer(str);
       }
-          file.js_resource = '<script src="loader.js?id=' + match[1] +
+
-              '"></script>';
+      // add js tag and source
-          var js = files[match[1] + '.js'].contents.toString();
+      var jsFilename = id + '.js';
-          file.js_inline = js.replace(cleanupJSRegEx, '');
+      if (!(jsFilename in files)) {
-          var cssFilename = match[1] + '.css';
+        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_resource = '<link rel="stylesheet" href="' + cssFilename +
+        file.css = {
-                '">';
+          tag: '<link rel="stylesheet" href="' + cssFilename + '">',
-            file.css_inline = files[cssFilename].contents.toString();
+          source: files[cssFilename].contents.toString()
+        };
       }
+
+      // add additional resources
       if (file.resources) {
         var resources = file.resources.split(',');
         var resource;
@@ -52,27 +80,26 @@ function main(callback) {
             resources[i] = '<link rel="stylesheet" href="' + resource +
                 '">';
           } else {
-                callback(new Error(f + ': Invalid value for "resource": ' +
+            done(new Error('Invalid value for "resource": ' +
-                    resource + ' is no .js or .css.'));
+                resource + 'is not .js or .css: ' + filename));
+            return;
           }
           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) {