use webpack for content inlining and html minification (WIP)

.gitignore

@@ -0,0 +1,2 @@
+clientpack/**
+node_modules/**

.hgignore

@@ -3,6 +3,7 @@ mode:regex
 \.exe$
 ^nmdc-webfrontend\.conf$
 ^clientpack/
+^node_modules/
 
 ^_dist/
 ^vendor/

.vscode/tasks.json

@@ -0,0 +1,23 @@
+{
+    // See https://go.microsoft.com/fwlink/?LinkId=733558
+    // for the documentation about the tasks.json format
+    "version": "0.1.0",
+    "command": "npm",
+    "isShellCommand": true,
+    "showOutput": "always",
+    "suppressTaskName": true,
+    "tasks": [
+        {
+            "taskName": "install",
+            "args": ["install"]
+        },
+        {
+            "taskName": "update",
+            "args": ["update"]
+        },
+        {
+            "taskName": "test",
+            "args": ["run", "test"]
+        }
+    ]
+}

Makefile

@@ -8,41 +8,40 @@ GOFLAGS=-a \
 	-ldflags "-s -w -X main.VERSION=$(BINNAME)/$(VERSION)" \
 	-gcflags "-trimpath ${GOPATH}" \
 	-asmflags "-trimpath ${GOPATH}"
-	
-SOURCES=client/ Gopkg.lock Gopkg.toml Makefile Config.go main.go nmdc-webfrontend.conf.SAMPLE
 
-.PHONY: all deps clean
+.PHONY: all dist deps clean clean-deps
 
-all: $(BINNAME)-$(VERSION)-win32.7z $(BINNAME)-$(VERSION)-linux64.tar.xz $(BINNAME)-$(VERSION)-src.tar.xz
+all: $(BINNAME) $(BINNAME).exe
+
+dist: $(BINNAME)-$(VERSION)-win32.7z $(BINNAME)-$(VERSION)-linux64.tar.xz $(BINNAME)-$(VERSION)-src.zip
 
 deps:
-	npm install -g less uglify-js less-plugin-clean-css html-minifier
+	npm i
 	go get -u github.com/jteeuwen/go-bindata/...
 	go get -u github.com/golang/dep/cmd/dep
-	dep ensure
+	$(GOPATH)/bin/dep ensure
 	
 clean:
 	rm -f ./$(BINNAME)
 	rm -f ./$(BINNAME).exe
 	rm -fr ./clientpack
 	rm -f ./bindata.go
+	
+clean-deps:
+	rm -fr ./vendor
+	rm -fr ./node_modules
 
 bindata.go: client client/*
-	rm -fr ./clientpack
-	cp -r ./client ./clientpack
-	( echo ';(function() {' ; cat clientpack/dcwebui.js ; echo '})();' ) | uglifyjs -o clientpack/dcwebui.min.js -c -m --ie8
-	lessc --clean-css clientpack/dcwebui.css clientpack/dcwebui.min.css
-	cat clientpack/index.htm \
-		| sed -e '/dcwebui.css/{i <style>' -e 'r clientpack/dcwebui.min.css' -e 'a </style>' -e 'd}' \
-		| sed -e '/dcwebui.js/{i <script>' -e 'r clientpack/dcwebui.min.js' -e 'a </script>' -e 'd}' \
-		| sed -e '/socket.io-1.7.2.js/{i <script>' -e 'r clientpack/socket.io-1.7.2.js' -e 'a </script>' -e 'd}' \
-		> clientpack/index.packed.htm
-	mv clientpack/index.packed.htm clientpack/index.htm
+	mkdir -p clientpack
+	cp client/favicon.ico client/apple-touch-icon.png clientpack/
+	npm run webpack
+	cat client/index.htm \
+		| sed -e '/bundle.js/{i <script>' -e 'r clientpack/bundle.min.js' -e 'a </script>' -e 'd}' \
+		> clientpack/index.htm
 	html-minifier --collapse-whitespace -o clientpack/index.min.htm clientpack/index.htm
 	mv clientpack/index.min.htm clientpack/index.htm
-	rm ./clientpack/*.js
-	rm ./clientpack/*.css
-	go-bindata -nomemcopy -nometadata -prefix clientpack clientpack
+	rm clientpack/bundle.min.js
+	$(GOPATH)/bin/go-bindata -nomemcopy -nometadata -prefix clientpack clientpack
 	
 $(BINNAME).exe: bindata.go *.go
 	GOARCH=386 GOOS=windows go build $(GOFLAGS) -o $(BINNAME).exe
@@ -56,5 +55,5 @@ $(BINNAME)-$(VERSION)-win32.7z: $(BINNAME).exe nmdc-webfrontend.conf.SAMPLE
 $(BINNAME)-$(VERSION)-linux64.tar.xz: $(BINNAME) nmdc-webfrontend.conf.SAMPLE
 	XZ_OPT='-9' tar caf "$(BINNAME)-$(VERSION)-linux64.tar.xz" $(BINNAME) nmdc-webfrontend.conf.SAMPLE --owner=0 --group=0
 
-$(BINNAME)-$(VERSION)-src.tar.xz: $(SOURCES)
-	XZ_OPT='-9' tar caf "$(BINNAME)-$(VERSION)-src.tar.xz" $(SOURCES) --owner=0 --group=0
+$(BINNAME)-$(VERSION)-src.zip:
+	hg archive "$(BINNAME)-$(VERSION)-src.zip" || git archive -o "$(BINNAME)-$(VERSION)-src.zip" HEAD

client/dcwebui.js

@@ -1,5 +1,9 @@
 /* dcwebui.js */
 
