make page templating work (not yet implementing the design)

ft-interactive · Nov 17, 2015 · cf9f637 · cf9f637
1 parent 9dfe887
commit cf9f637
Show file tree

Hide file tree

Showing 8 changed files with 114 additions and 76 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,4 +4,4 @@
 /.tmp/
 /.sass-cache/
 /.env
-/data.json
+/client/words.json
diff --git a/.travis.yml b/.travis.yml
@@ -13,13 +13,4 @@ env:
   GITHUB_REPO: guffipedia
   GIT_DEPLOY_DIR: dist
   GIT_DEPLOY_BRANCH: gh-pages
-
-# You also need to a GITHUB_TOKEN environment variable
-# - but DO NOT put it in here because this is public.
-#
-# Instead, go to the repo settings page on Travis, and create
-# a secure variable called GITHUB_TOKEN there (and don't let it
-# display value in the build log).
-#
-# You can generate a token at https://github.com/settings/tokens
-# (you only need to give it "public_repo" access).
+  SPREADSHEET_KEY: 1oQVZsOL1iI8aAwMN_MyV_h8pWBwkRGTDQ_MC0yobICI
diff --git a/client/index.html → client/bottom.hbs b/client/index.html → client/bottom.hbs
@@ -1,45 +1,3 @@
-<!doctype html>
-<html lang="en-GB" class="core">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="format-detection" content="telephone=no">
-
-    <link rel="shortcut icon" href="https://ig.ft.com/favicon.ico" type="image/x-icon">
-    <link rel="apple-touch-icon" href="//im.ft-static.com/m/icons/apple-touch-icon.png">
-
-    <title>FT.com</title>
-    <!-- <meta name="description" content="ENTER A DESCRIPTION HERE"> -->
-
-    <!-- smoosh -->
-    <!-- build:js scripts/top.js -->
-    <script src="scripts/top.js"></script>
-    <!-- endbuild -->
-    <!-- endsmoosh -->
-
-    <!-- smoosh -->
-    <!-- build:css styles/top.css -->
-    <link rel="stylesheet" href="styles/top.css">
-    <!-- endbuild -->
-    <!-- endsmoosh -->
-
-    <!-- build:css styles/main.css -->
-    <link rel="stylesheet" href="bower_components/normalize.css/normalize.css">
-    <link rel="stylesheet" href="styles/main.css">
-    <!-- endbuild -->
-  </head>
-  <body>
-    <header class="site-header">
-      <a href="http://www.ft.com/">
-        <img class="masthead" src="https://image.webservices.ft.com/v1/images/raw/fticon:brand-ft-masthead?source=ft-interactive">
-      </a>
-    </header>
-
-    <main>
-      <h1>Content goes here</h1>
-    </main>
-
     <footer class="o-footer o-footer--theme-light" data-o-component="o-footer">
       <div class="o-footer__container">
         <nav class="o-footer__row o-footer__nav">

