diff --git a/.gitignore b/.gitignore index f89f3374..8042bfb5 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,5 @@ node_modules .tmp gulp-cache ++.DS_Store ++docs/out diff --git a/docs/_assets/app-icon.png b/docs/_assets/app-icon.png new file mode 100644 index 00000000..8cf86a09 Binary files /dev/null and b/docs/_assets/app-icon.png differ diff --git a/docs/_assets/main.css b/docs/_assets/main.css new file mode 100644 index 00000000..059d5ae6 --- /dev/null +++ b/docs/_assets/main.css @@ -0,0 +1,9 @@ +.wsk-layout__content { + padding: 20px; +} + +.wsk-layout-title a, +button a { + color: inherit; + text-decoration: none; +} diff --git a/docs/_pages/about.md b/docs/_pages/about.md new file mode 100644 index 00000000..0b3da639 --- /dev/null +++ b/docs/_pages/about.md @@ -0,0 +1,8 @@ +--- +layout: page +title: About +--- + +##Introduction + +The Material Design Lite (MDL) **button** component is an enhanced version of the standard HTML ` + + + + +{{content|safe}} + +{% endblock %} + + diff --git a/docs/_templates/components.html b/docs/_templates/components.html new file mode 100644 index 00000000..39d39aa2 --- /dev/null +++ b/docs/_templates/components.html @@ -0,0 +1,17 @@ +{% extends 'layout.html' %} + +{% block content %} + +

{{page.title}}

+ + + +{{content|safe}} + +{% endblock %} + + diff --git a/docs/_templates/customize.html b/docs/_templates/customize.html new file mode 100644 index 00000000..6a20c531 --- /dev/null +++ b/docs/_templates/customize.html @@ -0,0 +1,33 @@ +{% extends 'layout.html' %} + +{% block content %} + +

{{page.title}}

+ +{{content|safe}} + + + + + + + + + + + +{% endblock %} + + diff --git a/docs/_templates/layout.html b/docs/_templates/layout.html new file mode 100644 index 00000000..15e011b2 --- /dev/null +++ b/docs/_templates/layout.html @@ -0,0 +1,91 @@ + + + + + + + + Web Starter Kit + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/_templates/page.html b/docs/_templates/page.html new file mode 100644 index 00000000..abb85cff --- /dev/null +++ b/docs/_templates/page.html @@ -0,0 +1,11 @@ +{% extends 'layout.html' %} + +{% block content %} + +

{{page.title}}

