use webpack for content inlining and html minification (WIP)

.gitignore

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

.hgignore

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

.hgtags

@@ -1,8 +1,11 @@
-769fad81e3f8db8f7e5f5c164656a382a169d735 release-1.0.0
+769fad81e3f8db8f7e5f5c164656a382a169d735 v1.0.0
-9ed95938d809a8226aca529e34b655e6d8c8c379 release-1.0.1
+9ed95938d809a8226aca529e34b655e6d8c8c379 v1.0.1
-46fe533682419c8a519836ac95b5575053aa0fa8 release-1.0.2
+46fe533682419c8a519836ac95b5575053aa0fa8 v1.0.2
-a2c92b262f339f82eb01c8d92dda252a27432255 release-1.1.0
+a2c92b262f339f82eb01c8d92dda252a27432255 v1.1.0
-d14041daa7bbbd37ea2ff47aa978b9595af67ca3 release-1.1.1
+d14041daa7bbbd37ea2ff47aa978b9595af67ca3 v1.1.1
-7278eb0d067d8ed2a653de6a1feeeb7f76fb9891 release-1.1.2
+7278eb0d067d8ed2a653de6a1feeeb7f76fb9891 v1.1.2
-6cbd9d59630372c0dff430e3dc6c1fbd7dcee734 release-1.1.3
+6cbd9d59630372c0dff430e3dc6c1fbd7dcee734 v1.1.3
-76c178b8f27ec894e79b8f73649fcb3e45a73729 release-1.1.4
+76c178b8f27ec894e79b8f73649fcb3e45a73729 v1.1.4
+0eeab5594ba4d683e6a268ef971675c73b226bd0 v1.2.0
+c8cd84947e4516215e50639914adfaecf350fe91 v1.2.1
+0c6b957de43252f89688ba73c4857f6d912b2912 v1.2.2

.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"]
+        }
+    ]
+}

Gopkg.lock

@@ -0,0 +1,33 @@
+# This file is autogenerated, do not edit; changes may be undone by the next 'dep ensure'.
+
+
+[[projects]]
+  name = "code.ivysaur.me/libnmdc"
+  packages = ["."]
+  revision = "21847db9fdc1b983285de44e789cd9e921bdf1bb"
+  version = "v0.14.0"
+
+[[projects]]
+  branch = "master"
+  name = "github.com/googollee/go-engine.io"
+  packages = [".","message","parser","polling","transport","websocket"]
+  revision = "80ae0e43aca17b4c5a6834999d0f2eaa16b9afda"
+
+[[projects]]
+  branch = "master"
+  name = "github.com/googollee/go-socket.io"
+  packages = ["."]
+  revision = "5447e71f36d394766bf855d5714a487596809f0d"
+
+[[projects]]
+  name = "github.com/gorilla/websocket"
+  packages = ["."]
+  revision = "ea4d1f681babbce9545c9c5f3d5194a789c89f5b"
+  version = "v1.2.0"
+
+[solve-meta]
+  analyzer-name = "dep"
+  analyzer-version = 1
+  inputs-digest = "928468c40a3a664870459e1d5a1fa97fcbc45802fdd498ebf89bcffe0b44ec6e"
+  solver-name = "gps-cdcl"
+  solver-version = 1

Gopkg.toml

@@ -0,0 +1,30 @@
+
+# Gopkg.toml example
+#
+# Refer to https://github.com/golang/dep/blob/master/docs/Gopkg.toml.md
+# for detailed Gopkg.toml documentation.
+#
+# required = ["github.com/user/thing/cmd/thing"]
+# ignored = ["github.com/user/project/pkgX", "bitbucket.org/user/project/pkgA/pkgY"]
+#
+# [[constraint]]
+#   name = "github.com/user/project"
+#   version = "1.0.0"
+#
+# [[constraint]]
+#   name = "github.com/user/project2"
+#   branch = "dev"
+#   source = "github.com/myfork/project2"
+#
+# [[override]]
+#  name = "github.com/x/y"
+#  version = "2.4.0"
+
+
+[[constraint]]
+  name = "code.ivysaur.me/libnmdc"
+  version = "0.14.0"
+
+[[constraint]]
+  branch = "master"
+  name = "github.com/googollee/go-socket.io"

Makefile

