Move Twitch info to client-side fetch of serverless api function

.eleventy.js

@@ -26,7 +26,10 @@ module.exports = function (eleventyConfig) {
   eleventyConfig.addPassthroughCopy({ "./src/_fonts": "/fonts" });
   eleventyConfig.addPassthroughCopy({ "./src/_public": "/" });
   eleventyConfig.addPassthroughCopy({
-    "./src/_search/app.js": "/js/app_search.js",
+    "./src/_client_scripts/app_search.js": "/js/app_search.js",
+  });
+  eleventyConfig.addPassthroughCopy({
+    "./src/_client_scripts/twitch_info.js": "/js/twitch_info.js",
   });
   eleventyConfig.addPlugin(syntaxHighlight);
   eleventyConfig.addPlugin(embedTwitter, {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mk2-p4nth3rblog",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "My website and blog.",
   "scripts": {
     "watch:sass": "sass --watch ./src/_sass:src/_css",

src/_client_scripts/twitch_info.js

@@ -0,0 +1,38 @@
+/**
+  1. get data from api/twitch and then rewrite component ✅
+  2. use web worker
+  3. we want to figure out how to gracefully load the thumbnail ... e.g. don't use a fallback but more of a skeleton loader effect
+
+*/
+
+const wrapperEl = document.querySelector("[data-twitch-wrapper]");
+const linkEl = document.querySelector("[data-twitch-link]");
+const titleEl = document.querySelector("[data-twitch-title]");
+const subtitleEl = document.querySelector("[data-twitch-subtitle]");
+const thumbnailEl = document.querySelector("[data-twitch-thumbnail]");
+
+async function getTwitchData() {
+  const data = await fetch("/api/twitch").then((res) => res.json());
+  return data;
+}
+
+(async () => {
+  const data = await getTwitchData();
+
+  if (data) {
+    linkEl.href = data.link;
+    titleEl.innerText = data.title;
+    subtitleEl.innerText = data.subtitle;
+    thumbnailEl.setAttribute("height", data.thumbnail.height);
+    thumbnailEl.setAttribute("width", data.thumbnail.width);
+    thumbnailEl.setAttribute("src", data.thumbnail.url);
+
+    if (data.isLive) {
+      thumbnailEl.setAttribute(
+        "class",
+        "twitchInfo__thumbnail twitchInfo__thumbnail--live",
+      );
+      wrapperEl.setAttribute("data-live", "true");
+    }
+  }
+})();

src/_components/twitchInfo.js

@@ -1,18 +1,20 @@
 const PlayIcon = require("./svg/playIcon");
 
 function TwitchInfo() {
+
+
   return /* html */ `
-  <div data-twitchinfo-wrapper class="twitchInfo">
-    <a href="https://twitch.tv/whitep4nth3r" class="twitchInfo__link" data-twitchinfo-link>
+  <div data-twitch-wrapper class="twitchInfo">
+    <a href="https://whitep4nth3r.com" data-twitch-link class="twitchInfo__link">
       <div class="twitchInfo__deets">
         <span class="twitchInfo__streamTitleContainer">
-          <p class="twitchInfo__streamTitle" data-twitchinfo-title>Watch me fix my website LIVE: debug behind the scenes</p>
+          <p class="twitchInfo__streamTitle" data-twitch-title>Watch me fix my website LIVE: debug behind the scenes</p>
         </span>
-        <p class="twitchInfo__live" data-twitchinfo-live>
-          Live now ${PlayIcon()}
+        <p class="twitchInfo__live">
+          <span data-twitch-subtitle>Last week</span> ${PlayIcon()}
         </p>
       </div>
-      <img src="/img/stream_thumb_fallback.jpg" alt="" class="twitchInfo__thumbnail" height="1080" width="1920" data-twitchinfo-thumbnail />
+      <img src="/img/stream_thumb_fallback.jpg" data-twitch-thumbnail alt="" class="twitchInfo__thumbnail" height="1080" width="1920" />
       </a>
   </div>
   `;