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

webpack.config.js

@@ -34,6 +34,13 @@ export default {
     },
     devtoolModuleFilenameTemplate: "webpack:///[resource-path]",
   },
+  resolve: {
+    alias: {
+      // https://preactjs.com/guide/v10/getting-started#aliasing-in-webpack
+      react: "preact/compat",
+      "react-dom": "preact/compat",
+    },
+  },
   plugins: [
     new MiniCssExtractPlugin({
       filename: isProd ? "css/[name]-[contenthash:6].css" : "css/[name].css",
@@ -51,10 +58,6 @@ export default {
  * See here for third-party libraries: https://jarv.is/assets/${filename}
  */`,
       additionalModules: [
-        {
-          name: "lit-html",
-          directory: path.join(__dirname, "node_modules", "lit-html"),
-        },
         {
           name: "twemoji",
           directory: path.join(__dirname, "node_modules", "twemoji"),
@@ -63,6 +66,7 @@ export default {
       licenseFileOverrides: {
         twemoji: "LICENSE-GRAPHICS", // we only use the emojis, not the bundled code
       },
+      excludedPackageTest: (packageName) => packageName.startsWith("preact-"),
     }),
     new CopyPlugin({
       patterns: [
@@ -96,6 +100,11 @@ export default {
   ],
   module: {
     rules: [
+      {
+        test: /\.js$/,
+        enforce: "pre",
+        use: ["source-map-loader"],
+      },
       {
         test: /\.js$/,
         exclude: /node_modules/,
@@ -114,18 +123,10 @@ export default {
               ],
               plugins: [
                 [
-                  "template-html-minifier",
+                  "@babel/plugin-transform-react-jsx",
                   {
-                    modules: {
-                      "lit-html": ["html"],
-                      "lit-html/static.js": ["html"],
-                    },
-                    htmlMinifier: {
-                      html5: true,
-                      caseSensitive: true,
-                      collapseWhitespace: true,
-                      removeComments: false,
-                    },
+                    pragma: "h",
+                    pragmaFrag: "Fragment",
                   },
                 ],
               ],
@@ -167,6 +168,13 @@ export default {
           },
         ],
       },
+      {
+        test: /\.(png|jp(e*)g|svg|gif|ico)$/,
+        type: "asset/resource",
+        generator: {
+          filename: isProd ? "images/[name]-[contenthash:6][ext]" : "images/[name][ext]",
+        },
+      },
       {
         test: /\.(woff(2)?|ttf|otf|eot)$/,
         type: "asset/resource",
@@ -196,7 +204,7 @@ export default {
           },
           format: {
             // cut all comments except for the banner declared above via LicensePlugin:
-            comments: (astNode, comment) => comment.value.toLowerCase().includes("third-party libraries"),
+            comments: (_astNode, comment) => comment.value.toLowerCase().includes("third-party libraries"),
             ascii_only: true, // some symbols get disfigured otherwise
           },
           mangle: true,