Convert all Jade templates & logic to Pug

bedrock.config.js

@@ -16,7 +16,7 @@ module.exports = {
     generateIconFont: false,
     hasSvgIcons: true
   },
-  jade: {
+  pug: {
     pretty: true,
     basedir: "./content"
   },

core/discovery/components.js

@@ -19,7 +19,7 @@ const COMPONENT_CATEGORIES = {
 };
 
 function discover() {
-  const files = glob.sync(path.join(TEMPLATES_BASE_DIRECTORY, '**/*.jade')).map(file => file.replace(/\//g, path.sep));
+  const files = glob.sync(path.join(TEMPLATES_BASE_DIRECTORY, '**/*.pug')).map(file => file.replace(/\//g, path.sep));
   let componentGroups = {};
 
   // Check if old `_patterns/` directory is still in use
@@ -28,7 +28,7 @@ function discover() {
   }
 
   for (const file of files) {
-    const filename = file.replace(TEMPLATES_BASE_DIRECTORY, '').replace('.jade', '');
+    const filename = file.replace(TEMPLATES_BASE_DIRECTORY, '').replace('.pug', '');
     const parts = filename.split(path.sep);
     const groupId = parts[0];
     const componentName = parts[1];

core/discovery/docs.js

@@ -7,15 +7,15 @@ const path = require('path');
 const glob = require('glob');
 const _ = require('lodash');
 const paths = require('../paths');
-const jade = require('jade');
+const pug = require('pug');
 const beautify = require('js-beautify').html;
 const config = require('../../bedrock.config');
 const locals = require('../templates/locals');
 
 module.exports = {
   discover: function () {
     const docFiles = glob.sync(paths.content.docs)
-      .filter(g => path.parse(g).ext === '.jade' || path.parse(g).ext === '.md')
+      .filter(g => path.parse(g).ext === '.pug' || path.parse(g).ext === '.md')
       .map(function (docPath) {
         const parsedPath = path.parse(docPath);
         const fileContent = fs.readFileSync(docPath, 'utf8');
@@ -27,11 +27,11 @@ module.exports = {
 
         if (extension === '.md') {
           parsedFile.body = marked(parsedFile.body);
-        } else if (extension === '.jade') {
-          const indentedJadeMarkup = parsedFile.body.split('\n').map(line => `    ${line}`).join('\n');
-          const markupWithLayout = `extends /../core/templates/layouts/sample\n\nblock content\n${indentedJadeMarkup}`;
+        } else if (extension === '.pug') {
+          const indentedPugMarkup = parsedFile.body.split('\n').map(line => `    ${line}`).join('\n');
+          const markupWithLayout = `extends /../core/templates/layouts/sample\n\nblock content\n${indentedPugMarkup}`;
 
-          const compiler = jade.compile(markupWithLayout, Object.assign({}, config.jade, {
+          const compiler = pug.compile(markupWithLayout, Object.assign({}, config.pug, {
             filename: docPath
           }));
           parsedFile.body = compiler(Object.assign({}, locals.getDefaultLocals(), {

core/discovery/pages.js

@@ -23,9 +23,9 @@ function mapChildren(children) {
 }
 
 function addPageInfo(page) {
-  page.href = '/' + page.path.replace('.jade', '.html');
-  page.name = page.name.replace('.jade', '');
-  page.id = page.path.replace('.jade', '');
+  page.href = '/' + page.path.replace('.pug', '.html');
+  page.name = page.name.replace('.pug', '');
+  page.id = page.path.replace('.pug', '');
 
   if (page.href === '') {
     page.href = '/';
@@ -57,7 +57,7 @@ function movePageStatesToParentPage(obj, index, collection) {
 }
 
 function discover() {
-  const pagesAndFoldersSortedByType = _.chain(dirTree.directoryTree(TEMPLATES_BASE_DIRECTORY, ['.jade']).children)
+  const pagesAndFoldersSortedByType = _.chain(dirTree.directoryTree(TEMPLATES_BASE_DIRECTORY, ['.pug']).children)
     .filter(obj => obj.path.charAt(0) !== '_')
     .map(obj => {
       obj = addPageInfo(obj);

core/js/prototype-style-guide-code-samples.js

@@ -55,7 +55,7 @@ $codeBlocks.each(function () {
   }
 
   switch (config.styleguide.snippetLanguage) {
-    case 'jade':
+    case 'pug':
       editorOptions.mode = 'pug';
       break;
     case 'html':

core/paths.js

@@ -30,9 +30,9 @@ module.exports = {
     templates: {
       path: path.join(contentPath, 'templates/'),
       modulesPath: path.join(contentPath, 'templates/modules/'),
-      all: path.join(contentPath, 'templates/**/*.jade'),
-      baseTemplates: path.join(contentPath, 'templates/*.jade'),
-      moduleTemplates: path.join(contentPath, 'templates/modules/**/*.jade'),
+      all: path.join(contentPath, 'templates/**/*.pug'),
+      baseTemplates: path.join(contentPath, 'templates/*.pug'),
+      moduleTemplates: path.join(contentPath, 'templates/modules/**/*.pug'),
       patterns: path.join(contentPath, 'templates/_patterns/'),
       components: path.join(contentPath, 'templates/_components/'),
       data: path.join(contentPath, 'data/*')
@@ -57,10 +57,10 @@ module.exports = {
     },
     templates: {
       styleguide: {
-        index: path.join(corePath, 'templates/styleguide/index.jade'),
-        doc: path.join(corePath, 'templates/styleguide/doc.jade'),
-        colors: path.join(corePath, 'templates/styleguide/colors.jade'),
-        componentGroup: path.join(corePath, 'templates/styleguide/component-group.jade')
+        index: path.join(corePath, 'templates/styleguide/index.pug'),
+        doc: path.join(corePath, 'templates/styleguide/doc.pug'),
+        colors: path.join(corePath, 'templates/styleguide/colors.pug'),
+        componentGroup: path.join(corePath, 'templates/styleguide/component-group.pug')
       }
     }
   },

core/tasks/browser-sync.js

@@ -9,7 +9,7 @@ module.exports = function () {
       path.join(paths.compiled.path, '**/*'),
       '!**/*.map',
       paths.content.templates.all,
-      './core/templates/**/*.jade',
+      './core/templates/**/*.pug',
       paths.content.scss.colorsDefinition,
       paths.content.templates.data,
       paths.content.docs,

core/tasks/server.js

@@ -19,7 +19,7 @@ const errors = require('../util/errors');
 const app = express();
 
 app.use(express.static(paths.compiled.path));
-app.set('view engine', 'jade');
+app.set('view engine', 'pug');
 app.set('views', [
   path.join(process.cwd(), './content/templates'),
   path.join(process.cwd(), './core/templates')

core/tasks/templates.js

@@ -1,5 +1,5 @@
 const gulp = require('gulp');
-const gulpJade = require('gulp-jade');
+const gulpPug = require('gulp-pug');
 const prettify = require('gulp-jsbeautifier');
 const notifier = require('node-notifier');
 const gutil = require('gulp-util');
@@ -8,7 +8,7 @@ const data = require('gulp-data');
 const filter = require('gulp-filter');
 const path = require('path');
 const fs = require('fs');
-const jade = require('jade');
+const pug = require('pug');
 const del = require('del');
 const es = require('event-stream');
 const config = require('../../bedrock.config');
@@ -41,10 +41,10 @@ module.exports = {
           .pipe(data(function (file) {
             return Object.assign({}, getDefaultLocals(), {
               componentGroup: defaultLocals.components.byGroup[componentGroup],
-              pathname: file.path.replace(path.join(process.cwd(), paths.content.templates.path), '').replace('.jade', ''),
+              pathname: file.path.replace(path.join(process.cwd(), paths.content.templates.path), '').replace('.pug', ''),
             });
           }))
-          .pipe(gulpJade(config.jade))
+          .pipe(gulpPug(config.pug))
           .pipe(prettify(config.prettify))
           .pipe(rename(function (path) {
             path.basename = componentGroup;
@@ -58,10 +58,10 @@ module.exports = {
           ])
           .pipe(data(function (file) {
             return Object.assign({}, getDefaultLocals(), {
-              pathname: file.path.replace(path.join(process.cwd(), paths.content.templates.path), '').replace('.jade', ''),
+              pathname: file.path.replace(path.join(process.cwd(), paths.content.templates.path), '').replace('.pug', ''),
             });
           }))
-          .pipe(gulpJade(config.jade))
+          .pipe(gulpPug(config.pug))
           .pipe(prettify(config.prettify))
           .pipe(gulp.dest(paths.dist.styleguide))
       );
@@ -76,10 +76,10 @@ module.exports = {
           .pipe(data(function (file) {
             return Object.assign({}, getDefaultLocals(), {
               doc,
-              pathname: file.path.replace(path.join(process.cwd(), paths.content.templates.path), '').replace('.jade', ''),
+              pathname: file.path.replace(path.join(process.cwd(), paths.content.templates.path), '').replace('.pug', ''),
             });
           }))
-          .pipe(gulpJade(config.jade))
+          .pipe(gulpPug(config.pug))
           .pipe(prettify(config.prettify))
           .pipe(rename(function (path) {
             path.basename = doc.attributes.filename;
@@ -98,14 +98,14 @@ module.exports = {
         .pipe(templateFilter)
         .pipe(data(function (file) {
           return Object.assign({}, getDefaultLocals(), {
-            filename: path.basename(file.path).replace('jade', 'html'),
-            pathname: file.path.replace(path.join(process.cwd(), paths.content.templates.path), '').replace('.jade', ''),
+            filename: path.basename(file.path).replace('pug', 'html'),
+            pathname: file.path.replace(path.join(process.cwd(), paths.content.templates.path), '').replace('.pug', ''),
           });
         }))
-        .pipe(gulpJade(config.jade))
+        .pipe(gulpPug(config.pug))
         .on('error', function (err) {
           notifier.notify({
-            title: 'Jade error',
+            title: 'Pug error',
             message: err.message
           });
           gutil.log(gutil.colors.red(err));

core/templates/includes/prototype-nav.jade → core/templates/includes/prototype-nav.pug

@@ -14,14 +14,14 @@ include ../mixins/render-page-tree
         .br-prototype-page-states
             h3.br-prototype-nav-main-heading Page states
             ul.br-bordered-list
-                - var basePagePath = basePage.path.replace(/\.jade|\.pug/, '');
+                - var basePagePath = basePage.path.replace('.pug', '');
                 - var isBasePageActive = pathname === basePagePath;
 
                 li: a(href=basePage.href, class=isBasePageActive ? 'br-bordered-list__link--active' : null)
                     = basePage.name
 
                 each state in basePage.states
-                    - var statePagePath = state.path.replace(/\.jade|\.pug/, '');
+                    - var statePagePath = state.path.replace('.pug', '');
                     - var isStatePageActive = pathname === statePagePath;
                     li: a(href=state.href, class=isStatePageActive ? 'br-bordered-list__link--active' : null)
                         = state.name

core/templates/locals.js

@@ -1,6 +1,6 @@
 const path = require('path');
 const fs = require('fs');
-const jade = require('jade');
+const pug = require('pug');
 const config = require('../../bedrock.config');
 const paths = require('../paths');
 
@@ -33,16 +33,16 @@ function getDefaultLocals() {
   };
 
   locals.render = function (id, language) {
-    const componentFileLocation = path.join(paths.content.templates.components, id + '.jade');
-    const jadeMarkup = fs.readFileSync(componentFileLocation, 'utf8');
+    const componentFileLocation = path.join(paths.content.templates.components, id + '.pug');
+    const pugMarkup = fs.readFileSync(componentFileLocation, 'utf8');
 
-    if (!language || language === 'jade') {
-      return jadeMarkup;
+    if (!language || language === 'pug') {
+      return pugMarkup;
     } else if (language === 'html') {
-      const indentedJadeMarkup = jadeMarkup.split('\n').map(line => `    ${line}`).join('\n');
-      const markupWithLayout = `extends /../core/templates/layouts/sample\n\nblock content\n${indentedJadeMarkup}`;
+      const indentedPugMarkup = pugMarkup.split('\n').map(line => `    ${line}`).join('\n');
+      const markupWithLayout = `extends /../core/templates/layouts/sample\n\nblock content\n${indentedPugMarkup}`;
 
-      return jade.compile(markupWithLayout, {
+      return pug.compile(markupWithLayout, {
         pretty: true,
         basedir: 'content',
         filename: componentFileLocation

core/templates/mixins/render-page-tree.jade → core/templates/mixins/render-page-tree.pug

@@ -1,6 +1,6 @@
 mixin renderPage(entry)
     if !entry.path.includes('--')
-        - var entryPath = entry.path.replace(/\.jade|\.pug/, '');
+        - var entryPath = entry.path.replace('.pug', '');
         - var isActive = false;
         if pathname === entryPath || pathname.indexOf(entryPath) > -1 || (pathname === '' && entryPath === 'index')
             - basePage = entry;
@@ -13,7 +13,7 @@ mixin renderPage(entry)
 
 mixin renderDirectory(entry)
     li.br-tree-dir
-        h4.br-tree-dir-title= entry.name.replace('.jade', '')
+        h4.br-tree-dir-title= entry.name.replace('.pug', '')
         ul
             each subEntry in entry.children
                 if subEntry.type === 'directory'

core/templates/mixins/sample.jade → core/templates/mixins/sample.pug

@@ -13,11 +13,11 @@ mixin sample(component, isLayoutClass, hideCodeSamples)
             .br-sample-footer
                 if config.styleguide.snippetLanguage === 'html'
                     span.br-sample-btn.br-sample-show-code-btn Show HTML code
-                if config.styleguide.snippetLanguage === 'jade'
-                    span.br-sample-btn.br-sample-show-code-btn Show Jade code
+                if config.styleguide.snippetLanguage === 'pug'
+                    span.br-sample-btn.br-sample-show-code-btn Show Pug code
                 .br-sample-code
                     button.br-sample-btn.br-sample-copy-code-btn Copy to clipboard
                     if config.styleguide.snippetLanguage === 'html'
                         pre.br-sample-markup= render(component.filename, 'html')
-                    if config.styleguide.snippetLanguage === 'jade'
-                        pre.br-sample-markup= render(component.filename, 'jade')
+                    if config.styleguide.snippetLanguage === 'pug'
+                        pre.br-sample-markup= render(component.filename, 'pug')