apply webhint suggestions

5 files changed, 176 insertions, 42 deletions

diff --git a/package-lock.json b/package-lock.json
index e9b516d..bc4b63e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38,6 +38,15 @@
       "integrity": "sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==",
       "dev": true
     },
+    "@gfx/zopfli": {
+      "version": "1.0.14",
+      "resolved": "https://registry.npmjs.org/@gfx/zopfli/-/zopfli-1.0.14.tgz",
+      "integrity": "sha512-3BuC4gWCvNz5fd2VdVSOQegtv1lTGT8DUTuqvE6M16uAjgBod+vhHCXTlKMtZA4s2+z3IDAgQm/k3RkhYNodiA==",
+      "dev": true,
+      "requires": {
+        "base64-js": "^1.3.0"
+      }
+    },
     "@hapi/address": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.0.0.tgz",
@@ -3753,6 +3762,96 @@
         }
       }
     },
+    "compression-webpack-plugin": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/compression-webpack-plugin/-/compression-webpack-plugin-3.0.0.tgz",
+      "integrity": "sha512-ls+oKw4eRbvaSv/hj9NmctihhBcR26j76JxV0bLRLcWhrUBdQFgd06z/Kgg7exyQvtWWP484wZxs0gIUX3NO0Q==",
+      "dev": true,
+      "requires": {
+        "cacache": "^11.2.0",
+        "find-cache-dir": "^3.0.0",
+        "neo-async": "^2.5.0",
+        "schema-utils": "^1.0.0",
+        "serialize-javascript": "^1.4.0",
+        "webpack-sources": "^1.0.1"
+      },
+      "dependencies": {
+        "find-cache-dir": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.0.0.tgz",
+          "integrity": "sha512-t7ulV1fmbxh5G9l/492O1p5+EBbr3uwpt6odhFTMc+nWyhmbloe+ja9BZ8pIBtqFWhOmCWVjx+pTW4zDkFoclw==",
+          "dev": true,
+          "requires": {
+            "commondir": "^1.0.1",
+            "make-dir": "^3.0.0",
+            "pkg-dir": "^4.1.0"
+          }
+        },
+        "find-up": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+          "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+          "dev": true,
+          "requires": {
+            "locate-path": "^5.0.0",
+            "path-exists": "^4.0.0"
+          }
+        },
+        "locate-path": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+          "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^4.1.0"
+          }
+        },
+        "make-dir": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.0.0.tgz",
+          "integrity": "sha512-grNJDhb8b1Jm1qeqW5R/O63wUo4UXo2v2HMic6YT9i/HBlF93S8jkMgH7yugvY9ABDShH4VZMn8I+U8+fCNegw==",
+          "dev": true,
+          "requires": {
+            "semver": "^6.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+          "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+          "dev": true,
+          "requires": {
+            "p-limit": "^2.2.0"
+          }
+        },
+        "path-exists": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+          "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+          "dev": true
+        },
+        "pkg-dir": {
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
+          "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
+          "dev": true,
+          "requires": {
+            "find-up": "^4.0.0"
+          }
+        },
+        "schema-utils": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
+          "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
+          "dev": true,
+          "requires": {
+            "ajv": "^6.1.0",
+            "ajv-errors": "^1.0.0",
+            "ajv-keywords": "^3.1.0"
+          }
+        }
+      }
+    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
diff --git a/package.json b/package.json
index 9513575..6fcbe10 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,9 @@
 {
   "name": "themanaworld-website",
   "version": "5.0.0",
+  "engines": {
+    "node": ">=11.7.0"
+  },
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -19,6 +22,7 @@
     "vue-script2": "^2.1.0"
   },
   "devDependencies": {
+    "@gfx/zopfli": "^1.0.14",
     "@hint/configuration-web-recommended": "^6.2.2",
     "@types/chai": "^4.1.0",
     "@types/mocha": "^5.2.4",
@@ -27,6 +31,7 @@
     "@vue/cli-service": "^3.9.3",
     "@vue/test-utils": "1.0.0-beta.29",
     "chai": "^4.1.2",
+    "compression-webpack-plugin": "^3.0.0",
     "hint": "^5.0.2",
     "postcss-preset-env": "^6.7.0",
     "typescript": "^3.5.3",
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
index 991e8e8..749bc61 100644
--- a/src/components/Navigation.vue
+++ b/src/components/Navigation.vue
@@ -1,30 +1,34 @@
 <template>
 	<nav class="nav" id="nav">
-		<a href="#nav" class="hamburger"></a>
-		<ul>
-			<li><router-link :class="{ 'custom-active': isHome }" :to="{ name: 'home' }">Home</router-link></li>
-			<li><router-link :to="{ name: 'registration' }">Create Account</router-link></li>
-			<li><a href="https://wiki.themanaworld.org/index.php/Downloads">Download</a></li>
-			<li><router-link :to="{ name: 'about' }">About</router-link></li>
-			<li><a href="https://wiki.themanaworld.org/index.php/FAQ">FAQ</a></li> <!-- we might want to put FAQ under About, or put About on the wiki -->
-			<li><router-link :class="{ 'custom-active': isSupport }" :to="{ name: 'support' }">Support</router-link></li>
-			<li><a href="https://wiki.themanaworld.org/">Wiki</a></li>
-			<li><a href="https://forums.themanaworld.org/">Forums</a></li>
-		</ul>
+		<a href="#nav" class="hamburger">☰</a>
+		<div>
+			<ul>
+				<li><router-link :class="{ 'custom-active': isHome }" :to="{ name: 'home' }">Home</router-link></li>
+				<li><router-link :to="{ name: 'registration' }">Create Account</router-link></li>
+				<li><a href="https://wiki.themanaworld.org/index.php/Downloads">Download</a></li>
+				<li><router-link :to="{ name: 'about' }">About</router-link></li>
+				<li><a href="https://wiki.themanaworld.org/index.php/FAQ">FAQ</a></li> <!-- we might want to put FAQ under About, or put About on the wiki -->
+				<li><router-link :class="{ 'custom-active': isSupport }" :to="{ name: 'support' }">Support</router-link></li>
+				<li><a href="https://wiki.themanaworld.org/">Wiki</a></li>
+				<li><a href="https://forums.themanaworld.org/">Forums</a></li>
+			</ul>
+		</div>
 		<div class="server">
 			<span>Server Status</span>
 			<ServerStatus class="status"/>
 		</div>
 		<div class="screenshots">
-			<a href="https://wiki.themanaworld.org/index.php/Screenshots"></a>
+			<a href="https://wiki.themanaworld.org/index.php/Screenshots">Screenshots</a>
 		</div>
-		<ul>
+		<div>
 			<span>Source Code</span>
-			<li><a href="https://github.com/themanaworld">The Mana World</a></li>
-			<li><a href="https://gitlab.com/evol">Evol Online</a></li>
-			<li><a href="https://gitlab.com/manaplus">ManaPlus</a></li>
-			<li><a href="https://github.com/bjorn/tiled">Tiled</a></li>
-		</ul>
+			<ul>
+				<li><a href="https://github.com/themanaworld">The Mana World</a></li>
+				<li><a href="https://gitlab.com/evol">Evol Online</a></li>
+				<li><a href="https://gitlab.com/manaplus">ManaPlus</a></li>
+				<li><a href="https://github.com/bjorn/tiled">Tiled</a></li>
+			</ul>
+		</div>
 	</nav>
 </template>
 
@@ -45,21 +49,35 @@
 		color: gray(50);
 		z-index: 300;
 		display: block;
-
-		&::before {
-			content: "☰";
-		}
 	}
 
