Merge pull request #188 from opensourcepledge/vladh/add-total-tally

Add total tally

src/components/TotalTally.astro

@@ -0,0 +1,41 @@
+---
+// © 2024 Vlad-Stefan Harbuz <[email protected]>
+// SPDX-License-Identifier: Apache-2.0
+
+import {
+  getGrandTotalRaised, fmtCurrency,
+} from '../memberFormatting.ts';
+---
+
+<div class="total-tally">
+  <p>Our members have paid maintainers</p>
+  <h2>{fmtCurrency(await getGrandTotalRaised())}</h2>
+  <p>over the last year.</p>
+</div>
+
+<style>
+  .total-tally {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    margin: 2rem 0;
+    padding: 1rem;
+    p {
+      margin: 0;
+    }
+    h2 + p {
+      margin-top: 0.5rem;
+    }
+    h2 {
+      max-width: 100%;
+      margin: 0;
+      font-size: min(3rem, 10vw);
+      text-decoration: underline;
+      text-decoration-thickness: 0.5rem;
+      text-decoration-color: var(--color-primary);
+      text-underline-offset: 0.4rem;
+    }
+  }
+</style>

src/memberFormatting.ts

@@ -17,6 +17,15 @@ export function getDollarsPerDev(report: MemberReport) {
   return report.usdAmountPaid / report.averageNumberOfDevs;
 }
 
+export async function getGrandTotalRaised() {
+  const members = filterInactiveMembers(await getMembers());
+  let grandTotal = 0;
+  members.forEach((member) => {
+    grandTotal += member.data.annualReports[0].usdAmountPaid;
+  });
+  return grandTotal;
+}
+
 export function fmtCurrency(num: number) {
   return '$' + num.toLocaleString(undefined, {
     minimumFractionDigits: 0,

src/pages/index.astro

@@ -10,6 +10,7 @@ import Layout from "../layouts/Layout.astro";
 import MemberLogoBoard from "../components/MemberLogoBoard.astro";
 import PressItemList from "../components/PressItemList.astro";
 import TextButton from "../components/TextButton.astro";
+import TotalTally from "../components/TotalTally.astro";
 ---
 
 <Layout>
@@ -58,6 +59,10 @@ import TextButton from "../components/TextButton.astro";
         </div>
       </section>
 
+      <section>
+        <TotalTally />
+      </section>
+
       <section>
         <div>
           <div class="text-center">

src/pages/members/index.astro

@@ -7,6 +7,7 @@ import Blob from "../../components/Blob.astro";
 import Button from "../../components/Button.astro";
 import Layout from "../../layouts/Layout.astro";
 import Leaderboard from "../../components/Leaderboard.astro";
+import TotalTally from "../../components/TotalTally.astro";
 ---
 
 <Layout title="Members">
@@ -25,6 +26,7 @@ import Leaderboard from "../../components/Leaderboard.astro";
         <div class="text-center">
           <h1>Member<br>Companies</h1>
         </div>
+        <TotalTally />
         <Leaderboard grouped={false}></Leaderboard>
       </section>