#264 build process - adds various i18n helpers, html-based templates

content/cn/home.html

@@ -0,0 +1,35 @@
+<!--
+  THIS PAGE IS A PROOF OF CONCEPT
+  ===============================
+
+  i18n teams, please do not replicate it per localization.
+  Eventually, this will be an automatically available page across all i18n.
+ -->
+
+<h1>JavaScript I/O</h1>
+
+<p class="home-slogan">
+  {{hb 'home.slogan'}}
+</p>
+
+<p class="home-description">
+  {{hb 'home.short_description'}}
+</p>
+
+<div class="home-download">
+  <a href="{{project.current_version_downloads.all}}" class="home-logo"><img src="/images/1.0.0.png" alt="io.js"></a>
+  <div class="home-download-details">
+    <p class="home-download-version">
+      <a href="{{project.current_version_downloads.all}}">{{hb 'verbose_version'}}</a>
+    </p>
+    <p class="home-download-list">
+      {{hb 'home.download_links'}}
+    </p>
+    <p>{{link 'pages.changelog'}}</p>
+  </div>
+</div>
+
+<div class="home-secondary-links">
+  <p>{{hb 'home.nightly_releases'}}</p>
+  <p>{{hb 'home.faq_verbose'}}</p>
+</div>

content/cn/template.json

@@ -9,5 +9,21 @@
   "org-link":"GitHub Org",
   "irc-link":"IRC Chat",
   "irc-logs-link":"Logs",
-  "gov-link":"项目管理"
+  "gov-link":"项目管理",
+  "verbose_version": "{{project.current_version}} 版本",
+  "downloads": {
+    "all": "其他"
+  },
+  "home": {
+    "download_links": "下载 {{> current_download_links}} 版本。",
+    "nightly_releases": "{{link '每日构建版本' 'https://iojs.org/download/nightly/'}} 可用于测试。",
+    "short_description": "{{link 'website'}} 是一个衍生自 {{link 'nodejs'}}，并兼容 {{link 'npm'}} 的开发平台。",
+    "slogan": "将 {{link 'pages.es6'}} 带入 Node 社区！"
+  },
+  "links": {
+    "pages": {
+      "changelog": "更新日志",
+      "faq_verbose": "常见问题"
+    }
+  }
 }

content/en/home.html

@@ -0,0 +1,35 @@
+<!--
+  THIS PAGE IS A PROOF OF CONCEPT
+  ===============================
+
+  i18n teams, please do not replicate it per localization.
+  Eventually, this will be an automatically available page across all i18n.
+ -->
+
+<h1>JavaScript I/O</h1>
+
+<p class="home-slogan">
+  {{hb 'home.slogan'}}
+</p>
+
+<p class="home-description">
+  {{hb 'home.short_description'}}
+</p>
+
+<div class="home-download">
+  <a href="{{project.current_version_downloads.all}}" class="home-logo"><img src="/images/1.0.0.png" alt="io.js"></a>
+  <div class="home-download-details">
+    <p class="home-download-version">
+      <a href="{{project.current_version_downloads.all}}">{{hb 'verbose_version'}}</a>
+    </p>
+    <p class="home-download-list">
+      {{hb 'home.download_links'}}
+    </p>
+    <p>{{link 'pages.changelog'}}</p>
+  </div>
+</div>
+
+<div class="home-secondary-links">
+  <p>{{hb 'home.nightly_releases'}}</p>
+  <p>{{hb 'home.faq_verbose'}}</p>
+</div>

content/en/template.json

@@ -17,5 +17,25 @@
     "win64": "Win64",
     "mac": "Mac",
     "all": "Others"
+  },
+  "verbose_version": "Version {{project.current_version}}",
+  "home": {
+    "download_links": "Download for {{> current_download_links}}",
+    "faq_verbose": "{{link 'pages.faq_verbose'}}",
+    "nightly_releases": "{{link 'Nightly releases' 'https://iojs.org/download/nightly/'}} are available for testing.",
+    "short_description": "{{link 'website'}} is an {{link 'npm'}} compatible platform originally based on {{link 'nodejs'}}.",
+    "slogan": "Bringing {{link 'pages.es6'}} to the Node Community!"
+  },
+  "links": {
+    "nodejs": "Node.js™",
+    "npm": "npm",
+    "website": "io.js",
+    "pages": {
+      "changelog": "Changelog",
+      "home": "Home",
+      "es6": "ES6",
+      "faq": "FAQ",
+      "faq_verbose": "Frequenty Asked Questions"
+    }
   }
 }

