Prepare for bundling of generated CSS/docs

examples/styledocco.html

@@ -6,12 +6,12 @@
     <script>
       var styledocco = {
         project: {
-          name: "StyleDocco",
+          name: 'StyleDocco',
           stylesheets: [
-            '../web/app.css',
-            '../web/bar.css',
-            '../web/views/navbar.css',
-            '../web/views/preview.css'
+            { name: 'App',     path: '../web/app.css' },
+            { name: 'Bar',     path: '../web/bar.css' },
+            { name: 'Nav Bar', path: '../web/views/Navbar.css' },
+            { name: 'Preview', path: '../web/views/Preview.css' }
           ],
           includes: [
             'styledocco-examples.css'

web/app.js

@@ -10,8 +10,8 @@ var project = window.styledocco.project;
 // =====================
 var async = require('async');
 var _ = require('underscore');
-var $ = require('jquery');
 var Backbone = require('backbone');
+var $ = Backbone.$ = require('jquery-browserify');
 
 
 // Internal modules
@@ -26,24 +26,30 @@ var DocuView = require('./views/Documentation');
 
 // Initialize models
 // =================
-
-// Wrapper around jQuery.ajax to make it compatible with async.
-var ajax = function (path, cb) {
-  $.ajax(path, {
-    success: function (data, code, req) { cb(null, data, code, req); },
-    error: function (req, err, ex) { cb(ex || new Error(err), req); }
-  });
-};
-
 var docus = new DocuCollection();
-_.forEach(project.stylesheets, function (file) {
-  docus.add(new Docu({ path: file }));
+_.forEach(project.stylesheets, function (ss) {
+  if (ss.name == null || (ss.path == null && ss.css == null)) return;
+  var params = { name: ss.name };
+  if (ss.path) {
+    params.path = ss.path;
+  } else {
+    params.css = ss.css;
+    params.docs = ss.docs;
+    params.isLocal = true;
+  }
+  docus.add(new Docu(params));
 });
 
 if (project.includes) {
-  async.map(project.includes, ajax, function (err, res) {
-    docus.forEach(function (docu) {
-      docu.set('extraCss', res.join(''));
+  _.forEach(project.includes, function (path) {
+    var ext = path.match(/\.(css|js)$/i);
+    if (ext == null) return;
+    var type = ext[1].toLowerCase();
+    type = type.charAt(0).toUpperCase() + type.slice(1);
+    $.ajax(path).done(function (code) {
+      docus.forEach(function (docu) {
+        docu.set('include' + type, code);
+      });
     });
   });
 }
@@ -70,7 +76,7 @@ var Router = Backbone.Router.extend({
 // ================
 // The only place where we interact with the pre-existing DOM.
 
-$(doc).ready(function() {
+$(doc).ready(function () {
 
   var router = new Router();
   // Disable `pushState` as there are no server routes

web/index.jade

@@ -13,7 +13,8 @@ html
 
           // Array of CSS file paths to document.
           stylesheets: [
-            // 'stylesheet.css',
+            { name: 'Main',
+              path: 'stylesheet.css' }
           ],
 
           // Paths to optional CSS and/or JavaScript to include in previews.

web/models/Documentation.js

@@ -9,24 +9,25 @@ Backbone.$ = require('jquery');
 var Model = Backbone.Model;
 var marked = require('marked');
 marked.setOptions({ sanitize: false, gfm: true });
-var path = require('path');
 var styledocco = require('../../styledocco');
+var path = require('path');
 
 
 var Documentation = Model.extend({
 
   defaults: {
     name: '',
     css: '',
-    extraCss: '',
+    includeCss: '',
+    includeJs: '',
     path: '',
-    docs: 'Loading stylesheet documentation…'
+    docs: 'Loading stylesheet documentation…',
+    isLocal: false
   },
 
-  initialize: function() {
+  initialize: function () {
     _.bindAll(this);
-    this.fetch();
-    this.set('name', this.baseFileName(this.get('path')));
+    if (!this.isLocal) this.fetch();
   },
 
 
@@ -58,16 +59,11 @@ var Documentation = Model.extend({
     );
   },
 
-  parse: function(res) {
+  parse: function (res) {
     return {
       css: this.normalizePaths(res),
       docs: styledocco(res)
     };
-  },
-
-  // Get a filename without the extension and leading _
-  baseFileName: function(name) {
-    return path.basename(name, path.extname(name)).replace(/^_/, '');
   }
 
 });

web/views/Navbar.css

@@ -7,7 +7,7 @@
     <a href="#" class="brand :hover">StyleDocco</a> */
 .brand {
   float: left;
-  margin-right: 20px;
+  margin-right: 1.5em;
   font-weight: bold;
   text-decoration: none;
 }
@@ -39,7 +39,7 @@
 }
 .menu a {
   display: block;
-  margin-right: 15px;
+  margin-right: 1.5em;
 }
   .menu a:hover {
     color: hsl(200, 0%, 0%);

web/views/Navbar.js

@@ -11,7 +11,9 @@ var BrandView = View.extend({
   tagName: 'a',
   className: 'brand',
 
-  attributes: { href: './' },
+  attributes: {
+    href: location.protocol + '//' + location.host + location.pathname
+  },
 
   render: function() {
     this.el.innerText = this.model.get('name');

web/views/Preview.js

@@ -1,9 +1,9 @@
-'use strict'; /*global $:false,Prism:false*/
+'use strict'; /*global Prism:false*/
 
 var _ = require('underscore');
 /*var Prism = */require('../vendor/prism');
 var Backbone = require('backbone');
-Backbone.$ = require('jquery-browserify');
+var $ = Backbone.$ = require('jquery-browserify');
 var View = Backbone.View;
 
 var make = require('../../share/domsugar')(document);
@@ -83,15 +83,17 @@ var PreviewView = View.extend({
     return this;
   },
 
-  updateHtml: function() {
+  updateHtml: function () {
     this.iframe.contentDocument.body.innerHTML = this.$codeEl.text();
     this.trigger('iframeChange');
   },
-  updateCss: function() {
+  updateCss: function () {
     var coll = this.model.collection;
-    var css = coll.pluck('css').join('') + this.model.get('extraCss');
-    this.getIframeDoc(_.bind(function(doc) {
+    var css = coll.pluck('css').join('') + this.model.get('includeCss');
+    var js = this.model.get('includeJs');
+    this.getIframeDoc(_.bind(function (doc) {
       doc.head.getElementsByTagName('style')[0].textContent = css;
+      doc.head.getElementsByTagName('script')[0].textContent = js;
       this.trigger('iframeChange');
     }, this));
     return this;
@@ -102,7 +104,6 @@ var PreviewView = View.extend({
     }, this));
   },
 
-
   highlight: function() {
     this.$codeEl.html(
       Prism.highlight(this.getText(), Prism.languages.markup)