From 6d318dce781f6f20a8a907d87e57abf301d270dc Mon Sep 17 00:00:00 2001
From: Tim Schaub <tim.schaub@gmail.com>
Date: Mon, 6 Apr 2015 05:01:50 -0600
Subject: [PATCH] Rework plugin

---
 config/examples/example.html |  14 ++---
 tasks/build-examples.js      | 118 +++++++++++++++++++++--------------
 2 files changed, 79 insertions(+), 53 deletions(-)

diff --git a/config/examples/example.html b/config/examples/example.html
index a72220b572..a6ddf6a5a2 100644
--- a/config/examples/example.html
+++ b/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="css">{{ css_inline }}</textarea>
+          <textarea class="hidden" name="js">{{ js.source }}</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>
diff --git a/tasks/build-examples.js b/tasks/build-examples.js
index 71e33e45ec..b80b094f04 100644
--- a/tasks/build-examples.js
+++ b/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) {