gulp/config.js

@@ -12,7 +12,7 @@ module.exports = {
   },
   templates: {
     templateSrc: src + '/templates/**/*.html',
-    contentSrc: content + '/**/*.md',
+    contentSrc: content + '/**/*.{html,md}',
     templateJSONsrc: content + '/**/template.json',
     dest: dest
   },

gulp/tasks/templates.js

@@ -1,5 +1,4 @@
 /*
- * 1. because this is a gulp task. duh.
  * 2. to convert markdown to html
  * 3. handlebars is used to convert `{{ }}` placeholders
  *    in markdown, html, to output
@@ -12,14 +11,17 @@
  */
 var fs = require('fs');
 var path = require('path');
-var gulp = require('gulp'); /* 1 */
+var gulp = require('gulp');
 var md = require('markdown-it')({ html: true }); /* 2 */
 var Handlebars = require('handlebars'); /* 3 */
 var buffer = require('vinyl-buffer'); /* 4 */
 var vinylMap = require('vinyl-map'); /* 5 */
 var rename = require('gulp-rename'); /* 6 */
 var utils = require('../util/template-utils.js'); /* 7 */
 
+function traverse(obj, str) {
+  return str.split(".").reduce(function(o, x) { return o[x] }, obj);
+}
 
 /*
   generateContentAndTemplates()
@@ -41,7 +43,7 @@ var utils = require('../util/template-utils.js'); /* 7 */
   Returns: a gulp-friendly pipe task (function)
 */
 function generateContentAndTemplates() {
-  var base, projectJSON, i18nJSON, hbsTemplates;
+  var base, projectJSON, i18nJSON, hbsTemplates, LocalHandlebars;
 
   /*
    * cache variables and lookups used on subsequent runs of the pipe task:
@@ -52,19 +54,93 @@ function generateContentAndTemplates() {
    * 3. `projectJSON` is global, re-used across all languages
    * 4. `i18nJSON` caches the template JSON for each language (avoids duplicated work)
    * 5. `hbsTemplates` caches the handlebars FUNCTION for each template to save overhead
+   * 5. `LocalHandlebars` is a sandboxed version of Handlebars, avoids injecting
+         helpers and partials at a global scale.
    */
   base = path.resolve(__dirname, '..', '..'); /* 1 */
   contentBase = path.resolve(base, 'content'); /* 2 */
   projectJSON = require('../../source/project.js'); /* 3 */
   i18nJSON = {}; /* 4 */
   hbsTemplates = {}; /* 5 */
+  LocalHandlebars = Handlebars.create() /* 6 */
+
+  LocalHandlebars.registerPartial('current_download_links', `{{#project.current_version_downloads}}<a href="{{url}}">{{i18n "downloads" key}}</a>{{/project.current_version_downloads}}`)
+
+  LocalHandlebars.registerHelper('i18n', function() {
+    var scope, i18n_key, env, key, data, lang, result;
+
+    var args = Array.prototype.slice.call(arguments);
+
+    if (args.length === 2) {
+      scope = null;
+      i18n_key = args[0];
+      env = args[1];
+      key = i18n_key;
+    }
+    if (args.length === 3) {
+      scope = args[0];
+      i18n_key = args[1];
+      env = args[2];
+      key = [scope, i18n_key].join('.');
+    }
+
+    data = env.data.root;
+    lang = data.lang;
+    result = traverse(data.i18n, key);
+
+    return new Handlebars.SafeString(result);
+  });
+
+  LocalHandlebars.registerHelper('hb', function() {
+    var scope, i18n_key, env, key, data, lang, result;
+
+    var args = Array.prototype.slice.call(arguments);
+
+    if (args.length === 2) {
+      scope = null;
+      i18n_key = args[0];
+      env = args[1];
+      key = i18n_key;
+    }
+    if (args.length === 3) {
+      scope = args[0];
+      i18n_key = args[1];
+      env = args[2];
+      key = [scope, i18n_key].join('.');
+    }
+
+    data = env.data.root;
+    lang = data.lang;
+    result = traverse(data.i18n, key);
+
+    result = LocalHandlebars.compile(result)(env.data.root);
+
+    return new Handlebars.SafeString(result);
+  });
+
+  LocalHandlebars.registerHelper('link', function(text, url, env) {
+    var key = text;
+
+    if (arguments.length == 2) {
+      env = url;
+      text = traverse(env.data.root.i18n.links, key);
+      url = traverse(env.data.root.project.links, key);
+    }
+    text = Handlebars.Utils.escapeExpression(text);
+    url  = Handlebars.Utils.escapeExpression(url);
+
+    var result = '<a href="' + url + '">' + text + '</a>';
+
+    return new Handlebars.SafeString(result);
+  });
 
   // we returned a wrapped function to help us cache some work (above)
   return function(contentBuffer, file) {
-    var fileName, contentRaw, lang, templateJSON, contentHandlebarsCompiled,
+    var fileName, fileType, contentRaw, lang, templateJSON, contentHandlebarsCompiled,
         contentMarkdownCompiled, template, contentTemplateCompiled;
 
     fileName = path.parse(file).name
+    fileType = path.parse(file).ext === ".html" ? "html" : "markdown"
     contentRaw = contentBuffer.toString();
 
     // determine the language based off of the current path
@@ -96,18 +172,22 @@ function generateContentAndTemplates() {
 
     // initial Handlebars compile, Markdown content, before parsing
     // (otherwise the `{{ }}` can be escaped)
-    contentHandlebarsCompiled = Handlebars.compile(contentRaw)(templateJSON);
+    contentHandlebarsCompiled = LocalHandlebars.compile(contentRaw)(templateJSON);
 
-    // Turn `.md` in to `.html`
-    contentMarkdownCompiled = md.render(contentHandlebarsCompiled)
+    // When required, turn `.md` in to `.html`
+    if (fileType === "markdown") {
+      contentMarkdownCompiled = md.render(contentHandlebarsCompiled);
+    } else {
+      contentMarkdownCompiled = contentHandlebarsCompiled;
+    }
 
     // this is hard-coded right now, but planned to be dynamic:
     template = 'main.html';
 
     // fetch the final template function we need (if not already cached)
     if (hbsTemplates[template] == null) {
       var templateBody =  fs.readFileSync(path.join(base, 'source', 'templates', template), {encoding: 'utf8'});
-      hbsTemplates[template] = Handlebars.compile(templateBody);
+      hbsTemplates[template] = LocalHandlebars.compile(templateBody);
     }
 
     // Adds the inner-content already processed to the templateJSON
@@ -157,7 +237,7 @@ var processMarkdown = function(eventOrStream, filePath) {
 }
 
 gulp.task('templates', function() {
-  var stream = gulp.src('content/**/*.md');
+  var stream = gulp.src('content/**/*.{md,html}');
   return processMarkdown(stream);
 });
 

source/project.js

@@ -33,6 +33,19 @@ project.languages = [
 ]
 */
 
+project.links = {
+  nodejs: 'https://nodejs.org/',
+  npm: 'https://www.npmjs.org/',
+  website: 'https://iojs.org/',
+  pages: {
+    changelog: 'https://github.com/iojs/io.js/blob/v1.x/CHANGELOG.md',
+    home: './index.html',
+    es6: './es6.html',
+    faq: './faq.html',
+    faq_verbose: './faq.html'
+  }
+};
+
 var baseURL = `https://iojs.org/dist`;
 project.current_version_downloads = [
   {key: 'linux', url: `${baseURL}/v${project.current_version}/iojs-v${project.current_version}-linux-x64.tar.xz`},

source/styles/home.styl

@@ -0,0 +1,57 @@
+.home-slogan
+  text-align center
+
+.home-description
+  text-align center
+  margin-bottom 40px
+
+.home-download
+  background: #eee
+  display: flex
+  justify-content space-between
+  align-items center
+
+  a
+    text-decoration none
+
+.home-logo
+  padding 20px 40px 20px 20px
+  img
+    height 120px
+
+.home-download-details
+  flex 1
+  p
+    margin 0
+    padding 0
+
+  .home-download-version
+    display block
+    font-size 1.4rem
+    font-weight 700
+    color black
+    border-radius 0 4px 0 0
+    margin-bottom 20px
+
+  .home-download-list
+    color rgba(0, 0, 0, 0.5)
+    font-size 0.9rem
+    padding-top 0
+    padding-bottom 0
+    height 28px
+    max-height 28px
+
+    a:after
+      content ', '
+
+    a:nth-last-child(2):after
+      content ' & '
+      color rgba(0, 0, 0, 0.5)
+
+    a:last-child:after
+      content ''
+
+.home-secondary-links
+  margin-top 40px
+  p
+    text-align center