add ai page

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/_includes/header.html

@@ -18,22 +18,23 @@
           <details class="header__navListDetails">
             <summary class="header__navListSummary">More</summary>
             <div class="header__navListMoreLinks">
+              <a href="/ai/" class="header__navListItemLink">AI Usage</a>
               <a href="/video/" class="header__navListItemLink">Video</a>
               <a href="/newsletter" target="_blank" class="header__navListItemLink header__navListItemLink--external">
                 Newsletter
               </a>
               <a href="/uses/" class="header__navListItemLink">Things I use</a>
               <a href="/talks/" class="header__navListItemLink">Talks</a>
               <a href="/events/" class="header__navListItemLink">Events</a>
-              <a href="/activity/" class="header__navListItemLink"> Activity feed </a>
-              <a href="/sponsorships/" class="header__navListItemLink"> Work with me </a>
+              <a href="/activity/" class="header__navListItemLink">Activity feed </a>
+              <a href="/sponsorships/" class="header__navListItemLink">Work with me</a>
               <a
                 href="https://github.com/whitep4nth3r?tab=repositories"
                 target="_blank"
                 class="header__navListItemLink header__navListItemLink--external">
                 GitHub Projects
               </a>
-              <a href="/discord" class="header__navListItemLink header__navListItemLink--external"> Discord </a>
+              <a href="/discord" class="header__navListItemLink header__navListItemLink--external">Discord</a>
             </div>
           </details>
         </li>

src/_sass/_ai.scss

@@ -0,0 +1,44 @@
+.ai__content {
+  max-width: 600px;
+  margin-left: auto;
+  margin-right: auto;
+  text-align: left;
+}
+
+.ai__cta {
+  max-width: 400px;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+  text-align: center;
+}
+
+.ai__title {
+  @include font_bold;
+  font-size: clamp(2rem, 4vw, 4rem);
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+  color: var(--color-body);
+}
+
+.ai__subtitle {
+  @include font_bold;
+  font-size: 2rem;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+  color: var(--color-body);
+}
+
+.ai__text {
+  @include font_main;
+  font-size: 1.4rem;
+  line-height: 1.4;
+  margin-bottom: 1rem;
+  color: var(--color-fg);
+  display: block;
+
+  &:last-of-type {
+    margin-bottom: 4rem;
+  }
+}

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/_sass/main.scss

@@ -42,3 +42,4 @@
 @import "newsletter-signup";
 @import "webring";
 @import "video";
+@import "ai";

src/ai/index.11ty.js

@@ -0,0 +1,43 @@
+const OpenGraph = require("../../lib/openGraph");
+
+const pageTitle = "My AI Manifesto";
+
+exports.data = {
+  layout: "base.html",
+  title: pageTitle,
+  metaDescription: "I don't use AI on my 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 () {
+  return /* html */ `
+   <div class="ai__content">  
+      <h1 class="ai__title">AI Usage</h1>
+      <p class="ai__text">Everything I publish on the internet — including this website and my newsletter — is created, built and written by me using my own thoughts, ideas, and experience.</p>
+      <p class="ai__text">I may use LLMs and AI lightly as tools during the content creation process to help with things like summarising large transcripts or articles that I use as source material. Sometimes I use tools like GitHub Copilot to help me write code (but it's more fun and a better learning experience to write the code by hand).</p>
+      <p class="ai__text">This website is my playground and my exploration space, and I like to painstakingly handcraft it myself.</p>
+      <p class="ai__text">I have a strong dislike for AI-generated art and music. Whilst it may be a quick way to generate royalty-free assets for your project, it is devoid of imagination, creativity and the human spirit.</p>
+      <p class="ai__text">This page is my <a href="https://www.bydamo.la/p/ai-manifesto" target="_blank">AI manifesto</a>.</p>
+      <div class="ai__cta">
+        <div class="newsletterSignup">
+          <h2 class="newsletterSignup__title">
+            Want
+            <span>weird stuff</span>
+            in your inbox?
+          </h2>
+          <p class="newsletterSignup__para">
+            Enter the Weird Wide Web Hole to find no answers to questions you didn't know you had.
+          </p>
+          <a href="https://buttondown.email/weirdwidewebhole" class="newsletterSignup__submit" target="_blank">
+            Subscribe
+          </a>
+        </div>
+      </div>
+    </div>
+  `;
+};

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">