lighthouse fixes

site/src/components/MediaModal.astro

@@ -22,7 +22,7 @@ import { LINKS } from "../lib/links";
 
     <div class="media-modal-embed-container" data-embed-kind="">
       <div class="media-modal-embed-placeholder">
-        <a class="media-modal-embed-fallback" target="_blank" rel="noopener noreferrer"></a>
+        <div class="media-modal-embed-fallback-wrap" hidden></div>
       </div>
       <iframe
         class="media-modal-embed"
@@ -43,8 +43,6 @@ import { LINKS } from "../lib/links";
     </div>
 
     <div class="media-modal-ctas">
-      <a class="cta primary media-modal-cta-follow" target="_blank" rel="me noopener noreferrer"></a>
-      <a class="cta media-modal-cta-view" target="_blank" rel="me noopener noreferrer"></a>
     </div>
   </div>
 </dialog>
@@ -58,14 +56,13 @@ import { LINKS } from "../lib/links";
   const titleEl = dialog.querySelector(".media-modal-title");
   const embedContainer = dialog.querySelector(".media-modal-embed-container");
   const embedPlaceholder = dialog.querySelector(".media-modal-embed-placeholder");
-  const embedFallback = dialog.querySelector(".media-modal-embed-fallback");
+  const embedFallbackWrap = dialog.querySelector(".media-modal-embed-fallback-wrap");
   const iframe = dialog.querySelector(".media-modal-embed");
   const audio = dialog.querySelector(".media-modal-audio");
   const descriptionEl = dialog.querySelector(".media-modal-description");
   const dateEl = dialog.querySelector(".media-modal-date");
   const viewsEl = dialog.querySelector(".media-modal-views");
-  const followCta = dialog.querySelector(".media-modal-cta-follow");
-  const viewCta = dialog.querySelector(".media-modal-cta-view");
+  const ctasEl = dialog.querySelector(".media-modal-ctas");
   const closeBtn = dialog.querySelector(".media-modal-close");
   
   let triggerElement = null;
@@ -166,8 +163,8 @@ import { LINKS } from "../lib/links";
     embedPlaceholder.style.display = "block";
     embedContainer.dataset.embedKind = "";
     iframe.style.display = "";
-    embedFallback.style.display = "none";
-    embedFallback.removeAttribute("href");
+    embedFallbackWrap.textContent = "";
+    embedFallbackWrap.hidden = true;
     audio.pause();
     audio.removeAttribute("src");
     audio.style.display = "none";
@@ -176,6 +173,8 @@ import { LINKS } from "../lib/links";
     kickerEl.textContent = "";
     iframe.removeAttribute("allow");
     iframe.removeAttribute("height");
+
+    ctasEl.textContent = "";
   }
 
   // Close modal
@@ -262,8 +261,8 @@ import { LINKS } from "../lib/links";
     if (embed) {
       embedContainer.dataset.embedKind = embed.kind;
       embedPlaceholder.style.display = "block";
-      embedFallback.style.display = "none";
-      embedFallback.removeAttribute("href");
+      embedFallbackWrap.textContent = "";
+      embedFallbackWrap.hidden = true;
       iframe.style.display = "";
 
       if (embed.kind === "spotify") {
@@ -296,15 +295,22 @@ import { LINKS } from "../lib/links";
         if (audioUrl) {
           embedContainer.dataset.embedKind = "audio";
           embedPlaceholder.style.display = "none";
-          embedFallback.style.display = "none";
+          embedFallbackWrap.textContent = "";
+          embedFallbackWrap.hidden = true;
           audio.style.display = "block";
           audio.src = audioUrl;
         } else {
           embedContainer.dataset.embedKind = "fallback";
           embedPlaceholder.style.display = "flex";
-          embedFallback.style.display = "inline-flex";
-          embedFallback.href = url;
-          embedFallback.textContent = "Listen on Spotify";
+          embedFallbackWrap.textContent = "";
+          embedFallbackWrap.hidden = false;
+          const fallbackLink = document.createElement("a");
+          fallbackLink.className = "media-modal-embed-fallback";
+          fallbackLink.target = "_blank";
+          fallbackLink.rel = "noopener noreferrer";
+          fallbackLink.href = url;
+          fallbackLink.textContent = "Listen on Spotify";
+          embedFallbackWrap.appendChild(fallbackLink);
           audio.style.display = "none";
         }
       } else {
@@ -329,13 +335,20 @@ import { LINKS } from "../lib/links";
       utm_campaign: "social-acquisition",
       utm_content: `${platform}:media_modal`,
     });
