date-fns -> dayjs (much smaller), numeral -> toLocaleString

assets/js/src/counter.js

@@ -1,5 +1,4 @@
 import fetch from "cross-fetch";
-import numeral from "numeral";
 import canonicalUrl from "get-canonical-url";
 import urlParse from "url-parse";
 
@@ -31,7 +30,7 @@ if (wrapper && canonical) {
     .then((response) => response.json())
     .then((data) => {
       // pretty number and units
-      const hitsComma = numeral(data.hits).format("0,0");
+      const hitsComma = data.hits.toLocaleString("en-US");
       const hitsPlural = data.hits === 1 ? "view" : "views";
       wrapper.title = `${hitsComma} ${hitsPlural}`;
 

assets/js/src/projects.js

@@ -2,8 +2,9 @@ import fetch from "cross-fetch";
 import { render } from "lit-html";
 import { html } from "lit-html/static.js";
 import { ifDefined } from "lit-html/directives/if-defined.js";
-import numeral from "numeral";
-import { format, formatDistanceToNowStrict, parseJSON } from "date-fns";
+import dayjs from "dayjs";
+import dayjsLocalizedFormat from "dayjs/plugin/localizedFormat.js";
+import dayjsRelativeTime from "dayjs/plugin/relativeTime.js";
 import twemoji from "twemoji";
 
 // API endpoint (sort by stars, limit to 12)
@@ -14,6 +15,9 @@ const PROJECTS_ENDPOINT = "/api/projects/?top&limit=12";
 const wrapper = document.getElementById("github-cards");
 
 if (wrapper) {
+  dayjs.extend(dayjsLocalizedFormat);
+  dayjs.extend(dayjsRelativeTime);
+
   // this is a total sh*tshow, but safer than setting one big string via innerHTML :)
   // TODO: consider making this a real LitElement?
   const template = (repo) => html`
@@ -34,7 +38,7 @@ if (wrapper) {
       ${repo.stars > 0
         ? html`<div
             class="repo-meta-item"
-            title="${numeral(repo.stars).format("0,0")} ${repo.stars === 1 ? "star" : "stars"}"
+            title="${repo.stars.toLocaleString("en-US")} ${repo.stars === 1 ? "star" : "stars"}"
           >
             <svg viewBox="0 0 16 16" height="16" width="16">
               <path
@@ -42,13 +46,13 @@ if (wrapper) {
                 d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"
               ></path>
             </svg>
-            <span>${numeral(repo.stars).format("0,0")}</span>
+            <span>${repo.stars.toLocaleString("en-US")}</span>
           </div>`
         : null}
       ${repo.forks > 0
         ? html`<div
             class="repo-meta-item"
-            title="${numeral(repo.forks).format("0,0")} ${repo.forks === 1 ? "fork" : "forks"}"
+            title="${repo.forks.toLocaleString("en-US")} ${repo.forks === 1 ? "fork" : "forks"}"
           >
             <svg viewBox="0 0 16 16" height="16" width="16">
               <path
@@ -56,17 +60,12 @@ if (wrapper) {
                 d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"
               ></path>
             </svg>
-            <span>${numeral(repo.forks).format("0,0")}</span>
+            <span>${repo.forks.toLocaleString("en-US")}</span>
           </div>`
         : null}
 
-      <div
-        class="repo-meta-item"
-        title="${format(parseJSON(repo.updatedAt), "MMM d, yyyy, h:mm aa z")}"
-      >
-        <span>
-          Updated ${formatDistanceToNowStrict(parseJSON(repo.updatedAt), { addSuffix: true })}
-        </span>
+      <div class="repo-meta-item" title="${dayjs(repo.updatedAt).format("lll Z")}">
+        <span>Updated ${dayjs(repo.updatedAt).fromNow()}</span>
       </div>
     </div>
   `;

package.json

@@ -34,7 +34,7 @@
     "clipboard": "^2.0.8",
     "cross-fetch": "^3.1.4",
     "dark-mode-switcheroo": "^0.9.1",
-    "date-fns": "^2.25.0",
+    "dayjs": "^1.10.7",
     "fast-xml-parser": "^3.21.0",
     "faunadb": "^4.4.1",
     "get-canonical-url": "^1.0.1",
@@ -45,7 +45,6 @@
     "lit-html": "^2.0.1",
     "modern-normalize": "^1.1.0",
     "node-fetch": "^3.0.0",
-    "numeral": "^2.0.6",
     "query-string": "^7.0.1",
     "simple-anchor": "^1.0.3",
     "trim-newlines": "^4.0.2",

yarn.lock

@@ -3007,10 +3007,10 @@ data-uri-to-buffer@^3.0.1:
   resolved "https://registry.yarnpkg.com/data-uri-to-buffer/-/data-uri-to-buffer-3.0.1.tgz#594b8973938c5bc2c33046535785341abc4f3636"
   integrity sha512-WboRycPNsVw3B3TL559F7kuBUM4d8CgMEvk6xEJlOp7OBPjt6G7z8WMWlD2rOFZLk6OYfFIUGsCOWzcQH9K2og==
 
-date-fns@^2.25.0:
-  version "2.25.0"
-  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.25.0.tgz#8c5c8f1d958be3809a9a03f4b742eba894fc5680"
-  integrity sha512-ovYRFnTrbGPD4nqaEqescPEv1mNwvt+UTqI3Ay9SzNtey9NZnYu6E2qCcBBgJ6/2VF1zGGygpyTDITqpQQ5e+w==
+dayjs@^1.10.7:
+  version "1.10.7"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.7.tgz#2cf5f91add28116748440866a0a1d26f3a6ce468"
+  integrity sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig==
 
 debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.9:
   version "2.6.9"
@@ -7123,11 +7123,6 @@ number-is-nan@^1.0.0:
   resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
   integrity sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=
 
-numeral@^2.0.6:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/numeral/-/numeral-2.0.6.tgz#4ad080936d443c2561aed9f2197efffe25f4e506"
-  integrity sha1-StCAk21EPCVhrtnyGX7//iX05QY=
-
 nyc@^15.1.0:
   version "15.1.0"
   resolved "https://registry.yarnpkg.com/nyc/-/nyc-15.1.0.tgz#1335dae12ddc87b6e249d5a1994ca4bdaea75f02"