Create congratulations bot (#5404)

- Created congratulations bot :
<img width="939" alt="Screenshot 2024-05-14 at 12 47 13"
src="https://github.com/twentyhq/twenty/assets/102751374/5138515f-fe4d-4c6d-9c7a-0240accbfca9">

- Modified OG image

- Added png extension to OG image route

To be noted: The bot will not work until the new API route is not
deployed. Please check OG image with Cloudflare cache.

---------

Co-authored-by: Ady Beraud <a.beraud96@gmail.com>

packages/twenty-website/src/app/_components/contributors/ProfileSharing.tsx

@@ -55,7 +55,7 @@ interface ProfileProps {
 
 export const ProfileSharing = ({ username }: ProfileProps) => {
   const [loading, setLoading] = useState(false);
-  const baseUrl = `${window.location.protocol}//${window.location.host}`;
+  const baseUrl = 'https://twenty.com';
   const contributorUrl = `${baseUrl}/contributors/${username}`;
 
   const handleDownload = async () => {
@@ -101,7 +101,7 @@ export const ProfileSharing = ({ username }: ProfileProps) => {
         )}
       </StyledButton>
       <StyledButton
-        href={`http://www.twitter.com/share?url=${contributorUrl}`}
+        href={`https://www.twitter.com/share?url=${contributorUrl}`}
         target="blank"
       >
         <XIcon color="black" size="24px" /> Share on X

packages/twenty-website/src/app/api/contributors/[slug]/og.png/route.tsx

@@ -2,7 +2,7 @@ import { format } from 'date-fns';
 import { ImageResponse } from 'next/og';
 
 import {
-  bottomBackgroundImage,
+  backgroundImage,
   container,
   contributorInfo,
   contributorInfoBox,
@@ -15,8 +15,7 @@ import {
   profileInfoContainer,
   profileUsernameHeader,
   styledContributorAvatar,
-  topBackgroundImage,
-} from '@/app/api/contributors/og-image/[slug]/style';
+} from '@/app/api/contributors/[slug]/og.png/style';
 import { getContributorActivity } from '@/app/contributors/utils/get-contributor-activity';
 
 const GABARITO_FONT_CDN_URL =
@@ -33,8 +32,10 @@ const getGabarito = async () => {
 export async function GET(request: Request) {
   try {
     const url = request.url;
-
-    const username = url.split('/')?.pop() || '';
+    const splitUrl = url.split('/');
+    const usernameIndex =
+      splitUrl.findIndex((part) => part === 'contributors') + 1;
+    const username = splitUrl[usernameIndex];
 
     const contributorActivity = await getContributorActivity(username);
     if (contributorActivity) {
@@ -45,11 +46,11 @@ export async function GET(request: Request) {
         activeDays,
         contributorAvatar,
       } = contributorActivity;
-      return await new ImageResponse(
+
+      const imageResponse = await new ImageResponse(
         (
           <div style={container}>
-            <div style={topBackgroundImage}></div>
-            <div style={bottomBackgroundImage}></div>
+            <div style={backgroundImage}></div>
             <div style={profileContainer}>
               <img src={contributorAvatar} style={styledContributorAvatar} />
               <div style={profileInfoContainer}>
@@ -59,8 +60,8 @@ export async function GET(request: Request) {
                 </h2>
               </div>
               <svg
-                width="96"
-                height="96"
+                width="134"
+                height="134"
                 viewBox="0 0 136 136"
                 fill="none"
                 xmlns="http://www.w3.org/2000/svg"
@@ -122,6 +123,7 @@ export async function GET(request: Request) {
           ],
         },
       );
+      return imageResponse;
     }
   } catch (error) {
     return new Response(`error: ${error}`, {

packages/twenty-website/src/app/api/contributors/[slug]/og.png/style.ts

@@ -14,42 +14,36 @@ export const container: CSSProperties = {
   fontFamily: 'Gabarito',
 };
 
-export const topBackgroundImage: CSSProperties = {
-  backgroundImage: `url(${BACKGROUND_IMAGE_URL})`,
+export const backgroundImage: CSSProperties = {
   position: 'absolute',
-  zIndex: '-1',
-  width: '1300px',
-  height: '250px',
-  transform: 'rotate(-11deg)',
-  opacity: '0.2',
-  top: '-100',
-  left: '-25',
-};
-
-export const bottomBackgroundImage: CSSProperties = {
-  backgroundImage: `url(${BACKGROUND_IMAGE_URL})`,
-  position: 'absolute',
-  zIndex: '-1',
-  width: '1300px',
-  height: '250px',
-  transform: 'rotate(-11deg)',
-  opacity: '0.2',
-  bottom: '-120',
-  right: '-40',
+  width: '1250px',
+  height: '850px',
+  transform: 'rotate(-7deg)',
+  opacity: '0.8',
+  backgroundImage: `
+  linear-gradient(
+    158.4deg,
+    rgba(255, 255, 255, 0.8) 30.69%,
+    #FFFFFF 35.12%,
+    rgba(255, 255, 255, 0.8) 60.27%,
+    rgba(255, 255, 255, 0.64) 38.88%
+  ),
+  url(${BACKGROUND_IMAGE_URL})`,
 };
 
 export const profileContainer: CSSProperties = {
   display: 'flex',
   flexDirection: 'row',
   justifyContent: 'space-between',
-  width: '780px',
-  margin: '0px 0px 40px',
+  width: '970px',
+  height: '134px',
+  margin: '0px 0px 55px',
 };
 
 export const styledContributorAvatar = {
   display: 'flex',
-  width: '96px',
-  height: '96px',
+  width: '134px',
+  height: '134px',
   margin: '0px',
   border: '3px solid #141414',
   borderRadius: '16px',
@@ -65,7 +59,7 @@ export const profileInfoContainer: CSSProperties = {
 
 export const profileUsernameHeader: CSSProperties = {
   margin: '0px',
-  fontSize: '28px',
+  fontSize: '39px',
   fontWeight: '700',
   color: '#141414',
   fontFamily: 'Gabarito',
@@ -74,7 +68,7 @@ export const profileUsernameHeader: CSSProperties = {
 export const profileContributionHeader: CSSProperties = {
   margin: '0px',
   color: '#818181',
-  fontSize: '20px',
+  fontSize: '27px',
   fontWeight: '400',
 };
 
@@ -84,8 +78,8 @@ export const contributorInfoContainer: CSSProperties = {
   display: 'flex',
   flexDirection: 'row',
   justifyContent: 'space-around',
-  width: '780px',
-  height: '149px',
+  width: '970px',
+  height: '209px',
   backgroundColor: '#F1F1F1',
 };
 
@@ -110,14 +104,14 @@ export const contributorInfoTitle = {
   color: '#B3B3B3',
   margin: '0px',
   fontWeight: '500',
-  fontSize: '24px',
+  fontSize: '33px',
 };
 
 export const contributorInfoStats = {
   color: '#474747',
   margin: '0px',
   fontWeight: '700',
-  fontSize: '40px',
+  fontSize: '55px',
 };
 
 export const infoSeparator: CSSProperties = {
@@ -125,6 +119,6 @@ export const infoSeparator: CSSProperties = {
   right: 0,
   display: 'flex',
   width: '2px',
-  height: '85px',
+  height: '120px',
   backgroundColor: '#141414',
 };

packages/twenty-website/src/app/api/contributors/contributorStats/[slug]/route.tsx

@@ -0,0 +1,26 @@
+import { getContributorActivity } from '@/app/contributors/utils/get-contributor-activity';
+import { executePartialSync } from '@/github/execute-partial-sync';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET(request: Request) {
+  try {
+    const url = request.url;
+
+    const username = url.split('/')?.pop() || '';
+
+    await executePartialSync();
+
+    const contributorActivity = await getContributorActivity(username);
+
+    if (contributorActivity) {
+      const mergedPRsCount = contributorActivity.mergedPRsCount;
+      const rank = contributorActivity.rank;
+      return Response.json({ mergedPRsCount, rank });
+    }
+  } catch (error: any) {
+    return new Response(`Contributor stats error: ${error?.message}`, {
+      status: 500,
+    });
+  }
+}

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

@@ -19,13 +19,14 @@ export function generateMetadata({
   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: [`/api/contributors/og-image/${params.slug}`],
+      images: [`https://twenty.com/api/contributors/${params.slug}/og.png`],
     },
   };
 }

packages/twenty-website/src/github/contributors/fetch-issues-prs.tsx

@@ -6,22 +6,17 @@ import {
   Repository,
 } from '@/github/contributors/types';
 
-// TODO: We should implement a true partial sync instead of using pageLimit.
-// Check search-issues-prs.tsx and modify "updated:>2024-02-27" to make it dynamic
-
 export async function fetchIssuesPRs(
   query: typeof graphql,
   cursor: string | null = null,
   isIssues = false,
   accumulatedData: Array<PullRequestNode | IssueNode> = [],
-  pageLimit: number,
-  currentPage = 0,
 ): Promise<Array<PullRequestNode | IssueNode>> {
   const { repository } = await query<Repository>(
     `
       query ($cursor: String) {
         repository(owner: "twentyhq", name: "twenty") {
-          pullRequests(first: 30, after: $cursor, orderBy: {field: CREATED_AT, direction: DESC}) @skip(if: ${isIssues}) {
+          pullRequests(first: 100, after: $cursor, orderBy: {field: CREATED_AT, direction: DESC}) @skip(if: ${isIssues}) {
             nodes {
               id
               title
@@ -94,16 +89,12 @@ export async function fetchIssuesPRs(
     ? repository.issues.pageInfo
     : repository.pullRequests.pageInfo;
 
-  const newCurrentPage = currentPage + 1;
-
-  if ((!pageLimit || newCurrentPage < pageLimit) && pageInfo.hasNextPage) {
+  if (pageInfo.hasNextPage) {
     return fetchIssuesPRs(
       query,
       pageInfo.endCursor,
       isIssues,
       newAccumulatedData,
-      pageLimit,
-      currentPage + 1,
     );
   } else {
     return newAccumulatedData;

packages/twenty-website/src/github/contributors/get-latest-update.tsx

@@ -0,0 +1,15 @@
+import { desc } from 'drizzle-orm';
+
+import { findOne } from '@/database/database';
+import { issueModel, pullRequestModel } from '@/database/model';
+
+export async function getLatestUpdate() {
+  const latestPR = await findOne(
+    pullRequestModel,
+    desc(pullRequestModel.updatedAt),
+  );
+  const latestIssue = await findOne(issueModel, desc(issueModel.updatedAt));
+  const prDate = new Date(latestPR[0].updatedAt);
+  const issueDate = new Date(latestIssue[0].updatedAt);
+  return (prDate > issueDate ? prDate : issueDate).toISOString();
+}

packages/twenty-website/src/github/contributors/save-issues-to-db.tsx

@@ -42,7 +42,10 @@ export async function saveIssuesToDB(
           authorId: issue.author.login,
         },
       ],
-      { onConflictKey: 'id' },
+      {
+        onConflictKey: 'id',
+        onConflictUpdateObject: { updatedAt: issue.updatedAt },
+      },
     );
 
     for (const label of issue.labels.nodes) {

packages/twenty-website/src/github/contributors/save-prs-to-db.tsx

@@ -44,7 +44,10 @@ export async function savePRsToDB(
           authorId: pr.author.login,
         },
       ],
-      { onConflictKey: 'id', onConflictUpdateObject: { title: pr.title } },
+      {
+        onConflictKey: 'id',
+        onConflictUpdateObject: { title: pr.title, updatedAt: pr.updatedAt },
+      },
     );
 
     for (const label of pr.labels.nodes) {

packages/twenty-website/src/github/contributors/search-issues-prs.tsx

@@ -1,5 +1,6 @@
 import { graphql } from '@octokit/graphql';
 
+import { getLatestUpdate } from '@/github/contributors/get-latest-update';
 import {
   IssueNode,
   PullRequestNode,
@@ -12,12 +13,13 @@ export async function searchIssuesPRs(
   isIssues = false,
   accumulatedData: Array<PullRequestNode | IssueNode> = [],
 ): Promise<Array<PullRequestNode | IssueNode>> {
+  const since = await getLatestUpdate();
   const { search } = await query<SearchIssuesPRsQuery>(
     `
         query searchPullRequestsAndIssues($cursor: String) {
           search(query: "repo:twentyhq/twenty ${
             isIssues ? 'is:issue' : 'is:pr'
-          } updated:>2024-02-27", type: ISSUE, first: 100, after: $cursor) {
+          } updated:>${since}", type: ISSUE, first: 100, after: $cursor) {
             edges {
               node {
                 ... on PullRequest {
@@ -80,6 +82,7 @@ export async function searchIssuesPRs(
       cursor,
     },
   );
+
   const newAccumulatedData: Array<PullRequestNode | IssueNode> = [
     ...accumulatedData,
     ...search.edges.map(({ node }) => node),

packages/twenty-website/src/github/execute-partial-sync.ts

@@ -0,0 +1,46 @@
+import { graphql } from '@octokit/graphql';
+
+import { fetchAssignableUsers } from '@/github/contributors/fetch-assignable-users';
+import { saveIssuesToDB } from '@/github/contributors/save-issues-to-db';
+import { savePRsToDB } from '@/github/contributors/save-prs-to-db';
+import { searchIssuesPRs } from '@/github/contributors/search-issues-prs';
+import { IssueNode, PullRequestNode } from '@/github/contributors/types';
+import { fetchAndSaveGithubReleases } from '@/github/github-releases/fetch-and-save-github-releases';
+import { fetchAndSaveGithubStars } from '@/github/github-stars/fetch-and-save-github-stars';
+
+export const executePartialSync = async () => {
+  if (!global.process.env.GITHUB_TOKEN) {
+    return new Error('No GitHub token provided');
+  }
+
+  console.log('Synching data..');
+
+  const query = graphql.defaults({
+    headers: {
+      Authorization: 'bearer ' + global.process.env.GITHUB_TOKEN,
+    },
+  });
+
+  await fetchAndSaveGithubStars(query);
+  await fetchAndSaveGithubReleases(query);
+
+  const assignableUsers = await fetchAssignableUsers(query);
+
+  const fetchedPRs = (await searchIssuesPRs(
+    query,
+    null,
+    false,
+    [],
+  )) as Array<PullRequestNode>;
+  const fetchedIssues = (await searchIssuesPRs(
+    query,
+    null,
+    true,
+    [],
+  )) as Array<IssueNode>;
+
+  await savePRsToDB(fetchedPRs, assignableUsers);
+  await saveIssuesToDB(fetchedIssues, assignableUsers);
+
+  console.log('data synched!');
+};

packages/twenty-website/src/github/fetch-and-save-github-data.ts

@@ -9,11 +9,7 @@ import { IssueNode, PullRequestNode } from '@/github/contributors/types';
 import { fetchAndSaveGithubReleases } from '@/github/github-releases/fetch-and-save-github-releases';
 import { fetchAndSaveGithubStars } from '@/github/github-stars/fetch-and-save-github-stars';
 
-export const fetchAndSaveGithubData = async ({
-  pageLimit,
-}: {
-  pageLimit: number;
-}) => {
+export const fetchAndSaveGithubData = async () => {
   if (!global.process.env.GITHUB_TOKEN) {
     return new Error('No GitHub token provided');
   }
@@ -35,14 +31,12 @@ export const fetchAndSaveGithubData = async ({
     null,
     false,
     [],
-    pageLimit,
   )) as Array<PullRequestNode>;
   const fetchedIssues = (await fetchIssuesPRs(
     query,
     null,
     true,
     [],
-    pageLimit,
   )) as Array<IssueNode>;
 
   await savePRsToDB(fetchedPRs, assignableUsers);

packages/twenty-website/src/github/github-sync.ts

@@ -1,14 +1,16 @@
+import { executePartialSync } from '@/github/execute-partial-sync';
 import { fetchAndSaveGithubData } from '@/github/fetch-and-save-github-data';
 
 export const githubSync = async () => {
-  const pageLimitFlagIndex = process.argv.indexOf('--pageLimit');
-  let pageLimit = 0;
+  const isFullSyncFlagIndex = process.argv.indexOf('--isFullSync');
+  const isFullSync = isFullSyncFlagIndex > -1;
 
-  if (pageLimitFlagIndex > -1) {
-    pageLimit = parseInt(process.argv[pageLimitFlagIndex + 1], 10);
+  if (isFullSync) {
+    await fetchAndSaveGithubData();
+  } else {
+    await executePartialSync();
   }
 
-  await fetchAndSaveGithubData({ pageLimit });
   process.exit(0);
 };