diff --git a/dist/index.html b/dist/index.html deleted file mode 100644 index bb0a52378..000000000 --- a/dist/index.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - Mozilla Learning - - -
- - - diff --git a/gulpfile.js b/gulpfile.js index 1740857e4..e4ba83932 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -13,6 +13,8 @@ var webpack = require('webpack'); var plumber = require('gulp-plumber'); var fs = require('fs-extra'); +var IndexFileStream = require('./lib/gulp-index-file-stream'); + if ('ENABLE_REACT_A11Y' in process.env) require('react-a11y')(); @@ -31,9 +33,10 @@ var COMPILED_DIR = './dist/'; var LESS_FILES = './less/**/*.less'; -function webpackTask(options) {console.log(options) +function webpackTask(options) { + console.log(options) options = options || {}; - var srcFile = './lib/main.js'; + var srcFile = './lib/index-static.jsx'; var outputPath = path.join(__dirname, COMPILED_DIR, 'js'); fs.removeSync(outputPath); var outputName = 'bundle.js'; @@ -71,17 +74,25 @@ function handleError() { }); } +gulp.task('generate-index-files', function() { + return new IndexFileStream(require('./lib/index-static.jsx')) + .pipe(prettify({ + indent_size: 2 + })) + .pipe(gulp.dest('./dist')); +}); + gulp.task('copy-dirs', function() { return gulp.src(COPY_DIRS, { base: '.' }).pipe(gulp.dest('./dist')); }); -gulp.task('less', function () { +gulp.task('less', function() { return gulp.src('./less/**/*.less') .pipe(sourcemaps.init()) .pipe(less({ - paths: [ './' ] + paths: ['./'] })) .pipe(sourcemaps.write('./')) .pipe(gulp.dest('./dist')); @@ -89,14 +100,17 @@ gulp.task('less', function () { // gulp.task('webpack', webpackTask({sourcemaps: true})); // gulp.task('webpack-optimized', webpackTask({optimize: true})); -gulp.task('watch-webpack', webpackTask({ watch: true, sourcemaps: true })); +gulp.task('watch-webpack', webpackTask({ + watch: true, + sourcemaps: true +})); gulp.task('build', BUILD_TASKS); -gulp.task('dev', ['watch-less', 'watch-webpack', 'server']); +gulp.task('dev', ['watch-less', 'watch-webpack', 'generate-index-files', 'server']); -gulp.task('watch-less', ['less'], function () { - gulp.watch('./less/**/*.less', ['less']); +gulp.task('watch-less', ['less'], function() { + gulp.watch('./less/**/*.less', ['less']); }); gulp.task('server', function() { diff --git a/lib/footer.js b/lib/footer.jsx similarity index 100% rename from lib/footer.js rename to lib/footer.jsx diff --git a/lib/gulp-index-file-stream.js b/lib/gulp-index-file-stream.js new file mode 100644 index 000000000..18aa01a1c --- /dev/null +++ b/lib/gulp-index-file-stream.js @@ -0,0 +1,43 @@ +var Readable = require('stream').Readable; +var posixPath = require('path-posix'); +var util = require('util'); +var File = require('vinyl'); + +// Because the index.html files in our site don't necessarily +// come from individual files, it's easiest for us to just +// create a stream that emits Vinyl File objects rather than +// using gulp.src(). +function IndexFileStream(indexStatic) { + Readable.call(this, { + objectMode: true + }); + this._baseDir = __dirname; + this._indexStatic = indexStatic; + this._urls = indexStatic.URLS.slice(); +} + +util.inherits(IndexFileStream, Readable); + +IndexFileStream.prototype._read = function() { + if (this._urls.length == 0) + return this.push(null); + var url = this._urls.pop(); + var indexFile = posixPath.join( + this._baseDir, + posixPath.join.apply(posixPath, url.split('/').slice(1, -1)), + 'index.html' + ); + + this._indexStatic.generate(url, { + baseURL: posixPath.relative(url, '/') + }, function(html) { + this.push(new File({ + cwd: this._baseDir, + base: this._baseDir, + path: indexFile, + contents: new Buffer(html) + })); + }.bind(this)); +}; + +module.exports = IndexFileStream; diff --git a/lib/hero-unit.js b/lib/hero-unit.jsx similarity index 100% rename from lib/hero-unit.js rename to lib/hero-unit.jsx diff --git a/lib/homepage.js b/lib/homepage.jsx similarity index 97% rename from lib/homepage.js rename to lib/homepage.jsx index b4cf14ea2..55b13373f 100644 --- a/lib/homepage.js +++ b/lib/homepage.jsx @@ -2,8 +2,8 @@ var React = require('react'); var Router = require('react-router'); var Link = Router.Link; -var Page = require('./page'); -var HeroUnit = require('./hero-unit'); +var Page = require('./page.jsx'); +var HeroUnit = require('./hero-unit.jsx'); var CaseStudy = React.createClass({ render: function() { diff --git a/lib/index-static.jsx b/lib/index-static.jsx new file mode 100644 index 000000000..a94827547 --- /dev/null +++ b/lib/index-static.jsx @@ -0,0 +1,44 @@ +var React = require('react'); + +var routes = require('./routes.jsx'); + +function generateWithPageHTML(url, options, pageHTML) { + options = options || {}; + + // Make sure any changes to this file are reflected in + // index.html too. + var content = ( + + + + + + + + + Mozilla Learning + + +
+ + + + ); + + return '' + React.renderToStaticMarkup(content); +} + +function generate(url, options, cb) { + routes.generateStatic(url, function(html) { + cb(generateWithPageHTML(url, options, html)); + }); +}; + +exports.generate = generate; +exports.CSS_FILENAME = "styles.css"; +exports.JS_FILENAME = "js/bundle.js"; +exports.URLS = routes.URLS; diff --git a/lib/main.js b/lib/main.jsx similarity index 93% rename from lib/main.js rename to lib/main.jsx index 4f4a83905..ea5c9c026 100644 --- a/lib/main.js +++ b/lib/main.jsx @@ -2,7 +2,7 @@ var React = require('react'); var Router = require('react-router'); var config = require('./config'); -var routes = require('./routes'); +var routes = require('./routes.jsx'); function startRunningSite() { var url = document.querySelector('meta[name=url]').getAttribute('value'); diff --git a/lib/page.js b/lib/page.jsx similarity index 85% rename from lib/page.js rename to lib/page.jsx index 7b66c1a74..80e0fccf2 100644 --- a/lib/page.js +++ b/lib/page.jsx @@ -2,8 +2,8 @@ var React = require('react'); var Router = require('react-router'); var RouteHandler = Router.RouteHandler; -var Sidebar = require('./sidebar'); -var Footer = require('./footer'); +var Sidebar = require('./sidebar.jsx'); +var Footer = require('./footer.jsx'); var Page = React.createClass({ render: function() { diff --git a/lib/routes.js b/lib/routes.jsx similarity index 89% rename from lib/routes.js rename to lib/routes.jsx index 0f9fd1e36..fe9aee01e 100644 --- a/lib/routes.js +++ b/lib/routes.jsx @@ -4,9 +4,9 @@ var Route = Router.Route; var Link = Router.Link; var DefaultRoute = Router.DefaultRoute; -var Page = require('./page'); -var HeroUnit = require('./hero-unit'); -var Homepage = require('./homepage'); +var Page = require('./page.jsx'); +var HeroUnit = require('./hero-unit.jsx'); +var Homepage = require('./homepage.jsx'); var Foo = React.createClass({ render: function() { diff --git a/lib/sidebar.js b/lib/sidebar.jsx similarity index 98% rename from lib/sidebar.js rename to lib/sidebar.jsx index 3e3d773c6..1641926f7 100644 --- a/lib/sidebar.js +++ b/lib/sidebar.jsx @@ -11,7 +11,7 @@ var TriangleCorner = React.createClass({ var points = [ [0, height].join(','), [width, height].join(','), - [width, 0].join(',') + [width, 0].join(',') ]; return ( diff --git a/webpack.config.js b/webpack.config.js index be700a669..9edb86a85 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,12 +1,18 @@ +var webpack = require('webpack'); + +require('node-jsx').install(); + +var index = require('./lib/index-static.jsx'); + module.exports = { + entry: './lib/main.jsx', + output: { + path: __dirname + '/dist', + filename: index.JS_FILENAME + }, module: { - loaders: [{ - test: /\.js/, - loaders: ['es6', 'jsx-loader'], - exclude: /node_modules/ - }, { - test: /\.json$/, - loader: 'json-loader' - }] + loaders: [ + {test: /\.jsx$/, loader: "jsx-loader"} + ] } };