Set up webpack

Author: robertquitt

.gitignore

@@ -4,3 +4,4 @@ _site
 Gemfile.lock
 .bundle
 vendor
+node_modules

README

@@ -1,4 +1,5 @@
 Getting started:
+================
 
 Install jekyll:
 
@@ -8,8 +9,17 @@ Serve files:
 
 $ bundle exec jekyll serve
 
+Install webpack/javascript dependencies
+
+$ npm install
+
+Build Javascript:
+
+$ webpack
+
 
 Misc commands
+=============
 
 jq command to convert old database
 

_config.yml

@@ -8,6 +8,7 @@ exclude:
   - csv2yaml.py
   - json2yaml.py
   - drive.py
+  - node_modules
 
 kramdown:
   show_warnings: true

computers/computers.js

@@ -0,0 +1,86 @@
+'use strict';
+
+var moment = require('moment');
+var React = require('react');
+var ReactDOM = require('react-dom');
+
+// https://reactjs.org/docs/faq-ajax.html
+
+class ComputersList extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      computers: [],
+      users: [],
+      isLoaded: false,
+      error: null
+    };
+  }
+
+  componentDidMount() {
+    fetch("/computers/json")
+      .then(res => res.json())
+      .then(
+	(result) => {
+	  this.setState({
+	    isLoaded: true,
+	    computers: result.computers,
+	    users: result.users
+	  });
+	},
+	(error) => {
+	  this.setState({
+	    isLoaded: true,
+	    error
+	  });
+	}
+      )
+  }
+
+  render() {
+    const { computers, users, isLoaded, error } = this.state;
+    if (error) {
+      console.log(error);
+      return <div>Error fetching data.</div>
+    } else if (!isLoaded) {
+      return <div>Loading...</div>
+    } else {
+      return <div>
+	<Computers computers={this.state.computers}/>
+	<Users users={this.state.users}/>
+      </div>
+    }
+  }
+}
+
+class Computers extends React.Component {
+  render() {
+    const computers = this.props.computers;
+    return <table>
+      {computers.map(computer =>
+	<tr>
+	  <td>{computer.hostname}</td>
+	  <td>{computer.user_id}</td>
+	  <td>{moment(computer.local_timestamp.fromNow())}</td>
+	</tr>
+      )}
+    </table>
+  }
+}
+
+class Users extends React.Component {
+  render() {
+    const users = this.props.users;
+    return <table>
+      {users.map(user =>
+	<tr>
+	  <td>{user.username}</td>
+	  <td>{moment(user.last_ping).fromNow()}</td>
+	  <td>{moment().startOf('day').add(user.time_spent, 'seconds').format('HH:mm:ss')}</td>
+	</tr>
+      )}
+    </table>
+  }
+}
+
+ReactDOM.render(<ComputersList />, document.getElementById('computers-list'));

computers/computers.jsx

@@ -3,10 +3,6 @@ title: NSA Backdoor
 permalink: /computers/
 ---
 
-<div id="computers-list"></div>
+<div id="computers-list">Enable Javascript :)</div>
 
-<script src="https://momentjs.com/downloads/moment.min.js" crossorigin></script>
-<script src="https://unpkg.com/axios/dist/axios.min.js" crossorigin></script>
-<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
-<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
-<script src="{% link computers/computers.js %}"></script>
+<script src="/assets/js/computers.bundle.js"></script>

computers/computers.md

@@ -0,0 +1,37 @@
+{
+  "name": "static-website",
+  "version": "1.0.0",
+  "description": "CSUA static website using Jekyll",
+  "main": "",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/CSUA/static-website.git"
+  },
+  "author": "Philip Nunez",
+  "license": "",
+  "bugs": {
+    "url": "https://github.com/CSUA/static-website/issues"
+  },
+  "homepage": "https://github.com/CSUA/static-website#readme",
+  "dependencies": {
+    "moment": "^2.24.0",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.2.2",
+    "@babel/preset-env": "^7.3.1",
+    "@babel/preset-react": "^7.0.0",
+    "babel-loader": "^8.0.5",
+    "webpack": "^4.29.0"
+  },
+  "babel": {
+    "presets": [
+      "@babel/preset-env",
+      "@babel/preset-react"
+    ]
+  }
+}

package.json

@@ -0,0 +1,26 @@
+var path = require('path');
+
+module.exports = {
+  entry: {
+    computers: './computers/computers.jsx',
+  },
+  output: {
+    path: path.resolve(__dirname, "assets/js"),
+    filename: "[name].bundle.js"
+  },
+  module: {
+    rules: [
+      {
+        test: /\.jsx?$/,
+        exclude: /(node_modules)/,
+        use: {
+          loader: "babel-loader",
+        }
+      }
+    ]
+  },
+  resolve: {
+    extensions: ['*', '.js', '.jsx']
+  }
+};
+// vim:et:sw=2:ts=2