Merge pull request #110 from devnook/Microsite-squash

Adding MDL microsite stub
2015-04-07 13:54:08 +01:00 · 2015-04-07 13:54:08 +01:00 · afad365481
parent a1d0a507c5 9fbe74cca4
commit afad365481
15 changed files with 382 additions and 34 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,3 +1,5 @@
 node_modules
 .tmp
 gulp-cache
+.DS_Store
+docs/out
--- a/docs/_assets/app-icon.png
+++ b/docs/_assets/app-icon.png
--- a/docs/_assets/main.css
+++ b/docs/_assets/main.css
@ -0,0 +1,9 @@
+.wsk-layout__content {
+  padding: 20px;
+}
+
+.wsk-layout-title a,
+button a {
+  color: inherit;
+  text-decoration: none;
+}
--- a/docs/_pages/about.md
+++ b/docs/_pages/about.md
@ -0,0 +1,8 @@
+---
+layout: page
+title: About
+---
+
+##Introduction
+
+The Material Design Lite (MDL) **button** component is an enhanced version of the standard HTML `<button>` element. A button consists of text and/or an image that clearly communicates what action will occur when the user clicks or touches it. The MDL button component provides various types of buttons, and allows you to add both display and click effects.
--- a/docs/_pages/components.md
+++ b/docs/_pages/components.md
@ -0,0 +1,7 @@
+---
+layout: components
+title: Components
+---
+
+##Introduction
+The Material Design Lite (MDL) **button** component is an enhanced version of the standard HTML `<button>` element. A button consists of text and/or an image that clearly communicates what action will occur when the user clicks or touches it. The MDL button component provides various types of buttons, and allows you to add both display and click effects.
--- a/docs/_pages/customize.md
+++ b/docs/_pages/customize.md
@ -0,0 +1,6 @@
+---
+layout: customize
+title: Customize
+---
+
+
--- a/docs/_pages/getting_started.md
+++ b/docs/_pages/getting_started.md
@ -0,0 +1,9 @@
+---
+layout: page
+title: Getting started
+---
+
+##Introduction
+
+The Material Design Lite (MDL) **button** component is an enhanced version of the standard HTML `<button>` element. A button consists of text and/or an image that clearly communicates what action will occur when the user clicks or touches it. The MDL button component provides various types of buttons, and allows you to add both display and click effects.
+
--- a/docs/_pages/index.md
+++ b/docs/_pages/index.md
@ -0,0 +1,7 @@
+---
+layout: page
+title: Welcome
+---
+
+##Introduction
+The Material Design Lite (MDL) **button** component is an enhanced version of the standard HTML `<button>` element. A button consists of text and/or an image that clearly communicates what action will occur when the user clicks or touches it. The MDL button component provides various types of buttons, and allows you to add both display and click effects.
--- a/docs/_templates/component.html
+++ b/docs/_templates/component.html
@ -0,0 +1,20 @@
+{% extends 'layout.html' %}
+
+{% block content %}
+
+<div>
+  <a href="../">back to all </a>
+</div>
+
+<div>
+  <button class="wsk-button wsk-js-button wsk-button--raised">
+    <a href="demo.html">demo</a></button>
+</div>
+
+
+
+{{content|safe}}
+
+{% endblock %}
+
+
--- a/docs/_templates/components.html
+++ b/docs/_templates/components.html
@ -0,0 +1,17 @@
+{% extends 'layout.html' %}
+
+{% block content %}
+
+<h1>{{page.title}}</h1>
+
+<ul>
+{% for page in site.components -%}
+  <li><a href="{{ page.component }}">{{ page.component }}</a></li>
+{%- endfor %}
+</ul>
+
+{{content|safe}}
+
+{% endblock %}
+
+
--- a/docs/_templates/customize.html
+++ b/docs/_templates/customize.html
@ -0,0 +1,33 @@
+{% extends 'layout.html' %}
+
+{% block content %}
+
+<h1>{{page.title}}</h1>
+
+{{content|safe}}
+
+<label class="wsk-radio wsk-js-radio wsk-js-ripple-effect" for="wifi1">
+  <input type="radio" id="wifi1" class="wsk-radio__button" name="wifi[]" value="1" checked />
+  <span class="wsk-radio__label">Always</span>
+</label>
+
+<label class="wsk-radio wsk-js-radio wsk-js-ripple-effect" for="wifi2">
+  <input type="radio" id="wifi2" class="wsk-radio__button" name="wifi[]" value="2" />
+  <span class="wsk-radio__label">Only when plugged in</span>
+</label>
+
+<label class="wsk-radio wsk-js-radio wsk-js-ripple-effect" for="wifi3">
+  <input type="radio" id="wifi3" class="wsk-radio__button" name="wifi[]" value="3" />
+  <span class="wsk-radio__label">Never</span>
+</label>
+
+<label class="wsk-radio wsk-js-radio wsk-js-ripple-effect" for="wifi4">
+  <input type="radio" id="wifi4" class="wsk-radio__button" name="wifi[]" value="3" disabled />
+  <span class="wsk-radio__label">Unavailable option</span>
+</label>
+
+
+
+{% endblock %}
+
+
--- a/docs/_templates/layout.html
+++ b/docs/_templates/layout.html
@ -0,0 +1,91 @@
+<!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>Web Starter Kit</title>
+
+    <!-- Add to homescreen -->
+    <link rel="manifest" href="manifest.json">
+
+    <!-- Fallback to homescreen for Chrome <39 on Android -->
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="application-name" content="Web Starter Kit">
+    <link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">
+
+    <!-- Add to homescreen for Safari on iOS -->
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta name="apple-mobile-web-app-title" content="Web Starter Kit">
+    <link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png">
+
+    <!-- Tile icon for Win8 (144x144 + tile color) -->
+    <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
+    <meta name="msapplication-TileColor" content="#3372DF">
+
+    <meta name="theme-color" content="#3372DF">
+
+    <!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
+    <!--
+    <link rel="canonical" href="http://www.example.com/">
+    -->
+
+    <!-- Page styles -->
+    <link rel="stylesheet" href="/material.min.css">
+    <link rel="stylesheet" href="/assets/main.css">
+    <script src="/material.min.js" />
+  </head>
+  <body>
+
+  <div class="demo-layout">
+    <div class="wsk-layout__container">
+      <div class="wsk-layout wsk-js-layout wsk-layout--overlay-drawer-button">
+      <header class="wsk-layout__header is-casting-shadow">
+        <!-- Icon -->
+        <img class="wsk-layout-icon" src="/assets/app-icon.png">
+        <!-- Title -->
+        <span class="wsk-layout-title"><a href="/">Material Design Lite</a></span>
+        <!-- Add spacer, to align navigation to the right -->
+        <div class="wsk-layout-spacer"></div>
+        <!-- Navigation -->
+        <nav class="wsk-navigation">
+          <a class="wsk-navigation__link" href="/about">About</a>
+          <a class="wsk-navigation__link" href="/getting_started">Getting started
+</a>
+          <a class="wsk-navigation__link" href="/components">Components</a>
+          <a class="wsk-navigation__link" href="/customize">Customize</a>
+
+        </nav>
+      </header>
+      <div class="wsk-layout__drawer">
+        <span class="wsk-layout-title">Material Design Lite</span>
+        <nav class="wsk-navigation">
+          <a class="wsk-navigation__link" href="/about">About</a>
+          <a class="wsk-navigation__link" href="/getting_started">Getting started
+</a>
+          <a class="wsk-navigation__link" href="/components">Components</a>
+          <a class="wsk-navigation__link" href="/customize">Customize</a>
+        </nav>
+      </div>
+      <div class="wsk-layout__drawer-button"></div><main class="wsk-layout__content">
+          {% block content %}{% endblock %}
+      </main>
+    <div class="wsk-layout__obfuscator"></div></div></div>
+  </div>
+
+
+
+    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+      ga('create', 'UA-XXXXX-X', 'auto');
+      ga('send', 'pageview');
+    </script>
+    <!-- Built with love using Web Starter Kit -->
+  </body>
+</html>
--- a/docs/_templates/page.html
+++ b/docs/_templates/page.html
@ -0,0 +1,11 @@
+{% extends 'layout.html' %}
+
+{% block content %}
+
+<h1>{{page.title}}</h1>
+
+{{content|safe}}
+
+{% endblock %}
+
+
--- a/gulpfile.js
+++ b/gulpfile.js
@ -29,6 +29,8 @@ var reload = browserSync.reload;
 var fs = require('fs');
 var path = require('path');
 var pkg = require('./package.json');
