Templating / i18n working

.gitignore

@@ -1 +1,2 @@
 node_modules
+npm-debug.log

content/en/template.json

@@ -0,0 +1,4 @@
+{
+  "[i18n-button-one]":"Press Me!",
+  "[i18n-button-two]":"Don't press me!"
+}

content/en/test.md

@@ -0,0 +1,7 @@
+# This is a test
+*a real one!*
+- beep
+- boop
+- bop
+
+**test**

content/en/test2.md

@@ -0,0 +1,4 @@
+# this is another test
+## a more better test
+### beep
+#### boop

content/es/template.json

@@ -0,0 +1,4 @@
+{
+  "[i18n-button-one]":"Prensa mí!",
+  "[i18n-button-two]":"No me presione!"
+}

gulp/config.js

@@ -11,8 +11,9 @@ module.exports = {
     }
   },
   templates: {
-    src: src + "/templates/**/*.md",
-    content: content,
+    templateSrc: src + "/templates/**/*.html",
+    contentSrc: content + "/**/*.md",
+    templateJSONsrc: content + "/**/template.json",
     dest: dest
   },
   images: {

gulp/tasks/templates.js

@@ -1,10 +1,53 @@
-var gulp     = require('gulp');
-var config   = require('../config').templates;
+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 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 md = require('markdown-it')(); // to convert markdown to html
+var source = require('vinyl-source-stream'); // used to convert substack's readStream to vinylStream
 
 gulp.task('templates', function() {
+  var htmlObjHolder = {}; // these holders are needed later to keep write streams separate
+  var i18nObjHolder = {};
+  var contentFiles = glob.sync(config.contentSrc); // read in all content files in the repo
 
-  // loop over content folder here
+  var languages = _.uniq(_.map(contentFiles, function(str) { // extrapolate the languages from the content filepaths
+    return str.split('/')[2];
+  }));
 
-  // play with build and templates here
+  _.forEach(languages, function(lang) { // loop through languages to make separate folder outputs
+    htmlObjHolder[lang] = {}; // expanding the stream holders for later
+    i18nObjHolder[lang] = {};
+    var templateJSON = require('../../content/' + lang + '/template.json'); // read in the template JSON file
 
-});
+    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
+      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
+      thisFileJSON['[i18n-content]'] = html; // Attach md2html string to the interpolation object
+      htmlObjHolder[lang][file.filename] = HTMLtemplate(); // finally using that holder for the template stream
+      i18nObjHolder[lang][file.filename] = htmlObjHolder[lang][file.filename].template('i18n'); // same
+      var filepath = __dirname.split('gulp/tasks')[0] + 'source/templates/test.html'; // get the main template file location. There can be multiple, this is just a proof of concept
+
+      fs.createReadStream(filepath) // pulling this code from substack's example on html-template
+      .pipe(htmlObjHolder[lang][file.filename])
+        .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_test/' + lang + '/')); // dump it in the appropriate language subfolder
+      i18nObjHolder[lang][file.filename].write(thisFileJSON); // write the interpolation JSON to the template
+      i18nObjHolder[lang][file.filename].end(); // saving? this is taken from substack too.
+    });
+  });
+});

gulp/tasks/watch.js

@@ -1,7 +1,11 @@
-var gulp     = require('gulp');
-var config   = require('../config');
+var gulp = require('gulp');
+var config = require('../config');
 
 gulp.task('watch', function(callback) {
-  gulp.watch(config.stylus.src,   ['stylus']);
-  gulp.watch(config.templates.src, ['templates']);
+  gulp.watch(config.stylus.src, ['stylus']);
+  gulp.watch([
+    config.templates.templateSrc,
+    config.templates.contentSrc,
+    config.templates.templateJSONsrc
+  ], ['templates']);
 });

package.json

@@ -43,6 +43,7 @@
     "browserify": "^8.1.1",
     "csswring": "^3.0.0",
     "del": "^1.1.1",
+    "glob": "^4.3.5",
     "gulp": "^3.8.10",
     "gulp-changed": "^1.1.0",
     "gulp-filesize": "0.0.6",
@@ -53,7 +54,11 @@
     "gulp-postcss": "^4.0.2",
     "gulp-rename": "^1.2.0",
     "gulp-stylus": "^2.0.0",
