refactor: migrate sponsors banner to component with caching, for #363

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

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>

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.