refactor, rename things a bit

src/components/CTASection.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import UserSearchDialog from "./UserSearchDialog";
+
+const CTASection: React.FC = () => {
+  return (
+    <div className="mt-24 mb-16 flex justify-center">
+      <div className="bg-gradient-to-br from-card to-card/95 rounded-2xl border border-border shadow-lg hover:shadow-xl transition-all duration-300 p-8 max-w-2xl w-full text-center space-y-6">
+        <div className="space-y-4">
+          <h2 className="text-2xl lg:text-3xl font-bold text-foreground">
+            Want Your Own Heatmap?
+          </h2>
+          <p className="text-muted-foreground text-lg">
+            Search for any Hugging Face organization or user to see their model release activity.
+          </p>
+        </div>
+        <div className="flex justify-center">
+          <UserSearchDialog />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CTASection;

src/components/HeatmapGrid.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { ProviderInfo, CalendarData } from "../types/heatmap";
+import OrganizationCard from "./OrganizationCard";
+import ProviderHeatmapSkeleton from "./ProviderHeatmapSkeleton";
+
+interface HeatmapGridProps {
+  sortedProviders: ProviderInfo[];
+  calendarData: CalendarData;
+  isLoading: boolean;
+}
+
+const HeatmapGrid: React.FC<HeatmapGridProps> = ({ sortedProviders, calendarData, isLoading }) => {
+  if (isLoading) {
+    return (
+      <div className="flex flex-col gap-8 max-w-4xl mx-auto mb-16">
+        {Array.from({ length: 3 }).map((_, idx) => (
+          <ProviderHeatmapSkeleton key={idx} />
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-8 max-w-4xl mx-auto mb-16">
+      {sortedProviders.map((provider, index) => (
+        <OrganizationCard 
+          key={provider.fullName || provider.authors[0]}
+          provider={provider} 
+          calendarData={calendarData}
+          rank={index + 1}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default HeatmapGrid;

src/components/OrganizationCard.tsx

@@ -1,207 +1,45 @@
 import React from "react";
-import { ProviderInfo } from "../types/heatmap";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
+import { ProviderInfo, CalendarData } from "../types/heatmap";
+import Heatmap from "./Heatmap";
+import OrganizationHeader from "./OrganizationHeader";
 
 interface OrganizationCardProps {
   provider: ProviderInfo;
-  calendarKey: string;
-  providerName: string;
-  totalCount: number;
+  calendarData: CalendarData;
+  rank: number;
 }
 
-const OrganizationCard: React.FC<OrganizationCardProps> = ({
-  provider,
-  calendarKey,
-  providerName,
-  totalCount,
-}) => {
+const OrganizationCard = React.memo(({ provider, calendarData, rank }: OrganizationCardProps) => {
+  const providerName = provider.fullName || provider.authors[0];
+  const calendarKey = provider.authors[0];
+  const totalCount = calendarData[calendarKey]?.reduce((sum, day) => sum + day.count, 0) || 0;
+  
   return (
-    <TooltipProvider>
-      <div className="mb-4">
-        {/* Organization Name & Stats Badge */}
-        <div className="text-center bg-muted/20 rounded-lg p-3 border border-border/30">
-          {/* Avatar and Name Row */}
-          <div className="flex items-center justify-center gap-2 mb-2">
-            {/* Multi-author avatars and names */}
-            {provider.authorsData && provider.authorsData.length > 1 ? (
-              <div className="flex items-center gap-2 flex-wrap justify-center">
-                {provider.authorsData.map((authorData, index) => (
-                  <React.Fragment key={authorData.author}>
-                    {index > 0 && (
-                      <span className="text-muted-foreground text-sm font-medium mx-1">+</span>
-                    )}
-                    <div className="flex items-center gap-1">
-                      <div className="relative">
-                        <img 
-                          src={authorData.avatarUrl || `https://huggingface.co/${authorData.author}/avatar.jpg`} 
-                          alt={`${authorData.fullName} logo`}
-                          className="w-8 h-8 rounded-md shadow-sm border border-border/50"
-                          onError={(e) => {
-                            const target = e.target as HTMLImageElement;
-                            target.src = `https://ui-avatars.com/api/?name=${encodeURIComponent(authorData.fullName)}&background=random`;
-                          }}
-                        />
-                        {authorData.isVerified && (
-                          <div className="absolute -bottom-0.5 -right-0.5 w-3 h-3 bg-blue-500 rounded-full flex items-center justify-center">
-                            <svg className="w-2 h-2 text-white" fill="currentColor" viewBox="0 0 20 20">
-                              <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
-                            </svg>
-                          </div>
-                        )}
-                      </div>
-                      <span className="text-base font-bold text-foreground">
-                        <a 
-                          href={`https://huggingface.co/${authorData.author}`}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          className="hover:text-blue-500 hover:underline transition-colors duration-200"
-                        >
-                          {authorData.author}
-                        </a>
-                      </span>
-                    </div>
-                  </React.Fragment>
-                ))}
-              </div>
-            ) : (
-              <div className="flex items-center gap-2">
-                {provider.avatarUrl && (
-                  <div className="relative">
-                    <img 
-                      src={provider.avatarUrl} 
-                      alt={`${providerName} logo`}
-                      className="w-8 h-8 rounded-md shadow-sm border border-border/50"
-                    />
-                    {provider.isVerified && (
-                      <div className="absolute -bottom-0.5 -right-0.5 w-3 h-3 bg-blue-500 rounded-full flex items-center justify-center">
-                        <svg className="w-2 h-2 text-white" fill="currentColor" viewBox="0 0 20 20">
-                          <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
-                        </svg>
-                      </div>
-                    )}
-                  </div>
-                )}
-                <h3 className="text-base font-bold text-foreground">
-                  <a 
-                    href={`https://huggingface.co/${calendarKey}`}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="hover:text-blue-500 hover:underline transition-colors duration-200"
-                  >
-                    {providerName}
-                  </a>
-                </h3>
-              </div>
-            )}
-          </div>
-          
-          {/* Compact Organization Stats */}
-          <div className="flex flex-wrap justify-center gap-2 text-xs mb-3">
-            {provider.authorsData && provider.authorsData.length > 1 ? (
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <div className="bg-background/60 rounded px-2 py-1 border border-border/40 cursor-pointer">
-                    <span className="font-semibold text-foreground">{(provider.numModels || 0).toLocaleString()}</span>
-                    <span className="text-muted-foreground ml-1">models</span>
-                  </div>
-                </TooltipTrigger>
-                <TooltipContent side="bottom">
-                  <div className="text-xs">
-                    {provider.authorsData.map(author => (
-                      <div key={`models-${author.author}`}>
-                        {author.author}: {author.numModels.toLocaleString()}
-                      </div>
-                    ))}
-                  </div>
-                </TooltipContent>
-              </Tooltip>
-            ) : (
-              <div className="bg-background/60 rounded px-2 py-1 border border-border/40">
-                <span className="font-semibold text-foreground">{(provider.numModels || 0).toLocaleString()}</span>
-                <span className="text-muted-foreground ml-1">models</span>
-              </div>
-            )}
-            
-            {provider.authorsData && provider.authorsData.length > 1 ? (
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <div className="bg-background/60 rounded px-2 py-1 border border-border/40 cursor-pointer">
-                    <span className="font-semibold text-foreground">{(provider.numDatasets || 0).toLocaleString()}</span>
-                    <span className="text-muted-foreground ml-1">datasets</span>
-                  </div>
-                </TooltipTrigger>
-                <TooltipContent side="bottom">
-                  <div className="text-xs">
-                    {provider.authorsData.map(author => (
-                      <div key={`datasets-${author.author}`}>
-                        {author.author}: {author.numDatasets.toLocaleString()}
-                      </div>
-                    ))}
-                  </div>
-                </TooltipContent>
-              </Tooltip>
-            ) : (
-              <div className="bg-background/60 rounded px-2 py-1 border border-border/40">
-                <span className="font-semibold text-foreground">{(provider.numDatasets || 0).toLocaleString()}</span>
-                <span className="text-muted-foreground ml-1">datasets</span>
-              </div>
-            )}
-            
-            {provider.authorsData && provider.authorsData.length > 1 ? (
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <div className="bg-background/60 rounded px-2 py-1 border border-border/40 cursor-pointer">
-                    <span className="font-semibold text-foreground">{(provider.numSpaces || 0).toLocaleString()}</span>
-                    <span className="text-muted-foreground ml-1">spaces</span>
-                  </div>
-                </TooltipTrigger>
-                <TooltipContent side="bottom">
-                  <div className="text-xs">
-                    {provider.authorsData.map(author => (
-                      <div key={`spaces-${author.author}`}>
-                        {author.author}: {author.numSpaces.toLocaleString()}
-                      </div>
-                    ))}
-                  </div>
-                </TooltipContent>
-              </Tooltip>
-            ) : (
-              <div className="bg-background/60 rounded px-2 py-1 border border-border/40">
-                <span className="font-semibold text-foreground">{(provider.numSpaces || 0).toLocaleString()}</span>
-                <span className="text-muted-foreground ml-1">spaces</span>
-              </div>
-            )}
-            
-            {provider.authorsData && provider.authorsData.length > 1 ? (
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <div className="bg-background/60 rounded px-2 py-1 border border-border/40 cursor-pointer">
-                    <span className="font-semibold text-foreground">{(provider.numFollowers || 0).toLocaleString()}</span>
-                    <span className="text-muted-foreground ml-1">followers</span>
-                  </div>
-                </TooltipTrigger>
-                <TooltipContent side="bottom">
-                  <div className="text-xs">
-                    {provider.authorsData.map(author => (
-                      <div key={`followers-${author.author}`}>
-                        {author.author}: {author.numFollowers.toLocaleString()}
-                      </div>
-                    ))}
-                  </div>
-                </TooltipContent>
-              </Tooltip>
-            ) : (
-              <div className="bg-background/60 rounded px-2 py-1 border border-border/40">
-                <span className="font-semibold text-foreground">{(provider.numFollowers || 0).toLocaleString()}</span>
-                <span className="text-muted-foreground ml-1">followers</span>
-              </div>
-            )}
-          </div>
-          
-        </div>
+    <div id={`provider-${calendarKey}`} className="relative bg-gradient-to-br from-card to-card/95 rounded-2xl border border-border shadow-lg hover:shadow-xl transition-all duration-300 p-6 group">
+      <OrganizationHeader
+        provider={provider}
+        calendarKey={calendarKey}
+        providerName={providerName}
+        totalCount={totalCount}
+      />
+      
+      <div className="flex flex-col items-center bg-muted/30 rounded-xl p-3 group-hover:bg-muted/40 transition-colors duration-300">
+        <Heatmap
+          data={calendarData[calendarKey]}
+          color={provider.color}
+          providerName={providerName}
+          fullName={provider.fullName ?? providerName}
+          avatarUrl={provider.avatarUrl ?? ''}
+          authorId={calendarKey}
+          showHeader={false}
+        />
       </div>
-    </TooltipProvider>
+
+      <div className="mt-3 text-xs text-muted-foreground italic text-center">
+        <span className="font-bold text-foreground">{totalCount}</span> new repos in the last year
+      </div>
+    </div>
   );
-};
+});
 
-export default OrganizationCard; 
+export default OrganizationCard;

src/components/OrganizationHeader.tsx

@@ -0,0 +1,207 @@
+import React from "react";
+import { ProviderInfo } from "../types/heatmap";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
+
+interface OrganizationHeaderProps {
+  provider: ProviderInfo;
+  calendarKey: string;
+  providerName: string;
+  totalCount: number;
+}
+
+const OrganizationHeader: React.FC<OrganizationHeaderProps> = ({
+  provider,
+  calendarKey,
+  providerName,
+  totalCount,
+}) => {
+  return (
+    <TooltipProvider>
+      <div className="mb-4">
+        {/* Organization Name & Stats Badge */}
+        <div className="text-center bg-muted/20 rounded-lg p-3 border border-border/30">
+          {/* Avatar and Name Row */}
+          <div className="flex items-center justify-center gap-2 mb-2">
+            {/* Multi-author avatars and names */}
+            {provider.authorsData && provider.authorsData.length > 1 ? (
+              <div className="flex items-center gap-2 flex-wrap justify-center">
+                {provider.authorsData.map((authorData, index) => (
+                  <React.Fragment key={authorData.author}>
+                    {index > 0 && (
+                      <span className="text-muted-foreground text-sm font-medium mx-1">+</span>
+                    )}
+                    <div className="flex items-center gap-1">
+                      <div className="relative">
+                        <img 
+                          src={authorData.avatarUrl || `https://huggingface.co/${authorData.author}/avatar.jpg`} 
+                          alt={`${authorData.fullName} logo`}
+                          className="w-8 h-8 rounded-md shadow-sm border border-border/50"
+                          onError={(e) => {
+                            const target = e.target as HTMLImageElement;
+                            target.src = `https://ui-avatars.com/api/?name=${encodeURIComponent(authorData.fullName)}&background=random`;
+                          }}
+                        />
+                        {authorData.isVerified && (
+                          <div className="absolute -bottom-0.5 -right-0.5 w-3 h-3 bg-blue-500 rounded-full flex items-center justify-center">
+                            <svg className="w-2 h-2 text-white" fill="currentColor" viewBox="0 0 20 20">
+                              <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                            </svg>
+                          </div>
+                        )}
+                      </div>
+                      <span className="text-base font-bold text-foreground">
+                        <a 
+                          href={`https://huggingface.co/${authorData.author}`}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="hover:text-blue-500 hover:underline transition-colors duration-200"
+                        >
+                          {authorData.author}
+                        </a>
+                      </span>
+                    </div>
+                  </React.Fragment>
+                ))}
+              </div>
+            ) : (
+              <div className="flex items-center gap-2">
+                {provider.avatarUrl && (
+                  <div className="relative">
+                    <img 
+                      src={provider.avatarUrl} 
+                      alt={`${providerName} logo`}
+                      className="w-8 h-8 rounded-md shadow-sm border border-border/50"
+                    />
+                    {provider.isVerified && (
+                      <div className="absolute -bottom-0.5 -right-0.5 w-3 h-3 bg-blue-500 rounded-full flex items-center justify-center">
+                        <svg className="w-2 h-2 text-white" fill="currentColor" viewBox="0 0 20 20">
+                          <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                        </svg>
+                      </div>
+                    )}
+                  </div>
+                )}
+                <h3 className="text-base font-bold text-foreground">
+                  <a 
+                    href={`https://huggingface.co/${calendarKey}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="hover:text-blue-500 hover:underline transition-colors duration-200"
+                  >
+                    {providerName}
+                  </a>
+                </h3>
+              </div>
+            )}
+          </div>
+          
+          {/* Compact Organization Stats */}
+          <div className="flex flex-wrap justify-center gap-2 text-xs mb-3">
+            {provider.authorsData && provider.authorsData.length > 1 ? (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <div className="bg-background/60 rounded px-2 py-1 border border-border/40 cursor-pointer">
+                    <span className="font-semibold text-foreground">{(provider.numModels || 0).toLocaleString()}</span>
+                    <span className="text-muted-foreground ml-1">models</span>
+                  </div>
+                </TooltipTrigger>
+                <TooltipContent side="bottom">
+                  <div className="text-xs">
+                    {provider.authorsData.map(author => (
+                      <div key={`models-${author.author}`}>
+                        {author.author}: {author.numModels.toLocaleString()}
+                      </div>
+                    ))}
+                  </div>
+                </TooltipContent>
+              </Tooltip>
+            ) : (
+              <div className="bg-background/60 rounded px-2 py-1 border border-border/40">
+                <span className="font-semibold text-foreground">{(provider.numModels || 0).toLocaleString()}</span>
+                <span className="text-muted-foreground ml-1">models</span>
+              </div>
+            )}
+            
+            {provider.authorsData && provider.authorsData.length > 1 ? (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <div className="bg-background/60 rounded px-2 py-1 border border-border/40 cursor-pointer">
+                    <span className="font-semibold text-foreground">{(provider.numDatasets || 0).toLocaleString()}</span>
+                    <span className="text-muted-foreground ml-1">datasets</span>
+                  </div>
+                </TooltipTrigger>
+                <TooltipContent side="bottom">
+                  <div className="text-xs">
+                    {provider.authorsData.map(author => (
+                      <div key={`datasets-${author.author}`}>
+                        {author.author}: {author.numDatasets.toLocaleString()}
+                      </div>
+                    ))}
+                  </div>
+                </TooltipContent>
+              </Tooltip>
+            ) : (
+              <div className="bg-background/60 rounded px-2 py-1 border border-border/40">
+                <span className="font-semibold text-foreground">{(provider.numDatasets || 0).toLocaleString()}</span>
+                <span className="text-muted-foreground ml-1">datasets</span>
+              </div>
+            )}
+            
+            {provider.authorsData && provider.authorsData.length > 1 ? (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <div className="bg-background/60 rounded px-2 py-1 border border-border/40 cursor-pointer">
+                    <span className="font-semibold text-foreground">{(provider.numSpaces || 0).toLocaleString()}</span>
+                    <span className="text-muted-foreground ml-1">spaces</span>
+                  </div>
+                </TooltipTrigger>
+                <TooltipContent side="bottom">
+                  <div className="text-xs">
+                    {provider.authorsData.map(author => (
+                      <div key={`spaces-${author.author}`}>
+                        {author.author}: {author.numSpaces.toLocaleString()}
+                      </div>
+                    ))}
+                  </div>
+                </TooltipContent>
+              </Tooltip>
+            ) : (
+              <div className="bg-background/60 rounded px-2 py-1 border border-border/40">
+                <span className="font-semibold text-foreground">{(provider.numSpaces || 0).toLocaleString()}</span>
+                <span className="text-muted-foreground ml-1">spaces</span>
+              </div>
+            )}
+            
+            {provider.authorsData && provider.authorsData.length > 1 ? (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <div className="bg-background/60 rounded px-2 py-1 border border-border/40 cursor-pointer">
+                    <span className="font-semibold text-foreground">{(provider.numFollowers || 0).toLocaleString()}</span>
+                    <span className="text-muted-foreground ml-1">followers</span>
+                  </div>
+                </TooltipTrigger>
+                <TooltipContent side="bottom">
+                  <div className="text-xs">
+                    {provider.authorsData.map(author => (
+                      <div key={`followers-${author.author}`}>
+                        {author.author}: {author.numFollowers.toLocaleString()}
+                      </div>
+                    ))}
+                  </div>
+                </TooltipContent>
+              </Tooltip>
+            ) : (
+              <div className="bg-background/60 rounded px-2 py-1 border border-border/40">
+                <span className="font-semibold text-foreground">{(provider.numFollowers || 0).toLocaleString()}</span>
+                <span className="text-muted-foreground ml-1">followers</span>
+              </div>
+            )}
+          </div>
+          
+        </div>
+      </div>
+    </TooltipProvider>
+  );
+};
+
+export default OrganizationHeader;

src/constants/organizations.ts

@@ -0,0 +1,19 @@
+import { ProviderInfo } from "../types/heatmap";
+
+export const ORGANIZATIONS: ProviderInfo[] = [
+  { color: "#ff7000", authors: ["mistralai"] },
+  { color: "#1877F2", authors: ["meta-llama","facebook", ] },
+  { color: "#10A37F", authors: ["openai"] },
+  { color: "#cc785c", authors: ["Anthropic"] },
+  { color: "#DB4437", authors: ["google"] },
+  { color: "#5E35B1", authors: ["allenai"] },
+  { color: "#0088cc", authors: ["apple"] },
+  { color: "#FEB800", authors: ["microsoft"] },
+  { color: "#76B900", authors: ["nvidia"] },
+  { color: "#0088cc", authors: ["deepseek-ai"] },
+  { color: "#0088cc", authors: ["Qwen"] },
+  { color: "#4C6EE6", authors: ["CohereLabs"] },
+  { color: "#4C6EE6", authors: ["ibm-granite"] },
+  { color: "#A020F0", authors: ["stabilityai"] },
+  { color: "#FEC912", authors: ["huggingface", "OpenEvals", "HuggingFaceTB","HuggingFaceH4", "HuggingFaceM4", "HuggingFaceFW", "HuggingFaceFV","open-r1","parler-tts","nanotron","lerobot","distilbert"] },
+];

src/pages/index.tsx

@@ -1,105 +1,20 @@
-import React, { useState, useEffect, useMemo } from "react";
-import { generateCalendarData } from "../utils/calendar";
-import {
-  OpenSourceHeatmapProps,
-  ProviderInfo,
-  ModelData,
-  CalendarData,
-} from "../types/heatmap";
-import Heatmap from "../components/Heatmap";
-import { fetchAllProvidersData, fetchAllAuthorsData } from "../utils/authors";
-import UserSearchDialog from "../components/UserSearchDialog";
+import React, { useState, useEffect } from "react";
+import { ProviderInfo, ModelData, CalendarData } from "../types/heatmap";
 import ProviderSummary from "../components/ProviderSummary";
-import OrganizationCard from "../components/OrganizationCard";
-import ProviderHeatmapSkeleton from "../components/ProviderHeatmapSkeleton";
+import HeatmapGrid from "../components/HeatmapGrid";
+import CTASection from "../components/CTASection";
+import { getProviders } from "../utils/ranking";
+import { ORGANIZATIONS } from "../constants/organizations";
 
-const PROVIDERS: ProviderInfo[] = [
-  { color: "#ff7000", authors: ["mistralai"] },
-  { color: "#1877F2", authors: ["meta-llama","facebook", ] },
-  { color: "#10A37F", authors: ["openai"] },
-  { color: "#cc785c", authors: ["Anthropic"] },
-  { color: "#DB4437", authors: ["google"] },
-  { color: "#5E35B1", authors: ["allenai"] },
-  { color: "#0088cc", authors: ["apple"] },
-  { color: "#FEB800", authors: ["microsoft"] },
-  { color: "#76B900", authors: ["nvidia"] },
-  { color: "#0088cc", authors: ["deepseek-ai"] },
-  { color: "#0088cc", authors: ["Qwen"] },
-  { color: "#4C6EE6", authors: ["CohereLabs"] },
-  { color: "#4C6EE6", authors: ["ibm-granite"] },
-  { color: "#A020F0", authors: ["stabilityai"] },
-  { color: "#FEC912", authors: ["huggingface", "OpenEvals", "HuggingFaceTB","HuggingFaceH4", "HuggingFaceM4", "HuggingFaceFW", "HuggingFaceFV","open-r1","parler-tts","nanotron","lerobot","distilbert"] },
-];
-
-export async function getStaticProps() {
-  try {
-    const allAuthors = PROVIDERS.flatMap(({ authors }) => authors);
-    const uniqueAuthors = Array.from(new Set(allAuthors));
-
-    const flatData: ModelData[] = await fetchAllAuthorsData(uniqueAuthors);
-    const updatedProviders = await fetchAllProvidersData(PROVIDERS);
-
-    const calendarData = generateCalendarData(flatData, updatedProviders);
-
-    return {
-      props: {
-        calendarData,
-        providers: updatedProviders,
-      },
-      revalidate: 3600, // regenerate every hour
-    };
-  } catch (error) {
-    console.error("Error fetching data:", error);
-    return {
-      props: {
-        calendarData: {},
-        providers: PROVIDERS,
-      },
-      revalidate: 60, // retry after 1 minute if there was an error
-    };
-  }
+interface PageProps {
+  calendarData: CalendarData;
+  providers: ProviderInfo[];
 }
 
-const ProviderHeatmap = React.memo(({ provider, calendarData }: { provider: ProviderInfo, calendarData: CalendarData }) => {
-  const providerName = provider.fullName || provider.authors[0];
-  const calendarKey = provider.authors[0]; // Use the same key as calendar generation
-  const totalCount = calendarData[calendarKey]?.reduce((sum, day) => sum + day.count, 0) || 0;
-  
-  return (
-    <div id={`provider-${calendarKey}`} className="relative bg-gradient-to-br from-card to-card/95 rounded-2xl border border-border shadow-lg hover:shadow-xl transition-all duration-300 p-6 group">
-      {/* Organization Header */}
-      <OrganizationCard
-        provider={provider}
-        calendarKey={calendarKey}
-        providerName={providerName}
-        totalCount={totalCount}
-      />
-      
-      {/* Heatmap Section */}
-      <div className="flex flex-col items-center bg-muted/30 rounded-xl p-3 group-hover:bg-muted/40 transition-colors duration-300">
-        <Heatmap
-          data={calendarData[calendarKey]}
-          color={provider.color}
-          providerName={providerName}
-          fullName={provider.fullName ?? providerName}
-          avatarUrl={provider.avatarUrl ?? ''}
-          authorId={calendarKey}
-          showHeader={false}
-        />
-      </div>
-
-      {/* Releases Past Year placed under the heatmap */}
-      <div className="mt-3 text-xs text-muted-foreground italic text-center">
-        <span className="font-bold text-foreground">{totalCount}</span> new repos in the last year
-      </div>
-    </div>
-  );
-});
-
-const OpenSourceHeatmap: React.FC<OpenSourceHeatmapProps> = ({
+function Page({
   calendarData,
   providers,
-}) => {
+}: PageProps) {
   const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
@@ -108,16 +23,6 @@ const OpenSourceHeatmap: React.FC<OpenSourceHeatmapProps> = ({
     }
   }, [calendarData]);
 
-  const sortedProviders = useMemo(() => 
-    providers.sort((a, b) => {
-      const aData = calendarData[a.authors[0]] || [];
-      const bData = calendarData[b.authors[0]] || [];
-      const aCount = aData.reduce((sum, day) => sum + day.count, 0);
-      const bCount = bData.reduce((sum, day) => sum + day.count, 0);
-      return bCount - aCount;
-    }),
-    [providers, calendarData]
-  );
 
   return (
     <div className="w-full p-4 py-16 relative">
@@ -130,11 +35,10 @@ const OpenSourceHeatmap: React.FC<OpenSourceHeatmapProps> = ({
         </p>
       </div>
 
-      {/* Provider Summary List */}
       <div className="mb-16 mx-auto">
         <div className="overflow-x-auto scrollbar-hide">
           <div className="flex gap-6 px-4 py-2 min-w-max justify-center">
-            {sortedProviders.map((provider, index) => (
+            {providers.map((provider, index) => (
               <ProviderSummary
                 key={provider.fullName || provider.authors[0]}
                 provider={provider}
@@ -146,59 +50,39 @@ const OpenSourceHeatmap: React.FC<OpenSourceHeatmapProps> = ({
         </div>
       </div>
            
-      {isLoading ? (
-        <div className="flex flex-col gap-8 max-w-4xl mx-auto mb-16">
-          {Array.from({ length: 3 }).map((_, idx) => (
-            <ProviderHeatmapSkeleton key={idx} />
-          ))}
-        </div>
-      ) : (
-        <>
-          <div className="mb-16">
-            <div className="flex flex-col gap-8 max-w-4xl mx-auto">
-              {sortedProviders.slice(0, 3).map((provider, index) => (
-                <ProviderHeatmap 
-                  key={provider.fullName || provider.authors[0]}
-                  provider={provider} 
-                  calendarData={calendarData}
-                />
-              ))}
-            </div>
-          </div>
-
-          {/* Rest of the providers */}
-          {sortedProviders.length > 3 && (
-              <div className="flex flex-col gap-8 max-w-4xl mx-auto">
-                {sortedProviders.slice(3).map((provider, index) => (
-                  <ProviderHeatmap 
-                    key={provider.fullName || provider.authors[0]}
-                    provider={provider} 
-                    calendarData={calendarData}
-                  />
-                ))}
-              </div>
-          )}
-        </>
-      )}
+      <HeatmapGrid 
+        sortedProviders={providers}
+        calendarData={calendarData}
+        isLoading={isLoading}
+      />
       
-      {/* CTA Section */}
-      <div className="mt-24 mb-16 flex justify-center">
-        <div className="bg-gradient-to-br from-card to-card/95 rounded-2xl border border-border shadow-lg hover:shadow-xl transition-all duration-300 p-8 max-w-2xl w-full text-center space-y-6">
-          <div className="space-y-4">
-            <h2 className="text-2xl lg:text-3xl font-bold text-foreground">
-              Want Your Own Heatmap?
-            </h2>
-            <p className="text-muted-foreground text-lg">
-              Search for any Hugging Face organization or user to see their model release activity.
-            </p>
-          </div>
-          <div className="flex justify-center">
-            <UserSearchDialog />
-          </div>
-        </div>
-      </div>
+      <CTASection />
     </div>
   );
-};
+}
+
+
+export async function getStaticProps() {
+  try {
+    const { calendarData, providers } = await getProviders(ORGANIZATIONS);
+
+    return {
+      props: {
+        calendarData,
+        providers,
+      },
+      revalidate: 3600, // regenerate every hour
+    };
+  } catch (error) {
+    console.error("Error fetching data:", error);
+    return {
+      props: {
+        calendarData: {},
+        providers: ORGANIZATIONS,
+      },
+      revalidate: 60, // retry after 1 minute if there was an error
+    };
+  }
+}
 
-export default OpenSourceHeatmap;
+export default Page;

src/utils/ranking.ts

@@ -1,3 +1,7 @@
+import { ProviderInfo, CalendarData, ModelData } from "../types/heatmap";
+import { generateCalendarData } from "./calendar";
+import { fetchAllProvidersData, fetchAllAuthorsData } from "./authors";
+
 export interface RankingBadge {
   className: string;
   icon: string | null;
@@ -25,4 +29,45 @@ export const getRankingBadge = (rank: number): RankingBadge => {
       icon: null
     };
   }
+};
+
+export const extractUniqueAuthors = (providers: ProviderInfo[]): string[] => {
+  const allAuthors = providers.flatMap(({ authors }) => authors);
+  return Array.from(new Set(allAuthors));
+};
+
+export const sortProvidersByActivity = (
+  providers: ProviderInfo[], 
+  calendarData: CalendarData
+): ProviderInfo[] => {
+  return providers.sort((providerA, providerB) => {
+    const providerAData = calendarData[providerA.authors[0]] || [];
+    const providerBData = calendarData[providerB.authors[0]] || [];
+    
+    const providerAActivityCount = providerAData.reduce(
+      (totalCount, day) => totalCount + day.count, 
+      0
+    );
+    const providerBActivityCount = providerBData.reduce(
+      (totalCount, day) => totalCount + day.count, 
+      0
+    );
+    
+    return providerBActivityCount - providerAActivityCount;
+  });
+};
+
+export const getProviders = async (providers: ProviderInfo[]) => {
+  const uniqueAuthors = extractUniqueAuthors(providers);
+  
+  const authorModelsData: ModelData[] = await fetchAllAuthorsData(uniqueAuthors);
+  const providersWithMetadata = await fetchAllProvidersData(providers);
+
+  const calendarData = generateCalendarData(authorModelsData, providersWithMetadata);
+  const sortedProvidersByActivity = sortProvidersByActivity(providersWithMetadata, calendarData);
+
+  return {
+    calendarData,
+    providers: sortedProvidersByActivity,
+  };
 };