Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion documentation/src/pages/community/data/config.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,12 @@
"id": "september-2025",
"display": "September 2025",
"file": "september-2025.json"
},
{
"id": "october-2025",
"display": "October 2025",
"file": "october-2025.json"
}
],
"defaultMonth": "september-2025"
"defaultMonth": "october-2025"
}
46 changes: 46 additions & 0 deletions documentation/src/pages/community/data/october-2025.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
{
"month": "October 2025",
"communityStars": [
{
"name": "Arya Pratap Singh",
"handle": "ARYPROGRAMMER"
},
{
"name": "Halimah",
"handle": "Lymah123"
},
{
"name": "Dakshata Mishra",
"handle": "the-matrixneo"
},
{
"name": "Abhi",
"handle": "Better-Boy"
},
{
"name": "Anudhyan Datta",
"handle": "Anudhyan"
}
],
"teamStars": [],
"leaderboard": [
{ "handle": "ARYPROGRAMMER", "rank": 1, "medal": "🥇" },
{ "handle": "Lymah123", "rank": 2, "medal": "🥈" },
{ "handle": "the-matrixneo", "rank": 3, "medal": "🥉" },
{ "handle": "Better-Boy", "rank": 4 },
{ "handle": "Anudhyan", "rank": 5 },
{ "handle": "Shreyanshsingh23", "rank": 6 },
{ "handle": "The-Best-Codes", "rank": 7 },
{ "handle": "anthonydmays", "rank": 8 },
{ "handle": "Mohammed-Thaha", "rank": 9 },
{ "handle": "shiv669", "rank": 10 },
{ "handle": "aegntic", "rank": 11 },
{ "handle": "M-A-SAIADITHYAA", "rank": 12 },
{ "handle": "ki3ani", "rank": 13 },
{ "handle": "vietbui1999ru", "rank": 14 },
{ "handle": "Itz-Agasta", "rank": 15 },
{ "handle": "Shahzebdevv", "rank": 16 },
{ "handle": "Roshansingh9", "rank": 17 },
{ "handle": "AdemolaAri", "rank": 18 }
]
}
75 changes: 51 additions & 24 deletions documentation/src/pages/community/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import june2025Data from "./data/june-2025.json";
import july2025Data from "./data/july-2025.json";
import august2025Data from "./data/august-2025.json";
import september2025Data from "./data/september-2025.json";
import october2025Data from "./data/october-2025.json";
import communityContentData from "./data/community-content.json";

// Create a data map for easy access
Expand All @@ -22,6 +23,7 @@ const communityDataMap = {
"july-2025": july2025Data,
"august-2025": august2025Data,
"september-2025": september2025Data,
"october-2025": october2025Data,
};

function UpcomingEventsSection() {
Expand Down Expand Up @@ -98,19 +100,23 @@ function CommunityAllStarsSection() {
))}
</div>

{/* Team Stars */}
<div className="text-center">
<Heading as="h3">⭐ Team Stars</Heading>
<p className="text-sm text-textStandard">
Top 5 Contributors from all Block teams!
</p>
</div>

<div className="flex justify-center">
{currentData.teamStars.map((contributor, index) => (
<StarsCard key={index} contributor={{...contributor, totalCount: currentData.teamStars.length}} />
))}
</div>
{/* Team Stars - only show if there are team stars */}
{currentData.teamStars.length > 0 && (
<>
<div className="text-center">
<Heading as="h3">⭐ Team Stars</Heading>
<p className="text-sm text-textStandard">
Top 5 Contributors from all Block teams!
</p>
</div>

<div className="flex justify-center">
{currentData.teamStars.map((contributor, index) => (
<StarsCard key={index} contributor={{...contributor, totalCount: currentData.teamStars.length}} />
))}
</div>
</>
)}

{/* Monthly Leaderboard */}
<div className="text-center">
Expand Down Expand Up @@ -216,6 +222,7 @@ function CommunityAllStarsSection() {

function CommunityContentSpotlightSection() {
const [contentFilter, setContentFilter] = React.useState('all');
const [showScrollIndicator, setShowScrollIndicator] = React.useState(true);

const filteredSubmissions = React.useMemo(() => {
if (contentFilter === 'all') return communityContentData.submissions;
Expand All @@ -227,6 +234,12 @@ function CommunityContentSpotlightSection() {
return communityContentData.submissions.filter(content => content.type === contentFilter);
}, [contentFilter]);

const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
const { scrollTop, scrollHeight, clientHeight } = (e.target as HTMLDivElement);
const isAtBottom = scrollTop + clientHeight >= scrollHeight - 10; // 10px threshold
setShowScrollIndicator(!isAtBottom);
};

return (
<section className="w-full flex flex-col items-center gap-8 my-8">
<div className="text-center">
Expand Down Expand Up @@ -258,19 +271,33 @@ function CommunityContentSpotlightSection() {
</div>

{/* Content Grid */}
<div className="w-full max-w-6xl">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{/* Persistent Hacktoberfest CTA Card */}
<HacktoberfestCTACard />
<div className="w-full max-w-6xl relative">
<div
className="max-h-[800px] overflow-y-auto pr-2"
onScroll={handleScroll}
>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{/* Persistent Hacktoberfest CTA Card */}
<HacktoberfestCTACard />

{filteredSubmissions.map((content) => (
<ContentCard key={content.url} content={content} />
))}
</div>

{filteredSubmissions.map((content, index) => (
<ContentCard key={index} content={content} />
))}
{filteredSubmissions.length === 0 && (
<div className="text-center py-8">
<p className="text-textSubtle">No content found for this filter.</p>
</div>
)}
</div>

{filteredSubmissions.length === 0 && (
<div className="text-center py-8">
<p className="text-textSubtle">No content found for this filter.</p>
{/* Simple scroll indicator - only show when not at bottom */}
{showScrollIndicator && (
<div className="absolute bottom-5 inset-x-0 flex justify-center">
<span className="w-fit text-xs bg-bgProminent p-2 rounded-full font-medium pointer-events-none flex items-center gap-1.5">
Scroll for more ↓
</span>
</div>
)}
</div>
Expand Down Expand Up @@ -434,8 +461,8 @@ export default function Community(): ReactNode {
description="Join the goose community - connect with developers, contribute to the project, and help shape the future of AI-powered development tools."
>
<main className="container">
<CommunityContentSpotlightSection />
<CommunityAllStarsSection />
<CommunityContentSpotlightSection />
<UpcomingEventsSection />
</main>
</Layout>
Expand Down