From ad8d677aa4b38786c9924fc66673e0de5d3ed74f Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 2 Oct 2025 14:17:38 +0530 Subject: [PATCH] added events page --- docusaurus.config.js | 12 +- src/components/EventCard.tsx | 46 ++++ src/components/Events/ContributionGuide.tsx | 83 +++++++ src/components/Events/EventCard.tsx | 75 +++++++ src/components/Events/EventsGrid.tsx | 57 +++++ src/components/Events/FAQSection.tsx | 59 +++++ src/components/Events/GuideStep.tsx | 68 ++++++ src/components/Events/Header.tsx | 38 ++++ src/components/Events/Hero.tsx | 49 +++++ src/components/Events/ResourcesSection.tsx | 61 +++++ src/components/Events/events.ts | 51 +++++ src/components/Events/guide.ts | 208 ++++++++++++++++++ src/data/events.ts | 42 ++++ .../LinearSearchVisualizer.css | 93 -------- .../LinearSearchVisualizer/index.tsx | 88 -------- src/pages/events/hacktoberfest.md | 64 ++++++ src/pages/events/index.tsx | 40 ++++ src/theme/MDXComponents.js | 10 - 18 files changed, 949 insertions(+), 195 deletions(-) create mode 100644 src/components/EventCard.tsx create mode 100644 src/components/Events/ContributionGuide.tsx create mode 100644 src/components/Events/EventCard.tsx create mode 100644 src/components/Events/EventsGrid.tsx create mode 100644 src/components/Events/FAQSection.tsx create mode 100644 src/components/Events/GuideStep.tsx create mode 100644 src/components/Events/Header.tsx create mode 100644 src/components/Events/Hero.tsx create mode 100644 src/components/Events/ResourcesSection.tsx create mode 100644 src/components/Events/events.ts create mode 100644 src/components/Events/guide.ts create mode 100644 src/data/events.ts delete mode 100644 src/dsa/searching-algorithms/LinearSearchVisualizer/LinearSearchVisualizer.css delete mode 100644 src/dsa/searching-algorithms/LinearSearchVisualizer/index.tsx create mode 100644 src/pages/events/hacktoberfest.md create mode 100644 src/pages/events/index.tsx diff --git a/docusaurus.config.js b/docusaurus.config.js index e92150c10..774d8a9c1 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -247,22 +247,26 @@ const config = { to: "/projects/", }, { - label: "📚 E-books", + label: "E-books", to: "/ebooks/", }, { - label: "🛣️ Roadmap", + label: "Roadmap", to: "/roadmap/", }, { - label: "🧑‍💻 Live Editor", + label: "Live Editor", to: "/LiveEditor/", }, { - label: "📺 Broadcast", + label: "Broadcast", to: "https://codeharborhub-broadcast-web.vercel.app/", }, + { + label: "Events", + to: "/events/", + } ], }, // { diff --git a/src/components/EventCard.tsx b/src/components/EventCard.tsx new file mode 100644 index 000000000..617dd7250 --- /dev/null +++ b/src/components/EventCard.tsx @@ -0,0 +1,46 @@ +import Link from "@docusaurus/Link"; +import { Event } from "../data/events"; + +export default function EventCard({ event }: { event: Event }) { + return ( +
+ {event.name} +

+ {event.name} +

+

+ {event.dates} +

+

{event.description}

