diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..eb03e3e
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+*.log
diff --git a/README.md b/README.md
index 97a2f97..42ed5d5 100644
--- a/README.md
+++ b/README.md
@@ -2,3 +2,30 @@ README
======
Frontend for Watchdog (previously NewsdiffHK) project.
+
+Install
+-------
+
+The server depends on packages. The serving scripts needs to build into bundle before running. Run these commands.
+
+```bash
+npm install
+npm run build
+```
+
+Run
+---
+
+To start the server:
+
+```bash
+npm run start
+```
+
+The server will prompt you to enter the API_BASE_URL. To suppress the prompt, you may also add API_BASE_URL to the environment like this:
+
+```bash
+API_BASE_URL=http://api.server.com:3000/api npm run start
+```
+
+Replace `http://api.server.com:3000` with the appropriate host and port number.
diff --git a/gulpfile.js b/gulpfile.js
new file mode 100644
index 0000000..c20c13c
--- /dev/null
+++ b/gulpfile.js
@@ -0,0 +1,153 @@
+
+// basic
+var gulp = require("gulp");
+var browserSync = require("browser-sync");
+var webpack = require("webpack");
+var express = require("express");
+var url = require("url");
+var fs = require("fs");
+
+// gulp plugins
+var gutil = require("gulp-util");
+var watch = require("gulp-watch");
+var sass = require("gulp-sass");
+var copy = require("gulp-copy");
+
+
+// convert styles
+gulp.task("build.styles", function(callback) {
+
+ // monitor css source
+ var files = [
+ "./src/styles/*.sass",
+ "./src/styles/*.scss"
+ ];
+ var sassCfg = {
+ errLogToConsole: true
+ };
+ gulp.src(files)
+ .pipe(sass(sassCfg))
+ .pipe(gulp.dest("./public/styles/"));
+
+ // monitor plain css
+ gulp.src("./src/styles/*.css")
+ .pipe(copy("./public/styles/", { prefix: 2 }));
+
+ gutil.log("[styles]", "styles generated");
+ callback();
+});
+
+// bundle scripts
+gulp.task("build.webpack", function(callback) {
+ var webpackCfg = require("./webpack.config");
+
+ // run webpack
+ webpack(webpackCfg, function(err, stats) {
+ if(err) throw new gutil.PluginError("webpack", err);
+ gutil.log("[webpack]", stats.toString({
+ // output options
+ }));
+ callback();
+ });
+});
+
+
+// generate environment to js
+gulp.task("dev.env", function(callback) {
+ var fs = require("fs");
+ var proxy_port = process.env["PROXY_PORT"] || 8000;
+ var js = "var env = " + JSON.stringify({
+ "api_base_url": "http://localhost:"+proxy_port+"/api/"
+ }) + ";";
+ fs.writeFile("./public/scripts/env.js", js, function(err) {
+ if (err) {
+ callback(err);
+ process.exit(1);
+ return
+ }
+ gutil.log("[dev.env]", "env.js created");
+ });
+});
+
+// watch the source files
+// generates public files
+gulp.task("dev.watch", function(callback) {
+ watch([
+ "./src/styles/**/*.sass",
+ "./src/styles/**/*.scss",
+ "./src/styles/**/*.css"
+ ], function () {
+ gulp.run("build.styles");
+ });
+ watch("./src/app/**/*.*", function () {
+ gulp.run("build.webpack");
+ });
+});
+
+
+// watch the public files
+// hot reload if there is changes
+gulp.task("dev.server", function(callback) {
+
+ var files = [
+ "public/**/*.html",
+ "public/styles/**/*.css",
+ "public/scripts/**/*.js"
+ ];
+ var baseDir = "./public";
+
+ browserSync.init(files, {
+ server: {
+ baseDir: baseDir
+ },
+ middleware: function(req, res, next) {
+ var fileName = url.parse(req.url);
+ fileName = fileName.href.split(fileName.search).join("");
+ var fileExists = fs.existsSync(baseDir + "/" + fileName);
+ if (!fileExists && fileName.indexOf("browser-sync-client") < 0) {
+ req.url = "/index.html";
+ }
+ return next();
+ },
+ port: process.env["PORT"] || 8080
+ });
+
+});
+
+// api proxy for development
+gulp.task("dev.api", function(callback) {
+
+ if (typeof process.env["API_BASE_URL"] == "undefined") {
+ callback("Environment variable API_BASE_URL is not defined");
+ process.exit(1);
+ }
+
+ var bodyParser = require("body-parser");
+ var app = express();
+ var forward = require("./includes/forward.js");
+
+ app.set("port", (process.env["PROXY_PORT"] || 8000));
+ app.use(bodyParser.json());
+ app.use(bodyParser.urlencoded({extended: true}));
+ app.use(forward(/^\/api\/(.+?)$/, process.env["API_BASE_URL"], gutil.log.bind("[dev.api]")));
+ app.listen(app.get("port"), function() {
+ gutil.log("[dev.api]", "proxy server started at http://localhost:" + app.get("port") + "/");
+ gutil.log("[dev.api]", "proxy to " + process.env["API_BASE_URL"]);
+ });
+
+});
+
+// build the source files
+gulp.task("build", ["build.styles", "build.webpack"]);
+
+// run development server
+gulp.task("dev", [
+ "build",
+ "dev.env",
+ "dev.api",
+ "dev.watch",
+ "dev.server"
+]);
+
+// define default task(s)
+gulp.task("default", ["dev"]);
diff --git a/includes/envars.js b/includes/envars.js
new file mode 100644
index 0000000..9202981
--- /dev/null
+++ b/includes/envars.js
@@ -0,0 +1,33 @@
+
+
+// add trailing slash
+function trailSlash(str) {
+ if (str.substr(-1) != '/') {
+ str += '/';
+ }
+ return str
+}
+
+// wait for environment to be ready
+exports.ready = function (callback) {
+ if (typeof process.env["API_BASE_URL"] == "undefined") {
+ // if API_BASE_URL is not defined, prompt user to define
+ (function (process, callback) {
+ var prompt = require('prompt');
+ prompt.start();
+ console.log('Missing environment variable');
+ prompt.get(['API_BASE_URL'], function (err, result) {
+ if (err) { return onErr(err); }
+ var url = trailSlash(result.API_BASE_URL);
+ console.log('API_BASE_URL: ' + url);
+ process.env["API_BASE_URL"] = url;
+ callback();
+ });
+ })(process, callback)
+ } else {
+ process.env["API_BASE_URL"] =
+ trailSlash(process.env["API_BASE_URL"]);
+ console.log('API_BASE_URL: ' + process.env["API_BASE_URL"]);
+ callback();
+ }
+}
diff --git a/includes/forward.js b/includes/forward.js
new file mode 100644
index 0000000..66abb20
--- /dev/null
+++ b/includes/forward.js
@@ -0,0 +1,25 @@
+
+var request = require('request')
+
+// add trailing slash
+function trailSlash(str) {
+ if (str.substr(-1) != '/') {
+ str += '/';
+ }
+ return str
+}
+
+module.exports = function(pattern, host, log){
+ host = trailSlash(host);
+ return function(req, res, next){
+ if(req.url.match(pattern)){
+ log("Accessing proxy api on "+req.url);
+ var db_path = req.url.match(pattern)[1]
+ , db_url = [host, db_path].join('');
+ res.header('Access-Control-Allow-Origin', '*');
+ req.pipe(request[req.method.toLowerCase()](db_url)).pipe(res);
+ }else{
+ next();
+ }
+ }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..bed477f
--- /dev/null
+++ b/package.json
@@ -0,0 +1,40 @@
+{
+ "name": "newsdiff-frontend",
+ "version": "0.0.1",
+ "description": "",
+ "scripts": {
+ "build": "gulp build",
+ "dev": "gulp",
+ "start": "node server.js"
+ },
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/code4hk/Newsdiff-Frontend.git"
+ },
+ "author": "Code4HK",
+ "license": "GPLv3",
+ "browserify": {
+ "transform": ["aliasify"]
+ },
+ "dependencies": {
+ "express": "^4.13.0",
+ "body-parser": "^1.13.0",
+ "prompt": "^0.2.14",
+ "browser-request": "^0.3.3",
+ "react": "^0.13.3",
+ "react-router": "^0.13.3",
+ "request": "^2.65.0",
+ "alt": "^0.16.10"
+ },
+ "devDependencies": {
+ "browser-sync": "~2.7.13",
+ "gulp": "~3.9.0",
+ "gulp-util": "~3.0.6",
+ "gulp-watch": "~4.2.4",
+ "gulp-sass": "~2.0.3",
+ "gulp-copy": "~0.0.2",
+ "webpack": "^1.10.1",
+ "jsx-loader": "^0.13.2",
+ "babel-loader": "^5.2.2"
+ }
+}
diff --git a/public/.gitignore b/public/.gitignore
new file mode 100644
index 0000000..93a82e7
--- /dev/null
+++ b/public/.gitignore
@@ -0,0 +1,2 @@
+styles
+scripts
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..f3534f2
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,23 @@
+
+
+
+ Newsdiff HK
+ Loading...
+
+
+
+
+
+
+
diff --git a/public/theme.html b/public/theme.html
new file mode 100644
index 0000000..35ef257
--- /dev/null
+++ b/public/theme.html
@@ -0,0 +1,305 @@
+
+
+
+
+ Material Design Lite
+
+
+ View Source
+
+
+
diff --git a/server.js b/server.js
new file mode 100644
index 0000000..8a8084e
--- /dev/null
+++ b/server.js
@@ -0,0 +1,39 @@
+//
+// This is a server to serve Code4HK Newsdiff web frontend
+// Alternatively, you may manually env.js
+//
+
+var fs = require('fs');
+var path = require('path');
+var express = require('express');
+var bodyParser = require('body-parser');
+var app = express();
+
+var envars = require('./includes/envars.js')
+
+envars.ready(function () {
+
+ app.set('port', (process.env.PORT || 8080));
+ app.use(bodyParser.json());
+ app.use(bodyParser.urlencoded({extended: true}));
+
+ app.get('/scripts/env.js', function(req, res) {
+ var js = 'var env = ' + JSON.stringify({
+ "api_base_url": process.env["API_BASE_URL"]
+ }) + ';';
+ res.setHeader('Cache-Control', 'no-cache');
+ res.send(js);
+ });
+
+ // serve other static files
+ app.use('/', express.static(path.join(__dirname, 'public')));
+
+ app.get('*', function(req, res){
+ res.sendfile(path.join(__dirname, 'public', 'index.html'));
+ });
+
+ app.listen(app.get('port'), function() {
+ console.log('Server started: http://localhost:' + app.get('port') + '/');
+ });
+
+});
diff --git a/src/app/actions/RouteActions.js b/src/app/actions/RouteActions.js
new file mode 100644
index 0000000..d8e82e6
--- /dev/null
+++ b/src/app/actions/RouteActions.js
@@ -0,0 +1,34 @@
+
+'use strict'
+
+import alt from '../common/alt';
+
+class RouteActions {
+
+ // common things to load once the site
+ firstLoad() {
+ console.log("RouteActions.firstLoad");
+ this.dispatch({});
+ }
+
+ // a page to read all news
+ pageNews() {
+ console.log("RouteActions.pageNews");
+ this.dispatch({});
+ }
+
+ // load a news
+ pageNewsDetails(id) {
+ console.log("RouteActions.pageNewsDetails(id)", id);
+ this.dispatch({id: id});
+ }
+
+ // a page to read publisher news
+ pagePublisherNews(code) {
+ console.log("RouteActions.pagePublisherNews");
+ this.dispatch({code: code});
+ }
+
+}
+
+export default alt.createActions(RouteActions);
diff --git a/src/app/common/API.js b/src/app/common/API.js
new file mode 100644
index 0000000..af5b015
--- /dev/null
+++ b/src/app/common/API.js
@@ -0,0 +1,74 @@
+
+'use strict'
+
+import request from 'request';
+
+var defaultOptions = {
+ "success": function () {
+ console.log("API request success");
+ },
+ "error": function () {
+ console.error("API request failed");
+ }
+}
+
+class API {
+
+ // handle http response
+ static ajax(err, response, body, options) {
+ var _options = Object.assign({}, defaultOptions, options);
+ if (!err && response.statusCode == 200) {
+ try {
+ var j = JSON.parse(body);
+ _options.success(JSON.parse(body));
+ } catch(err2) {
+ _options.error(response, err2);
+ }
+ } else {
+ _options.error(response, err);
+ }
+ }
+
+ // retrieve publishers
+ // GET /api/publishers
+ static getPublishers(options) {
+ request(env.api_base_url + 'publishers',
+ (err, response, body)=>{ this.ajax(err, response, body, options); }
+ );
+ }
+
+ // retrieve all differed-news
+ // GET /api/news
+ static getItems(options) {
+ request(env.api_base_url + 'news',
+ (err, response, body)=>{ this.ajax(err, response, body, options); }
+ );
+ }
+
+ // retrieve all differed-news from a publisher
+ // GET /api/publisher/{publisher_code}/news
+ static getPublisherItems(publisher_code, options) {
+ request(env.api_base_url + 'publisher/'+publisher_code+'/news',
+ (err, response, body)=>{ this.ajax(err, response, body, options); }
+ );
+ }
+
+ // retrieve details of a differed-news
+ // GET /api/news/{news_id}
+ static getItem(news_id, options) {
+ request(env.api_base_url + 'news/'+news_id,
+ (err, response, body)=>{ this.ajax(err, response, body, options); }
+ );
+ }
+
+ // search for differed-news
+ // POST /api/search/news
+ static searchItem(options) {
+ request(env.api_base_url + 'search/news',
+ (err, response, body)=>{ this.ajax(err, response, body, options); }
+ );
+ }
+
+};
+
+export default API;
diff --git a/src/app/common/App.jsx b/src/app/common/App.jsx
new file mode 100644
index 0000000..1451fac
--- /dev/null
+++ b/src/app/common/App.jsx
@@ -0,0 +1,20 @@
+
+'use strict'
+
+import {RouteHandler} from 'react-router';
+import React from 'react';
+import {Header, MobileHeader} from '../components/Header';
+
+export default React.createClass({
+ render () {
+ return (
+
+
+
+
+
+ );
+ }
+});
diff --git a/src/app/common/alt.js b/src/app/common/alt.js
new file mode 100644
index 0000000..ae0b7df
--- /dev/null
+++ b/src/app/common/alt.js
@@ -0,0 +1,5 @@
+
+'use strict'
+
+import Alt from 'alt';
+module.exports = new Alt();
diff --git a/src/app/common/utils.jsx b/src/app/common/utils.jsx
new file mode 100644
index 0000000..f2bb7ef
--- /dev/null
+++ b/src/app/common/utils.jsx
@@ -0,0 +1,7 @@
+
+'use strict'
+
+// extract id from a news item
+export function NewsIdOf (item) {
+ return item._id.$oid;
+}
diff --git a/src/app/components/Header.jsx b/src/app/components/Header.jsx
new file mode 100644
index 0000000..f783616
--- /dev/null
+++ b/src/app/components/Header.jsx
@@ -0,0 +1,44 @@
+
+'use strict'
+
+import React, { Component } from 'react';
+import { Link } from 'react-router';
+import Menu from '../components/Menu';
+
+// Desktop Header
+export class Header extends Component {
+
+ render() {
+ return (
+
+
+
+
+
NewsDiff HK
+
+
+
+
+
+ );
+ }
+
+}
+
+// Mobile Header
+export class MobileHeader extends Header {
+
+ render() {
+ return (
+
+ NewsDiff HK Menu
+
+ { links }
+
+ );
+ }
+
+}
+
+export default Menu
diff --git a/src/app/components/NewsDetails.jsx b/src/app/components/NewsDetails.jsx
new file mode 100644
index 0000000..bc3ceb3
--- /dev/null
+++ b/src/app/components/NewsDetails.jsx
@@ -0,0 +1,46 @@
+
+'use strict'
+
+import React, { Component } from 'react';
+import connectToStores from 'alt/utils/connectToStores';
+import NewsDetailsStore from '../stores/NewsDetailsStore';
+
+@connectToStores
+class NewsReview extends Component {
+
+ static getStores() {
+ console.log('NewsReview.getStores');
+ return [NewsDetailsStore];
+ }
+
+ static getPropsFromStores() {
+ var state = NewsDetailsStore.getState();
+ console.log('NewsReview.getPropsFromStores', state);
+ return state;
+ }
+
+ render() {
+ console.log('render newsreview')
+ return (
+
+
{this.props.data.title}
+
+ [
+ Original Link
+ ]
+
+ Publisher: {this.props.data.publisher}
+ Language: {this.props.data.lang}
+ % of change: {this.props.data.changes}
+ Created At: {this.props.data.created_at}
+ Updated At: {this.props.data.updated_at}
+ Last Checked: {this.props.data.last_check}
+ Versions: {this.props.data.count}
+
+
+
{title}
+
+ {newsItems}
+
+
+
+
+ [
+ Original Link
+ ]
+
+ Publisher: {this.props.data.publisher}
+ Language: {this.props.data.lang}
+ % of change: {this.props.data.changes}
+ Created At: {this.props.data.created_at}
+ Updated At: {this.props.data.updated_at}
+ Last Checked: {this.props.data.last_check}
+ Versions: {this.props.data.count}
+
+
+
+
+
+
+
+
+);
diff --git a/src/app/routes/AboutPage.jsx b/src/app/routes/AboutPage.jsx
new file mode 100644
index 0000000..ded9548
--- /dev/null
+++ b/src/app/routes/AboutPage.jsx
@@ -0,0 +1,17 @@
+
+'use strict'
+
+import React, { Component } from 'react';
+
+class AboutPage extends Component {
+ render() {
+ return (
+
+
About Us
+
Hello world
+
+ 404 Not Found
+
+ );
+ }
+}
+
+export default NotFoundPage
diff --git a/src/app/routes/PublisherNewsListPage.jsx b/src/app/routes/PublisherNewsListPage.jsx
new file mode 100644
index 0000000..f2375a3
--- /dev/null
+++ b/src/app/routes/PublisherNewsListPage.jsx
@@ -0,0 +1,15 @@
+
+'use strict'
+
+import React, { Component } from 'react';
+import NewsList from '../components/NewsList';
+
+class PublisherNewsListPage extends Component {
+ render() {
+ return (
+