feat(): Add custom layout support

.cl-content CSS class is no longer supported by default
sneas · Apr 4, 2017 · f82a2e8 · f82a2e8
1 parent 14044fc
commit f82a2e8
Show file tree

Hide file tree

Showing 67 changed files with 118 additions and 108 deletions.
diff --git a/demo/gulpfile.js b/demo/gulpfile.js
@@ -19,9 +19,10 @@ gulp.task('assets', ['clean'], function() {
 });
 
 gulp.task('compile', ['assets'], function(cb) {
-    var templatesDir = path.join(__dirname, 'templates');
+    var templatesDir = path.join(__dirname, 'src/templates');
     componentLibrary(templatesDir, publicDir, {
         baseUrl: '/component-library/',
+        layout: path.join(__dirname, 'src/layout.html'),
         js: [
             'https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js',
             'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js',
@@ -41,5 +42,5 @@ gulp.task('compile', ['assets'], function(cb) {
 });
 
 gulp.task('watch', ['compile'], function() {
-    gulp.watch(['templates/**/*', 'assets/**/*', '../dist/assemblers/views/**/*', '../sass/**/*', '../assets/**/*'], ['compile']);
+    gulp.watch(['src/**/*', 'assets/**/*', '../dist/assemblers/views/**/*', '../sass/**/*', '../assets/**/*'], ['compile']);
 });
diff --git a/demo/src/layout.html b/demo/src/layout.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head></head>
+<body>
+    <div class="container">
+        {{ content | safe }}
+    </div>
+</body>
+</html>
diff --git a/demo/templates/0.intro.html → demo/src/templates/0.intro.html b/demo/templates/0.intro.html → demo/src/templates/0.intro.html
diff --git a/...ates/1.foundation/1.Colors/1.palette.html → ...ates/1.foundation/1.Colors/1.palette.html b/...ates/1.foundation/1.Colors/1.palette.html → ...ates/1.foundation/1.Colors/1.palette.html
diff --git a/....foundation/1.Colors/3.color-classes.html → ....foundation/1.Colors/3.color-classes.html b/....foundation/1.Colors/3.color-classes.html → ....foundation/1.Colors/3.color-classes.html
diff --git a/...tion/1.Colors/4.background-utilities.html → ...tion/1.Colors/4.background-utilities.html b/...tion/1.Colors/4.background-utilities.html → ...tion/1.Colors/4.background-utilities.html
diff --git a/...ates/1.foundation/2.Grid/simple-grid.html → ...ates/1.foundation/2.Grid/simple-grid.html b/...ates/1.foundation/2.Grid/simple-grid.html → ...ates/1.foundation/2.Grid/simple-grid.html
diff --git a/demo/templates/1.foundation/Addresses.html → ...src/templates/1.foundation/Addresses.html b/demo/templates/1.foundation/Addresses.html → ...src/templates/1.foundation/Addresses.html
diff --git a/demo/templates/1.foundation/Alerts.html → demo/src/templates/1.foundation/Alerts.html b/demo/templates/1.foundation/Alerts.html → demo/src/templates/1.foundation/Alerts.html
diff --git a/demo/templates/1.foundation/Badges.html → demo/src/templates/1.foundation/Badges.html b/demo/templates/1.foundation/Badges.html → demo/src/templates/1.foundation/Badges.html
diff --git a/...mplates/1.foundation/Buttons/1.basic.html → ...mplates/1.foundation/Buttons/1.basic.html b/...mplates/1.foundation/Buttons/1.basic.html → ...mplates/1.foundation/Buttons/1.basic.html
diff --git a/...s/1.foundation/Buttons/button-groups.html → ...s/1.foundation/Buttons/button-groups.html b/...s/1.foundation/Buttons/button-groups.html → ...s/1.foundation/Buttons/button-groups.html
diff --git a/...lates/1.foundation/Buttons/justified.html → ...lates/1.foundation/Buttons/justified.html b/...lates/1.foundation/Buttons/justified.html → ...lates/1.foundation/Buttons/justified.html
diff --git a/...plates/1.foundation/Buttons/vertical.html → ...plates/1.foundation/Buttons/vertical.html b/...plates/1.foundation/Buttons/vertical.html → ...plates/1.foundation/Buttons/vertical.html
diff --git a/.../1.foundation/Buttons/with-dropdowns.html → .../1.foundation/Buttons/with-dropdowns.html b/.../1.foundation/Buttons/with-dropdowns.html → .../1.foundation/Buttons/with-dropdowns.html
diff --git a/...undation/Definition Lists/1.vertical.html → ...undation/Definition Lists/1.vertical.html b/...undation/Definition Lists/1.vertical.html → ...undation/Definition Lists/1.vertical.html
diff --git a/...dation/Definition Lists/2.horizontal.html → ...dation/Definition Lists/2.horizontal.html b/...dation/Definition Lists/2.horizontal.html → ...dation/Definition Lists/2.horizontal.html
diff --git a/demo/templates/1.foundation/Dropdowns.html → ...src/templates/1.foundation/Dropdowns.html b/demo/templates/1.foundation/Dropdowns.html → ...src/templates/1.foundation/Dropdowns.html
diff --git a/...s/1.foundation/Forms/1.basic-example.html → ...s/1.foundation/Forms/1.basic-example.html b/...s/1.foundation/Forms/1.basic-example.html → ...s/1.foundation/Forms/1.basic-example.html
diff --git a/...tes/1.foundation/Forms/2.inline-form.html → ...tes/1.foundation/Forms/2.inline-form.html b/...tes/1.foundation/Forms/2.inline-form.html → ...tes/1.foundation/Forms/2.inline-form.html
diff --git a/...1.foundation/Forms/3.horizontal-form.html → ...1.foundation/Forms/3.horizontal-form.html b/...1.foundation/Forms/3.horizontal-form.html → ...1.foundation/Forms/3.horizontal-form.html
diff --git a/demo/templates/1.foundation/Images.html → demo/src/templates/1.foundation/Images.html b/demo/templates/1.foundation/Images.html → demo/src/templates/1.foundation/Images.html
diff --git a/demo/templates/1.foundation/Labels.html → demo/src/templates/1.foundation/Labels.html b/demo/templates/1.foundation/Labels.html → demo/src/templates/1.foundation/Labels.html
diff --git a/demo/templates/1.foundation/Tables.html → demo/src/templates/1.foundation/Tables.html b/demo/templates/1.foundation/Tables.html → demo/src/templates/1.foundation/Tables.html
diff --git a/...1.foundation/Typography/1.blockquote.html → ...1.foundation/Typography/1.blockquote.html b/...1.foundation/Typography/1.blockquote.html → ...1.foundation/Typography/1.blockquote.html
diff --git a/...tion/Typography/2.blockquote-reverse.html → ...tion/Typography/2.blockquote-reverse.html b/...tion/Typography/2.blockquote-reverse.html → ...tion/Typography/2.blockquote-reverse.html
diff --git a/...dation/Typography/Emphasis/bold-text.html → ...dation/Typography/Emphasis/bold-text.html b/...dation/Typography/Emphasis/bold-text.html → ...dation/Typography/Emphasis/bold-text.html
diff --git a/...ion/Typography/Emphasis/italics-text.html → ...ion/Typography/Emphasis/italics-text.html b/...ion/Typography/Emphasis/italics-text.html → ...ion/Typography/Emphasis/italics-text.html
diff --git a/...ation/Typography/Emphasis/small-text.html → ...ation/Typography/Emphasis/small-text.html b/...ation/Typography/Emphasis/small-text.html → ...ation/Typography/Emphasis/small-text.html
diff --git a/...ndation/Typography/Lists/list-inline.html → ...ndation/Typography/Lists/list-inline.html b/...ndation/Typography/Lists/list-inline.html → ...ndation/Typography/Lists/list-inline.html
diff --git a/...dation/Typography/Lists/list-ordered.html → ...dation/Typography/Lists/list-ordered.html b/...dation/Typography/Lists/list-ordered.html → ...dation/Typography/Lists/list-ordered.html
diff --git a/...tion/Typography/Lists/list-unordered.html → ...tion/Typography/Lists/list-unordered.html b/...tion/Typography/Lists/list-unordered.html → ...tion/Typography/Lists/list-unordered.html
diff --git a/...ation/Typography/Lists/list-unstyled.html → ...ation/Typography/Lists/list-unstyled.html b/...ation/Typography/Lists/list-unstyled.html → ...ation/Typography/Lists/list-unstyled.html
diff --git a/...es/1.foundation/Typography/body-copy.html → ...es/1.foundation/Typography/body-copy.html b/...es/1.foundation/Typography/body-copy.html → ...es/1.foundation/Typography/body-copy.html
diff --git a/...tes/1.foundation/Typography/headings.html → ...tes/1.foundation/Typography/headings.html b/...tes/1.foundation/Typography/headings.html → ...tes/1.foundation/Typography/headings.html
diff --git a/...es/1.foundation/Typography/lead-copy.html → ...es/1.foundation/Typography/lead-copy.html b/...es/1.foundation/Typography/lead-copy.html → ...es/1.foundation/Typography/lead-copy.html
diff --git a/...plates/1.foundation/Typography/links.html → ...plates/1.foundation/Typography/links.html b/...plates/1.foundation/Typography/links.html → ...plates/1.foundation/Typography/links.html
diff --git a/...foundation/Typography/text-alignment.html → ...foundation/Typography/text-alignment.html b/...foundation/Typography/text-alignment.html → ...foundation/Typography/text-alignment.html
diff --git a/demo/templates/1.foundation/Well.html → demo/src/templates/1.foundation/Well.html b/demo/templates/1.foundation/Well.html → demo/src/templates/1.foundation/Well.html
diff --git a/demo/templates/1.foundation/icons.html → demo/src/templates/1.foundation/icons.html b/demo/templates/1.foundation/icons.html → demo/src/templates/1.foundation/icons.html
diff --git a/...s/2.components/Media Objects/default.html → ...s/2.components/Media Objects/default.html b/...s/2.components/Media Objects/default.html → ...s/2.components/Media Objects/default.html
diff --git a/...ates/2.components/Media Objects/list.html → ...ates/2.components/Media Objects/list.html b/...ates/2.components/Media Objects/list.html → ...ates/2.components/Media Objects/list.html
diff --git a/...tes/2.components/Navigation/1.Navbar.html → ...tes/2.components/Navigation/1.Navbar.html b/...tes/2.components/Navigation/1.Navbar.html → ...tes/2.components/Navigation/1.Navbar.html
diff --git a/...lates/2.components/Navigation/2.Tabs.html → ...lates/2.components/Navigation/2.Tabs.html b/...lates/2.components/Navigation/2.Tabs.html → ...lates/2.components/Navigation/2.Tabs.html
diff --git a/...mponents/Navigation/3.Justified-Tabs.html → ...mponents/Navigation/3.Justified-Tabs.html b/...mponents/Navigation/3.Justified-Tabs.html → ...mponents/Navigation/3.Justified-Tabs.html
diff --git a/...ates/2.components/Navigation/4.Pills.html → ...ates/2.components/Navigation/4.Pills.html b/...ates/2.components/Navigation/4.Pills.html → ...ates/2.components/Navigation/4.Pills.html
diff --git a/...omponents/Navigation/5.Stacked-Pills.html → ...omponents/Navigation/5.Stacked-Pills.html b/...omponents/Navigation/5.Stacked-Pills.html → ...omponents/Navigation/5.Stacked-Pills.html
diff --git a/...omponents/Navigation/6.Dropdown-Tabs.html → ...omponents/Navigation/6.Dropdown-Tabs.html b/...omponents/Navigation/6.Dropdown-Tabs.html → ...omponents/Navigation/6.Dropdown-Tabs.html
diff --git a/...es/2.components/Pagination/1.default.html → ...es/2.components/Pagination/1.default.html b/...es/2.components/Pagination/1.default.html → ...es/2.components/Pagination/1.default.html
diff --git a/...ates/2.components/Pagination/2.large.html → ...ates/2.components/Pagination/2.large.html b/...ates/2.components/Pagination/2.large.html → ...ates/2.components/Pagination/2.large.html
diff --git a/...ates/2.components/Pagination/3.small.html → ...ates/2.components/Pagination/3.small.html b/...ates/2.components/Pagination/3.small.html → ...ates/2.components/Pagination/3.small.html
diff --git a/demo/templates/2.components/breadcrumbs.html → ...c/templates/2.components/breadcrumbs.html b/demo/templates/2.components/breadcrumbs.html → ...c/templates/2.components/breadcrumbs.html
diff --git a/demo/templates/2.components/list-groups.html → ...c/templates/2.components/list-groups.html b/demo/templates/2.components/list-groups.html → ...c/templates/2.components/list-groups.html
diff --git a/demo/templates/2.components/pager.html → demo/src/templates/2.components/pager.html b/demo/templates/2.components/pager.html → demo/src/templates/2.components/pager.html
diff --git a/...templates/2.components/progress-bars.html → ...templates/2.components/progress-bars.html b/...templates/2.components/progress-bars.html → ...templates/2.components/progress-bars.html
diff --git a/demo/templates/2.components/thumbnails.html → ...rc/templates/2.components/thumbnails.html b/demo/templates/2.components/thumbnails.html → ...rc/templates/2.components/thumbnails.html
diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
   },
   "dependencies": {
     "bootstrap-sass-namespace": "3.3.7-alpha.3",
+    "cheerio": "^0.22.0",
     "directory-tree": "^1.0.0",
     "font-awesome": "^4.6.3",
     "gulp": "^3.9.1",

diff --git a/sass/_layout.scss b/sass/_layout.scss
diff --git a/sass/bootstrap/_theme.scss b/sass/bootstrap/_theme.scss
@@ -31,4 +31,8 @@
         background-color: transparent;
         border-color: transparent;
     }
+}
+
+.cl-navbar-placeholder {
+    min-height: $navbar-height;
 }
diff --git a/sass/cl.scss b/sass/cl.scss
@@ -1,4 +1,3 @@
 @import "init";
-@import "layout";
 @import "tree";
 @import "components";
diff --git a/src/assemblers/templates.js b/src/assemblers/templates.js
@@ -5,6 +5,7 @@ import path from 'path';
 import writefile from 'writefile';
 import nunjucks from 'nunjucks';
 import hljs from 'highlight.js';
+import cheerio from 'cheerio';
 
 function refineTree(item, rootDir) {
     //Remove firsts numbers and extensions
@@ -34,22 +35,49 @@ function compileTree(item, outputDir, tree, options = {}) {
 
     renderers.push(
         new Promise(function(resolve, reject) {
-            nunjucks.render(
-                'page.njk',
-                _.extend({}, options, {
-                    tree: tree,
-                    current: item
-                }),
-                function(err, res) {
-                    if (err) {
-                        reject(err);
-                    }
-
-                    writefile(outputPath, res, function() {
-                        resolve();
-                    });
-                }
-            );
+            const params = _.extend({}, options, {
+                tree: tree,
+                current: item
+            });
+
+            const navigationHtml = nunjucks.render('navigation.njk', params);
+            const contentHtml = nunjucks.render('content.njk', params);
+            const layoutHtml = nunjucks.render(options.layout, {content: contentHtml});
+
+            const $ = cheerio.load(layoutHtml);
+            const head = $('head');
+            const body = $('body');
+
+            head.prepend(nunjucks.render('css.njk', params));
+
+            if (head.find('title').length === 0) {
+                head.prepend($('<title></title>').text(options.title));
+            }
+
+            _.forEach(options.css, function(cssLink) {
+                head.append($('<link rel="stylesheet">').attr('href', cssLink));
+            });
+
+            if (head.find('meta[charset]').length === 0) {
+                head.prepend('<meta charset="utf-8">');
+            }
+
+            if (head.find('link[rel=icon]').length === 0) {
+                head.append($('<link />').attr('href', options.favicon.href)
+                    .attr('rel', options.favicon.rel)
+                    .attr('type', options.favicon.type));
+            }
+
+            body.prepend(navigationHtml);
+            body.append(nunjucks.render('js.njk', params));
+
+            _.forEach(options.js, function(jsLink) {
+                body.append($('<script></script>').attr('src', jsLink));
+            });
+
+            writefile(outputPath, $.html(), function() {
+                resolve();
+            });
         })
     );
 
@@ -62,14 +90,15 @@ export default function(inputDir, outputDir, options = {}) {
         title: 'Component Library',
         js: [],
         css: [],
+        layout: path.join(__dirname, 'views/layout.njk'),
         favicon: {
             href: options.baseUrl + 'assets_/assets/favicons/favicon-32x32.png',
             rel: 'icon',
             type: 'image/component-library/favicons/png'
         }
     });
 
-    (new nunjucks.configure(path.resolve(__dirname, 'views')))
+    (new nunjucks.configure([path.join(__dirname, 'views'), '']))
         .addFilter('template', path => fs.readFileSync(path).toString())
         .addFilter('highlight', code => hljs.highlight('htmlbars', code, true, false).value);
 

diff --git a/src/assemblers/views/content.njk b/src/assemblers/views/content.njk
@@ -0,0 +1,2 @@
+{% from 'macro/element-tree.njk' import elementTree %}
+{{ elementTree(current, 1, baseUrl) }}
diff --git a/src/assemblers/views/css.njk b/src/assemblers/views/css.njk
@@ -0,0 +1 @@
+<link href="{{ baseUrl + 'assets_/css/cl.css' }}" rel="stylesheet">
diff --git a/src/assemblers/views/js.njk b/src/assemblers/views/js.njk
@@ -0,0 +1,9 @@
+<script>
+    BOOTSTRAP_NAMESPACE = 'cl-bs';
+</script>
+
+<script src="{{ baseUrl + 'assets_/jquery/jquery.js' }}"></script>
+<script src="{{ baseUrl + 'assets_/smartmenus-namespace/jquery.smartmenus.js' }}"></script>
+<script src="{{ baseUrl + 'assets_/smartmenus-namespace/addons/bootstrap/jquery.smartmenus.bootstrap.js' }}"></script>
+<script src="{{ baseUrl + 'assets_/assets/js/cl.js' }}"></script>
+<script src="{{ baseUrl + 'assets_/bootstrap-namespace/dropdown.js' }}"></script>
diff --git a/src/assemblers/views/layout.njk b/src/assemblers/views/layout.njk
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+<head></head>
+<body>
+    {{ content | safe }}
+</body>
+</html>
diff --git a/src/assemblers/views/navigation.njk b/src/assemblers/views/navigation.njk
@@ -0,0 +1,36 @@
+{% from 'macro/navigation.njk' import navigation %}
+{% from 'macro/search-tree.njk' import searchTree %}
+<div class="cl-bs-tag-html">
+    <div class="cl-bs-tag-body">
+        <div class="cl-bs-navbar cl-bs-navbar-inverse cl-bs-navbar-fixed-top" role="navigation">
+            <div class="cl-bs-container">
+                <div class="cl-bs-navbar-header">
+                    <button type="button" class="cl-bs-navbar-toggle cl-bs-tag-button cl-navigation-toggle">
+                        <span class="sr-only">Toggle navigation</span>
+                        <span class="cl-bs-icon-bar"></span>
+                        <span class="cl-bs-icon-bar"></span>
+                        <span class="cl-bs-icon-bar"></span>
+                    </button>
+                </div>
+                <div class="cl-bs-navbar-collapse cl-bs-collapse cl-navigation-collapse">
+                    <ul class="cl-bs-tag-ul cl-bs-nav cl-bs-navbar-nav">
+                        {% for child in tree.children %}
+                            {{ navigation(child, baseUrl, current) }}
+                        {% endfor %}
+                    </ul>
+
+                    <div class="cl-bs-navbar-form cl-bs-pull-right cl-bs-hidden-xs">
+                        <div class="cl-bs-dropdown">
+                            <input type="text" class="cl-bs-tag-input cl-bs-form-control cl-bs-form-control-sm" placeholder="Search" id="cl-search">
+                            <ul class="cl-bs-dropdown-menu">
+                                {{ searchTree(tree, baseUrl) }}
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="cl-navbar-placeholder"></div>
+    </div>
+</div>
diff --git a/src/assemblers/views/page.njk b/src/assemblers/views/page.njk