Fix no VOD thumbnail being available

src/_components/twitchInfo.js

@@ -1,12 +1,13 @@
 const PlayIcon = require("./svg/playIcon");
 const ResponsiveImage = require("./responsiveImage");
 
-function TwitchInfo({ isLive, vodData }) {
+function TwitchInfo({ isLive, vodData, isPlaceholder }) {
+  const placeholderClass = isPlaceholder ? " twitchInfo__placeholder" : "";
   return /* html */ `
   ${
     !isLive
       ? /* html */ `<div class="twitchInfo">
-        <a href="${vodData.link}" class="twitchInfo__link">
+        <a href="${vodData.link}" class="twitchInfo__link${placeholderClass}">
           <div class="twitchInfo__deets">
             <div class="twitchInfo__streamTitleContainer">
               <p class="twitchInfo__streamTitle">
@@ -23,10 +24,9 @@ function TwitchInfo({ isLive, vodData }) {
               height: vodData.thumbnail.height,
               width: vodData.thumbnail.width,
               contentType: "image/jpeg",
-              description:
-                "Stream screenshot. It's auto-generated so I can't give you any details, sorry!",
+              description: "Stream screenshot. It's auto-generated so I can't give you any details, sorry!",
             },
-            classOverride: "twitchInfo__thumbnail",
+            classOverride: `twitchInfo__thumbnail${placeholderClass}`,
             loading: "eager",
           })}
         </a>

src/_data/twitch.js

