use jade to generate HTML

.gitignore

@@ -1,4 +1,5 @@
 node_modules
+app
 dist
 bower_components
 .tmp

gulpfile.js

@@ -20,6 +20,7 @@ var merge = require('merge-stream');
 var path = require('path');
 var fs = require('fs');
 var glob = require('glob');
+var jade = require('gulp-jade');
 var historyApiFallback = require('connect-history-api-fallback');
 var packageJson = require('./package.json');
 var crypto = require('crypto');
@@ -69,6 +70,22 @@ gulp.task('js', function () {
     .pipe(gulp.dest('dist/'));
 });
 
+// compile jade to HTML
+gulp.task('templates', function() {
+  var YOUR_LOCALS = {};
+
+  gulp.src([
+    'templates/**/*.jade',
+    '!templates/views/**/*.jade',
+    '!templates/partials/**/*.jade'
+    ])
+    .pipe(jade({
+      locals: YOUR_LOCALS,
+      pretty: true
+    }))
+    .pipe(gulp.dest('app'))
+});
+
 // Lint JavaScript
 gulp.task('jshint', function () {
   return gulp.src([
@@ -241,8 +258,14 @@ gulp.task('serve', ['styles', 'elements', 'images'], function () {
     }
   });
 
+  gulp.watch([
+    'templates/**/*.jade',
+    '!templates/views/**/*.jade',
+    '!templates/partials/**/*.jade'
+  ], ['templates'])
   gulp.watch(['app/**/*.html'], reload);
   gulp.watch(['app/styles/**/*.css'], ['styles', reload]);
+  gulp.watch(['app/styles/**/*.css'], ['styles', reload]);
   gulp.watch(['app/elements/**/*.css'], ['elements', reload]);
   gulp.watch(['app/{scripts,elements}/**/{*.js,*.html}'], ['jshint','js']);
   gulp.watch(['app/images/**/*'], reload);
@@ -275,10 +298,11 @@ gulp.task('serve:dist', ['default'], function () {
 gulp.task('default', ['clean'], function (cb) {
   // Uncomment 'cache-config' after 'rename-index' if you are going to use service workers.
   runSequence(
+    ['templates'],
     ['copy', 'styles'],
     ['elements', 'js'],
     ['jshint', 'images', 'fonts', 'html'],
-    'vulcanize','rename-index', // 'cache-config',
+    'vulcanize','rename-index', //'cache-config',
     cb);
 });
 

package.json

@@ -15,6 +15,7 @@
     "gulp-flatten": "0.0.4",
     "gulp-if": "^1.2.1",
     "gulp-imagemin": "^2.2.1",
+    "gulp-jade": "^1.1.0",
     "gulp-jshint": "^1.6.3",
     "gulp-load-plugins": "^0.10.0",
     "gulp-minify-html": "^1.0.2",

templates/elements/ccc-voting/ccc-voting.css

@@ -0,0 +1,6 @@
+:host {
+  display: block;
+}
+.options-wrapper {
+  width: 100%;
+}

templates/elements/ccc-voting/ccc-voting.jade

@@ -0,0 +1,27 @@
+- var bower = '../../bower_components'
+link(rel='import', href='#{bower}/polymer/polymer.html')
+link(rel='import', href='#{bower}/paper-input/paper-input.html')
+link(rel='import', href='#{bower}/paper-item/paper-item.html')
+link(rel='import', href='#{bower}/paper-menu/paper-menu.html')
+dom-module#ccc-voting(attributes='users')
+  template
+    style
+      include ccc-voting.css
+    .options-wrapper.layout.horizontal
+      paper-menu.flex
+        template(is='dom-repeat'
+                 items='{{palettes}}'
+                 as='palette')
+          paper-item {{palette}}
+      paper-menu.flex
+        template(is='dom-repeat'
+                 items='{{shapes}}'
+                 as='shape')
+          paper-item {{shape}}
+      paper-menu.flex
+        template(is='dom-repeat'
+                 items='{{periods}}'
+                 as='period')
+          paper-item {{period}}
+  script
+    include ccc-voting.js

templates/elements/ccc-voting/ccc-voting.js

@@ -0,0 +1,20 @@
+(function() {
+  'use strict';
+  Polymer({
+    is: 'ccc-voting',
+    properties: {
+      palettes: {
+        type: Object,
+        value: ['rainbow', 'pastell', 'grayscale', 'neon']
+      },
+      shapes: {
+        type: Object,
+        value: ['pyramids', 'lines', 'stripes', 'dots']
+      },
+      periods: {
+        type: Object,
+        value: ['weekend', 'week', 'month']
+      }
+    }
+  });
+})();

templates/elements/elements.jade

@@ -0,0 +1,67 @@
+-
+   var bower = '../bower_components';
+   var styles = '../styles';
+//- Iron elements
+link(rel='import'
+     href='#{bower}/iron-flex-layout/classes/iron-flex-layout.html')
+link(rel='import'
+     href='#{bower}/iron-icons/iron-icons.html')
+link(rel='import'
+     href='#{bower}/iron-pages/iron-pages.html')
+link(rel='import'
+     href='../#{bower}/iron-ajax/iron-ajax.html')
+link(rel='import'
+     href='#{bower}/iron-selector/iron-selector.html')
+
+
+//- Paper elements
+link(rel='import'
+     href='#{bower}/paper-drawer-panel/paper-drawer-panel.html')
+link(rel='import'
+     href='#{bower}/paper-icon-button/paper-icon-button.html')
+link(rel='import'
+     href='#{bower}/paper-input/paper-input-container.html')
+link(rel='import'
+     href='#{bower}/paper-item/paper-item.html')
+link(rel='import'
+     href='#{bower}/paper-material/paper-material.html')
+link(rel='import'
+     href='#{bower}/paper-menu/paper-menu.html')
+link(rel='import'
+     href='#{bower}/paper-scroll-header-panel/paper-scroll-header-panel.html')
+link(rel='import'
+     href='#{bower}/paper-styles/paper-styles-classes.html')
+link(rel='import'
+     href='#{bower}/paper-toast/paper-toast.html')
+link(rel='import'
+     href='#{bower}/paper-toolbar/paper-toolbar.html')
+
+
+//- firebase
+link(rel='import'
+     href='#{bower}/firebase-element/firebase-collection.html')
+
+
+//- Uncomment next block to enable Service Worker Support (2/2)
+//- link(rel='import'
+     href='#{bower}/platinum-sw/platinum-sw-cache.html')
+//- link(rel='import'
+     href='#{bower}/platinum-sw/platinum-sw-register.html')
+
+//- Configure your routes here
+link(rel='import'
+     href='routing.html')
+
+//- styles
+link(rel='import'
+     href='#{styles}/app-theme.html')
+link(rel='import'
+     href='#{styles}/shared-styles.html')
+
+//- Add your elements here
+link(rel='import'
+     href='user-info/user-info.html')
+link(rel='import'
+     href='user-list/user-list.html')
+link(rel='import'
+     href='ccc-voting/ccc-voting.html')

templates/elements/routing.jade

@@ -0,0 +1,3 @@
+script(src='../bower_components/page/page.js')
+script
+  include routing.js

templates/elements/routing.js

@@ -0,0 +1,48 @@
+
+window.addEventListener('WebComponentsReady', () => {
+
+  // We use Page.js for routing. This is a Micro
+  // client-side router inspired by the Express router
+  // More info: https://visionmedia.github.io/page.js/
+  page('/', () => {
+    app.route = 'home';
+    app.scrollPageToTop();
+  });
+
+  page('/dev-team', () => {
+    app.route = 'dev-team';
+    app.scrollPageToTop();
+  });
+
+  page('/users', () => {
+    app.route = 'users';
+    app.scrollPageToTop();
+  });
+
+  page('/users/:name', (data) => {
+    app.route = 'user-info';
+    app.params = data.params;
+    app.scrollPageToTop();
+  });
+
+  page('/contact', () => {
+    app.route = 'contact';
+    app.scrollPageToTop();
+  });
+
+  page('/about', () => {
+    app.route = 'about';
+    app.scrollPageToTop();
+  });
+
+  page('/vote', () => {
+    app.route = 'vote';
+    app.scrollPageToTop();
+  });
+
+  // add #! before urls
+  page({
+    hashbang: true
+  });
+
+});

templates/elements/user-info/user-info.css

@@ -0,0 +1,6 @@
+:host {
+  display: block;
+}
+.avatar {
+  outline: 10px solid pink;
+}

templates/elements/user-info/user-info.jade

@@ -0,0 +1,15 @@
+- var bower = '../../bower_components'
+
+link(rel='import', href='#{bower}/polymer/polymer.html')
+dom-module#user-info(attributes='name')
+  template
+    style
+      include user-info.css
+    div {{name}}
+      p
+        a(href='{{profile}}'
+          target='_blank') Codepen profile
+    img.avatar(src='{{avatar}}'
+               alt='{{name}}')
+  script
+    include user-info.js

templates/elements/user-info/user-info.js

@@ -0,0 +1,21 @@
+(function() {
+  'use strict';
+
+  Polymer({
+    is: 'user-info',
+
+    properties: {
+      profile: {
+        type: String,
+        computed: 'makePath(\'http://codepen.io/\', name)'
+      },
+      avatar: {
+        type: String,
+        computed: 'makePath(\'images/avatars/\', name, \'.jpg\')'
+      }
+    },
+    makePath: (path, str, suffix) => {
+      return [path, str, suffix].join('');
+    }
+  });
+})();

templates/elements/user-list-item/user-list-item.css

@@ -0,0 +1,6 @@
+:host {
+  display: block;
+}
+a {
+  display: block;
+}

templates/elements/user-list-item/user-list-item.jade

@@ -0,0 +1,13 @@
+- var bower = '../../bower_components'
+
+link(rel='import', href='#{bower}/polymer/polymer.html')
+dom-module#user-list-item(attributes='username realname')
+  template
+    style
+      include user-list-item.css
+
+    paper-item.relative
+      a.fit(data-route='user-info'
+            href='{{url}}') {{realname}}
+  script
+    include user-list-item.js

templates/elements/user-list-item/user-list-item.js

@@ -0,0 +1,23 @@
+(function() {
+  'use strict';
+  Polymer({
+    is: 'user-list-item',
+    properties: {
+      username: {
+        type: String,
+        value: 'pixelass'
+      },
+      'realname': {
+        type: String,
+        value: 'Gregor Adams'
+      },
+      url: {
+        type: String,
+        computed: 'userPath(username)'
+      }
+    },
+    userPath: function userPath(username) {
+      return `users/${username}`;
+    }
+  });
+})();

templates/elements/user-list/user-list.jade

@@ -0,0 +1,17 @@
+- var bower = '../../bower_components'
+link(rel="import"
+     href="#{bower}/polymer/polymer.html")
+link(rel="import"
+     href="../user-list-item/user-list-item.html")
+
+dom-module(id="user-list"
+           attributes="users")
+  template
+    paper-menu(class="list"
+               attr-for-selected="data-route"
+               selected="[[route]]")
+      template(is="dom-repeat" items="{{users}}" as="user")
+        user-list-item(username="{{user.username}}"
+                       realname="{{user.realName}}")
+  script
+    include user-list.js

templates/elements/user-list/user-list.js

@@ -0,0 +1,17 @@
+(function() {
+  'use strict';
+  Polymer({
+    is: 'user-list',
+    properties: {
+      users: {
+        type: Object,
+        value: [
+          {
+            'username': 'pixelass',
+            'realName': 'Gregor Adams'
+          }
+        ]
+      }
+    }
+  });
+})();