@@ -0,0 +1,59 @@
+# Makefile for nmdc-webfrontend
+
+BINNAME=nmdc-webfrontend
+
+VERSION=1.2.3
+
+GOFLAGS=-a \
+	-ldflags "-s -w -X main.VERSION=$(BINNAME)/$(VERSION)" \
+	-gcflags "-trimpath ${GOPATH}" \
+	-asmflags "-trimpath ${GOPATH}"
+
+.PHONY: all dist deps clean clean-deps
+
+all: $(BINNAME) $(BINNAME).exe
+
+dist: $(BINNAME)-$(VERSION)-win32.7z $(BINNAME)-$(VERSION)-linux64.tar.xz $(BINNAME)-$(VERSION)-src.zip
+
+deps:
+	npm i
+	go get -u github.com/jteeuwen/go-bindata/...
+	go get -u github.com/golang/dep/cmd/dep
+	$(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/*
+	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/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
+
+$(BINNAME): bindata.go *.go
+	GOARCH=amd64 GOOS=linux go build $(GOFLAGS) -o $(BINNAME)
+	
+$(BINNAME)-$(VERSION)-win32.7z: $(BINNAME).exe nmdc-webfrontend.conf.SAMPLE
+	7z a -mx9 "$(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.zip:
+	hg archive "$(BINNAME)-$(VERSION)-src.zip" || git archive -o "$(BINNAME)-$(VERSION)-src.zip" HEAD

_dist/README.txt

@@ -6,13 +6,38 @@ Written in Golang
 
 Tags: nmdc
 
+This project supercedes [entry=dcwebui]dcwebui[/entry], [entry=flexdc]flexdc[/entry], and [entry=dcwebui2]dcwebui2[/entry].
+
 =UPGRADING FROM DCWEBUI2=
 
 - The configuration file content is identical between nmdc-webfrontend 1.0.0 and dcwebui2 1.3.0, but please now ensure it's valid JSON instead of arbitrary javascript. This means no assignment, use double-quoted strings, and no comments.
 - Future changes to the configuration file since nmdc-webfrontend 1.0.0 are backward compatible (see the changelog for more details).
 
+=DEVELOPING=
+
+[go-get]code.ivysaur.me/nmdc-webfrontend git https://git.ivysaur.me/code.ivysaur.me/nmdc-webfrontend.git[/go-get]
+
+1. Install Go, Node.js, NPM, and 7-Zip (`p7zip-full` on Debian)
+2. Set up your `$GOPATH`
+3. Download the source code
+    - `git clone https://git.ivysaur.me/code.ivysaur.me/nmdc-webfrontend.git `; or
+    - `go get code.ivysaur.me/nmdc-webfrontend` ; or
+    - download and extract a source archive
+4. Install dependencies: `sudo make deps`
+5. Build: `make`
+6. Optional: Set `web.external_webroot: true` in the config file for unminified development
+
 =CHANGELOG=
 
+2017-10-28 1.2.2
+- Enhancement: Simplify build process
+- Fix an issue with closing PM tabs
+
+2017-10-16 1.2.1
+- Enhancement: Increase scrollback buffer size
+- Fix an issue with missing `contented` upload link once logged in
+- Fix a cosmetic issue with `(0)` appearing in page title
+
 2017-10-15 1.2.0
 - Feature: Add `contented` integration (set `app.contented_server` in config file)
 - Fix a cosmetic issue with the menu icon on devices without unicode font coverage

build.sh

@@ -1,184 +0,0 @@
-#!/bin/bash
-# godist.sh is a template build script for golang applications.
-#
-# Copyright (c) 2016, The godist.sh Author(s)
-#
-# Permission to use, copy, modify, and/or distribute this software for any
-#  purpose with or without fee is hereby granted, provided that the above
-#  copyright notice and this permission notice appear in all copies.
-#
-# THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-#  REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-#  AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-#  INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-#  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE
-#  OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-#  PERFORMANCE OF THIS SOFTWARE.
-#
-
-set -eu
-
-DIST_DIR=./_dist
-
-EXTRA_FILES=(
-	nmdc-webfrontend.conf.SAMPLE
-)
-
-get_package_name() {
-	# Binaries are named after the containing folder.
-	pwd | tr / $'\n' | tail -n1
-}
-
-check_dependencies() {
-	# `set -e` will take care of killing the application if the dependency
-	# goes unresolved.
-	which 7z > /dev/null
-	which php > /dev/null
-}
-
-get_platform_description() {
-	if [[ $GOOS == windows ]] ; then
-		echo -n "win"
-	else
-		echo -n "${GOOS}"
-	fi
-	
-	if [[ $GOARCH == 386 ]] ; then
-		echo -n 32
-	elif [[ $GOARCH == amd64 ]] ; then
-		echo -n 64
-	else
-		echo -n "-${GOARCH}"
-		if [[ -v $GOARM ]] ; then
-			echo -n "v${GOARM}"
-		fi
-	fi
-}
-
-pathfix() {
-	if [[ $(uname -o) == Cygwin ]] ; then
-		cygpath -w "$1"
-	else
-		echo "$1"
-	fi
-}
-
-single_build() {
-	local version="$1"
-
-	# Determine build output name
-	local bin_name=''
-	if [[ $GOOS == windows ]] ; then
-		local_bin_name="$(get_package_name).exe"
-	else
-		local_bin_name="$(get_package_name)"
-	fi
-	
-	if [[ -f ./$local_bin_name ]] ; then
-		rm -f "./$local_bin_name"
-	fi
-	
-	local tmpdir=$(mktemp -d)
-	
-	# Platform identifier
-	local platform="$(get_platform_description)"
-	echo "[INFO] Building ${version} for ${platform}..."
-	
-	# Build.
-	# GOARCH/GOOS supplied in function env
-	local gofwdpath=$(echo -n $GOPATH | sed 's/[\\/]$//')
-	
-	go build \
-		-a \
-		-ldflags "-s -w -X main.VERSION=nmdc-webfrontend/${version}" \
-		-gcflags "-trimpath ${gofwdpath}" \
-		-asmflags "-trimpath ${gofwdpath}" \
-		-o "$(pathfix "${tmpdir}/${local_bin_name}")"
-	
-	# Archive.
-	if [[ ! -d $DIST_DIR ]] ; then
-		mkdir "$DIST_DIR"
-	fi
-	local archive_name="${DIST_DIR}/$(get_package_name)-${version}-${platform}"
-	if [[ $GOOS == windows ]] ; then
-		archive_name="${archive_name}.7z"
-		7z a -mx9 "$archive_name" "${tmpdir}/${local_bin_name}" "${EXTRA_FILES[@]}" >/dev/null
-	else
-		archive_name="${archive_name}.tar.xz"
-		XZ_OPT='-9' tar caf "$archive_name" -C "${tmpdir}" "${local_bin_name}" -C "$(pwd)" "${EXTRA_FILES[@]}" --owner=0 --group=0 >/dev/null
-	fi
-	
-	# Cleanup
-	rm -f "${tmpdir}/${local_bin_name}"
-	rmdir "$tmpdir"
-	
-}
-
-datestamp() {
-	( TZ=UTC date +%Y%m%d%H%M%SZ )
-}
-
-usage() {
-	cat <<EOD
-Usage: ./godist.sh [-v VERSION]
-EOD
-	exit 0
-}
-
-main() {
-
-	check_dependencies
-	
-	if [[ ! -v GOPATH ]] ; then
-		echo "Please set GOPATH." >&2
-		exit 1
-	fi
-	if [[ ! -d $GOPATH ]] ; then
-		echo "Invalid GOPATH set." >&2
-		exit 1
-	fi
-
-	local version=""
-	while getopts ':v:' flag ; do
-		case "$flag" in
-			v)
-				version="$OPTARG"
-			;;
-			*)
-				usage
-			;;
-		esac
-	done
-
-	if [[ $version == "" ]] ; then
-		read -p "Enter version string (blank for timestamp)> " version
-		if [[ $version == "" ]] ; then
-			version=$(datestamp)
-		fi
-	fi
-	
-	if [[ -f ./bindata.go ]] ; then
-		rm ./bindata.go
-	fi
-	php clientpack.php
-	go-bindata -nomemcopy -prefix clientpack clientpack
-	
-	GOARCH=386   GOOS=windows single_build "$version"
-	GOARCH=amd64 GOOS=linux   single_build "$version"
-	
-	# Also make source tarball
-	
-	local SOURCE_FILES=(
-		client/
-		build.sh
-		clientpack.php
-		Config.go
-		main.go
-		nmdc-webfrontend.conf.SAMPLE
-	)
-	XZ_OPT='-9' tar caf "_dist/$(get_package_name)-${version}-src.tar.xz" "${SOURCE_FILES[@]}" --owner=0 --group=0 >/dev/null
-	
-	echo "[INFO] Build complete."
-}
-
-main "$@"

client/dcwebui.js

@@ -1,10 +1,13 @@
 /* dcwebui.js */
-//IIFEMODE:;(function() {
+
-	
+require("./dcwebui.less");
+
+import io from 'socket.io-client'
+
 "use strict";
 
 var SENTINEL_PASSWORD = "************";
-var CHAT_SCROLLBACK_LIMIT = 50; // Once over 2x $limit, the first $limit will be trimmed off the list
+var CHAT_SCROLLBACK_LIMIT = 200; // Once over 2x $limit, the first $limit will be trimmed off the list
 var EXTERN_ROOT = window.location.protocol + "//" + window.location.host + "/";
 
 var el = function(s) {
@@ -509,11 +512,11 @@ var tab_free = function(id) {
 	if (id === "tab-main") return;
 
 	// remove tab item and body
-	var el = el("#tabitem-"+id);
+	var $el = el("#tabitem-"+id);
-	el.parentNode.removeChild(el);
+	$el.parentNode.removeChild($el);
 	
-	var el = el("#"+id);
+	$el = el("#"+id);
-	el.parentNode.removeChild(el);
+	$el.parentNode.removeChild($el);
 	
 	// clear from PM tabs
 	for (var i in pm_tabs) {
@@ -690,6 +693,13 @@ var menu = new MenuList(el("#menubutton"));
 
 menu.reset = function() {
 	this.clear();
+	
+	if (contented_url.length > 0) {
+		menu.add("Upload", function() {
+			contented_load();
+		});
+	}
+	
 	this.add(joinparts_getstr(),  toggle_joinparts);
 	this.add(desktop_notifications_fmtstr(), desktop_notifications_toggle);
 	this.add(warnonclose_fmtstr(), warnonclose_toggle);
@@ -789,7 +799,11 @@ var updateTitle = function() {
 		prefix = "[NEW PM] "
 	}
 	
-	document.title = prefix + hub_hubname + " ("+userlist.count()+")"
+	var suffix = "";
+	if (userlist.count() > 0) {
+		suffix = " ("+userlist.count()+")";
+	}
+	document.title = prefix + hub_hubname + suffix;
 };
 
 var sock = {};
@@ -1176,10 +1190,6 @@ window.onload = function() {
 	});
 	sock.on('contented', function(url) {
 		contented_url = url;
-		menu.add("Upload", function() {
+		menu.reset(); // sent before login
-			contented_load();
-		});
 	});
 };
-
-//IIFEMODE:})();

client/dcwebui.less

@@ -51,14 +51,16 @@ html,body {
 }
 
 /* WiiU placements */
-.navigator-wiiu .placement-mid {
+.navigator-wiiu {
-	bottom:120px;
+	.placement-mid {
-}
+		bottom:120px;
-.navigator-wiiu .placement-bottom {
+	}
-	height:120px;
+	.placement-bottom {
-}
+		height:120px;
-.navigator-wiiu .placement-panel {
+	}
-	bottom: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 {
+	li {
-	color: #333;
+		color: #333;
-	font: bold 15px Geneva, Arial, Helvetica, sans-serif; 
+		font: bold 15px Geneva, Arial, Helvetica, sans-serif; 
-	vertical-align: middle;
+		vertical-align: middle;
-	border-bottom: 1px solid #ccc;
+		border-bottom: 1px solid #ccc;
-	list-style-type: none;
+		list-style-type: none;
-	text-align: left;
+		text-align: left;
-	white-space: nowrap;
+		white-space: nowrap;
-	overflow: hidden;
+		overflow: hidden;
-	height: 30px;
+		height: 30px;
-	list-style-type: none; 
+		list-style-type: none; 
-	display: block;
+		display: block;
-	padding: 15px 5px 5px 10px;
+		padding: 15px 5px 5px 10px;		
-}
+		cursor:pointer;
-.ul-large li:first-child { 
+		
-	border-top: 0;
+		&:first-child {
-	-webkit-border-top-left-radius: 12px;
+			border-top: 0;
-	-webkit-border-top-right-radius: 12px;
+			-webkit-border-top-left-radius: 12px;
-	   -moz-border-top-left-radius: 12px;
+			-webkit-border-top-right-radius: 12px;
-	   -moz-border-top-right-radius: 12px;
+			-moz-border-top-left-radius: 12px;
-	        border-top-left-radius: 12px;
+			-moz-border-top-right-radius: 12px;
-	        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;
+		&:last-child {
-	-webkit-border-bottom-right-radius: 12px;
+			border-bottom: 0;
-	   -moz-border-bottom-left-radius: 12px;
+			-webkit-border-bottom-left-radius: 12px;
-	   -moz-border-bottom-right-radius: 12px;
+			-webkit-border-bottom-right-radius: 12px;
-	        border-bottom-left-radius: 12px;
+			-moz-border-bottom-left-radius: 12px;
-	        border-bottom-right-radius: 12px;
+			-moz-border-bottom-right-radius: 12px;
-}
+					border-bottom-left-radius: 12px;
-
+					border-bottom-right-radius: 12px;
-.ul-large li {
+		}
-	cursor:pointer;
+	}
 }
 
 /* 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;
+	li {
-}
+		list-style-type:none;
-.ul-mini li:hover {
+		min-height:13px;
-	background-color:#EEE;
+		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="apple-touch-icon" href="./apple-touch-icon.png">
-		<link rel="stylesheet" href="/dcwebui.css">
 		<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>

clientpack.php

@@ -1,60 +0,0 @@
-#!/usr/bin/php
-<?php
-
-# Dependencies:
-#   - PHP
-#   - Uglifyjs (`npm install -g uglify-js`)
-#   - Lessc (`npm install -g less`)
-#   - Lessc minifier (`npm install -g less-plugin-clean-css`)
-#   - HTML minifier (`npm install -g html-minifier`)
-
-echo "Compressing/minifying web resources...\n";
-
-if (is_dir('clientpack')) {
-	`rm -r clientpack`;
-}
-
-`cp -r client clientpack`;
-
-// Toggle IIFE on
-
-`sed -i -re 's~//IIFEMODE:~~g' clientpack/dcwebui.js`;
-
-// Minify JS
-
-`uglifyjs clientpack/dcwebui.js -o clientpack/dcwebui.min.js -c -m`;
-
-// Minify CSS
-
-`lessc --clean-css clientpack/dcwebui.css clientpack/dcwebui.min.css`;
-
-// Embed css into HTML file
-
-$html_content = file_get_contents('clientpack/index.htm');
-
-$html_content = preg_replace_callback('~<link[^>]+dcwebui.css[^>]*>~', function() { return '<style type="text/css">'.file_get_contents('clientpack/dcwebui.min.css').'</style>'; }, $html_content);
-
-// Embed JS into HTML file
-
-$html_content = preg_replace_callback('~<script[^>]+dcwebui.js[^>]*>~', function() { return '<script type="text/javascript">'.file_get_contents('clientpack/dcwebui.min.js').'</script>'; }, $html_content);
-
-// Embed socketio into HTML file
-
-define('SIO_NAME', 'socket.io-1.7.2.js');
-$html_content = preg_replace_callback('~<script[^>]+'.SIO_NAME.'[^>]*>~', function() { return '<script type="text/javascript">'.file_get_contents('clientpack/'.SIO_NAME).'</script>'; }, $html_content);
-
-// Minify the combined file
-
-file_put_contents('clientpack/index.htm', $html_content);
-
-`html-minifier --collapse-whitespace -o clientpack/index.min.htm clientpack/index.htm`;
-
-// Clean up files
-
-unlink('clientpack/index.htm');
-unlink('clientpack/dcwebui.js');
-unlink('clientpack/dcwebui.min.js');
-unlink('clientpack/dcwebui.css');
-unlink('clientpack/dcwebui.min.css');
-unlink('clientpack/'.SIO_NAME);
-rename('clientpack/index.min.htm', 'clientpack/index.htm');

main.go

@@ -5,8 +5,9 @@ import (
 	"fmt"
 	"io/ioutil"
 	"log"
+	"mime"
 	"net/http"
-	"strings"
+	"path/filepath"
 
 	"code.ivysaur.me/libnmdc"
 	"github.com/googollee/go-socket.io"
@@ -204,27 +205,8 @@ func (this *App) StaticRequestHandler(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	knownContentTypes := map[string]string{
+	w.Header().Set("Content-Type", mime.TypeByExtension(filepath.Ext(fileName)))
-		".htm": "text/html",
+	w.Header().Set("Content-Length", fmt.Sprintf("%d", len(data)))
-		".png": "image/png",
-		".ico": "image/x-icon",
-		// No CSS/JS since they're embedded in the HTML
-	}
-
-	foundMime := false
-	for ext, mimeType := range knownContentTypes {
-		if strings.HasSuffix(fileName, ext) {
-			w.Header().Set("Content-Type", mimeType)
-			foundMime = true
-			break
-		}
-	}
-	if !foundMime {
-		w.Header().Set("Content-Type", "application/x-octet-stream")
-	}
-	dataInfo, _ := AssetInfo(fileName)
-	w.Header().Set("Content-Length", fmt.Sprintf("%d", dataInfo.Size()))
-
 	w.Write(data)
 }
 

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: [ /\.*/ ]
+		})
+    ]
+};