google
/
material-design-lite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adding generation for individual demos. 

This enables much easier per-component testing.
master
Sérgio Gomes 2015-06-11 16:02:19 +01:00
parent d55a161018
commit 93b26d8933
2 changed files with 69 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
docs/_templates/demo.html vendored Normal file
View File

@ -0,0 +1,42 @@
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ page.component }} test</title>
<!-- Fonts -->
<link href='https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<!-- Page styles -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.css">
<link rel="stylesheet" href="{{page.include_prefix}}material.min.css">
<link rel="stylesheet" href="{{page.include_prefix}}components/demos.css">
<script src="{{page.include_prefix}}material.min.js"></script>
{% set demo_css = "../../src/" + page.component + "/demo.css" %}
<style>
{% include demo_css ignore missing %}
</style>
{% set demo_js = "../../src/" + page.component + "/demo.js" %}
<script>
{% include demo_js ignore missing %}
</script>
</head>
<body>
<div style="padding-top: 24px;">
{% block content %}
{{content|safe}}
{% endblock %}
</div>
<!-- Enable Prism syntax highlighting -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.js"></script>
<!-- Built with love using Material Design Lite -->
</body>
</html>

29
gulpfile.js
View File

@ -285,10 +285,9 @@ gulp.task('components', function() {
/**
* Copies demo files from MDL/src directory.
*/
gulp.task('demos', function () {
gulp.task('demos', ['demohtml'], function () {
return gulp.src([
'./src/**/*.css',
'./src/**/demo.*',
'./src/**/*.js'
], {base: './src'})
.pipe($.if('*.scss', $.sass({
@ -302,6 +301,32 @@ gulp.task('demos', function () {
.pipe(gulp.dest('dist/components'));
});
/**
* Generates demo files for testing.
*/
gulp.task('demohtml', function() {
return gulp.src(['./src/**/demo.html'])
// Add basic front matter.
.pipe($.header('---\nlayout: demo\nbodyclass: demo\ninclude_prefix: ../../\n---\n\n'))
.pipe($.frontMatter({property: 'page', remove: true}))
.pipe($.marked())
.pipe((function () {
var componentPages = [];
return through.obj(function(file, enc, cb) {
file.page.component = file.relative.split('/')[0];
componentPages.push(file.page);
this.push(file);
cb();
},
function(cb) {
site.components = componentPages;
cb();
});
})())
.pipe(applyTemplate())
.pipe(gulp.dest('dist/components'));
});
/**
* Generates an HTML file for each md file in _pages directory.
*/