use lit-html v2 a *little* more properly on /projects

assets/js/src/projects.js

@@ -1,63 +1,60 @@
 import fetch from "cross-fetch";
-import { html, render } from "lit-html";
+import { render } from "lit-html";
+import { html } from "lit-html/static.js";
+import { ifDefined } from "lit-html/directives/if-defined.js";
 import numeral from "numeral";
 import { format, formatDistanceToNowStrict, parseJSON } from "date-fns";
 import twemoji from "twemoji";
 
 // don't continue if there isn't a span#meta-hits element on this page
+// TODO: be better.
 const wrapper = document.getElementById("github-cards");
 const spinner = document.getElementById("loading-spinner");
 
 if (wrapper) {
   // this is a total sh*tshow, but safer than setting one big string via innerHTML :)
+  // TODO: consider making this a real LitElement?
   const template = (repo) => html`
     <a class="repo-name" href="${repo.url}" target="_blank" rel="noopener">${repo.name}</a>
 
-    ${(() => {
+    ${repo.description ? html`<p class="repo-description">${repo.description}</p>` : null}
-      if (repo.description) {
+    ${repo.language
-        return html`<p class="repo-description">${repo.description}</p>`;
+      ? html`<div class="repo-meta">
-      }
+          <span
-    })()}
+            class="repo-language-color"
-    ${(() => {
+            style="background-color: ${ifDefined(repo.language.color)}"
-      if (repo.language) {
+          ></span>
-        return html`<div class="repo-meta">
-          <span class="repo-language-color" style="background-color: ${repo.language.color}"></span>
           <span>${repo.language.name}</span>
-        </div>`;
+        </div>`
-      }
+      : null}
-    })()}
+    ${repo.stars > 0
-    ${(() => {
+      ? html`<div
-      if (repo.stars > 0) {
+          class="repo-meta"
-        const starsComma = numeral(repo.stars).format("0,0");
+          title="${numeral(repo.stars).format("0,0")} ${repo.stars === 1 ? "star" : "stars"}"
-        const starsPlural = repo.stars === 1 ? "star" : "stars";
+        >
-
-        return html`<div class="repo-meta" title="${starsComma} ${starsPlural}">
           <svg viewBox="0 0 16 16" height="16" width="16">
             <path
               fill-rule="evenodd"
               d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"
             ></path>
           </svg>
-          <span>${starsComma}</span>
+          <span>${numeral(repo.stars).format("0,0")}</span>
-        </div>`;
+        </div>`
-      }
+      : null}
-    })()}
+    ${repo.forks > 0
-    ${(() => {
+      ? html`<div
-      if (repo.forks > 0) {
+          class="repo-meta"
-        const forksComma = numeral(repo.forks).format("0,0");
+          title="${numeral(repo.forks).format("0,0")} ${repo.forks === 1 ? "fork" : "forks"}"
-        const forksPlural = repo.forks === 1 ? "fork" : "forks";
+        >
-
-        return html`<div class="repo-meta" title="${forksComma} ${forksPlural}">
           <svg viewBox="0 0 16 16" height="16" width="16">
             <path
               fill-rule="evenodd"
               d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"
             ></path>
           </svg>
-          <span>${forksComma}</span>
+          <span>${numeral(repo.forks).format("0,0")}</span>
-        </div>`;
+        </div>`
-      }
+      : null}
-    })()}
 
     <div class="repo-meta" title="${format(parseJSON(repo.updatedAt), "MMM d, yyyy, h:mm aa z")}">
       <span>

webpack.config.js

@@ -171,8 +171,8 @@ export default {
     ],
   },
   performance: {
-    // ignore performance hints on source maps and JSON asset manifest
+    // only evaluate JS and CSS file sizes (ignore source maps, images, etc.)
-    assetFilter: (assetFilename) => !/\.map|\.json$/.test(assetFilename),
+    assetFilter: (assetFilename) => /\.js$|\.css$/.test(assetFilename),
   },
   optimization: {
     sideEffects: true,