feat(navbar): Created a subcategory Hacktoberfest under open-source c…

…ategory (#2515)

components/SideNavbar/SideNavbarCategory.tsx

@@ -35,8 +35,10 @@ export const SideNavbarCategory: FC<{
   categoryData: ISidebar;
   expand: boolean;
   listRef: MutableRefObject<HTMLUListElement | null>;
-}> = ({ categoryData, expand, listRef }) => {
+  updated: boolean;
+}> = ({ categoryData, expand, listRef, updated}) => {
   const [isOpen, setIsOpen] = useState(expand);
+  const [hasUpdated, setHasUpdated] = useState(categoryData);
   const router = useRouter();
   const { category, subcategory } = categoryData;
   const sortedSubcategoryList = subcategory
@@ -49,7 +51,8 @@ export const SideNavbarCategory: FC<{
 
   useEffect(() => {
     setIsOpen(expand);
-  }, [expand]);
+    // setHasUpdated(categoryData);
+  }, [expand, categoryData]);
 
   const handleToggle = () => {
     setIsOpen(!isOpen);
@@ -59,6 +62,12 @@ export const SideNavbarCategory: FC<{
     setIsOpen(false);
     router.replace('/');
   };
+
+  // const handleUpdate = () => {
+  //   setHasUpdated(!hasUpdated);
+  //   handleUpdate();
+  // };
+
   useOnClickOutside(listRef, handleClickOutside);
 
   return (
@@ -69,11 +78,13 @@ export const SideNavbarCategory: FC<{
         aria-label={`toggle ${category.toLowerCase()} category`}
         href={`/${category}`}
       >
+        { category === 'open-source' ? 'New' : ''}
         <h1
           className={`text-slate-500 dark:text-slate-300 text-lg font-sans font-medium w-4/5 truncate ${
             category.length < 4 ? 'uppercase' : 'capitalize'
           }`}
         >
+          {/* { category === 'open-source' ? '<strong>New' : capitalizeCategory(category)} */}
           {capitalizeCategory(category)}
         </h1>
         <Icons.angleDown

components/TopBar/CategoryDescriptions.ts

@@ -106,6 +106,8 @@ const categoryDescriptions: CategoryDescriptions = {
     // Open-source
   articles:
     'There are many open source blogging platforms available for developers. Some of the most popular ones include WordPress, Joomla, and Drupal1. Other open source blogging platforms include Ghost, Serendipity, SilverStripe, and Jekyll',
+  hacktoberfest:
+    'A month-long celebration of open-source projects, their maintainers, and the entire community of contributors.',
   projects:
     'Anyone can contribute to the projects are called OpenSource Projects. There are many open source projects available for developers. Some of the most popular ones include Linux, Git, and Apache1. Other open source projects include Kubernetes, TensorFlow, and React Native',
   tools:

database/data.ts

@@ -137,6 +137,11 @@ export const sidebarData: ISidebar[] = [
         url: '/articles',
         resources: DB.openSourceArticles,
       },
+      {
+        name: 'Hacktoberfest',
+        url: '/hacktoberfest',
+        resources: DB.openSourceHacktoberfest,
+      },
       {
         name: 'Programs',
         url: '/os_programs',

database/index.ts

@@ -91,6 +91,7 @@ export { default as tensorflow } from './ai_tools/tensorflow.json'
 
 // Open-source
 export { default as openSourceArticles } from './open_source/articles.json'
+export { default as openSourceHacktoberfest} from './open_source/hacktoberfest.json'
 export { default as openSourcePrograms } from './open_source/os_programs.json'
 export { default as openSourceProjects } from './open_source/projects.json'
 export { default as openSourceTools } from './open_source/tools.json'

database/open_source/hacktoberfest.json

@@ -0,0 +1,7 @@
+[{
+    "name": "Hacktoberfest Official Site",
+    "description": "Hacktoberfest: a month-long celebration of open-source projects, their maintainers, and the entire community of contributors.",
+    "url": "https://hacktoberfest.com/",
+    "category": "open-source",
+    "subcategory": "hacktoberfest"
+}]