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

package.json

@@ -30,6 +30,7 @@
     "@fontsource/inter": "4.5.1",
     "@fontsource/roboto-mono": "4.5.0",
     "@octokit/graphql": "^4.8.0",
+    "@primer/octicons-react": "^16.1.1",
     "@sentry/node": "^6.15.0",
     "clipboard-copy": "^4.0.1",
     "cross-fetch": "^3.1.4",
@@ -40,10 +41,10 @@
     "get-stream": "^6.0.1",
     "html-entities": "^2.3.2",
     "imagemoji": "^0.1.4",
-    "lit-html": "^2.0.2",
     "modern-normalize": "github:sindresorhus/modern-normalize#1fc6b5a86676b7ac8abc62d04d6080f92debc70f",
     "node-fetch": "^3.1.0",
     "p-retry": "^5.0.0",
+    "preact": "^10.6.0",
     "query-string": "^7.0.1",
     "rss-parser": "^3.12.0",
     "simple-anchor": "^1.0.3",
@@ -55,23 +56,23 @@
   "devDependencies": {
     "@babel/core": "^7.16.0",
     "@babel/eslint-parser": "^7.16.3",
+    "@babel/plugin-transform-react-jsx": "^7.16.0",
     "@babel/preset-env": "^7.16.4",
     "@jakejarvis/eslint-config": "github:jakejarvis/eslint-config#main",
     "autoprefixer": "^10.4.0",
     "babel-loader": "^8.2.3",
-    "babel-plugin-template-html-minifier": "^4.1.0",
     "clean-css": "^5.2.2",
     "copy-webpack-plugin": "^10.0.0",
     "core-js": "^3.19.1",
     "css-loader": "^6.5.1",
-    "css-minimizer-webpack-plugin": "^3.1.4",
+    "css-minimizer-webpack-plugin": "^3.2.0",
     "del": "^6.0.0",
     "dotenv": "^10.0.0",
     "eslint": "~8.3.0",
+    "eslint-config-preact": "^1.2.0",
     "eslint-config-prettier": "~8.3.0",
     "eslint-plugin-compat": "~4.0.0",
     "eslint-plugin-import": "~2.25.3",
-    "eslint-plugin-lit": "~1.6.1",
     "eslint-plugin-no-unsanitized": "~4.0.0",
     "eslint-plugin-prettier": "~4.0.0",
     "gulp": "^4.0.2",
@@ -86,7 +87,7 @@
     "markdownlint-cli": "~0.30.0",
     "mini-css-extract-plugin": "^2.4.5",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.3.11",
+    "postcss": "^8.4.0",
     "postcss-focus": "^5.0.1",
     "postcss-loader": "^6.2.0",
     "postcss-svgo": "^5.0.3",
@@ -94,6 +95,7 @@
     "sass": "^1.43.4",
     "sass-loader": "^12.3.0",
     "simple-git-hooks": "^2.7.0",
+    "source-map-loader": "^3.0.0",
     "stylelint": "~14.1.0",
     "stylelint-config-prettier": "~9.0.3",
     "stylelint-config-sass-guidelines": "~9.0.1",
@@ -103,8 +105,10 @@
     "stylelint-scss": "~4.0.0",
     "terser": "^5.10.0",
     "terser-webpack-plugin": "^5.2.5",
+    "tslib": "^2.3.1",
+    "typescript": "^4.5.2",
     "web-vitals": "^2.1.2",
-    "webpack": "^5.64.2",
+    "webpack": "^5.64.3",
     "webpack-assets-manifest": "^5.0.6",
     "webpack-cli": "^4.9.1",
     "webpack-dev-server": "^4.5.0"
@@ -116,7 +120,8 @@
     "imagemin-svgo": "^10.0.0"
   },
   "resolutions": {
-    "mozjpeg": "7.1.0"
+    "mozjpeg": "7.1.0",
+    "postcss": "^8.x"
   },
   "simple-git-hooks": {
     "pre-commit": "npx lint-staged"