@@ -27,8 +27,7 @@ const TwitchApi = {
     };
   },
   getStreams: async function () {
-    const tokenResponse =
-      tokenInMemory !== null ? tokenInMemory : await TwitchApi.getAccessToken();
+    const tokenResponse = tokenInMemory !== null ? tokenInMemory : await TwitchApi.getAccessToken();
     if (tokenResponse.access_token) {
       const streamsResponse = await fetch(
         `https://api.twitch.tv/helix/streams?user_id=${twitchId}`,
@@ -44,8 +43,7 @@ const TwitchApi = {
     }
   },
   getVods: async function () {
-    const tokenResponse =
-      tokenInMemory !== null ? tokenInMemory : await TwitchApi.getAccessToken();
+    const tokenResponse = tokenInMemory !== null ? tokenInMemory : await TwitchApi.getAccessToken();
     if (tokenResponse.access_token) {
       const vodsResponse = await fetch(
         `https://api.twitch.tv/helix/videos?user_id=${twitchId}&type=archive&first=1`,
@@ -74,7 +72,7 @@ module.exports = async function () {
   } else {
     const vods = await TwitchApi.getVods();
 
-    if (vods !== null) {
+    if (vods.data.length > 0) {
       const latestVod = vods.data[0];
 
       // const today = new Date();
@@ -96,19 +94,16 @@ module.exports = async function () {
       // }
 
       const thumb_url = !latestVod.thumbnail_url.includes("processing")
-        ? latestVod.thumbnail_url.replace(
-            "%{width}x%{height}",
-            imageSizeOffline,
-          )
+        ? latestVod.thumbnail_url.replace("%{width}x%{height}", imageSizeOffline)
         : "/img/stream_thumb_fallback.jpg";
 
       return {
         isLive: false,
         vodData: {
           thumbnail: {
             url: thumb_url,
-            height: 998,
-            width: 556,
+            height: 556,
+            width: 998,
           },
           title: latestVod.title,
           subtitle: "Watch VOD",
@@ -118,15 +113,16 @@ module.exports = async function () {
     } else {
       return {
         isLive: false,
+        isPlaceholder: true,
         vodData: {
           thumbnail: {
-            url: "/img/stream_thumb_fallback.jpg",
-            height: "1080",
-            width: "1920",
+            url: "/img/stream_thumb_fallback.png",
+            height: "499",
+            width: "998",
           },
-          title: "Watch me fix my website LIVE: debug behind the scenes",
-          subtitle: "Last week",
-          link: "https://whitep4nth3r.com",
+          title: "writing code LIVE for your entertainment",
+          subtitle: "Follow on Twitch",
+          link: "https://twitch.tv/whitep4nth3r",
         },
       };
     }

src/_sass/_twitch-info.scss

@@ -1,9 +1,7 @@
 .twitchInfo {
   --thumbnail-outer-radius: calc(var(--border-radius-base) * 2);
   --thumbnail-inner-padding: calc(var(--border-radius-base) / 2);
-  --title-bottom-left-radius: calc(
-    var(--thumbnail-outer-radius) - var(--thumbnail-inner-padding)
-  );
+  --title-bottom-left-radius: calc(var(--thumbnail-outer-radius) - var(--thumbnail-inner-padding));
   --title-font-size: clamp(1rem, 1.5vw, 1.5rem);
   --title-padding: 0.75rem;
   display: block;
@@ -36,8 +34,7 @@
   position: relative;
   width: auto;
   height: 100%;
-  box-shadow: 0px 1.5rem 2rem -1rem rgba(0, 0, 0, 0.4),
-    inset 0px 1px 0px rgba(255, 255, 255, 0.48);
+  box-shadow: 0px 1.5rem 2rem -1rem rgba(0, 0, 0, 0.4), inset 0px 1px 0px rgba(255, 255, 255, 0.48);
   filter: grayscale(1);
   transition: all var(--global-transition-time) ease-in-out;
 
@@ -46,6 +43,10 @@
   }
 }
 
+.twitchInfo__placeholder {
+  aspect-ratio: 2/1;
+}
+
 .twitchInfo__thumbnail--live {
   filter: grayscale(0);
 }
@@ -102,11 +103,7 @@
   align-items: center;
   gap: 0.5rem;
 
-  background: linear-gradient(
-    145.04deg,
-    var(--pink) 60.34%,
-    var(--orange) 98.77%
-  );
+  background: linear-gradient(145.04deg, var(--pink) 60.34%, var(--orange) 98.77%);
   color: var(--white);
   padding: var(--title-padding);
   border-radius: calc(var(--border-radius-base) * 0.75);
@@ -123,7 +120,6 @@
     height: 100%;
     aspect-ratio: 16/9;
     border-radius: var(--border-radius-base);
-    box-shadow: 0px 1.5rem 2rem -1rem rgba(0, 0, 0, 0.4),
-      inset 0px 1px 0px rgba(255, 255, 255, 0.48);
+    box-shadow: 0px 1.5rem 2rem -1rem rgba(0, 0, 0, 0.4), inset 0px 1px 0px rgba(255, 255, 255, 0.48);
   }
 }

src/ai/index.11ty.js

@@ -0,0 +1,24 @@
+const OpenGraph = require("../../lib/openGraph");
+
+const pageTitle = "How I use AI";
+
+exports.data = {
+  layout: "base.html",
+  title: pageTitle,
+  metaDescription: "Salma doesn't use AI on her website or to generate content verbatim. But it does have its uses.",
+  openGraphImageUrl: OpenGraph.generateImageUrl({ title: pageTitle }),
+  openGraphImageAlt: OpenGraph.generateImageAlt(pageTitle),
+  openGraphImageWidth: OpenGraph.imgWidth,
+  openGraphImageHeight: OpenGraph.imgHeight,
+  openGraphUrl: "https://whitep4nth3r.com/ai/",
+  includeInSitemap: true,
+};
+
+exports.render = function (data) {
+  return /* html */ `
+    <section class="ai">
+      <h1 class="page__headerTitle">AI usage and thoughts</h1>
+    
+    </section>
+  `;
+};

src/index.11ty.js

@@ -38,7 +38,7 @@ exports.render = function (data) {
 
     <div class="home__scroll">
       <div class="home__twitch">
-        ${TwitchInfo({ isLive: twitch.isLive, vodData: twitch.vodData })}
+        ${TwitchInfo({ isLive: twitch.isLive, vodData: twitch.vodData, isPlaceholder: twitch.isPlaceholder })}
       </div>
       <a href="/activity/" class="home__heading">Latest news and activity</a>
       <div class="home__activity">