- {filteredDiscussions.map((discussion) => (
-
+
+ {filteredDiscussions.length} discussion
+ {filteredDiscussions.length !== 1 ? "s" : ""} found
+
+
+
+ {discussionsLoading ? (
+
+
+
Loading discussions...
+
+ ) : discussionsError ? (
+
+
⚠️
+
Unable to load discussions
+
{discussionsError}
+
+
+ ) : (
+ <>
+
+ {filteredDiscussions.length > 0 ? (
+ filteredDiscussions.map((discussion, index) => (
+
+ ))
+ ) : (
+
+
💬
+
No discussions found
+
+ {searchQuery || selectedCategory !== "all"
+ ? "Try adjusting your filters or search terms."
+ : "Be the first to start a discussion!"}
+
+
+ Start a Discussion
+
+
+ )}
+
+
+ {/* Interactive Community Engagement Section */}
+
-
-
+ {/* Animated Background Elements */}
+
+ {[...Array(6)].map((_, i) => (
+
+ ))}
-
-
-
{discussion.title}
- {discussion.isPinned && (
- 📌 Pinned
- )}
-
-
-
-
- {discussion.tags.map((tag) => (
-
- {tag}
-
- ))}
-
-
-
- by {discussion.author.name}
-
-
- {new Date(
- discussion.createdAt
- ).toLocaleDateString()}
-
- 👍 {discussion.likes}
- 💬 {discussion.comments}
-
-
+
+
+ Ready to Join the Conversation?
+
+
+
+ Share your thoughts, ask questions, or help others in our community.
+
+
+
+ {[
+ { emoji: "❓", text: "Ask a Question", url: "https://github.com/recodehive/recode-website/discussions/new?category=q-a", gradient: "linear-gradient(135deg, #ff6b6b, #ff8e8e)", shadow: "#ff6b6b" },
+ { emoji: "💡", text: "Share an Idea", url: "https://github.com/recodehive/recode-website/discussions/new?category=ideas", gradient: "linear-gradient(135deg, #4ecdc4, #44a08d)", shadow: "#4ecdc4" },
+ { emoji: "🎉", text: "Show Your Work", url: "https://github.com/recodehive/recode-website/discussions/new?category=show-and-tell", gradient: "linear-gradient(135deg, #45b7d1, #96c93d)", shadow: "#45b7d1" }
+ ].map((item, index) => (
+
+
+ {/* Animated gradient overlay */}
+
+
+ {/* Floating particles */}
+
+ {[...Array(3)].map((_, i) => (
+
+ ))}
+
+
+ {/* Animated emoji */}
+
+ {item.emoji}
+
+
+ {/* Text with glow effect */}
+
+ {item.text}
+
+
+ {/* Shimmer effect */}
+
+
+
+ ))}
-
- ))}
-
+
+ )}
) : (
// Giveaway tab content
diff --git a/src/services/githubService.ts b/src/services/githubService.ts
index a7d50d10..733dd015 100644
--- a/src/services/githubService.ts
+++ b/src/services/githubService.ts
@@ -30,6 +30,32 @@ export interface GitHubOrganization {
following: number;
}
+export interface GitHubDiscussion {
+ id: string;
+ title: string;
+ body: string;
+ author: {
+ login: string;
+ avatar_url: string;
+ html_url: string;
+ };
+ category: {
+ name: string;
+ emoji: string;
+ };
+ created_at: string;
+ updated_at: string;
+ comments: number;
+ reactions: {
+ total_count: number;
+ };
+ html_url: string;
+ labels: Array<{
+ name: string;
+ color: string;
+ }>;
+}
+
class GitHubService {
private readonly ORG_NAME = 'recodehive';
private readonly CACHE_KEY = 'github_org_stats';
@@ -322,6 +348,190 @@ class GitHubService {
return { cached: true, age, expiresIn };
}
+
+ // Fetch GitHub Discussions using GraphQL API
+ async fetchDiscussions(limit: number = 20, signal?: AbortSignal): Promise
{
+ const query = `
+ query GetDiscussions($owner: String!, $name: String!, $first: Int!) {
+ repository(owner: $owner, name: $name) {
+ discussions(first: $first, orderBy: {field: UPDATED_AT, direction: DESC}) {
+ nodes {
+ id
+ title
+ body
+ createdAt
+ updatedAt
+ url
+ author {
+ login
+ avatarUrl
+ url
+ }
+ category {
+ name
+ emoji
+ }
+ comments {
+ totalCount
+ }
+ reactions {
+ totalCount
+ }
+ labels(first: 10) {
+ nodes {
+ name
+ color
+ }
+ }
+ }
+ }
+ }
+ }
+ `;
+
+ const variables = {
+ owner: this.ORG_NAME,
+ name: 'recode-website', // Main repository for discussions
+ first: limit
+ };
+
+ try {
+ const response = await fetch('https://api.github.com/graphql', {
+ method: 'POST',
+ headers: {
+ ...this.getHeaders(),
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({ query, variables }),
+ signal,
+ });
+
+ if (!response.ok) {
+ throw new Error(`GraphQL request failed: ${response.status}`);
+ }
+
+ const data = await response.json();
+
+ if (data.errors) {
+ console.error('GraphQL errors:', data.errors);
+ throw new Error('GraphQL query failed');
+ }
+
+ const discussions = data.data?.repository?.discussions?.nodes || [];
+
+ return discussions.map((discussion: any): GitHubDiscussion => ({
+ id: discussion.id,
+ title: discussion.title,
+ body: discussion.body || '',
+ author: {
+ login: discussion.author?.login || 'Unknown',
+ avatar_url: discussion.author?.avatarUrl || '',
+ html_url: discussion.author?.url || '',
+ },
+ category: {
+ name: discussion.category?.name || 'General',
+ emoji: discussion.category?.emoji || '💬',
+ },
+ created_at: discussion.createdAt,
+ updated_at: discussion.updatedAt,
+ comments: discussion.comments?.totalCount || 0,
+ reactions: {
+ total_count: discussion.reactions?.totalCount || 0,
+ },
+ html_url: discussion.url,
+ labels: discussion.labels?.nodes?.map((label: any) => ({
+ name: label.name,
+ color: label.color,
+ })) || [],
+ }));
+ } catch (error) {
+ console.error('Error fetching discussions:', error);
+
+ // Return mock data for development/fallback
+ return this.getMockDiscussions();
+ }
+ }
+
+ // Mock discussions for development/fallback
+ private getMockDiscussions(): GitHubDiscussion[] {
+ return [
+ {
+ id: '1',
+ title: 'Welcome to RecodeHive Discussions!',
+ body: 'This is where we discuss ideas, share knowledge, and help each other grow. Feel free to ask questions, share your projects, or just say hello!',
+ author: {
+ login: 'recodehive',
+ avatar_url: 'https://avatars.githubusercontent.com/u/your-org-id?v=4',
+ html_url: 'https://github.com/recodehive',
+ },
+ category: {
+ name: 'Announcements',
+ emoji: '📢',
+ },
+ created_at: new Date(Date.now() - 86400000).toISOString(),
+ updated_at: new Date(Date.now() - 3600000).toISOString(),
+ comments: 12,
+ reactions: {
+ total_count: 25,
+ },
+ html_url: 'https://github.com/recodehive/recode-website/discussions',
+ labels: [
+ { name: 'welcome', color: '0075ca' },
+ { name: 'community', color: '7057ff' },
+ ],
+ },
+ {
+ id: '2',
+ title: 'How to contribute to open source projects?',
+ body: 'I\'m new to open source and would love to learn how to make my first contribution. Any tips or resources would be greatly appreciated!',
+ author: {
+ login: 'newcontributor',
+ avatar_url: 'https://avatars.githubusercontent.com/u/example?v=4',
+ html_url: 'https://github.com/newcontributor',
+ },
+ category: {
+ name: 'Q&A',
+ emoji: '❓',
+ },
+ created_at: new Date(Date.now() - 172800000).toISOString(),
+ updated_at: new Date(Date.now() - 7200000).toISOString(),
+ comments: 8,
+ reactions: {
+ total_count: 15,
+ },
+ html_url: 'https://github.com/recodehive/recode-website/discussions',
+ labels: [
+ { name: 'question', color: 'd876e3' },
+ { name: 'beginner', color: '0e8a16' },
+ ],
+ },
+ {
+ id: '3',
+ title: 'Feature Request: Dark Mode for Documentation',
+ body: 'It would be great to have a dark mode option for the documentation pages. This would be easier on the eyes during late-night coding sessions.',
+ author: {
+ login: 'darkmode-lover',
+ avatar_url: 'https://avatars.githubusercontent.com/u/example2?v=4',
+ html_url: 'https://github.com/darkmode-lover',
+ },
+ category: {
+ name: 'Ideas',
+ emoji: '💡',
+ },
+ created_at: new Date(Date.now() - 259200000).toISOString(),
+ updated_at: new Date(Date.now() - 10800000).toISOString(),
+ comments: 5,
+ reactions: {
+ total_count: 22,
+ },
+ html_url: 'https://github.com/recodehive/recode-website/discussions',
+ labels: [
+ { name: 'enhancement', color: 'a2eeef' },
+ { name: 'ui/ux', color: 'f9d0c4' },
+ ],
+ },
+ ];
+ }
}
export const githubService = new GitHubService();
{
+ const target = e.currentTarget;
+ target.style.display = 'none';
+ const fallback = target.nextElementSibling;
+ if (fallback) fallback.style.display = 'flex';
+ }}
+ />
+ ) : null}
+