From a96a53c7945f1f2884e8dcccc4b4f18868a83fb1 Mon Sep 17 00:00:00 2001
From: Vo Minh Thu <thu@smart.coop>
Date: Sat, 27 Nov 2021 17:40:49 +0100
Subject: [PATCH 1/7] Make the styleguide URL configurable.

---
 bedrock.config.js                          | 1 +
 core/discovery/default-config.js           | 3 ++-
 core/paths.js                              | 8 ++++----
 core/tasks/server.js                       | 6 +++---
 core/tasks/templates.js                    | 7 ++++---
 core/templates/includes/styleguide-nav.pug | 8 ++++----
 core/templates/mixins/render-page-tree.pug | 2 +-
 7 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/bedrock.config.js b/bedrock.config.js
index 828bd1f6..49ffd2e8 100644
--- a/bedrock.config.js
+++ b/bedrock.config.js
@@ -17,6 +17,7 @@ module.exports = {
     purge: false
   },
   styleguide: {
+    url: '/styleguide',
     search: true,
     colors: './content/scss/_colors.scss',
     categoryOrder: [
diff --git a/core/discovery/default-config.js b/core/discovery/default-config.js
index 85c08245..4b0d96f0 100644
--- a/core/discovery/default-config.js
+++ b/core/discovery/default-config.js
@@ -27,6 +27,7 @@ const defaultConfig = {
    *  determines whether the styleguide gets generated
    */
   styleguide: {
+    url: '/styleguide',
     /**
      *  search [boolean]
      *  Feature flag for search feature
@@ -86,4 +87,4 @@ const defaultConfig = {
   },
 };
 
-module.exports = defaultConfig;
\ No newline at end of file
+module.exports = defaultConfig;
diff --git a/core/paths.js b/core/paths.js
index 0eb61527..af8ae7cd 100644
--- a/core/paths.js
+++ b/core/paths.js
@@ -83,8 +83,8 @@ module.exports = {
     modules: path.join(compiledPath, 'modules/'),
     js: path.join(compiledPath, 'js/'),
     css: path.join(compiledPath, 'css/'),
-    styleguide: path.join(compiledPath, 'styleguide/'),
-    docs: path.join(compiledPath, 'styleguide/docs/'),
+    styleguide: path.join(compiledPath, config.styleguide.url),
+    docs: path.join(compiledPath, config.styleguide.url+'/docs/'),
     assets: {
       images: path.join(compiledPath, 'images/'),
       fonts: path.join(compiledPath, 'fonts/'),
@@ -100,8 +100,8 @@ module.exports = {
       mainPath: path.join(distPath, 'css/'),
       allFiles: path.join(distPath, 'css/**/*.css'),
     },
-    styleguide: path.join(distPath, 'styleguide/'),
-    docs: path.join(distPath, 'styleguide/docs/'),
+    styleguide: path.join(distPath, config.styleguide.url),
+    docs: path.join(distPath, config.styleguide.url+'/docs/'),
     assets: {
       images: path.join(distPath, 'images/'),
       fonts: path.join(distPath, 'fonts/'),
diff --git a/core/tasks/server.js b/core/tasks/server.js
index d8b78082..fcfee9dc 100644
--- a/core/tasks/server.js
+++ b/core/tasks/server.js
@@ -45,13 +45,13 @@ function renderView(req, res, viewName, customLocals) {
 }
 
 module.exports = function (done) {
-  app.get('/styleguide', function (req, res) {
+  app.get(config.styleguide.url, function (req, res) {
     renderView(req, res, 'styleguide/index', {
       pathname: 'styleguide/index'
     });
   });
 
-  app.get('/styleguide/docs/:doc', function (req, res) {
+  app.get(config.styleguide.url+'/docs/:doc', function (req, res) {
     const docFilename = req.params.doc.replace('.html', '');
     const doc = _.find(docs.discover().allDocs, doc => doc.attributes.filename === docFilename);
 
@@ -61,7 +61,7 @@ module.exports = function (done) {
     });
   });
 
-  app.get('/styleguide/:group', function (req, res) {
+  app.get(config.styleguide.url+'/:group', function (req, res) {
     const componentGroups = components.discover();
     const componentGroup = req.params.group.replace('.html', '');
 
diff --git a/core/tasks/templates.js b/core/tasks/templates.js
index 4f2f1074..db35584f 100644
--- a/core/tasks/templates.js
+++ b/core/tasks/templates.js
@@ -28,9 +28,10 @@ function getDefaultLocals() {
 
 module.exports = {
   clean(done) {
-    del(['./dist/**.html', './dist/modules', './dist/styleguide']).then(function () {
-      done();
-    });
+    del(['./dist/**.html', './dist/modules', './dist'+config.styleguide.url])
+      .then(function () {
+        done();
+      });
   },
   compile: {
     styleguide(done) {
diff --git a/core/templates/includes/styleguide-nav.pug b/core/templates/includes/styleguide-nav.pug
index c90fb019..35b767ef 100644
--- a/core/templates/includes/styleguide-nav.pug
+++ b/core/templates/includes/styleguide-nav.pug
@@ -7,8 +7,8 @@
                 .br-docs-category-list-wrapper(class=styleguideNavListWrapperClass)
                     ul(class=styleguideNavListClass)
                         each doc in docs.byCategory[docsCategoryName]
-                            li(class=styleguideNavListItemClass+' '+`${ "styleguide/docs/" + doc.attributes.filename == pathname ? styleguideNavListItemActiveClass : "" }`)
-                                a(href=`/styleguide/docs/${doc.attributes.filename}.html` class=styleguideNavListItemLinkClass+' '+`${ "styleguide/docs/" + doc.attributes.filename == pathname ? styleguideNavListItemLinkActiveClass : "" }`)
+                            li(class=styleguideNavListItemClass+' '+`${ config.styleguide.url+'/docs/' + doc.attributes.filename == pathname ? styleguideNavListItemActiveClass : "" }`)
+                                a(href=config.styleguide.url+`/docs/${doc.attributes.filename}.html` class=styleguideNavListItemLinkClass+' '+`${ config.styleguide.url+'/docs/' + doc.attributes.filename == pathname ? styleguideNavListItemLinkActiveClass : "" }`)
                                     | #{doc.attributes.title}
         if docsCategoryName === 'Components' && Object.keys(components.byCategory).length > 0
             each category, categoryName in components.byCategory
@@ -21,8 +21,8 @@
                         ul(class=styleguideNavListClass)
                             each group in category
                                 - var groupName = group.docs ? group.docs.attributes.title || group.group.id : group.group.id
-                                li(class=styleguideNavListItemClass+' '+`${ "styleguide/" + group.group.id == pathname ? styleguideNavListItemActiveClass : "" }`)
-                                    a(href=`/styleguide/${group.group.id}.html` class=styleguideNavListItemLinkClass+' '+`${ ("styleguide/" + group.group.id) == pathname ? styleguideNavListItemLinkActiveClass : "" }`)
+                                li(class=styleguideNavListItemClass+' '+`${ config.styleguide.url + '/' + group.group.id == pathname ? styleguideNavListItemActiveClass : "" }`)
+                                    a(href=config.styleguide.url+`/${group.group.id}.html` class=styleguideNavListItemLinkClass+' '+`${ (config.styleguide.url + '/' + group.group.id) == pathname ? styleguideNavListItemLinkActiveClass : "" }`)
                                         |  #{groupName}
                                         if group.docs.attributes.containsCustom
                                             .br-docs-category-marker-custom
diff --git a/core/templates/mixins/render-page-tree.pug b/core/templates/mixins/render-page-tree.pug
index 030a5ba4..bd3fab0f 100644
--- a/core/templates/mixins/render-page-tree.pug
+++ b/core/templates/mixins/render-page-tree.pug
@@ -24,7 +24,7 @@ mixin renderDirectory(entry)
 mixin renderPageTree
     ul.br-bordered-list
         if config.styleguide
-            li: a(href="/styleguide") Styleguide
+            li: a(href=config.styleguide.url) Styleguide
         each entry in pages
             if entry.type === 'directory'
                 +renderDirectory(entry)

From 4c33db99b04c7efc559c26e7710f8310d82d1b46 Mon Sep 17 00:00:00 2001
From: Vo Minh Thu <thu@smart.coop>
Date: Sat, 17 Jul 2021 14:25:23 +0200
Subject: [PATCH 2/7] Add a Pug plugin to allow multiple basedirs.

This will make it possible to cleanly separate Bedrock's templates from
the user project templates.
---
 core/templates/multi-basedirs.js | 53 ++++++++++++++++++++++++++++++++
 1 file changed, 53 insertions(+)
 create mode 100644 core/templates/multi-basedirs.js

diff --git a/core/templates/multi-basedirs.js b/core/templates/multi-basedirs.js
new file mode 100644
index 00000000..9704780d
--- /dev/null
+++ b/core/templates/multi-basedirs.js
@@ -0,0 +1,53 @@
+/*
+ * This is a Pug plugin to allow multiple basedirs. This is used to have Pug
+ * templates in both Bedrock core and in a project that uses Bedrock.
+ *
+ * From https://github.com/pugjs/pug/issues/2499 and
+ * https://github.com/gryphonmyers/pug-multiple-basedirs-plugin
+ */
+
+const { accessSync, constants: {R_OK} } = require('fs');
+const path = require('path');
+
+const config = require('../discovery/config');
+
+// The multiple basedirs are the user-defined basedir plus Bedrock's. Adding
+// bedrockDir allows to refer to Bedrock's core templates with the /core
+// prefix. Adding it at the end allows users to override core templates.
+const bedrockDir = path.join(__dirname, '../../');
+const basedirs = [config.pug.basedir, bedrockDir];
+
+const exists = filename => {
+  try {
+    accessSync(filename, R_OK);
+    return true;
+  } catch (err) {
+    return false;
+  }
+};
+
+function MultipleBaseDirs() {
+  return {
+    name: 'multipleBasedirs',
+    resolve(filename, source) {
+      let out;
+
+      if (filename[0] === '/') {
+        filename = filename.substr(1);
+        if (!basedirs.some(basedir => exists(out = path.resolve(basedir, filename)))) {
+          throw new Error(`${filename} cannot be found in any basedir`);
+        }
+      } else {
+        if (!source) {
+          throw new Error('the "filename" option is required to use includes and extends with "relative" paths');
+        }
+
+        out = path.resolve(path.dirname(source), filename);
+      }
+
+      return out;
+    }
+  };
+}
+
+module.exports = MultipleBaseDirs;

From 7f5544d778fbfff349f458a45d4fc8e4582d2c15 Mon Sep 17 00:00:00 2001
From: Vo Minh Thu <thu@smart.coop>
Date: Sat, 17 Jul 2021 14:29:56 +0200
Subject: [PATCH 3/7] Add the multiple-basedirs plugin to Pug's config.

---
 core/discovery/docs.js   | 5 ++++-
 core/tasks/templates.js  | 4 ++++
 core/templates/locals.js | 8 ++++++--
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/core/discovery/docs.js b/core/discovery/docs.js
index 07aee6e0..67eaed6d 100644
--- a/core/discovery/docs.js
+++ b/core/discovery/docs.js
@@ -13,6 +13,8 @@ const config = require('./config');
 const locals = require('../templates/locals');
 const paths = require('../paths');
 
+const MultipleBaseDirs = require('../templates/multi-basedirs');
+
 module.exports = {
   discover: function () {
     const docFiles = glob.sync(paths.content.docs)
@@ -33,7 +35,8 @@ module.exports = {
           const markupWithLayout = `extends /../core/templates/layouts/sample\n\nblock content\n${indentedPugMarkup}`;
 
           const compiler = pug.compile(markupWithLayout, Object.assign({}, config.pug, {
-            filename: docPath
+            filename: docPath,
+            plugins: [MultipleBaseDirs()]
           }));
           parsedFile.body = compiler(Object.assign({}, locals.getDefaultLocals(), {
             pathname: `styleguide/docs/${filename}`
diff --git a/core/tasks/templates.js b/core/tasks/templates.js
index db35584f..6c1aff8a 100644
--- a/core/tasks/templates.js
+++ b/core/tasks/templates.js
@@ -20,6 +20,10 @@ const paths = require('../paths');
 const locals = require('../templates/locals');
 const docs = require('../discovery/docs');
 
+const MultipleBaseDirs = require('../templates/multi-basedirs');
+
+config.pug.plugins = [MultipleBaseDirs()];
+
 function getDefaultLocals() {
   const defaultLocals = locals.getDefaultLocals();
   defaultLocals.docs = docs.discover();
diff --git a/core/templates/locals.js b/core/templates/locals.js
index 09f55a9e..0f8c8aeb 100644
--- a/core/templates/locals.js
+++ b/core/templates/locals.js
@@ -9,6 +9,8 @@ const config = require('../discovery/config');
 const paths = require('../paths');
 const beautifyHTML = require('js-beautify').html;
 
+const MultipleBaseDirs = require('../templates/multi-basedirs');
+
 function indentCode(code) { return code.split('\n').map(line => `    ${line}`).join('\n'); }
 
 
@@ -58,7 +60,8 @@ function getDefaultLocals() {
       var a = pug.compile(markupWithLayout, {
         pretty: true,
         basedir: 'content',
-        filename: componentFileLocation
+        filename: componentFileLocation,
+        plugins: [MultipleBaseDirs()]
       })(locals);
 
       // Then beautify with JS beautify settings
@@ -76,7 +79,8 @@ function getDefaultLocals() {
       var compiledPug = pug.compile(markupWithLayout, {
         pretty: true,
         basedir: 'content',
-        filename: componentFileLocation
+        filename: componentFileLocation,
+        plugins: [MultipleBaseDirs()]
       })(locals);
 
       const reactFunctionBegin = `{/* Note that this is merely a starting point for a real React component */}

From af054847bef655a462d6b177b795c6cdaa62a00b Mon Sep 17 00:00:00 2001
From: Vo Minh Thu <thu@smart.coop>
Date: Sat, 17 Jul 2021 14:43:59 +0200
Subject: [PATCH 4/7] Use the mutiple-basedirs Pug plugin in Express.js.

---
 core/templates/locals.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/core/templates/locals.js b/core/templates/locals.js
index 0f8c8aeb..c5be0452 100644
--- a/core/templates/locals.js
+++ b/core/templates/locals.js
@@ -29,6 +29,7 @@ function getDefaultLocals() {
 
   const locals = {
     basedir: './content/',
+    plugins: [MultipleBaseDirs()],
     contentData: contentData.discover(),
     components: components.discover(),
     pages: pages.discover(),

From fa924ffaaa7460e1d222d180d9d565a5033acb6c Mon Sep 17 00:00:00 2001
From: Vo Minh Thu <thu@smart.coop>
Date: Sat, 17 Jul 2021 14:32:45 +0200
Subject: [PATCH 5/7] Make Bedrock core use proper Pug prefixes.

---
 core/discovery/docs.js              | 2 +-
 core/templates/layouts/sample.pug   | 2 +-
 core/templates/locals.js            | 4 ++--
 core/templates/styleguide/index.pug | 4 ++--
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/core/discovery/docs.js b/core/discovery/docs.js
index 67eaed6d..36b978d1 100644
--- a/core/discovery/docs.js
+++ b/core/discovery/docs.js
@@ -32,7 +32,7 @@ module.exports = {
           parsedFile.body = marked(parsedFile.body);
         } 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 markupWithLayout = `extends /core/templates/layouts/sample\n\nblock content\n${indentedPugMarkup}`;
 
           const compiler = pug.compile(markupWithLayout, Object.assign({}, config.pug, {
             filename: docPath,
diff --git a/core/templates/layouts/sample.pug b/core/templates/layouts/sample.pug
index 911487f1..953e2348 100644
--- a/core/templates/layouts/sample.pug
+++ b/core/templates/layouts/sample.pug
@@ -1,4 +1,4 @@
-include ../../../content/templates/_mixins/all
+include /templates/_mixins/all
 
 include ../mixins/icon
 
diff --git a/core/templates/locals.js b/core/templates/locals.js
index c5be0452..6d0654e6 100644
--- a/core/templates/locals.js
+++ b/core/templates/locals.js
@@ -55,7 +55,7 @@ function getDefaultLocals() {
     } else if (language === 'html') {
 
       const indentedPugMarkup = indentCode(pugMarkup);
-      const markupWithLayout = `extends /../core/templates/layouts/sample\n\nblock content\n${indentedPugMarkup}`;
+      const markupWithLayout = `extends /core/templates/layouts/sample\n\nblock content\n${indentedPugMarkup}`;
 
       // First compile Pug
       var a = pug.compile(markupWithLayout, {
@@ -74,7 +74,7 @@ function getDefaultLocals() {
       // I know we are repeating 8 lines of code from above, could be made more DRY
 
       const indentedPugMarkup = pugMarkup.split('\n').map(line => `    ${line}`).join('\n');
-      const markupWithLayout = `extends /../core/templates/layouts/sample\n\nblock content\n${indentedPugMarkup}`;
+      const markupWithLayout = `extends /core/templates/layouts/sample\n\nblock content\n${indentedPugMarkup}`;
 
       // First compile Pug
       var compiledPug = pug.compile(markupWithLayout, {
diff --git a/core/templates/styleguide/index.pug b/core/templates/styleguide/index.pug
index 03b70185..a414f0c9 100644
--- a/core/templates/styleguide/index.pug
+++ b/core/templates/styleguide/index.pug
@@ -11,7 +11,7 @@ block body
 
             .br-styleguide-header
                 if styleguideBrandCustomTemplate
-                    include ../../../content/docs/templates/styleguide-custom-brand-template
+                    include /docs/templates/styleguide-custom-brand-template
                 else
                     if styleguideLogoAsImage
                         a(href=styleguideBrandLink?styleguideBrandLink:"")
@@ -23,7 +23,7 @@ block body
             if config.styleguide.search
                 .br-styleguide-search
                     if styleguideSearchCustomTemplate
-                        include ../../../content/docs/templates/styleguide-custom-search-template
+                        include /docs/templates/styleguide-custom-search-template
                     else
                         input#styleguideSearch(type="search" placeholder=styleguideSearchPlaceholderString class=styleguideInputClass)
 

From 69fc3b2ed39b19d8259923a6590a79372b31c68b Mon Sep 17 00:00:00 2001
From: Vo Minh Thu <thu@smart.coop>
Date: Sat, 17 Jul 2021 14:33:44 +0200
Subject: [PATCH 6/7] Make content use proper Pug prefixes.

---
 .../templates/_components/aov-icons/02-icon-font.pug |  4 ++--
 content/templates/_layouts/master.pug                | 12 ++++++------
 content/templates/page-index.pug                     |  2 +-
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/content/templates/_components/aov-icons/02-icon-font.pug b/content/templates/_components/aov-icons/02-icon-font.pug
index 3ce37a3c..661982a0 100755
--- a/content/templates/_components/aov-icons/02-icon-font.pug
+++ b/content/templates/_components/aov-icons/02-icon-font.pug
@@ -1,6 +1,6 @@
-include ../../../../core/templates/mixins/icon-overview
+include /core/templates/mixins/icon-overview
 
 if config.icons.generateIconFont
     +iconsOverview('icon-font', 'Icon font')
 else
-    p You don't seem to have icon fonts activated in <code>bedrock.config.js</code>. You can safely delete these documentation templates if you are not using an icon font, or document your icon font in your own manner.
\ No newline at end of file
+    p You don't seem to have icon fonts activated in <code>bedrock.config.js</code>. You can safely delete these documentation templates if you are not using an icon font, or document your icon font in your own manner.
diff --git a/content/templates/_layouts/master.pug b/content/templates/_layouts/master.pug
index 0186dd24..6ef356e6 100644
--- a/content/templates/_layouts/master.pug
+++ b/content/templates/_layouts/master.pug
@@ -1,8 +1,8 @@
 //- Globally expose mixins without output, needed for Bedrock to work
-include ../../../core/templates/mixins/icon
-include ../../../core/templates/mixins/render-page-tree
-include ../../../core/templates/mixins/sample
-include ../../../core/templates/mixins/styleguide-settings
+include /core/templates/mixins/icon
+include /core/templates/mixins/render-page-tree
+include /core/templates/mixins/sample
+include /core/templates/mixins/styleguide-settings
 //- Use this include to add your own mixins
 include ../_mixins/all
 
@@ -51,14 +51,14 @@ html(dir="ltr" lang="en" class=htmlClass ? htmlClass : '')
 
         if config.pageTree && config.pageTree.layoutStyle == 'sidebar'
             .br-prototype-wrapper
-                include ../../../core/templates/includes/prototype-nav
+                include /core/templates/includes/prototype-nav
                 .br-prototype-content
                     block body
         else
             block body
             if config.pageTree && config.pageTree.layoutStyle == 'fixed'
                 .br-pagetree-fixed-wrapper
-                    include ../../../core/templates/includes/prototype-nav
+                    include /core/templates/includes/prototype-nav
 
         = "\n"
 
diff --git a/content/templates/page-index.pug b/content/templates/page-index.pug
index 0ed8d134..7f4de524 100644
--- a/content/templates/page-index.pug
+++ b/content/templates/page-index.pug
@@ -1,6 +1,6 @@
 extends /templates/_layouts/master
 
-include ../../core/templates/mixins/render-page-tree
+include /core/templates/mixins/render-page-tree
 
 block append headerStyles
     style.

From 9fc0855b348394eb6ef1926951c7e966292169ae Mon Sep 17 00:00:00 2001
From: Vo Minh Thu <thu@smart.coop>
Date: Sat, 17 Jul 2021 15:39:28 +0200
Subject: [PATCH 7/7] Refer to Bedrock templates using its own directory

---
 core/tasks/templates.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/core/tasks/templates.js b/core/tasks/templates.js
index 6c1aff8a..80aedc84 100644
--- a/core/tasks/templates.js
+++ b/core/tasks/templates.js
@@ -24,6 +24,8 @@ const MultipleBaseDirs = require('../templates/multi-basedirs');
 
 config.pug.plugins = [MultipleBaseDirs()];
 
+const bedrockDir = path.join(__dirname, '../../');
+
 function getDefaultLocals() {
   const defaultLocals = locals.getDefaultLocals();
   defaultLocals.docs = docs.discover();
@@ -43,7 +45,7 @@ module.exports = {
 
       const tasks = Object.keys(defaultLocals.components.byGroup).map(componentGroup => {
         return gulp.src([
-            paths.core.templates.styleguide.componentGroup
+            path.join(bedrockDir, paths.core.templates.styleguide.componentGroup)
           ])
           .pipe(data(function (file) {
             return Object.assign({}, getDefaultLocals(), {
@@ -61,7 +63,7 @@ module.exports = {
 
       tasks.push(
         gulp.src([
-            paths.core.templates.styleguide.index
+            path.join(bedrockDir, paths.core.templates.styleguide.index)
           ])
           .pipe(data(function (file) {
             return Object.assign({}, getDefaultLocals(), {
@@ -83,7 +85,9 @@ module.exports = {
       const defaultLocals = getDefaultLocals();
 
       const tasks = defaultLocals.docs.allDocs.map(doc => {
-        return gulp.src(paths.core.templates.styleguide.doc)
+        return gulp.src(
+            path.join(bedrockDir, paths.core.templates.styleguide.doc)
+	  )
           .pipe(data(function (file) {
             return Object.assign({}, getDefaultLocals(), {
               doc,