-    followCta.href = followUrl;
-    followCta.textContent = followLabel;
-    followCta.setAttribute("data-umami-event", "cta_click");
-    followCta.setAttribute("data-umami-event-target_id", `modal.cta.${followAction}.${platform}`);
-    followCta.setAttribute("data-umami-event-placement", "media_modal");
-    followCta.setAttribute("data-umami-event-platform", platform);
-    followCta.setAttribute("data-umami-event-target_url", channelUrl);
+    ctasEl.textContent = "";
+
+    const followLink = document.createElement("a");
+    followLink.className = "cta primary media-modal-cta-follow";
+    followLink.target = "_blank";
+    followLink.rel = "me noopener noreferrer";
+    followLink.href = followUrl;
+    followLink.textContent = followLabel;
+    followLink.setAttribute("data-umami-event", "cta_click");
+    followLink.setAttribute("data-umami-event-target_id", `modal.cta.${followAction}.${platform}`);
+    followLink.setAttribute("data-umami-event-placement", "media_modal");
+    followLink.setAttribute("data-umami-event-platform", platform);
+    followLink.setAttribute("data-umami-event-target_url", channelUrl);
+    ctasEl.appendChild(followLink);
 
     const viewUrl = withUtm(url, {
       utm_source: "website",
@@ -343,13 +356,18 @@ import { LINKS } from "../lib/links";
       utm_campaign: "social-acquisition",
       utm_content: `${platform}:media_modal`,
     });
-    viewCta.href = viewUrl;
-    viewCta.textContent = viewLabel;
-    viewCta.setAttribute("data-umami-event", "cta_click");
-    viewCta.setAttribute("data-umami-event-target_id", `modal.cta.${viewAction}.${platform}`);
-    viewCta.setAttribute("data-umami-event-placement", "media_modal");
-    viewCta.setAttribute("data-umami-event-platform", platform);
-    viewCta.setAttribute("data-umami-event-target_url", url);
+    const viewLink = document.createElement("a");
+    viewLink.className = "cta media-modal-cta-view";
+    viewLink.target = "_blank";
+    viewLink.rel = "me noopener noreferrer";
+    viewLink.href = viewUrl;
+    viewLink.textContent = viewLabel;
+    viewLink.setAttribute("data-umami-event", "cta_click");
+    viewLink.setAttribute("data-umami-event-target_id", `modal.cta.${viewAction}.${platform}`);
+    viewLink.setAttribute("data-umami-event-placement", "media_modal");
+    viewLink.setAttribute("data-umami-event-platform", platform);
+    viewLink.setAttribute("data-umami-event-target_url", url);
+    ctasEl.appendChild(viewLink);
 
     // Open the dialog
     dialog.showModal();

site/src/components/StandardCard.astro

@@ -54,7 +54,15 @@ const elementProps = mode === "modal"
   <div class="card-media">
     {imageUrl ? (
       <div class="img-shimmer-wrap">
-        <img src={imageUrl} alt="" loading="lazy" class="img-loading" />
+        <img
+          src={imageUrl}
+          alt=""
+          loading="lazy"
+          decoding="async"
+          width="360"
+          height="180"
+          class="img-loading"
+        />
       </div>
     ) : (
       <div class="card-placeholder" />