Big refactor / cleanup to support multiple pages on the website

public/theme.css

@@ -23,6 +23,10 @@ header {
   padding: 1em 0;
 }
 
+header a {
+  text-decoration: none;
+}
+
 h1 {
   color: #33609c;
   display: inline-block;

src/index.js

@@ -1,10 +1,10 @@
 var fs          = require('fs-extra');
 var path        = require('path');
 var async       = require('async');
-var metadata    = require('./metadata');
-var website     = require('./website');
-var thumbs      = require('./thumbs');
-var make        = require('./make');
+var make        = require('./utils/make');
+var metadata    = require('./input/metadata');
+var thumbs      = require('./output-media/thumbs');
+var website     = require('./output-website/generator');
 
 exports.build = function(opts) {
 

src/input/metadata.js

@@ -4,8 +4,8 @@ var path        = require('path');
 var glob        = require('glob');
 var async       = require('async');
 var pad         = require('pad');
+var progress    = require('../utils/progress');
 var exif        = require('./exif');
-var progress    = require('./progress');
 
 exports.update = function(opts, callback) {
 

src/output-website/generator.js

@@ -1,32 +1,41 @@
+var _           = require('lodash');
 var fs          = require('fs-extra');
 var path        = require('path');
 var async       = require('async');
 var pad         = require('pad');
-var viewModel   = require('./view-model');
-var render      = require('./render');
-var files       = require('./files');
-
+var files       = require('../utils/files');
+var template    = require('./template');
+var model       = require('./model');
+var pages       = require('./pages');
 
 exports.build = function(metadata, opts, callback) {
 
-  function website(callback) {
+  var common = pages.common(opts);
 
-    var galleries = viewModel.build(metadata, opts);
+  function render(filename, templateName, data) {
+    var fullPath = path.join(opts.output, filename);
+    var pageData = _.extend(data, common);
+    var contents = template.render(templateName, pageData);
+    return function(next) {
+      fs.writeFile(fullPath, contents, next);
+    };
+  }
 
-    var style = opts.css ? path.basename(opts.css) : null;
+  function website(callback) {
+    var structure = model.create(metadata, opts);
+    var homepage  = pages.homepage(structure);
 
-    var rendered = render.gallery(galleries, galleries[0], opts.title, style, opts.googleAnalytics);
-    var outputPath = path.join(opts.output, 'index.html');
-    fs.writeFileSync(outputPath, rendered);
+    var items = [
+      render('index.html', 'homepage', homepage)
+    ];
 
-    galleries.forEach(function(folder) {
-      var rendered = render.gallery(galleries, folder, opts.title, style, opts.googleAnalytics);
-      var outputPath = path.join(opts.output, folder.url);
-      fs.writeFileSync(outputPath, rendered);
+    structure.forEach(function(folder, index) {
+      var gallery = pages.gallery(structure, index);
+      var page = render(folder.name + '.html', 'gallery', gallery);
+      items.push(page);
     });
 
-    callback();
-
+    async.parallel(items, callback);
   }
 
   function support(callback) {
@@ -50,7 +59,6 @@ exports.build = function(metadata, opts, callback) {
     support,
     customStyle
   ], function(err) {
-    process.stdout
     console.log('[===================] done');
     callback(err);
   });

src/output-website/model.js

@@ -3,7 +3,12 @@ var fs     = require('fs');
 var path   = require('path');
 var glob   = require('glob');
 
-exports.build = function(metadata, opts) {
+/*
+  In-memory structure of the galleries organised in folders
+  with relative links to the media, thumbnails, etc...
+*/
+
+exports.create = function(metadata, opts) {
 
   function fileInfo(data, file) {
     return {

src/output-website/pages.js

@@ -0,0 +1,40 @@
+var _ = require('lodash');
+var path = require('path');
+
+/*
+  Common page data shared by all models
+*/
+exports.common = function(opts) {
+  var titleParts = opts.title.split(' ');
+  return {
+    css: opts.css ? path.basename(opts.css) : null,
+    title: titleParts[0],
+    subtitle: titleParts.slice(1).join(' '),
+    googleAnalytics: opts.googleAnalytics
+  };
+
+};
+
+/*
+  Homepage data
+*/
+exports.homepage = function(structure) {
+  return {};
+};
+
+/*
+  Single gallery page
+*/
+exports.gallery = function(structure, index) {
+  var links = structure.map(function(folder, i) {
+    return {
+      name: folder.name,
+      url: folder.name + '.html',
+      active: (i === index)
+    };
+  });
+  return {
+    links: links,
+    gallery: structure[index]
+  };
+};

src/output-website/template.js

@@ -0,0 +1,19 @@
+var fs          = require('fs');
+var path        = require('path');
+var handlebars  = require('handlebars');
+
+function compileTemplate(hbsFile) {
+  var src = fs.readFileSync(path.join(__dirname, '..', '..', 'templates', hbsFile));
+  return handlebars.compile(src.toString());
+}
+
+handlebars.registerPartial('analytics', compileTemplate('analytics.hbs'));
+
+var templates = {
+  'homepage': compileTemplate('homepage.hbs'),
+  'gallery':  compileTemplate('gallery.hbs')
+};
+
+exports.render = function(template, data) {
+  return templates[template](data);
+};

src/render.js

@@ -1,33 +0,0 @@
-var fs          = require('fs');
-var path        = require('path');
-var handlebars  = require('handlebars');
-
-function compileTemplate(hbsFile) {
-  var src = fs.readFileSync(path.join(__dirname, '..', 'templates', hbsFile));
-  return handlebars.compile(src.toString());
-}
-
-var galleryTemplate = compileTemplate('gallery.hbs');
-
-exports.gallery = function(list, active, title, css, googleAnalytics) {
-
-  var links = list.map(function(item) {
-    return {
-      name: item.name,
-      url: item.name + '.html',
-      active: (item === active)
-    };
-  });
-
-  var titleParts = title.split(' ');
-
-  return galleryTemplate({
-    css: css,
-    links: links,
-    gallery: active,
-    title: titleParts[0],
-    subtitle: titleParts.slice(1).join(' '),
-    googleAnalytics: googleAnalytics
-  });
-
-};

templates/analytics.hbs

@@ -0,0 +1,12 @@
+{{#if googleAnalytics}}
+
+<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', '{{googleAnalytics}}', 'auto');
+  ga('send', 'pageview');
+</script>
+
+{{/if}}

templates/gallery.hbs

@@ -18,8 +18,10 @@
   <body>
 
     <header>
-      <h1>{{title}}</h1>
-      <h2>{{subtitle}}</h2>
+      <a href="index.html">
+        <h1>{{title}}</h1>
+        <h2>{{subtitle}}</h2>
+      </a>
     </header>
 
     <nav>
@@ -90,16 +92,7 @@
       };
     </script>
 
-    {{#if googleAnalytics}}
-    <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', '{{googleAnalytics}}', 'auto');
-      ga('send', 'pageview');
-    </script>
-    {{/if}}
+    {{> analytics}}
 
   </body>
 

templates/homepage.hbs

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+
+  <head>
+      <meta charset="utf-8" />
+      <meta name="viewport" content="width=device-width, user-scalable=no" />
+      <title>{{gallery.name}}</title>
+      <link rel="stylesheet" href="public/reset.css" />
+      <link rel="stylesheet" href="public/theme.css" />
+      {{#if css}}
+        <link rel="stylesheet" href="public/{{css}}" />
+      {{/if}}
+  </head>
+
+  <body>
+
+    <header>
+      <h1>{{title}}</h1>
+      <h2>{{subtitle}}</h2>
+    </header>
+
+    <nav>
+      <ul>
+        {{#each gallery}}
+        <li>
+          <a href="{{name}}.html">{{name}}</a>
+          <div>{{media.length}} items</div>
+        </li>
+        {{/each}}
+      </ul>
+    </nav>
+
+    {{> analytics}}
+
+  </body>
+
+</html>