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/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 bedrock.config.js
. 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 bedrock.config.js
. 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.
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/discovery/docs.js b/core/discovery/docs.js
index 07aee6e0..36b978d1 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)
@@ -30,10 +32,11 @@ 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
+ filename: docPath,
+ plugins: [MultipleBaseDirs()]
}));
parsedFile.body = compiler(Object.assign({}, locals.getDefaultLocals(), {
pathname: `styleguide/docs/${filename}`
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..80aedc84 100644
--- a/core/tasks/templates.js
+++ b/core/tasks/templates.js
@@ -20,6 +20,12 @@ const paths = require('../paths');
const locals = require('../templates/locals');
const docs = require('../discovery/docs');
+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();
@@ -28,9 +34,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) {
@@ -38,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(), {
@@ -56,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(), {
@@ -78,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,
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/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 09f55a9e..6d0654e6 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'); }
@@ -27,6 +29,7 @@ function getDefaultLocals() {
const locals = {
basedir: './content/',
+ plugins: [MultipleBaseDirs()],
contentData: contentData.discover(),
components: components.discover(),
pages: pages.discover(),
@@ -52,13 +55,14 @@ 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, {
pretty: true,
basedir: 'content',
- filename: componentFileLocation
+ filename: componentFileLocation,
+ plugins: [MultipleBaseDirs()]
})(locals);
// Then beautify with JS beautify settings
@@ -70,13 +74,14 @@ 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, {
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 */}
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)
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;
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)