Add basic styleguide workflow with assemble

9 years ago · e6147e1fdc
parent 1d64c2dfb0
commit e6147e1fdc
5 changed files with 63 additions and 1 deletions
--- a/Gruntfile.js
+++ b/Gruntfile.js
@ -453,6 +453,27 @@ module.exports = function(grunt) {
            }
        },

+        // Styleguide
+
+        assemble: {
+            options: {
+                assets: '../',
+                layoutdir: 'src/styleguide/layouts',
+                layout: 'default.hbs',
+                partials: ['src/styleguide/blocks/**/*.hbs'],
+                helpers: [
+                    'handlebars-helper-compose',
+                    'src/styleguide/helpers/**/*.js'
+                ],
+                flatten: true
+            },
+            styleguide: {
+                files: [{
+                    'dist/styleguide/': ['src/styleguide/*.hbs']
+                }]
+            }
+        },
+
        // Development

        connect: {
@ -610,6 +631,7 @@ module.exports = function(grunt) {
    grunt.loadNpmTasks('grunt-svgstore');
    grunt.loadNpmTasks('grunt-shell');
    grunt.loadNpmTasks('grunt-angular-templates');
+    grunt.loadNpmTasks('assemble');

    // Build tasks
    grunt.registerTask('dist-css', ['sass', 'autoprefixer', 'csso']);
--- a/package.json
+++ b/package.json
@ -74,6 +74,8 @@
    "sinon": "~1.7.3",
    "tcp-socket": "~0.5.0",
    "time-grunt": "^1.0.0",
-    "wo-smtpclient": "~0.6.0"
+    "wo-smtpclient": "~0.6.0",
+    "assemble": "~0.4.42",
+    "handlebars-helper-compose": "~0.2.12"
  }
 }
--- a/src/styleguide/helpers/strip-file-extension.js
+++ b/src/styleguide/helpers/strip-file-extension.js
@ -0,0 +1,11 @@
+'use strict';
+
+module.exports.register = function(Handlebars) {
+
+    // Customize this helper
+    Handlebars.registerHelper('stripFileExtension', function(str) {
+        var content = str.replace(/\.[^\.]*$/, '');
+        return new Handlebars.SafeString(content);
+    });
+
+};
--- a/src/styleguide/index.hbs
+++ b/src/styleguide/index.hbs
@ -0,0 +1,8 @@
+---
+title: Styleguide
+---
+
+{{#compose  src="src/img/icons/*.svg"}}
+    <svg role="presentation"><use xlink:href="#icon-{{stripFileExtension @filename}}" /></svg>
+    {{@filename}}
+{{/compose}}
--- a/src/styleguide/layouts/default.hbs
+++ b/src/styleguide/layouts/default.hbs
@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>{{ title }} | Whiteout Mail</title>
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+</head>
+<body>
+
+    <!-- inline icons have to come first, hide immediately with inline styles -->
+    <div style="width: 0; height: 0; visibility: hidden;">
+        {{glob "src/img/icons/all.svg"}}
+    </div>
+
+    {{> body}}
+
+</body>
+</html>