From b1421c0ed9f6020ccf40a5da15fcecebc112700f Mon Sep 17 00:00:00 2001
From: Viet Nguyen <3805254+vnugent@users.noreply.github.com>
Date: Mon, 30 Oct 2023 14:15:15 -0700
Subject: [PATCH] feat: add github contributors (#1004)

---
 src/app/components/FinancialContributors.tsx | 21 ++++---
 src/app/components/LandingCTA.tsx            | 13 ++--
 src/app/components/LandingHero.tsx           |  4 +-
 src/app/components/RecentEdits.tsx           |  4 +-
 src/app/components/RecentTags.tsx            |  2 +-
 src/app/components/Volunteers.tsx            | 63 ++++++++++++++++++++
 src/app/components/ui/SectionContainer.tsx   | 28 ++++++---
 src/app/global.css                           |  4 ++
 src/app/page.tsx                             |  6 +-
 9 files changed, 116 insertions(+), 29 deletions(-)
 create mode 100644 src/app/components/Volunteers.tsx

diff --git a/src/app/components/FinancialContributors.tsx b/src/app/components/FinancialContributors.tsx
index 5cceed8bf..736099140 100644
--- a/src/app/components/FinancialContributors.tsx
+++ b/src/app/components/FinancialContributors.tsx
@@ -1,7 +1,7 @@
 import { getSummaryReport } from '@/js/graphql/opencollective'
 import { FinancialBackerAccountType } from '@/js/types'
 import { DonateButton } from './LandingCTA'
-
+import { SectionContainer, Width } from './ui/SectionContainer'
 /**
  * List financial contributors
  */
@@ -9,18 +9,21 @@ export const FinancialContributors: React.FC = async () => {
   const { donors, totalRaised } = await getSummaryReport()
 
   return (
-    <div className='rounded-box bg-accent/80 block w-full p-4 xl:p-10 mx-auto max-w-5xl xl:max-w-7xl'>
-      <div className='flex items-center gap-6'>
-        <h2>Financial Contributors</h2>
-        <span className='mt-0.5 text-sm'>Total: {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(totalRaised)}</span>
-      </div>
-      <hr className='mb-6 border-2 border-base-content' />
+    <SectionContainer
+      width={Width.compact}
+      className='bg-accent/80 rounded-box'
+      header={
+        <div className='flex items-center gap-6'>
+          <h2>Financial Contributors</h2>
+          <span className='mt-0.5 text-sm'>Total: {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(totalRaised)}</span>
+        </div>
+      }
+    >
       <div className='columns-3xs'>
         {donors.map(donor => <Donor key={donor.account.id} donor={donor} />)}
       </div>
-
       <div className='mt-6'><DonateButton /></div>
-    </div>
+    </SectionContainer>
   )
 }
 
diff --git a/src/app/components/LandingCTA.tsx b/src/app/components/LandingCTA.tsx
index 7653e6296..48627fd3d 100644
--- a/src/app/components/LandingCTA.tsx
+++ b/src/app/components/LandingCTA.tsx
@@ -27,16 +27,17 @@ const Card4Coders: React.FC = () => {
           <li>☑️ Use OpenBeta API & data in your projects.</li>
         </ul>
       }
-      action={
-        <>
-          <a href='https://docs.openbeta.io/how-to-contribute/overview' className='text-sm underline'>Dev onboarding</a>
-          <a className='btn btn-primary btn-sm btn-outline' href='https://github.com/orgs/OpenBeta/'>GitHub</a>
-        </>
-      }
+      action={<CodeContributorsAction />}
     />
   )
 }
 