+    "html-template": "^1.1.0",
+    "lodash": "^2.4.1",
+    "markdown-it": "^3.0.4",
     "require-dir": "^0.1.0",
-    "run-sequence": "^1.0.2"
+    "run-sequence": "^1.0.2",
+    "vinyl-source-stream": "^1.0.0"
   }
 }

public_test/en/test.html

@@ -0,0 +1,45 @@
+<html>
+
+<body class="i18n">
+  <div class="wrapper" template="i18n" style="display:none">
+    <h1>list of skills</h1>
+    <button i18n-button-one></button>
+    <button i18n-button-two></button>
+    <div i18n-content></div>
+    <table class="skill">
+      <tr>
+        <th>skill name</th>
+        <th>skill level</th>
+      </tr>
+      <tr>
+        <td key="name"></td>
+        <td key="level"></td>
+      </tr>
+    </table>
+  </div><div class="wrapper">
+    <h1>list of skills</h1>
+    <button i18n-button-one>Press Me!</button>
+    <button i18n-button-two>Don't press me!</button>
+    <div i18n-content><h1>This is a test</h1>
+<p><em>a real one!</em></p>
+<ul>
+<li>beep</li>
+<li>boop</li>
+<li>bop</li>
+</ul>
+<p><strong>test</strong></p>
+</div>
+    <table class="skill">
+      <tr>
+        <th>skill name</th>
+        <th>skill level</th>
+      </tr>
+      <tr>
+        <td key="name"></td>
+        <td key="level"></td>
+      </tr>
+    </table>
+  </div>
+</body>
+
+</html>

public_test/en/test2.html

@@ -0,0 +1,41 @@
+<html>
+
+<body class="i18n">
+  <div class="wrapper" template="i18n" style="display:none">
+    <h1>list of skills</h1>
+    <button i18n-button-one></button>
+    <button i18n-button-two></button>
+    <div i18n-content></div>
+    <table class="skill">
+      <tr>
+        <th>skill name</th>
+        <th>skill level</th>
+      </tr>
+      <tr>
+        <td key="name"></td>
+        <td key="level"></td>
+      </tr>
+    </table>
+  </div><div class="wrapper">
+    <h1>list of skills</h1>
+    <button i18n-button-one>Press Me!</button>
+    <button i18n-button-two>Don't press me!</button>
+    <div i18n-content><h1>this is another test</h1>
+<h2>a more better test</h2>
+<h3>beep</h3>
+<h4>boop</h4>
+</div>
+    <table class="skill">
+      <tr>
+        <th>skill name</th>
+        <th>skill level</th>
+      </tr>
+      <tr>
+        <td key="name"></td>
+        <td key="level"></td>
+      </tr>
+    </table>
+  </div>
+</body>
+
+</html>

public_test/es/test.html

@@ -0,0 +1,37 @@
+<html>
+
+<body class="i18n">
+  <div class="wrapper" template="i18n" style="display:none">
+    <h1>list of skills</h1>
+    <button i18n-button-one></button>
+    <button i18n-button-two></button>
+    <div i18n-content></div>
+    <table class="skill">
+      <tr>
+        <th>skill name</th>
+        <th>skill level</th>
+      </tr>
+      <tr>
+        <td key="name"></td>
+        <td key="level"></td>
+      </tr>
+    </table>
+  </div><div class="wrapper">
+    <h1>list of skills</h1>
+    <button i18n-button-one>Prensa mí!</button>
+    <button i18n-button-two>No me presione!</button>
+    <div i18n-content></div>
+    <table class="skill">
+      <tr>
+        <th>skill name</th>
+        <th>skill level</th>
+      </tr>
+      <tr>
+        <td key="name"></td>
+        <td key="level"></td>
+      </tr>
+    </table>
+  </div>
+</body>
+
+</html>

source/templates/test.html

@@ -0,0 +1,22 @@
+<html>
+
+<body class="i18n">
+  <div class="wrapper" template="i18n">
+    <h1>list of skills</h1>
+    <button i18n-button-one></button>
+    <button i18n-button-two></button>
+    <div i18n-content></div>
+    <table class="skill">
+      <tr>
+        <th>skill name</th>
+        <th>skill level</th>
+      </tr>
+      <tr>
+        <td key="name"></td>
+        <td key="level"></td>
+      </tr>
+    </table>
+  </div>
+</body>
+
+</html>