chore(demos): start ionic-demo page

Author: ajoslin

docs/docs.config.js

@@ -25,11 +25,16 @@ module.exports = function(config) {
   config.set('versionData', versionData);
   config.set('rendering.contentsFolder', path.join('docs', versionData.current.folder));
 
+  config.set('demos.outputFolder', path.join(__dirname, '../tmp/ionic-demo'));
+
   config.set('processing.api-docs', {
     outputPath: 'api/${docType}/${name}/index.md',
     path: 'api/${docType}/${name}/',
     moduleOutputPath: 'api/module/${name}/index.md',
-    modulePath: 'api/module/${name}/'
+    modulePath: 'api/module/${name}/',
+    mergeableTypes: {
+      demo: 'demos'
+    }
   });
 
   config.append('rendering.filters', [
@@ -59,10 +64,10 @@ module.exports = function(config) {
   config.append('processing.processors', [
     require('./processors/latest-version'),
     require('./processors/keywords'),
-    require('./processors/pages-data'),
     require('./processors/index-page'),
     require('./processors/version-data'),
-    require('./processors/jekyll')
+    require('./processors/jekyll'),
+    require('./processors/demos')
   ]);
 
   return config;

docs/processors/demos.js

@@ -0,0 +1,119 @@
+var path = require('canonical-path');
+var log = require('winston');
+var _ = require('lodash');
+
+var currentVersion;
+var contentsFolder;
+module.exports = {
+  name: 'demos',
+  runAfter: ['api-docs'],
+  runBefore: ['index-page'],
+  description: 'Create demos',
+  init: function(config) {
+    currentVersion = config.get('currentVersion');
+    contentsFolder = config.get('rendering.contentsFolder');
+  },
+  process: function(docs, config, extraData) {
+    var demoTags = [
+      'javascript',
+      'html',
+      'css',
+      'spec',
+      'scenario'
+    ];
+    var extensions = {
+      javascript: 'js',
+      html: 'html',
+      css: 'css',
+      spec: 'js',
+      scenario: 'js'
+    };
+
+    var demoFolder = path.join(config.get('versionData.current.folder'),
+                               '${docType}/${name}');
+    var demoPath = '${name}/${filename}.${extension}';
+    var templatePath = 'demo/${filename}.template.${extension}';
+
+    var allDemos = [];
+    _(docs)
+    .filter(function(doc) { return doc.demos; })
+    .forEach(function(doc) {
+      var outputFolder = _.template(demoFolder,doc);
+
+      doc.demos.forEach(function(demo) {
+        var demoData = {};
+        allDemos.push(demoData);
+
+        var outputFolder = _.template(demoFolder, doc);
+        demoData.module = demo.module;
+        demoData.name = demo.name;
+        demoData.docName = doc.name;
+        demoData.href = '/' + outputFolder + '/' + demo.name;
+
+        demoTags.forEach(function(tagName) {
+          var data = demo.tags.tagsByName[tagName];
+
+          if (data && data.length) {
+            var content = data.map(function(d) {
+              return d.description;
+            }).join('\n');
+            var filename = tagName;
+            var ext = extensions[tagName];
+            var outputPath = outputFolder + '/' + _.template(demoPath, {
+              name: demo.name,
+              filename: filename,
+              extension: ext
+            });
+            var template = _.template(templatePath, {
+              filename: filename,
+              extension: ext
+            });
+
+            demoData[tagName] = {
+              path: outputPath,
+              content: content
+            };
+
+            //Write all the files for this demo (html, css, js)
+            docs.push({
+              docType: 'demo',
+              id: doc.name + '/' + demo.name,
+              outputPath: config.get('demos.outputFolder') + '/' + outputPath,
+              template: template,
+              contents: content
+            });
+          }
+
+        });
+        var outputPath = outputFolder + '/' + _.template(demoPath, {
+          name: demo.name,
+          filename: 'index',
+          extension: 'html'
+        });
+
+        //Write this specific demo's index page
+        docs.push({
+          docType: 'demo',
+          outputPath: path.join(config.get('demos.outputFolder'), outputPath),
+          template: 'demo_index.template.html',
+          demoData: demoData,
+          name: doc.name
+        });
+      });
+    })
+    .value();
+
+    //Write the demo page for this whole version (eg at /nightly)
+    docs.push({
+      docType: 'demo',
+      template: 'demo_index.template.html',
+      outputPath: path.join(
+        config.get('demos.outputFolder'),
+        config.get('versionData.current.folder'),
+        'index.html'
+      )
+    });
+
+    extraData.demos = allDemos;
+  }
+};

docs/processors/pages-data.js

@@ -16,10 +16,11 @@ module.exports = [
       });
     }
   },
-  {
-    name: 'codepen'
-  },
-  {
-    name: 'alias'
-  }
+  { name: 'codepen' },
+  { name: 'alias' },
+  { name: 'demo' },
+  { name: 'javascript' },
+  { name: 'css' },
+  { name: 'html' },
+  { name: 'ngModule' }
 ];

docs/tag-defs/index.js

@@ -4,6 +4,7 @@
 <@ block additional @>
 
   <@ block usage @>
+<pre><$ doc | json $></pre>
 <h2 id="usage">Usage</h2>
   <@ if doc.usage @>
 <$ doc.usage $>

docs/templates/api/directive.template.html

@@ -0,0 +1 @@
+<$ doc.contents $>

docs/templates/demo/css.template.css

@@ -0,0 +1 @@
+<$ doc.contents $>

docs/templates/demo/html.template.html

@@ -0,0 +1 @@
+<$ doc.contents $>

docs/templates/demo/javascript.template.js

@@ -0,0 +1 @@
+<$ doc.contents $>

docs/templates/demo/scenario.template.js

@@ -0,0 +1 @@
+<$ doc.contents $>