feat: add github stars cummulative

apps/marketing/src/app/(marketing)/open/gh-stars.tsx

@@ -0,0 +1,108 @@
+'use client';
+
+import { HTMLAttributes } from 'react';
+
+import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+
+import { cn } from '@documenso/ui/lib/utils';
+
+type StargazersType = {
+  [key: string]: {
+    stars?: number;
+    forks?: number;
+    mergedPRs?: number;
+    openIssues?: number;
+  };
+};
+
+const data: StargazersType = {
+  '2023-8': {
+    stars: 2483,
+    forks: 155,
+    mergedPRs: 87,
+    openIssues: 67,
+  },
+  '2023-7': {
+    stars: 2250,
+    forks: 0,
+    mergedPRs: 0,
+    openIssues: 0,
+  },
+  '2023-6': {
+    stars: 2070,
+    forks: 0,
+    mergedPRs: 0,
+    openIssues: 0,
+  },
+  '2023-5': {
+    stars: 1260,
+    forks: 0,
+    mergedPRs: 0,
+    openIssues: 0,
+  },
+  '2023-4': {
+    stars: 90,
+    forks: 0,
+    mergedPRs: 0,
+    openIssues: 0,
+  },
+  '2023-3': {
+    stars: 0,
+    forks: 0,
+    mergedPRs: 0,
+    openIssues: 0,
+  },
+};
+
+function formatMonth(monthStr: string) {
+  const [year, month] = monthStr.split('-');
+  const monthNames = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+  ];
+  return `${monthNames[parseInt(month, 10) - 1]} ${year}`;
+}
+
+const formattedData = Object.keys(data)
+  .map((key) => ({
+    month: formatMonth(key),
+    stars: data[key].stars,
+  }))
+  .reverse();
+
+export type GithubStarsProps = HTMLAttributes<HTMLDivElement>;
+
+export const GithubStars = ({ className, ...props }: GithubStarsProps) => {
+  return (
+    <div className={cn('flex flex-col', className)} {...props}>
+      <h3 className="px-4 text-lg font-semibold">Github Monthly Stars</h3>
+
+      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border shadow-sm hover:shadow">
+        <ResponsiveContainer width="100%" height={400}>
+          <BarChart data={formattedData} margin={{ top: 40, right: 40, bottom: 20, left: 40 }}>
+            <XAxis dataKey="month" />
+            <YAxis />
+            <Tooltip
+              itemStyle={{
+                color: 'hsl(var(--primary-foreground))',
+              }}
+              formatter={(value) => [Number(value), 'Stars']}
+              cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
+            />
+            <Bar dataKey="stars" fill="hsl(var(--primary))" label="Stars" />
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+};

apps/marketing/src/app/(marketing)/open/page.tsx

@@ -5,6 +5,7 @@ import { SalaryBands } from '~/app/(marketing)/open/salary-bands';
 
 import { CapTable } from './cap-table';
 import { FundingRaised } from './funding-raised';
+import { GithubStars } from './gh-stars';
 import { TeamMembers } from './team-members';
 
 export const revalidate = 86400;
@@ -86,7 +87,8 @@ export default async function OpenPage() {
 
         <FundingRaised className="col-span-12 lg:col-span-6" />
 
-        <CapTable className="col-span-12" />
+        <CapTable className="col-span-12 lg:col-span-6" />
+        <GithubStars className="col-span-12 lg:col-span-6" />
 
         <div className="col-span-12 mt-12 flex flex-col items-center justify-center">
           <h2 className="text-2xl font-bold">Where's the rest?</h2>