From 5b44ffd93c87c4347bf2198af956de37e17cf795 Mon Sep 17 00:00:00 2001 From: Jake Jarvis Date: Sat, 31 Jul 2021 15:49:32 -0400 Subject: [PATCH] use url-parse for more reliable slug calculation --- assets/js/src/counter.js | 33 ++++++++++++++------------ assets/sass/components/_animation.scss | 2 +- package.json | 4 +++- webpack.config.js | 6 ++--- yarn.lock | 18 ++++++++++++++ 5 files changed, 42 insertions(+), 21 deletions(-) diff --git a/assets/js/src/counter.js b/assets/js/src/counter.js index 7bdf93ec..14d82907 100644 --- a/assets/js/src/counter.js +++ b/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 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 - const canonical = document.createElement("a"); - canonical.href = document.querySelector("link[rel='canonical']").href; - - // strip beginning and ending forward slash - const slug = canonical.pathname.slice(1, -1); + // get path and strip beginning and ending forward slash + const slug = urlParse(canonical.href).pathname.replace(/^\/|\/$/g, ""); fetch(`/api/hits/?slug=${encodeURIComponent(slug)}`) .then((response) => response.json()) .then((data) => { if (data.hits) { - // finally inject the hits and hide the loading spinner - const spinner = document.getElementById("hit-spinner"); - const counter = document.getElementById("hit-counter"); - + // pretty number and units const hitsComma = numeral(data.hits).format("0,0"); const hitsPlural = data.hits === 1 ? "hit" : "hits"; + wrapper.title = hitsComma + " " + hitsPlural; - if (spinner) { - spinner.style.display = "none"; - } + // finally inject the hits... + 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"; diff --git a/assets/sass/components/_animation.scss b/assets/sass/components/_animation.scss index dd6637fc..ff5030e2 100644 --- a/assets/sass/components/_animation.scss +++ b/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; diff --git a/package.json b/package.json index 4f3c0f0c..2ac0982a 100644 --- a/package.json +++ b/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", diff --git a/webpack.config.js b/webpack.config.js index 60eb1a50..9337934c 100644 --- a/webpack.config.js +++ b/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. - -Website: https://jarv.is/ -GitHub: https://github.com/jakejarvis/jarv.is`, + banner: `@license MIT +@copyright (c) 2017-${new Date().getFullYear()} Jake Jarvis `, }), new CopyPlugin({ patterns: [ diff --git a/yarn.lock b/yarn.lock index 16ee7c63..02566bf1 100644 --- a/yarn.lock +++ b/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"