+
+ {event.tags.map((tag) => ( + + {tag} + + ))} +
+
+ + View Details + + + Official Site + +
+
+ ); +} diff --git a/src/components/Events/ContributionGuide.tsx b/src/components/Events/ContributionGuide.tsx new file mode 100644 index 000000000..869a9a3d0 --- /dev/null +++ b/src/components/Events/ContributionGuide.tsx @@ -0,0 +1,83 @@ +import { BookOpenCheck, ArrowLeft } from 'lucide-react'; +import GuideStep from './GuideStep'; +import FAQSection from './FAQSection'; +import ResourcesSection from './ResourcesSection'; +import { GUIDE_STEPS, FAQS, RESOURCES } from './guide'; + +interface ContributionGuideProps { + onBackToEvents: () => void; +} + +export default function ContributionGuide({ onBackToEvents }: ContributionGuideProps) { + return ( +
+
+
+ + +
+
+ +
+
+

+ Contribution Guide +

+

+ Your step-by-step journey into open source +

+
+
+ +

+ Contributing to open source can seem intimidating at first, but it's one of the most rewarding + ways to learn, teach, and build experience. This guide will walk you through every step of making + your first contribution, from finding a project to getting your pull request merged. +

+
+
+ +
+
+
+
+

+ Getting Started +

+
+ +
+ {GUIDE_STEPS.map((step, index) => ( + + ))} +
+
+ +
+ + +
+ +
+

Ready to Get Started?

+

+ Browse open source events and find the perfect project for your first contribution. +

+ +
+
+
+ ); +} diff --git a/src/components/Events/EventCard.tsx b/src/components/Events/EventCard.tsx new file mode 100644 index 000000000..ec7de2d71 --- /dev/null +++ b/src/components/Events/EventCard.tsx @@ -0,0 +1,75 @@ +import { Calendar, ExternalLink, CalendarPlus } from 'lucide-react'; +import { Event } from './events'; + +interface EventCardProps { + event: Event; + onAddToCalendar: (event: Event) => void; +} + +export default function EventCard({ event, onAddToCalendar }: EventCardProps) { + return ( +
+
+
+ {`${event.name} { + const target = e.target as HTMLImageElement; + target.style.display = 'none'; + const fallback = document.createElement('div'); + fallback.className = 'text-4xl font-bold text-gray-400 dark:text-gray-600'; + fallback.textContent = event.name.charAt(0); + target.parentElement?.appendChild(fallback); + }} + /> +
+ +
+

+ {event.name} +

+ +
+ + {event.start_date} – {event.end_date} +
+ +

+ {event.description} +

+ +
+ {event.tags.map((tag) => ( + + {tag} + + ))} +
+ +
+ + Learn More + + + +
+
+
+ ); +} diff --git a/src/components/Events/EventsGrid.tsx b/src/components/Events/EventsGrid.tsx new file mode 100644 index 000000000..45fa93b31 --- /dev/null +++ b/src/components/Events/EventsGrid.tsx @@ -0,0 +1,57 @@ +import { useState, useMemo } from 'react'; +import EventCard from './EventCard'; +import { Event, MOCK_EVENTS } from './events'; + +export default function EventsGrid() { + const [searchQuery, setSearchQuery] = useState(''); + const [selectedTags, setSelectedTags] = useState([]); + + + + const filteredEvents = useMemo(() => { + return MOCK_EVENTS.filter((event) => { + const matchesSearch = + searchQuery === '' || + event.name.toLowerCase().includes(searchQuery.toLowerCase()) || + event.description.toLowerCase().includes(searchQuery.toLowerCase()); + + const matchesTags = + selectedTags.length === 0 || + selectedTags.some((tag) => event.tags.includes(tag)); + + return matchesSearch && matchesTags; + }); + }, [searchQuery, selectedTags]); + + + + const handleAddToCalendar = (event: Event) => { + const title = encodeURIComponent(event.name); + const details = encodeURIComponent(event.description); + const dates = encodeURIComponent(`${event.start_date} - ${event.end_date}`); + + const googleCalendarUrl = `https://calendar.google.com/calendar/render?action=TEMPLATE&text=${title}&details=${details}%0A%0A${event.official_link}&dates=${dates}`; + + window.open(googleCalendarUrl, '_blank'); + }; + + return ( +
+ <> +
+ Showing {filteredEvents.length} {filteredEvents.length === 1 ? 'event' : 'events'} +
+ +
+ {filteredEvents.map((event) => ( + + ))} +
+ +
+ ); +} diff --git a/src/components/Events/FAQSection.tsx b/src/components/Events/FAQSection.tsx new file mode 100644 index 000000000..59db69db4 --- /dev/null +++ b/src/components/Events/FAQSection.tsx @@ -0,0 +1,59 @@ +import { useState } from 'react'; +import { ChevronDown, HelpCircle } from 'lucide-react'; +import { FAQ } from './guide'; + +interface FAQSectionProps { + faqs: FAQ[]; +} + +function FAQItem({ faq }: { faq: FAQ }) { + const [isOpen, setIsOpen] = useState(false); + + return ( +
+ + {isOpen && ( +
+

+ {faq.answer} +

+
+ )} +
+ ); +} + +export default function FAQSection({ faqs }: FAQSectionProps) { + return ( +
+
+
+ +
+

+ Frequently Asked Questions +

+
+

+ Common questions from new contributors, answered by the community. +

+
+ {faqs.map((faq) => ( + + ))} +
+
+ ); +} diff --git a/src/components/Events/GuideStep.tsx b/src/components/Events/GuideStep.tsx new file mode 100644 index 000000000..ec9db2370 --- /dev/null +++ b/src/components/Events/GuideStep.tsx @@ -0,0 +1,68 @@ +import { CheckCircle2, Lightbulb, Code } from 'lucide-react'; +import { GuideStep as GuideStepType } from '../types/guide'; + +interface GuideStepProps { + step: GuideStepType; + index: number; +} + +export default function GuideStep({ step, index }: GuideStepProps) { + return ( +
+
+ {index + 1} +
+ +
+ +
+

+ {step.title} +

+

+ {step.description} +

+ +
+
    + {step.content.map((item, i) => ( +
  • + + {item} +
    • + ))} +
+ + {step.codeExample && ( +
+
+ +

Code Example

+
+ 
+                {step.codeExample}
+
+
+ )} + + {step.tips && step.tips.length > 0 && ( +
+
+ +

Pro Tips

+
+
    + {step.tips.map((tip, i) => ( +
  • + • + {tip} +
    • + ))} +
+
+ )} +
+
+
+ ); +} diff --git a/src/components/Events/Header.tsx b/src/components/Events/Header.tsx new file mode 100644 index 000000000..a08443514 --- /dev/null +++ b/src/components/Events/Header.tsx @@ -0,0 +1,38 @@ +import { Moon, Sun, Code2 } from 'lucide-react'; +import { useTheme } from '../context/ThemeContext'; + +export default function Header() { + const { theme, toggleTheme } = useTheme(); + + return ( +
+
+
+
+
+ +
+
+

+ CodeHarborHub +

+

Open Source Events

+
+
+ + +
+
+
+ ); +} diff --git a/src/components/Events/Hero.tsx b/src/components/Events/Hero.tsx new file mode 100644 index 000000000..93c12ef83 --- /dev/null +++ b/src/components/Events/Hero.tsx @@ -0,0 +1,49 @@ +import { Calendar, Users, Globe } from 'lucide-react'; + +export default function Hero() { + return ( +
+
+ +
+
+

+ Open Source Events +

+ +

+ Discover & Join Open Source Events With CodeHarborHub +

+ +

+ Connect with the global open-source community through hackathons, mentorship programs, + and collaborative coding events. Whether you're a beginner or an experienced developer, + there's an event for you. +

+ +
+
+ +

Year-Round Events

+

Ongoing opportunities to contribute

+
+ +
+ +

Community Driven

+

Connect with developers worldwide

+
+ +
+ +

Global Programs

+

Participate from anywhere

+
+
+
+
+ +
+
+ ); +} diff --git a/src/components/Events/ResourcesSection.tsx b/src/components/Events/ResourcesSection.tsx new file mode 100644 index 000000000..4501e4cf4 --- /dev/null +++ b/src/components/Events/ResourcesSection.tsx @@ -0,0 +1,61 @@ +import { ExternalLink, BookOpen } from 'lucide-react'; +import { Resource } from './guide'; + +interface ResourcesSectionProps { + resources: Resource[]; +} + +export default function ResourcesSection({ resources }: ResourcesSectionProps) { + const categories = Array.from(new Set(resources.map((r) => r.category))); + + return ( +
+
+
+ +
+

+ Helpful Resources +

+
+

+ Curated collection of guides, tools, and learning materials to help you on your open-source journey. +

+ +
+ {categories.map((category) => ( +
+

+ {category} +

+
+ {resources + .filter((r) => r.category === category) + .map((resource) => ( + +
+
+

+ {resource.title} +

+

+ {resource.description} +

+
+ +
+ + ))} +
+
+ ))} +
+
+ ); +} diff --git a/src/components/Events/events.ts b/src/components/Events/events.ts new file mode 100644 index 000000000..46a4f9276 --- /dev/null +++ b/src/components/Events/events.ts @@ -0,0 +1,51 @@ +export interface Event { + id: string; + name: string; + slug: string; + description: string; + logo_url: string; + start_date: string; + end_date: string; + official_link: string; + tags: string[]; + is_active: boolean; +} + +export const MOCK_EVENTS: Event[] = [ + { + id: '1', + name: 'Hacktoberfest', + slug: 'hacktoberfest', + description: 'Celebrate open-source with Hacktoberfest! Contribute to projects, earn swag, and support the community.', + logo_url: 'https://hacktoberfest.com/_next/static/media/logo-hacktoberfest-12--nav.0ac01b46.svg', + start_date: 'October 1', + end_date: 'October 31', + official_link: '/events/hacktoberfest/', + tags: ['Beginner Friendly', 'Global', 'Annual'], + is_active: true, + }, + { + id: '2', + name: 'Google Summer of Code', + slug: 'google-summer-of-code', + description: 'A global program focused on bringing student developers into open source software development.', + logo_url: 'https://developers.google.com/open-source/gsoc/resources/downloads/GSoC-logo-horizontal.svg', + start_date: 'May', + end_date: 'August', + official_link: 'https://summerofcode.withgoogle.com/', + tags: ['Student Program', 'Global', 'Mentorship'], + is_active: true, + }, + { + id: '3', + name: 'GirlScript Summer of Code', + slug: 'gssoc', + description: 'A 3-month-long open-source program by GirlScript Foundation helping beginners get into open-source development.', + logo_url: 'https://tse1.mm.bing.net/th/id/OIP.h7OBAsph2Bb1K4W9C6jiLQHaCS?pid=Api&P=0&h=180', + start_date: 'March', + end_date: 'May', + official_link: 'https://gssoc.girlscript.tech/', + tags: ['Beginner Friendly', 'Student Program', 'Mentorship'], + is_active: true, + }, +]; diff --git a/src/components/Events/guide.ts b/src/components/Events/guide.ts new file mode 100644 index 000000000..ff8bcc50e --- /dev/null +++ b/src/components/Events/guide.ts @@ -0,0 +1,208 @@ +export interface GuideStep { + id: string; + title: string; + description: string; + content: string[]; + codeExample?: string; + tips?: string[]; +} + +export interface FAQ { + id: string; + question: string; + answer: string; +} + +export interface Resource { + id: string; + title: string; + description: string; + url: string; + category: string; +} + +export const GUIDE_STEPS: GuideStep[] = [ + { + id: '1', + title: 'Find a Project', + description: 'Discover open-source projects that match your interests and skill level', + content: [ + 'Browse events like Hacktoberfest, GSoC, or GSSoC to find participating projects', + 'Look for repositories with "good first issue" or "beginner-friendly" labels', + 'Check the project\'s README and CONTRIBUTING.md files to understand their needs', + 'Ensure the project is actively maintained (recent commits, responsive maintainers)', + ], + tips: [ + 'Start with projects in languages you\'re comfortable with', + 'Look for projects with clear documentation', + 'Join the project\'s community channels (Discord, Slack, etc.)', + ], + }, + { + id: '2', + title: 'Set Up Your Environment', + description: 'Prepare your development environment and tools', + content: [ + 'Install Git on your computer and configure it with your details', + 'Create a GitHub account if you don\'t have one', + 'Fork the repository to your GitHub account', + 'Clone your forked repository to your local machine', + 'Set up the project according to the README instructions', + ], + codeExample: `# Configure Git +git config --global user.name "Your Name" +git config --global user.email "your.email@example.com" + +# Fork and clone +git clone https://github.com/YOUR-USERNAME/PROJECT-NAME.git +cd PROJECT-NAME + +# Add upstream remote +git remote add upstream https://github.com/ORIGINAL-OWNER/PROJECT-NAME.git`, + tips: [ + 'Use a good code editor like VS Code, WebStorm, or Vim', + 'Install recommended extensions for the project\'s language', + 'Test that the project runs successfully before making changes', + ], + }, + { + id: '3', + title: 'Choose an Issue', + description: 'Select an issue to work on and communicate with maintainers', + content: [ + 'Browse the project\'s issue tracker for open issues', + 'Look for issues labeled "good first issue", "help wanted", or "beginner-friendly"', + 'Read the issue description carefully and ask questions if anything is unclear', + 'Comment on the issue to express your interest in working on it', + 'Wait for maintainer approval before starting work', + ], + tips: [ + 'Don\'t work on issues already assigned to someone else', + 'Start small - your first contribution doesn\'t need to be complex', + 'Read through past issues and PRs to understand the project\'s standards', + ], + }, + { + id: '4', + title: 'Make Your Changes', + description: 'Write clean code following the project\'s guidelines', + content: [ + 'Create a new branch for your work (never work directly on main)', + 'Make your changes following the project\'s coding style and conventions', + 'Write clear, descriptive commit messages', + 'Test your changes thoroughly', + 'Update documentation if your changes require it', + ], + codeExample: `# Create a new branch +git checkout -b fix-issue-123 + +# Make your changes, then stage and commit +git add . +git commit -m "Fix: Description of what you fixed (closes #123)" + +# Push to your fork +git push origin fix-issue-123`, + tips: [ + 'Keep commits focused on a single logical change', + 'Use present tense in commit messages ("Fix bug" not "Fixed bug")', + 'Run tests and linters before committing', + ], + }, + { + id: '5', + title: 'Submit a Pull Request', + description: 'Create a pull request and work with maintainers on review', + content: [ + 'Push your changes to your forked repository', + 'Go to the original repository and create a new pull request', + 'Fill out the PR template completely and clearly', + 'Reference the issue number your PR addresses', + 'Be patient and responsive to feedback from maintainers', + 'Make requested changes promptly and professionally', + ], + tips: [ + 'Write a clear PR title and description', + 'Add screenshots or videos if your changes are visual', + 'Don\'t be discouraged by change requests - they\'re part of the process', + 'Celebrate when your PR is merged!', + ], + }, +]; + +export const FAQS: FAQ[] = [ + { + id: '1', + question: 'Do I need to be an expert programmer to contribute?', + answer: 'Not at all! Open source welcomes contributors of all skill levels. You can start with documentation improvements, bug reports, or simple code fixes. Many projects specifically label issues for beginners.', + }, + { + id: '2', + question: 'What if my pull request gets rejected?', + answer: 'Don\'t take it personally! Rejections are common and often come with valuable feedback. Learn from the comments, improve your approach, and try again. Every rejection is a learning opportunity.', + }, + { + id: '3', + question: 'How do I find time to contribute?', + answer: 'Start small! Even 30 minutes a week can make a difference. Many contributors work on open source during weekends or set aside specific time blocks. The key is consistency, not quantity.', + }, + { + id: '4', + question: 'What if I make a mistake?', + answer: 'Mistakes are normal and expected! That\'s why we have code review and testing. Maintainers understand you\'re learning. Just be open to feedback, fix issues when they arise, and keep improving.', + }, + { + id: '5', + question: 'Can I contribute to multiple projects at once?', + answer: 'Yes, but it\'s better to focus on one or two projects initially. This helps you understand each project\'s culture and standards deeply. As you gain experience, you can contribute to more projects.', + }, + { + id: '6', + question: 'What if maintainers don\'t respond to my PR?', + answer: 'Be patient - maintainers are often volunteers with limited time. Wait at least a week before politely following up. If there\'s still no response after multiple attempts, it\'s okay to move on to other projects.', + }, +]; + +export const RESOURCES: Resource[] = [ + { + id: '1', + title: 'GitHub Docs - Contributing to Projects', + description: 'Official GitHub guide on forking, cloning, and contributing to repositories', + url: 'https://docs.github.com/en/get-started/quickstart/contributing-to-projects', + category: 'Getting Started', + }, + { + id: '2', + title: 'First Contributions', + description: 'Hands-on tutorial that walks you through making your first contribution', + url: 'https://github.com/firstcontributions/first-contributions', + category: 'Getting Started', + }, + { + id: '3', + title: 'Good First Issues', + description: 'Curated list of projects with good first issues for new contributors', + url: 'https://goodfirstissue.dev/', + category: 'Finding Projects', + }, + { + id: '4', + title: 'Up For Grabs', + description: 'List of projects with tasks specifically for new contributors', + url: 'https://up-for-grabs.net/', + category: 'Finding Projects', + }, + { + id: '5', + title: 'How to Write a Git Commit Message', + description: 'Comprehensive guide to writing clear, effective commit messages', + url: 'https://chris.beams.io/posts/git-commit/', + category: 'Best Practices', + }, + { + id: '6', + title: 'Open Source Guide', + description: 'Collection of resources about running and contributing to open source', + url: 'https://opensource.guide/', + category: 'Best Practices', + }, +]; diff --git a/src/data/events.ts b/src/data/events.ts new file mode 100644 index 000000000..be23b1732 --- /dev/null +++ b/src/data/events.ts @@ -0,0 +1,42 @@ +export interface Event { + id: string; + name: string; + logo: string; + dates: string; + description: string; + link: string; + tags: string[]; +} + +export const events: Event[] = [ + { + id: "hacktoberfest", + name: "Hacktoberfest", + logo: "/images/hacktoberfest.png", + dates: "October 1–31", + description: + "Celebrate open-source with Hacktoberfest! Contribute to projects, earn swag, and support the community.", + link: "https://hacktoberfest.com/", + tags: ["Global", "Beginner Friendly"], + }, + { + id: "gsoc", + name: "Google Summer of Code", + logo: "/images/gsoc.png", + dates: "May–August", + description: + "A global program focused on bringing student developers into open source software development.", + link: "https://summerofcode.withgoogle.com/", + tags: ["Student Program", "Global"], + }, + { + id: "gssoc", + name: "GirlScript Summer of Code", + logo: "/images/gssoc.png", + dates: "March–May", + description: + "A 3-month-long open-source program by GirlScript Foundation helping beginners get into open-source development.", + link: "https://gssoc.girlscript.tech/", + tags: ["Beginner Friendly", "Community"], + }, +]; diff --git a/src/dsa/searching-algorithms/LinearSearchVisualizer/LinearSearchVisualizer.css b/src/dsa/searching-algorithms/LinearSearchVisualizer/LinearSearchVisualizer.css deleted file mode 100644 index 5ac88bcda..000000000 --- a/src/dsa/searching-algorithms/LinearSearchVisualizer/LinearSearchVisualizer.css +++ /dev/null @@ -1,93 +0,0 @@ -.linear-search-container { - text-align: center; - border-radius: 8px; - border: 1px solid var(--ifm-color-primary); - padding: 20px; -} - -.linear-search-container .array-container { - display: flex; - justify-content: center; - margin-top: 20px; -} - -.linear-search-container .array-container .array-item { - width: 40px; - height: 180px; - margin: 5px; - display: flex; - justify-content: center; - align-items: flex-end; - background: linear-gradient( - to bottom, - #beec06 0%, - #dcfc0e 50%, - #ffef1057 100% - ); - color: #000; - font-size: 20px; - border-radius: 50%; - position: relative; - transition: background-color 0.3s ease-in-out; - padding-bottom: 10px; -} - -.linear-search-container .array-container .array-item:before { - content: ""; - position: absolute; - bottom: -20px; - left: 50%; - transform: translateX(-50%); - width: 30px; - height: 30px; - background-color: maroon; - border: 1px solid rgba(51, 51, 51, 0.576); - border-top-left-radius: 50%; - border-top-right-radius: 50%; -} - -.linear-search-container .array-container .array-item:after { - content: ""; - position: absolute; - bottom: -20px; - left: 50%; - transform: translateX(-50%); - width: 10px; - height: 20px; - background-color: var(--ifm-color-primary); - border-radius: 50%; -} - -.linear-search-container .array-item.current { - background: yellow; - border: 2px solid var(--ifm-color-primary); -} - -.linear-search-container .array-item.found { - background: var(--ifm-color-primary); -} - -.linear-search-container .controls { - margin-top: 15px; -} - -.linear-search-container .controls::before { - content: ""; - display: block; - width: 100%; - height: 1px; - background-color: var(--ifm-color-primary); - margin: 10px 0; -} - -.linear-search-container .controls input { - padding: 5px; - font-size: 16px; -} - -.linear-search-container .controls button { - padding: 5px 10px; - font-size: 16px; - margin-left: 10px; - cursor: pointer; -} diff --git a/src/dsa/searching-algorithms/LinearSearchVisualizer/index.tsx b/src/dsa/searching-algorithms/LinearSearchVisualizer/index.tsx deleted file mode 100644 index 6f9b93413..000000000 --- a/src/dsa/searching-algorithms/LinearSearchVisualizer/index.tsx +++ /dev/null @@ -1,88 +0,0 @@ -import React, { useState } from 'react'; -import './LinearSearchVisualizer.css'; -import Heading from "@theme/Heading"; - -const LinearSearchVisualizer: React.FC = () => { - const [array, setArray] = useState([5, 3, 8, 2, 9, 1, 7]); - const [target, setTarget] = useState(null); - const [currentIndex, setCurrentIndex] = useState(null); - const [foundIndex, setFoundIndex] = useState(null); - const [searching, setSearching] = useState(false); - - const handleSearch = () => { - if (target === null) { - alert('Please enter a target number.'); - return; - } - setCurrentIndex(null); - setFoundIndex(null); - setSearching(true); - let found = false; - let animationDelay = 0; - for (let i = 0; i < array.length; i++) { - setTimeout(() => { - setCurrentIndex(i); - if (array[i] === target) { - setFoundIndex(i); - found = true; - } - if (i === array.length - 1 && !found) { - setSearching(false); - } - }, animationDelay); - animationDelay += 1000; // Adjust animation delay here (in milliseconds) - if (array[i] === target) break; - } - }; - - const resetVisualization = () => { - setTarget(null); - setCurrentIndex(null); - setFoundIndex(null); - setSearching(false); - }; - - const shuffleArray = () => { - const shuffledArray = [...array].sort(() => Math.random() - 0.5); - setArray(shuffledArray); - resetVisualization(); - }; - - return ( -
- Linear Search Visualization -
- {array.map((num, index) => ( -
- {num} -
- ))} -
-
- setTarget(Number(e.target.value))} - placeholder="Enter target number" - disabled={searching} - /> - - - -
-
- ); -}; - -export default LinearSearchVisualizer; diff --git a/src/pages/events/hacktoberfest.md b/src/pages/events/hacktoberfest.md new file mode 100644 index 000000000..1508d5e53 --- /dev/null +++ b/src/pages/events/hacktoberfest.md @@ -0,0 +1,64 @@ +--- +id: hacktoberfest +title: Hacktoberfest +sidebar_label: Hacktoberfest +tags: [hacktoberfest, open-source, contribution, github, git] +description: "Hacktoberfest is a month-long celebration of open-source software development where developers worldwide contribute to projects, earn swag, and grow with the community." +keywords: [hacktoberfest, open-source, github, git, contributions, digitalocean, annual event, october] +--- + +**Dates:** 🗓 October 1 – October 31 +**Type:** 🌟 Beginner Friendly • Global • Annual + +Hacktoberfest is an annual, month-long event celebrating open-source software. It encourages developers of all skill levels—from complete beginners to seasoned contributors—to engage with the open-source community. + +Participants can contribute to various projects, fix bugs, improve documentation, add features, and more. In return, they get a chance to **earn cool swag, t-shirts, or digital rewards**, while supporting the community and learning real-world software practices. + +--- + +## 🎯 Why Participate? + +- ✅ **Beginner Friendly**: Great for first-time contributors. +- 🌍 **Global Event**: Thousands of developers around the world take part. +- 🏆 **Rewards & Recognition**: Earn swag or digital rewards. +- 🤝 **Networking**: Collaborate with developers, maintainers, and organizations. +- 📈 **Skill Building**: Improve Git, GitHub, and open-source contribution skills. + +--- + +## 🚀 How to Get Started + +1. **Register** on the official Hacktoberfest website: [Hacktoberfest](https://hacktoberfest.com/) +2. **Find Projects**: Look for repositories with the label `hacktoberfest` on GitHub or GitLab. +3. **Make Contributions**: Fix bugs, add documentation, or build new features. +4. **Submit Pull Requests**: Quality PRs count towards completion. +5. **Complete 4 PRs**: Successfully merge at least four pull requests during October. + +--- + +## 📌 Key Guidelines + +- PRs should be **meaningful** (not spammy). +- Follow each project's **contribution guidelines**. +- Contributions can be **code, documentation, or even design fixes**. +- Be respectful and collaborate with maintainers. + +--- + +## 🔗 Useful Links + +- 🌐 [Hacktoberfest Official Website](https://hacktoberfest.com/) +- 📂 [Hacktoberfest Projects on GitHub](https://github.com/topics/hacktoberfest) +- 📖 [Beginner’s Guide to Hacktoberfest](https://hacktoberfest.com/participation/) + +:::tip + +Start early in October to have ample time for contributions and to address any feedback from maintainers. + +::: + +--- + +## 🏁 Conclusion + +Hacktoberfest is not just about swag—it’s about building a habit of contributing to open source, improving your skills, and joining a global developer community. Whether you're a beginner or an expert, this is your chance to **make an impact in open source**. \ No newline at end of file diff --git a/src/pages/events/index.tsx b/src/pages/events/index.tsx new file mode 100644 index 000000000..29896bdde --- /dev/null +++ b/src/pages/events/index.tsx @@ -0,0 +1,40 @@ +import Layout from "@theme/Layout"; +import { useState } from "react"; + +import Hero from "@site/src/components/Events/Hero"; +import EventsGrid from "@site/src/components/Events/EventsGrid"; +import ContributionGuide from "@site/src/components/Events/ContributionGuide"; + +export default function EventsPage() { + const [currentView, setCurrentView] = useState<"events" | "guide">("events"); + return ( + + {currentView === "events" ? ( + <> + + +
+
+

