use jade templates

Makefile

@@ -0,0 +1,7 @@
+MASTER_HASH := $(shell git log -n 1 --pretty=format:'%h')
+
+upload-gh-pages:
+	URL_PREFIX=website gulp clean build
+	git add public && git commit -m "build from $(MASTER_HASH)"
+	git push origin `git subtree split --prefix public master`:gh-pages --force || git reset master~1
+	git reset master~1

README.md

@@ -35,6 +35,12 @@ Runs a local HTTP server on port 4657 with live-reload, which will update
 your browser immediately with content or style changes. Generated assets
 are provided to the [./public]() directory for publishing.
 
+### Deploy to gh-pages
+
+```
+make upload-gh-pages
+```
+
 ## Deployment
 
 The website is currently hosted on a (sponsored) 3rd party provider with a deployment

gulp/config.js

@@ -2,6 +2,11 @@ var dest = './public';
 var src = './source';
 var content = './content';
 
+var urlPrefix = '';
+if (process.env.URL_PREFIX && process.env.URL_PREFIX !== '') {
+  urlPrefix = '/' + process.env.URL_PREFIX;
+}
+
 module.exports = {
   stylus: {
     src: src + '/styles/**/*.styl',
@@ -11,6 +16,7 @@ module.exports = {
     }
   },
   templates: {
+    urlPrefix: urlPrefix, // need this, if the website it not located at the root of a domain
     templateSrc: src + '/templates/**/*.html',
     contentSrc: content + '/**/*.md',
     templateJSONsrc: content + '/**/template.json',

gulp/tasks/templates.js

@@ -1,76 +1,44 @@
 var _ = require('lodash'); // to handle collections gracefully
 var config = require('../config').templates; // pull in the pathing config file
 var fs = require('fs'); // used to work with substack's module
+var path = require('path'); // use for get dirname of a path
 var glob = require('glob'); // to dynamically read in all content md files
 var gulp = require('gulp'); // because this is a gulp task. duh.
-var HTMLtemplate = require('html-template'); // substack's html template implementation
+var jade = require('gulp-jade'); // to render jade to html.
+var rename = require('gulp-rename'); // to use different file name between input and output
 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 moment = require('moment-timezone');
-var exec = require('child_process').exec
 var utils = require('../util/template-utils.js');
-var path = require('path');
 
 gulp.task('templates', function() {
-  var separator = '<SEPARATOR>';
-  var cmd = 'git log --no-color --pretty=format:\'[ "%H", "%s", "%cr", "%an" ],\' --abbrev-commit';
-  cmd = cmd.replace(/"/g, separator);
-  _command(cmd, function(str) {
-    str = str.substr(0, str.length - 1);
-    str = str.replace(/"/g, '\\"');
-    str = str.replace(/\\\./g, '\\\\.');
-    str = str.replace(new RegExp(separator, 'g'), '"');
-    var commits = JSON.parse('[' + str + ']');
-    var thisCommit = commits[0];
-    var commitSha = thisCommit[0];
-    var commitMsg = thisCommit[1];
-    var commitUser = thisCommit[3];
-    var buildTime = moment().tz('UTC').format('YYYY-MM-DD HH:mm:ss') + ' UTC'
-    var contentFiles = glob.sync(config.contentSrc); // read in all content files in the repo
-    var languages = _.uniq(_.map(contentFiles, function(str) { // extrapolate the languages from the content filepaths
-      return str.split('/')[2];
-    }));
-    _.forEach(languages, function(lang) { // loop through languages to make separate folder outputs
-      var templateJSON = utils.loadTemplateJSON(lang); // read in the template JSON file
-      var markdownFilesInThisLang = utils.loadMdFiles(contentFiles, lang); // load all the md files
+  var contentFiles = glob.sync(config.contentSrc); // read in all content files in the repo
+
+  var languages = _.uniq(_.map(contentFiles, function(str) { // extrapolate the languages from the content filepaths
+    return str.split('/')[2];
+  }));
 
+  _.forEach(languages, function(lang) { // loop through languages to make separate folder outputs
+    var templateJSON = utils.loadTemplateJSON(lang); // read in the template JSON file
+    var markdownFilesInThisLang = utils.loadMdFiles(contentFiles, lang); // load all the md files
+    utils.addBuildMeta(templateJSON, function() {
       _.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
-        var pageTitle = thisFileJSON['browser-title'];
-        thisFileJSON = _.omit(thisFileJSON, 'browser-title');
-        var finalJSON = {};
-        _.forEach(thisFileJSON, function(value, key) {
-          finalJSON['[i18n-' + key + ']'] = value;
-        })
-        finalJSON['[i18n-content]'] = html; // Attach md2html string to the interpolation object
-        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(replaceStream('Build Time:', 'Build Time: ' + buildTime))
-          .pipe(replaceStream('Commit Sha:', 'Commit Sha: ' + commitSha))
-          .pipe(replaceStream('Commit Msg:', 'Commit Msg: ' + commitMsg))
-          .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(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.
-      });
+
+        templateJSON.page = file.filename; // extend locals for special styles on each page
+        templateJSON['page-stylesheet'] = file.filename; // for special css files for the page
+        templateJSON['i18n-content'] = html; // attach the rendered markdown into the body
+
+        var filepath = __dirname.split('gulp/tasks')[0] + 'source/templates/main.jade'; // 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('/')); // consider 
+
+        gulp.src(filepath) // read jade template
+        .pipe(jade({ // render template while passing locals
+          locals: _.cloneDeep(templateJSON)
+        }))
+        .pipe(rename(file.filename + '.html')) // rename output file, using md filename 
+        .pipe(gulp.dest(destinationDirectory)); // dump it in the appropriate language subfolder
+
+       });
     });
   });
-});
-
-function _command(cmd, cb) {
-  exec(cmd, function(err, stdout, stderr) {
-    cb(stdout.split('\n').join(''))
-  })
-}
+});

gulp/util/template-utils.js

@@ -1,17 +1,24 @@
 var _ = require('lodash');
+var exec = require('child_process').exec;
+var moment = require('moment-timezone');
+var config = require('../config').templates; // pull in the pathing config file
 
 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
+// load template.json for 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);
+  finalJSON.__translated = {}; // meta information if a key was translated in the given lang
   _.forEach(templateJSON, function(value, key) {
     finalJSON[key] = value;
+    finalJSON.__translated[key] = true;
   });
+  finalJSON.urlPrefix = config.urlPrefix;
+  finalJSON.lang = lang; // extend to provide html lang attribute into the template
+
   return finalJSON;
 };
 
@@ -20,9 +27,12 @@ module.exports.loadTemplateJSON = function(lang) {
 // - the origin srcPath
 // - the filename without extension
 // - the filepath as an array, reduced by the starting './content' directory
-module.exports.loadMdFiles = function(contentFiles, lang) {
+module.exports.loadMdFiles = function(contentFiles, lang, prefix) {
+  if (prefix == null) {
+    prefix = '';
+  }
   var templateFiles = _.where(contentFiles, function(str) { // return list of content files in this language alone
-    return str.indexOf('./' + CONTENT_DIRECTORY + '/' + lang) > -1;
+    return str.indexOf('./' + CONTENT_DIRECTORY + '/' + lang + '/' + prefix) > -1;
   });
 
   var templateFilesInThisLang = _.map(templateFiles, function(str) { // expand the file list to include the extrapolated filename
@@ -39,4 +49,33 @@ module.exports.loadMdFiles = function(contentFiles, lang) {
     return obj;
   });
   return templateFilesInThisLang;
-};
+};
+
+module.exports.addBuildMeta = function(templateJSON, cb) {
+  var separator = '<SEPARATOR>';
+  var cmd = 'git log --no-color --pretty=format:\'[ "%H", "%s", "%cr", "%an" ],\' --abbrev-commit';
+  cmd = cmd.replace(/"/g, separator);
+  _command(cmd, function(str) {
+    str = str.substr(0, str.length - 1);
+    str = str.replace(/"/g, '\\"');
+    str = str.replace(/\\\./g, '\\\\.');
+    str = str.replace(new RegExp(separator, 'g'), '"');
+    var commits = JSON.parse('[' + str + ']');
+    var lastCommit = commits[0];
+    templateJSON.buildTime = moment().tz('UTC').format('YYYY-MM-DD HH:mm:ss') + ' UTC';
+    templateJSON.commitSha = lastCommit[0];
+    templateJSON.commitMsg = lastCommit[1];
+    cb();
+ });
+};
+
+function _command(cmd, cb) {
+  exec(cmd, function(err, stdout, stderr) {
+    if (err) {
+      console.log(err);
+      console.log(stderr);
+      process.exit(1);
+    }
+    cb(stdout.split('\n').join(''));
+  });
+}

package.json

@@ -41,6 +41,7 @@
   "dependencies": {
     "autoprefixer-core": "^5.1.5",
     "browserify": "^8.1.1",
+    "cheerio": "^0.18.0",
     "csswring": "^3.0.0",
     "del": "^1.1.1",
     "express": "^4.11.2",
@@ -51,17 +52,16 @@
     "gulp-filesize": "0.0.6",
     "gulp-htmlmin": "^1.0.0",
     "gulp-imagemin": "^2.1.0",
+    "gulp-jade": "^0.11.0",
     "gulp-less": "^2.0.1",
     "gulp-markdown": "^1.0.0",
     "gulp-postcss": "^4.0.2",
+    "gulp-rename": "^1.2.0",
     "gulp-stylus": "^2.0.0",
-    "html-template": "^1.2.1",
     "lodash": "^2.4.1",
     "markdown-it": "^3.0.4",
     "moment-timezone": "^0.3.0",
-    "replacestream": "^2.0.0",
     "require-dir": "^0.1.0",
-    "run-sequence": "^1.0.2",
-    "vinyl-source-stream": "^1.0.0"
+    "run-sequence": "^1.0.2"
   }
 }

public/cn/es6.html

@@ -133,13 +133,3 @@ <h2>如何查阅某一版本的 io.js 所集成的 V8 的版本？</h2>
 </body>
 
 </html>
-<!--
-=========== BUILD INFORMATION ===========
-
-Build Time: 2015-02-14 01:42:17 UTC
-
-Commit Sha: b5f80bbd439888a9784dbcb54d1a169818450c98
-Commit Msg: Removed defunct dependency
-
-=========== END BUILD INFORMATION ===========
--->

public/cn/faq.html

@@ -64,13 +64,3 @@ <h2>什么是开放的管理模式？</h2>
 </body>
 
 </html>
-<!--
-=========== BUILD INFORMATION ===========
-
-Build Time: 2015-02-14 01:42:17 UTC
-
-Commit Sha: b5f80bbd439888a9784dbcb54d1a169818450c98
-Commit Msg: Removed defunct dependency
-
-=========== END BUILD INFORMATION ===========
--->

public/cn/index.html

@@ -60,13 +60,3 @@
 </body>
 
 </html>
-<!--
-=========== BUILD INFORMATION ===========
-
-Build Time: 2015-02-14 01:42:17 UTC
-
-Commit Sha: b5f80bbd439888a9784dbcb54d1a169818450c98
-Commit Msg: Removed defunct dependency
-
-=========== END BUILD INFORMATION ===========
--->

public/cs/es6.html

@@ -133,13 +133,3 @@ <h2>How do I find which version of V8 ships with a particular version of io.js?<
 </body>
 
 </html>
-<!--
-=========== BUILD INFORMATION ===========
-
-Build Time: 2015-02-14 01:42:17 UTC
-
-Commit Sha: b5f80bbd439888a9784dbcb54d1a169818450c98
-Commit Msg: Removed defunct dependency
-
-=========== END BUILD INFORMATION ===========
--->

public/cs/faq.html

@@ -67,13 +67,3 @@ <h2>What is open source governance?</h2>
 </body>
 
 </html>
-<!--
-=========== BUILD INFORMATION ===========
-
-Build Time: 2015-02-14 01:42:17 UTC
-
-Commit Sha: b5f80bbd439888a9784dbcb54d1a169818450c98
-Commit Msg: Removed defunct dependency
-
-=========== END BUILD INFORMATION ===========
--->

public/cs/index.html

@@ -61,13 +61,3 @@
 </body>
 
 </html>
-<!--
-=========== BUILD INFORMATION ===========
-
-Build Time: 2015-02-14 01:42:17 UTC
-
-Commit Sha: b5f80bbd439888a9784dbcb54d1a169818450c98
-Commit Msg: Removed defunct dependency
-
-=========== END BUILD INFORMATION ===========
--->

public/da/es6.html

@@ -133,13 +133,3 @@ <h2>How do I find which version of V8 ships with a particular version of io.js?<
 </body>
 
 </html>
-<!--
-=========== BUILD INFORMATION ===========
-
-Build Time: 2015-02-14 01:42:17 UTC
-
-Commit Sha: b5f80bbd439888a9784dbcb54d1a169818450c98
-Commit Msg: Removed defunct dependency
-
-=========== END BUILD INFORMATION ===========
--->

public/da/faq.html

@@ -67,13 +67,3 @@ <h2>What is open source governance?</h2>
 </body>
 
 </html>
-<!--
-=========== BUILD INFORMATION ===========
-
-Build Time: 2015-02-14 01:42:17 UTC
-
-Commit Sha: b5f80bbd439888a9784dbcb54d1a169818450c98
-Commit Msg: Removed defunct dependency
-
-=========== END BUILD INFORMATION ===========
--->

public/da/index.html

@@ -61,13 +61,3 @@
 </body>
 
 </html>
-<!--
-=========== BUILD INFORMATION ===========
-
-Build Time: 2015-02-14 01:42:17 UTC
-
-Commit Sha: b5f80bbd439888a9784dbcb54d1a169818450c98
-Commit Msg: Removed defunct dependency
-
-=========== END BUILD INFORMATION ===========
--->

public/de/es6.html

@@ -133,13 +133,3 @@ <h2>How do I find which version of V8 ships with a particular version of io.js?<
 </body>
 
 </html>
-<!--
-=========== BUILD INFORMATION ===========
-
-Build Time: 2015-02-14 01:42:17 UTC
-
-Commit Sha: b5f80bbd439888a9784dbcb54d1a169818450c98
-Commit Msg: Removed defunct dependency
-
-=========== END BUILD INFORMATION ===========
--->