add path param for user page

next.config.mjs

@@ -1,6 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  output: 'standalone',
+  output: "standalone",
   reactStrictMode: true,
 };
 

src/pages/[author]/index.tsx

@@ -0,0 +1,109 @@
+import React, { useState, useEffect } from "react";
+import ActivityCalendar from "react-activity-calendar";
+import { Tooltip } from "@mui/material";
+import { GetServerSidePropsContext } from "next";
+import {  OpenSourceHeatmapProps } from "../../types/heatmap";
+import { generateCalendarData } from "../../utils/calendar";
+
+const DEFAULT_COLOR = "#DB4437";
+
+const OpenSourceHeatmap: React.FC<OpenSourceHeatmapProps> = ({
+  calendarData,
+  providers,
+}) => {
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    if (calendarData && Object.keys(calendarData).length > 0) {
+      setIsLoading(false);
+    }
+  }, [calendarData]);
+
+  return (
+    <div className="w-full max-w-screen-lg mx-auto p-4">
+
+      {isLoading ? (
+        <p className="text-center">Loading...</p>
+      ) : (
+        <div className="space-y-8">
+          {Object.entries(providers)
+            .sort(
+              ([keyA], [keyB]) =>
+                calendarData[keyB].reduce((sum, day) => sum + day.count, 0) -
+                calendarData[keyA].reduce((sum, day) => sum + day.count, 0),
+            )
+            .map(([providerName, { color }]) => (
+              <div key={providerName} className="flex flex-col items-center">
+                <h2 className="text-xl font-bold mb-4">{providerName}</h2>
+                <div className="w-full overflow-x-auto flex justify-center">
+                  <ActivityCalendar
+                    data={calendarData[providerName]}
+                    theme={{
+                      dark: ["#161b22", color],
+                      light: ["#e0e0e0", color],
+                    }}
+                    hideTotalCount
+                    renderBlock={(block, activity) => (
+                      <Tooltip
+                        title={`${activity.count} models created on ${activity.date}`}
+                        arrow
+                      >
+                        {block}
+                      </Tooltip>
+                    )}
+                  />
+                </div>
+              </div>
+            ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export async function getServerSideProps(context: GetServerSidePropsContext) {
+  const { author, color } = context.query;
+
+  const authorColor = color || DEFAULT_COLOR;
+
+  const providers = {
+    [author as string]: {
+      color: authorColor as string,
+      authors: [author as string],
+    },
+  };
+
+  try {
+    const response = await fetch(
+      `https://huggingface.co/api/models?author=${author}&sort=createdAt&direction=-1`
+    );
+    const data = await response.json();
+    
+    const modelData = data.map((item: any) => ({
+      createdAt: item.createdAt,
+      id: item.id,
+    }));
+
+    const calendarData = generateCalendarData(modelData, providers);
+
+    return {
+      props: {
+        calendarData,
+        color: authorColor,
+        providers,
+      },
+    };
+  } catch (error) {
+    console.error("Error fetching data:", error);
+    return {
+      props: {
+        calendarData: {},
+        color: authorColor,
+        providers,
+      },
+    };
+  }
+}
+
+
+export default OpenSourceHeatmap;

src/pages/_document.tsx

@@ -10,4 +10,4 @@ export default function Document() {
       </body>
     </Html>
   );
-}
+}

src/pages/index.tsx

@@ -1,11 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import ActivityCalendar from "react-activity-calendar";
 import { Tooltip } from '@mui/material';
-
-interface ProviderInfo {
-  color: string;
-  authors: string[];
-}
+import { generateCalendarData } from "../utils/calendar";
+import { OpenSourceHeatmapProps, ProviderInfo, ModelData, CalendarData } from "../types/heatmap";
 
 const PROVIDERS_MAP: Record<string, ProviderInfo> = {
   "Mistral AI": { color: "#ff7000", authors: ["mistralai"] },
@@ -24,77 +21,6 @@ const PROVIDERS_MAP: Record<string, ProviderInfo> = {
   "Stability AI": { color: "#A020F0", authors: ["stabilityai"] },
 };
 
-interface ModelData {
-  createdAt: string;
-  id: string;
-}
-
-interface Activity {
-  date: string;
-  count: number;
-  level: number;
-}
-
-interface CalendarData {
-  [key: string]: Activity[];
-}
-
-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;
-      }
-    });
-  });
-
-  // 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
-    ])
-  );
-
-  // 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;
-}
-
 export async function getStaticProps() {
   try {
     const allAuthors = Object.values(PROVIDERS_MAP).flatMap(({ authors }) => authors);
@@ -111,12 +37,13 @@ export async function getStaticProps() {
       })
     );
 
-    const flatModelData = allModelData.flat();
-    const calendarData = generateCalendarData(flatModelData);
+    const flatModelData: ModelData[] = allModelData.flat();
+    const calendarData = generateCalendarData(flatModelData, PROVIDERS_MAP);
 
     return {
       props: {
         calendarData,
+        providers: PROVIDERS_MAP,
       },
       revalidate: 3600, // regenerate every hour
     };
@@ -125,17 +52,14 @@ export async function getStaticProps() {
     return {
       props: {
         calendarData: {},
+        providers: PROVIDERS_MAP,
       },
       revalidate: 60, // retry after 1 minute if there was an error
     };
   }
 }
 
-interface OpenSourceHeatmapProps {
-  calendarData: CalendarData;
-}
-
-const OpenSourceHeatmap: React.FC<OpenSourceHeatmapProps> = ({ calendarData }) => {
+const OpenSourceHeatmap: React.FC<OpenSourceHeatmapProps> = ({ calendarData, providers }) => {
   const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
@@ -164,7 +88,7 @@ const OpenSourceHeatmap: React.FC<OpenSourceHeatmapProps> = ({ calendarData }) =
         <p className="text-center">Loading...</p>
       ) : (
         <div className="space-y-8">
-          {Object.entries(PROVIDERS_MAP)
+          {Object.entries(providers)
             .sort(([keyA], [keyB]) => 
               calendarData[keyB].reduce((sum, day) => sum + day.count, 0) -
               calendarData[keyA].reduce((sum, day) => sum + day.count, 0)

src/types/heatmap.ts

@@ -0,0 +1,26 @@
+export interface ProviderInfo {
+  color: string;
+  authors: string[];
+}
+
+export interface ModelData {
+  createdAt: string;
+  id: string;
+}
+
+export interface Activity {
+  date: string;
+  count: number;
+  level: number;
+}
+
+export interface CalendarData {
+  [key: string]: Activity[];
+}
+
+export interface OpenSourceHeatmapProps {
+  calendarData: CalendarData;
+  author: string;
+  color: string;
+  providers: Record<string, ProviderInfo>;
+}

src/utils/calendar.ts

@@ -0,0 +1,66 @@
+import { ModelData, ProviderInfo, CalendarData, Activity } from "../types/heatmap";
+
+export const generateCalendarData = (
+    modelData: ModelData[],
+    providers: Record<string, ProviderInfo>,
+  ): CalendarData => {
+    const data: Record<string, Activity[]> = Object.fromEntries(
+      Object.keys(providers).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).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).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,
+      ]),
+    );
+  
+    // 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;
+  };

tailwind.config.ts

@@ -17,4 +17,4 @@ const config: Config = {
   },
   plugins: [],
 };
-export default config;
+export default config;