New to Open Source?

+

+ Check out our comprehensive guide to learn how to make your + first contribution. +

+ +
+
+ + ) : ( + setCurrentView("events")} /> + )} + + ); +} diff --git a/src/theme/MDXComponents.js b/src/theme/MDXComponents.js index 013995ddd..0deb9d610 100644 --- a/src/theme/MDXComponents.js +++ b/src/theme/MDXComponents.js @@ -6,10 +6,6 @@ import BrowserWindow from "@site/src/components/BrowserWindow"; import CollectionList from "@site/src/components/CollectionList"; import Contributors from "@site/src/components/Contributors"; import Courses from "@site/src/components/Courses"; -import ArrayVisualizations from "@site/src/components/DSA/arrays/ArrayVisualizations"; -import BubbleSortVisualization from "@site/src/components/DSA/arrays/BubbleSortVisualization"; -import InsertionSortVisualization from "@site/src/components/DSA/arrays/InsertionSortVisualization"; -import SelectionSortVisualization from "@site/src/components/DSA/arrays/SelectionSortVisualization"; import File from "@site/src/components/File"; import GiscusComponent from "@site/src/components/GiscusComponent"; import Highlight from "@site/src/components/Highlight"; @@ -17,7 +13,6 @@ import Lesson from "@site/src/components/Lesson"; import SolutionAuthor from "@site/src/components/SolutionAuthor"; import Table from "@site/src/components/Table"; import TutorialAuthors from "@site/src/components/TutorialAuthors"; -import LinearSearchVisualizer from "@site/src/dsa/searching-algorithms/LinearSearchVisualizer"; import MDXComponents from "@theme-original/MDXComponents"; import DocCardList from "@theme/DocCardList"; import Image from "@theme/IdealImage"; @@ -42,20 +37,15 @@ export default { BrowserWindow, Highlight, GiscusComponent, - ArrayVisualizations, - BubbleSortVisualization, - SelectionSortVisualization, CollectionList, DocCardList, FaReact, Courses, - InsertionSortVisualization, File, Lesson, Image, LiteYouTubeEmbed, Author, - LinearSearchVisualizer, AdsComponent, Comming, Admonition,