diff --git a/documentation/src/pages/community/data/community-content.json b/documentation/src/pages/community/data/community-content.json new file mode 100644 index 000000000000..d1a61aaf10f4 --- /dev/null +++ b/documentation/src/pages/community/data/community-content.json @@ -0,0 +1,21 @@ +{ + "title": "🎃 Community Content Contributions", + "description": "Amazing blog posts, videos, and tutorials created by our community for goose!", + "lastUpdated": "2025-10-02", + "hacktoberfestYear": 2025, + "submissionUrl": "https://github.com/block/goose/issues/new?template=hacktoberfest-content-submission.yml", + "submissions": [ + { + "title": "Configuring goose for Team Environments and Shared Workflows", + "author": { + "name": "Community Contributor", + "handle": "teamgoose" + }, + "type": "blog", + "url": "https://teamgoose.dev/goose-team-setup", + "thumbnail": "https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=400&h=225&fit=crop&crop=entropy&auto=format", + "submittedDate": "2025-10-20", + "tags": ["team-setup", "configuration", "collaboration"] + } + ] +} diff --git a/documentation/src/pages/community/index.tsx b/documentation/src/pages/community/index.tsx index 8dbe1d5c1f5e..e265332d41fd 100644 --- a/documentation/src/pages/community/index.tsx +++ b/documentation/src/pages/community/index.tsx @@ -11,6 +11,7 @@ import may2025Data from "./data/may-2025.json"; import june2025Data from "./data/june-2025.json"; import july2025Data from "./data/july-2025.json"; import august2025Data from "./data/august-2025.json"; +import communityContentData from "./data/community-content.json"; // Create a data map for easy access const communityDataMap = { @@ -211,6 +212,174 @@ function CommunityAllStarsSection() { ); } +function CommunityContentSpotlightSection() { + const [contentFilter, setContentFilter] = React.useState('all'); + + const filteredSubmissions = React.useMemo(() => { + if (contentFilter === 'all') return communityContentData.submissions; + if (contentFilter === 'hacktoberfest') { + return communityContentData.submissions.filter(content => + content.hacktoberfest || content.tags?.includes('hacktoberfest') + ); + } + return communityContentData.submissions.filter(content => content.type === contentFilter); + }, [contentFilter]); + + return ( +
+
+ {communityContentData.title} +

{communityContentData.description}

+
+ + {/* Filter Tabs */} +
+ {[ + { id: 'all', label: 'All Content' }, + { id: 'hacktoberfest', label: '🎃 Hacktoberfest 2025' }, + { id: 'blog', label: '📝 Blog Posts' }, + { id: 'video', label: '🎥 Videos' } + ].map((filter) => ( + + ))} +
+ + {/* Content Grid */} +
+
+ {/* Persistent Hacktoberfest CTA Card */} + + + {filteredSubmissions.map((content, index) => ( + + ))} +
+ + {filteredSubmissions.length === 0 && ( +
+

No content found for this filter.

+
+ )} +
+
+ ); +} + +function HacktoberfestCTACard(): ReactNode { + return ( +
+ {/* Thumbnail placeholder */} +
+
+ 🎃 +
+
+ 🎃 Hacktoberfest +
+
+ + {/* Content */} +
+ {/* CTA Button as Title */} +
+ + 🚀 Submit Your Content! + +
+ + {/* Description */} +
+

Share your goose blog posts or videos with the community.

+
+ +

+ Must be hosted on your own website +

+
+
+ ); +} + +function ContentCard({ content }): ReactNode { + const getTypeIcon = (type: string) => { + switch (type) { + case 'blog': return '📝'; + case 'video': return '🎥'; + case 'tutorial': return '📚'; + case 'case-study': return '📊'; + default: return '📄'; + } + }; + + const formatDate = (dateString: string) => { + return new Date(dateString).toLocaleDateString('en-US', { + month: 'short', + day: 'numeric' + }); + }; + + return ( +
+ {/* Thumbnail */} +
+ {content.title} +
+ + {/* Content */} +
+
+ {getTypeIcon(content.type)} +

+ + {content.title} + +

+
+ + {/* Author and Date */} +
+
+ {content.author.name} + + @{content.author.handle} + +
+ 📅 {formatDate(content.submittedDate)} +
+ + +
+ + +
+ ); +} + export function StarsCard({contributor}): ReactNode { return (
@@ -260,11 +429,12 @@ export default function Community(): ReactNode { return (
+
);