diff --git a/core/cli/bedrock b/core/cli/bedrock index 4606fd3..baec4e7 100755 --- a/core/cli/bedrock +++ b/core/cli/bedrock @@ -15,5 +15,8 @@ program program .command('styleguide', 'Commands related to the styleguide content'); +program + .command('components', 'Commands related to the styleguide components'); + program .parse(process.argv); diff --git a/core/cli/bedrock-components b/core/cli/bedrock-components new file mode 100755 index 0000000..efb49c5 --- /dev/null +++ b/core/cli/bedrock-components @@ -0,0 +1,49 @@ +#! /usr/bin/env node + +'use strict'; + +const program = require('commander'); +const glob = require('glob'); +const gulp = require('gulp'); +const path = require('path'); + +const templates = require('../tasks/templates'); +const paths = require('../paths'); + + +program + .command('list') + .description('List the Pug templates under content/templates/_components') + .action(function () { + // glob.sync() is what gulp.src() uses, but the + console.log(glob.sync(paths.content.templates.allComponents, '**/*.pug')); + }); + +program + .command('build') + .description('Build the component Pug templates') + .action(function () { + gulp.task('templates:compile:styleguide', templates.compile.styleguide); + gulp.series('templates:compile:styleguide')(); + }); + +program + .command('partials') + .description('Build the component Pug templates as partial HTML') + .action(function () { + gulp.task('templates:compile:partials', templates.compile.partials); + gulp.series('templates:compile:partials')(); + }); + +program + .action(() => { + program.help() + }); + +if (process.argv.length === 2) { + program.help(); + process.exit(); +} + +program + .parse(process.argv); diff --git a/core/paths.js b/core/paths.js index b74f7d3..bf9ce8d 100644 --- a/core/paths.js +++ b/core/paths.js @@ -101,6 +101,7 @@ module.exports = { }, styleguide: path.join(distPath, 'styleguide/'), docs: path.join(distPath, 'styleguide/docs/'), + partials: path.join(distPath, 'styleguide/partials/'), assets: { images: path.join(distPath, 'images/'), fonts: path.join(distPath, 'fonts/'), diff --git a/core/tasks/templates.js b/core/tasks/templates.js index 4f2f107..c34dfd5 100644 --- a/core/tasks/templates.js +++ b/core/tasks/templates.js @@ -26,6 +26,25 @@ function getDefaultLocals() { return defaultLocals; } +/* Add the user-defined _mixins/all and the Bedrock-provided icons mixins. + * This is done using the sample.pug wrapper template, also used to render + * the components in the style guide (using the `renderCode` function). + */ +function addMixins() { + return through.obj(function (vinylFile, encoding, callback) { + var outFile = vinylFile.clone(); + + const indentedPugMarkup = + vinylFile.contents.toString().split('\n').map(line => ` ${line}`).join('\n'); + const markupWithLayout = + `extends /../core/templates/layouts/sample\n\nblock content\n${indentedPugMarkup}`; + + outFile.contents = new Buffer.from(markupWithLayout); + + callback(null, outFile); + }); +} + module.exports = { clean(done) { del(['./dist/**.html', './dist/modules', './dist/styleguide']).then(function () { @@ -33,6 +52,28 @@ module.exports = { }); }, compile: { + partials(done) { + return gulp.src(paths.content.templates.allComponents) + .pipe(data(function (file) { + return Object.assign({}, getDefaultLocals(), { + filename: path.basename(file.path).replace('pug', 'html'), + pathname: file.path.replace(path.join(process.cwd(), paths.content.templates.path), '').replace('.pug', ''), + }); + })) + .pipe(addMixins()) + .pipe(gulpPug(config.pug)) + .on('error', function (err) { + notifier.notify({ + title: 'Pug error', + message: err.message + }); + gutil.log(gutil.colors.red(err)); + gutil.beep(); + this.emit('end'); + }) + .pipe(prettify(config.prettify)) + .pipe(gulp.dest(paths.dist.partials)); + }, styleguide(done) { const defaultLocals = getDefaultLocals(); diff --git a/package.json b/package.json index 39efc6f..5bb0822 100644 --- a/package.json +++ b/package.json @@ -75,6 +75,7 @@ "run-sequence": "^2.2.1" }, "dependencies": { - "commander": "^2.20.3" + "commander": "^2.20.3", + "through2": "^4.0.2" } }