From cfdad87390a6dc279b632c6e63793105f74fdaf3 Mon Sep 17 00:00:00 2001 From: Kevin Wenger Date: Mon, 2 May 2016 11:14:01 +0200 Subject: [PATCH 01/20] Fix gulp-consolidate version --- app/templates/_package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/templates/_package.json b/app/templates/_package.json index 3e141d8..d21c90b 100644 --- a/app/templates/_package.json +++ b/app/templates/_package.json @@ -29,7 +29,7 @@ "gulp-casperjs": "0.0.5", "gulp-changed": "^1.3.0", "gulp-concat": "^2.5.2", - "gulp-consolidate": "^0.3.2", + "gulp-consolidate": "^0.2.0", "gulp-eslint": "^2.0.0", "gulp-gh-pages": "^0.5.1", "gulp-iconfont": "^6.0.0", From 214ebafd4ea9967cd04c538862f32c44606be293 Mon Sep 17 00:00:00 2001 From: Kevin Wenger Date: Mon, 2 May 2016 11:18:41 +0200 Subject: [PATCH 02/20] Remove useless command --- README.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/README.md b/README.md index 107a928..914ca2c 100644 --- a/README.md +++ b/README.md @@ -23,8 +23,6 @@ $ cd /path-to/your/project $ yo toolbox ``` -Then initialize your project with `$ npm start`. - ## Options available You can use the flag `--skip-install` if you wish to installl all npm and bower dependencies later. From eb6b306404f54a991e34ec4b3c230151bb32c4c2 Mon Sep 17 00:00:00 2001 From: Yann Gouffon Date: Fri, 13 May 2016 17:59:03 +0200 Subject: [PATCH 03/20] add new metalsmith dep --- app/index.js | 2 +- app/templates/_package.json | 47 ++++++++++++++++++++++++++++++++++--- 2 files changed, 45 insertions(+), 4 deletions(-) diff --git a/app/index.js b/app/index.js index 2052897..fa1fde2 100644 --- a/app/index.js +++ b/app/index.js @@ -51,7 +51,7 @@ module.exports = yeoman.generators.Base.extend({ value: 'gulp', checked: true }, { - name: 'Styleguide (Fabricator)', + name: 'Styleguide', value: 'fabricator', checked: true }, { diff --git a/app/templates/_package.json b/app/templates/_package.json index 3e141d8..b33f1c8 100644 --- a/app/templates/_package.json +++ b/app/templates/_package.json @@ -20,23 +20,27 @@ "browser-sync": "^2.7.1", "casperjs": "^1.1.0-beta3", "chai": "^3.4.1", + "contentful-metalsmith": "^0.1.0", "del": "~2.2.0", - "eslint": "^2.5.3", - "fabricator-assemble": "fbrctr/fabricator-assemble.git",<% if (gulp) { %> + "dotenv": "^2.0.0", + "eslint": "^2.5.3",<% if (gulp) { %> "gulp": "^3.9.0", "gulp-babel": "^6.1.2", "gulp-browserify": "^0.5.1", "gulp-casperjs": "0.0.5", "gulp-changed": "^1.3.0", "gulp-concat": "^2.5.2", - "gulp-consolidate": "^0.3.2", + "gulp-consolidate": "^0.2.0", "gulp-eslint": "^2.0.0", + "gulp-front-matter": "^1.3.0", "gulp-gh-pages": "^0.5.1", "gulp-iconfont": "^6.0.0", + "gulp-inline-fonts": "^1.0.1", "gulp-if": "^2.0.0", "gulp-imagemin": "^2.2.1", "gulp-jshint": "^2.0.0", "gulp-load-plugins": "^1.2.0", + "gulp-metalsmith": "^1.0.0", "gulp-minify-css": "^1.1.1", "gulp-mocha": "^2.1.1", "gulp-notify": "^2.2.0", @@ -56,12 +60,49 @@ "jsdom": "^8.2.0", "jshint-stylish": "^2.1.0", "lodash": "^4.1.6", + "marked": "^0.3.5", + "metalsmith": "^2.1.0", + "metalsmith-collections": "^0.7.0", + "metalsmith-concat": "^5.0.2", + "metalsmith-data-markdown": "0.0.3", + "metalsmith-each": "^0.1.1", + "metalsmith-elevate": "0.0.0", + "metalsmith-filemetadata": "^1.0.0", + "metalsmith-flatten": "^0.2.0", + "metalsmith-if": "^0.1.1", + "metalsmith-include": "0.0.2", + "metalsmith-in-place": "^1.4.4", + "metalsmith-jquery": "^0.1.2", + "metalsmith-json": "^0.1.2", + "metalsmith-json-to-files": "^1.0.0", + "metalsmith-layouts": "^1.6.5", + "metalsmith-markdown": "^0.2.1", + "metalsmith-metadata": "0.0.4", + "metalsmith-metafiles": "^2.0.0", + "metalsmith-pagination": "^1.4.0", + "metalsmith-partial": "^0.1.0", + "metalsmith-paths": "^2.1.2", + "metalsmith-permalinks": "^0.5.0", + "metalsmith-placeholder": "^0.1.2", + "metalsmith-prism": "^2.2.0", + "metalsmith-prismic": "^0.10.0", + "metalsmith-renamer": "^0.2.2", + "metalsmith-rootpath": "^0.1.7", + "metalsmith-series": "^0.1.0", + "metalsmith-shortcodes": "0.0.2", + "metalsmith-slug": "^0.2.0", + "metalsmith-static": "0.0.5", + "metalsmith-swig-helpers": "^1.4.2", + "metalsmith-tags": "^1.2.1", + "metalsmith-writemetadata": "^0.4.5", + "respond.js": "^1.4.2", "mocha": "^2.2.5", "phantomcss": "^1.0.0", "run-sequence": "~1.1.0", "sinon": "^1.14.1", "sinon-chai": "^2.7.0", "slug": "^0.9.1", + "swig": "^1.4.2" "toolbox-utils": "0.0.1", "yargs": "^4.3.2" } From 1db5d68b133f8113ea0bc0fd72a4716582fd5f2c Mon Sep 17 00:00:00 2001 From: Yann Gouffon Date: Fri, 13 May 2016 18:00:28 +0200 Subject: [PATCH 04/20] gulp is mandatory --- app/index.js | 35 ++++++++++++++--------------------- app/templates/_package.json | 4 ++-- 2 files changed, 16 insertions(+), 23 deletions(-) diff --git a/app/index.js b/app/index.js index fa1fde2..77e051f 100644 --- a/app/index.js +++ b/app/index.js @@ -47,10 +47,6 @@ module.exports = yeoman.generators.Base.extend({ name: 'tools', message: 'What would you like to use in your project ? (unselect the ones you don\'t want) ', choices: [{ - name: 'Task runner (GulpJS)', - value: 'gulp', - checked: true - }, { name: 'Styleguide', value: 'fabricator', checked: true @@ -110,7 +106,6 @@ module.exports = yeoman.generators.Base.extend({ var tools = props.tools; function hasTool(tool) { return tools.indexOf(tool) !== -1; } - this.gulp = hasTool('gulp'); this.fabricator = hasTool('fabricator'); this.bootstrapSass = hasTool('bootstrapSass'); this.bootstrap4 = props.bootstrap4; @@ -144,23 +139,21 @@ module.exports = yeoman.generators.Base.extend({ app: function () { this.template('_package.json', 'package.json'); - if (this.gulp) { - this.template('_gulp_config.json', 'gulp_config.json'); - this.template('_gulpfile.js', 'gulpfile.js'); - - this.template('tasks/_clean.js', 'tasks/clean.js'); - this.template('tasks/_server.js', 'tasks/server.js'); - this.copy('tasks/gh-pages.js', 'tasks/gh-pages.js'); - this.copy('tasks/images.js', 'tasks/images.js'); - this.copy('tasks/scripts.js', 'tasks/scripts.js'); - this.copy('tasks/icons.js', 'tasks/icons.js'); - this.copy('tasks/favicons.js', 'tasks/favicons.js'); - if (this.fabricator) { - this.copy('tasks/styleguide.js', 'tasks/styleguide.js'); - } - this.copy('tasks/styles.js', 'tasks/styles.js'); - this.copy('tasks/vendors.js', 'tasks/vendors.js'); + this.template('_gulp_config.json', 'gulp_config.json'); + this.template('_gulpfile.js', 'gulpfile.js'); + + this.template('tasks/_clean.js', 'tasks/clean.js'); + this.template('tasks/_server.js', 'tasks/server.js'); + this.copy('tasks/gh-pages.js', 'tasks/gh-pages.js'); + this.copy('tasks/images.js', 'tasks/images.js'); + this.copy('tasks/scripts.js', 'tasks/scripts.js'); + this.copy('tasks/icons.js', 'tasks/icons.js'); + this.copy('tasks/favicons.js', 'tasks/favicons.js'); + if (this.fabricator) { + this.copy('tasks/styleguide.js', 'tasks/styleguide.js'); } + this.copy('tasks/styles.js', 'tasks/styles.js'); + this.copy('tasks/vendors.js', 'tasks/vendors.js'); if (this.fabricator) { this.mkdir(this.assets + 'components'); diff --git a/app/templates/_package.json b/app/templates/_package.json index b33f1c8..5e8eb51 100644 --- a/app/templates/_package.json +++ b/app/templates/_package.json @@ -23,7 +23,7 @@ "contentful-metalsmith": "^0.1.0", "del": "~2.2.0", "dotenv": "^2.0.0", - "eslint": "^2.5.3",<% if (gulp) { %> + "eslint": "^2.5.3", "gulp": "^3.9.0", "gulp-babel": "^6.1.2", "gulp-browserify": "^0.5.1", @@ -53,7 +53,7 @@ "gulp-size": "^2.0.0", "gulp-sourcemaps": "^1.5.2", "gulp-uglify": "~1.5.1", - "gulp-util": "^3.0.4",<% } %> + "gulp-util": "^3.0.4", "helper-markdown": "^0.2.1", "imagemin-pngquant": "^4.1.0", "imgur": "^0.1.5", From 8c98b4e24f10d7a954883d9323f59ba94bb06313 Mon Sep 17 00:00:00 2001 From: Yann Gouffon Date: Fri, 13 May 2016 18:01:31 +0200 Subject: [PATCH 05/20] update gulpfile --- app/templates/_gulpfile.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/app/templates/_gulpfile.js b/app/templates/_gulpfile.js index 8fae1a5..f004de9 100644 --- a/app/templates/_gulpfile.js +++ b/app/templates/_gulpfile.js @@ -15,8 +15,8 @@ require(config.tasks + 'scripts')(); // $ gulp scripts require(config.tasks + 'icons')(); // $ gulp icons require(config.tasks + 'favicons')(); // $ gulp favicons require(config.tasks + 'clean')(); // $ gulp clean<% if (fabricator) { %> -require(config.tasks + 'styleguide')(); // $ gulp styleguide<% } %> require(config.tasks + 'server')(); // $ gulp serve +require(config.tasks + 'metalsmith')(); // $ gulp metalsmith require(config.tasks + 'gh-pages')(); // $ gulp deploy<% if (tests) { %> require(config.tasks + 'tests-regression')(); // $ gulp regression require(config.tasks + 'tests-unit')(); // $ gulp test:unit @@ -46,13 +46,12 @@ gulp.task('init', function() { * Task to build assets on production server */ gulp.task('build',['clean'], function() { - return gulp.start('vendors', 'styles', 'img', 'scripts', 'icons'); + return gulp.start('vendors', 'styles', 'img', 'scripts', 'icons', 'metalsmith'); }); - /** * Default task */ gulp.task('default', ['clean'], function(done){ - runSequence(['css-vendors', 'js-vendors', 'fonts-vendors', 'polyfills-vendors', 'img', 'icons', 'styles', 'scripts'<% if (fabricator) { %>, 'styleguide-styles', 'styleguide-scripts'<% } %>], 'favicons'<% if (fabricator) { %>, 'styleguide'<% } %>, done); + runSequence(['css-vendors', 'js-vendors', 'fonts-vendors', 'polyfills-vendors', 'img', 'icons', 'styles', 'scripts', 'metalsmith-styles', 'metalsmith-scripts'], 'favicons', 'metalsmith', done); }); From c58b0e8eea72e9af1af6787c335977c7ec7e4f9b Mon Sep 17 00:00:00 2001 From: Yann Gouffon Date: Fri, 13 May 2016 18:03:40 +0200 Subject: [PATCH 06/20] update gulp_config --- app/templates/_gulp_config.json | 42 +++++++++++++++++++++++---------- 1 file changed, 30 insertions(+), 12 deletions(-) diff --git a/app/templates/_gulp_config.json b/app/templates/_gulp_config.json index dbfa1fe..053965b 100644 --- a/app/templates/_gulp_config.json +++ b/app/templates/_gulp_config.json @@ -43,18 +43,36 @@ "iconsFontName": "icons", "build": "<%= build %>", "browsers": ["last 2 versions", "safari 5", "ie 8", "ie 9", "ff 27", "opera 12.1"]<% if (fabricator) { %>, - "styleguide": { + "metalsmith": { "assets": "node_modules/fabricator/src/assets/fabricator/", - "layout": "default", - "layouts": "<%= assets %>templates/views/layouts/*", - "layoutIncludes": "<%= assets %>templates/views/layouts/includes/*", - "views": [ - "<%= assets %>templates/**/*", - "!<%= assets %>templates/views/+(layouts)/**" - ], - "materials": "<%= assets %>components/**/*", - "data": "<%= assets %>data/**/*.{json,yml}", - "docs": "<%= assets %>docs/**/*.md", - "dest": "styleguide" + "dist": "styleguide/", + "plugins": { + "permalinks": { + "pattern": ":collection/:title" + }, + "collections": { + "atoms": { + "sortBy": "title", + "reverse": false + }, + "molecules": { + "sortBy": "title", + "reverse": false + }, + "organisms": { + "sortBy": "title", + "reverse": false + } + }, + "layouts": { + "engine": "swig", + "default": "default.html.swig", + "directory": "assets/templates", + "rename": true + }, + "metalsmithinplace": { + "engine": "swig" + } + } }<% } %> } From 4453e1a6faf873e0b9d5bbae1530c5fcb1e049b5 Mon Sep 17 00:00:00 2001 From: Yann Gouffon Date: Fri, 13 May 2016 18:07:02 +0200 Subject: [PATCH 07/20] add new metalsmith task and filters --- app/templates/tasks/filters.js | 16 +++++ app/templates/tasks/metalsmith.js | 103 ++++++++++++++++++++++++++++++ app/templates/tasks/styleguide.js | 81 ----------------------- 3 files changed, 119 insertions(+), 81 deletions(-) create mode 100644 app/templates/tasks/filters.js create mode 100644 app/templates/tasks/metalsmith.js delete mode 100644 app/templates/tasks/styleguide.js diff --git a/app/templates/tasks/filters.js b/app/templates/tasks/filters.js new file mode 100644 index 0000000..1638157 --- /dev/null +++ b/app/templates/tasks/filters.js @@ -0,0 +1,16 @@ +'use strict'; + +var swig = require('swig'), + marked = require('marked'); + +module.exports = function() { + + swig.setFilter('markdown', function (string) { + return marked(string); + }); + + swig.setFilter('dump', function (input) { + return JSON.stringify(input, null, 2); + }); + +}; diff --git a/app/templates/tasks/metalsmith.js b/app/templates/tasks/metalsmith.js new file mode 100644 index 0000000..04d4e98 --- /dev/null +++ b/app/templates/tasks/metalsmith.js @@ -0,0 +1,103 @@ +'use strict'; + +var gulp = require('gulp'), + $ = require('gulp-load-plugins')(), + config = require('../gulp_config.json'), + argv = require('yargs').argv, + swig = require('swig'); + +var markdown = require('metalsmith-markdown'), + permalinks = require('metalsmith-permalinks'), + layouts = require('metalsmith-layouts'), + collections = require('metalsmith-collections'); + +require('./filters.js')(); + +module.exports = function() { + + function errorAlert(error){ + if (!argv.production) { + $.notify.onError({title: 'Metalsmith Error', message: 'Check your terminal', sound: 'Sosumi'})(error); + $.util.log(error); + } + this.emit('end'); + }; + + /* + * Generate styleguide doc + */ + gulp.task('metalsmith-docs', function() { + return gulp.src([config.assets + 'components/**/*.swig', config.assets + 'docs/**/*.md']) + .pipe($.plumber({errorHandler: errorAlert})) + .pipe($.metalsmith({ + use: [ + markdown({ langPrefix: 'language-' }), + // permalinks(config.metalsmith.plugins.permalinks), + collections(config.metalsmith.plugins.collections), + function(files, metalsmith, done){ + for (var file in files) { + if (files[file].collection == 'atoms' || files[file].collection == 'molecules' || files[file].collection == 'organisms') { + delete files[file]; + } + } + done(); + }, + layouts(config.metalsmith.plugins.layouts) + ] + })) + .pipe(gulp.dest(config.metalsmith.dist + 'styleguide')); + }); + + /* + * Styleguide CSS Vendors + */ + gulp.task('metalsmith-styles', function () { + return gulp.src([ + config.metalsmith.assets + 'styles/fabricator.scss', + config.assets + 'sass/styleguide.scss' + ]) + .pipe($.sass({ + errLogToConsole: true + })) + .pipe($.postcss([ + require('autoprefixer')({ + browsers: config.browsers, + options: { + map: true + } + }) + ])) + .pipe($.concat('styleguide.css')) + .pipe($.size({title: 'STYLEGUIDE CSS VENDORS', showFiles: true})) + .pipe(gulp.dest(config.build + 'css')) + .pipe(gulp.dest(config.metalsmith.dist + '/build/css')); + }); + + /* + * Styleguide JS Vendors + */ + gulp.task('metalsmith-scripts', function() { + return gulp.src([config.metalsmith.assets + 'scripts/fabricator.js']) + .pipe($.browserify({ + insertGlobals : true + })) + .pipe($.concat('styleguide.min.js')) + .pipe($.uglify()) + .pipe($.size({title: 'STYLEGUIDE JS VENDORS', showFiles: true})) + .pipe(gulp.dest(config.build + 'js')) + .pipe(gulp.dest(config.metalsmith.dist + '/build/js')); + }); + + gulp.task('metalsmith-assets', function() { + return gulp.src(config.build + '**/*') + .pipe(gulp.dest(config.metalsmith.dist + '/build')); + }); + + /* + * Build metalsmith + */ + gulp.task('metalsmith', ['metalsmith-assets'], function() { + return gulp.start('metalsmith-docs'); + }); + +}; diff --git a/app/templates/tasks/styleguide.js b/app/templates/tasks/styleguide.js deleted file mode 100644 index 4372ab1..0000000 --- a/app/templates/tasks/styleguide.js +++ /dev/null @@ -1,81 +0,0 @@ -'use strict'; - -var gulp = require('gulp'), - $ = require('gulp-load-plugins')(), - config = require('../gulp_config.json'), - assemble = require('fabricator-assemble'); - - -module.exports = function() { - - var options = { - layout: config.styleguide.layout, - layouts: config.styleguide.layouts, - layoutIncludes: config.styleguide.layoutIncludes, - views: config.styleguide.views, - materials: config.styleguide.materials, - data: config.styleguide.data, - docs: config.styleguide.docs, - dest: config.styleguide.dest, - beautifier: { - indent_size: 1, - indent_char: ' ', - indent_with_tabs: true - }, - helpers: { - markdown: require('helper-markdown') - } - }; - - /* - * Styleguide CSS Vendors - */ - gulp.task('styleguide-styles', function () { - return gulp.src([ - config.styleguide.assets + 'styles/fabricator.scss', - config.assets + 'sass/styleguide.scss' - ]) - .pipe($.sass({ - errLogToConsole: true - })) - .pipe($.postcss([ - require('autoprefixer')({ - browsers: config.browsers, - options: { - map: true - } - }) - ])) - .pipe($.concat('styleguide.css')) - .pipe($.size({title: 'STYLEGUIDE CSS VENDORS', showFiles: true})) - .pipe(gulp.dest(config.build + 'css')) - .pipe(gulp.dest(config.styleguide.dest + '/build/css')); - }); - - /* - * Styleguide JS Vendors - */ - gulp.task('styleguide-scripts', function() { - return gulp.src([config.styleguide.assets + 'scripts/fabricator.js']) - .pipe($.browserify({ - insertGlobals : true - })) - .pipe($.concat('styleguide.min.js')) - .pipe($.uglify()) - .pipe($.size({title: 'STYLEGUIDE JS VENDORS', showFiles: true})) - .pipe(gulp.dest(config.build + 'js')) - .pipe(gulp.dest(config.styleguide.dest + '/build/js')); - }); - - gulp.task('styleguide-assets', function() { - return gulp.src(config.build + '**/*') - .pipe(gulp.dest(config.styleguide.dest + '/build')); - }); - - gulp.task('styleguide', ['styleguide-assets'], function (done) { - assemble(options); - done(); - }); - - -}; From aa75cea040d1423ad191d2fb3703d6f378cb8e8b Mon Sep 17 00:00:00 2001 From: Yann Gouffon Date: Fri, 13 May 2016 18:09:32 +0200 Subject: [PATCH 08/20] update server task --- app/templates/tasks/_server.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/app/templates/tasks/_server.js b/app/templates/tasks/_server.js index 1d70d37..e4d2c16 100644 --- a/app/templates/tasks/_server.js +++ b/app/templates/tasks/_server.js @@ -21,27 +21,27 @@ module.exports = function() { open: false }); gulp.watch([config.assets + 'sass/**/*.scss'], function() { - runSequence('styles'<% if (fabricator) { %>, 'styleguide'<% } %>, reload); + runSequence('styles'<% if (fabricator) { %>, 'matalsmith'<% } %>, reload); });<% if (fabricator) { %> gulp.watch([config.assets + 'sass/styleguide.scss'], function() { - runSequence('styleguide-styles'<% if (fabricator) { %>, 'styleguide'<% } %>, reload); + runSequence('styleguide-styles'<% if (fabricator) { %>, 'matalsmith'<% } %>, reload); });<% } %> gulp.watch([config.assets + 'img/**/*', config.assets + 'svg/**/*'], function() { - runSequence('img'<% if (fabricator) { %>, 'styleguide'<% } %>, reload); + runSequence('img'<% if (fabricator) { %>, 'matalsmith'<% } %>, reload); }); gulp.watch([config.assets + 'icons/**/*'], function() { - runSequence('icons'<% if (fabricator) { %>, 'styleguide'<% } %>, reload); + runSequence('icons'<% if (fabricator) { %>, 'matalsmith'<% } %>, reload); }); gulp.watch([config.assets + 'js/**/*.js'], function() { - runSequence('scripts'<% if (fabricator) { %>, 'styleguide'<% } %>, reload); + runSequence('scripts'<% if (fabricator) { %>, 'matalsmith'<% } %>, reload); });<% if (fabricator) { %> gulp.watch([ - config.assets + 'components/**/*.{html,hbs,md}', - config.assets + 'templates/**/*.html', + config.assets + 'components/**/*.{html,hbs,md,swig}', + config.assets + 'templates/**/*.{html,hbs,md,swig}', config.assets + 'docs/**/*.md', config.assets + 'data/**/*.{json,yml}' ], function() { - runSequence('styleguide', reload); + runSequence('matalsmith', reload); });<% } %> }); From d7fdd5c934c5c746e07546830d86e4d26105b532 Mon Sep 17 00:00:00 2001 From: Yann Gouffon Date: Fri, 13 May 2016 18:14:00 +0200 Subject: [PATCH 09/20] be friend with Babel again --- app/index.js | 5 +++-- app/templates/eslintrc.yml | 23 +++++++++++++++++++++++ app/templates/jshintrc | 19 ------------------- app/templates/tasks/scripts.js | 7 ++++--- 4 files changed, 30 insertions(+), 24 deletions(-) create mode 100644 app/templates/eslintrc.yml delete mode 100644 app/templates/jshintrc diff --git a/app/index.js b/app/index.js index 77e051f..60c8d00 100644 --- a/app/index.js +++ b/app/index.js @@ -150,7 +150,8 @@ module.exports = yeoman.generators.Base.extend({ this.copy('tasks/icons.js', 'tasks/icons.js'); this.copy('tasks/favicons.js', 'tasks/favicons.js'); if (this.fabricator) { - this.copy('tasks/styleguide.js', 'tasks/styleguide.js'); + this.copy('tasks/metalsmith.js', 'tasks/metalsmith.js'); + this.copy('tasks/filters.js', 'tasks/filters.js'); } this.copy('tasks/styles.js', 'tasks/styles.js'); this.copy('tasks/vendors.js', 'tasks/vendors.js'); @@ -219,7 +220,7 @@ module.exports = yeoman.generators.Base.extend({ this.copy('editorconfig', '.editorconfig'); this.copy('gitattributes', '.gitattributes'); this.copy('gitignore', '.gitignore'); - this.copy('jshintrc', '.jshintrc'); + this.copy('eslintrc.yml', '.eslintrc.yml'); this.copy('sass-lint.yml', '.sass-lint.yml'); } }, diff --git a/app/templates/eslintrc.yml b/app/templates/eslintrc.yml new file mode 100644 index 0000000..b4e083e --- /dev/null +++ b/app/templates/eslintrc.yml @@ -0,0 +1,23 @@ +env: + browser: true + es6: true +extends: 'eslint:recommended' +ecmaFeatures: + blockBindings: true +parserOptions: + sourceType: module +rules: + indent: + - error + - 2 + - VariableDeclarator: {"var": 2, "let": 2, "const": 3} + linebreak-style: + - error + - unix + no-var: 2 + quotes: + - error + - single + semi: + - error + - always diff --git a/app/templates/jshintrc b/app/templates/jshintrc deleted file mode 100644 index 91866e7..0000000 --- a/app/templates/jshintrc +++ /dev/null @@ -1,19 +0,0 @@ -{ - "node": true, - "browser": true, - "esnext": true, - "bitwise": true, - "camelcase": false, - "curly": true, - "eqeqeq": true, - "immed": true, - "indent": 2, - "latedef": true, - "newcap": true, - "noarg": true, - "quotmark": "single", - "undef": true, - "unused": true, - "strict": true, - "jquery": true -} diff --git a/app/templates/tasks/scripts.js b/app/templates/tasks/scripts.js index 7350714..cd6f1b9 100644 --- a/app/templates/tasks/scripts.js +++ b/app/templates/tasks/scripts.js @@ -10,7 +10,7 @@ module.exports = function() { function errorAlert(error){ if (!argv.production) { $.notify.onError({title: "JS Error", message: "Check your terminal", sound: "Sosumi"})(error); - $.util.log(error); + $.util.log(error.messageFormatted); } this.emit("end"); }; @@ -23,8 +23,9 @@ module.exports = function() { gulp.task('scripts', function() { return gulp.src(config.assets + 'js/*.js') .pipe($.plumber({errorHandler: errorAlert})) - .pipe($.jshint()) - .pipe($.jshint.reporter('jshint-stylish')) + .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})) From ae88efd1eecdb30e73acc2620a1e6ab9dbf4dfec Mon Sep 17 00:00:00 2001 From: Yann Gouffon Date: Fri, 13 May 2016 18:15:56 +0200 Subject: [PATCH 10/20] remove useless base components --- app/index.js | 43 ------------------- .../assets/components/atoms/button.hbs | 10 ----- .../assets/components/atoms/separator.hbs | 7 --- .../assets/components/atoms/spacer.hbs | 7 --- .../assets/components/atoms/video.hbs | 9 ---- 5 files changed, 76 deletions(-) delete mode 100644 app/templates/assets/components/atoms/button.hbs delete mode 100644 app/templates/assets/components/atoms/separator.hbs delete mode 100644 app/templates/assets/components/atoms/spacer.hbs delete mode 100644 app/templates/assets/components/atoms/video.hbs diff --git a/app/index.js b/app/index.js index 60c8d00..e7f4605 100644 --- a/app/index.js +++ b/app/index.js @@ -69,24 +69,6 @@ module.exports = yeoman.generators.Base.extend({ type: 'confirm', message: 'Do you want to use Bootstrap 4 Alpha?', default: false - },{ - type: 'checkbox', - name: 'components', - message: 'What would you like to have to base components ? (select the ones you want) ', - choices: [{ - name: 'Button', - value: 'button' - }, { - name: 'Video embed', - value: 'video' - }, { - name: 'Spacer', - value: 'spacer' - }, { - name: 'Separator', - value: 'separator' - } - ] },{ type: 'input', name: 'assets', @@ -111,14 +93,6 @@ module.exports = yeoman.generators.Base.extend({ this.bootstrap4 = props.bootstrap4; this.tests = hasTool('tests'); - // Components - var components = props.components; - function hasComponent(component) { return components.indexOf(component) !== -1; } - this.componentButton = hasComponent('button'); - this.componentVideo = hasComponent('video'); - this.componentSpacer = hasComponent('spacer'); - this.componentSeparator = hasComponent('separator'); - if (props.assets.slice(-1) === '/') { this.assets = props.assets; } else { @@ -170,23 +144,6 @@ module.exports = yeoman.generators.Base.extend({ this.mkdir(this.assets + 'sass/organisms'); this.mkdir(this.assets + 'sass/templates'); this.copy('assets/sass/styleguide.scss', this.assets + 'sass/styleguide.scss'); - - if (this.componentButton) { - this.copy('assets/components/atoms/button.hbs', this.assets + 'components/atoms/button.hbs'); - this.copy('assets/sass/atoms/_buttons.scss', this.assets + 'sass/atoms/_buttons.scss'); - } - if (this.componentVideo) { - this.copy('assets/components/atoms/video.hbs', this.assets + 'components/atoms/video.hbs'); - this.copy('assets/sass/atoms/_videos.scss', this.assets + 'sass/atoms/_videos.scss'); - } - if (this.componentSpacer) { - this.copy('assets/components/atoms/spacer.hbs', this.assets + 'components/atoms/spacer.hbs'); - this.copy('assets/sass/atoms/_spacers.scss', this.assets + 'sass/atoms/_spacers.scss'); - } - if (this.componentSeparator) { - this.copy('assets/components/atoms/separator.hbs', this.assets + 'components/atoms/separator.hbs'); - this.copy('assets/sass/atoms/_separators.scss', this.assets + 'sass/atoms/_separators.scss'); - } } this.directory('assets/js', this.assets + 'js'); diff --git a/app/templates/assets/components/atoms/button.hbs b/app/templates/assets/components/atoms/button.hbs deleted file mode 100644 index 4d53929..0000000 --- a/app/templates/assets/components/atoms/button.hbs +++ /dev/null @@ -1,10 +0,0 @@ ---- -notes: | - ##### Usage : `{{> button }}` - ##### Options : - - **btn-classes** - String (classes separated by spaces) - - **btn-label** - String - - **btn-link** - Boolean - - **btn-url** - String (only if `btn-link` is true) ---- -<{{#if btn-link}}a href="{{#if btn-url}}{{{ btn-url }}}{{^}}#{{/if}}" {{^}}button {{/if}}class="btn{{#if btn-classes}} {{{ btn-classes }}}{{^}} btn-primary{{/if}}">{{#if btn-label}}{{{ btn-label }}}{{^}}My button{{/if}} diff --git a/app/templates/assets/components/atoms/separator.hbs b/app/templates/assets/components/atoms/separator.hbs deleted file mode 100644 index 02237b9..0000000 --- a/app/templates/assets/components/atoms/separator.hbs +++ /dev/null @@ -1,7 +0,0 @@ ---- -notes: | - ##### Usage : `{{> separator }}` - ##### Options : - - **separator-size** - String ['separator-xs', 'separator-sm', 'separator-md', 'separator-lg'] ---- -
diff --git a/app/templates/assets/components/atoms/spacer.hbs b/app/templates/assets/components/atoms/spacer.hbs deleted file mode 100644 index e01bfab..0000000 --- a/app/templates/assets/components/atoms/spacer.hbs +++ /dev/null @@ -1,7 +0,0 @@ ---- -notes: | - ##### Usage : `{{> spacer }}` - ##### Options : - - **spacer-size** - String ['spacer-xs', 'spacer-sm', 'spacer-md', 'spacer-lg', 'spacer-xl'] ---- -
diff --git a/app/templates/assets/components/atoms/video.hbs b/app/templates/assets/components/atoms/video.hbs deleted file mode 100644 index 4a8b210..0000000 --- a/app/templates/assets/components/atoms/video.hbs +++ /dev/null @@ -1,9 +0,0 @@ ---- -notes: | - ##### Usage : `{{> video }}` - ##### Options : - - **video-src** - String ---- -
- -
From d38303fe80f9831698fd502908b30a027d02e86e Mon Sep 17 00:00:00 2001 From: Yann Gouffon Date: Fri, 13 May 2016 18:20:03 +0200 Subject: [PATCH 11/20] replace old fabricators templates by swig one --- .../assets/templates/atoms.html.swig | 24 +++++++ app/templates/assets/templates/base.html.swig | 64 +++++++++++++++++++ .../assets/templates/default.html.swig | 6 ++ .../assets/templates/molecules.html.swig | 24 +++++++ .../assets/templates/organisms.html.swig | 24 +++++++ .../assets/templates/views/atoms.html | 11 ---- .../assets/templates/views/docs.html | 14 ---- .../assets/templates/views/index.html | 43 ------------- .../templates/views/layouts/default.html | 42 ------------ .../views/layouts/includes/f-control-bar.html | 7 -- .../views/layouts/includes/f-controls.html | 17 ----- .../views/layouts/includes/f-icons.html | 19 ------ .../layouts/includes/f-item-content.html | 9 --- .../layouts/includes/f-item-controls.html | 12 ---- .../views/layouts/includes/f-item.html | 22 ------- .../views/layouts/includes/f-menu.html | 53 --------------- .../assets/templates/views/molecules.html | 11 ---- .../assets/templates/views/organisms.html | 11 ---- .../assets/templates/views/templates.html | 15 ----- 19 files changed, 142 insertions(+), 286 deletions(-) create mode 100644 app/templates/assets/templates/atoms.html.swig create mode 100644 app/templates/assets/templates/base.html.swig create mode 100644 app/templates/assets/templates/default.html.swig create mode 100644 app/templates/assets/templates/molecules.html.swig create mode 100644 app/templates/assets/templates/organisms.html.swig delete mode 100644 app/templates/assets/templates/views/atoms.html delete mode 100644 app/templates/assets/templates/views/docs.html delete mode 100644 app/templates/assets/templates/views/index.html delete mode 100644 app/templates/assets/templates/views/layouts/default.html delete mode 100644 app/templates/assets/templates/views/layouts/includes/f-control-bar.html delete mode 100644 app/templates/assets/templates/views/layouts/includes/f-controls.html delete mode 100644 app/templates/assets/templates/views/layouts/includes/f-icons.html delete mode 100644 app/templates/assets/templates/views/layouts/includes/f-item-content.html delete mode 100644 app/templates/assets/templates/views/layouts/includes/f-item-controls.html delete mode 100644 app/templates/assets/templates/views/layouts/includes/f-item.html delete mode 100644 app/templates/assets/templates/views/layouts/includes/f-menu.html delete mode 100644 app/templates/assets/templates/views/molecules.html delete mode 100644 app/templates/assets/templates/views/organisms.html delete mode 100644 app/templates/assets/templates/views/templates.html diff --git a/app/templates/assets/templates/atoms.html.swig b/app/templates/assets/templates/atoms.html.swig new file mode 100644 index 0000000..51d10b8 --- /dev/null +++ b/app/templates/assets/templates/atoms.html.swig @@ -0,0 +1,24 @@ +{% extends "base.html.swig" %} + +{% import 'styleguide/f-item.html.swig' as item %} + +{% block content %} +
+ + {% if collections.atoms.length > 0 %} +
+

Atoms

+ {{contents|raw}} +
+ {% for atom in collections.atoms %} + {{item.default('atom' ,atom, loop)}} + {% endfor %} + {% else %} +
+

Atoms

+ {{contents|raw}} +
+ {% endif %} + +
+{% endblock %} diff --git a/app/templates/assets/templates/base.html.swig b/app/templates/assets/templates/base.html.swig new file mode 100644 index 0000000..3f5f58d --- /dev/null +++ b/app/templates/assets/templates/base.html.swig @@ -0,0 +1,64 @@ + + + + + + + + + + + + + + + {% if styleguide %} + + {% endif %} + + + + + + + + {% if styleguide %} + {% include 'styleguide/f-icons.html.swig' %} + {% include 'styleguide/f-menu.html.swig' %} +
+ {% include 'styleguide/f-control.bar.html.swig' %} + {% endif %} + + {% block content %}{% endblock %} + + {% if styleguide %} +
+ {% endif %} + + + + + {% if styleguide %} + + + {% endif %} + + {% block javascripts %}{% endblock %} + + diff --git a/app/templates/assets/templates/default.html.swig b/app/templates/assets/templates/default.html.swig new file mode 100644 index 0000000..f7012c8 --- /dev/null +++ b/app/templates/assets/templates/default.html.swig @@ -0,0 +1,6 @@ +{% extends "base.html.swig" %} + +{% block content %} +

{{title}}

+ {{contents|raw}} +{% endblock %} diff --git a/app/templates/assets/templates/molecules.html.swig b/app/templates/assets/templates/molecules.html.swig new file mode 100644 index 0000000..ea0eb7e --- /dev/null +++ b/app/templates/assets/templates/molecules.html.swig @@ -0,0 +1,24 @@ +{% extends "base.html.swig" %} + +{% import 'styleguide/f-item.html.swig' as item %} + +{% block content %} +
+ + {% if collections.molecules.length > 0 %} +
+

Molecules

+ {{contents|raw}} +
+ {% for molecule in collections.molecules %} + {{item.default('molecule', molecule, loop)}} + {% endfor %} + {% else %} +
+

molecules

+ {{contents|raw}} +
+ {% endif %} + +
+{% endblock %} diff --git a/app/templates/assets/templates/organisms.html.swig b/app/templates/assets/templates/organisms.html.swig new file mode 100644 index 0000000..5c96244 --- /dev/null +++ b/app/templates/assets/templates/organisms.html.swig @@ -0,0 +1,24 @@ +{% extends "base.html.swig" %} + +{% import 'styleguide/f-item.html.swig' as item %} + +{% block content %} +
+ + {% if collections.organisms.length > 0 %} +
+

Organisms

+ {{contents|raw}} +
+ {% for organism in collections.organisms %} + {{item.default('organism', organism, loop)}} + {% endfor %} + {% else %} +
+

organisms

+ {{contents|raw}} +
+ {% endif %} + +
+{% endblock %} diff --git a/app/templates/assets/templates/views/atoms.html b/app/templates/assets/templates/views/atoms.html deleted file mode 100644 index 4ad2903..0000000 --- a/app/templates/assets/templates/views/atoms.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -fabricator: true ---- - -

Atoms

- -{{#each materials.atoms.items}} - -{{> f-item this}} - -{{/each}} diff --git a/app/templates/assets/templates/views/docs.html b/app/templates/assets/templates/views/docs.html deleted file mode 100644 index edfff29..0000000 --- a/app/templates/assets/templates/views/docs.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -fabricator: true ---- - -

Docs

- -{{#each docs}} - -
-

{{name}}

- {{{content}}} -
- -{{/each}} diff --git a/app/templates/assets/templates/views/index.html b/app/templates/assets/templates/views/index.html deleted file mode 100644 index 4f387ab..0000000 --- a/app/templates/assets/templates/views/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: Overview | Fabricator -fabricator: true ---- - -

Overview

- -

This UI toolkit is a highly-modular design system for rapid web page development. It contains different materials that can be assembled into more complex page layouts.

- -

This guide contains real working examples, code snippets, documentation, and style guidelines.

- -

Usage

- -

Start by adding the following files to your page:

- -
<link rel="stylesheet" href="assets/toolkit/styles/toolkit.css">
- -
<script src="assets/toolkit/scripts/toolkit.js"></script>
- - -

Color

- -{{#each colors}} -
- {{#each this}} -
-
{{@key}}
-
{{this}}
-
- {{/each}} -
-{{/each}} - -

Typography

- -

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam enim sunt sapiente molestias, sed dicta inventore consectetur beatae asperiores, aliquid laboriosam animi, praesentium repudiandae et, quam saepe sint cupiditate reiciendis.

- -

Heading Level 1

-

Heading Level 2

-

Heading Level 3

-

Heading Level 4

-
Heading Level 5
-
Heading Level 6
diff --git a/app/templates/assets/templates/views/layouts/default.html b/app/templates/assets/templates/views/layouts/default.html deleted file mode 100644 index 99f02a4..0000000 --- a/app/templates/assets/templates/views/layouts/default.html +++ /dev/null @@ -1,42 +0,0 @@ - - - - - - - - - {{title}} - - - - - {{#if fabricator}} - - {{/if}} - - - - - - - - {{#if fabricator}} - {{> f-icons}} - {{> f-menu}} -
- {{> f-control-bar}} - {{/if}} - - {% body %} - - {{#if fabricator}} -
- - {{/if}} - - - - diff --git a/app/templates/assets/templates/views/layouts/includes/f-control-bar.html b/app/templates/assets/templates/views/layouts/includes/f-control-bar.html deleted file mode 100644 index 8daaaab..0000000 --- a/app/templates/assets/templates/views/layouts/includes/f-control-bar.html +++ /dev/null @@ -1,7 +0,0 @@ -
-
- - - -
-
diff --git a/app/templates/assets/templates/views/layouts/includes/f-controls.html b/app/templates/assets/templates/views/layouts/includes/f-controls.html deleted file mode 100644 index e911717..0000000 --- a/app/templates/assets/templates/views/layouts/includes/f-controls.html +++ /dev/null @@ -1,17 +0,0 @@ -
-
- - - -
-
- - - -
-
- - - -
-
diff --git a/app/templates/assets/templates/views/layouts/includes/f-icons.html b/app/templates/assets/templates/views/layouts/includes/f-icons.html deleted file mode 100644 index cffbdf0..0000000 --- a/app/templates/assets/templates/views/layouts/includes/f-icons.html +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - - - - - - - - - - - - diff --git a/app/templates/assets/templates/views/layouts/includes/f-item-content.html b/app/templates/assets/templates/views/layouts/includes/f-item-content.html deleted file mode 100644 index e241c24..0000000 --- a/app/templates/assets/templates/views/layouts/includes/f-item-content.html +++ /dev/null @@ -1,9 +0,0 @@ -{{#if notes}}
- {{{notes}}} -
{{/if}} -
- {{{material @key @root}}} -
-
- 
{{material @key @root}}
-
diff --git a/app/templates/assets/templates/views/layouts/includes/f-item-controls.html b/app/templates/assets/templates/views/layouts/includes/f-item-controls.html deleted file mode 100644 index 1e0b171..0000000 --- a/app/templates/assets/templates/views/layouts/includes/f-item-controls.html +++ /dev/null @@ -1,12 +0,0 @@ -
- {{#if notes}} - - - - {{/if}} - - - - - -
diff --git a/app/templates/assets/templates/views/layouts/includes/f-item.html b/app/templates/assets/templates/views/layouts/includes/f-item.html deleted file mode 100644 index e600c0a..0000000 --- a/app/templates/assets/templates/views/layouts/includes/f-item.html +++ /dev/null @@ -1,22 +0,0 @@ -
- -{{#if items}} -
-

{{name}}

-
- {{#each items}} -
-
-

{{name}}

- {{> f-item-controls}} -
{{> f-item-content this}} -
- {{/each}} -{{else}} -
-

{{name}}

- {{> f-item-controls}} -
{{> f-item-content this}} -{{/if}} - -
diff --git a/app/templates/assets/templates/views/layouts/includes/f-menu.html b/app/templates/assets/templates/views/layouts/includes/f-menu.html deleted file mode 100644 index f426bce..0000000 --- a/app/templates/assets/templates/views/layouts/includes/f-menu.html +++ /dev/null @@ -1,53 +0,0 @@ - -
- - {{> f-controls}} - -
    - -
  • - Overview -
    • - -
  • - Docs -
      - {{#each docs}} -
    • - {{name}} -
      • - {{/each}} -
    -
    • - - {{#each materials}} -
  • - {{name}} -
      - {{#each items}} -
    • - {{name}} -
      • - {{/each}} -
    -
    • - {{/each}} - - {{#each views}} -
  • - {{name}} -
      - {{#each items}} -
    • - {{name}} -
      • - {{/each}} -
    -
    • - {{/each}} - -
- - -
- diff --git a/app/templates/assets/templates/views/molecules.html b/app/templates/assets/templates/views/molecules.html deleted file mode 100644 index 9efedea..0000000 --- a/app/templates/assets/templates/views/molecules.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -fabricator: true ---- - -

Molecules

- -{{#each materials.molecules.items}} - -{{> f-item this}} - -{{/each}} diff --git a/app/templates/assets/templates/views/organisms.html b/app/templates/assets/templates/views/organisms.html deleted file mode 100644 index 1767584..0000000 --- a/app/templates/assets/templates/views/organisms.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -fabricator: true ---- - -

Organisms

- -{{#each materials.organisms.items}} - -{{> f-item this}} - -{{/each}} diff --git a/app/templates/assets/templates/views/templates.html b/app/templates/assets/templates/views/templates.html deleted file mode 100644 index 26b21ab..0000000 --- a/app/templates/assets/templates/views/templates.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -fabricator: true ---- - -

Templates

- -
    -{{#each views.templates.items}} - -
  • - {{name}} -
    • - -{{/each}} -
From ae87396e0b7d8fb6512b51d218d9b2db6f37ff56 Mon Sep 17 00:00:00 2001 From: Yann Gouffon Date: Fri, 13 May 2016 18:21:58 +0200 Subject: [PATCH 12/20] use json for data --- app/templates/assets/data/colors.json | 9 +++++++++ app/templates/assets/data/colors.yml | 6 ------ 2 files changed, 9 insertions(+), 6 deletions(-) create mode 100644 app/templates/assets/data/colors.json delete mode 100644 app/templates/assets/data/colors.yml diff --git a/app/templates/assets/data/colors.json b/app/templates/assets/data/colors.json new file mode 100644 index 0000000..bf33ae9 --- /dev/null +++ b/app/templates/assets/data/colors.json @@ -0,0 +1,9 @@ +{ + "primary": { + "black": "#000", + "mine": "#222", + "silver": "#7F7F7F", + "dust": "#E6E6E6", + "white": "#fff" + } +} diff --git a/app/templates/assets/data/colors.yml b/app/templates/assets/data/colors.yml deleted file mode 100644 index 0191ce8..0000000 --- a/app/templates/assets/data/colors.yml +++ /dev/null @@ -1,6 +0,0 @@ -primary: - black: "#000" - mine: "#222" - silver: "#7F7F7F" - dust: "#E6E6E6" - white: "#fff" From 5e308fdf0f6ddcb90332f4e3c5e6fd4681f3c103 Mon Sep 17 00:00:00 2001 From: Yann Gouffon Date: Fri, 13 May 2016 18:38:11 +0200 Subject: [PATCH 13/20] update component subgen --- app/templates/assets/docs/javascript.md | 4 ++++ component/index.js | 12 ++++-------- component/templates/_component.hbs | 4 +++- 3 files changed, 11 insertions(+), 9 deletions(-) diff --git a/app/templates/assets/docs/javascript.md b/app/templates/assets/docs/javascript.md index b70c6be..56fad8a 100644 --- a/app/templates/assets/docs/javascript.md +++ b/app/templates/assets/docs/javascript.md @@ -1,3 +1,7 @@ +--- +title: JavaScript +--- + This is a markdown document. ```javascript diff --git a/component/index.js b/component/index.js index 67ad07c..ceaa615 100644 --- a/component/index.js +++ b/component/index.js @@ -39,10 +39,6 @@ module.exports = yeoman.generators.Base.extend({ name: 'Organism', value: 'organisms', checked: false - }, { - name: 'Template', - value: 'templates', - checked: false } ] },{ @@ -66,10 +62,10 @@ module.exports = yeoman.generators.Base.extend({ writing: function () { if (typeof this.name !== 'undefined' && typeof this.type !== 'undefined') { - if (this.type !== 'templates' && !fs.existsSync(this.destinationPath(this.config.assets + 'components/'+ this.type +'/'+ slug(this.name).toLowerCase() +'.hbs'))) { - this.template('_component.hbs', this.config.assets + 'components/'+ this.type +'/'+ slug(this.name).toLowerCase() +'.hbs'); - } else if (this.type === 'templates' && !fs.existsSync(this.destinationPath(this.config.assets + 'templates/'+ slug(this.name).toLowerCase() +'.html'))) { - this.template('component.html', this.config.assets + 'templates/'+ slug(this.name).toLowerCase() +'.html'); + if (this.type !== 'templates' && !fs.existsSync(this.destinationPath(this.config.assets + 'components/'+ this.type +'/'+ slug(this.name).toLowerCase() +'.html.swig'))) { + this.template('_component.html.swig', this.config.assets + 'components/'+ this.type +'/'+ slug(this.name).toLowerCase() +'.html.swig'); + } else if (this.type === 'templates' && !fs.existsSync(this.destinationPath(this.config.assets + 'templates/'+ slug(this.name).toLowerCase() +'.html.swig'))) { + this.template('component.html.swig', this.config.assets + 'templates/'+ slug(this.name).toLowerCase() +'.html.swig'); } else { this.log(chalk.red(slug(this.name).toLowerCase() + " already founded !") + "\nMake sure that your component doens't already exist."); } diff --git a/component/templates/_component.hbs b/component/templates/_component.hbs index a62ff5b..b6b2c47 100644 --- a/component/templates/_component.hbs +++ b/component/templates/_component.hbs @@ -1,6 +1,8 @@ --- +title: <%= slug(name).toLowerCase() %> +collection: <%= type %> notes: | - ##### Usage : `{{> <%= slug(name).toLowerCase() %> }}` + ##### Usage : `<%= slug(name).toLowerCase() %>` ##### Options : - **option** - Type --- From d0c49654e2b267d69973d189d766de00f25a4511 Mon Sep 17 00:00:00 2001 From: Yann Gouffon Date: Fri, 13 May 2016 18:56:59 +0200 Subject: [PATCH 14/20] add pages components instead of mixing it with templates --- app/index.js | 1 + app/templates/_gulp_config.json | 4 ++++ .../assets/components/pages/.gitkeep | 0 app/templates/assets/templates/page.html.swig | 6 +++++ app/templates/tasks/metalsmith.js | 2 +- component/index.js | 22 +++++++++---------- .../{_component.hbs => _component.html} | 0 component/templates/_pages.html | 6 +++++ 8 files changed, 29 insertions(+), 12 deletions(-) rename component/templates/component.html => app/templates/assets/components/pages/.gitkeep (100%) create mode 100644 app/templates/assets/templates/page.html.swig rename component/templates/{_component.hbs => _component.html} (100%) create mode 100644 component/templates/_pages.html diff --git a/app/index.js b/app/index.js index e7f4605..892e22c 100644 --- a/app/index.js +++ b/app/index.js @@ -135,6 +135,7 @@ module.exports = yeoman.generators.Base.extend({ this.mkdir(this.assets + 'components/atoms'); this.mkdir(this.assets + 'components/molecules'); this.mkdir(this.assets + 'components/organisms'); + this.mkdir(this.assets + 'components/pages'); this.directory('assets/templates', this.assets + 'templates'); this.directory('assets/data', this.assets + 'data'); this.directory('assets/docs', this.assets + 'docs'); diff --git a/app/templates/_gulp_config.json b/app/templates/_gulp_config.json index 053965b..5f5e6f9 100644 --- a/app/templates/_gulp_config.json +++ b/app/templates/_gulp_config.json @@ -62,6 +62,10 @@ "organisms": { "sortBy": "title", "reverse": false + }, + "pages": { + "sortBy": "title", + "reverse": false } }, "layouts": { diff --git a/component/templates/component.html b/app/templates/assets/components/pages/.gitkeep similarity index 100% rename from component/templates/component.html rename to app/templates/assets/components/pages/.gitkeep diff --git a/app/templates/assets/templates/page.html.swig b/app/templates/assets/templates/page.html.swig new file mode 100644 index 0000000..5506329 --- /dev/null +++ b/app/templates/assets/templates/page.html.swig @@ -0,0 +1,6 @@ +{% extends "base.html.swig" %} + +{% block content %} + {% set path = '../../components/pages/' + title + '.html.swig' %} + {% include path %} +{% endblock %} diff --git a/app/templates/tasks/metalsmith.js b/app/templates/tasks/metalsmith.js index 04d4e98..d2640c2 100644 --- a/app/templates/tasks/metalsmith.js +++ b/app/templates/tasks/metalsmith.js @@ -45,7 +45,7 @@ module.exports = function() { layouts(config.metalsmith.plugins.layouts) ] })) - .pipe(gulp.dest(config.metalsmith.dist + 'styleguide')); + .pipe(gulp.dest(config.metalsmith.dist)); }); /* diff --git a/component/index.js b/component/index.js index ceaa615..f072a13 100644 --- a/component/index.js +++ b/component/index.js @@ -39,6 +39,10 @@ module.exports = yeoman.generators.Base.extend({ name: 'Organism', value: 'organisms', checked: false + }, { + name: 'Page', + value: 'pages', + checked: false } ] },{ @@ -62,26 +66,22 @@ module.exports = yeoman.generators.Base.extend({ writing: function () { if (typeof this.name !== 'undefined' && typeof this.type !== 'undefined') { - if (this.type !== 'templates' && !fs.existsSync(this.destinationPath(this.config.assets + 'components/'+ this.type +'/'+ slug(this.name).toLowerCase() +'.html.swig'))) { - this.template('_component.html.swig', this.config.assets + 'components/'+ this.type +'/'+ slug(this.name).toLowerCase() +'.html.swig'); - } else if (this.type === 'templates' && !fs.existsSync(this.destinationPath(this.config.assets + 'templates/'+ slug(this.name).toLowerCase() +'.html.swig'))) { - this.template('component.html.swig', this.config.assets + 'templates/'+ slug(this.name).toLowerCase() +'.html.swig'); + if (this.type !== 'pages' && !fs.existsSync(this.destinationPath(this.config.assets + 'components/'+ this.type +'/'+ slug(this.name).toLowerCase() +'.html.' + this.config.metalsmith.plugins.layouts.engine))) { + this.template('_component.html', this.config.assets + 'components/'+ this.type +'/'+ slug(this.name).toLowerCase() +'.html.' + this.config.metalsmith.plugins.layouts.engine); + } else if (this.type === 'pages' && !fs.existsSync(this.destinationPath(this.config.assets + 'pages/'+ slug(this.name).toLowerCase() +'.html.' + this.config.metalsmith.plugins.layouts.engine))) { + this.template('_page.html', this.config.assets + 'pages/'+ slug(this.name).toLowerCase() +'.html.' + this.config.metalsmith.plugins.layouts.engine); } else { this.log(chalk.red(slug(this.name).toLowerCase() + " already founded !") + "\nMake sure that your component doens't already exist."); } - var plural = ''; - if (this.type !== 'templates') { - plural = 's'; - } - if (!fs.existsSync(this.destinationPath(this.config.assets + 'sass/'+ this.type +'/_'+ slug(this.name).toLowerCase() + plural +'.scss'))) { - this.copy('components.scss', this.config.assets + 'sass/'+ this.type +'/_'+ slug(this.name).toLowerCase() + plural +'.scss'); + if (!fs.existsSync(this.destinationPath(this.config.assets + 'sass/'+ this.type +'/_'+ slug(this.name).toLowerCase() + '.scss'))) { + this.copy('components.scss', this.config.assets + 'sass/'+ this.type +'/_'+ slug(this.name).toLowerCase() + '.scss'); } else { 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() + plural +"';"; + importer = "@import '"+ this.type +"/"+ slug(this.name).toLowerCase() + "';"; if(fs.existsSync(stylesheet)){ var body = fs.readFileSync(stylesheet).toString(); if (body.indexOf(importer) < 0 ) { diff --git a/component/templates/_component.hbs b/component/templates/_component.html similarity index 100% rename from component/templates/_component.hbs rename to component/templates/_component.html diff --git a/component/templates/_pages.html b/component/templates/_pages.html new file mode 100644 index 0000000..4175a06 --- /dev/null +++ b/component/templates/_pages.html @@ -0,0 +1,6 @@ +--- +title: <%= slug(name).toLowerCase() %> +collection: pages +styleguide: false +layout: page.html.swig +--- From a9324e7b007f003145521dcb614df0d8427783e0 Mon Sep 17 00:00:00 2001 From: Yann Gouffon Date: Fri, 13 May 2016 18:59:08 +0200 Subject: [PATCH 15/20] add missing toolbox styleguide components and a menu entries for pages --- .gitignore | 1 - .../styleguide/f-control.bar.html.swig | 7 +++ .../templates/styleguide/f-controls.html.swig | 17 ++++++ .../templates/styleguide/f-icons.html.swig | 19 ++++++ .../styleguide/f-item-content.html.swig | 13 ++++ .../styleguide/f-item-controls.html.swig | 14 +++++ .../templates/styleguide/f-item.html.swig | 10 ++++ .../templates/styleguide/f-menu.html.swig | 60 +++++++++++++++++++ 8 files changed, 140 insertions(+), 1 deletion(-) create mode 100644 app/templates/assets/templates/styleguide/f-control.bar.html.swig create mode 100644 app/templates/assets/templates/styleguide/f-controls.html.swig create mode 100644 app/templates/assets/templates/styleguide/f-icons.html.swig create mode 100644 app/templates/assets/templates/styleguide/f-item-content.html.swig create mode 100644 app/templates/assets/templates/styleguide/f-item-controls.html.swig create mode 100644 app/templates/assets/templates/styleguide/f-item.html.swig create mode 100644 app/templates/assets/templates/styleguide/f-menu.html.swig diff --git a/.gitignore b/.gitignore index e371e1e..52ced8f 100755 --- a/.gitignore +++ b/.gitignore @@ -1,7 +1,6 @@ node_modules dist build -styleguide .sass-cache .publish *.DS_Store diff --git a/app/templates/assets/templates/styleguide/f-control.bar.html.swig b/app/templates/assets/templates/styleguide/f-control.bar.html.swig new file mode 100644 index 0000000..47dafee --- /dev/null +++ b/app/templates/assets/templates/styleguide/f-control.bar.html.swig @@ -0,0 +1,7 @@ +
+
+ + + +
+
diff --git a/app/templates/assets/templates/styleguide/f-controls.html.swig b/app/templates/assets/templates/styleguide/f-controls.html.swig new file mode 100644 index 0000000..829103c --- /dev/null +++ b/app/templates/assets/templates/styleguide/f-controls.html.swig @@ -0,0 +1,17 @@ +
+
+ + + +
+
+ + + +
+
+ + + +
+
diff --git a/app/templates/assets/templates/styleguide/f-icons.html.swig b/app/templates/assets/templates/styleguide/f-icons.html.swig new file mode 100644 index 0000000..27fa44c --- /dev/null +++ b/app/templates/assets/templates/styleguide/f-icons.html.swig @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/app/templates/assets/templates/styleguide/f-item-content.html.swig b/app/templates/assets/templates/styleguide/f-item-content.html.swig new file mode 100644 index 0000000..d3f107f --- /dev/null +++ b/app/templates/assets/templates/styleguide/f-item-content.html.swig @@ -0,0 +1,13 @@ +{% macro default(type, content) %} + {% set path = '../../components/' + type + 's/' + content.title + '.html.swig' %} + + {% if content.notes %}
+ {{content.notes|markdown|raw}} +
{% endif %} +
+ {% include path %} +
+
+ 
{% include path %}
+
+{% endmacro %} diff --git a/app/templates/assets/templates/styleguide/f-item-controls.html.swig b/app/templates/assets/templates/styleguide/f-item-controls.html.swig new file mode 100644 index 0000000..3a78fa5 --- /dev/null +++ b/app/templates/assets/templates/styleguide/f-item-controls.html.swig @@ -0,0 +1,14 @@ +{% macro default(content) %} +
+ {% if content.notes %} + + + + {% endif %} + + + + + +
+{% endmacro %} diff --git a/app/templates/assets/templates/styleguide/f-item.html.swig b/app/templates/assets/templates/styleguide/f-item.html.swig new file mode 100644 index 0000000..0dd974a --- /dev/null +++ b/app/templates/assets/templates/styleguide/f-item.html.swig @@ -0,0 +1,10 @@ +{% macro default(type, content, loop) %} +{% import 'f-item-controls.html.swig' as item_control %} +{% import 'f-item-content.html.swig' as item_content %} +
+
+

{{content.title}}

+ {{item_control.default(content)}} +
{{item_content.default(type, content)}} +
+{% endmacro %} diff --git a/app/templates/assets/templates/styleguide/f-menu.html.swig b/app/templates/assets/templates/styleguide/f-menu.html.swig new file mode 100644 index 0000000..0f89df7 --- /dev/null +++ b/app/templates/assets/templates/styleguide/f-menu.html.swig @@ -0,0 +1,60 @@ + +
+ + {% include 'f-controls.html.swig' %} + + + + +
+ From 2ac9786a5b5fd194777a2f0fb88dd268dd2714c9 Mon Sep 17 00:00:00 2001 From: Yann Gouffon Date: Fri, 13 May 2016 19:12:49 +0200 Subject: [PATCH 16/20] add stylehint instead of sass-lint --- app/index.js | 2 +- app/templates/_package.json | 4 +- app/templates/sass-lint.yml | 83 ------------------------- app/templates/stylelintrc | 111 ++++++++++++++++++++++++++++++++++ app/templates/tasks/styles.js | 10 ++- 5 files changed, 122 insertions(+), 88 deletions(-) delete mode 100644 app/templates/sass-lint.yml create mode 100644 app/templates/stylelintrc diff --git a/app/index.js b/app/index.js index 892e22c..cb77ba2 100644 --- a/app/index.js +++ b/app/index.js @@ -179,7 +179,7 @@ module.exports = yeoman.generators.Base.extend({ this.copy('gitattributes', '.gitattributes'); this.copy('gitignore', '.gitignore'); this.copy('eslintrc.yml', '.eslintrc.yml'); - this.copy('sass-lint.yml', '.sass-lint.yml'); + this.copy('stylelintrc', '.stylelintrc'); } }, diff --git a/app/templates/_package.json b/app/templates/_package.json index 5e8eb51..4495b36 100644 --- a/app/templates/_package.json +++ b/app/templates/_package.json @@ -52,6 +52,7 @@ "gulp-sass-lint": "^1.1.1", "gulp-size": "^2.0.0", "gulp-sourcemaps": "^1.5.2", + "gulp-stylelint": "^2.0.2", "gulp-uglify": "~1.5.1", "gulp-util": "^3.0.4", "helper-markdown": "^0.2.1", @@ -102,7 +103,8 @@ "sinon": "^1.14.1", "sinon-chai": "^2.7.0", "slug": "^0.9.1", - "swig": "^1.4.2" + "stylelint": "^6.2.2", + "swig": "^1.4.2", "toolbox-utils": "0.0.1", "yargs": "^4.3.2" } diff --git a/app/templates/sass-lint.yml b/app/templates/sass-lint.yml deleted file mode 100644 index 142f90c..0000000 --- a/app/templates/sass-lint.yml +++ /dev/null @@ -1,83 +0,0 @@ -options: - formatter: stylish -files: - include: '**/*.s+(a|c)ss' -rules: - # Extends - extends-before-mixins: 1 - extends-before-declarations: 1 - placeholder-in-extend: 1 - - # Mixins - mixins-before-declarations: 1 - - # Line Spacing - one-declaration-per-line: 1 - empty-line-between-blocks: 1 - single-line-per-selector: 1 - - # Disallows - no-color-keywords: 1 - no-color-literals: 1 - no-css-comments: 1 - no-debug: 1 - no-duplicate-properties: 1 - no-empty-rulesets: 1 - no-extends: 0 - no-ids: 1 - no-important: 1 - no-invalid-hex: 1 - no-mergeable-selectors: 1 - no-misspelled-properties: 1 - no-qualifying-elements: 1 - no-trailing-zero: 1 - no-transition-all: 0 - no-url-protocols: 1 - no-vendor-prefixes: 1 - no-warn: 1 - property-units: 0 - - # Nesting - force-attribute-nesting: 0 - force-element-nesting: 1 - force-pseudo-nesting: 0 - - # Name Formats - class-name-format: 1 - function-name-format: 1 - id-name-format: 0 - mixin-name-format: 1 - placeholder-name-format: 1 - variable-name-format: 1 - - # Style Guide - bem-depth: 0 - border-zero: 1 - brace-style: 1 - clean-import-paths: 1 - empty-args: 1 - hex-length: 1 - hex-notation: 1 - indentation: 1 - leading-zero: 0 - nesting-depth: 0 - property-sort-order: 0 - quotes: 0 - shorthand-values: 1 - url-quotes: 1 - variable-for-property: 1 - zero-unit: 1 - - # Inner Spacing - space-after-comma: 1 - space-before-colon: 1 - space-after-colon: 1 - space-before-brace: 1 - space-before-bang: 1 - space-after-bang: 1 - space-between-parens: 1 - space-around-operator: 1 - - # Final Items - trailing-semicolon: 1 - final-newline: 1 diff --git a/app/templates/stylelintrc b/app/templates/stylelintrc new file mode 100644 index 0000000..612dc2f --- /dev/null +++ b/app/templates/stylelintrc @@ -0,0 +1,111 @@ +{ + "rules": { + "at-rule-name-case": "lower", + "at-rule-no-vendor-prefix": true, + "at-rule-semicolon-newline-after": "always", + "block-closing-brace-newline-after": "always", + "block-closing-brace-space-before": "always-single-line", + "block-no-empty": true, + "block-opening-brace-newline-after": "always-multi-line", + "block-opening-brace-space-after": "always-single-line", + "block-opening-brace-space-before": "always", + "color-hex-case": "lower", + "color-hex-length": "short", + "color-named": "never", + "color-no-hex": true, + "color-no-invalid-hex": true, + "comment-whitespace-inside": "always", + "custom-property-no-outside-root": true, + "declaration-bang-space-after": "never", + "declaration-bang-space-before": "always", + "declaration-block-no-duplicate-properties": [ true, { + "ignore": ["consecutive-duplicates"] + }], + "declaration-block-no-ignored-properties": true, + "declaration-block-no-shorthand-property-overrides": true, + "declaration-block-properties-order": ["content", "display", "flex", "position", "top", "right", "bottom", "left", "float", "width", "height", "margin", "padding", "background", "border", "font-familly", "font-size", "line-height", "font-weight", "font-style", "color", "transform", "transition"], + "declaration-block-semicolon-newline-after": "always", + "declaration-block-semicolon-newline-before": "never-multi-line", + "declaration-block-semicolon-space-after": "always-single-line", + "declaration-block-semicolon-space-before": "never", + "declaration-block-single-line-max-declarations": 1, + "declaration-block-trailing-semicolon": "always", + "declaration-colon-newline-after": "always-multi-line", + "declaration-colon-space-after": "always-single-line", + "declaration-colon-space-before": "never", + "declaration-no-important": true, + "font-family-name-quotes": "single-where-required", + "font-weight-notation": "numeric", + "function-calc-no-unspaced-operator": true, + "function-comma-space-after": "always", + "function-linear-gradient-no-nonstandard-direction": true, + "function-max-empty-lines": 0, + "function-name-case": "lower", + "function-parentheses-space-inside": "never", + "function-url-data-uris": "always", + "function-url-quotes": "single", + "function-whitespace-after": "always", + "indentation": 2, + "max-empty-lines": 1, + "max-line-length": 99999, + "max-nesting-depth": 3, + "media-feature-colon-space-after": "always", + "media-feature-colon-space-before": "never", + "media-feature-name-no-vendor-prefix": true, + "media-feature-no-missing-punctuation": true, + "media-feature-range-operator-space-after": "always", + "media-feature-range-operator-space-before": "always", + "media-query-list-comma-newline-after": "never-multi-line", + "media-query-list-comma-newline-before": "never-multi-line", + "media-query-list-comma-space-after": "always", + "media-query-list-comma-space-before": "never", + "media-query-parentheses-space-inside": "never", + "no-browser-hacks": true, + "no-duplicate-selectors": true, + "no-eol-whitespace": true, + "no-indistinguishable-colors": true, + "no-missing-eof-newline": true, + "no-unknown-animations": true, + "number-leading-zero": "always", + "number-max-precision": 11, + "number-no-trailing-zeros": true, + "number-zero-length-no-unit": true, + "property-case": "lower", + "property-no-vendor-prefix": true, + "property-unit-blacklist": {}, + "property-unit-whitelist": {}, + "property-value-blacklist": {}, + "property-value-whitelist": {}, + "rule-nested-empty-line-before": [ "always-multi-line", { + "except": ["first-nested"], + }], + "rule-non-nested-empty-line-before": "always-multi-line", + "selector-attribute-brackets-space-inside": "never", + "selector-combinator-space-after": "always", + "selector-combinator-space-before": "always", + "selector-list-comma-newline-after": "always", + "selector-list-comma-newline-before": "never-multi-line", + "selector-list-comma-space-before": "never", + "selector-no-id": true, + "selector-no-vendor-prefix": true, + "selector-pseudo-class-case": "lower", + "selector-pseudo-class-parentheses-space-inside": "never", + "selector-pseudo-element-case": "lower", + "selector-pseudo-element-colon-notation": "single", + "selector-root-no-composition": true, + "selector-type-case": "lower", + "shorthand-property-no-redundant-values": true, + "string-no-newline": true, + "string-quotes": "single", + "stylelint-disable-reason": "always-after", + "time-no-imperceptible": true, + "unit-case": "lower", + "unit-no-unknown": true, + "value-keyword-case": "lower", + "value-list-comma-newline-after": "always", + "value-list-comma-newline-before": "never-multi-line", + "value-list-comma-space-after": "always-single-line", + "value-list-comma-space-before": "never", + "value-no-vendor-prefix": true + } +} diff --git a/app/templates/tasks/styles.js b/app/templates/tasks/styles.js index 5bdd297..6e0601f 100644 --- a/app/templates/tasks/styles.js +++ b/app/templates/tasks/styles.js @@ -50,9 +50,13 @@ module.exports = function() { }); gulp.task('styles:lint', function() { - return gulp.src([config.assets + 'sass/**/*.s+(a|c)ss', '!' + config.assets + 'sass/+(bootstrap-variables|main|styleguide).scss']) - .pipe($.sassLint()) - .pipe($.sassLint.format()); + return gulp.src([config.assets + 'sass/**/*.s+(a|c)ss', '!' + config.assets + 'sass/+(bootstrap-variables|bootstrap|main|styleguide|main-variables|_mixins).scss', '!' + config.assets + 'sass/organisms/_photoswipes.scss']) + .pipe($.plumber({errorHandler: errorAlert})) + .pipe($.stylelint({ + reporters: [ + {formatter: 'string', console: true} + ] + })); }); }; From 06235eda69fd80dda31f037ae0e3e8b31d0792a4 Mon Sep 17 00:00:00 2001 From: Yann Gouffon Date: Sat, 14 May 2016 13:39:05 +0200 Subject: [PATCH 17/20] update yoeman base call --- app/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/index.js b/app/index.js index cb77ba2..5539383 100644 --- a/app/index.js +++ b/app/index.js @@ -24,7 +24,7 @@ var toolboxSay = function() { }; -module.exports = yeoman.generators.Base.extend({ +module.exports = yeoman.Base.extend({ initializing: function () { this.pkg = require('../package.json'); }, From 94919c28f183dbc5b5734e3f54e34094f71826b4 Mon Sep 17 00:00:00 2001 From: Yann Gouffon Date: Sat, 14 May 2016 17:22:01 +0200 Subject: [PATCH 18/20] fix broken stuffs --- app/index.js | 3 ++- app/templates/_gulpfile.js | 2 +- app/templates/assets/docs/javascript.md | 2 ++ app/templates/assets/sass/_main.scss | 8 ++------ app/templates/env | 0 component/index.js | 14 ++++++++++---- component/templates/_doc.html | 5 +++++ component/templates/{_pages.html => _page.html} | 0 component/templates/components.scss | 2 +- script/index.js | 2 +- 10 files changed, 24 insertions(+), 14 deletions(-) create mode 100644 app/templates/env create mode 100644 component/templates/_doc.html rename component/templates/{_pages.html => _page.html} (100%) diff --git a/app/index.js b/app/index.js index 5539383..f17bdc1 100644 --- a/app/index.js +++ b/app/index.js @@ -143,7 +143,7 @@ module.exports = yeoman.Base.extend({ this.mkdir(this.assets + 'sass/atoms'); this.mkdir(this.assets + 'sass/molecules'); this.mkdir(this.assets + 'sass/organisms'); - this.mkdir(this.assets + 'sass/templates'); + this.mkdir(this.assets + 'sass/pages'); this.copy('assets/sass/styleguide.scss', this.assets + 'sass/styleguide.scss'); } @@ -179,6 +179,7 @@ module.exports = yeoman.Base.extend({ this.copy('gitattributes', '.gitattributes'); this.copy('gitignore', '.gitignore'); this.copy('eslintrc.yml', '.eslintrc.yml'); + this.copy('env', '.env'); this.copy('stylelintrc', '.stylelintrc'); } }, diff --git a/app/templates/_gulpfile.js b/app/templates/_gulpfile.js index f004de9..dc5b62d 100644 --- a/app/templates/_gulpfile.js +++ b/app/templates/_gulpfile.js @@ -15,8 +15,8 @@ require(config.tasks + 'scripts')(); // $ gulp scripts require(config.tasks + 'icons')(); // $ gulp icons require(config.tasks + 'favicons')(); // $ gulp favicons require(config.tasks + 'clean')(); // $ gulp clean<% if (fabricator) { %> +require(config.tasks + 'metalsmith')(); // $ gulp metalsmith<% } %> require(config.tasks + 'server')(); // $ gulp serve -require(config.tasks + 'metalsmith')(); // $ gulp metalsmith require(config.tasks + 'gh-pages')(); // $ gulp deploy<% if (tests) { %> require(config.tasks + 'tests-regression')(); // $ gulp regression require(config.tasks + 'tests-unit')(); // $ gulp test:unit diff --git a/app/templates/assets/docs/javascript.md b/app/templates/assets/docs/javascript.md index 56fad8a..8fe3e66 100644 --- a/app/templates/assets/docs/javascript.md +++ b/app/templates/assets/docs/javascript.md @@ -1,5 +1,7 @@ --- title: JavaScript +collection: docs +styleguide: true --- This is a markdown document. diff --git a/app/templates/assets/sass/_main.scss b/app/templates/assets/sass/_main.scss index 566db2c..65e9e62 100755 --- a/app/templates/assets/sass/_main.scss +++ b/app/templates/assets/sass/_main.scss @@ -6,16 +6,12 @@ @import 'bootstrap';<% } %> <% if (fabricator) { %> -// atoms:<% if (componentButton) { %> -@import 'atoms/buttons';<% } %><% if (componentVideo) { %> -@import 'atoms/videos';<% } %><% if (componentSpacer) { %> -@import 'atoms/spacers';<% } %><% if (componentSeparator) { %> -@import 'atoms/separators';<% } %> +// atoms: // molecules: // organisms: -// templates: +// pages: <% } %> diff --git a/app/templates/env b/app/templates/env new file mode 100644 index 0000000..e69de29 diff --git a/component/index.js b/component/index.js index f072a13..fe686ef 100644 --- a/component/index.js +++ b/component/index.js @@ -6,7 +6,7 @@ var yosay = require('yosay'); var slug = require('slug'); var fs = require('fs'); -module.exports = yeoman.generators.Base.extend({ +module.exports = yeoman.Base.extend({ initializing: function () { if(fs.existsSync(this.destinationPath('gulp_config.json'))){ @@ -43,6 +43,10 @@ module.exports = yeoman.generators.Base.extend({ name: 'Page', value: 'pages', checked: false + }, { + name: 'Doc page', + value: 'doc', + checked: false } ] },{ @@ -66,10 +70,12 @@ module.exports = yeoman.generators.Base.extend({ writing: function () { if (typeof this.name !== 'undefined' && typeof this.type !== 'undefined') { - if (this.type !== 'pages' && !fs.existsSync(this.destinationPath(this.config.assets + 'components/'+ this.type +'/'+ slug(this.name).toLowerCase() +'.html.' + this.config.metalsmith.plugins.layouts.engine))) { + if (this.type !== 'doc' && this.type !== 'pages' && !fs.existsSync(this.destinationPath(this.config.assets + 'components/'+ this.type +'/'+ slug(this.name).toLowerCase() +'.html.' + this.config.metalsmith.plugins.layouts.engine))) { this.template('_component.html', this.config.assets + 'components/'+ this.type +'/'+ slug(this.name).toLowerCase() +'.html.' + this.config.metalsmith.plugins.layouts.engine); - } else if (this.type === 'pages' && !fs.existsSync(this.destinationPath(this.config.assets + 'pages/'+ slug(this.name).toLowerCase() +'.html.' + this.config.metalsmith.plugins.layouts.engine))) { - this.template('_page.html', this.config.assets + 'pages/'+ slug(this.name).toLowerCase() +'.html.' + this.config.metalsmith.plugins.layouts.engine); + } else if (this.type !== 'doc' && this.type === 'pages' && !fs.existsSync(this.destinationPath(this.config.assets + 'components/pages/'+ slug(this.name).toLowerCase() +'.html.' + this.config.metalsmith.plugins.layouts.engine))) { + this.template('_page.html', this.config.assets + 'components/pages/'+ slug(this.name).toLowerCase() +'.html.' + this.config.metalsmith.plugins.layouts.engine); + } else if (this.type === 'doc' && this.type !== 'pages' && !fs.existsSync(this.destinationPath(this.config.assets + 'docs/'+ slug(this.name).toLowerCase() +'.md'))) { + this.template('_doc.html', this.config.assets + 'docs/'+ slug(this.name).toLowerCase() +'.md'); } else { this.log(chalk.red(slug(this.name).toLowerCase() + " already founded !") + "\nMake sure that your component doens't already exist."); } diff --git a/component/templates/_doc.html b/component/templates/_doc.html new file mode 100644 index 0000000..973d29f --- /dev/null +++ b/component/templates/_doc.html @@ -0,0 +1,5 @@ +--- +title: <%= name %> +collection: docs +styleguide: true +--- diff --git a/component/templates/_pages.html b/component/templates/_page.html similarity index 100% rename from component/templates/_pages.html rename to component/templates/_page.html diff --git a/component/templates/components.scss b/component/templates/components.scss index 9f44090..8a5d73e 100644 --- a/component/templates/components.scss +++ b/component/templates/components.scss @@ -1 +1 @@ -@charset "UTF-8"; +@charset 'UTF-8'; diff --git a/script/index.js b/script/index.js index 6df1196..2b74f29 100644 --- a/script/index.js +++ b/script/index.js @@ -6,7 +6,7 @@ var yosay = require('yosay'); var slug = require('slug'); var fs = require('fs'); -module.exports = yeoman.generators.Base.extend({ +module.exports = yeoman.Base.extend({ initializing: function () { if(fs.existsSync(this.destinationPath('gulp_config.json'))){ From 27639ad88036e78a9f468b759ff072724e8e3342 Mon Sep 17 00:00:00 2001 From: Yann Gouffon Date: Sat, 14 May 2016 17:36:16 +0200 Subject: [PATCH 19/20] add better metalsmith env with global metadata, contentful api acces (if needed), doc pages and pages,... --- app/templates/_gulp_config.json | 10 ++++- app/templates/_package.json | 45 ++++--------------- app/templates/assets/docs/atoms.md | 7 +++ app/templates/assets/docs/index.md | 5 +++ app/templates/assets/docs/molecules.md | 7 +++ app/templates/assets/docs/organisms.md | 7 +++ app/templates/assets/templates/base.html.swig | 8 ++-- app/templates/assets/templates/page.html.swig | 19 +++++++- .../templates/styleguide/f-menu.html.swig | 27 +++++++---- app/templates/tasks/_clean.js | 2 +- app/templates/tasks/_server.js | 14 +++--- app/templates/tasks/favicons.js | 2 +- app/templates/tasks/filters.js | 12 +++++ app/templates/tasks/metalsmith.js | 34 ++++++++++++-- app/templates/tasks/styles.js | 2 +- app/templates/tasks/vendors.js | 2 +- 16 files changed, 136 insertions(+), 67 deletions(-) create mode 100644 app/templates/assets/docs/atoms.md create mode 100644 app/templates/assets/docs/index.md create mode 100644 app/templates/assets/docs/molecules.md create mode 100644 app/templates/assets/docs/organisms.md diff --git a/app/templates/_gulp_config.json b/app/templates/_gulp_config.json index 5f5e6f9..8be2c78 100644 --- a/app/templates/_gulp_config.json +++ b/app/templates/_gulp_config.json @@ -48,7 +48,11 @@ "dist": "styleguide/", "plugins": { "permalinks": { - "pattern": ":collection/:title" + "pattern": ":title", + "linksets": [{ + "match": { "collection": "pages" }, + "pattern": ":title" + }] }, "collections": { "atoms": { @@ -66,6 +70,10 @@ "pages": { "sortBy": "title", "reverse": false + }, + "docs": { + "sortBy": "title", + "reverse": false } }, "layouts": { diff --git a/app/templates/_package.json b/app/templates/_package.json index 4495b36..c90e7d6 100644 --- a/app/templates/_package.json +++ b/app/templates/_package.json @@ -13,10 +13,9 @@ "devDependencies": { "async": "^2.0.0-rc.2", "autoprefixer": "^6.2.3", - "babel-core": "6.7.4", + "babel-core": "6.8.0", "babel-loader": "6.2.4", "babel-preset-es2015": "^6.6.0", - "backstopjs": "^1.0.0", "browser-sync": "^2.7.1", "casperjs": "^1.1.0-beta3", "chai": "^3.4.1", @@ -29,19 +28,18 @@ "gulp-browserify": "^0.5.1", "gulp-casperjs": "0.0.5", "gulp-changed": "^1.3.0", + "gulp-clean-css": "^2.0.7", "gulp-concat": "^2.5.2", "gulp-consolidate": "^0.2.0", "gulp-eslint": "^2.0.0", "gulp-front-matter": "^1.3.0", "gulp-gh-pages": "^0.5.1", - "gulp-iconfont": "^6.0.0", - "gulp-inline-fonts": "^1.0.1", + "gulp-iconfont": "^8.0.0", "gulp-if": "^2.0.0", - "gulp-imagemin": "^2.2.1", - "gulp-jshint": "^2.0.0", + "gulp-imagemin": "^3.0.1", + "gulp-inline-fonts": "^1.0.1", "gulp-load-plugins": "^1.2.0", "gulp-metalsmith": "^1.0.0", - "gulp-minify-css": "^1.1.1", "gulp-mocha": "^2.1.1", "gulp-notify": "^2.2.0", "gulp-phantomcss": "0.1.1", @@ -49,54 +47,27 @@ "gulp-postcss": "^6.0.1", "gulp-rename": "^1.2.2", "gulp-sass": "^2.0.0", - "gulp-sass-lint": "^1.1.1", "gulp-size": "^2.0.0", "gulp-sourcemaps": "^1.5.2", "gulp-stylelint": "^2.0.2", "gulp-uglify": "~1.5.1", "gulp-util": "^3.0.4", - "helper-markdown": "^0.2.1", - "imagemin-pngquant": "^4.1.0", + "imagemin-pngquant": "^5.0.0", "imgur": "^0.1.5", - "jsdom": "^8.2.0", - "jshint-stylish": "^2.1.0", + "jsdom": "^9.0.0", "lodash": "^4.1.6", "marked": "^0.3.5", "metalsmith": "^2.1.0", "metalsmith-collections": "^0.7.0", - "metalsmith-concat": "^5.0.2", - "metalsmith-data-markdown": "0.0.3", - "metalsmith-each": "^0.1.1", - "metalsmith-elevate": "0.0.0", - "metalsmith-filemetadata": "^1.0.0", - "metalsmith-flatten": "^0.2.0", + "metalsmith-define": "^2.0.1", "metalsmith-if": "^0.1.1", - "metalsmith-include": "0.0.2", - "metalsmith-in-place": "^1.4.4", - "metalsmith-jquery": "^0.1.2", - "metalsmith-json": "^0.1.2", - "metalsmith-json-to-files": "^1.0.0", "metalsmith-layouts": "^1.6.5", "metalsmith-markdown": "^0.2.1", - "metalsmith-metadata": "0.0.4", - "metalsmith-metafiles": "^2.0.0", "metalsmith-pagination": "^1.4.0", - "metalsmith-partial": "^0.1.0", "metalsmith-paths": "^2.1.2", "metalsmith-permalinks": "^0.5.0", - "metalsmith-placeholder": "^0.1.2", - "metalsmith-prism": "^2.2.0", - "metalsmith-prismic": "^0.10.0", - "metalsmith-renamer": "^0.2.2", "metalsmith-rootpath": "^0.1.7", - "metalsmith-series": "^0.1.0", - "metalsmith-shortcodes": "0.0.2", "metalsmith-slug": "^0.2.0", - "metalsmith-static": "0.0.5", - "metalsmith-swig-helpers": "^1.4.2", - "metalsmith-tags": "^1.2.1", - "metalsmith-writemetadata": "^0.4.5", - "respond.js": "^1.4.2", "mocha": "^2.2.5", "phantomcss": "^1.0.0", "run-sequence": "~1.1.0", diff --git a/app/templates/assets/docs/atoms.md b/app/templates/assets/docs/atoms.md new file mode 100644 index 0000000..4eb22bf --- /dev/null +++ b/app/templates/assets/docs/atoms.md @@ -0,0 +1,7 @@ +--- +title: Atoms +order: 1 +layout: atoms.html.swig +styleguide: true +--- +Atoms are tiny components diff --git a/app/templates/assets/docs/index.md b/app/templates/assets/docs/index.md new file mode 100644 index 0000000..89fdd78 --- /dev/null +++ b/app/templates/assets/docs/index.md @@ -0,0 +1,5 @@ +--- +title: Overview +styleguide: true +permalink: false +--- diff --git a/app/templates/assets/docs/molecules.md b/app/templates/assets/docs/molecules.md new file mode 100644 index 0000000..484c0f0 --- /dev/null +++ b/app/templates/assets/docs/molecules.md @@ -0,0 +1,7 @@ +--- +title: Molecules +order: 2 +layout: molecules.html.swig +styleguide: true +--- +Molecules are atom groups diff --git a/app/templates/assets/docs/organisms.md b/app/templates/assets/docs/organisms.md new file mode 100644 index 0000000..51a36de --- /dev/null +++ b/app/templates/assets/docs/organisms.md @@ -0,0 +1,7 @@ +--- +title: Organisms +order: 3 +layout: organisms.html.swig +styleguide: true +--- +Organisms are molecules groups diff --git a/app/templates/assets/templates/base.html.swig b/app/templates/assets/templates/base.html.swig index 3f5f58d..a1ec246 100644 --- a/app/templates/assets/templates/base.html.swig +++ b/app/templates/assets/templates/base.html.swig @@ -13,7 +13,7 @@ {% if styleguide %} - + {% endif %} @@ -37,8 +37,8 @@ {% endif %} - - + + {% if styleguide %} - + {% endif %} {% block javascripts %}{% endblock %} diff --git a/app/templates/assets/templates/page.html.swig b/app/templates/assets/templates/page.html.swig index 5506329..a894b26 100644 --- a/app/templates/assets/templates/page.html.swig +++ b/app/templates/assets/templates/page.html.swig @@ -1,6 +1,21 @@ {% extends "base.html.swig" %} {% block content %} - {% set path = '../../components/pages/' + title + '.html.swig' %} - {% include path %} + {% set path = '../components/pages/' + title + '.html.swig' %} +
+ {% include path %} +
+{% endblock %} + +{% block javascripts %} + {% endblock %} diff --git a/app/templates/assets/templates/styleguide/f-menu.html.swig b/app/templates/assets/templates/styleguide/f-menu.html.swig index 0f89df7..a5e2166 100644 --- a/app/templates/assets/templates/styleguide/f-menu.html.swig +++ b/app/templates/assets/templates/styleguide/f-menu.html.swig @@ -6,37 +6,48 @@
  • - Overview + Styleguide
  • - Atoms + Documentation +
      + {% for doc in collections.docs %} +
    • + {{doc.title}} +
      • + {% endfor %} +
    +
    • + +
  • + Atoms
  • - Molecules + Molecules
  • - Organisms + Organisms @@ -47,7 +58,7 @@ diff --git a/app/templates/tasks/_clean.js b/app/templates/tasks/_clean.js index 392d028..94f5e8e 100644 --- a/app/templates/tasks/_clean.js +++ b/app/templates/tasks/_clean.js @@ -12,7 +12,7 @@ module.exports = function() { */ gulp.task('clean', del.bind(null, [ config.build.substr(0, config.build.length - 1)<% if (fabricator) { %>, - config.styleguide.dest<% } %> + config.metalsmith.dist<% } %> ])); } diff --git a/app/templates/tasks/_server.js b/app/templates/tasks/_server.js index e4d2c16..e0d0813 100644 --- a/app/templates/tasks/_server.js +++ b/app/templates/tasks/_server.js @@ -16,24 +16,24 @@ module.exports = function() { gulp.task('serve', ['default'], function () { browserSync({ server: { - baseDir: [config.app.basedir], + baseDir: [config.app.basedir] }, open: false }); gulp.watch([config.assets + 'sass/**/*.scss'], function() { - runSequence('styles'<% if (fabricator) { %>, 'matalsmith'<% } %>, reload); + runSequence('styles'<% if (fabricator) { %>, 'metalsmith'<% } %>, reload); });<% if (fabricator) { %> gulp.watch([config.assets + 'sass/styleguide.scss'], function() { - runSequence('styleguide-styles'<% if (fabricator) { %>, 'matalsmith'<% } %>, reload); + runSequence('styleguide-styles'<% if (fabricator) { %>, 'metalsmith'<% } %>, reload); });<% } %> gulp.watch([config.assets + 'img/**/*', config.assets + 'svg/**/*'], function() { - runSequence('img'<% if (fabricator) { %>, 'matalsmith'<% } %>, reload); + runSequence('img'<% if (fabricator) { %>, 'metalsmith'<% } %>, reload); }); gulp.watch([config.assets + 'icons/**/*'], function() { - runSequence('icons'<% if (fabricator) { %>, 'matalsmith'<% } %>, reload); + runSequence('icons'<% if (fabricator) { %>, 'metalsmith'<% } %>, reload); }); gulp.watch([config.assets + 'js/**/*.js'], function() { - runSequence('scripts'<% if (fabricator) { %>, 'matalsmith'<% } %>, reload); + runSequence('scripts'<% if (fabricator) { %>, 'metalsmith'<% } %>, reload); });<% if (fabricator) { %> gulp.watch([ config.assets + 'components/**/*.{html,hbs,md,swig}', @@ -41,7 +41,7 @@ module.exports = function() { config.assets + 'docs/**/*.md', config.assets + 'data/**/*.{json,yml}' ], function() { - runSequence('matalsmith', reload); + runSequence('metalsmith-docs', reload); });<% } %> }); diff --git a/app/templates/tasks/favicons.js b/app/templates/tasks/favicons.js index a545258..c877401 100644 --- a/app/templates/tasks/favicons.js +++ b/app/templates/tasks/favicons.js @@ -11,7 +11,7 @@ module.exports = function() { */ gulp.task('favicons', function() { return gulp.src(config.assets + 'favicons/*') - .pipe(gulp.dest(config.styleguide.dest)); + .pipe(gulp.dest(config.metalsmith.dist)); }); }; diff --git a/app/templates/tasks/filters.js b/app/templates/tasks/filters.js index 1638157..618f225 100644 --- a/app/templates/tasks/filters.js +++ b/app/templates/tasks/filters.js @@ -13,4 +13,16 @@ module.exports = function() { return JSON.stringify(input, null, 2); }); + swig.setFilter('get', function (array, value) { + var obj = {}; + if (array) { + for (var i = 0; i < array.length; i++) { + if (array[i].data.sys.id == value) { + obj = array[i]; + } + } + } + return obj; + }); + }; diff --git a/app/templates/tasks/metalsmith.js b/app/templates/tasks/metalsmith.js index d2640c2..9fd7ac9 100644 --- a/app/templates/tasks/metalsmith.js +++ b/app/templates/tasks/metalsmith.js @@ -6,13 +6,24 @@ var gulp = require('gulp'), argv = require('yargs').argv, swig = require('swig'); -var markdown = require('metalsmith-markdown'), +var path = require('path'), + dotenv = require('dotenv'), + markdown = require('metalsmith-markdown'), permalinks = require('metalsmith-permalinks'), layouts = require('metalsmith-layouts'), + define = require('metalsmith-define'), + contentful = require('contentful-metalsmith'), 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; +} + module.exports = function() { function errorAlert(error){ @@ -27,22 +38,37 @@ module.exports = function() { * Generate styleguide doc */ gulp.task('metalsmith-docs', function() { - return gulp.src([config.assets + 'components/**/*.swig', config.assets + 'docs/**/*.md']) + return gulp.src([ + config.assets + 'components/**/*.swig', + config.assets + 'docs/**/*.md', + config.assets + 'data/**/*.json' + ]) .pipe($.plumber({errorHandler: errorAlert})) .pipe($.metalsmith({ use: [ markdown({ langPrefix: 'language-' }), - // permalinks(config.metalsmith.plugins.permalinks), collections(config.metalsmith.plugins.collections), function(files, metalsmith, done){ for (var file in files) { if (files[file].collection == 'atoms' || files[file].collection == 'molecules' || files[file].collection == 'organisms') { delete files[file]; } + if (path.extname(file) === '.json') { + var key = path.basename(file, '.json'); + metadatas[key] = JSON.parse(files[file].contents.toString()); + delete files[file]; + } } done(); }, - layouts(config.metalsmith.plugins.layouts) + define({ + data: metadatas + }), + contentful({ + accessToken : contentful_key + }), + layouts(config.metalsmith.plugins.layouts), + permalinks(config.metalsmith.plugins.permalinks) ] })) .pipe(gulp.dest(config.metalsmith.dist)); diff --git a/app/templates/tasks/styles.js b/app/templates/tasks/styles.js index 6e0601f..75229ca 100644 --- a/app/templates/tasks/styles.js +++ b/app/templates/tasks/styles.js @@ -43,7 +43,7 @@ module.exports = function() { }) ])) .pipe(argv.production ? $.util.noop() : $.sourcemaps.write()) - .pipe(argv.production ? $.minifyCss() : $.util.noop() ) + .pipe(argv.production ? $.cleanCss() : $.util.noop() ) .pipe($.concat('main.css')) .pipe($.size({title: 'STYLES', showFiles: true})) .pipe(gulp.dest(config.build + '/css')); diff --git a/app/templates/tasks/vendors.js b/app/templates/tasks/vendors.js index 42ac9b3..30bcaa6 100644 --- a/app/templates/tasks/vendors.js +++ b/app/templates/tasks/vendors.js @@ -12,7 +12,7 @@ module.exports = function() { gulp.task('css-vendors', function() { return gulp.src(config.vendors.css) .pipe($.concat('vendors.min.css')) - .pipe($.minifyCss()) + .pipe($.cleanCss()) .pipe($.size({title: 'CSS VENDORS', showFiles: true})) .pipe(gulp.dest(config.build + 'css')); }); From 4ec2113f165dc1160dde3f7ab2e0124d856adbe7 Mon Sep 17 00:00:00 2001 From: Yann Gouffon Date: Sat, 14 May 2016 17:52:05 +0200 Subject: [PATCH 20/20] bump version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 78623e3..3f1ea17 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "generator-toolbox", - "version": "0.4.2", + "version": "0.5.0", "description": "Yeoman generator", "license": "MIT", "main": "app/index.js",