Merge pull request #123 from whitep4nth3r/static-newsletter-data

Move newsletter data to static build
whitep4nth3r · Feb 22, 2024 · 6a7e636 · 6a7e636
2 parents 04d2e15 + c906b33
commit 6a7e636
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 44 deletions.
diff --git 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
@@ -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
@@ -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 = "loads of";
+  }
+
+  return {
+    subscribers,
+  };
+};
diff --git a/src/_edge-functions/newsletter.js b/src/_edge-functions/newsletter.js
diff --git 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,15 +73,17 @@ function outOfDateWarning({ post }) {
 }
 
 exports.render = async function (data) {
-  const { post } = data;
+  const { post, newsletter } = data;
 
   const openGraphImageUrl = await OpenGraph.generateImageUrl({
     title: post.title,
     topics: post.topicsCollection.items,
   });
 
   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
@@ -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>