-	& ul, & div {
+	& div {
 		background: #CBA083;
-		margin: 0px;
-		padding: 0px;
+		margin: 0;
+		padding: 0;
 		border-radius: 5px;
 		border: solid 1px #2f2e32;
-		list-style: none;
 		margin-bottom: 13px;
 
+		& ul {
+			list-style: none;
+			margin: 0;
+			padding: 0;
+
+			& li {
+				margin-left: 0.8ch;
+				margin-right: 0.8ch;
+
+				&:first-of-type {
+					margin-top: 0.8ch;
+				}
+
+				&:last-of-type {
+					margin-bottom: 0.8ch;
+				}
+			}
+		}
+
 		& span {
 			text-align: center;
 			display: block;
@@ -82,20 +100,6 @@
 		}
 	}
 
-	& ul li {
-		margin-left: 0.8ch;
-		margin-right: 0.8ch;
-
-		&:first-of-type {
-			margin-top: 0.8ch;
-		}
-
-		&:last-of-type {
-			margin-bottom: 0.8ch;
-		}
-	}
-
-
 	& .server > .status {
 		text-align: center;
 		font-weight: bolder;
@@ -115,6 +119,7 @@
 			padding: 0;
 			width: 133px;
 			height: 100px;
+			color: rgba(0, 0, 0, 0);
 
 			&:hover {
 				opacity: 0.8;
diff --git a/src/components/ServerStatus.vue b/src/components/ServerStatus.vue
index c35e916..cb4c2e6 100644
--- a/src/components/ServerStatus.vue
+++ b/src/components/ServerStatus.vue
@@ -1,7 +1,7 @@
 <template>
 	<aside>
-		<a v-if="Online && Players" target="_blank" href="https://server.themanaworld.org">Online: {{Players}} players</a>
-		<a v-if="Online && !Players" target="_blank" href="https://server.themanaworld.org">Online</a>
+		<a v-if="Online && Players" target="_blank" rel="noopener" href="https://server.themanaworld.org">Online: {{Players}} players</a>
+		<a v-if="Online && !Players" target="_blank" rel="noopener" href="https://server.themanaworld.org">Online</a>
 		<a v-if="!Online" class="offline" target="_blank" rel="noopener" href="https://www.youtube.com/watch?v=ILVfzx5Pe-A">Offline</a>
 	</aside>
 </template>
@@ -9,6 +9,7 @@
 <style scoped>
 aside :any-link {
 	text-decoration: none;
+	text-shadow: 0 0 1ch #e1d6cf;
 	color: green;
 	display: block;
 	padding: 8px;
diff --git a/vue.config.js b/vue.config.js
index 6d8895c..ce3973e 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,5 +1,29 @@
 // see https://cli.vuejs.org/config
+const CompressionPlugin = require("compression-webpack-plugin");
+const zopfli = require("@gfx/zopfli");
 
 module.exports = {
 	//integrity: true, // enable SRI in script/style tags
+	parallel: true,
+	configureWebpack: {
+		plugins: [
+			new CompressionPlugin({
+				filename: '[path].br[query]',
+				algorithm: 'brotliCompress',
+				test: /\.(js|css|html|svg|ico|png|webp|ttf|woff|woff2)$/,
+				compressionOptions: { level: 11 },
+				threshold: 10240,
+				minRatio: 0.8,
+				deleteOriginalAssets: false,
+			}),
+			new CompressionPlugin({
+				compressionOptions: {
+					numiterations: 15,
+				},
+				algorithm (input, compressionOptions, callback) {
+					return zopfli.gzip(input, compressionOptions, callback);
+				},
+			}),
+		],
+	}
 }