Add: Identify First-Time PR Contributors for Last Week

app/page.tsx

@@ -13,6 +13,7 @@ import { differenceInWeeks, parseISO } from "date-fns";
 import { featureIsEnabled, formatDate } from "@/lib/utils";
 import { fetchGithubDiscussion } from "@/lib/discussion";
 import GithubDiscussion from "@/components/discussions/GithubDiscussion";
+import { Contributor } from "@/lib/types";
 
 export default async function Home() {
   const contributors = (await getContributors())
@@ -26,6 +27,13 @@ export default async function Home() {
   const discussions = await fetchGithubDiscussion(5);
   const startDate = parseISO(env.NEXT_PUBLIC_ORG_START_DATE);
 
+  const featuredContributors = [
+    ...contributors.filter((contributor) => contributor.isNewContributor),
+    ...contributors
+      .filter((contributor) => !contributor.isNewContributor)
+      .slice(0, 8),
+  ];
+
   return (
     <div className="min-h-screen bg-background text-foreground">
       <section className="bg-background">
@@ -166,24 +174,24 @@ export default async function Home() {
                         role="list"
                         className="mt-4 space-y-4 sm:grid sm:grid-cols-2 sm:gap-6 sm:space-y-0 lg:grid-cols-2 lg:gap-8"
                       >
-                        {contributors
-                          .slice(0, 8)
-                          .map((contributor: any, index: number) => {
+                        {featuredContributors.map(
+                          (contributor: Contributor, index: number) => {
                             return (
                               <InfoCard
                                 key={index}
                                 contributor={contributor}
                                 isClickable
                               />
                             );
-                          })}
+                          },
+                        )}
                       </ul>
                       <Link
                         className="flex w-fit items-center gap-1 rounded px-3 py-2 text-secondary-400 underline underline-offset-2 transition-all duration-200 ease-in-out hover:gap-2 hover:text-primary-200 sm:justify-center lg:ml-auto"
                         href={"/people"}
                       >
                         {contributors.length > 8
-                          ? `${contributors.length - 8} contributors more`
+                          ? `${contributors.length - featuredContributors.length} contributors more`
                           : "Show all contributors"}
                         <MdOutlineArrowForwardIos />
                       </Link>

components/contributors/InfoCard.tsx

@@ -13,6 +13,7 @@ export default function InfoCard({
   contributor: Contributor;
   rank?: number | null;
   isClickable?: boolean;
+  isFirstTimeContributor?: boolean;
 }) {
   return (
     <div
@@ -59,9 +60,15 @@ export default function InfoCard({
                 #{rank}
               </span>
             </Link>
-            <p className="text-sm text-secondary-400 md:text-base">
-              {contributor.title}
-            </p>
+            {contributor.isNewContributor ? (
+              <p className="inline-block rounded-full text-sm text-primary-400 md:text-base">
+                New Contributor 🎉
+              </p>
+            ) : (
+              <p className="text-sm text-secondary-400 md:text-base">
+                {contributor.title}
+              </p>
+            )}
           </div>
 
           <ul role="list" className="mt-4 flex items-center space-x-4">

lib/api.ts

@@ -5,6 +5,7 @@ import { padZero } from "./utils";
 import { readFile, readdir } from "fs/promises";
 import { existsSync } from "fs";
 import { getGithubDiscussions } from "@/lib/discussion";
+import { compareAsc, isAfter, sub } from "date-fns";
 
 const root = join(process.cwd(), "data-repo/contributors");
 const slackRoot = join(process.cwd(), "data-repo/data/slack");
@@ -180,6 +181,20 @@ export async function getContributorBySlug(file: string, detail = false) {
 
   const calendarData = getCalendarData(weightedActivity.activity);
 
+  const isNewContributor = (() => {
+    const { activity } = activityData;
+
+    const aWeekAgo = sub(new Date(), { days: 7 });
+
+    const firstActivity = activity
+      .filter((act) => act.type === "pr_merged")
+      .sort((a, b) => compareAsc(a.time, b.time))[0];
+
+    if (!firstActivity) return false;
+
+    return isAfter(firstActivity.time, aWeekAgo);
+  })();
+
   const summarize = (start: Date, end: Date) => {
     return calendarData
       .filter((day) => {
@@ -194,6 +209,7 @@ export async function getContributorBySlug(file: string, detail = false) {
     slug: formatSlug(file),
     path: fullPath,
     content: content,
+    isNewContributor,
     activityData: {
       ...activityData,
       activity: weightedActivity.activity,

lib/types.ts

@@ -23,6 +23,7 @@ export interface Contributor {
   joining_date: string;
   role: "core" | "intern" | "operations" | "contributor";
   courses_completed: string[];
+  isNewContributor: boolean;
 }
 
 export interface ActivityData {

package.json

@@ -21,7 +21,7 @@
     "@t3-oss/env-nextjs": "^0.9.2",
     "@vercel/kv": "^1.0.1",
     "clsx": "^1.2.1",
-    "date-fns": "^2.30.0",
+    "date-fns": "^4.1.0",
     "gray-matter": "^4.0.3",
     "jotai": "^2.10.2",
     "next": "^14.2.15",