use static regeneration

src/pages/index.tsx

@@ -35,95 +35,114 @@ interface Activity {
   level: number;
 }
 
-export default function OpenSourceHeatmap() {
-  const [calendarData, setCalendarData] = useState<Record<string, Activity[]>>({});
-  const [isLoading, setIsLoading] = useState(true);
+interface CalendarData {
+  [key: string]: Activity[];
+}
 
-  const generateCalendarData = (modelData: ModelData[]) => {
-    const data: Record<string, Activity[]> = Object.fromEntries(
-      Object.keys(PROVIDERS_MAP).map(provider => [provider, []])
-    );
+const generateCalendarData = (modelData: ModelData[]): CalendarData => {
+  const data: Record<string, Activity[]> = Object.fromEntries(
+    Object.keys(PROVIDERS_MAP).map(provider => [provider, []])
+  );
 
-    const today = new Date();
-    const startDate = new Date(today);
-    startDate.setMonth(today.getMonth() - 11);
-    startDate.setDate(1);
-
-    // create a map to store counts for each provider and date
-    const countMap: Record<string, Record<string, number>> = {};
-
-    modelData.forEach(item => {
-      const dateString = item.createdAt.split('T')[0];
-      Object.entries(PROVIDERS_MAP).forEach(([provider, { authors }]) => {
-        if (authors.some(author => item.id.startsWith(author))) {
-          countMap[provider] = countMap[provider] || {};
-          countMap[provider][dateString] = (countMap[provider][dateString] || 0) + 1;
-        }
-      });
+  const today = new Date();
+  const startDate = new Date(today);
+  startDate.setMonth(today.getMonth() - 11);
+  startDate.setDate(1);
+
+  // create a map to store counts for each provider and date
+  const countMap: Record<string, Record<string, number>> = {};
+
+  modelData.forEach(item => {
+    const dateString = item.createdAt.split('T')[0];
+    Object.entries(PROVIDERS_MAP).forEach(([provider, { authors }]) => {
+      if (authors.some(author => item.id.startsWith(author))) {
+        countMap[provider] = countMap[provider] || {};
+        countMap[provider][dateString] = (countMap[provider][dateString] || 0) + 1;
+      }
     });
+  });
+
+  // fill in with 0s for days with no activity
+  for (let d = new Date(startDate); d <= today; d.setDate(d.getDate() + 1)) {
+    const dateString = d.toISOString().split('T')[0];
+    
+    Object.entries(PROVIDERS_MAP).forEach(([provider]) => {
+      const count = countMap[provider]?.[dateString] || 0;
+      data[provider].push({ date: dateString, count, level: 0 });
+    });
+  }
 
-    // fill in with 0s for days with no activity
-    for (let d = new Date(startDate); d <= today; d.setDate(d.getDate() + 1)) {
-      const dateString = d.toISOString().split('T')[0];
-      
-      Object.entries(PROVIDERS_MAP).forEach(([provider]) => {
-        const count = countMap[provider]?.[dateString] || 0;
-        data[provider].push({ date: dateString, count, level: 0 });
-      });
-    }
-
-    // calculate average counts for each provider
-    const avgCounts = Object.fromEntries(
-      Object.entries(data).map(([provider, days]) => [
-        provider,
-        days.reduce((sum, day) => sum + day.count, 0) / days.length || 0
-      ])
-    );
+  // calculate average counts for each provider
+  const avgCounts = Object.fromEntries(
+    Object.entries(data).map(([provider, days]) => [
+      provider,
+      days.reduce((sum, day) => sum + day.count, 0) / days.length || 0
+    ])
+  );
 
-    // assign levels based on count relative to average
-    Object.entries(data).forEach(([provider, days]) => {
-      const avgCount = avgCounts[provider];
-      days.forEach(day => {
-        day.level = 
-          day.count === 0 ? 0 :
-          day.count <= avgCount * 0.5 ? 1 :
-          day.count <= avgCount ? 2 :
-          day.count <= avgCount * 1.5 ? 3 : 4;
-      });
+  // assign levels based on count relative to average
+  Object.entries(data).forEach(([provider, days]) => {
+    const avgCount = avgCounts[provider];
+    days.forEach(day => {
+      day.level = 
+        day.count === 0 ? 0 :
+        day.count <= avgCount * 0.5 ? 1 :
+        day.count <= avgCount ? 2 :
+        day.count <= avgCount * 1.5 ? 3 : 4;
     });
+  });
 
-    return data;
-  }
+  return data;
+}
 
-  const initData = async () => {
-    try {
-      const allAuthors = Object.values(PROVIDERS_MAP).flatMap(({ authors }) => authors);
-      const uniqueAuthors = Array.from(new Set(allAuthors));
-
-      const allModelData = await Promise.all(
-        uniqueAuthors.map(async (author) => {
-          const response = await fetch(`https://huggingface.co/api/models?author=${author}&sort=createdAt&direction=-1`);
-          const data = await response.json();
-          return data.map((item: any) => ({
-            createdAt: item.createdAt,
-            id: item.id,
-          }));
-        })
-      );
-
-      const flatModelData = allModelData.flat();
-      const calendarData = generateCalendarData(flatModelData);
-      setCalendarData(calendarData);
-    } catch (error) {
-      console.error("Error fetching data:", error);
-    } finally {
-      setIsLoading(false);
-    }
+export async function getStaticProps() {
+  try {
+    const allAuthors = Object.values(PROVIDERS_MAP).flatMap(({ authors }) => authors);
+    const uniqueAuthors = Array.from(new Set(allAuthors));
+
+    const allModelData = await Promise.all(
+      uniqueAuthors.map(async (author) => {
+        const response = await fetch(`https://huggingface.co/api/models?author=${author}&sort=createdAt&direction=-1`);
+        const data = await response.json();
+        return data.map((item: any) => ({
+          createdAt: item.createdAt,
+          id: item.id,
+        }));
+      })
+    );
+
+    const flatModelData = allModelData.flat();
+    const calendarData = generateCalendarData(flatModelData);
+
+    return {
+      props: {
+        calendarData,
+      },
+      revalidate: 3600, // regenerate every hour
+    };
+  } catch (error) {
+    console.error("Error fetching data:", error);
+    return {
+      props: {
+        calendarData: {},
+      },
+      revalidate: 60, // retry after 1 minute if there was an error
+    };
   }
+}
+
+interface OpenSourceHeatmapProps {
+  calendarData: CalendarData;
+}
+
+const OpenSourceHeatmap: React.FC<OpenSourceHeatmapProps> = ({ calendarData }) => {
+  const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
-    initData();
-  }, []);
+    if (calendarData && Object.keys(calendarData).length > 0) {
+      setIsLoading(false);
+    }
+  }, [calendarData]);
 
   return (
     <div className="w-full max-w-screen-lg mx-auto p-4">
@@ -178,4 +197,6 @@ export default function OpenSourceHeatmap() {
       )}
     </div>
   );
-}
+}
+
+export default OpenSourceHeatmap;