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

api/contact.js

@@ -69,7 +69,7 @@ export default async (req, res) => {
     }
 
     // 500 Internal Server Error
-    return res.status(500).json({ success: false, message: message });
+    return res.status(500).json({ success: false, message });
   }
 };
 

api/hits.js

@@ -62,7 +62,7 @@ export default async (req, res) => {
     const message = error instanceof Error ? error.message : "Unknown error.";
 
     // 500 Internal Server Error
-    return res.status(500).json({ success: false, message: message });
+    return res.status(500).json({ success: false, message });
   }
 };
 
@@ -79,7 +79,7 @@ const incrementPageHits = async (slug, client) => {
           },
           q.Update(q.Var("ref"), { data: { hits: q.Add(q.Var("hits"), 1) } })
         ),
-        q.Create(q.Collection("hits"), { data: { slug: slug, hits: 1 } })
+        q.Create(q.Collection("hits"), { data: { slug, hits: 1 } })
       )
     )
   );
@@ -92,7 +92,7 @@ const getSiteStats = async (client) => {
   // get database and RSS results asynchronously
   const parser = new Parser();
   const [feed, result] = await Promise.all([
-    parser.parseURL(BASE_URL + "feed.xml"),
+    parser.parseURL(`${BASE_URL}feed.xml`),
     client.query(
       q.Map(
         q.Paginate(q.Documents(q.Collection("hits")), { size: 99 }),
@@ -109,7 +109,7 @@ const getSiteStats = async (client) => {
 
   pages.map((p) => {
     // match URLs from RSS feed with db to populate some metadata
-    const match = feed.items.find((x) => x.link === BASE_URL + p.slug + "/");
+    const match = feed.items.find((x) => x.link === `${BASE_URL}${p.slug}/`);
     if (match) {
       p.title = decode(match.title);
       p.url = match.link;

api/projects.js

@@ -45,7 +45,7 @@ export default async (req, res) => {
     const message = error instanceof Error ? error.message : "Unknown error.";
 
     // 500 Internal Server Error
-    return res.status(500).json({ success: false, message: message });
+    return res.status(500).json({ success: false, message });
   }
 };
 
@@ -83,8 +83,8 @@ const fetchRepos = async (sort, limit) => {
     `,
     {
       username: "jakejarvis",
-      limit: parseInt(limit),
-      sort: sort,
+      limit: parseInt(limit, 10),
+      sort,
       headers: {
         authorization: `token ${process.env.GH_PUBLIC_TOKEN}`,
       },

api/report.js

@@ -75,9 +75,9 @@ const sendCsp = async (body, headers) => {
     }
 
     return response.status;
-  } else {
-    return 400; // 400 Bad Request
   }
+
+  return 400; // 400 Bad Request
 };
 
 const sendReport = async (body, headers) => {

api/tracks.js

@@ -58,7 +58,7 @@ export default async (req, res) => {
     const message = error instanceof Error ? error.message : "Unknown error.";
 
     // 500 Internal Server Error
-    return res.status(500).json({ success: false, message: message });
+    return res.status(500).json({ success: false, message });
   }
 };
 
@@ -105,9 +105,9 @@ const getNowPlaying = async () => {
       imageUrl: active.item.album.images ? active.item.album.images[0].url : undefined,
       songUrl: active.item.external_urls.spotify,
     };
-  } else {
-    return { isPlaying: false };
   }
+
+  return { isPlaying: false };
 };
 
 const getTopTracks = async () => {