+export const CodeContributorsAction: React.FC = () => (
+  <>
+    <a href='https://docs.openbeta.io/how-to-contribute/overview' className='text-sm underline'>Dev onboarding</a>
+    <a className='btn btn-primary btn-sm btn-outline' href='https://github.com/orgs/OpenBeta/'>GitHub</a>
+  </>)
+
 const Card4All: React.FC = () => {
   return (
     <Card
diff --git a/src/app/components/LandingHero.tsx b/src/app/components/LandingHero.tsx
index 54f52a9ba..24954b06a 100644
--- a/src/app/components/LandingHero.tsx
+++ b/src/app/components/LandingHero.tsx
@@ -2,7 +2,9 @@ export const LandingHero: React.FC = () => {
   return (
     <section className='w-full px-6'>
       <h1 className='text-2xl tracking-tighter font-semibold'>Share your climbing route knowledge!</h1>
-      <div className='font-medium text-neutral/80'>Join OpenBeta and help build a community resource for climbers</div>
+      <div className='font-medium text-neutral/80'>
+        Join us to help improve this comprehensive climbing resource for the community.
+      </div>
       <hr className='mt-3 border-2 border-base-content w-full' />
     </section>
   )
diff --git a/src/app/components/RecentEdits.tsx b/src/app/components/RecentEdits.tsx
index dc1b3ed0d..abad1a7a2 100644
--- a/src/app/components/RecentEdits.tsx
+++ b/src/app/components/RecentEdits.tsx
@@ -12,10 +12,10 @@ export const RecentEdits: React.FC = async () => {
   return (
     <section className='px-4 w-full'>
       <div className='flex items-center justify-between'>
-        <h2>Recent edits</h2>
+        <h3>Latest contributions </h3>
         <Link href='/edit' className='text-sm hover:underline'>See more</Link>
       </div>
-      <hr className='mb-6 border-2 border-base-content' />
+      <hr className='mb-6 border-1 border-base-content' />
       <div className='mt-4 flex justify-center flex-row flex-wrap gap-y-10 gap-x-4'>
         {history.splice(0, 10).map(changetset =>
           <ChangesetCard key={changetset.id} changeset={changetset} />
diff --git a/src/app/components/RecentTags.tsx b/src/app/components/RecentTags.tsx
index b7733f544..00ef6211d 100644
--- a/src/app/components/RecentTags.tsx
+++ b/src/app/components/RecentTags.tsx
@@ -21,7 +21,7 @@ export const RecentTags: React.FC = async () => {
   return (
     <section className='w-full '>
       <div className='px-4 2xl:px-0 mx-auto max-w-5xl xl:max-w-7xl'>
-        <h2>Recent Tags</h2>
+        <h2>Latest Photos</h2>
       </div>
 
       <div className='overflow-hidden bg-base-200/20'>
diff --git a/src/app/components/Volunteers.tsx b/src/app/components/Volunteers.tsx
new file mode 100644
index 000000000..1e036239d
--- /dev/null
+++ b/src/app/components/Volunteers.tsx
@@ -0,0 +1,63 @@
+import { CodeContributorsAction } from './LandingCTA'
+import { SectionContainer, Width } from './ui/SectionContainer'
+
+const url = 'https://raw.githubusercontent.com/OpenBeta/open-tacos/develop/.all-contributorsrc'
+
+/**
+ * Abbreviated GH profile
+ */
+interface GithubProfile {
+  login: string
+  name: string
+  avatar_url: string
+  profile: string
+  contributions: string[]
+}
+/**
+ * List code contributors & volunteers by loading contributor list
+ * managed by all-contributors bot.
+ */
+export const Volunteers: React.FC = async () => {
+  const res = await fetch(url, { cache: 'no-store' })
+  const { contributors }: { contributors: GithubProfile[] } = await res.json()
+  return (
+    <SectionContainer
+      width={Width.compact}
+      className='border rounded-box bg-base-200/20'
+      header={
+        <div className='flex items-center gap-6'>
+          <h2 className='text-base-content'>Volunteers</h2>
+          <span className='mt-0.5 text-sm'>Total: {new Intl.NumberFormat().format(contributors.length)}</span>
+        </div>
+      }
+    >
+      <div className='mb-8 max-w-lg'>
+        As an open source project, OpenBeta's success is thanks to a diverse group of volunteer contributors, many of whom are not even rock climbers. We deeply appreciate their vital role in shaping OpenBeta.
+      </div>
+      <div className='columns-3xs gap-x-4'>
+        {contributors.reverse().map(profile => <Profile key={profile.login} {...profile} />)}
+      </div>
+      <div className='pt-8 lg:pt-12 flex items-center gap-6'>
+        <CodeContributorsAction />
+      </div>
+    </SectionContainer>
+  )
+}
+
+const Profile: React.FC<GithubProfile> = ({
+  name,
+  /* eslint-disable-next-line */
+  avatar_url,
+  login
+}) => (
+  <a
+    className='flex items-center gap-2 mb-4 rounded-box overflow-hidden border w-fit bg-base-100 shadow'
+    href={`https://github.com/${login}`}
+  >
+    <div className='avatar'>
+      <div className='w-8 rounded-box'>
+        <img src={avatar_url} alt={name} />
+      </div>
+    </div>
+    <div className='text-sm uppercase text-base-content pr-4'>{name}</div>
+  </a>)
diff --git a/src/app/components/ui/SectionContainer.tsx b/src/app/components/ui/SectionContainer.tsx
index f3a960d88..257867e6c 100644
--- a/src/app/components/ui/SectionContainer.tsx
+++ b/src/app/components/ui/SectionContainer.tsx
@@ -1,15 +1,25 @@
 import { ReactNode } from 'react'
+import clx from 'classnames'
+
+export enum Width {
+  wide = '2xl:p-0',
+  compact = 'xl:p-10'
+}
 
 interface Props {
   header: ReactNode
   children: ReactNode
+  className?: string
+  width?: Width
 }
-export const SectionContainer: React.FC<Props> = ({ header, children }) => {
-  return (
-    <section className='block w-full px-4 2xl:px-0 mx-auto max-w-5xl xl:max-w-7xl'>
-      {header}
-      <hr className='mb-6 border-2 border-base-content' />
-      {children}
-    </section>
-  )
-}
+
+/**
+ * Reusable wide-screen container for root page
+ */
+export const SectionContainer: React.FC<Props> = ({ header, children, className = '', width = Width.wide }) => (
+  <section className={clx('block w-full p-4  mx-auto max-w-5xl xl:max-w-7xl', width, className)}>
+    {header}
+    <hr className='mb-6 border-2 border-base-content' />
+    {children}
+  </section>
+)
diff --git a/src/app/global.css b/src/app/global.css
index 5192c3277..92761c723 100644
--- a/src/app/global.css
+++ b/src/app/global.css
@@ -22,6 +22,10 @@ h2 {
     @apply text-base-content text-xl font-bold tracking-tight leading-loose;
 }
 
+h3 {
+    @apply text-base-content text-lg font-semibold tracking-tight leading-loose;
+}
+
 .card-body {
   @apply sm:px-0 border-0 !important;
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 849e01e2f..6af99259f 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -6,6 +6,7 @@ import { FinancialContributors } from './components/FinancialContributors'
 import { RecentTags } from './components/RecentTags'
 import { USAToC } from './components/USAToC'
 import { InternationalToC } from './components/InternationalToC'
+import { Volunteers } from './components/Volunteers'
 
 /**
  * Cache duration in seconds
@@ -33,7 +34,10 @@ export default async function Home (): Promise<any> {
       <RecentTags />
       <InternationalToC />
       <USAToC />
-      <FinancialContributors />
+      <div className='flex flex-col gap-10'>
+        <FinancialContributors />
+        <Volunteers />
+      </div>
     </div>
   )
 }