diff --git a/docs/_templates/demo.html b/docs/_templates/demo.html
new file mode 100644
index 00000000..a80282e3
--- /dev/null
+++ b/docs/_templates/demo.html
@@ -0,0 +1,42 @@
+
+
+
+
+
+
+
+ {{ page.component }} test
+
+
+
+
+
+
+
+
+
+
+
+ {% set demo_css = "../../src/" + page.component + "/demo.css" %}
+
+ {% set demo_js = "../../src/" + page.component + "/demo.js" %}
+
+
+
+
+
+
+ {% block content %}
+ {{content|safe}}
+ {% endblock %}
+
+
+
+
+
+
diff --git a/gulpfile.js b/gulpfile.js
index fbfffada..4a440669 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -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.
*/