Render the components as partials.

See usebedrock#391 for a discussion.
thusc · Jul 14, 2021 · e14aea6 · e14aea6
1 parent bcbeb83
commit e14aea6
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 12 deletions.
diff --git a/core/paths.js b/core/paths.js
@@ -99,6 +99,7 @@ module.exports = {
       mainPath: path.join(distPath, 'css/'),
       allFiles: path.join(distPath, 'css/**/*.css'),
     },
+    partials: path.join(distPath, 'partials/'),
     styleguide: path.join(distPath, 'styleguide/'),
     docs: path.join(distPath, 'styleguide/docs/'),
     assets: {

diff --git a/core/tasks/templates.js b/core/tasks/templates.js
@@ -26,6 +26,35 @@ 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);
+  });
+}
+
+function handleError(err) {
+  notifier.notify({
+    title: 'Pug error',
+    message: err.message
+  });
+  gutil.log(gutil.colors.red(err));
+  gutil.beep();
+  this.emit('end');
+}
+
 module.exports = {
   clean(done) {
     del(['./dist/**.html', './dist/modules', './dist/styleguide']).then(function () {
@@ -113,17 +142,23 @@ module.exports = {
           });
         }))
         .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');
-        })
+        .on('error', handleError)
         .pipe(prettify(config.prettify))
         .pipe(gulp.dest(paths.dist.path));
+    },
+    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', handleError)
+        .pipe(prettify(config.prettify))
+        .pipe(gulp.dest(paths.dist.partials));
     }
   }
 };
diff --git a/gulpfile.js b/gulpfile.js
@@ -43,12 +43,18 @@ gulp.task('bundle:prototypeBundle', bundle.prototypeBundle);
 gulp.task('icon-font', iconFont);
 
 gulp.task('templates:compile:content', templates.compile.content);
+gulp.task('templates:compile:partials', templates.compile.partials);
 gulp.task('templates:compile:styleguide', templates.compile.styleguide);
 gulp.task('templates:compile:docs', templates.compile.docs);
 
-gulp.task('templates:compile', config.styleguide ?
-  gulp.parallel('templates:compile:content', 'templates:compile:styleguide', 'templates:compile:docs') :
-  gulp.series('templates:compile:content')
+gulp.task(
+  'templates:compile',
+  config.styleguide ?
+    gulp.parallel(
+     'templates:compile:content', 'templates:compile:partials',
+     'templates:compile:styleguide', 'templates:compile:docs') :
+    gulp.parallel(
+     'templates:compile:content', 'templates:compile:partials')
 );
 
 gulp.task('watch', watch);