use preact for common components across site (#663)

* convert GitHub cards grid from lit-html to preact

* give hit counter the preact treatment

* extract loading spinner component to a shared location

* move *some* loading spinner styles to its JSX

* Update .percy.yml

* pick up images in JS w/ webpack

* pull star/fork icons straight from @primer/octicons

* a bit of cleanup

* check `typeof window !== "undefined"` before rendering

* bump misc. deps

* silence missing license warnings for preact-hooks and preact-compat

* add source-map-loader

* Update loading.js

assets/sass/components/_animation.scss

@@ -15,34 +15,6 @@
   will-change: transform;
 }
 
-// modified from https://tobiasahlin.com/spinkit/
-.loading {
-  text-align: center;
-
-  > div {
-    display: inline-block;
-    animation: loading 1.5s infinite ease-in-out both;
-
-    // stylelint-disable rule-empty-line-before
-    &:nth-child(1) {
-      animation-delay: -0.32s;
-    }
-    &:nth-child(2) {
-      animation-delay: -0.16s;
-    }
-    &:nth-child(3) {
-      animation-delay: 0s;
-    }
-    // stylelint-enable rule-empty-line-before
-
-    @include themes.themed(
-      (
-        background-color: "medium-light",
-      )
-    );
-  }
-}
-
 @keyframes wave {
   // stylelint-disable rule-empty-line-before
   0% {
@@ -99,6 +71,7 @@
   // stylelint-enable rule-empty-line-before
 }
 
+// modified from https://tobiasahlin.com/spinkit/
 @keyframes loading {
   // stylelint-disable rule-empty-line-before
   0%,

assets/sass/components/_global.scss

@@ -161,6 +161,19 @@ a img.emoji {
   cursor: inherit;
 }
 
+// pulsating loading spinner
+.loading {
+  display: inline-block;
+
+  > div {
+    @include themes.themed(
+      (
+        background-color: "medium-light",
+      )
+    );
+  }
+}
+
 // Responsive
 @mixin responsive() {
   body {

assets/sass/pages/_projects.scss

@@ -14,17 +14,6 @@ div.layout-projects {
     text-align: center;
   }
 
-  div#loading-spinner {
-    width: 40px;
-    display: block;
-    margin: 1.2em auto 0 auto;
-
-    > div {
-      width: 10px;
-      height: 20px;
-    }
-  }
-
   div#github-cards {
     display: flex;
     flex-flow: row wrap;
@@ -34,7 +23,6 @@ div.layout-projects {
 
     div.github-card {
       flex-grow: 1;
-      display: block;
       width: 416px; // magic number
       padding: 1em 1.2em;
       margin: 0.6em;
@@ -55,7 +43,7 @@ div.layout-projects {
       }
 
       p.repo-description {
-        margin: 0.3em 0 0.6em 0;
+        margin: 0.2em 0 0.8em 0;
       }
 
       div.repo-meta {
@@ -63,8 +51,6 @@ div.layout-projects {
         flex-wrap: wrap;
 
         div.repo-meta-item {
-          display: inline-block;
-          align-self: baseline;
           margin-right: 1.5em;
           font-size: 0.925em;
 
@@ -74,22 +60,19 @@ div.layout-projects {
             )
           );
 
-          svg {
-            display: inline-block;
-            position: relative;
-            top: 0.25em;
-            margin-right: 0.2em;
-            fill: currentColor;
+          .octicon,
+          span.repo-language-color {
+            margin-right: 0.5em;
           }
 
           span.repo-language-color {
             display: inline-block;
-            width: 1.2em;
-            height: 1.2em;
+            width: 1.15em;
+            height: 1.15em;
             border-radius: 50%;
             position: relative;
-            top: 0.235em;
-            margin-right: 0.2em;
+            top: 0.175em;
+            margin-right: 0.5em;
           }
         }
       }

assets/sass/pages/_single.scss

@@ -81,16 +81,6 @@ div.layout-single {
         }
       }
     }
-
-    div#meta-hits-loading {
-      display: inline-block;
-      width: 20px;
-
-      > div {
-        width: 5px;
-        height: 10px;
-      }
-    }
   }
 
   h1.title {