diff --git a/client/definition-page.hbs b/client/definition-page.hbs
@@ -0,0 +1,11 @@
+{{> top }}
+    <a href="../">Guffipedia &gt;</a>
+    <main>
+      <h1>{{word}}</h1>
+
+      {{#each definitions}}
+        <h5>Definition</h5>
+        <p>{{definition}}</p>
+      {{/each}}
+    </main>
+{{> bottom }}
diff --git a/client/main-page.hbs b/client/main-page.hbs
@@ -0,0 +1,11 @@
+{{> top }}
+    <main>
+      <h1>GUFFIPEDIA</h1>
+
+      <ul>
+        {{#each words}}
+        <li><a href="{{@key}}/">{{word}}</a></li>
+        {{/each}}
+      </ul>
+    </main>
+{{> bottom }}
diff --git a/client/top.hbs b/client/top.hbs
@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en-GB" class="core">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="format-detection" content="telephone=no">
+
+    <link rel="shortcut icon" href="https://ig.ft.com/favicon.ico" type="image/x-icon">
+    <link rel="apple-touch-icon" href="//im.ft-static.com/m/icons/apple-touch-icon.png">
+
+    {{#if word}}<base href="../">{{/if}}
+
+    <title>{{pageTitle}}</title>
+    <!-- <meta name="description" content="ENTER A DESCRIPTION HERE"> -->
+
+    <!-- smoosh -->
+    <!-- build:js scripts/top.js -->
+    <script src="scripts/top.js"></script>
+    <!-- endbuild -->
+    <!-- endsmoosh -->
+
+    <!-- smoosh -->
+    <!-- build:css styles/top.css -->
+    <link rel="stylesheet" href="styles/top.css">
+    <!-- endbuild -->
+    <!-- endsmoosh -->
+
+    <!-- build:css styles/main.css -->
+    <link rel="stylesheet" href="bower_components/normalize.css/normalize.css">
+    <link rel="stylesheet" href="styles/main.css">
+    <!-- endbuild -->
+  </head>
+  <body>
+    <header class="site-header">
+      <a href="http://www.ft.com/">
+        <img class="masthead" src="https://image.webservices.ft.com/v1/images/raw/fticon:brand-ft-masthead?source=ft-interactive">
+      </a>
+    </header>
diff --git a/gulpfile.babel.js b/gulpfile.babel.js
@@ -5,14 +5,17 @@ import dotenv from 'dotenv';
 import fetch from 'node-fetch';
 import fs from 'fs';
 import gulp from 'gulp';
+import Handlebars from 'handlebars';
 import igdeploy from 'igdeploy';
+import mkdirp from 'mkdirp';
 import mergeStream from 'merge-stream';
 import path from 'path';
 import runSequence from 'run-sequence';
 import source from 'vinyl-source-stream';
 import subdir from 'subdir';
 import vinylBuffer from 'vinyl-buffer';
 import watchify from 'watchify';
+
 const $ = require('auto-plug')('gulp');
 
 dotenv.load();
@@ -104,7 +107,7 @@ gulp.task('images', () => gulp.src('client/**/*.{jpg,png,gif,svg}')
 gulp.task('copy', () => gulp.src(
   OTHER_SCRIPTS.concat([
     'client/**/*',
-    '!client/**/*.{html,scss,js,jpg,png,gif,svg}', // all handled by other tasks
+    '!client/**/*.{html,scss,js,jpg,png,gif,svg,hbs}', // all handled by other tasks
   ]), {dot: true})
   .pipe(gulp.dest('dist'))
 );
@@ -115,7 +118,7 @@ gulp.task('html', done => {
     searchPath: ['.tmp', 'client', '.'],
   });
 
-  gulp.src('client/**/*.html')
+  gulp.src('.tmp/**/*.html')
     .pipe(assets)
     .pipe($.if('*.js', $.uglify({output: {inline_script: true}}))) // eslint-disable-line camelcase
     .pipe($.if('*.css', $.minifyCss({compatibility: '*'})))
@@ -135,7 +138,7 @@ gulp.task('html', done => {
 gulp.task('clean', del.bind(null, ['.tmp', 'dist/*', '!dist/.git'], {dot: true}));
 
 // // runs a development server (serving up .tmp and client)
-gulp.task('serve', ['styles'], function (done) {
+gulp.task('serve', ['download-data', 'styles'], function (done) {
   var bundlers = getBundlers(true);
 
   // execute all the bundlers once, up front
@@ -157,11 +160,14 @@ gulp.task('serve', ['styles'], function (done) {
     });
 
     // refresh browser after other changes
-    gulp.watch(['client/**/*.html'], browserSync.reload);
     gulp.watch(['client/styles/**/*.{scss,css}'], ['styles', 'scsslint', browserSync.reload]);
     gulp.watch(['client/images/**/*'], browserSync.reload);
 
-    done();
+    gulp.watch(['./client/**/*.hbs', 'client/words.json'], () => {
+      runSequence('templates', browserSync.reload);
+    });
+
+    runSequence('templates', done);
   });
 });
 
@@ -203,22 +209,13 @@ gulp.task('scsslint', () => gulp.src('client/styles/**/*.scss')
   // .pipe($.if(env === 'production', $.scssLint.failReporter()))
 );
 
-// sets up watch-and-rebuild for JS and CSS
-gulp.task('watch', done => {
-  runSequence('clean', ['scripts', 'styles'], () => {
-    gulp.watch('./client/**/*.scss', ['styles', 'scsslint']);
-    gulp.watch('./client/**/*.{js,hbs}', ['scripts', 'eslint']);
-    done();
-  });
-});
-
 // makes a production build (client => dist)
 gulp.task('build', done => {
   env = 'production';
 
   runSequence(
-    ['clean', 'scsslint', 'eslint'],
-    ['scripts', 'styles', 'copy'],
+    ['clean', 'scsslint', 'eslint', 'download-data'],
+    ['scripts', 'styles', 'copy', 'templates'],
     ['html', 'images'],
   done);
 });
@@ -240,20 +237,49 @@ gulp.task('deploy', done => {
   });
 });
 
+// downloads the data from bertha to client/words.json
 gulp.task('download-data', () => fetch(`https://bertha.ig.ft.com/republish/publish/gss/${process.env.SPREADSHEET_KEY}/data`)
   .then(res => res.json())
   .then(spreadsheet => {
-    const data = {};
+    const words = {};
+
+    for (const row of spreadsheet) {
+      if (!words[row.slug]) {
+        words[row.slug] = {
+          word: row.word,
+          definitions: [],
+          pageTitle: `Guffipedia: “${row.word}” – FT.com`,
+        };
+      }
 
-    for (const word of spreadsheet) {
-      data[word.slug] = data[word.slug] || [];
-      data[word.slug].push(word);
+      words[row.slug].definitions.push(row);
 
-      if (data[word.slug].length > 1) {
-        console.log('Multiple definitions for this slug:', word.slug);
+      if (words[row.slug].length > 1) {
+        console.log('Multiple words for this slug:', row.slug);
       }
     }
 
-    fs.writeFileSync('data.json', JSON.stringify(data, null, 2));
+    fs.writeFileSync('client/words.json', JSON.stringify(words, null, 2));
   })
 );
+
+gulp.task('templates', () => {
+  Handlebars.registerPartial('top', fs.readFileSync('client/top.hbs', 'utf8'));
+  Handlebars.registerPartial('bottom', fs.readFileSync('client/bottom.hbs', 'utf8'));
+
+  const definitionPageTemplate = Handlebars.compile(fs.readFileSync('client/definition-page.hbs', 'utf8'));
+
+  const words = JSON.parse(fs.readFileSync('client/words.json', 'utf8'));
+
+  for (const slug of Object.keys(words)) {
+    const word = words[slug];
+    const html = definitionPageTemplate(word);
+
+    mkdirp.sync(`.tmp/${slug}`);
+    fs.writeFileSync(`.tmp/${slug}/index.html`, html);
+  }
+
+  const mainPageTemplate = Handlebars.compile(fs.readFileSync('client/main-page.hbs', 'utf8'));
+  const html = mainPageTemplate({words});
+  fs.writeFileSync(`.tmp/index.html`, html);
+});
diff --git a/package.json b/package.json
@@ -28,8 +28,10 @@
     "gulp-uglify": "^1.4.2",
     "gulp-useref": "^2.0.1",
     "gulp-util": "^3.0.7",
+    "handlebars": "^4.0.4",
     "igdeploy": "^0.1.0",
     "merge-stream": "^1.0.0",
+    "mkdirp": "^0.5.1",
     "node-fetch": "^1.3.3",
     "nodemon": "^1.8.1",
     "run-sequence": "^1.1.4",