Integrate Keystatic to edit twenty.com content (#10709)

This PR introduces Keystatic to let us edit twenty.com's content with a
CMS. For now, we'll focus on creating release notes through Keystatic as
it uses quite simple Markdown. Other types of content will need some
refactoring to work with Keystatic.


https://github.com/user-attachments/assets/e9f85bbf-daff-4b41-bc97-d1baf63758b2

---------

Co-authored-by: Félix Malfait <felix@twenty.com>

packages/twenty-website/src/app/(public)/contributors/[slug]/page.tsx

@@ -0,0 +1,84 @@
+export const dynamic = 'force-dynamic';
+
+import { Metadata } from 'next';
+
+import { getContributorActivity } from '@/app/(public)/contributors/utils/get-contributor-activity';
+import { ActivityLog } from '@/app/_components/contributors/ActivityLog';
+import { Breadcrumb } from '@/app/_components/contributors/Breadcrumb';
+import { ContentContainer } from '@/app/_components/contributors/ContentContainer';
+import { ProfileCard } from '@/app/_components/contributors/ProfileCard';
+import { ProfileInfo } from '@/app/_components/contributors/ProfileInfo';
+import { ProfileSharing } from '@/app/_components/contributors/ProfileSharing';
+import { PullRequests } from '@/app/_components/contributors/PullRequests';
+import { ThankYou } from '@/app/_components/contributors/ThankYou';
+import { Background } from '@/app/_components/oss-friends/Background';
+
+export function generateMetadata({
+  params,
+}: {
+  params: { slug: string };
+}): Metadata {
+  return {
+    metadataBase: new URL(`https://twenty.com`),
+    title: 'Twenty - ' + params.slug,
+    description:
+      'Explore the impactful contributions of ' +
+      params.slug +
+      ' on the Twenty Github Repo. Discover their merged pull requests, ongoing work, and top ranking. Join and contribute to the #1 Open-Source CRM thriving community!',
+    openGraph: {
+      images: [`https://twenty.com/api/contributors/${params.slug}/og.png`],
+    },
+  };
+}
+
+export default async function ({ params }: { params: { slug: string } }) {
+  try {
+    const contributorActivity = await getContributorActivity(params.slug);
+    if (contributorActivity) {
+      const {
+        firstContributionAt,
+        mergedPRsCount,
+        rank,
+        activeDays,
+        pullRequestActivityArray,
+        contributorPullRequests,
+        contributor,
+      } = contributorActivity;
+
+      return (
+        <Background>
+          <ContentContainer>
+            <Breadcrumb active={contributor.id} />
+            <ProfileCard
+              username={contributor.id}
+              avatarUrl={contributor.avatarUrl}
+              firstContributionAt={firstContributionAt}
+            />
+            <ProfileInfo
+              mergedPRsCount={mergedPRsCount}
+              rank={rank}
+              activeDays={activeDays}
+            />
+            <ProfileSharing username={contributor.id} />
+            <ActivityLog data={pullRequestActivityArray} />
+            <PullRequests
+              list={
+                contributorPullRequests.slice(0, 9) as {
+                  id: string;
+                  title: string;
+                  url: string;
+                  createdAt: string;
+                  mergedAt: string | null;
+                  authorId: string;
+                }[]
+              }
+            />
+            <ThankYou username={contributor.id} />
+          </ContentContainer>
+        </Background>
+      );
+    }
+  } catch (error) {
+    console.error('error: ', error);
+  }
+}

packages/twenty-website/src/app/(public)/contributors/page.tsx

@@ -0,0 +1,53 @@
+export const dynamic = 'force-dynamic';
+
+import AvatarGrid from '@/app/_components/contributors/AvatarGrid';
+import { Header } from '@/app/_components/contributors/Header';
+import { Background } from '@/app/_components/oss-friends/Background';
+import { ContentContainer } from '@/app/_components/oss-friends/ContentContainer';
+import { findAll } from '@/database/database';
+import { pullRequestModel, userModel } from '@/database/model';
+import { TWENTY_TEAM_MEMBERS } from '@/shared-utils/listTeamMembers';
+
+export const metadata = {
+  title: 'Twenty - Contributors',
+  description:
+    'Discover the brilliant minds behind Twenty.com. Meet our contributors and explore how their expertise contributes to making Twenty the leading open-source CRM. Join our community today.',
+  icons: '/images/core/logo.svg',
+};
+
+interface Contributor {
+  id: string;
+  avatarUrl: string;
+}
+
+const Contributors = async () => {
+  const contributors = await findAll(userModel);
+  const pullRequests = await findAll(pullRequestModel);
+
+  const pullRequestByAuthor = pullRequests.reduce((acc, pr) => {
+    acc[pr.authorId] = acc[pr.authorId] ? acc[pr.authorId] + 1 : 1;
+    return acc;
+  }, {});
+
+  const fitlerContributors = contributors
+    .filter((contributor) => contributor.isEmployee === '0')
+    .filter((contributor) => !TWENTY_TEAM_MEMBERS.includes(contributor.id))
+    .map((contributor) => {
+      contributor.pullRequestCount = pullRequestByAuthor[contributor.id] || 0;
+
+      return contributor;
+    })
+    .sort((a, b) => b.pullRequestCount - a.pullRequestCount)
+    .filter((contributor) => contributor.pullRequestCount > 0);
+
+  return (
+    <Background>
+      <ContentContainer>
+        <Header />
+        <AvatarGrid users={fitlerContributors as Contributor[]} />
+      </ContentContainer>
+    </Background>
+  );
+};
+
+export default Contributors;

packages/twenty-website/src/app/(public)/contributors/utils/get-activity-end-date.tsx

@@ -0,0 +1,22 @@
+const TOTAL_DAYS_TO_FULL_WIDTH = 232;
+
+export const getActivityEndDate = (
+  activityDates: { value: number; day: string }[],
+) => {
+  const startDate = new Date(activityDates[0].day);
+  const endDate = new Date(activityDates[activityDates.length - 1].day);
+
+  const differenceInMilliseconds = endDate.getTime() - startDate.getTime();
+
+  const numberOfDays = Math.floor(
+    differenceInMilliseconds / (1000 * 60 * 60 * 24),
+  );
+
+  const daysToAdd = TOTAL_DAYS_TO_FULL_WIDTH - numberOfDays;
+
+  if (daysToAdd > 0) {
+    endDate.setDate(endDate.getDate() + daysToAdd);
+  }
+
+  return endDate;
+};

packages/twenty-website/src/app/(public)/contributors/utils/get-contributor-activity.ts

@@ -0,0 +1,76 @@
+import { findAll } from '@/database/database';
+import { pullRequestModel, userModel } from '@/database/model';
+import { TWENTY_TEAM_MEMBERS } from '@/shared-utils/listTeamMembers';
+
+export const getContributorActivity = async (username: string) => {
+  const contributors = await findAll(userModel);
+
+  const contributor = contributors.find((contributor) => {
+    return contributor.id === username;
+  });
+
+  if (!contributor) {
+    return;
+  }
+
+  const pullRequests = await findAll(pullRequestModel);
+  const mergedPullRequests = pullRequests
+    .filter((pr) => pr.mergedAt !== null)
+    .filter((pr) => !TWENTY_TEAM_MEMBERS.includes(pr.authorId));
+
+  const contributorPullRequests = pullRequests.filter(
+    (pr) => pr.authorId === contributor.id,
+  );
+  const mergedContributorPullRequests = contributorPullRequests.filter(
+    (pr) => pr.mergedAt !== null,
+  );
+
+  const mergedContributorPullRequestsByContributor = mergedPullRequests.reduce(
+    (acc, pr) => {
+      acc[pr.authorId] = (acc[pr.authorId] || 0) + 1;
+      return acc;
+    },
+    {},
+  );
+
+  const mergedContributorPullRequestsByContributorArray = Object.entries(
+    mergedContributorPullRequestsByContributor,
+  )
+    .map(([authorId, value]) => ({ authorId, value }))
+    .sort((a, b) => b.value - a.value);
+
+  const contributorRank =
+    ((mergedContributorPullRequestsByContributorArray.findIndex(
+      (contributor) => contributor.authorId === username,
+    ) +
+      1) /
+      contributors.length) *
+    100;
+
+  const pullRequestActivity = contributorPullRequests.reduce((acc, pr) => {
+    const date = new Date(pr.createdAt).toISOString().split('T')[0];
+    acc[date] = (acc[date] || 0) + 1;
+    return acc;
+  }, []);
+
+  const pullRequestActivityArray = Object.entries(pullRequestActivity)
+    .map(([day, value]) => ({ day, value }))
+    .sort((a, b) => new Date(a.day).getTime() - new Date(b.day).getTime());
+
+  const firstContributionAt = pullRequestActivityArray[0]?.day;
+  const mergedPRsCount = mergedContributorPullRequests.length;
+  const rank = Math.ceil(Number(contributorRank)).toFixed(0);
+  const activeDays = pullRequestActivityArray.length;
+  const contributorAvatar = contributor.avatarUrl;
+
+  return {
+    firstContributionAt,
+    mergedPRsCount,
+    rank,
+    activeDays,
+    pullRequestActivityArray,
+    contributorPullRequests,
+    contributorAvatar,
+    contributor,
+  };
+};