twentyhq · FelixMalfait · May 21, 2024 · May 10, 2024 · May 14, 2024 · May 14, 2024
diff --git a/.github/workflows/congratulate.yml b/.github/workflows/congratulate.yml
@@ -0,0 +1,23 @@
+name: Congratulate Contributors
+
+on:
+  # it's usually not recommended to use pull_request_target
+  # but we consider it's safe here if we keep the same steps
+  # see: https://securitylab.github.com/research/github-actions-preventing-pwn-requests/
+  # and: https://github.com/facebook/react-native/pull/34370/files
+  pull_request_target:
+    types: [closed]
+permissions:
+  pull-requests: write
+jobs:
+  congratulate:
+    if: github.event.pull_request.merged == true
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install dependencies
+        uses: ./.github/workflows/actions/yarn-install
+      - name: Run congratulate-dangerfile.js
+        run: cd packages/twenty-utils && npx nx danger:congratulate
+        env:
+          DANGER_GITHUB_API_TOKEN: ${{ github.token }}
diff --git a/packages/twenty-utils/congratulate-dangerfile.ts b/packages/twenty-utils/congratulate-dangerfile.ts
@@ -0,0 +1,72 @@
+import { danger } from 'danger';
+
+const ordinalSuffix = (number) => {
+  const v = number % 100;
+  if (v === 11 || v === 12 || v === 13) {
+    return number + 'th';
+  }
+  const suffixes = { 1: 'st', 2: 'nd', 3: 'rd' };
+  return number + (suffixes[v % 10] || 'th');
+};
+
+const fetchContributorStats = async (username: string) => {
+  const apiUrl = `https://twenty.com/api/contributors/contributorStats/${username}`;
+
+  const response = await fetch(apiUrl);
+  const data = await response.json();
+  return data;
+};
+
+const fetchContributorImage = async (username: string) => {
+  const apiUrl = `https://twenty.com/api/contributors/${username}/og.png`;
+
+  await fetch(apiUrl);
+};
+
+const runCongratulate = async () => {
+  const pullRequest = danger.github.pr;
+  const userName = pullRequest.user.login;
+
+  const { data: pullRequests } =
+    await danger.github.api.rest.search.issuesAndPullRequests({
+      q: `is:pr author:${userName} is:closed repo:twentyhq/twenty`,
+      per_page: 2,
+      page: 1,
+    });
+
+  let stats;
+  const isFirstPR = pullRequests.total_count === 1;
+
+  if (!isFirstPR) {
+    stats = await fetchContributorStats(userName);
+  } else {
+    stats = { mergedPRsCount: 1, rank: 52 };
+  }
+
+  const contributorUrl = `https://twenty.com/contributors/${userName}`;
+
+  // Pre-fetch to trigger cloudflare cache
+  await fetchContributorImage(userName);
+
+  const message =
+    `Thanks @${userName} for your contribution!\n` +
+    `This marks your **${ordinalSuffix(
+      stats.mergedPRsCount,
+    )}** PR on the repo. ` +
+    `You're **top ${stats.rank}%** of all our contributors 🎉\n` +
+    `[See contributor page](${contributorUrl}) - ` +
+    `[Share on LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=${contributorUrl}) - ` +
+    `[Share on Twitter](https://www.twitter.com/share?url=${contributorUrl})\n\n` +
+    `![Contributions](https://twenty.com/api/contributors/${userName}/og.png)`;
+
+  await danger.github.api.rest.issues.createComment({
+    owner: danger.github.thisPR.owner,
+    repo: danger.github.thisPR.repo,
+    issue_number: danger.github.thisPR.pull_number,
+    body: message,
+  });
+};
+
+if (danger.github && danger.github.pr.merged) {
+  runCongratulate();
+}
diff --git a/packages/twenty-utils/package.json b/packages/twenty-utils/package.json
@@ -4,6 +4,7 @@
   "scripts": {
     "nx": "NX_DEFAULT_PROJECT=twenty-front node ../../node_modules/nx/bin/nx.js",
     "danger:ci": "danger ci --use-github-checks --failOnErrors",
+    "danger:congratulate": "danger ci --dangerfile ./congratulate-dangerfile.ts --use-github-checks --failOnErrors",
     "release": "node release.js"
   }
 }
diff --git a/packages/twenty-website/src/app/_components/contributors/ProfileSharing.tsx b/packages/twenty-website/src/app/_components/contributors/ProfileSharing.tsx
@@ -52,7 +52,8 @@ interface ProfileProps {
 }
 
 export const ProfileSharing = ({ username }: ProfileProps) => {
-  const baseUrl = `${window.location.protocol}//${window.location.host}`;
+  const baseUrl = 'https://twenty.com';
+
   const contributorUrl = `${baseUrl}/contributors/${username}`;
 
   const handleDownload = async () => {
@@ -87,7 +88,7 @@ export const ProfileSharing = ({ username }: ProfileProps) => {
         <IconDownload /> Download Image
       </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

diff --git a/...pi/contributors/og-image/[slug]/route.tsx → .../api/contributors/[slug]/og.png/route.tsx b/...pi/contributors/og-image/[slug]/route.tsx → .../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}`, {

diff --git a/...api/contributors/og-image/[slug]/style.ts → ...p/api/contributors/[slug]/og.png/style.ts b/...api/contributors/og-image/[slug]/style.ts → ...p/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,21 +104,21 @@ 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 = {
   position: 'absolute',
   right: 0,
   display: 'flex',
   width: '2px',
-  height: '85px',
+  height: '120px',
   backgroundColor: '#141414',
 };
diff --git a/packages/twenty-website/src/app/api/contributors/contributorStats/[slug]/route.tsx b/packages/twenty-website/src/app/api/contributors/contributorStats/[slug]/route.tsx
@@ -0,0 +1,23 @@
+import { getContributorActivity } from '@/app/contributors/utils/get-contributor-activity';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET(request: Request) {
+  try {
+    const url = request.url;
+
+    const username = url.split('/')?.pop() || '';
+
+    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,
+    });
+  }
+}
diff --git a/packages/twenty-website/src/app/contributors/[slug]/page.tsx b/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`],
     },
   };
 }