Fixing up sharing of the code between layouts

Author: Matt Gaunt

gulp-tasks/service-worker.js

@@ -25,8 +25,6 @@ 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/layouts/**/*.*',
-    ['service-worker']);
   gulp.watch(GLOBAL.config.src + '/../server/views/**/*.*',
     ['service-worker']);
 });

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/layouts/app-shell.handlebars renamed to server/views/layouts/app-shell.handlebars

@@ -110,39 +110,7 @@ limitations under the License.
     </svg>
   </div>
 
-  {{#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}}
+  {{> async-css }}
 
   {{#each remoteScripts}}
   <script src="{{this}}" async></script>

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

@@ -61,39 +61,7 @@ limitations under the License.
     </div>
   </section>
 
-  {{#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}}
+  {{> async-css }}
 
   {{#each remoteScripts}}
   <script src="{{this}}" async></script>

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}}