From a8e81dc8e26cd87c5ec7b8c168e00e69d81e0f28 Mon Sep 17 00:00:00 2001
From: Stanislav Zhuk <stasadev@gmail.com>
Date: Thu, 8 May 2025 21:07:05 +0300
Subject: [PATCH] refactor: migrate sponsors banner to component with caching

---
 src/components/Header.astro         |   4 +-
 src/components/SponsorsBanner.astro | 178 ++++++++++++++++++++++++++++
 src/lib/api.ts                      |  25 ++++
 src/scripts/sponsors-banner.js      | 158 ------------------------
 4 files changed, 205 insertions(+), 160 deletions(-)
 create mode 100644 src/components/SponsorsBanner.astro
 delete mode 100644 src/scripts/sponsors-banner.js

diff --git a/src/components/Header.astro b/src/components/Header.astro
index 21984017..5f32ac2c 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -8,6 +8,7 @@ import {
   Bars2Icon,
   XMarkIcon,
 } from "@heroicons/react/24/solid/index.js"
+import SponsorsBanner from "./SponsorsBanner.astro"
 ---
 
 <script>
@@ -52,8 +53,7 @@ import {
   }
 </script>
 
-<ddev-sponsors-banner></ddev-sponsors-banner>
-<script src="/src/scripts/sponsors-banner.js"></script>
+<SponsorsBanner />
 
 <header class="w-full p-8">
   <nav
diff --git a/src/components/SponsorsBanner.astro b/src/components/SponsorsBanner.astro
new file mode 100644
index 00000000..52052351
--- /dev/null
+++ b/src/components/SponsorsBanner.astro
@@ -0,0 +1,178 @@
+---
+import { getSponsorshipData } from "../lib/api";
+
+const goal = 12000;
+const data = await getSponsorshipData();
+const income = data?.total_monthly_average_income || 0;
+const percentage = Math.min((income / goal) * 100, 100).toFixed(0);
+
+function formatCurrency(value: number): string {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0,
+  }).format(value);
+}
+---
+
+<style>
+  .ddev-sponsor-us-banner {
+    --ddev-sub-color-blue: #02a8e2;
+    --ddev-sub-color-blue-button: #027ba7;
+    --ddev-sub-color-blue-button-hover: #015471;
+    --ddev-sub-color-black: #1e2127;
+    --ddev-sub-color-white: #ffffff;
+    --ddev-sub-spacing: 1rem;
+    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif);
+    background: var(--ddev-sub-color-black);
+    color: var(--ddev-sub-color-white);
+    padding: var(--ddev-sub-spacing);
+    display: block;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+  }
+
+  .ddev-sponsor-us-banner *,
+  .ddev-sponsor-us-banner *::before,
+  .ddev-sponsor-us-banner *::after {
+    box-sizing: border-box;
+  }
+
+  .ddev-sponsor-us-banner__inner {
+    max-width: 57rem;
+    margin: 0 auto;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+  }
+
+  .ddev-sponsor-us-banner__content {
+    flex-grow: 1;
+    min-width: 0;
+  }
+
+  .ddev-sponsor-us-banner__amounts {
+    display: flex;
+    justify-content: space-between;
+    font-size: 14px;
+    font-weight: bold;
+  }
+
+  .ddev-sponsor-us-banner__progress {
+    height: 8px;
+    border-radius: 4px;
+    background: rgba(255,255,255,0.2);
+    overflow: hidden;
+    margin: 6px 0;
+  }
+
+  .ddev-sponsor-us-banner__fill {
+    height: 100%;
+    background: var(--ddev-sub-color-blue);
+    width: 0;
+    transition: width 0.5s ease;
+  }
+
+  .ddev-sponsor-us-banner__meta {
+    display: flex;
+    justify-content: space-between;
+    font-size: 12px;
+    margin-bottom: 0.5rem;
+  }
+
+  .ddev-sponsor-us-banner__cta {
+    font-weight: bold;
+  }
+
+  .ddev-sponsor-us-banner__link {
+    background-color: var(--ddev-sub-color-blue-button);
+    color: var(--ddev-sub-color-white);
+    padding: 0.6rem 1rem;
+    border-radius: 4px;
+    border: none;
+    font-weight: bold;
+    cursor: pointer;
+    text-decoration: none;
+    white-space: nowrap;
+    text-align: center;
+    transition: background-color 0.2s ease;
+  }
+
+  .ddev-sponsor-us-banner__link:hover {
+    background-color: var(--ddev-sub-color-blue-button-hover);
+    text-decoration: none;
+  }
+
+  @media (max-width: 600px) {
+    .ddev-sponsor-us-banner__inner {
+      flex-direction: column;
+      align-items: stretch;
+      text-align: center;
+    }
+
+    .ddev-sponsor-us-banner__link {
+      width: 100%;
+    }
+  }
+</style>
+
+<div class="ddev-sponsor-us-banner">
+  <div class="ddev-sponsor-us-banner__inner">
+    <div class="ddev-sponsor-us-banner__content">
+      <div class="ddev-sponsor-us-banner__amounts">
+        <span class="ddev-sponsor-us-banner__raised">Raised: {formatCurrency(income)}</span>
+        <span class="ddev-sponsor-us-banner__goal">Goal: {formatCurrency(goal)}</span>
+      </div>
+      <div class="ddev-sponsor-us-banner__progress">
+        <div class="ddev-sponsor-us-banner__fill" style={{ width: `${percentage}%` }}></div>
+      </div>
+      <div class="ddev-sponsor-us-banner__meta">
+        <span class="ddev-sponsor-us-banner__percent">{percentage}% of monthly goal</span>
+        <span class="ddev-sponsor-us-banner__cta">Help us cross the finish line!</span>
+      </div>
+    </div>
+    <a class="ddev-sponsor-us-banner__link" href="https://github.com/sponsors/ddev" target="_blank">Sponsor Now</a>
+  </div>
+</div>
+
+<script is:inline>
+  const goal = 12000;
+  const cacheKey = 'ddevSponsorshipData';
+  const cacheTTL = 24 * 60 * 60 * 1000 // 1 day in ms
+  const now = Date.now();
+
+  function formatCurrency(value) {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD',
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0
+    }).format(value);
+  }
+
+  function update(data) {
+    const income = data.total_monthly_average_income;
+    const percentage = Math.min((income / goal) * 100, 100).toFixed(0);
+    document.querySelector('.ddev-sponsor-us-banner__raised').textContent = `Raised: ${formatCurrency(income)}`;
+    document.querySelector('.ddev-sponsor-us-banner__goal').textContent = `Goal: ${formatCurrency(goal)}`;
+    document.querySelector('.ddev-sponsor-us-banner__percent').textContent = `${percentage}% of monthly goal`;
+    document.querySelector('.ddev-sponsor-us-banner__fill').style.width = `${percentage}%`;
+  }
+
+  const cached = localStorage.getItem(cacheKey);
+  if (cached) {
+    const parsed = JSON.parse(cached);
+    if (now - parsed.timestamp < cacheTTL) {
+      update(parsed.data);
+    }
+  } else {
+    fetch('https://raw.githubusercontent.com/ddev/sponsorship-data/refs/heads/main/data/all-sponsorships.json')
+      .then((res) => res.json())
+      .then((data) => {
+        localStorage.setItem(cacheKey, JSON.stringify({ timestamp: now, data }));
+        update(data);
+      });
+  }
+</script>
diff --git a/src/lib/api.ts b/src/lib/api.ts
index e5288e45..c3a52904 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -253,6 +253,31 @@ export async function getReleases() {
   return response ?? []
 }
 