+var through = require('through2');
+var swig = require('swig');
 var banner = ['/**',
  ' * <%= pkg.name %> - <%= pkg.description %>',
  ' * @version v<%= pkg.version %>',
@ -49,6 +51,9 @@ var AUTOPREFIXER_BROWSERS = [
  'bb >= 10'
 ];

+
+// ***** Development tasks ****** //
+
 // Lint JavaScript
 gulp.task('jshint', function () {
  return gulp.src('src/**/*.js')
@ -58,6 +63,9 @@ gulp.task('jshint', function () {
    .pipe($.if(!browserSync.active, $.jshint.reporter('fail')));
 });

+
+// ***** Production build tasks ****** //
+
 // Optimize Images
 // TODO: Update image paths in final CSS to match root/images
 gulp.task('images', function () {
@ -186,38 +194,8 @@ gulp.task('scripts', function () {
    .pipe($.size({title: 'scripts'}));
 });

-// Run Unit Tests
-gulp.task('mocha', function () {
-  return gulp.src('./test/index.html')
-    .pipe($.mochaPhantomjs({reporter: 'list'}))
-});
-
 // Clean Output Directory
-gulp.task('clean', del.bind(null, ['.tmp', 'css/*', 'js/*', '!dist/.git'], {dot: true}));
-
-// Watch Files For Changes & Reload
-gulp.task('serve', ['styles:dev'], function () {
-  browserSync({
-    notify: false,
-    // Customize the BrowserSync console logging prefix
-    logPrefix: 'WSK',
-    server: ['.tmp', 'src', '.tmp/styles']
-  });
-
-  gulp.watch(['src/**/*.html'], reload);
-  gulp.watch(['src/**/*.{scss,css}'], ['styles:dev', reload]);
-  gulp.watch(['src/**/*.js'], ['jshint']);
-});
-
-// Build and serve the output from the dist build
-gulp.task('serve:dist', ['default'], function () {
-  browserSync({
-    notify: false,
-    logPrefix: 'WSK',
-    server: './',
-    baseDir: 'src'
-  });
-});
+gulp.task('clean', del.bind(null, ['css/*', 'js/*'], {dot: true}));

 // Build Production Files, the Default Task
 gulp.task('default', ['clean','mocha'], function (cb) {
@ -227,6 +205,14 @@ gulp.task('default', ['clean','mocha'], function (cb) {
    cb);
 });

+
+// ***** Testing tasks ***** //
+
+gulp.task('mocha', function () {
+  return gulp.src('./test/index.html')
+    .pipe($.mochaPhantomjs({reporter: 'list'}))
+});
+
 gulp.task('test', ['jshint', 'mocha']);

 gulp.task('test:visual', function() {
@ -238,3 +224,139 @@ gulp.task('test:visual', function() {

  gulp.watch(['test/visual/**'], reload);
 });
+
+
+// ***** Landing page tasks ***** //
+
+/**
+ * Site metadata for use with templates.
+ * @type {Object}
+ */
+var site = {};
+
+
+/**
+ * Compiled swig templates cache.
+ * @type {Object}
+ */
+var templates = {};
+
+
+/**
+ * Generates an HTML file based on a template and file metadata.
+ */
+function applyTemplate() {
+  return through.obj(function(file, enc, cb) {
+    var data = {
+      site: site,
+      page: file.page,
+      content: file.contents.toString()
+    };
+    // If template not in template cache, compile and add it.
+    if (!templates[file.page.layout]) {
+      var templateFile = path.join(
+          __dirname, 'docs', '_templates', file.page.layout + '.html');
+      $.util.log('Compiling template:', $.util.colors.yellow(file.page.layout));
+      templates[file.page.layout] = swig.compileFile(templateFile);
+    }
+    var tpl = templates[file.page.layout];
+    file.contents = new Buffer(tpl(data), 'utf8');
+    this.push(file);
+    cb();
+  })
+}
+
+
+/**
+ * Generates an index.html file for each README in MDL/src directory.
+ */
+gulp.task('components', function() {
+  return gulp.src('./src/**/README.md', {base: './src'})
+    // Add basic front matter.
+    .pipe($.header('---\nlayout: component\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($.rename(function (path) {
+        path.basename = "index";
+    }))
+    .pipe(gulp.dest('docs/out/components'));
+});
+
+
+/**
+ * Copies demo files from MDL/src directory.
+ */
+gulp.task('demos', function () {
+    return gulp.src([
+        './src/**/demo.*',
+        './src/**/*.js'
+      ], {base: './src'})
+      .pipe($.if('*.scss', $.sass({
+        precision: 10,
+        onError: console.error.bind(console, 'Sass error:')
+      })))
+      .pipe($.if('*.css', $.autoprefixer(AUTOPREFIXER_BROWSERS)))
+      .pipe(gulp.dest('docs/out/components'));
+});
+
+
+/**
+ * Generates an HTML file for each md file in _pages directory.
+ */
+gulp.task('pages', ['components'], function() {
+  return gulp.src(['docs/_pages/*.md'])
+    .pipe($.frontMatter({property: 'page', remove: true}))
+    .pipe($.marked())
+    .pipe(applyTemplate())
+    .pipe($.rename(function(path) {
+      if (path.basename !== 'index') {
+        path.dirname = path.basename;
+        path.basename = 'index';
+      }
+    }))
+    .pipe(gulp.dest('docs/out'));
+});
+
+
+/**
+ * Copies assets from MDL and _assets directory.
+ */
+gulp.task('assets', function () {
+  return gulp.src(['docs/_assets/**'])
+    .pipe(gulp.dest('docs/out/assets'));
+});
+
+
+/**
+ * Serves the landing page from "out" directory.
+ */
+gulp.task('serve', ['assets', 'pages', 'demos'], function () {
+  browserSync({
+    notify: false,
+    server: {
+      baseDir: ['docs/out', 'js', 'css', 'fonts'],
+      routes: {
+        '/fonts': 'fonts',
+        '/components/fonts': 'fonts'
+      }
+    }
+  });
+
+  gulp.watch(['src/**/*.js', '!src/**/README.md'], ['demos', reload]);
+  gulp.watch(['src/**/*.js'], ['scripts', reload]);
+  gulp.watch(['src/**/README.md'], ['components', reload]);
+});
--- a/package.json
+++ b/package.json
@ -18,32 +18,38 @@
    "chai": "^2.0.0",
    "chai-jquery": "^2.0.0",
    "del": "^1.1.1",
-    "gulp": "^3.8.5",
+    "gulp": "^3.8.11",
    "gulp-autoprefixer": "^2.0.0",
    "gulp-cache": "^0.2.6",
    "gulp-changed": "^1.0.0",
    "gulp-concat": "^2.4.1",
    "gulp-csso": "^1.0.0",
    "gulp-flatten": "0.0.4",
+    "gulp-front-matter": "^1.2.2",
    "gulp-header": "^1.2.2",
    "gulp-if": "^1.2.1",
-    "gulp-imagemin": "^2.0.0",
    "gulp-jshint": "^1.6.3",
    "gulp-load-plugins": "^0.8.0",
+    "gulp-markdown": "^1.0.0",
+    "gulp-marked": "^1.0.0",
    "gulp-minify-html": "^1.0.0",
    "gulp-mocha-phantomjs": "^0.5.3",
+    "gulp-rename": "^1.2.0",
    "gulp-replace": "^0.5.3",
    "gulp-sass": "^1.3.3",
    "gulp-size": "^1.0.0",
    "gulp-sourcemaps": "^1.3.0",
    "gulp-uglify": "^1.0.1",
    "gulp-useref": "^1.0.1",
+    "gulp-util": "^3.0.4",
    "jquery": "^2.1.3",
    "jshint-stylish": "^1.0.0",
    "mocha": "^2.1.0",
    "opn": "^1.0.0",
    "require-dir": "^0.1.0",
-    "run-sequence": "^1.0.2"
+    "run-sequence": "^1.0.2",
+    "swig": "^1.4.2",
+    "through2": "^0.6.3"
  },
  "engines": {
    "node": ">=0.10.0"