Merge branch 'release/0.5.3'

frontend · Jun 14, 2016 · e5adc32 · e5adc32
2 parents 2a78ee4 + b158130
commit e5adc32
Show file tree

Hide file tree

Showing 18 changed files with 126 additions and 72 deletions.
diff --git a/app/templates/_package.json b/app/templates/_package.json
@@ -2,6 +2,7 @@
   "name": "<%= slug(name).toLowerCase() %>",
   "version": "0.0.0",
   "main": "index.html",
+  "browserify-shim": {},
   "dependencies": {<% if (bootstrap4) { %>
     "bootstrap": "[email protected]:twbs/bootstrap.git#v4-dev",<% } else if (bootstrapSass) { %>
     "bootstrap-sass": "~3.3.5",<% } %>
@@ -15,7 +16,9 @@
     "babel-core": "6.8.0",
     "babel-loader": "6.2.4",
     "babel-preset-es2015": "^6.6.0",
+    "babelify": "^7.3.0",
     "browser-sync": "^2.7.1",
+    "browserify-shim": "^3.8.12",
     "casperjs": "^1.1.0-beta3",
     "chai": "^3.4.1",
     "contentful-metalsmith": "^0.1.0",
@@ -76,6 +79,8 @@
     "stylelint": "^6.2.2",
     "swig": "^1.4.2",
     "toolbox-utils": "^0.0.2",
+    "vinyl-buffer": "^1.0.0",
+    "vinyl-source-stream": "^1.1.0",
     "yargs": "^4.3.2"
   }
 }
diff --git a/app/templates/assets/js/index.js b/app/templates/assets/js/index.js
@@ -0,0 +1,2 @@
+// You will use that file to import all your scripts
+// Ex: import gallery from './gallery';
diff --git a/app/templates/assets/js/main.js b/app/templates/assets/js/main.js
diff --git a/app/templates/assets/sass/styleguide-variables.scss b/app/templates/assets/sass/styleguide-variables.scss
@@ -1,5 +1,5 @@
-$accent-color: #f04c00;
-$heading-color: #fff;
-$text-color: #242426;
-$menu-bg: #28313a;
-$menu-fg: #e3eaf3;
+$accent-color:    #f04c00;
+$heading-color:   #fff;
+$text-color:      #242426;
+$menu-bg:         #28313a;
+$menu-fg:         #e3eaf3;
diff --git a/app/templates/assets/templates/atoms.html.swig b/app/templates/assets/templates/atoms.html.swig
@@ -7,16 +7,14 @@
 
   {% if collections.atoms.length > 0 %}
     <div class="styleguide-item-heading-group">
-      <h2 class="styleguide-item-heading" data-styleguide-toggle="labels">Atoms</h2>
-      {{contents|raw}}
+      <div class="lead">{{contents|raw}}</div>
     </div>
     {% for atom in collections.atoms %}
       {{item.default('atom' ,atom, loop)}}
     {% endfor %}
   {% else %}
     <div class="styleguide-item-heading-group" data-styleguide-toggle="labels">
-      <h2 class="styleguide-item-heading">Atoms</h2>
-      {{contents|raw}}
+      <div class="lead">{{contents|raw}}</div>
     </div>
   {% endif %}
 

diff --git a/app/templates/assets/templates/base.html.swig b/app/templates/assets/templates/base.html.swig
@@ -5,7 +5,7 @@
 <!--[if IE 9]>         <html class="no-js lt-ie10"> <![endif]-->
 <!--[if gt IE 9]><!--> <html class="no-js"> <!--<![endif]-->
   <head>
-    <meta charset="utstyleguide-8">
+    <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <title></title>
     <meta name="description" content="">
