Merge pull request #124 from whitep4nth3r/remove-twitch-ef

Make home page static again

.eleventy.js

@@ -26,7 +26,7 @@ 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.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/_components/twitchInfo.js

@@ -1,20 +1,43 @@
 const PlayIcon = require("./svg/playIcon");
 
-function TwitchInfo() {
+function TwitchInfo({ isLive, vodData }) {
   return /* html */ `
-  <div data-twitchinfo-wrapper class="twitchInfo">
-    <a href="https://twitch.tv/whitep4nth3r" class="twitchInfo__link" data-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>
-        </span>
-        <p class="twitchInfo__live" data-twitchinfo-live>
-          Live now ${PlayIcon()}
-        </p>
-      </div>
-      <img src="/img/stream_thumb_fallback.jpg" alt="" class="twitchInfo__thumbnail" height="1080" width="1920" data-twitchinfo-thumbnail />
-      </a>
-  </div>
+  ${
+    !isLive
+      ? /* html */ `<div class="twitchInfo">
+        <a href="${vodData.link}" class="twitchInfo__link">
+          <div class="twitchInfo__deets">
+            <span class="twitchInfo__streamTitleContainer">
+              <p class="twitchInfo__streamTitle">
+                ${vodData.title}
+              </p>
+            </span>
+            <p class="twitchInfo__live">
+              ${vodData.subtitle} ${PlayIcon()}
+            </p>
+          </div>
+          <img
+            src="${vodData.thumbnail.url}"
+            alt=""
+            class="twitchInfo__thumbnail"
+            height="${vodData.thumbnail.height}"
+            width="${vodData.thumbnail.width}"
+          />
+        </a>
+      </div>`
+      : /* html */ `<div id="twitch-embed" class="twitchInfo__embed"></div>
+      <script src="https://embed.twitch.tv/embed/v1.js"></script>
+      <script>
+        new Twitch.Embed("twitch-embed", {
+          width: 854,
+          height: 480,
+          channel: "whitep4nth3r",
+          layout: "video",
+          parent: ["whitep4nth3r.com"]
+        });
+    </script>
+      `
+  }
   `;
 }
 

src/_data/twitch.js

@@ -0,0 +1,134 @@
+const accessTokenFetchUrl = `https://id.twitch.tv/oauth2/token?client_id=${process.env.TWITCH_CLIENT_ID}&client_secret=${process.env.TWITCH_CLIENT_SECRET}&grant_type=client_credentials&scope=user_read`;
+const twitchId = "469006291";
+
+let tokenInMemory = null;
+
+const TwitchApi = {
+  getAccessToken: async function () {
+    try {
+      const response = await fetch(accessTokenFetchUrl, {
+        method: "POST",
+        headers: { accept: "application/vnd.twitchtv.v5+json" },
+      });
+      const token = await response.json();
+      tokenInMemory = token;
+
+      return token;
+    } catch (error) {
+      console.log(error);
+    }
+  },
+  getfetchOptions: function (tokenResponse) {
+    return {
+      headers: {
+        "Client-Id": process.env.TWITCH_CLIENT_ID,
+        Authorization: `Bearer ${tokenResponse.access_token}`,
+      },
+    };
+  },
+  getStreams: async function () {
+    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}`,
+        TwitchApi.getfetchOptions(tokenResponse),
+      );
+
+      if (streamsResponse.status !== 200) {
+        return null;
+      }
+
+      const streams = await streamsResponse.json();
+      return streams;
+    }
+  },
+  getVods: async function () {
+    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`,
+        TwitchApi.getfetchOptions(tokenResponse),
+      );
+
+      if (vodsResponse.status !== 200) {
+        return null;
+      }
+
+      const vods = await vodsResponse.json();
+      return vods;
+    }
+  },
+};
+
+module.exports = async function () {
+  const imageSizeOffline = "998x556";
+
+  const streams = await TwitchApi.getStreams();
+
+  if (streams !== null && streams.data.length === 1) {
+    return {
+      isLive: true,
+    };
+  } else {
+    const vods = await TwitchApi.getVods();
+
+    if (vods !== null) {
+      const latestVod = vods.data[0];
+
+      const today = new Date();
+      const createdOn = new Date(latestVod.created_at);
+      const msInDay = 24 * 60 * 60 * 1000;
+
+      createdOn.setHours(0, 0, 0, 0);
+      today.setHours(0, 0, 0, 0);
+
+      const diff = (+today - +createdOn) / msInDay;
+      let subtitle;
+
+      if (diff === 0) {
+        subtitle = "Earlier today";
+      } else if (diff === 1) {
+        subtitle = "Yesterday";
+      } else {
+        subtitle = `${diff} days ago`;
+      }
+
+      const thumb_url = !latestVod.thumbnail_url.includes("processing")
+        ? latestVod.thumbnail_url.replace(
+            "%{width}x%{height}",
+            imageSizeOffline,
+          )
+        : "/img/stream_thumb_fallback.jpg";
+
+      return {
+        isLive: false,
+        vodData: {
+          thumbnail: {
+            url: thumb_url,
+            height: "1080",
+            width: "1920",
+          },
+          title: latestVod.title,
+          subtitle: subtitle,
+          link: latestVod.url,
+        },
+      };
+    } else {
+      return {
+        isLive: false,
+        vodData: {
+          thumbnail: {
+            url: "/img/stream_thumb_fallback.jpg",
+            height: "1080",
+            width: "1920",
+          },
+          title: "Watch me fix my website LIVE: debug behind the scenes",
+          subtitle: "Last week",
+          link: "https://whitep4nth3r.com",
+        },
+      };
+    }
+  }
+};