Merge pull request #35 from opensourcepledge/vladh/improve-member-page

Improve design
opensourcepledge · Aug 5, 2024 · 010a3ca · 010a3ca
2 parents 29eeb5a + a1edab1
commit 010a3ca
Show file tree

Hide file tree

Showing 9 changed files with 174 additions and 118 deletions.
diff --git a/README.md b/README.md
@@ -29,10 +29,14 @@ Here's how to join:
    you depend on, you can use a tool like [Thanks.dev](https://thanks.dev/).
 2. **Create a short JSON file with your company and donation info**, and host it
    at any URL you wish. You can check out an [example JSON
-   report][example-report] or the [full schema][schema]. You should update this
-   JSON file at least yearly — we'll fetch it regularly. We understand your
-   fiscal year might end on various dates — you can record the end date of your
-   fiscal year in the `dateYearEnding` field.
+   report][example-report] or the [full schema][schema].
+   * You should update this JSON file at least yearly — we'll fetch it
+     regularly.
+   * We understand your fiscal year might end on various dates — you can record
+     the end date of your fiscal year in the `dateYearEnding` field.
+   * The logo image in `urlSquareLogoWithBackground` should be square and have a
+     non-transparent background. Please try to keep this image under 200x200px,
+     and to compress it appropriately.
 3. **Create a pull request to add yourself to the member list** by changing
    [members.csv][members-csv].
 4. **Include links to your branding materials** in the pull request so that we