+ +{{content|safe}} + +{% endblock %} + + diff --git a/gulpfile.js b/gulpfile.js index 8f8951c0..2416ccb9 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -29,6 +29,8 @@ var reload = browserSync.reload; var fs = require('fs'); var path = require('path'); var pkg = require('./package.json'); +var through = require('through2'); +var swig = require('swig'); var banner = ['/**', ' * <%= pkg.name %> - <%= pkg.description %>', ' * @version v<%= pkg.version %>', @@ -49,6 +51,9 @@ var AUTOPREFIXER_BROWSERS = [ 'bb >= 10' ]; + +// ***** Development tasks ****** // + // Lint JavaScript gulp.task('jshint', function () { return gulp.src('src/**/*.js') @@ -58,6 +63,9 @@ gulp.task('jshint', function () { .pipe($.if(!browserSync.active, $.jshint.reporter('fail'))); }); + +// ***** Production build tasks ****** // + // Optimize Images // TODO: Update image paths in final CSS to match root/images gulp.task('images', function () { @@ -186,38 +194,8 @@ gulp.task('scripts', function () { .pipe($.size({title: 'scripts'})); }); -// Run Unit Tests -gulp.task('mocha', function () { - return gulp.src('./test/index.html') - .pipe($.mochaPhantomjs({reporter: 'list'})) -}); - // Clean Output Directory -gulp.task('clean', del.bind(null, ['.tmp', 'css/*', 'js/*', '!dist/.git'], {dot: true})); - -// Watch Files For Changes & Reload -gulp.task('serve', ['styles:dev'], function () { - browserSync({ - notify: false, - // Customize the BrowserSync console logging prefix - logPrefix: 'WSK', - server: ['.tmp', 'src', '.tmp/styles'] - }); - - gulp.watch(['src/**/*.html'], reload); - gulp.watch(['src/**/*.{scss,css}'], ['styles:dev', reload]); - gulp.watch(['src/**/*.js'], ['jshint']); -}); - -// Build and serve the output from the dist build -gulp.task('serve:dist', ['default'], function () { - browserSync({ - notify: false, - logPrefix: 'WSK', - server: './', - baseDir: 'src' - }); -}); +gulp.task('clean', del.bind(null, ['css/*', 'js/*'], {dot: true})); // Build Production Files, the Default Task gulp.task('default', ['clean','mocha'], function (cb) { @@ -227,6 +205,14 @@ gulp.task('default', ['clean','mocha'], function (cb) { cb); }); + +// ***** Testing tasks ***** // + +gulp.task('mocha', function () { + return gulp.src('./test/index.html') + .pipe($.mochaPhantomjs({reporter: 'list'})) +}); + gulp.task('test', ['jshint', 'mocha']); gulp.task('test:visual', function() { @@ -238,3 +224,139 @@ gulp.task('test:visual', function() { gulp.watch(['test/visual/**'], reload); }); + + +// ***** Landing page tasks ***** // + +/** + * Site metadata for use with templates. + * @type {Object} + */ +var site = {}; + + +/** + * Compiled swig templates cache. + * @type {Object} + */ +var templates = {}; + + +/** + * Generates an HTML file based on a template and file metadata. + */ +function applyTemplate() { + return through.obj(function(file, enc, cb) { + var data = { + site: site, + page: file.page, + content: file.contents.toString() + }; + // If template not in template cache, compile and add it. + if (!templates[file.page.layout]) { + var templateFile = path.join( + __dirname, 'docs', '_templates', file.page.layout + '.html'); + $.util.log('Compiling template:', $.util.colors.yellow(file.page.layout)); + templates[file.page.layout] = swig.compileFile(templateFile); + } + var tpl = templates[file.page.layout]; + file.contents = new Buffer(tpl(data), 'utf8'); + this.push(file); + cb(); + }) +} + + +/** + * Generates an index.html file for each README in MDL/src directory. + */ +gulp.task('components', function() { + return gulp.src('./src/**/README.md', {base: './src'}) + // Add basic front matter. + .pipe($.header('---\nlayout: component\n---\n\n')) + .pipe($.frontMatter({property: 'page', remove: true})) + .pipe($.marked()) + .pipe((function () { + var componentPages = []; + return through.obj(function(file, enc, cb) { + file.page.component = file.relative.split('/')[0]; + componentPages.push(file.page); + this.push(file); + cb(); + }, + function(cb) { + site.components = componentPages; + cb(); + }) + })()) + .pipe(applyTemplate()) + .pipe($.rename(function (path) { + path.basename = "index"; + })) + .pipe(gulp.dest('docs/out/components')); +}); + + +/** + * Copies demo files from MDL/src directory. + */ +gulp.task('demos', function () { + return gulp.src([ + './src/**/demo.*', + './src/**/*.js' + ], {base: './src'}) + .pipe($.if('*.scss', $.sass({ + precision: 10, + onError: console.error.bind(console, 'Sass error:') + }))) + .pipe($.if('*.css', $.autoprefixer(AUTOPREFIXER_BROWSERS))) + .pipe(gulp.dest('docs/out/components')); +}); + + +/** + * Generates an HTML file for each md file in _pages directory. + */ +gulp.task('pages', ['components'], function() { + return gulp.src(['docs/_pages/*.md']) + .pipe($.frontMatter({property: 'page', remove: true})) + .pipe($.marked()) + .pipe(applyTemplate()) + .pipe($.rename(function(path) { + if (path.basename !== 'index') { + path.dirname = path.basename; + path.basename = 'index'; + } + })) + .pipe(gulp.dest('docs/out')); +}); + + +/** + * Copies assets from MDL and _assets directory. + */ +gulp.task('assets', function () { + return gulp.src(['docs/_assets/**']) + .pipe(gulp.dest('docs/out/assets')); +}); + + +/** + * Serves the landing page from "out" directory. + */ +gulp.task('serve', ['assets', 'pages', 'demos'], function () { + browserSync({ + notify: false, + server: { + baseDir: ['docs/out', 'js', 'css', 'fonts'], + routes: { + '/fonts': 'fonts', + '/components/fonts': 'fonts' + } + } + }); + + gulp.watch(['src/**/*.js', '!src/**/README.md'], ['demos', reload]); + gulp.watch(['src/**/*.js'], ['scripts', reload]); + gulp.watch(['src/**/README.md'], ['components', reload]); +}); diff --git a/package.json b/package.json index 67821cec..ad23c266 100644 --- a/package.json +++ b/package.json @@ -18,32 +18,38 @@ "chai": "^2.0.0", "chai-jquery": "^2.0.0", "del": "^1.1.1", - "gulp": "^3.8.5", + "gulp": "^3.8.11", "gulp-autoprefixer": "^2.0.0", "gulp-cache": "^0.2.6", "gulp-changed": "^1.0.0", "gulp-concat": "^2.4.1", "gulp-csso": "^1.0.0", "gulp-flatten": "0.0.4", + "gulp-front-matter": "^1.2.2", "gulp-header": "^1.2.2", "gulp-if": "^1.2.1", - "gulp-imagemin": "^2.0.0", "gulp-jshint": "^1.6.3", "gulp-load-plugins": "^0.8.0", + "gulp-markdown": "^1.0.0", + "gulp-marked": "^1.0.0", "gulp-minify-html": "^1.0.0", "gulp-mocha-phantomjs": "^0.5.3", + "gulp-rename": "^1.2.0", "gulp-replace": "^0.5.3", "gulp-sass": "^1.3.3", "gulp-size": "^1.0.0", "gulp-sourcemaps": "^1.3.0", "gulp-uglify": "^1.0.1", "gulp-useref": "^1.0.1", + "gulp-util": "^3.0.4", "jquery": "^2.1.3", "jshint-stylish": "^1.0.0", "mocha": "^2.1.0", "opn": "^1.0.0", "require-dir": "^0.1.0", - "run-sequence": "^1.0.2" + "run-sequence": "^1.0.2", + "swig": "^1.4.2", + "through2": "^0.6.3" }, "engines": { "node": ">=0.10.0"