rebasing

Author: Matt Gaunt

gulp-tasks/service-worker.js

@@ -25,19 +25,30 @@ var packageName = JSON.parse(fs.readFileSync('./package.json', 'utf8')).name;
 
 gulp.task('service-worker:watch', function(cb) {
   gulp.watch(GLOBAL.config.src + '/**/*.*', ['service-worker']);
+  gulp.watch(GLOBAL.config.src + '/../server/views/**/*.*',
+    ['service-worker']);
 });
 
 gulp.task('service-worker', function(cb) {
   swPrecache.write(path.join(GLOBAL.config.dest, 'sw.js'), {
     staticFileGlobs: [
       GLOBAL.config.dest + '/**/*.{js,html,css,png,jpg,jpeg,gif,svg}',
-      GLOBAL.config.dest + '/manifest.json',
+      GLOBAL.config.dest + '/manifest.json'
     ],
     dynamicUrlToDependencies: {
-      '/app-shell': ['server/layouts/app-shell.handlebars'],
-      '/partials/': ['server/layouts/partial.handlebars', 'server/views/index.handlebars'],
-      '/partials/url-1': ['server/layouts/partial.handlebars', 'server/views/url-1.handlebars'],
-      '/partials/url-2': ['server/layouts/partial.handlebars', 'server/views/url-2.handlebars'],
+      '/app-shell': ['server/views/layouts/app-shell.handlebars'],
+      '/partials/': [
+        'server/views/layouts/partial.handlebars',
+        'server/views/index.handlebars'
+      ],
+      '/partials/url-1': [
+        'server/views/layouts/partial.handlebars',
+        'server/views/url-1.handlebars'
+      ],
+      '/partials/url-2': [
+        'server/views/layouts/partial.handlebars',
+        'server/views/url-2.handlebars'
+      ]
     },
     stripPrefix: GLOBAL.config.dest,
     navigateFallback: '/app-shell',

server/controllers/server-controller.js

@@ -20,7 +20,8 @@ ServerController.prototype.setUpServer = function(app) {
   app.set('views', path.join(__dirname, '/../views'));
   app.engine('handlebars', exphbs({
     defaultLayout: 'default',
-    layoutsDir: path.join(__dirname, '/../layouts')
+    layoutsDir: path.join(__dirname, '/../views/layouts'),
+    partialsDir: path.join(__dirname, '/../views/partials'),
   }));
   app.set('view engine', 'handlebars');
 

server/models/path-config.js

@@ -5,21 +5,29 @@ var pathConfigs = {
   '/': {
     view: 'index',
     inlineStyles: getFileContents(['/styles/core.css']),
+    remoteStyles: ['https://fonts.googleapis.com/css?family=Roboto:' +
+      '400,300,700,500,400italic'],
     remoteScripts: ['/scripts/static-page.js']
   },
   '/url-1': {
     view: 'url-1',
     inlineStyles: getFileContents(['/styles/core.css']),
+    remoteStyles: ['https://fonts.googleapis.com/css?family=Roboto:' +
+      '400,300,700,500,400italic'],
     remoteScripts: ['/scripts/static-page.js']
   },
   '/url-2': {
     view: 'url-2',
     inlineStyles: getFileContents(['/styles/core.css']),
+    remoteStyles: ['https://fonts.googleapis.com/css?family=Roboto:' +
+      '400,300,700,500,400italic'],
     remoteScripts: ['/scripts/static-page.js']
   },
   '/app-shell': {
     view: '',
     inlineStyles: getFileContents(['/styles/core.css']),
+    remoteStyles: ['https://fonts.googleapis.com/css?family=Roboto:' +
+      '400,300,700,500,400italic'],
     remoteScripts: ['/scripts/core.js']
   }
 };

server/layouts/app-shell.handlebars renamed to server/views/layouts/app-shell.handlebars

@@ -112,6 +112,8 @@ limitations under the License.
     </svg>
   </div>
 
+  {{> async-css }}
+
   {{#each remoteScripts}}
   <script src="{{this}}" async></script>
   {{~/each}}

server/layouts/default.handlebars renamed to server/views/layouts/default.handlebars

@@ -63,6 +63,8 @@ limitations under the License.
 
   <aside class="toast-view js-toast-view"></aside>
 
+  {{> async-css }}
+
   {{#each remoteScripts}}
   <script src="{{this}}" async></script>
   {{~/each}}

server/layouts/partial.handlebars renamed to server/views/layouts/partial.handlebars

@@ -0,0 +1,33 @@
+{{#if remoteStyles}}
+<script>
+  var remoteStyles = [
+    {{#each remoteStyles}}
+    '{{this}}',
+    {{~/each}}
+  ];
+
+  // Asynchronously load CSS with a Request Animation Frame
+  // For older browser support see this for a simple shim
+  // http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
+  window.requestAnimationFrame(function() {
+    var elementToInsertLinkBefore =
+      document.getElementsByTagName('script')[0];
+    for (var i = 0; i < remoteStyles.length; i++) {
+      var linkElement = document.createElement('link');
+      linkElement.rel = 'stylesheet';
+      linkElement.media = 'all';
+      linkElement.href = remoteStyles[i];
+
+      elementToInsertLinkBefore.parentNode.insertBefore(linkElement,
+        elementToInsertLinkBefore);
+    }
+  });
+</script>
+
+<!-- In case the browser has JS disabled -->
+<noscript>
+  {{#each remoteStyles}}
+  <link href="{{this}}" rel="stylesheet" property="stylesheet" media="all">
+  {{~/each}}
+</noscript>
+{{~/if}}

server/views/partials/async-css.handlebars

@@ -24,8 +24,10 @@ html, body {
   margin: 0;
   height: 100%;
   width: 100%;
-  font-family: 'Roboto';
+  font-family: 'Helvetica', 'Verdana', sans-serif;
   font-weight: 400;
+  // Not implemented yet but is a nice solution for async loading fonts
+  font-display: optional;
   color: #444;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -59,6 +61,10 @@ body:after {
   transition: opacity 0.333s cubic-bezier(0,0,0.21,1) 0.4s;
 }
 
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Roboto', 'Helvetica', 'Verdana', sans-serif;
+}
+
 .app-deeplink:after {
   opacity: 1;
   pointer-events: auto;