Merge pull request #187 from timaschew/refactor-gulp-templates

improve gulp template task, provide support for subdirectories

gulp/tasks/templates.js

@@ -7,6 +7,8 @@ var HTMLtemplate = require('html-template'); // substack's html template impleme
 var md = require('markdown-it')(); // to convert markdown to html
 var source = require('vinyl-source-stream'); // used to convert substack's readStream to vinylStream
 var replaceStream = require('replacestream'); // used to add an element to the html: making sure each page has it's own class if needed in css
+var utils = require('../util/template-utils.js');
+var path = require('path');
 
 gulp.task('templates', function() {
   var contentFiles = glob.sync(config.contentSrc); // read in all content files in the repo
@@ -16,21 +18,10 @@ gulp.task('templates', function() {
   }));
 
   _.forEach(languages, function(lang) { // loop through languages to make separate folder outputs
-    var templateJSON = require('../../content/' + lang + '/template.json'); // read in the template JSON file
+    var templateJSON = utils.loadTemplateJSON(lang); // read in the template JSON file
+    var markdownFilesInThisLang = utils.loadMdFiles(contentFiles, lang); // load all the md files
 
-    var templateFiles = _.where(contentFiles, function(str) { // return list of content files in this language alone
-      return str.indexOf('./content/' + lang) > -1;
-    });
-
-    templateFilesInThisLang = _.map(templateFiles, function(str) { // expand the file list to include the extrapolated filename
-      var obj = {};
-      obj.srcPath = str;
-      obj.filename = str.split('/');
-      obj.filename = obj.filename[obj.filename.length - 1].split('.md')[0];
-      return obj;
-    });
-
-    _.forEach(templateFilesInThisLang, function(file) { // iterate over the md files present in this language to apply the template to them
+    _.forEach(markdownFilesInThisLang, function(file) { // iterate over the md files present in this language to apply the template to them
       var markdown = String(fs.readFileSync(file.srcPath)); // read in the md file, convert buffer to string
       var html = md.render(markdown); // convert md string to html string
       var thisFileJSON = _.cloneDeep(templateJSON); // clone in the template JSON object
@@ -44,15 +35,16 @@ gulp.task('templates', function() {
       var htmlObj = HTMLtemplate(); // finally using that holder for the template stream
       i18nObj = htmlObj.template('i18n',{include:false}); // same
       var filepath = __dirname.split('gulp/tasks')[0] + 'source/templates/main.html'; // get the main template file location. There can be multiple, this is just a proof of concept
+      var destinationDirectory = path.dirname('public/' + file.filepathArray.join('/'));
       var fileStream = fs.createReadStream(filepath) // pulling this code from substack's example on html-template
         .pipe(replaceStream('<title i18n-title>io.js - JavaScript I/O</title>','<title i18n-title>'+pageTitle+'</title>'))
         .pipe(replaceStream('markdown-page=""', 'markdown-page="'+file.filename+'"')) // add css-triggerable attribute to body
         .pipe(replaceStream('[page-stylesheet]',file.filename)) // require in specific stylesheet
         .pipe(htmlObj)
         .pipe(source(file.filename + '.html')) // converting the readStream to a vinyl stream so gulp can write it back to the disk
-        .pipe(gulp.dest('public/' + lang + '/')); // dump it in the appropriate language subfolder
+        .pipe(gulp.dest(destinationDirectory)); // dump it in the appropriate language subfolder
       i18nObj.write(finalJSON); // write the interpolation JSON to the template
       i18nObj.end(); // saving? this is taken from substack too.
     });
   });
-});
+});

gulp/util/template-utils.js

@@ -0,0 +1,42 @@
+var _ = require('lodash');
+
+var DEFAULT_LANG = 'en';
+var CONTENT_DIRECTORY = 'content';
+
+// load template.json for given language, but use default language as fallback
+// for properties which are not present in the given language
+module.exports.loadTemplateJSON = function(lang) {
+  var defaultJSON = require('../../' + CONTENT_DIRECTORY + '/' + DEFAULT_LANG + '/template.json'); 
+  var templateJSON = require('../../' + CONTENT_DIRECTORY + '/' + lang + '/template.json');
+  var finalJSON = _.cloneDeep(defaultJSON);
+  _.forEach(templateJSON, function(value, key) {
+    finalJSON[key] = value;
+  });
+  return finalJSON;
+};
+
+// load all the files for a given language
+// return an object with
+// - the origin srcPath
+// - the filename without extension
+// - the filepath as an array, reduced by the starting './content' directory
+module.exports.loadMdFiles = function(contentFiles, lang) {
+  var templateFiles = _.where(contentFiles, function(str) { // return list of content files in this language alone
+    return str.indexOf('./' + CONTENT_DIRECTORY + '/' + lang) > -1;
+  });
+
+  var templateFilesInThisLang = _.map(templateFiles, function(str) { // expand the file list to include the extrapolated filename
+    var obj = {};
+    obj.srcPath = str;
+    obj.filepathArray = str.split('/');
+    obj.filepathArray = _.filter(obj.filepathArray, function(pathPart) {
+      if (pathPart !== '.' && pathPart !== 'content') {
+        return true;
+      }
+    });
+    obj.filename = obj.filepathArray[obj.filepathArray.length-1];
+    obj.filename = obj.filename.split('.md')[0];
+    return obj;
+  });
+  return templateFilesInThisLang;
+};