Added OG Image (#5251)

- Added dynamic OG Image to share and download in contributors page

<img width="1176" alt="Screenshot 2024-05-02 at 16 24 00"
src="https://github.com/twentyhq/twenty/assets/102751374/0579454b-ccc7-46ba-9875-52458f06ee82">

- Added dynamic metadata 

- Added design to contributor page

- Added a NEXT_PUBLIC_HOST_URL in the .env file

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

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

@@ -0,0 +1,96 @@
+import { findAll } from '@/database/database';
+import { pullRequestModel, userModel } from '@/database/model';
+
+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) =>
+        ![
+          'dependabot',
+          'cyborch',
+          'emilienchvt',
+          'Samox',
+          'charlesBochet',
+          'gitstart-app',
+          'thaisguigon',
+          'lucasbordeau',
+          'magrinj',
+          'Weiko',
+          'gitstart-twenty',
+          'bosiraphael',
+          'martmull',
+          'FelixMalfait',
+          'thomtrp',
+          'Bonapara',
+          'nimraahmed',
+        ].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,
+  };
+};