Import colors from Sass palette

examples/aigis_config.yml

@@ -48,7 +48,12 @@ log: false
 # When you don't want color palette page (color.html) you may set false
 color_palette: true
 
-#
+# If you want to parse a color palette Sass file
+# custom_template will look for a file called colors into your template folder
+# color_palette_sass:
+#   file_path: './sass/palette.scss'
+#   custom_template: true
+
 transform:
   - html
 #  - jade
@@ -71,7 +76,6 @@ highlight: true
 highlight_theme: monokai
 lang_prefix: 'language-'
 
-
 # plugin directory
 # plugin: ./plugin
 

examples/run_aigis.js

@@ -4,13 +4,14 @@ var config = {
   name: 'Examples Styleguide',
   source: [ './css', './demo.md' ],
   source_type: [ '.css', '.sass', '.scss', '.styl' ],
-  dest: './styleguide2',
+  dest: './styleguide',
   dependencies: [ './aigis_assets', './css' ],
   index: './index.md',
-  template_engine: 'ejs',
-  template_dir: './template_ejs',
+  template_engine: 'hbs',
+  template_dir: './template_hbs',
   log: false,
   color_palette: true,
+  // color_palette_sass:  { file_path: './sass/palette.scss', custom_template: true},
   transform: [ 'html' ],
   timestamp_format: 'YYYY/MM/DD HH:mm',
   preview_class: 'aigis-preview',

examples/sass/palette.scss

@@ -0,0 +1,2 @@
+$white: #fff;
+$black: #000;

examples/template-json_hbs/colors.hbs

@@ -0,0 +1,6 @@
+<div class="aigis-colorPalette">
+  {{#each colors as |color|}}
+    <div class="aigis-colorPalette__color" style="background-color: {{color.value}};"></div>
+    <div class="aigis-colorPalette__label">{{color.name}}</div>
+  {{/each}}
+</div>

examples/template-json_hbs/sidemenu.hbs

@@ -28,11 +28,15 @@
     </ul>
 
   </nav>
-  <h2 class="aigis-sidemenu__heading">Tag</h2>
-  <nav class="aigis-tags aigis-tagList">
-    {{# each config.collection.tag}}
-      <a class="aigis-tags__item aigis-tags__item--{{this}}" href="{{@root.root}}tag/{{this}}/index.html">{{this}}</a>
-    {{/each}}
-  </nav>
-  <h2 class="aigis-sidemenu__heading"><a href="{{root}}color.html">All Colors</a></h2>
+  {{#if config.collection.tag.length}}
+    <h2 class="aigis-sidemenu__heading">Tag</h2>
+    <nav class="aigis-tags aigis-tagList">
+      {{#each config.collection.tag}}
+        <a class="aigis-tags__item aigis-tags__item--{{this}}" href="{{@root.root}}tag/{{this}}/index.html">{{this}}</a>
+      {{/each}}
+    </nav>
+  {{/if}}
+  {{#if config.color_palette}}
+    <h2 class="aigis-sidemenu__heading"><a href="{{root}}color.html">All Colors</a></h2>
+  {{/if}}
 </div>

examples/template_ejs/colors.ejs

@@ -0,0 +1,6 @@
+<div class="aigis-colorPalette">
+  <% colors.forEach(function(color) { %>
+    <div class="aigis-colorPalette__color" style="background-color: <%- color.value %>;"></div>
+    <div class="aigis-colorPalette__label"><%- color.name %></div>
+  <% })%>
+</div>

examples/template_ejs/sidemenu.ejs

@@ -6,11 +6,15 @@
   <nav class="aigis-categoryList">
     <%- helper.renderCollectionTree('category') %>
   </nav>
-  <h2 class="aigis-sidemenu__heading">Tag</h2>
-  <nav class="aigis-tags aigis-tagList">
-    <% config.collection.tag.forEach(function(tag) { %>
-      <a class="aigis-tags__item aigis-tags__item--<%- tag %>" href="<%- root %>tag/<%- tag %>/index.html"><%- tag %></a>
-    <% }) %>
-  </nav>
-  <h2 class="aigis-sidemenu__heading"><a href="<%- root %>color.html">All Colors</a></h2>
+  <% if (config.collection.tag.length) { %>
+    <h2 class="aigis-sidemenu__heading">Tag</h2>
+    <nav class="aigis-tags aigis-tagList">
+      <% config.collection.tag.forEach(function(tag) { %>
+        <a class="aigis-tags__item aigis-tags__item--<%- tag %>" href="<%- root %>tag/<%- tag %>/index.html"><%- tag %></a>
+      <% }) %>
+    </nav>
+  <% } %>
+  <% if (config.collection.tag) { %>
+    <h2 class="aigis-sidemenu__heading"><a href="<%- root %>color.html">All Colors</a></h2>
+  <% } %>
 </div>

examples/template_hbs/colors.hbs

@@ -0,0 +1,6 @@
+<div class="aigis-colorPalette">
+  {{#each colors as |color|}}
+    <div class="aigis-colorPalette__color" style="background-color: {{color.value}};"></div>
+    <div class="aigis-colorPalette__label">{{color.name}}</div>
+  {{/each}}
+</div>

examples/template_hbs/sidemenu.hbs

@@ -6,11 +6,15 @@
   <nav class="aigis-categoryList">
     {{{renderCollectionTree 'category'}}}
   </nav>
-  <h2 class="aigis-sidemenu__heading">Tag</h2>
-  <nav class="aigis-tags aigis-tagList">
-    {{# each config.collection.tag}}
-      <a class="aigis-tags__item aigis-tags__item--{{this}}" href="{{@root.root}}tag/{{this}}/index.html">{{this}}</a>
-    {{/each}}
-  </nav>
-  <h2 class="aigis-sidemenu__heading"><a href="{{root}}color.html">All Colors</a></h2>
+  {{#if config.collection.tag.length}}
+    <h2 class="aigis-sidemenu__heading">Tag</h2>
+    <nav class="aigis-tags aigis-tagList">
+      {{#each config.collection.tag}}
+        <a class="aigis-tags__item aigis-tags__item--{{this}}" href="{{@root.root}}tag/{{this}}/index.html">{{this}}</a>
+      {{/each}}
+    </nav>
+  {{/if}}
+  {{#if config.color_palette}}
+    <h2 class="aigis-sidemenu__heading"><a href="{{root}}color.html">All Colors</a></h2>
+  {{/if}}
 </div>

examples/template_jade/colors.jade

@@ -0,0 +1,4 @@
+div.aigis-colorPalette
+  each color in colors
+    div.aigis-colorPalette__color(style="background-color: #{color.value}")
+    div.aigis-colorPalette__label #{color.name}

examples/template_jade/sidemenu.jade

@@ -4,9 +4,11 @@
   h2.aigis-sidemenu__heading Category
   nav.aigis-categoryList
     != helper.renderCollectionTree('category')
-  h2.aigis-sidemenu__heading Tag
-  nav.aigis-tags.aigis-tagList
-    each tag in config.collection.tag
-      a.aigis-tags__item(class="aigis-tags__item--" + tag, href=root + 'tag/' + tag + '/index.html') #{tag}
-  h2.aigis-sidemenu__heading
-    a(href=root + 'color.html') All Colors
+  if config.collection.tag.length
+    h2.aigis-sidemenu__heading Tag
+    nav.aigis-tags.aigis-tagList
+      each tag in config.collection.tag
+        a.aigis-tags__item(class="aigis-tags__item--" + tag, href=root + 'tag/' + tag + '/index.html') #{tag}
+  if config.color_palette
+    h2.aigis-sidemenu__heading
+      a(href=root + 'color.html') All Colors

gulpfile.js

@@ -22,9 +22,7 @@ gulp.task("exec:index", function(cb) {
   });
 });
 
-gulp.task("watch",function() {
-  return gulp.watch(src.js, ["exec:index"]);
-});
+gulp.watch(src.js, gulp.series("exec:index"));
 
 gulp.task("serve", function() {
   bs.init({
@@ -41,4 +39,4 @@ gulp.task('test', function() {
   gulp.src('test/**/*.js', {read: false}).pipe(mocha({reporter: 'nyan'}));
 });
 
-gulp.task("default", ["exec:index"]);
+exports.default = gulp.series("exec:index");

lib/Aigis.js

@@ -126,7 +126,7 @@ var Aigis = (function() {
     * get CSS color variables in CSS files.
     * */
     _getAllColors: function(files) {
-      this.options.colors = parser.colors(files);
+      this.options.colors = this.options.color_palette_sass ? parser.sassPalette(this.options.color_palette_sass.file_path) : parser.colors(files);
       return files;
     },
 

lib/parser/index.js

@@ -1,5 +1,6 @@
 module.exports = {
   css: require('./src/css'),
   tree: require('./src/tree'),
-  colors: require('./src/colors')
+  colors: require('./src/colors'),
+  sassPalette: require('./src/sass_palette')
 };

lib/parser/src/sass_palette.js

@@ -0,0 +1,18 @@
+var sassColorJson = require('sass-color-json');
+
+function sassPalette (inputPath) {
+  var colorJson = sassColorJson.sync({ input: inputPath });
+  var colorKeys = Object.keys(colorJson);
+  var colors = [];
+
+  for (var i = 0; i < colorKeys.length; i++) {
+    colors.push({
+      name: '$' + colorJson[colorKeys[i]].name,
+      value: colorJson[colorKeys[i]].type + colorJson[colorKeys[i]].value
+    })
+  }
+
+  return colors;
+}
+
+module.exports = sassPalette;

lib/plugin/index.js

@@ -57,7 +57,7 @@ var Plugin = (function() {
     },
 
     _bulkRegister: function(files, type, dirname) {
-      _.each(files, function(filename) {
+      _.each(files, _.bind(function(filename) {
         var ext = path.extname(filename);
         var name = path.basename(filename, ext);
         var pluginPath = path.join(dirname, filename);
@@ -67,7 +67,7 @@ var Plugin = (function() {
           fn: require(pluginPath)
         };
         this.register(plugin)
-      }, this);
+      }, this));
     },
 
     _loadUserPlugin: function(type) {

lib/renderer/src/engine/base.js

@@ -26,13 +26,13 @@ var Renderer = (function() {
 
     render: function() {
       var collection = {};
-      _.each(this.options.output_collection, function(type) {
+      _.each(this.options.output_collection, _.bind(function(type) {
         collection[type] = this._categorizeByType(type);
-      }, this);
+      }, this));
 
-      var pages = _.map(_.keys(collection), function(type) {
+      var pages = _.map(_.keys(collection), _.bind(function(type) {
         return this._renderCollection(collection[type], type);
-      }, this);
+      }, this));
 
       pages = _.flatten(pages);
       pages.push(this._renderIndex());
@@ -58,10 +58,10 @@ var Renderer = (function() {
         outputPath: outputRelPath
       });
 
-      components = _.map(components, function(component) {
+      components = _.map(components, _.bind(function(component) {
         component.html = marked(component.md, {renderer: this.markedRenderer});
         return component
-      }, this);
+      }, this));
 
       var page = template({
         components: components,
@@ -97,16 +97,25 @@ var Renderer = (function() {
     },
 
     _renderColors: function() {
-      var html = '';
-      var partial =
-        '<div class="aigis-colorPalette">' +
-          '<div class="aigis-colorPalette__color" style="background-color: %s;"></div>' +
-          '<div class="aigis-colorPalette__label">%s</div>' +
-        '</div>';
-
-      var html = _.map(this.options.colors, function(color) {
-        return util.format(partial, color, color);
-      }).join('\n');
+      if (!this.options.color_palette_sass || !this.options.color_palette_sass.custom_template) {
+        var html = '';
+        var partial =
+          '<div class="aigis-colorPalette">' +
+            '<div class="aigis-colorPalette__color" style="background-color: %s;"></div>' +
+            '<div class="aigis-colorPalette__label">%s</div>' +
+          '</div>';
+
+        var html = _.map(this.options.colors, function(color) {
+          var value = color.value || color;
+          var name = color.name || color;
+          return util.format(partial, value, name);
+        }).join('\n');
+      } else {
+        var template = this._loadTemplate('colors');
+        var html = template({
+          colors: this.options.colors
+        });
+      }
 
       var page = this._renderPage({
         title: 'colors',
@@ -119,13 +128,13 @@ var Renderer = (function() {
     },
 
     _renderCollection: function(categorizedModules, type) {
-      var pages = _.map(categorizedModules, function(components, name) {
+      var pages = _.map(categorizedModules, _.bind(function(components, name) {
         return this._renderPage({
           components: components,
           name: name,
           type: type,
         });
-      }, this);
+      }, this));
       return pages;
     },
 

lib/system/src/assets_manager.js

@@ -20,9 +20,9 @@ var AssetsManager = (function() {
     var dest = options.dest;
     this.delete(dest);
     if (_.isArray(src)) {
-      _.each(src, function(src) {
+      _.each(src, _.bind(function(src) {
         this.copy(src, dest);
-      }, this);
+      }, this));
     }
     else {
       this.copy(src, dest);

lib/writer/src/pages.js

@@ -21,9 +21,9 @@ var Writer = (function() {
     write: function(pages, options) {
       var destPath = path.resolve(options.dest);
       console.info(colors.bold.cyan('[Info] Output:', destPath));
-      _.each(pages, function(page) {
+      _.each(pages, _.bind(function(page) {
         this.writePage(page, options);
-      }, this);
+      }, this));
     },
 
     writePage: function(page, options) {

package.json

@@ -35,22 +35,22 @@
     "jade": "^1.9.2",
     "js-beautify": "^1.5.10",
     "js-yaml": "^3.3.0",
-    "lodash": "^3.5.0",
+    "lodash": "^4.17.15",
     "marked": "^0.3.3",
     "moment": "^2.10.2",
     "object-assign": "^4.0.1",
+    "sass-color-json": "^0.4.0",
     "yargs": "^4.3.2"
   },
   "devDependencies": {
     "browser-sync": "^2.7.13",
-    "gulp": "^3.9.0",
+    "gulp": "^4.0.2",
     "gulp-mocha": "^3.0.1",
     "gulp-plumber": "^1.0.0",
     "power-assert": "^1.4.2"
   },
   "scripts": {
     "start": "gulp",
-    "test": "gulp test",
-    "watch": "gulp watch"
+    "test": "gulp test"
   }
 }