From 118e3a6d397545071210015c3ca4472729854a3f Mon Sep 17 00:00:00 2001
From: Salma Alam-Naylor <whitep4nth3r@gmail.com>
Date: Thu, 22 Feb 2024 11:22:18 +0000
Subject: [PATCH 1/2] Move newsletter data to static build

---
 package.json                        |  2 +-
 src/_components/newsletterSignup.js |  4 ++--
 src/_data/newsletter.js             | 23 ++++++++++++++++++++
 src/_edge-functions/newsletter.js   | 33 -----------------------------
 src/blog/blog-pages.11ty.js         | 20 +++++++++++------
 src/index.11ty.js                   |  7 ++++--
 6 files changed, 45 insertions(+), 44 deletions(-)
 create mode 100644 src/_data/newsletter.js
 delete mode 100644 src/_edge-functions/newsletter.js

diff --git a/package.json b/package.json
index 5f029b34..3f44c4ba 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mk2-p4nth3rblog",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "My website and blog.",
   "scripts": {
     "watch:sass": "sass --watch ./src/_sass:src/_css",
diff --git a/src/_components/newsletterSignup.js b/src/_components/newsletterSignup.js
index 29c1abf7..2e48bed1 100644
--- a/src/_components/newsletterSignup.js
+++ b/src/_components/newsletterSignup.js
@@ -1,9 +1,9 @@
-function NewsletterSignup({ removeMargin = false }) {
+function NewsletterSignup({ removeMargin = false, subscribers }) {
   const modifier = removeMargin ? " newsletterSignup--noMargin" : "";
   return /* html */ `  
      <div class="newsletterSignup${modifier}">
         <h2 class="newsletterSignup__title">Want <span>weird stuff</span> in your inbox?</h2>
-        <p class="newsletterSignup__para">Join <span data-wwwh-subs>100+</span> subscribers in the Weird Wide Web Hole to find no answers to questions you didn't know you had.</p>
+        <p class="newsletterSignup__para">Join ${subscribers}+ subscribers in 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>
       `;
diff --git a/src/_data/newsletter.js b/src/_data/newsletter.js
new file mode 100644
index 00000000..a07232c1
--- /dev/null
+++ b/src/_data/newsletter.js
@@ -0,0 +1,23 @@
+module.exports = async function () {
+  let subscribers;
+  try {
+    const response = await fetch(
+      `https://api.buttondown.email/v1/subscribers`,
+      {
+        headers: {
+          Authorization: `Token ${process.env.BUTTONDOWN_API_KEY}`,
+        },
+      },
+    );
+
+    const result = await response.json();
+    subscribers = result.count.toString();
+  } catch (error) {
+    console.log(error);
+    subscribers = "200";
+  }
+
+  return {
+    subscribers,
+  };
+};
diff --git a/src/_edge-functions/newsletter.js b/src/_edge-functions/newsletter.js
deleted file mode 100644
index 912d7623..00000000
--- a/src/_edge-functions/newsletter.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import { HTMLRewriter } from "https://ghuc.cc/worker-tools/html-rewriter/index.ts";
-
-export default async (request, context) => {
-  const response = await context.next();
-  try {
-    const subscribers = await fetch(
-      `https://api.buttondown.email/v1/subscribers`,
-      {
-        headers: {
-          Authorization: `Token ${Deno.env.get("BUTTONDOWN_API_KEY")}`,
-        },
-      },
-    );
-
-    const result = await subscribers.json();
-
-    return new HTMLRewriter()
-      .on("[data-wwwh-subs]", {
-        element(element) {
-          element.setInnerContent(result.count.toString());
-        },
-      })
-      .transform(response);
-  } catch (error) {
-    console.log(error);
-    return response;
-  }
-};
-
-export const config = {
-  path: ["/", "/blog/*"],
-  excludedPath: "/blog/",
-};
diff --git a/src/blog/blog-pages.11ty.js b/src/blog/blog-pages.11ty.js
index eb3a82b7..6a4bc62f 100644
--- a/src/blog/blog-pages.11ty.js
+++ b/src/blog/blog-pages.11ty.js
@@ -31,7 +31,8 @@ exports.data = {
     title: (data) => `${data.post.metaTitle} - Salma Alam-Naylor`,
     slug: (data) => data.post.slug,
     canonical: (data) =>
-      data.post.externalUrl || `https://whitep4nth3r.com/blog/${data.post.slug}/`,
+      data.post.externalUrl ||
+      `https://whitep4nth3r.com/blog/${data.post.slug}/`,
     metaDescription: (data) => data.post.metaDescription,
     openGraphImageUrl: (data) =>
       OpenGraph.generateImageUrl({
@@ -41,9 +42,11 @@ exports.data = {
     openGraphImageWidth: OpenGraph.imgWidth,
     openGraphImageHeight: OpenGraph.imgHeight,
     openGraphUrl: (data) =>
-      data.post.externalUrl || `https://whitep4nth3r.com/blog/${data.post.slug}/`,
+      data.post.externalUrl ||
+      `https://whitep4nth3r.com/blog/${data.post.slug}/`,
     openGraphTimeToRead: (data) => data.post.readingTime,
-    openGraphArticleTags: (data) => data.post.topicsCollection.items.map((item) => item.name),
+    openGraphArticleTags: (data) =>
+      data.post.topicsCollection.items.map((item) => item.name),
   },
 };
 
@@ -70,7 +73,7 @@ function outOfDateWarning({ post }) {
 }
 
 exports.render = async function (data) {
-  const { post } = data;
+  const { post, newsletter } = data;
 
   const openGraphImageUrl = await OpenGraph.generateImageUrl({
     title: post.title,
@@ -78,7 +81,9 @@ exports.render = async function (data) {
   });
 
   return /* html */ `
-    <aside data-referer data-slug="${post.slug}" data-title="${post.title}"></aside>
+    <aside data-referer data-slug="${post.slug}" data-title="${
+    post.title
+  }"></aside>
     <div class="post__meta">
       <p class="post__meta__topic">${post.topicsCollection.items[0].name}</p>
       ${PublishedDate({
@@ -97,6 +102,7 @@ exports.render = async function (data) {
         <div class="post__asideStickyGroup">
           <span class="post__newsletterSignupWide">${NewsletterSignup({
             removeMargin: false,
+            subscribers: newsletter.subscribers,
           })}</span>
           ${TableOfContents(post.body)}
         </div>
@@ -132,7 +138,9 @@ exports.render = async function (data) {
               </div>
               <div class="post__relatedGrid">
                 ${post.relatedPostsCollection.items
-                  .map((post) => Card({ item: { ...post, type: "post" }, showType: false }))
+                  .map((post) =>
+                    Card({ item: { ...post, type: "post" }, showType: false }),
+                  )
                   .join("")}
               </div>
             </div>`
diff --git a/src/index.11ty.js b/src/index.11ty.js
index 908cfcd6..4915b401 100644
--- a/src/index.11ty.js
+++ b/src/index.11ty.js
@@ -23,7 +23,7 @@ exports.data = {
 };
 
 exports.render = function (data) {
-  const { activityFeed, person } = data;
+  const { activityFeed, person, newsletter } = data;
   const feedItems = activityFeed.slice(0, 8);
 
   return /*html*/ `
@@ -46,7 +46,10 @@ exports.render = function (data) {
           <img src="/img/wwwh.png" class="card__image" alt="weird wide web hole" width="500" height="250" style="width: 100%;" />
         </div>
         <div class="card__inner">
-          ${NewsletterSignup({ removeMargin: true })}
+          ${NewsletterSignup({
+            removeMargin: true,
+            subscribers: newsletter.subscribers,
+          })}
           <span class="card__metaLabel">Newsletter</span>
         </div>
       </div>

From c906b33f84da2982480b44bacbe09b12ab1527c6 Mon Sep 17 00:00:00 2001
From: Salma Alam-Naylor <whitep4nth3r@gmail.com>
Date: Thu, 22 Feb 2024 11:25:59 +0000
Subject: [PATCH 2/2] Future proof error value if newsletter subs call fails

---
 src/_components/newsletterSignup.js | 2 +-
 src/_data/newsletter.js             | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/_components/newsletterSignup.js b/src/_components/newsletterSignup.js
index 2e48bed1..a5b7db34 100644
--- a/src/_components/newsletterSignup.js
+++ b/src/_components/newsletterSignup.js
@@ -3,7 +3,7 @@ function NewsletterSignup({ removeMargin = false, subscribers }) {
   return /* html */ `  
      <div class="newsletterSignup${modifier}">
         <h2 class="newsletterSignup__title">Want <span>weird stuff</span> in your inbox?</h2>
-        <p class="newsletterSignup__para">Join ${subscribers}+ subscribers in the Weird Wide Web Hole to find no answers to questions you didn't know you had.</p>
+        <p class="newsletterSignup__para">Join ${subscribers} subscribers in 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>
       `;
diff --git a/src/_data/newsletter.js b/src/_data/newsletter.js
index a07232c1..77b3a96d 100644
--- a/src/_data/newsletter.js
+++ b/src/_data/newsletter.js
@@ -11,10 +11,10 @@ module.exports = async function () {
     );
 
     const result = await response.json();
-    subscribers = result.count.toString();
+    subscribers = `${result.count.toString()}+`;
   } catch (error) {
     console.log(error);
-    subscribers = "200";
+    subscribers = "loads of";
   }
 
   return {