use url-parse for more reliable slug calculation

assets/js/src/counter.js

@@ -1,38 +1,41 @@
 import fetch from "cross-fetch";
+import urlParse from "url-parse";
 import numeral from "numeral";
 
 // don't continue if there isn't a span#meta-hits element on this page
 const wrapper = document.getElementById("meta-hits");
 
-if (wrapper) {
+// use <link rel="canonical"> to deduce a consistent identifier for this page
+const canonical = document.querySelector("link[rel='canonical']");
+
+// page must have both span#meta-hits and canonical URL to enter
+if (wrapper && canonical) {
   // javascript is enabled so show the loading indicator
   wrapper.style.display = "inline-block";
 
-  // deduce a consistent identifier for this page, no matter the URL
+  // get path and strip beginning and ending forward slash
-  const canonical = document.createElement("a");
+  const slug = urlParse(canonical.href).pathname.replace(/^\/|\/$/g, "");
-  canonical.href = document.querySelector("link[rel='canonical']").href;
-
-  // strip beginning and ending forward slash
-  const slug = canonical.pathname.slice(1, -1);
 
   fetch(`/api/hits/?slug=${encodeURIComponent(slug)}`)
     .then((response) => response.json())
     .then((data) => {
       if (data.hits) {
-        // finally inject the hits and hide the loading spinner
+        // pretty number and units
-        const spinner = document.getElementById("hit-spinner");
-        const counter = document.getElementById("hit-counter");
-
         const hitsComma = numeral(data.hits).format("0,0");
         const hitsPlural = data.hits === 1 ? "hit" : "hits";
+        wrapper.title = hitsComma + " " + hitsPlural;
 
-        if (spinner) {
+        // finally inject the hits...
-          spinner.style.display = "none";
+        const counter = document.getElementById("hit-counter");
-        }
         if (counter) {
           counter.appendChild(document.createTextNode(hitsComma));
         }
-        wrapper.title = hitsComma + " " + hitsPlural;
+
+        // ...and hide the loading spinner
+        const spinner = document.getElementById("hit-spinner");
+        if (spinner) {
+          spinner.style.display = "none";
+        }
       } else {
         // something went horribly wrong, initiate coverup
         wrapper.style.display = "none";

assets/sass/components/_animation.scss

@@ -1,6 +1,6 @@
 @use "../abstracts/themes";
 
-/*! Magic Waving Hand Emoji™: https://jrvs.io/wave */
+/*! Magic Waving Hand Emoji™ | MIT License | jrvs.io/wave */
 .wave {
   display: inline-block;
   animation: wave 5s infinite;

package.json

@@ -50,7 +50,8 @@
     "numeral": "2.0.6",
     "query-string": "7.0.1",
     "twemoji": "13.1.0",
-    "twemoji-emojis": "14.1.0"
+    "twemoji-emojis": "14.1.0",
+    "url-parse": "1.5.3"
   },
   "devDependencies": {
     "@babel/core": "^7.14.8",
@@ -59,6 +60,7 @@
     "@types/node-fetch": "^2.5.12",
     "@types/numeral": "^2.0.1",
     "@types/twemoji": "^12.1.2",
+    "@types/url-parse": "^1.4.3",
     "@typescript-eslint/eslint-plugin": "^4.28.5",
     "@typescript-eslint/parser": "^4.28.5",
     "@vercel/node": "^1.11.1",

webpack.config.js

@@ -45,10 +45,8 @@ export default {
       filename: isProd ? "css/[name]-[contenthash:6].css" : "css/[name].css",
     }),
     new webpack.BannerPlugin({
-      banner: `Released under the MIT License. Copyright (c) 2017-${new Date().getFullYear()} Jake Jarvis.
+      banner: `@license MIT <https://opensource.org/licenses/MIT>
-
+@copyright (c) 2017-${new Date().getFullYear()} Jake Jarvis <https://jarv.is/>`,
-Website: https://jarv.is/
-GitHub: https://github.com/jakejarvis/jarv.is`,
     }),
     new CopyPlugin({
       patterns: [

yarn.lock

@@ -1314,6 +1314,11 @@
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.6.tgz#250a7b16c3b91f672a24552ec64678eeb1d3a08d"
   integrity sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==
 
+"@types/url-parse@^1.4.3":
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/@types/url-parse/-/url-parse-1.4.3.tgz#fba49d90f834951cb000a674efee3d6f20968329"
+  integrity sha512-4kHAkbV/OfW2kb5BLVUuUMoumB3CP8rHqlw48aHvFy5tf9ER0AfOonBlX29l/DD68G70DmyhRlSYfQPSYpC5Vw==
+
 "@types/yargs-parser@*":
   version "20.2.1"
   resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-20.2.1.tgz#3b9ce2489919d9e4fea439b76916abc34b2df129"
@@ -8441,6 +8446,11 @@ query-string@^5.0.1:
     object-assign "^4.1.0"
     strict-uri-encode "^1.0.0"
 
+querystringify@^2.1.1:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
+  integrity sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==
+
 queue-microtask@^1.2.2:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
@@ -10471,6 +10481,14 @@ url-parse-lax@^3.0.0:
   dependencies:
     prepend-http "^2.0.0"
 
+url-parse@1.5.3:
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.3.tgz#71c1303d38fb6639ade183c2992c8cc0686df862"
+  integrity sha512-IIORyIQD9rvj0A4CLWsHkBBJuNqWpFQe224b6j9t/ABmquIS0qDU2pY6kl6AuOrL5OkCXHMCFNe1jBcuAggjvQ==
+  dependencies:
+    querystringify "^2.1.1"
+    requires-port "^1.0.0"
+
 url-to-options@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/url-to-options/-/url-to-options-1.0.1.tgz#1505a03a289a48cbd7a434efbaeec5055f5633a9"