+export async function getSponsorshipData() {
+  if (!githubTokenIsSet) {
+    return []
+  }
+
+  const cacheFilename = "all-sponsorships.json"
+  const cachedData = getCache(cacheFilename)
+
+  if (cachedData) {
+    return cachedData
+  }
+
+  const response = await octokit().request(
+    `GET https://api.github.com/repos/ddev/sponsorship-data/contents/data/all-sponsorships.json`
+  )
+
+  const content = Buffer.from(response.data.content, "base64").toString("utf8")
+
+  const sponsorshipData = JSON.parse(content)
+
+  putCache(cacheFilename, JSON.stringify(sponsorshipData))
+
+  return sponsorshipData ?? []
+}
+
 /**
  * Returns JSON-parsed value from a cached file if it exists.
  * @param filename Name of the file to look for in the cache directory.
diff --git a/src/scripts/sponsors-banner.js b/src/scripts/sponsors-banner.js
deleted file mode 100644
index 85f5f835..00000000
--- a/src/scripts/sponsors-banner.js
+++ /dev/null
@@ -1,158 +0,0 @@
-class DdevSponsorsBanner extends HTMLElement {
-  constructor() {
-    super()
-    this.attachShadow({ mode: "open" })
-  }
-
-  connectedCallback() {
-    const goal = 12000
-    fetch(
-      "https://raw.githubusercontent.com/ddev/sponsorship-data/refs/heads/main/data/all-sponsorships.json"
-    )
-      .then((response) => response.json())
-      .then((json) => {
-        const income = json.total_monthly_average_income
-        const percentage = Math.min((income / goal) * 100, 100).toFixed(0)
-        const formattedIncome = new Intl.NumberFormat("en-US", {
-          style: "currency",
-          currency: "USD",
-          minimumFractionDigits: 0,
-          maximumFractionDigits: 0,
-        }).format(income)
-
-        const formattedGoal = new Intl.NumberFormat("en-US", {
-          style: "currency",
-          currency: "USD",
-          minimumFractionDigits: 0,
-          maximumFractionDigits: 0,
-        }).format(goal)
-
-        this.shadowRoot.innerHTML = `
-          <style>
-            .ddev-sponsor-us-banner {
-              --ddev-sub-color-blue: #02a8e2;
-              --ddev-sub-color-blue-button: #027ba7;
-              --ddev-sub-color-blue-button-hover: #015471;
-              
-              --ddev-sub-color-black: #1e2127;
-              --ddev-sub-color-white: #ffffff;
-              --ddev-sub-spacing: 1rem;
-
-              font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif);
-              background: var(--ddev-sub-color-black);
-              color: var(--ddev-sub-color-white);
-              padding: var(--ddev-sub-spacing);
-              display: block;
-              box-shadow: 0 2px 8px rgba(0,0,0,0.05);
-            }
-
-            .ddev-sponsor-us-banner *,
-            .ddev-sponsor-us-banner *::before,
-            .ddev-sponsor-us-banner *::after {
-              box-sizing: border-box;
-            }
-
-            .ddev-sponsor-us-banner__inner {
-              max-width: 57rem;
-              margin: 0 auto;
-              display: flex;
-              flex-wrap: wrap;
-              align-items: center;
-              justify-content: space-between;
-              gap: 1rem;
-            }
-
-            .ddev-sponsor-us-banner__content {
-              flex-grow: 1;
-              min-width: 0;
-            }
-
-            .ddev-sponsor-us-banner__amounts {
-              display: flex;
-              justify-content: space-between;
-              font-size: 14px;
-              font-weight: bold;
-            }
-
-            .ddev-sponsor-us-banner__progress {
-              height: 8px;
-              border-radius: 4px;
-              background: rgba(255,255,255,0.2);
-              overflow: hidden;
-              margin: 6px 0;
-            }
-
-            .ddev-sponsor-us-banner__fill {
-              height: 100%;
-              background: var(--ddev-sub-color-blue);
-              width: ${percentage}%;
-              transition: width 0.5s ease;
-            }
-
-            .ddev-sponsor-us-banner__meta {
-              display: flex;
-              justify-content: space-between;
-              font-size: 12px;
-              margin-bottom: 0.5rem;
-            }
-
-            .ddev-sponsor-us-banner__cta {
-              font-weight: bold;
-            }
-
-            .ddev-sponsor-us-banner__link {
-              background-color: var(--ddev-sub-color-blue-button);
-              color: var(--ddev-sub-color-white);
-              padding: 0.6rem 1rem;
-              border-radius: 4px;
-              border: none;
-              font-weight: bold;
-              cursor: pointer;
-              text-decoration: none;
-              white-space: nowrap;
-              text-align: center;
-              transition: background-color 0.2s ease;
-            }
-
-            .ddev-sponsor-us-banner__link:hover {
-              background-color: var(--ddev-sub-color-blue-button-hover);
-              text-decoration: none;
-            }
-
-            @media (max-width: 600px) {
-              .ddev-sponsor-us-banner__inner {
-                flex-direction: column;
-                align-items: stretch;
-                text-align: center;
-              }
-
-              .ddev-sponsor-us-banner__link {
-                width: 100%;
-              }
-            }
-          </style>
-
-          <div class="ddev-sponsor-us-banner">
-            <div class="ddev-sponsor-us-banner__inner">
-              <div class="ddev-sponsor-us-banner__content">
-                <div class="ddev-sponsor-us-banner__amounts">
-                  <span>Raised: ${formattedIncome}</span>
-                  <span>Goal: ${formattedGoal}</span>
-                </div>
-                <div class="ddev-sponsor-us-banner__progress">
-                  <div class="ddev-sponsor-us-banner__fill"></div>
-                </div>
-                <div class="ddev-sponsor-us-banner__meta">
-                  <span>${percentage}% of monthly goal</span>
-                  <span class="ddev-sponsor-us-banner__cta">Help us cross the finish line!</span>
-                </div>
-              </div>
-              <a class="ddev-sponsor-us-banner__link" href="https://github.com/sponsors/ddev" target="_blank">Sponsor Now</a>
-            </div>
-          </div>
-        `
-      })
-  }
-}
-
-customElements.define("ddev-sponsors-banner", DdevSponsorsBanner)