diff --git a/contrib/example-schema.json b/contrib/example-schema.json
@@ -1,18 +1,47 @@
 {
   "domain": "sentry.io",
   "datetimeModified": "2024-07-19T12:24:46Z",
-  "description": "Sentry has given to Open Source for soooooo many years.",
+  "description": "People sometimes ask why Sentry is an open source company. However, they are typically asking about our business model: conversion funnel, product roadmap, monetization strategy. In our experience as engineers and as professionals, there is no other choice but open source for building a viable software company serving modern development cycles. As a mantra, Sentry is an open source company because the right to learn and to share what is learned with others is fundamental to product growth and relevance.",
   "name": "Sentry",
-  "urlLogoWithBackground": "https://fossfunders.com/logos/sentry.svg",
+  "urlSquareLogoWithBackground": "https://avatars.githubusercontent.com/u/1396951?s=200&v=4",
   "urlLearnMore": "https://open.sentry.io/osspledge/",
   "annualReports": [
     {
       "dateYearEnding": "2023-01-31",
       "averageNumberOfDevs": 135,
       "monetaryPayments": [
-        {"amount": 435000, "urlDetails": "https://thanks.dev/d/gh/getsentry/dependencies"},
-        {"amount": 50000, "urlDetails": "https://github.com/orgs/getsentry/sponsoring"},
-        {"amount": 15000, "urlDetails": "https://blog.sentry.io/we-just-gave-500-000-dollars-to-open-source-maintainers/"}
+        {
+          "amount": 435000,
+          "urlDetails": "https://thanks.dev/d/gh/getsentry/dependencies"
+        },
+        {
+          "amount": 50000,
+          "urlDetails": "https://github.com/orgs/getsentry/sponsoring"
+        },
+        {
+          "amount": 15000,
+          "urlDetails": "https://blog.sentry.io/we-just-gave-500-000-dollars-to-open-source-maintainers/"
+        }
+      ],
+      "monetaryValueOfTime": 100000,
+      "monetaryValueOfMaterials": 500000
+    },
+    {
+      "dateYearEnding": "2023-01-31",
+      "averageNumberOfDevs": 135,
+      "monetaryPayments": [
+        {
+          "amount": 435000,
+          "urlDetails": "https://thanks.dev/d/gh/getsentry/dependencies"
+        },
+        {
+          "amount": 50000,
+          "urlDetails": "https://github.com/orgs/getsentry/sponsoring"
+        },
+        {
+          "amount": 15000,
+          "urlDetails": "https://blog.sentry.io/we-just-gave-500-000-dollars-to-open-source-maintainers/"
+        }
       ],
       "monetaryValueOfTime": 100000,
       "monetaryValueOfMaterials": 500000

diff --git a/src/components/Prose.astro b/src/components/Prose.astro
@@ -1,5 +1,5 @@
 <article
-  class="prose prose-app max-w-none prose-a:text-app-purple hover:prose-a:text-app-pink prose-headings:text-app-green text-white"
+  class="prose prose-app my-12 max-w-none text-base prose-strong:text-white prose-table:text-base prose-a:text-app-purple hover:prose-a:text-app-pink prose-headings:text-app-green text-white"
 >
   <slot />
 </article>
diff --git a/src/content/config.ts b/src/content/config.ts
@@ -25,7 +25,7 @@ const memberReport = z.object({
 
 const memberProvidedData = z.object({
   name: z.string(),
-  urlLogoWithBackground: z.string().url(),
+  urlSquareLogoWithBackground: z.string().url(),
   urlLearnMore: z.string().url(),
   description: z.string().optional(),
   annualReports: memberReport.array().nonempty(),

diff --git a/src/content/members/sentry.json b/src/content/members/sentry.json
@@ -1,11 +1,31 @@
 {
   "domain": "sentry.io",
   "datetimeModified": "2024-07-19T12:24:46Z",
-  "description": "Sentry has given to Open Source for soooooo many years.",
+  "description": "People sometimes ask why Sentry is an open source company. However, they are typically asking about our business model: conversion funnel, product roadmap, monetization strategy. In our experience as engineers and as professionals, there is no other choice but open source for building a viable software company serving modern development cycles. As a mantra, Sentry is an open source company because the right to learn and to share what is learned with others is fundamental to product growth and relevance.",
   "name": "Sentry",
-  "urlLogoWithBackground": "https://fossfunders.com/logos/sentry.svg",
+  "urlSquareLogoWithBackground": "https://avatars.githubusercontent.com/u/1396951?s=200&v=4",
   "urlLearnMore": "https://open.sentry.io/osspledge/",
   "annualReports": [
+    {
+      "dateYearEnding": "2023-01-31",
+      "averageNumberOfDevs": 135,
+      "monetaryPayments": [
+        {
+          "amount": 435000,
+          "urlDetails": "https://thanks.dev/d/gh/getsentry/dependencies"
+        },
+        {
+          "amount": 50000,
+          "urlDetails": "https://github.com/orgs/getsentry/sponsoring"
+        },
+        {
+          "amount": 15000,
+          "urlDetails": "https://blog.sentry.io/we-just-gave-500-000-dollars-to-open-source-maintainers/"
+        }
+      ],
+      "monetaryValueOfTime": 100000,
+      "monetaryValueOfMaterials": 500000
+    },
     {
       "dateYearEnding": "2023-01-31",
       "averageNumberOfDevs": 135,

diff --git a/src/content/members/test.json b/src/content/members/test.json
@@ -3,7 +3,7 @@
   "datetimeModified": "2024-07-19T12:24:46Z",
   "description": "Sentry has given to Open Source for soooooo many years.",
   "name": "Sentry",
-  "urlLogoWithBackground": "https://fossfunders.com/logos/sentry.svg",
+  "urlSquareLogoWithBackground": "https://fossfunders.com/logos/sentry.svg",
   "urlLearnMore": "https://open.sentry.io/osspledge/",
   "annualReports": [
     {

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -1,9 +1,10 @@
 ---
 interface Props {
   title: string;
+  navless: bool;
 }
 
-const { title } = Astro.props;
+const { title, navless } = Astro.props;
 ---
 
 <!doctype html>
@@ -22,11 +23,19 @@ const { title } = Astro.props;
       src="https://plausible.io/js/script.js"></script>
   </head>
   <body>
-    <section
-      class="flex items-center justify-center flex-col flex-grow min-h-screen"
-    >
+    { !navless && <nav class="py-8">
+      <div class="container">
+        <a href="/">
+          <img
+            class="max-h-14"
+            src="/logos/opensourcepledge-logo-horiz-color.png"
+          >
+        </a>
+      </div>
+    </nav> }
+    <div class="container">
       <slot />
-    </section>
+    </div>
   </body>
 </html>
 <style is:global>
@@ -46,4 +55,12 @@ const { title } = Astro.props;
       Courier New,
       monospace;
   }
+  .container {
+    margin: auto;
+    padding: 0 1rem;
+    max-width: 42rem;
+    color: white;
+    font-size: 20px;
+    line-height: 1.6;
+  }
 </style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -4,10 +4,13 @@ import Prose from "../components/Prose.astro";
 import Button from "../components/Button.astro";
 ---
 
-<Layout title="Open Source Pledge">
-  <main class="flex justify-center max-w-xl p-4">
+<Layout title="Open Source Pledge" navless="true">
+  <div class="flex items-center min-h-screen">
     <Prose>
-      <h1 class="text-app-green mt-8 mb-4 text-5xl font-bold">Open Source Pledge</h1>
+      <img
+        class="max-w-72"
+        src="/logos/opensourcepledge-logo-horiz-color.png"
+      >
       <p class="text-app-muted"><em>Launching in October</em></p>
       <p>
         Open Source is <a
@@ -52,17 +55,8 @@ import Button from "../components/Button.astro";
         Brought to you by <a href="https://sentry.io/welcome/">Sentry</a>.
       </p>
     </Prose>
-  </main>
+  </div>
 </Layout>
 
 <style>
-  main {
-    margin: auto;
-    padding: 1rem;
-    width: 800px;
-    max-width: calc(100% - 2rem);
-    color: white;
-    font-size: 20px;
-    line-height: 1.6;
-  }
 </style>
diff --git a/src/pages/members/[id].astro b/src/pages/members/[id].astro
@@ -51,92 +51,84 @@ function fmtCurrency(num: number) {
   });
 }
 ---
-<Layout title="OSS Pledge">
-  <main class="flex justify-center max-w-xl p-4">
-    <Prose>
-      <h1 class="text-app-green mt-8 mb-4 text-5xl font-bold">OSS Pledge</h1>
-
-      <a href="/">Home</a>
-
-      <h2>{member.name}</h2>
-
-      <img src={member.urlLogoWithBackground}>
-
-      <p>{member.description}</p>
-
-      <a href={member.urlLearnMore}>Learn more →</a>
-
-      {member.annualReports.map(report => <div class="annual-report">
-        <h3>Year Ending {report.dateYearEnding}</h3>
-
-        <b>{fmtCurrency(getDollarsPerDev(report))} / dev</b>
-
-        <h4>Payments to Independent Maintainers</h4>
-        <table>
-          <tr>
-            <th class="text-left">Platform</th>
-            <th class="text-right">Amount ($)</th>
-          </tr>
-          {report.monetaryPayments.map(entry => <tr>
-            <td>{entry.urlDetails && <a href={entry.urlDetails}>{getPlatformName(entry.urlDetails)}</a>}</td>
-            <td class="text-right">{fmtCurrency(entry.amount)}</td>
-          </tr>)}
-          <tr>
-            <td>Total</td>
-            <td class="text-right">{fmtCurrency(getReportCashTotal(report))}</td>
-          </tr>
-          <tr>
-            <td>Average number of devs</td>
-            <td class="text-right">{fmtCurrency(report.averageNumberOfDevs)}</td>
-          </tr>
-          <tr>
-            <td>$ / dev</td>
-            <td class="text-right">{fmtCurrency(getDollarsPerDev(report))}</td>
-          </tr>
-        </table>
-
-        <h4>Other Contributions</h4>
-        <table>
-          <tr>
-            <th class="text-left">Item</th>
-            <th class="text-right">Amount ($)</th>
-          </tr>
-          <tr>
-            <td>Value of time</td>
-            <td class="text-right">{fmtCurrency(report.monetaryValueOfTime)}</td>
-          </tr>
-          <tr>
-            <td>Value of materials</td>
-            <td class="text-right">{fmtCurrency(report.monetaryValueOfMaterials)}</td>
-          </tr>
-          <tr>
-            <td>Payments to independent maintainers</td>
-            <td class="text-right">{fmtCurrency(getReportCashTotal(report))}</td>
-          </tr>
-          <tr>
-            <td>Total</td>
-            <td class="text-right">{fmtCurrency(getReportFullTotal(report))}</td>
-          </tr>
-        </table>
-      </div>)}
-
-      <small>
-        This information is provided directly by {member.name}. Open
-        Source Pledge does not carry out any in-depth validation of this data.
-      </small>
-
-    </Prose>
-  </main>
+<Layout title="Open Source Pledge">
+  <Prose>
+    <div class="flex items-center">
+      <img
+        class="h-28 m-0 mr-8"
+        src={member.urlSquareLogoWithBackground}
+      >
+      <h2 class="text-6xl m-0">
+        {member.name}
+        <small class="block text-base font-normal pt-2">Open Source Pledge Member</small>
+      </h2>
+    </div>
+
+    <p>{member.description}</p>
+
+    <a href={member.urlLearnMore}>Learn more →</a>
+
+    {member.annualReports.map(report => <div class="annual-report mt-12">
+      <div class="text-center">
+        <h3 class="mt-0 text-2xl">Year Ending {report.dateYearEnding}</h3>
+        <strong>{fmtCurrency(getDollarsPerDev(report))} / dev</strong>
+      </div>
+
+      <h4 class="text-xl">Payments to Independent Maintainers</h4>
+      <table>
+        <tr>
+          <th class="text-left">Platform</th>
+          <th class="text-right">Amount ($)</th>
+        </tr>
+        {report.monetaryPayments.map(entry => <tr>
+          <td>{entry.urlDetails && <a href={entry.urlDetails}>{getPlatformName(entry.urlDetails)}</a>}</td>
+          <td class="text-right">{fmtCurrency(entry.amount)}</td>
+        </tr>)}
+        <tr>
+          <td>Total</td>
+          <td class="text-right">{fmtCurrency(getReportCashTotal(report))}</td>
+        </tr>
+        <tr>
+          <td>Average number of devs</td>
+          <td class="text-right">{fmtCurrency(report.averageNumberOfDevs)}</td>
+        </tr>
+        <tr>
+          <td>$ / dev</td>
+          <td class="text-right">{fmtCurrency(getDollarsPerDev(report))}</td>
+        </tr>
+      </table>
+
+      <h4 class="text-xl">Other Contributions</h4>
+      <table>
+        <tr>
+          <th class="text-left">Item</th>
+          <th class="text-right">Amount ($)</th>
+        </tr>
+        <tr>
+          <td>Value of time</td>
+          <td class="text-right">{fmtCurrency(report.monetaryValueOfTime)}</td>
+        </tr>
+        <tr>
+          <td>Value of materials</td>
+          <td class="text-right">{fmtCurrency(report.monetaryValueOfMaterials)}</td>
+        </tr>
+        <tr>
+          <td>Payments to independent maintainers</td>
+          <td class="text-right">{fmtCurrency(getReportCashTotal(report))}</td>
+        </tr>
+        <tr>
+          <td>Total</td>
+          <td class="text-right">{fmtCurrency(getReportFullTotal(report))}</td>
+        </tr>
+      </table>
+    </div>)}
+
+    <small>
+      This information is provided directly by {member.name}. Open
+      Source Pledge does not carry out any in-depth validation of this data.
+    </small>
+
+  </Prose>
 </Layout>
-
 <style>
-  main {
-    margin: auto;
-    padding: 1rem;
-    width: 800px;
-    max-width: calc(100% - 2rem);
-    color: white;
-    font-size: 20px;
-    line-height: 1.6;
-  }
 </style>