Add basic styleguide workflow with assemble

This commit is contained in:
Mario Volke 2014-12-17 14:43:50 +01:00 committed by Tankred Hase
parent 1d64c2dfb0
commit e6147e1fdc
5 changed files with 63 additions and 1 deletions

View File

@ -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']);

View File

@ -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"
}
}

View File

@ -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);
});
};

8
src/styleguide/index.hbs Normal file
View File

@ -0,0 +1,8 @@
---
title: Styleguide
---
{{#compose src="src/img/icons/*.svg"}}
<svg role="presentation"><use xlink:href="#icon-{{stripFileExtension @filename}}" /></svg>
{{@filename}}
{{/compose}}

View File

@ -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>