Fix lighthouse issues

js/now-playing.js

@@ -123,19 +123,32 @@
   }
   function clamp(n, lo, hi) { return Math.min(Math.max(n, lo), hi); }
 
+  // pages.gay is a static host with no server-side compute, so we can't run
+  // our own proxy. wsrv.nl is a free, cookieless image CDN: it re-serves the
+  // image with no Set-Cookie (killing the third-party __cf_bm cookie) and can
+  // convert to WebP on the fly. `opts` lets callers request a resize.
+  function proxyImg(url, opts) {
+    if (!url) return url;
+    if (!/^https:\/\/(cdn|media)\.discordapp\.(com|net)\//.test(url)) return url;
+    const src = url.replace(/^https:\/\//, "");
+    let q = "https://wsrv.nl/?url=" + encodeURIComponent(src) + "&output=webp";
+    if (opts && opts.w) q += "&w=" + opts.w + "&dpr=2&fit=cover";
+    return q;
+  }
+
   function avatarUrl(u) {
-    if (!u || !u.avatar) return "https://cdn.discordapp.com/embed/avatars/0.png";
+    if (!u || !u.avatar) return proxyImg("https://cdn.discordapp.com/embed/avatars/0.png");
     const ext = String(u.avatar).startsWith("a_") ? "gif" : "png";
-    return `https://cdn.discordapp.com/avatars/${u.id}/${u.avatar}.${ext}?size=128`;
+    return proxyImg(`https://cdn.discordapp.com/avatars/${u.id}/${u.avatar}.${ext}?size=128`, { w: 80 });
   }
   function emojiUrl(e) {
     if (!e || !e.id) return null;
-    return `https://cdn.discordapp.com/emojis/${e.id}.${e.animated ? "gif" : "png"}?size=32`;
+    return proxyImg(`https://cdn.discordapp.com/emojis/${e.id}.${e.animated ? "gif" : "png"}?size=32`);
   }
   function assetUrl(appId, asset) {
     if (!asset) return null;
-    if (String(asset).startsWith("mp:")) return "https://media.discordapp.net/" + asset.slice(3);
+    if (String(asset).startsWith("mp:")) return proxyImg("https://media.discordapp.net/" + asset.slice(3));
-    return `https://cdn.discordapp.com/app-assets/${appId}/${asset}.png`;
+    return proxyImg(`https://cdn.discordapp.com/app-assets/${appId}/${asset}.png`);
   }
   function esc(str) {
     return String(str == null ? "" : str)
@@ -146,7 +159,7 @@
   }
   function guildBadgeUrl(pg) {
     if (!pg || !pg.badge || !pg.identity_guild_id) return null;
-    return `https://cdn.discordapp.com/guild-tag-badges/${pg.identity_guild_id}/${pg.badge}.png?size=24`;
+    return proxyImg(`https://cdn.discordapp.com/guild-tag-badges/${pg.identity_guild_id}/${pg.badge}.png?size=24`);
   }
   const PLATFORM_ICONS = {
     desktop: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="13" rx="1.5"/><path d="M8 21h8M12 17v4"/></svg>',
@@ -179,8 +192,8 @@
     let html = "";
     for (const [bit, name, hash] of BADGE_FLAGS) {
       if (flags & bit) {
-        html += '<img class="pc-badge" src="https://cdn.discordapp.com/badge-icons/' + hash +
+        html += '<img class="pc-badge" src="' + proxyImg("https://cdn.discordapp.com/badge-icons/" + hash + ".png") +
-          '.png" alt="' + esc(name) + '" title="' + esc(name) + '" onerror="this.remove()">';
+          '" alt="' + esc(name) + '" title="' + esc(name) + '" onerror="this.remove()">';
       }
     }
     return html;
@@ -192,10 +205,10 @@
   let lastFlags = 0;
   function renderDstnBadges() {
     return dstnBadges.map(function (b) {
-      const img = '<img class="pc-badge" src="https://cdn.discordapp.com/badge-icons/' + esc(b.icon) +
+      const img = '<img class="pc-badge" src="' + proxyImg("https://cdn.discordapp.com/badge-icons/" + esc(b.icon) + ".png") +
-        '.png" alt="' + esc(b.description || b.id) + '" title="' + esc(b.description || b.id) + '" onerror="this.remove()">';
+        '" alt="' + esc(b.description || b.id) + '" title="' + esc(b.description || b.id) + '" onerror="this.remove()">';
       return b.link
-        ? '<a class="pc-badge-link" href="' + esc(b.link) + '" target="_blank" rel="noopener">' + img + "</a>"
+        ? '<a class="pc-badge-link" tabindex="-1" href="' + esc(b.link) + '" target="_blank" rel="noopener">' + img + "</a>"
         : img;
     }).join("");
   }
@@ -413,7 +426,7 @@
     avImg.src = avatarUrl(u);
     const deco = u.avatar_decoration_data;
     if (deco && deco.asset) {
-      avDeco.src = `https://cdn.discordapp.com/avatar-decoration-presets/${deco.asset}.png?size=160`;
+      avDeco.src = proxyImg(`https://cdn.discordapp.com/avatar-decoration-presets/${deco.asset}.png?size=160`);
       avDeco.hidden = false;
     } else {
       avDeco.hidden = true;

js/terminal.js

@@ -108,7 +108,7 @@
     '<div class="t-greet">Type <b>help</b> for commands, or <b>socials</b> to browse.</div>' +
     '<div class="t-inputline">' +
     '<span class="t-prompt">arch@arch<span class="t-path">:[~]$</span></span>' +
-    '<input class="t-input" id="t-input" type="text" autocomplete="off" autocapitalize="off" spellcheck="false">' +
+    '<input class="t-input" id="t-input" type="text" aria-label="Terminal command input" autocomplete="off" autocapitalize="off" spellcheck="false">' +
     "</div>" +
     '<div class="t-output" id="t-output"></div>' +
     "</div>";