@@ -47,14 +47,8 @@
       <script>
         (function($){
           $(document).ready(function(){
-            $('.styleguide-item-preview').each(function(){
-              var formatted = $(this).html().replace(/---[\s\S]*?---/g, '');
-              $(this).html(formatted);
-            });
-
             $('.styleguide-item-code code').each(function(){
-              var formatted = $(this).html().replace(/---[\s\S]*?---/g, '');
-              $(this).html(formatted.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;'));
+              $(this).html($(this).html().replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;'));
             });
           });
         }(jQuery));

diff --git a/app/templates/assets/templates/molecules.html.swig b/app/templates/assets/templates/molecules.html.swig
@@ -7,16 +7,14 @@
 
   {% if collections.molecules.length > 0 %}
     <div class="styleguide-item-heading-group">
-      <h2 class="styleguide-item-heading" data-styleguide-toggle="labels">Molecules</h2>
-      {{contents|raw}}
+      <div class="lead">{{contents|raw}}</div>
     </div>
     {% for molecule in collections.molecules %}
       {{item.default('molecule', molecule, loop)}}
     {% endfor %}
   {% else %}
     <div class="styleguide-item-heading-group" data-styleguide-toggle="labels">
-      <h2 class="styleguide-item-heading">molecules</h2>
-      {{contents|raw}}
+      <div class="lead">{{contents|raw}}</div>
     </div>
   {% endif %}
 

diff --git a/app/templates/assets/templates/organisms.html.swig b/app/templates/assets/templates/organisms.html.swig
@@ -7,16 +7,14 @@
 
   {% if collections.organisms.length > 0 %}
     <div class="styleguide-item-heading-group">
-      <h2 class="styleguide-item-heading" data-styleguide-toggle="labels">Organisms</h2>
-      {{contents|raw}}
+      <div class="lead">{{contents|raw}}</div>
     </div>
     {% for organism in collections.organisms %}
       {{item.default('organism', organism, loop)}}
     {% endfor %}
   {% else %}
     <div class="styleguide-item-heading-group" data-styleguide-toggle="labels">
-      <h2 class="styleguide-item-heading">organisms</h2>
-      {{contents|raw}}
+      <div class="lead">{{contents|raw}}</div>
     </div>
   {% endif %}
 

diff --git a/app/templates/assets/templates/page.html.swig b/app/templates/assets/templates/page.html.swig
@@ -1,21 +1,11 @@
 {% extends "base.html.swig" %}
 
 {% block content %}
-  {% set path = '../components/pages/' + title + '.html.swig' %}
+  {% set path = '../components/pages/' + name + '.html.swig' %}
   <div id="page-wrapper">
     {% include path %}
   </div>
 {% endblock %}
 
 {% block javascripts %}
-<script>
-  (function($){
-    $(document).ready(function(){
-      $('#page-wrapper').each(function(){
-        var formatted = $(this).html().replace(/---[\s\S]*?---/g, '');
-        $(this).html(formatted);
-      });
-    });
-  }(jQuery));
-</script>
 {% endblock %}
diff --git a/app/templates/assets/templates/styleguide/item-content.html.swig b/app/templates/assets/templates/styleguide/item-content.html.swig
@@ -1,5 +1,5 @@
 {% macro default(type, content) %}
-  {% set path = '../../components/' + type + 's/' + content.title + '.html.swig' %}
+  {% set path = '../../components/' + type + 's/' + content.name + '.html.swig' %}
 
   {% if content.notes %}<div class="styleguide-item-notes" data-styleguide-toggle="notes">
     {{content.notes|markdown|raw}}

diff --git a/app/templates/assets/templates/styleguide/menu.html.swig b/app/templates/assets/templates/styleguide/menu.html.swig
@@ -14,7 +14,7 @@
       <ul>
         {% for doc in collections.docs %}
           <li>
-            <a href="/{{doc.title}}">{{doc.title}}</a>
+            <a href="/{{doc.title|lower}}">{{doc.title}}</a>
           </li>
         {% endfor %}
       </ul>

diff --git a/app/templates/tasks/filters.js b/app/templates/tasks/filters.js
@@ -17,7 +17,7 @@ module.exports = function() {
     var obj = {};
     if (array) {
       for (var i = 0; i < array.length; i++) {
-        if (array[i].data.sys.id == value) {
+        if (array[i].id == value) {
           obj = array[i];
         }
       }

diff --git a/app/templates/tasks/metalsmith.js b/app/templates/tasks/metalsmith.js
@@ -16,12 +16,17 @@ var path          = require('path'),
     collections   = require('metalsmith-collections');
 
 var metadatas = [];
-dotenv.load();
 require('./filters.js')();
 
 var contentful_key = '';
+
 if (process.env.CONTENTFUL_KEY) {
   contentful_key = process.env.CONTENTFUL_KEY;
+} else {
+  dotenv.load();
+  if (process.env.CONTENTFUL_KEY) {
+    contentful_key = process.env.CONTENTFUL_KEY;
+  }
 }
 
 module.exports = function() {
@@ -68,6 +73,13 @@ module.exports = function() {
             accessToken : contentful_key
           }),
           layouts(config.metalsmith.plugins.layouts),
+          function(files, metalsmith, done){
+            // Clean dirty front-matter comment
+            for (var file in files) {
+              files[file].contents = new Buffer(files[file].contents.toString().replace(/---[\s\S]*?---/g, ''));
+            }
+            done();
+          },
           permalinks(config.metalsmith.plugins.permalinks)
         ]
       }))

diff --git a/app/templates/tasks/scripts.js b/app/templates/tasks/scripts.js
@@ -1,35 +1,93 @@
 'use strict';
 
-var gulp          = require('gulp'),
-    $             = require('gulp-load-plugins')(),
-    config        = require('../gulp_config.json'),
-    argv          = require('yargs').argv;
+var gulp            = require('gulp'),
+    $               = require('gulp-load-plugins')(),
+    config          = require('../gulp_config.json'),
+    argv            = require('yargs').argv,
+    browserify      = require('browserify'),
+    babelify        = require('babelify'),
+    browserifyshim  = require('browserify-shim'),
+    source          = require('vinyl-source-stream'),
+    buffer          = require('vinyl-buffer'),
+    path            = require('path');
+
 
 module.exports = function() {
 
   function errorAlert(error){
     if (!argv.production) {
-      $.notify.onError({title: "JS Error", message: "Check your terminal", sound: "Sosumi"})(error);
+      $.notify.onError({title: 'JS Error', message: 'Check your terminal', sound: 'Sosumi'})(error);
       $.util.log(error.messageFormatted);
     }
-    this.emit("end");
+    this.emit('end');
   };
 
+  function handleErrors() {
+    var args = Array.prototype.slice.call(arguments);
+    $.notify.onError({
+      title: 'Compile Error',
+      message: '<%= error.message %>'
+    }).apply(this, args);
+    this.emit('end');
+  }
+
   /**
    * Build JS
    * With error reporting on compiling (so that there's no crash)
    * And jshint check to highlight errors as we go.
    */
-  gulp.task('scripts', function() {
-    return gulp.src(config.assets + 'js/*.js')
+  gulp.task('scripts', ['scripts-lint'], function() {
+    if (argv.local) {
+      return browserify(
+        {
+          entries: ['./' + config.assets + 'js/index.js'],
+          debug: true
+        })
+        .transform(babelify.configure({
+          presets: ['es2015'],
+          sourceMaps: true
+        }))
+        .bundle()
+        .on('error', handleErrors)
+        .pipe(source('bundle.js'))
+        .pipe(buffer())
+        .pipe($.sourcemaps.init({loadMaps: true}))
+            .pipe($.if(argv.production, $.uglify()))
+            .on('error', handleErrors)
+        .pipe(argv.production ? $.util.noop() : $.sourcemaps.write('./'))
+        .pipe(gulp.dest(config.build));
+    } else {
+      return browserify(
+        {
+          entries: ['./' + config.assets + 'js/index.js'],
+          debug: true
+        })
+        .transform(babelify.configure({
+          presets: ['es2015'],
+          sourceMaps: true
+        }))
+        .transform(browserifyshim)
+        .bundle()
+        .on('error', handleErrors)
+        .pipe(source('bundle.js'))
+        .pipe(buffer())
+        .pipe($.sourcemaps.init({loadMaps: true}))
+            .pipe($.if(argv.production, $.uglify()))
+            .on('error', handleErrors)
+        .pipe(argv.production ? $.util.noop() : $.sourcemaps.write('./'))
+        .pipe($.size({title: 'BUNDLE SIZE', showFiles: true}))
+        .pipe(gulp.dest(config.build));
+    }
+  });
+
+  /**
+   * Lint JS
+   */
+  gulp.task('scripts-lint', function() {
+    return gulp.src(config.assets + '**/*.{js,jsx}')
       .pipe($.plumber({errorHandler: errorAlert}))
       .pipe($.eslint())
-      .pipe($.eslint.format())
-      .pipe($.babel({presets: ['es2015']}))
-      .pipe($.concat('main.js'))
-      .pipe($.if(argv.production, $.uglify()))
-      .pipe($.size({title: 'JS SCRIPTS', showFiles: true}))
-      .pipe(gulp.dest(config.build + 'js'));
+      .pipe($.eslint.format());
   });
 
 };
diff --git a/component/index.js b/component/index.js
@@ -87,18 +87,20 @@ module.exports = yeoman.Base.extend({
         this.log(chalk.red(slug(this.name).toLowerCase() + " already founded !") + "\nMake sure that your component doens't already exist.");
       }
 
-      var stylesheet = this.destinationPath(this.config.assets + 'sass/main.scss'),
-          importer = "@import '"+ this.type +"/"+ slug(this.name).toLowerCase() + "';";
-      if(pathExists.sync(stylesheet)){
-        var body = fs.readFileSync(stylesheet).toString();
-        if (body.indexOf(importer) < 0 ) {
-          body = body.replace("// "+ this.type +":", "// "+ this.type +":\n"+importer);
-          fs.writeFileSync(stylesheet, body);
+      if (this.type !== 'doc') {
+        var stylesheet = this.destinationPath(this.config.assets + 'sass/main.scss'),
+            importer = "@import '"+ this.type +"/"+ slug(this.name).toLowerCase() + "';";
+        if(pathExists.sync(stylesheet)){
+          var body = fs.readFileSync(stylesheet).toString();
+          if (body.indexOf(importer) < 0 ) {
+            body = body.replace("// "+ this.type +":", "// "+ this.type +":\n"+importer);
+            fs.writeFileSync(stylesheet, body);
+          } else {
+            this.log(chalk.red(importer + " already founded !") + "\nMake sure that your component doens't already exist.");
+          }
         } else {
-          this.log(chalk.red(importer + " already founded !") + "\nMake sure that your component doens't already exist.");
+          this.log(chalk.red("No main.sccs founded !") + "\nMake sure that your main.scss file is at the root of your sass folder.");
         }
-      } else {
-        this.log(chalk.red("No main.sccs founded !") + "\nMake sure that your main.scss file is at the root of your sass folder.");
       }
     }
   }

diff --git a/component/templates/_component.html b/component/templates/_component.html
@@ -1,5 +1,6 @@
 ---
-title: <%= slug(name).toLowerCase() %>
+title: <%= name %>
+name: <%= slug(name).toLowerCase() %>
 collection: <%= type %>
 notes: |
   ##### Usage : `<%= slug(name).toLowerCase() %>`

diff --git a/component/templates/_page.html b/component/templates/_page.html
@@ -1,5 +1,6 @@
 ---
-title: <%= slug(name).toLowerCase() %>
+title: <%= name %>
+name: <%= slug(name).toLowerCase() %>
 collection: pages
 styleguide: false
 layout: page.html.swig

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "generator-toolbox",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "Yeoman generator",
   "license": "MIT",
   "main": "app/index.js",
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		// You will use that file to import all your scripts
		// Ex: import gallery from './gallery';