+require("./dcwebui.less");
+
+import io from 'socket.io-client'
+
 "use strict";
 
 var SENTINEL_PASSWORD = "************";

client/dcwebui.less

@@ -51,14 +51,16 @@ html,body {
 }
 
 /* WiiU placements */
-.navigator-wiiu .placement-mid {
-	bottom:120px;
-}
-.navigator-wiiu .placement-bottom {
-	height:120px;
-}
-.navigator-wiiu .placement-panel {
-	bottom:120px;
+.navigator-wiiu {
+	.placement-mid {
+		bottom:120px;
+	}
+	.placement-bottom {
+		height:120px;
+	}
+	.placement-panel {
+		bottom:120px;
+	}
 }
 
 /* Menu button */
@@ -75,14 +77,17 @@ html,body {
 	height:18px;
 	width:18px;
 	text-align:center;
+	
+	svg {
+		width: 18px;
+		height: 18px;
+	}
+	
+	&:hover {
+		background:white;
+	}
 }
-.menubutton svg {
-	width: 18px;
-	height: 18px;
-}
-.menubutton:hover {
-	background:white;
-}
+
 /* Menu list */
 .menu {
 	background:#DDD;
@@ -97,20 +102,24 @@ html,body {
 	z-index:10; /* above placement-panel */
 	
 	overflow-y:auto;
+	
+	ul {
+		margin:0;
+		padding:0;
+	}
+	
+	li {
+		list-style-type:none;
+		padding:6px;
+		cursor:pointer;
+		
+		&:hover {
+			background:#333;
+			color:white;
+		}
+	}
 }
-.menu ul {
-	margin:0;
-	padding:0;
-}
-.menu li {
-	list-style-type:none;
-	padding:6px;
-	cursor:pointer;
-}
-.menu li:hover {
-	background:#333;
-	color:white;
-}
+
 /* Tabs */
 .tabbar {
 	position:relative;
@@ -132,16 +141,20 @@ html,body {
 	border-right:1px solid lightgrey;
 	margin-top:2px;
 	padding:0 8px;
+	
+	&:hover {
+		border-top:2px solid #EEE;
+	}
+	
+	&.selected {
+		border-top:2px solid darkgreen;
+	}
+	
+	&.unread {
+		background:lightyellow;
+	}
 }
-.tabitem:hover {
-	border-top:2px solid #EEE;
-}
-.tabitem.selected {
-	border-top:2px solid darkgreen;
-}
-.tabitem.unread {
-	background:lightyellow;
-}
+
 .tab-label {
 	cursor:pointer;
 }
@@ -170,12 +183,14 @@ html,body {
 	-webkit-transition:0.1s linear all;
 	   -moz-transition:0.1s linear all;
 	        transition:0.1s linear all;
+	        
+	&:hover {
+		background:#FFDDDD;
+		border:1px solid red;
+		color:black;
+	}
 }
-.tab-closer:hover {
-	background:#FFDDDD;
-	border:1px solid red;
-	color:black;
-}
+
 /* */
 .content {
 	display:block;
@@ -241,7 +256,10 @@ html,body {
 }
 #submit-container {
 	position:absolute;
-	top:0;bottom:0;right:0;width:32px;
+	top:0;
+	bottom:0;
+	right:0;
+	width:32px;
 }
 #btsubmit {
 	width:100%;
@@ -265,42 +283,42 @@ html,body {
 	-webkit-border-radius: 12px;
 	   -moz-border-radius: 12px;
 	        border-radius: 12px;
-}
-.ul-large li {
-	color: #333;
-	font: bold 15px Geneva, Arial, Helvetica, sans-serif; 
-	vertical-align: middle;
-	border-bottom: 1px solid #ccc;
-	list-style-type: none;
-	text-align: left;
-	white-space: nowrap;
-	overflow: hidden;
-	height: 30px;
-	list-style-type: none; 
-	display: block;
-	padding: 15px 5px 5px 10px;
-}
-.ul-large li:first-child { 
-	border-top: 0;
-	-webkit-border-top-left-radius: 12px;
-	-webkit-border-top-right-radius: 12px;
-	   -moz-border-top-left-radius: 12px;
-	   -moz-border-top-right-radius: 12px;
-	        border-top-left-radius: 12px;
-	        border-top-right-radius: 12px;
-}
-.ul-large li:last-child { 
-	border-bottom: 0;
-	-webkit-border-bottom-left-radius: 12px;
-	-webkit-border-bottom-right-radius: 12px;
-	   -moz-border-bottom-left-radius: 12px;
-	   -moz-border-bottom-right-radius: 12px;
-	        border-bottom-left-radius: 12px;
-	        border-bottom-right-radius: 12px;
-}
-
-.ul-large li {
-	cursor:pointer;
+	        
+	li {
+		color: #333;
+		font: bold 15px Geneva, Arial, Helvetica, sans-serif; 
+		vertical-align: middle;
+		border-bottom: 1px solid #ccc;
+		list-style-type: none;
+		text-align: left;
+		white-space: nowrap;
+		overflow: hidden;
+		height: 30px;
+		list-style-type: none; 
+		display: block;
+		padding: 15px 5px 5px 10px;		
+		cursor:pointer;
+		
+		&:first-child {
+			border-top: 0;
+			-webkit-border-top-left-radius: 12px;
+			-webkit-border-top-right-radius: 12px;
+			-moz-border-top-left-radius: 12px;
+			-moz-border-top-right-radius: 12px;
+					border-top-left-radius: 12px;
+					border-top-right-radius: 12px;
+		}
+		
+		&:last-child {
+			border-bottom: 0;
+			-webkit-border-bottom-left-radius: 12px;
+			-webkit-border-bottom-right-radius: 12px;
+			-moz-border-bottom-left-radius: 12px;
+			-moz-border-bottom-right-radius: 12px;
+					border-bottom-left-radius: 12px;
+					border-bottom-right-radius: 12px;
+		}
+	}
 }
 
 /* Text */
@@ -368,19 +386,21 @@ html,body {
 .ul-mini {
 	padding-left: 4px;
 	margin-top:4px;
-}
-.ul-mini li {
-	list-style-type:none;
-	min-height:13px;
-	line-height:13px;
-	padding-left:14px;
-	margin-bottom:5px;
-	cursor:pointer;
 	
-	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAANCAYAAACQN/8FAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABh0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzT7MfTgAAAZJJREFUKJFtz71rE2EAgPHnrknbXBKkLWhx0DhoWsEOxk0taMGlQ7cimElK5uroH5DFSUQ3KQpV2qlQEDJ4mKFQ0MVS6kfN1dQP2ss1ydW79y6Xu3udBG36zL/lUaSUVKtVqes6hmGgaRqlUulUoVAw+ScV4P2bFfrEPhnF4+v2NuVy+QFHSjiNXWV2cgzh+dRqX1hsNflcr5/tgcJ14larSdDxCYIOuWEV0c3+7oEAxk4NANu2GUnFFIt3FnvgydxFZb9hSRmFCCGwmjb3i3OVo1AFyF2bZm/PxDRN4rDDo4WHt4+F77RfmKNZ1MQA9ukTPPeXXt14OvXita5f+guVJ+uPZ1brlZUJI08qG/F26AP9chDXO8RpeyzNvMyMnc+7fembmU9WYJFXL7M1YtBNhqRIEYURh1Gb/u+DH69fubqRaLQOcAccHDy++TW0pEaATzcOkFHMxs/NCQD13oV50laaH/EuQdhBhAIRClzF/W9GkVIC8Gx54dZafa3SDmxc1SEdZxgfHmdu+m7y3Jlc+AextbuG6q1RSQAAAABJRU5ErkJggg==') no-repeat 0 0;
-}
-.ul-mini li:hover {
-	background-color:#EEE;
+	li {
+		list-style-type:none;
+		min-height:13px;
+		line-height:13px;
+		padding-left:14px;
+		margin-bottom:5px;
+		cursor:pointer;
+		
+		background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAANCAYAAACQN/8FAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABh0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzT7MfTgAAAZJJREFUKJFtz71rE2EAgPHnrknbXBKkLWhx0DhoWsEOxk0taMGlQ7cimElK5uroH5DFSUQ3KQpV2qlQEDJ4mKFQ0MVS6kfN1dQP2ss1ydW79y6Xu3udBG36zL/lUaSUVKtVqes6hmGgaRqlUulUoVAw+ScV4P2bFfrEPhnF4+v2NuVy+QFHSjiNXWV2cgzh+dRqX1hsNflcr5/tgcJ14larSdDxCYIOuWEV0c3+7oEAxk4NANu2GUnFFIt3FnvgydxFZb9hSRmFCCGwmjb3i3OVo1AFyF2bZm/PxDRN4rDDo4WHt4+F77RfmKNZ1MQA9ukTPPeXXt14OvXita5f+guVJ+uPZ1brlZUJI08qG/F26AP9chDXO8RpeyzNvMyMnc+7fembmU9WYJFXL7M1YtBNhqRIEYURh1Gb/u+DH69fubqRaLQOcAccHDy++TW0pEaATzcOkFHMxs/NCQD13oV50laaH/EuQdhBhAIRClzF/W9GkVIC8Gx54dZafa3SDmxc1SEdZxgfHmdu+m7y3Jlc+AextbuG6q1RSQAAAABJRU5ErkJggg==') no-repeat 0 0;
+		
+		&:hover {
+			background-color:#EEE;
+		}
+	}
 }
 
 /* Display userlist alongside main chat for wide screens */

client/index.htm

@@ -5,8 +5,7 @@
 		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
 		<meta name="apple-mobile-web-app-capable" content="yes">
-		<link rel="apple-touch-icon" href="/apple-touch-icon.png">
-		<link rel="stylesheet" href="/dcwebui.css">
+		<link rel="apple-touch-icon" href="./apple-touch-icon.png">
 		<title>Loading...</title>
 	</head>
 	<body>
@@ -55,8 +54,5 @@
 				</div>
 			</form>
 		</div>
-		
-		<script type="text/javascript" src="/socket.io-1.7.2.js"></script>
-		<script type="text/javascript" src="/dcwebui.js"></script>
 	</body>
 </html>

package.json

@@ -0,0 +1,33 @@
+{
+  "name": "nmdc-webfrontend",
+  "version": "1.0.0",
+  "description": "A web interface to an NMDC hub",
+  "homepage": "https://code.ivysaur.me/nmdc-webfrontend/",
+  "main": "s",
+  "scripts": {
+    "webpack": "webpack"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://git.ivysaur.me/code.ivysaur.me/nmdc-webfrontend"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "awesome-typescript-loader": "^3.3.0",
+    "css-loader": "^0.28.7",
+    "html-minifier": "^3.5.6",
+    "html-webpack-plugin": "^2.30.1",
+    "less": "^2.7.3",
+    "less-loader": "^4.0.5",
+    "less-plugin-clean-css": "^1.5.1",
+    "script-ext-html-webpack-plugin": "^1.8.8",
+    "socket.io-client": "^2.0.4",
+    "style-ext-html-webpack-plugin": "^3.4.5",
+    "style-loader": "^0.19.0",
+    "typescript": "^2.6.1",
+    "uglify-js": "^3.1.8",
+    "webpack": "^3.8.1"
+  },
+  "devDependencies": {}
+}

webpack.config.js

@@ -0,0 +1,56 @@
+/*! webpack.config.js */
+
+const webpack = require("webpack");
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CleanCSSPlugin = require("less-plugin-clean-css");
+const ScriptExtHtmlWebpackPlugin = require("script-ext-html-webpack-plugin");
+
+module.exports = {
+    entry: "./client/dcwebui.js",
+    output: {
+        path: __dirname,
+        filename: "clientpack/bundle.min.js"
+    },
+    module: {
+        loaders: [
+        
+			// Plain CSS files (no longer present)
+            { test: /\.css$/, loader: "style-loader!css-loader" },
+			
+			// LESS CSS files
+			{
+				test: /\.less$/,
+				use: [
+					{ loader: "style-loader" },
+					{ loader: "css-loader" },
+					{
+						loader: "less-loader",
+						options: {
+							noIeCompat: false,
+							plugins: [
+								new CleanCSSPlugin({ advanced: true })
+							]
+						}
+					}
+				]
+			}
+			
+        ]
+    },
+    plugins: [
+        new webpack.optimize.UglifyJsPlugin({
+            compress: {
+                warnings: true
+            }
+        }),
+		new HtmlWebpackPlugin({
+			template: './client/index.htm',
+			filename: 'output.html',
+			//filename: './clientpack/index.htm',
+			minify: {},
+		}),
+		new ScriptExtHtmlWebpackPlugin({
+			inline: [ /\.*/ ]
+		})
+    ]
+};