super simple serverless hit counter for fun (#410)

assets/js/counter.js

@@ -0,0 +1,31 @@
+(function () {
+  // don't continue if there isn't a span#meta-hits element on this page
+  var wrapper = document.getElementById("meta-hits");
+
+  if (wrapper) {
+    wrapper.style.display = "inline-block";
+
+    // deduce a consistent identifier for this page, no matter the URL
+    var canonical = document.createElement("a");
+    canonical.href = document.querySelector("link[rel='canonical']").href;
+
+    // strip beginning and ending forward slash
+    var slug = canonical.pathname.slice(1, -1);
+
+    // this will return an error from the API anyways
+    if (!slug || slug === "/") return;
+
+    fetch("/api/hits?slug=" + slug)
+      .then((response) => response.json())
+      .then((data) => {
+        // finally inject the hits and hide the loading spinner
+        var spinner = document.getElementById("hit-spinner");
+        var counter = document.getElementById("hit-counter");
+
+        spinner.style.display = "none";
+        wrapper.title = data.pretty_hits + " " + data.pretty_unit;
+        counter.appendChild(document.createTextNode(data.pretty_hits));
+      })
+      .catch((error) => {});
+  }
+})();

assets/sass/components/_animation.scss

@@ -16,6 +16,31 @@
   will-change: transform; // stylelint-disable-line plugin/no-unsupported-browser-features
 }
 
+// modified from https://tobiasahlin.com/spinkit/
+.spinner {
+  width: 20px;
+  text-align: center;
+  display: inline-block;
+
+  > div {
+    width: 5px;
+    height: 10px;
+    display: inline-block;
+    animation: loader 1.4s infinite ease-in-out both;
+
+    @include colors() {
+      background-color: c(medium-light);
+    }
+  }
+
+  .spin-bounce1 {
+    animation-delay: -0.32s;
+  }
+  .spin-bounce2 {
+    animation-delay: -0.16s;
+  }
+}
+
 @keyframes wave {
   0% {
     transform: rotate(0deg);
@@ -66,6 +91,17 @@
   }
 }
 
+@keyframes loader {
+  0%,
+  80%,
+  100% {
+    transform: scale(0);
+  }
+  40% {
+    transform: scale(0.6);
+  }
+}
+
 // https://web.dev/prefers-reduced-motion/#(bonus)-forcing-reduced-motion-on-all-websites
 @media (prefers-reduced-motion: reduce) {
   *,

assets/sass/pages/_single.scss

@@ -6,10 +6,10 @@ div.layout-single {
   padding-bottom: 1em;
 
   div#meta {
-    font-size: 0.875em;
-    line-height: 1.3;
+    font-size: 0.825em;
+    line-height: 1.8;
     letter-spacing: 0.04em;
-    margin-top: 0.8em;
+    margin-top: 0.5em;
 
     @include colors() {
       color: c(medium);
@@ -19,8 +19,15 @@ div.layout-single {
       color: inherit;
     }
 
-    span.dash {
-      margin: 0 0.7em;
+    > span {
+      margin-right: 1.25em;
+      white-space: nowrap;
+
+      img.emoji {
+        margin-right: 0.25em;
+        vertical-align: -0.27em;
+        cursor: inherit;
+      }
     }
   }